Introduction
Loyalty programs are a powerful way to build lasting relationships with your customers. They not only encourage repeat purchases but also create a sense of community around your brand. However, the key to a successful loyalty program lies in its presentation and ease of use. A well-designed loyalty template ensures your customers understand the benefits and are motivated to engage with your program.
In this article, we’ll guide you through the process of setting up a loyalty template that is visually appealing, easy to navigate, and optimized for engagement
Note📝: You need to change CSS according to your theme
There are 2 ways to add this code to the page -:
1.) Add code on page
2.) Another way to create the template and add a template on the page
Code:
<div class="page-widths">
<div class="grids">
<div class="grid__items">
<div class="rte">
<div class="loyalty-front-page-ui-three">
<div class="main-banner">
<div class="site-container">
<div class="main-banner-left-sec">
<div class="main-page-text text-times-new-roman">Welcome to <br /> the Loyalty reward</div>
<div class="main-page-sub-text text-arial">Become a member and earn points & exclusive rewards every time you shop.</div>
<div class="">{% if customer %}<a href="#" class="main_btn text-arial ait-trigger-wayto-earn-points">Rewards</a> {% else %}<a href="#" class="main_btn text-arial ait-trigger-wayto-earn-points">Join Rewards</a> <a href="/account/login" class="main_btn login_btn text-arial">Login</a>{% endif %}</div>
</div>
<div class="main-banner-right-sec hide-in-desktop"><img src="https://app.aitrillion.com/assets/loyalty/images/loyalty-template3-banner-mobile_1.png" alt="loaylty rewards program" /></div>
</div>
</div>
<div class="reward-section">
<div class="site-container">
<div class="section-header">
<div class="section-header-main text-times-new-roman">How it works</div>
</div>
<div class="section-content">
<div class="rewards"><a class="reward-box">
<div class="reward-count text-times-new-roman">01</div>
<div class="reward-box-heading text-arial">Sign up</div>
<div class="reward-box-desc text-arial">Create or sign in and start earning.</div>
</a> <a class="reward-box ait-trigger-wayto-earn-points">
<div class="reward-count text-times-new-roman">02</div>
<div class="reward-box-heading text-arial ">Earn Points</div>
<div class="reward-box-desc text-arial">With make purchase and shop visit.</div>
</a> <a class="reward-box ait-trigger-redeem-points">
<div class="reward-count text-times-new-roman">03</div>
<div class="reward-box-heading text-arial">Redeem points</div>
<div class="reward-box-desc text-arial">For exclusive discount on products.</div>
</a></div>
</div>
</div>
</div>
<div class="earnpoint-section">
<div class="site-container">
<div class="section-header">
<div class="section-header-main text-times-new-roman">Ways to earn points</div>
</div>
<div class="section-content">
<div class="earn-point-sec">
<div class="earn-point-col">
<div class="earn-point-box ait-trigger-wayto-earn-points">
<div class="img_box"><svg width="51" height="52" viewbox="0 0 51 52" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask0_3536_3363" style="mask-type: luminance;" maskunits="userSpaceOnUse" x="0" y="0" width="51" height="52"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.357422H50.081V51.8804H0V0.357422Z" fill="white"></path> </mask> <g mask="url(#mask0_3536_3363)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.941 16.1624C13.941 9.95842 18.988 4.91142 25.192 4.91142C31.396 4.91142 36.443 9.95842 36.443 16.1614C36.443 22.2274 31.618 27.1864 25.605 27.4044C25.417 27.4005 25.229 27.3985 25.041 27.3984C24.931 27.3984 24.822 27.4014 24.713 27.4024C18.731 27.1504 13.941 22.2054 13.941 16.1624ZM42.637 33.7994C40.239 31.6994 37.444 30.0824 34.404 28.9974C38.394 26.1254 40.997 21.4424 40.997 16.1624C40.997 7.44742 33.907 0.357422 25.192 0.357422C16.477 0.357422 9.387 7.44742 9.387 16.1624C9.387 21.3984 11.947 26.0474 15.882 28.9254C12.762 30.0094 9.896 31.6534 7.444 33.7994C2.644 38.0014 0 43.6144 0 49.6034C0 50.2073 0.239898 50.7865 0.666918 51.2135C1.09394 51.6405 1.6731 51.8804 2.277 51.8804C2.8809 51.8804 3.46006 51.6405 3.88708 51.2135C4.3141 50.7865 4.554 50.2073 4.554 49.6034C4.554 39.9814 13.536 32.1344 24.656 31.9574C24.9812 31.9683 25.3067 31.9693 25.632 31.9604C36.656 32.2314 45.527 40.0404 45.527 49.6034C45.527 50.2073 45.7669 50.7865 46.1939 51.2135C46.6209 51.6405 47.2001 51.8804 47.804 51.8804C48.4079 51.8804 48.9871 51.6405 49.4141 51.2135C49.8411 50.7865 50.081 50.2073 50.081 49.6034C50.081 43.6144 47.437 38.0014 42.637 33.7994Z" fill="#A95EF1"></path> </g> </svg></div>
<div class="earn-point-text text-arial">25 Points</div>
<div class="earn-point-subtext text-arial">Welcome Points</div>
</div>
</div>
<div class="earn-point-col">
<div class="earn-point-box ait-trigger-wayto-earn-points">
<div class="img_box"><svg width="51" height="52" viewbox="0 0 51 52" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M25.48 47.3974C13.592 47.3974 3.92 37.7254 3.92 25.8374C3.92 13.9494 13.592 4.27742 25.48 4.27742C37.368 4.27742 47.04 13.9494 47.04 25.8374C47.04 37.7254 37.368 47.3974 25.48 47.3974ZM25.48 0.357422C11.43 0.357422 0 11.7874 0 25.8374C0 39.8874 11.43 51.3174 25.48 51.3174C39.53 51.3174 50.96 39.8874 50.96 25.8374C50.96 11.7874 39.53 0.357422 25.48 0.357422Z" fill="#A95EF1"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M25.4735 16.1426C26.4998 16.1418 27.4845 16.5482 28.2115 17.2726C28.9386 17.997 29.3485 18.9803 29.3515 20.0066C29.3515 20.5264 29.558 21.0249 29.9255 21.3925C30.2931 21.7601 30.7916 21.9666 31.3115 21.9666C31.8313 21.9666 32.3298 21.7601 32.6974 21.3925C33.065 21.0249 33.2715 20.5264 33.2715 20.0066C33.2715 16.3916 30.7845 13.3536 27.4335 12.4806V11.2276C27.4335 10.7078 27.227 10.2092 26.8594 9.84165C26.4918 9.47408 25.9933 9.26758 25.4735 9.26758C24.9536 9.26758 24.4551 9.47408 24.0875 9.84165C23.72 10.2092 23.5135 10.7078 23.5135 11.2276V12.4826C20.1685 13.3556 17.6895 16.3926 17.6895 20.0076C17.6895 24.2996 21.1805 27.7926 25.4735 27.7926C26.4998 27.7918 27.4845 28.1982 28.2115 28.9226C28.9386 29.647 29.3485 30.6303 29.3515 31.6566C29.3501 32.6847 28.9411 33.6703 28.2142 34.3973C27.4872 35.1243 26.5016 35.5333 25.4735 35.5346C23.3435 35.5346 21.6095 33.7946 21.6095 31.6566C21.6095 31.1368 21.403 30.6382 21.0354 30.2706C20.6678 29.9031 20.1693 29.6966 19.6495 29.6966C19.1296 29.6966 18.6311 29.9031 18.2635 30.2706C17.896 30.6382 17.6895 31.1368 17.6895 31.6566C17.6895 35.2766 20.1695 38.3196 23.5135 39.1936V40.4496C23.5135 40.9694 23.72 41.4679 24.0875 41.8355C24.4551 42.2031 24.9536 42.4096 25.4735 42.4096C25.9933 42.4096 26.4918 42.2031 26.8594 41.8355C27.227 41.4679 27.4335 40.9694 27.4335 40.4496V39.1946C30.7845 38.3216 33.2715 35.2776 33.2715 31.6566C33.2715 27.3646 29.7725 23.8726 25.4735 23.8726C24.4489 23.8713 23.4667 23.4636 22.7423 22.739C22.0179 22.0145 21.6105 21.0321 21.6095 20.0076C21.6108 18.9832 22.0183 18.0011 22.7427 17.2768C23.467 16.5524 24.4491 16.1439 25.4735 16.1426Z" fill="#A95EF1"></path> </svg></div>
<div class="earn-point-text text-arial">10 Points Per $1.00</div>
<div class="earn-point-subtext text-arial">Make Purchase</div>
</div>
</div>
<div class="earn-point-col">
<div class="earn-point-box ait-trigger-wayto-earn-points">
<div class="img_box"><svg width="58" height="59" viewbox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M18.9852 18.2072L25.9852 4.00718C26.9592 1.86518 30.0182 1.80918 31.1022 3.83818L38.1852 18.2082L53.5852 20.4082C55.9282 20.7982 56.9372 23.4752 55.3092 25.2772L55.1852 25.4072L43.9852 36.4072L46.5852 51.8072C46.9762 54.1512 44.6952 55.9232 42.5392 55.0722L42.3852 55.0072L28.5852 47.6072L14.5852 55.0072C12.6322 55.9842 10.1062 54.2892 10.3622 51.9742L10.3852 51.8072L13.1852 36.4072L1.78524 25.4072C0.22524 23.6522 1.13724 20.9472 3.22324 20.4422L3.38524 20.4072L18.9852 18.2072ZM35.3982 22.0522L28.5852 8.23118L21.7712 22.0562L6.58024 24.1972L17.7202 34.9472L14.9732 50.0502L28.6002 42.8492L42.0282 50.0492L39.4792 34.9462L50.4232 24.1972L35.3982 22.0522Z" fill="#A95EF1"></path> </svg></div>
<div class="earn-point-text text-arial">10 Points</div>
<div class="earn-point-subtext text-arial">Write a Review</div>
</div>
</div>
<div class="earn-point-col">
<div class="earn-point-box ait-trigger-wayto-earn-points">
<div class="img_box"><svg width="58" height="59" viewbox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_3536_3393)"> <path d="M32.8641 58.2441H23.6835C22.15 58.2441 20.9026 56.9821 20.9026 55.4307V34.4807H15.5465C14.013 34.4807 12.7656 33.2183 12.7656 31.6673V22.6902C12.7656 21.1388 14.013 19.8768 15.5465 19.8768H20.9026V15.3813C20.9026 10.924 22.2861 7.13173 24.9029 4.41519C27.5316 1.68626 31.2051 0.244141 35.5264 0.244141L42.528 0.255646C44.0588 0.258301 45.304 1.52032 45.304 3.06909V11.4041C45.304 12.9555 44.0571 14.2176 42.524 14.2176L37.81 14.2193C36.3723 14.2193 36.0062 14.5109 35.9279 14.6003C35.7989 14.7486 35.6454 15.1676 35.6454 16.3248V19.8763H42.1698C42.6609 19.8763 43.1368 19.9989 43.5458 20.2299C44.428 20.7286 44.9764 21.6716 44.9764 22.6906L44.9729 31.6677C44.9729 33.2183 43.7255 34.4803 42.1921 34.4803H35.6454V55.4307C35.6454 56.9821 34.3975 58.2441 32.8641 58.2441ZM24.2635 54.8439H32.2841V32.9585C32.2841 31.9226 33.1173 31.0801 34.1408 31.0801H41.6121L41.6152 23.277H34.1404C33.1169 23.277 32.2841 22.4344 32.2841 21.3985V16.3248C32.2841 14.9964 32.4175 13.4857 33.4086 12.3502C34.6062 10.9775 36.4935 10.8191 37.8091 10.8191L41.9432 10.8174V3.65497L35.5238 3.64435C28.5791 3.64435 24.2635 8.14197 24.2635 15.3813V21.3985C24.2635 22.434 23.4307 23.277 22.4072 23.277H16.1264V31.0801H22.4072C23.4307 31.0801 24.2635 31.9226 24.2635 32.9585V54.8439Z" fill="#A95EF1"></path> </g> <defs> <clippath id="clip0_3536_3393"> <rect width="57.2162" height="58" fill="white" transform="translate(0.392578 0.357422)"></rect> </clippath> </defs> </svg></div>
<div class="earn-point-text text-arial">25 Points</div>
<div class="earn-point-subtext text-arial">Share on Facebook</div>
</div>
</div>
<div class="earn-point-col">
<div class="earn-point-box ait-trigger-refer-a-friend">
<div class="img_box"><svg width="58" height="59" viewbox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_3536_3400)"> <mask id="mask0_3536_3400" style="mask-type: luminance;" maskunits="userSpaceOnUse" x="0" y="0" width="58" height="59"> <path d="M58 0.357422H0V58.3574H58V0.357422Z" fill="white"></path> </mask> <g mask="url(#mask0_3536_3400)"> <mask id="mask1_3536_3400" style="mask-type: luminance;" maskunits="userSpaceOnUse" x="0" y="1" width="58" height="57"> <path d="M0.894531 1.25195H57.1055V57.4629H0.894531V1.25195Z" fill="white"></path> </mask> <g mask="url(#mask1_3536_3400)"> <path d="M16.2656 16.1827C16.2656 9.14917 21.9674 3.44739 29.0009 3.44739C36.0344 3.44739 41.7362 9.14917 41.7362 16.1827C41.7362 23.2162 36.0344 28.918 29.0009 28.918C21.9674 28.918 16.2656 23.2162 16.2656 16.1827Z" stroke="#A95EF1" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M24.7198 55.2671H7.55933C4.71585 55.2671 2.6086 52.6492 3.18816 49.8655C5.68044 37.8942 16.2906 28.8999 29.0015 28.8999C33.6481 28.8999 38.0139 30.1018 41.8052 32.2118" stroke="#A95EF1" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M49.8613 35.7252L53.939 39.7575C55.2332 41.0374 55.2361 43.1156 53.9455 44.399L49.8613 48.4604" stroke="#A95EF1" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M53.3733 41.9854H38.6056C34.9381 41.9854 31.9648 44.9585 31.9648 48.6262C31.9648 52.2939 34.8844 55.2671 38.5521 55.2671" stroke="#A95EF1" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> </g> </g> </g> <defs> <clippath id="clip0_3536_3400"> <rect width="58" height="58" fill="white" transform="translate(0 0.357422)"></rect> </clippath> </defs> </svg></div>
<div class="earn-point-text text-arial">500 Points</div>
<div class="earn-point-subtext text-arial">Refer a Friend</div>
</div>
</div>
<div class="earn-point-col">
<div class="earn-point-box ait-trigger-wayto-earn-points">
<div class="img_box"><svg width="58" height="59" viewbox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4375 24.9468C5.4375 23.9463 6.2495 23.1343 7.25 23.1343C8.2505 23.1343 9.0625 23.9463 9.0625 24.9468V45.4884C9.0625 48.4924 11.4961 50.9259 14.5 50.9259H43.5C46.5039 50.9259 48.9375 48.4924 48.9375 45.4884V24.9468C48.9375 23.9463 49.7495 23.1343 50.75 23.1343C51.7505 23.1343 52.5625 23.9463 52.5625 24.9468V45.4884C52.5625 50.4934 48.5049 54.5509 43.5 54.5509H14.5C9.49508 54.5509 5.4375 50.4934 5.4375 45.4884V24.9468Z" fill="#A95EF1"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M29 32.8013C31.4046 32.8013 33.7077 33.7559 35.409 35.4548C37.1079 37.1561 38.0625 39.4592 38.0625 41.8638V52.7388C38.0625 53.7393 37.2505 54.5513 36.25 54.5513C35.2495 54.5513 34.4375 53.7393 34.4375 52.7388V41.8638C34.4375 40.421 33.8647 39.0387 32.8449 38.0189C31.8251 36.999 30.4427 36.4263 29 36.4263C27.5573 36.4263 26.1749 36.999 25.1551 38.0189C24.1353 39.0387 23.5625 40.421 23.5625 41.8638V52.7388C23.5625 53.7393 22.7505 54.5513 21.75 54.5513C20.7495 54.5513 19.9375 53.7393 19.9375 52.7388V41.8638C19.9375 39.4592 20.8921 37.1561 22.591 35.4548C24.2923 33.7559 26.5954 32.8013 29 32.8013Z" fill="#A95EF1"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M21.6155 5.97607V19.5698C21.6155 24.6738 17.4734 28.8136 12.3694 28.8136C9.49113 28.8136 6.77238 27.4868 5.00096 25.22C3.22954 22.9507 2.60363 19.9952 3.29963 17.2015L5.22088 9.51891C6.00871 6.36999 8.83621 4.16357 12.0794 4.16357H19.803C20.8035 4.16357 21.6155 4.97557 21.6155 5.97607ZM17.9905 7.78857H12.0794C10.4989 7.78857 9.12138 8.86399 8.73955 10.3962L6.8183 18.0812C6.39055 19.7897 6.7748 21.5998 7.85746 22.9894C8.94255 24.3766 10.6076 25.1886 12.3694 25.1886C15.4724 25.1886 17.9905 22.6728 17.9905 19.5698V7.78857Z" fill="#A95EF1"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M38.1992 4.16357H45.9229C49.1661 4.16357 51.9936 6.36999 52.7814 9.51891L54.7026 17.2015C55.3986 19.9952 54.7727 22.9507 53.0013 25.22C51.2299 27.4868 48.5111 28.8136 45.6329 28.8136C40.5289 28.8136 36.3867 24.6738 36.3867 19.5698V5.97607C36.3867 4.97557 37.1987 4.16357 38.1992 4.16357ZM40.0117 7.78857V19.5698C40.0117 22.6728 42.5299 25.1886 45.6329 25.1886C47.3946 25.1886 49.0597 24.3766 50.1448 22.9894C51.2275 21.5998 51.6117 19.7897 51.184 18.0812L49.2627 10.3962C48.8809 8.86399 47.5034 7.78857 45.9229 7.78857H40.0117Z" fill="#A95EF1"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M19.7832 4.16357H38.1982C38.6791 4.16357 39.1407 4.35449 39.4815 4.69524C39.8222 5.03599 40.0107 5.49757 40.0107 5.97849L39.9986 19.1252C39.9938 24.4781 35.6535 28.8136 30.303 28.8136H27.6688C22.3135 28.8136 17.9707 24.4732 17.9707 19.1179V5.97607C17.9707 4.97557 18.7827 4.16357 19.7832 4.16357ZM21.5957 7.78857V19.1179C21.5957 22.4698 24.3145 25.1886 27.6688 25.1886H30.303C33.6549 25.1886 36.3712 22.4747 36.3736 19.1227L36.3857 7.78857H21.5957Z" fill="#A95EF1"></path> </svg></div>
<div class="earn-point-text text-arial">25 Points</div>
<div class="earn-point-subtext text-arial">Store visit</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="faq-section">
<div class="site-container">
<div class="section-header">
<div class="section-header-main text-times-new-roman">FAQ’s</div>
</div>
<div class="section-content">
<div class="faq_sec_block full_width">
<div class="faq_sec-content">
<div class="faq_sec">
<div class="full_width">
<div class="faq_single active">
<h6 class="in">Lorem ipsum dolor sit amet consectetur adipiscing elit? <span class="accicon"></span></h6>
<p style="display: none;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="faq_single">
<h6 class="">Sed do eiusmod tempor incididunt ut labore et dolore? <span class="accicon"></span></h6>
<p style="display: none;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="faq_single">
<h6>Ut enim ad minim veniam? <span class="accicon"></span></h6>
<p style="display: block;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="faq_single">
<h6>Quis nostrud exercitation ullamco laboris nisi? <span class="accicon"></span></h6>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="faq_single">
<h6>Aliquip ex ea commodo consequat? <span class="accicon"></span></h6>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="faq_single">
<h6>Duis aute irure dolor in reprehenderit in voluptate velit? <span class="accicon"></span></h6>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style><!--
html,body{overflow-x: hidden;}
*{box-sizing: border-box;}
body{margin: 0px;padding: 0px}
.text-times-new-roman{font-family: 'Times New Roman', sans-serif;font-style: normal;letter-spacing: normal;letter-spacing: -1px;}
.text-arial{font-family: 'Arial', sans-serif;font-style: normal;letter-spacing: normal;}
.page-width.page-width--narrow {
width: 100%;
max-width: 100%;
padding: 0px;
}
.main-page-title{display:none}
.loyalty-front-page-ui-three .main-banner{background: url(https://app.aitrillion.com/assets/loyalty/images/loyalty-template3-banner.png);display: flex;background-size: cover;}
.main-banner .site-container{display: flex;flex-wrap: wrap;}
.site-container{width:95%;max-width:1100px;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto}
.loyalty-front-page-ui-three .main-banner-left-sec{padding:151px 0px;width: 50%;float: left;position: relative;}
.loyalty-front-page-ui-three .main-page-text{font-weight: 700; font-size: 59px; line-height: 62px;display: flex; align-items: center; color: #fff;margin-bottom:15px}
.loyalty-front-page-ui-three .main-page-sub-text{font-weight: 400; font-size: 18px; line-height: 27px;color: #fff;margin-bottom:30px}
.loyalty-front-page-ui-three .main_btn {text-decoration:none;font-weight: 700; font-size: 18px; line-height: 18px;background: #FFFFFF; color:#000;padding: 16px 15px;border-radius: 52px;display:inline-block;min-width: 208px;text-align: center;border: 1px solid #FFFFFF;transition: .2s all linear;-webkit-transition: .2s all linear;-o-transition: .2s all linear;-moz-transition: .2s all linear;}
.loyalty-front-page-ui-three .main_btn:not(.login_btn):hover{background:#ffffff1c;color: #fff;transition: .2s all linear;-webkit-transition: .2s all linear;-o-transition: .2s all linear;-moz-transition: .2s all linear;}
.loyalty-front-page-ui-three .main_btn.login_btn{background: transparent;color: #fff;margin-left: 8px}
.loyalty-front-page-ui-three .main_btn.login_btn:hover{background: #ffffff1c;color: #fff;transition: .2s all linear;-webkit-transition: .2s all linear;-o-transition: .2s all linear;-moz-transition: .2s all linear;}
.main-banner-right-sec{width: 61%;float: left;position: relative;text-align: right;display: flex;align-items: flex-end;justify-content: flex-end;}
.main-banner-right-sec img{border:none !important;margin-bottom: 0px !important;margin-top: auto;margin-right: 0px;margin-left: auto;max-width: 100%}
.loyalty-front-page-ui-three a:not([href]),.earn-point-sec .earn-point-box{cursor: pointer !important;}
.reward-section{display: flex;width: 100%; background:#fff;text-align: center;}
.loyalty-front-page-ui-three img{border: none;}
.loyalty-front-page-ui-three .reward-section{padding: 100px 0px;background: #FFF5EC}
.loyalty-front-page-ui-three .reward-section .section-header-main{margin-bottom: 60px}
.section-header-main{font-weight: 400; font-size: 60px; line-height: 62px;text-align: center; color: #000000;margin-bottom: 9px}
.section-header-para{font-weight: 400; font-size: 14px; line-height: 23px; text-align: center; color: #636363;margin-bottom: 40px}
.section-content{margin-left: auto;margin-right: auto;max-width:903px;}
.reward-section .section-header-para{max-width: 676px;margin-left: auto;margin-right: auto;}
.full_width{float: left;width: 100%}
.loyalty-front-page-ui-three .reward-section .rewards{margin-left: -60px;margin-right: -60px}
.reward-box{float: left;position: relative;padding: 0px 60px;width: 33.33%;}
.reward-box .reward-count{letter-spacing: -1.39032px; color: #A95EF1;font-weight: 700; font-size: 82.029px; line-height: 58.029px;margin-bottom: 19px;transition: .2s all linear;-webkit-transition: .2s all linear;-o-transition: .2s all linear;-moz-transition: .2s all linear;}
.reward-box:hover .reward-count{trtransition: .2s all linear;-webkit-transition: .2s all linear;-o-transition: .2s all linear;-moz-transition: .2s all linear;transform: translateY(-5px);}
.loyalty-front-page-ui-three .reward-box-heading{margin-bottom: 19px;font-weight: 700; font-size: 24px; line-height: 28px;color: #000000;text-transform: uppercase;letter-spacing: 0.2px;transition: .2s all linear;-webkit-transition: .2s all linear;-o-transition: .2s all linear;-moz-transition: .2s all linear;}
.loyalty-front-page-ui-three .reward-box:hover .reward-box-heading{color: #a95ef1;transition: .2s all linear;-webkit-transition: .2s all linear;-o-transition: .2s all linear;-moz-transition: .2s all linear;}
.reward-box-desc{font-weight: 400; font-size: 18px; line-height: 24px;color: #444;margin-bottom: 20px}
.reward-section, .earnpoint-section{display: flex;flex-wrap: wrap;}
.loyalty-front-page-ui-three .reward-section .main_btn{min-width: 213px;margin-top: 20px}
.earnpoint-section {text-align: center;padding: 80px 0px 80px 0px; float: left; width: 100%;}
.earnpoint-section .section-header-main{margin-bottom: 60px}
.earn-point-sec{margin-left: -15px;margin-right: -15px;width: auto;display: flex;flex-wrap: wrap;}
.loyalty-front-page-ui-three .earn-point-sec .earn-point-col{width: 33.33%;float: left;position: relative;padding:0px 15px 30px 15px}
.earn-point-sec .earn-point-box{width: 100%;position: relative;padding: 40px 13px;height: 100%;background: #FBF7FF;
border: 2px solid #A95EF1;border-radius: 18px;}
.earn-point-sec .earn-point-box:hover{background: #a95ef1;transition: background .2s linear}
.earn-point-sec .earn-point-box:hover svg{filter:brightness(0) invert(1)}
.earn-point-sec .earn-point-box:hover .earn-point-text,.earn-point-sec .earn-point-box:hover .earn-point-subtext{color: #fff}
.earn-point-sec .earn-point-box svg{transition: .2s all linear}
.earn-point-sec .earn-point-box:hover svg{transform: scale(1.05);transition: transform .2s linear}
.earn-point-box .img_box{width: 58px;height: 58px;margin-left: auto;margin-right: auto;margin-bottom: 20px}
.earn-point-box .earn-point-text{font-weight: 700; font-size: 22px; line-height: 25px;letter-spacing: 0.2px; color:#A95EF1;margin-bottom: 8px}
.earn-point-box .earn-point-subtext{font-weight: 400; font-size: 15px; line-height: 18px; color: #585858;}
.earnpoint-btnsec{margin-top: 10px}
.earnpoint-btnsec .main_btn{width: 100%;max-width: 307px}
.loyalty-front-page-ui-three .faq-section {background: #FFF5EC;display: flex;width: 100%}
.loyalty-front-page-ui-three .faq-section .faq_sec .faq_single{background: transparent;}
.faq-section .section-header-main{margin-bottom: 40px;padding-top: 55px}
.faq_sec {
padding-bottom: 90px;
padding-top: 0px;
text-align: left;
max-width: 780px;
margin-left: auto;
margin-right: auto;
display: flex;
}
.faq_sec .faq_single {
background: #FFFFFF;
box-shadow: none;
border-radius: 0px;
padding:0px 30px 35px 30px;
max-width: 100%;
border-bottom: 1px solid #E0E0E0;
margin-bottom: 33px;
}
.main-content {
padding-top: 0 !important;
}
.faq_sec .faq_single h6 .fa-plus {
background-color: #FFEAE9;
padding: 0px 4px 0px 4px;
color: #F86259;
width: 30px;
height: 30px;
border-radius: 50px;
line-height: 30px;
text-align: center;
position: absolute;
right: 0;
font-family: 'Sailec-Regular';
top: -1px;
margin-right: 0px
}
.faq_sec .faq_single h6 {
font-family: 'Arial';
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: #333333;
letter-spacing: normal;
margin-bottom: 0px;
margin-top: 0px;
cursor: pointer;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
.faq_sec .faq_single p {
font-family: 'Arial';
font-weight: 400;
font-size: 14px;
line-height: 23px;
color: #636363;
padding-top: 18px;
margin: 0px;
}
span.accicon {
position: relative;
float: right;
width: 16px;
height: 16px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
box-shadow: none;
text-shadow: none;
margin-left: 30px;
margin-right: 0px;
}
span.accicon:before, span.accicon:after {
content: "";
position: absolute;
display: inline-block;
}
span.accicon:before {
width: 14px;
height: 2px;
background: #585757;
}
span.accicon:after {
width: 2px;
height: 14px;
background: #585757;
}
.faq_sec .faq_single h6.in span.accicon:after{
display: none;
}
@media (min-width: 768px){
.hide-in-desktop{display: none;}
}
@media (max-width: 1020px){
.earn-point-sec{margin-left: -8px;margin-right: -8px}
.earn-point-sec .earn-point-col{padding: 0px 8px 30px 8px}
}
@media (max-width: 992px){
.main-banner-left-sec{width: 50%;padding-right: 15px;padding-bottom: 40px;padding-top: 40px}
.main-banner-right-sec{width: 50%}
.main-page-text{font-size: 32px;line-height: 42px}
.earnpoint-block{padding: 40px 15px 30px}
}
@media (max-width: 768px){
.loyalty-front-page-ui-three .main-banner{background: #AF97C7}
.loyalty-front-page-ui-three .main-banner-left-sec{width: 100%;text-align: center;padding: 29px 15px 25px 15px}
.loyalty-front-page-ui-three .main-page-text{text-align: center;justify-content: center;font-size:36px;line-height: 34px}
.loyalty-front-page-ui-three .main-page-sub-text{max-width: 297px;margin-left: auto;margin-right: auto;font-size: 12px;line-height: 16px;margin-bottom: 20px}
.loyalty-front-page-ui-three .main_btn{font-size: 14px;line-height: 14px;min-width: 140px;max-width: 50%;padding: 12px 15px
}
.loyalty-front-page-ui-three .earn-point-sec .earn-point-col{width: 50%;padding: 0px 8px 16px 8px}
.main-banner-right-sec{width: 100%;}
.loyalty-front-page-ui-three .main-banner-right-sec img{margin-bottom: 0px;margin-left: auto;margin-right: auto;}
.main-banner .site-container{padding: 0px;width: 100%}
.reward-section,.earnpoint-section{max-width: 100%;margin-left: auto;margin-right: auto;float: none;}
.reward-block-content,.reward-box{width: 100%}
.earnpoint-block-content{width: 50%}
.reward-box-desc{margin-bottom: 30px;max-width: 218px; margin-left: auto; margin-right: auto;font-size: 16px;line-height: 20px}
.reward-box:last-of-type .reward-box-desc{margin-bottom: 20px}
.loyalty-front-page-ui-three .reward-section .main_btn{margin-top: 0px}
.loyalty-front-page-ui-three .reward-section{padding: 40px 0px 40px 0px}
.reward-box .img-box{margin-bottom: 18px}
.section-header-main{font-size: 32px;line-height: 37px;}
.earnpoint-section .section-header-main {margin-bottom: 30px;}
.loyalty-front-page-ui-three .reward-section .section-header-main{margin-bottom: 38px}
.reward-box .reward-count{font-size: 60px;line-height: 41.029px}
.loyalty-front-page-ui-three .reward-box-heading{font-size: 18px;line-height: 21px}
.earnpoint-section{padding:40px 0px 24px 0px}
}
@media (max-width: 600px){
.main-banner-left-sec{padding-bottom: 0px;padding-right: 0px;}
.main-banner-left-sec,.main-banner-right-sec{width: 100%;text-align: center;}
.main-banner-left-sec .welcome-text,.main-page-text{text-align: center;display: block;}
.main-banner-left-sec .welcome-text{font-size: 16px;line-height: 17px;margin-bottom: 10px}
.main-page-sub-text{font-size: 12px;line-height: 16px}
.loyalty-front-page-ui-three .main-banner-left-sec{padding-bottom: 25px}
.main-page-sub-text{margin-bottom: 20px}
.main-banner-right-sec img{max-height: 100%;margin-left: auto;margin-right: auto;}
.main_btn{font-size: 14px;line-height: 16px;min-width: 154px;padding: 12px 15px}
.section-header-para{margin-bottom: 30px}
.site-container{max-width: 100%;width: 100%}
.reward-block-content{margin-bottom: 16px}
.reward-block{padding: 14px 0px 15px 0px;}
.reward-blocks{margin-bottom: 14px}
.loyalty-front-page-ui-three .earnpoint-btnsec{margin-top: 10px}
.earnpoint-icon img{max-height: 32px;max-width: 32px}
.earnpoints{font-size: 14px;line-height: 21px}F
.earnpoint-type{font-size: 12px;line-height: 10.47px}
.reward-section .main_btn,.earnpoint-btnsec .main_btn { font-size: 16px; line-height: 17px; padding: 13px 15px; }
.reward-section .main_btn{min-width: 192px; width: auto;}
.earnpoint-btnsec .main_btn{width: auto; padding-left: 30px; padding-right: 30px;}
.loyalty-front-page-ui-three .faq-section .section-header-main{padding-top: 50px;margin-bottom: 30px}
.faq_sec .faq_single{padding: 0px 0px 24px 0px;margin-bottom: 23px;}
.faq_sec .faq_single h6{font-size: 16px;line-height: 22px}
.faq_sec .faq_single p{font-size: 14px;line-height: 23px}
.earn-point-box .img_box{width: 48px;height: 48px}
.earn-point-box .img_box svg{max-width: 100%;max-height: 48px}
.earn-point-box .earn-point-text{font-size: 16px;line-height: 18px;letter-spacing: normal;}
.earn-point-sec .earn-point-box{padding: 28px 9.5px 26PX 9.5px}
.earn-point-box .earn-point-subtext{font-size: 14px}
}
@media (max-width: 384px){
.loyalty-front-page-ui-three .earn-point-sec .earn-point-col{width: 100%}
}
@media (max-width: 330px){
.loyalty-front-page-ui-three .main_btn{min-width: auto; width: 100%; max-width: 60%;}
.loyalty-front-page-ui-three .main_btn.login_btn{margin-top: 10px;margin-left: 0px}
}
.main_btn {
padding: 17px 15px !important;
}
--></style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(".faq_single.active").find("p").slideDown();
$(document).ready(function () {
$(".faq_single > h6").click(function (e) {
//$(".faq_single > h6.in").removeClass("in");
e.preventDefault();
$(this).toggleClass("in");
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
$(this).siblings("p").slideToggle(500);
$(".faq_single").not(".active").find("p").slideUp();
$(".faq_single").not(".active").find("h6").removeClass("in");
});
$("#headingOne").click(function () {
$(this).find("a").toggleClass("open");
$("#collapseOne").slideToggle();
});
});
// ]]></script>
</div>
</div>
</div>
</div>