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-two">
<div class="main-banner">
<div class="site-container">
<div class="main-banner-left-sec">
<div class="main-page-text text-poppins">Loyalty Reward Program</div>
<div class="main-page-sub-text text-arial">Become a member and earn points & exclusive rewards every time you shop.</div>
{% if customer %}{% else %}<a href="#" class="main_btn text-arial hvr-ripple-out ait-trigger-wayto-earn-points">Join Rewards</a>{% endif %}</div>
<div class="main-banner-right-sec"><img src="https://app.aitrillion.com/assets/loyalty/images/loaylty-rewards-program-banner.png" alt="loaylty rewards program" /></div>
</div>
</div>
<div class="earnpoint-section">
<div class="site-container">
<div class="section-header">
<div class="section-header-main text-poppins">There are lots of 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="52" height="59" viewbox="0 0 52 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M44.5211 58.5001H7.4668C3.8418 58.4888 0.907813 55.5548 0.896484 51.9298V49.0298C0.896484 41.9384 3.87578 35.1755 9.1207 30.4063C11.307 28.4239 14.5582 28.152 17.0391 29.7493C19.6332 31.4145 22.7258 32.2981 25.9996 32.2981C29.2734 32.2981 32.366 31.4145 34.9602 29.7493C37.441 28.152 40.6922 28.4239 42.8785 30.4063C48.1234 35.1755 51.1141 41.9384 51.1027 49.0298V51.9298C51.0914 55.5661 48.1461 58.5001 44.5211 58.5001ZM13.5047 30.9727C12.4398 30.9727 11.4203 31.3692 10.6387 32.0829C5.86953 36.4216 3.15078 42.5841 3.15078 49.0298V51.9298C3.16211 54.3087 5.07656 56.2231 7.45547 56.2345H44.5098C46.8887 56.2345 48.8145 54.3087 48.8145 51.9298V49.0298C48.8145 42.5841 46.0957 36.4329 41.3266 32.0829C39.8992 30.7915 37.7809 30.6102 36.1609 31.6524C33.2043 33.5556 29.6812 34.5638 25.977 34.5638C22.2727 34.5638 18.7496 33.5556 15.793 31.6524C15.1246 31.2106 14.3203 30.9727 13.5047 30.9727Z" fill="black"></path> <path d="M26 29.7266C17.9344 29.7152 11.398 23.1789 11.3867 15.1133C11.3867 7.05898 17.9344 0.5 26 0.5C34.0656 0.511328 40.602 7.04766 40.6133 15.1133C40.602 23.1676 34.0543 29.7266 26 29.7266ZM26 2.77695C19.1805 2.77695 13.6523 8.30508 13.6523 15.1246C13.6523 21.9441 19.1805 27.4723 26 27.4723C32.8195 27.4723 38.3477 21.9441 38.3477 15.1246C38.3363 8.30508 32.8195 2.77695 26 2.77695Z" fill="black"></path> </svg></div>
<div class="earn-point-text text-poppins">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="58" height="59" viewbox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_3504_540)"> <mask id="mask0_3504_540" style="mask-type: luminance;" maskunits="userSpaceOnUse" x="0" y="0" width="58" height="59"> <path d="M0 0.500004H58V58.5H0V0.500004Z" fill="white"></path> </mask> <g mask="url(#mask0_3504_540)"> <path d="M12.0078 28.3672C12.6331 28.3672 13.1406 28.8747 13.1406 29.5C13.1406 30.1253 12.6331 30.6328 12.0078 30.6328C11.3825 30.6328 10.875 30.1253 10.875 29.5C10.875 28.8747 11.3825 28.3672 12.0078 28.3672Z" fill="black"></path> <path d="M56.8672 29.5C56.8672 44.5154 44.0154 57.3672 29 57.3672C13.9846 57.3672 1.13281 44.5154 1.13281 29.5C1.13281 14.4846 13.9846 1.63281 29 1.63281C44.0154 1.63281 56.8672 14.4846 56.8672 29.5Z" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M29 51.3633C17.1315 51.3633 7.13672 41.3685 7.13672 29.5C7.13672 17.6315 17.1315 7.63672 29 7.63672C40.8685 7.63672 50.8633 17.6315 50.8633 29.5C50.8633 41.3685 40.8685 51.3633 29 51.3633Z" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12.6113 25.0083C14.5847 17.8115 21.1845 12.5077 29.0009 12.5077" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M35.7969 36.2969C31.3846 34.8265 26.6154 34.8265 22.2031 36.2969C22.9383 34.0902 23.3065 31.7951 23.3065 29.5C23.3065 27.2049 22.9383 24.9098 22.2031 22.7031C24.4098 23.4383 26.7049 23.8065 29 23.8065C31.2951 23.8065 33.5902 23.4383 35.7969 22.7031C35.0617 24.9098 34.6935 27.2049 34.6935 29.5C34.6935 31.7951 35.0617 34.0902 35.7969 36.2969Z" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> </g> </g> <defs> <clippath id="clip0_3504_540"> <rect width="58" height="58" fill="white" transform="translate(0 0.5)"></rect> </clippath> </defs> </svg></div>
<div class="earn-point-text text-poppins">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="57" viewbox="0 0 58 57" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M56.676 26.094C57.8772 24.9225 58.3011 23.2034 57.7822 21.6076C57.2632 20.0119 55.9094 18.8711 54.2488 18.6303L40.6106 16.6523C39.9231 16.5526 39.329 16.1211 39.0213 15.4981L32.9191 3.14188C32.1762 1.63773 30.6729 0.703613 28.9953 0.703613C28.995 0.703613 28.9944 0.703613 28.9941 0.703613C27.3162 0.704066 25.8127 1.63909 25.0705 3.14403L18.9748 15.5037C18.6676 16.1267 18.0737 16.5585 17.3862 16.6586L3.74893 18.6439C2.08845 18.8856 0.735077 20.0272 0.217042 21.6233C-0.300993 23.2192 0.123811 24.938 1.32561 26.1089L3.06731 27.8057C3.51545 28.2421 4.23264 28.2328 4.66922 27.7847C5.10581 27.3366 5.09641 26.6193 4.64826 26.1827L2.90657 24.4859C2.31818 23.9127 2.11835 23.1041 2.37199 22.3227C2.62563 21.5412 3.26238 21.0041 4.07529 20.8857L17.7123 18.9004C19.1378 18.6929 20.3694 17.7976 21.0066 16.5056L27.1023 4.14623C27.4657 3.40945 28.173 2.96935 28.9946 2.96924C28.9949 2.96924 28.995 2.96924 28.9952 2.96924C29.8164 2.96924 30.5239 3.40877 30.8875 4.1451L36.9898 16.501C37.6277 17.7927 38.8598 18.6874 40.2854 18.8941L53.9236 20.8721C54.7366 20.99 55.3736 21.5267 55.6277 22.308C55.8818 23.0893 55.6823 23.8982 55.0942 24.4717L45.2286 34.0936C44.1972 35.0994 43.7271 36.5475 43.971 37.9674L46.3042 51.5492C46.4432 52.359 46.1296 53.1306 45.4651 53.6138C44.8007 54.0967 43.9699 54.1571 43.2425 53.775L31.0431 47.3656C29.7677 46.6955 28.2451 46.696 26.9703 47.3667L14.7741 53.7829C14.0472 54.1653 13.2162 54.1055 12.5514 53.6228C11.8866 53.14 11.5726 52.3685 11.7112 51.5587L14.0372 37.9759C14.2805 36.5559 13.8095 35.1079 12.7777 34.1028L11.3771 32.7382C10.9289 32.3015 10.2117 32.3108 9.77515 32.759C9.33856 33.2072 9.34785 33.9244 9.79599 34.3609L11.1966 35.7256C11.6942 36.2104 11.9213 36.9086 11.804 37.5935L9.47801 51.1764C9.19481 52.8302 9.86226 54.4701 11.22 55.456C11.987 56.013 12.8839 56.2958 13.7872 56.2958C14.483 56.2957 15.1826 56.1277 15.8287 55.788L28.0249 49.3717C28.6396 49.0483 29.3738 49.0481 29.9891 49.3713L42.1885 55.7808C43.674 56.5612 45.4398 56.4331 46.7971 55.4465C48.1544 54.4599 48.8209 52.8197 48.5368 51.1659L46.2037 37.584C46.0861 36.8993 46.3128 36.201 46.8102 35.7159L56.676 26.094Z" fill="black"></path> </svg></div>
<div class="earn-point-text text-poppins">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"> <path d="M53.2172 0.5H12.5323C12.0307 0.5 11.6241 0.906566 11.6241 1.40818C11.6241 1.90967 12.0306 2.31635 12.5323 2.31635H53.217C54.8529 2.31635 56.1836 3.64718 56.1836 5.28296V53.7172C56.1836 55.3529 54.8529 56.6838 53.217 56.6838H36.689V44.9989C36.689 44.4974 36.2825 44.0907 35.7808 44.0907C35.2792 44.0907 34.8726 44.4973 34.8726 44.9989V56.6836H28.9394V35.312C28.9394 34.8105 28.5329 34.4038 28.0312 34.4038H24.0961V28.4706H28.0313C28.5329 28.4706 28.9395 28.064 28.9395 27.5624V21.7503C28.9395 15.8415 33.7467 11.0342 39.6556 11.0342H46.497V16.9675H39.6556C37.0184 16.9675 34.8727 19.1131 34.8727 21.7503V27.5624C34.8727 28.0639 35.2792 28.4706 35.7809 28.4706H46.497V34.4038H35.7809C35.2793 34.4038 34.8727 34.8104 34.8727 35.312V41.1241C34.8727 41.6256 35.2792 42.0323 35.7809 42.0323C36.2825 42.0323 36.6891 41.6257 36.6891 41.1241V36.2202H47.4051C47.9068 36.2202 48.3133 35.8136 48.3133 35.312V27.5626C48.3133 27.0611 47.9069 26.6544 47.4051 26.6544H36.6891V21.7504C36.6891 20.1146 38.0198 18.7838 39.6557 18.7838H47.4051C47.9068 18.7838 48.3133 18.3773 48.3133 17.8756V10.1263C48.3133 9.6248 47.9069 9.21813 47.4051 9.21813H39.6557C32.7453 9.21813 27.1234 14.8402 27.1234 21.7504V26.6544H23.1881C22.6865 26.6544 22.2799 27.0609 22.2799 27.5626V35.312C22.2799 35.8135 22.6864 36.2202 23.1881 36.2202H27.1234V56.6836H4.78285C3.14695 56.6836 1.81624 55.3528 1.81624 53.717V5.28285C1.81624 3.64707 3.14695 2.31624 4.78285 2.31624H8.65763C9.15924 2.31624 9.56581 1.90967 9.56581 1.40806C9.56581 0.906566 9.15924 0.5 8.65763 0.5H4.78285C2.14566 0.5 0 2.64566 0 5.28285V53.717C0 56.3543 2.14566 58.5 4.78285 58.5H53.217C55.8543 58.5 58 56.3543 58 53.7172V5.28285C58 2.64566 55.8543 0.5 53.2172 0.5Z" fill="black"></path> </svg></div>
<div class="earn-point-text text-poppins">25 Points</div>
<div class="earn-point-subtext text-arial">Share on Facebook</div>
</div>
</div>
</div>
<div class="earnpoint-btnsec full_width"><a class="main_btn text-arial hvr-ripple-out ait-trigger-wayto-earn-points">More ways to earn points</a></div>
</div>
</div>
</div>
<div class="reward-section">
<div class="site-container">
<div class="section-content">
<div class="rewards"><a class="reward-box">
<div class="img-box"><img src="https://app.aitrillion.com/assets/loyalty/images/join-rewards.svg" /></div>
<div class="reward-box-heading text-poppins">Join Rewards</div>
<div class="reward-box-desc text-arial">Join the our rewards program and get a bonus 10 points on us!</div>
</a> <a class="reward-box ait-trigger-wayto-earn-points">
<div class="img-box"><img src="https://app.aitrillion.com/assets/loyalty/images/get-points.svg" /></div>
<div class="reward-box-heading text-poppins">Shop & Get Point</div>
<div class="reward-box-desc text-arial">Join the our rewards program and get a bonus 10 points on us!</div>
</a> <a class="reward-box ait-trigger-redeem-points">
<div class="img-box"><img src="https://app.aitrillion.com/assets/loyalty/images/redeem-rewards.svg" /></div>
<div class="reward-box-heading text-poppins">Redeem</div>
<div class="reward-box-desc text-arial">$5 voucher on purchases over $25 when you have 50 points</div>
</a></div>
<div class="reward-btnsec full_width"><a href="#" class="main_btn text-arial hvr-ripple-out ait-trigger-wayto-earn-points">Join Rewards</a></div>
</div>
</div>
</div>
<div class="refer-friend">
<div class="site-container">
<div class="section-content">
<div class="refer-friend-container">
<div class="refer-friend-left">
<div class="text-content">
<h1 class="text-poppins">Tell a friend, earn points!</h1>
<div class="text-content-desc">
<p class="text-arial">Give your friends 10% off their first order and get a 10 reward points. First Signup or Login, then you can share your unique referral link with friends!</p>
</div>
<a class="main_btn text-arial hvr-ripple-out ait-trigger-refer-a-friend">Refer a Friend</a></div>
</div>
<div class="refer-friend-right"><img src="https://app.aitrillion.com/assets/loyalty/images/refer-a-friend-img_1.png" /></div>
</div>
</div>
</div>
</div>
<div class="faq-section">
<div class="site-container">
<div class="section-header">
<div class="section-header-main text-poppins">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><!--
/* Ripple Out */
@-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.main-content {
padding-top: 0 !important;
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
}
.hvr-ripple-out:before {
content: '';
position: absolute;
border: #ee5763 solid 2px;
border-radius: 5px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
}
html,body{overflow-x: hidden;}
*{box-sizing: border-box;}
body{margin: 0px;padding: 0px}
.text-poppins{font-family: 'Poppins', sans-serif;font-style: normal;letter-spacing: normal;}
.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}
.main-banner{background:#F2F3F7;display: flex;}
.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}
.main-banner-left-sec{padding:85px 0px;width: 39%;float: left;position: relative;}
.main-banner-left-sec .welcome-text{font-weight: 600; font-size: 20px; line-height: 106.5%;display: flex; align-items: center; color: #EE5763;margin-bottom:12px}
.main-page-text{font-weight: 700; font-size: 41px; line-height: 51px;display: flex; align-items: center; color: #000000;margin-bottom:16px}
.main-page-sub-text{font-weight: 400; font-size: 16px; line-height: 23px;color: #000000;margin-bottom:30px}
.main_btn {text-decoration:none;font-weight: 700; font-size: 18px; line-height: 18px;color: #FFFFFF !important; padding: 17px 15px; background: #EE5763; border-radius: 5px;display:inline-block;min-width: 208px;text-align: center;}
.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-two .main-banner-right-sec img{margin: 36px auto !important}
.loyalty-front-page-ui-two 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-two img{border: none !important;}
.loyalty-front-page-ui-two .reward-section{padding: 80px 0px}
.section-header-main{font-weight: 600; font-size: 36px; line-height: 54px;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:1010px;}
.loyalty-front-page-ui-two .section-content{max-width: 1010px}
.reward-section .section-header-para{max-width: 676px;margin-left: auto;margin-right: auto;}
.full_width{float: left;width: 100%}
.reward-box{float: left;position: relative;padding: 0px 23px;width: 33.33%}
.reward-box .img-box { width: 76px; height: 76px; clear: both; margin: 0px auto; display: flex; align-items: center;margin-bottom: 20px }
.reward-box .img-box img{vertical-align: middle;transition: .2s all linear;-webkit-transition: .2s all linear;-o-transition: .2s all linear;-moz-transition: .2s all linear;}
.reward-box:hover .img-box img{transition: .2s all linear;-webkit-transition: .2s all linear;-o-transition: .2s all linear;-moz-transition: .2s all linear;transform: scale(1.08);}
.reward-box-heading{margin-bottom: 12px;font-weight: 600; font-size: 20px; line-height: 30px;color: #000000;}
.reward-box-desc{font-weight: 400; font-size: 16px; line-height: 24px;color: #515151;margin-bottom: 20px}
.reward-section, .earnpoint-section{display: flex;flex-wrap: wrap;}
.loyalty-front-page-ui-two .reward-section .main_btn{min-width: 213px;margin-top: 20px}
.refer-friend-container{display: flex;align-items: center;margin-left: -15px;margin-right: -15px;flex-wrap: wrap;}
.refer-friend .refer-friend-left,.refer-friend .refer-friend-right{width: 50%;position: relative;float: left;padding: 0px 15px}
.refer-friend .refer-friend-left h1{margin-top:0px;margin-bottom: 22px;font-weight: 700; font-size: 41px; line-height: 51px;color: #000000;}
.refer-friend-left .text-content-desc{margin-bottom: 30px;}
.refer-friend .refer-friend-left p{margin-top:0px;margin-bottom:10px;font-weight: 400; font-size: 16px; line-height: 29px;color: #424242;}
.refer-friend .refer-friend-left a{}
.refer-friend .refer-friend-right img{max-width: 100%}
.refer-friend .refer-friend-left .text-content{max-width: 397px;margin-left: 0px}
.earnpoint-section {text-align: center;padding: 75px 0px 80px 0px; float: left; width: 100%;}
.earnpoint-section .section-header-main{margin-bottom: 30px}
.earn-point-sec{margin-left: -15px;margin-right: -15px;width: auto;display: flex;flex-wrap: wrap;}
.earn-point-sec .earn-point-col{width: 25%;float: left;position: relative;padding:0px 15px 30px 15px}
.earn-point-sec .earn-point-box{width: 100%;position: relative;padding: 44px 20px;background: #FFFFFF; border: 1px solid #E8E8E8; box-shadow: 0px 29px 18px rgba(40, 64, 149, 0.04); border-radius: 18px;height: 100%;transition:all .2s linear;-webkit-transition: background .2s linear;-o-transition: background .2s linear;-moz-transition: background .2s linear}
.earn-point-sec .earn-point-box:hover{background: #e4e8eb4a;-webkit-transition: background .2s linear;-o-transition: background .2s linear;transition: background .2s linear;-moz-transition: background .2s linear}
.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: 600; font-size: 18px; line-height: 27px;letter-spacing: 0.2px; color: #333333;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-two .faq-section {background: #F9FAFD;display: flex;width: 100%}
.loyalty-front-page-ui-two .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;
}
.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;
}
/*loyalty front page ui 2 css start*/
.loyalty-front-page-ui-two .main-banner{background:#FFEDBA;display: flex;}
.loyalty-front-page-ui-two .main_btn{background: #000000}
.loyalty-front-page-ui-two .hvr-ripple-out:before{border: #000000 solid 2px}
/*loyalty front page ui 2 css end*/
@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}
.reward-blocks{margin-left: -10px;margin-right: -10px}
.reward-block-content{padding-left: 10px;padding-right: 10px}
.earnpoint-blocks{margin: 0px -10px}
.earnpoint-block-content{padding: 0px 10px 20px}
.earnpoint-block{padding: 40px 15px 30px}
.refer-friend .refer-friend-left h1{font-size: 32px;line-height: 42px}
.refer-friend .refer-friend-left p{font-size: 16px;line-height: 27px}
.earn-point-sec .earn-point-col{width: 50%;padding: 0px 8px 16px 8px}
.earn-point-sec .earn-point-box{box-shadow: 0px 9px 12px rgba(40, 64, 149, 0.05);}
}
@media (max-width: 768px){
.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: 258px; margin-left: auto; margin-right: auto;}
.reward-box:last-of-type .reward-box-desc{margin-bottom: 30px}
.loyalty-front-page-ui-two .reward-section .main_btn{margin-top: 0px}
.loyalty-front-page-ui-two .reward-section{padding: 44px 0px 44px 0px}
.reward-box .img-box{margin-bottom: 18px}
.refer-friend-container{flex-direction: column-reverse;justify-content: center;text-align: center;}
.refer-friend .refer-friend-left, .refer-friend .refer-friend-right{width: 100%}
.refer-friend .refer-friend-left .text-content{max-width: 100%;width: 100%}
.refer-friend .refer-friend-right img{margin-bottom: 26px}
.refer-friend-left .text-content-desc{margin-bottom: 24px}
.section-header-main{font-size: 28px;line-height: 35px;}
}
@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}
.main-banner-left-sec{padding-top: 47px}
.loyalty-front-page-ui-two .main-banner-right-sec img{padding: 12px auto 0px auto !important}
.main-page-sub-text{margin-bottom: 20px}
.main-banner-right-sec img{max-height: 252px;margin-left: auto;margin-right: auto;}
.main_btn{font-size: 14px;line-height: 16px;min-width: 154px;padding: 12px 15px}
.section-header-main{font-size: 28px;line-height: 42px;margin-bottom: 8px}
.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}
.earnpoint-section{padding:40px 0px 40px 0px}
.loyalty-front-page-ui-two .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-two .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: 24px;letter-spacing: normal;}
.earn-point-sec .earn-point-box{padding: 23px 9.5px}
.earn-point-box .earn-point-subtext{font-size: 14px}
}
@media (max-width: 375px){
.earn-point-sec .earn-point-col{width: 100%}
}
.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>