@font-face { font-family: 'clubpointsregular'; src: url('/sites/default/files/font/clubpoints-regular-webfont.woff2') format('woff2'), url('/sites/default/files/font/clubpoints-regular-webfont.woff') format('woff'), url('/sites/default/files/font/clubpoints-regular-webfont.svg#clubpointsregular') format('svg'); font-weight: normal; font-style: normal; }
article#locus .cp-sign { font-family: 'clubpointsregular' !important; font-weight: normal !important; padding-left: 2px; padding-right: 2px; }
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
article#locus .font1010 { font-family: 'Poppins', sans-serif !important; font-weight: 700; letter-spacing: 0.1em; color: inherit; }
h1, h2, h3, h4, h5, h6 { text-shadow: none; font-weight: bold; }
.normaltext { font-weight: normal; }
.navbar { margin-bottom: 0 !important; }
article#locus * { font-family: 'Century Gothic', 'Poppins', Helvetica, Arial, 'Microsoft JhengHei', STHeiti, sans-serif !important; }
article#locus table { background-color: transparent; }
article#locus body { background-color: #000; color: #ffffff; font-family: "Century Gothic", "Myriad Pro", Helvetica, Arial, sans-serif; }
article#locus a, article#locus a:visited, article#locus a:focus { color: inherit; text-decoration: none; }
article#locus a:hover, article#locus a:active { color: inherit; text-decoration: none; }
article#locus .lang-switch { font-size: 12px; color: #999 !important; }
article#locus .mainlogo { width: 130px; height: 75.8px; cursor: pointer; margin-left: 15px; }
article#locus .container { width: 100% !important; max-width: 1170px !important; overflow: hidden; }
article#locus .navbar-custom { margin-bottom: 0; border-bottom: none; letter-spacing: 1px; border-radius: 0; }
article#locus .navbar-custom .container { background: #000; padding: 15px; }
article#locus #brand { padding-top: 10px; padding-bottom: 10px; }
article#locus #cta { padding-top: 20px; }
article#locus .no-padding { padding: 0 !important; }
article#locus .no-margin { margin: 0 !important; }
article#locus .img-center { margin-left: auto; margin-right: auto; display: block; }
article#locus .pad-intro { padding: 25px 15px 0px 15px; }
article#locus .pad-block { padding-top: 10px; padding-bottom: 10px; }
article#locus .pad-side { padding-left: 15px; padding-right: 15px; }
article#locus .img-rounded-big { border-radius: 20px; }
article#locus .hkt > img { height: 13px; }
article#locus .white-bg { background: #fff; }
article#locus .grey-bg { background: #4f4f4f; }
article#locus .white-bg .cta-txt { color: #000; }
article#locus .grey-bg .cta-txt { color: #fff; }
article#locus .white-bg .tnc-txt { color: #111; }
article#locus .grey-bg .tnc-txt { color: #eee; }
article#locus .tnc-txt { font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: normal; }
article#locus #tnc ol, article#locus #tnc ul { margin: 0; }
article#locus #tnc ol > li, #tnc ul > li { margin-left: -2.2em; }
article#locus .tnc-txt a { text-decoration: underline; }
/*Button*/
article#locus .btn-cta { font-size: 120%; padding: 10px 20px; font-weight: bold; color: #000; background-color: #ffdd00; border: none; margin: 8px 5px; white-space: normal; }
article#locus .btn-cta:focus, article#locus .btn-cta.focus { color: #000; background-color: #f5d400; border: none; }
article#locus .btn-cta:hover { color: #000; background-color: #e7c800; border: none; }

@media (max-width: 767px) {
article#locus .mainlogo { width: 75px; height: 43.75px }
article#locus .btn-cta { width: 90%; margin: 0; margin-bottom: 10px; }
article#locus .pad-side { padding-left: 15px; padding-right: 15px; }
article#locus .pad-block { padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; }
article#locus .flexReverse { flex-direction: column-reverse !important; }
}
/* article#locus * { color: #FFFFFF; } */
article#locus .brand-bg { background-color: #333333; padding: 75px 0; }
article#locus .row { padding-left: 70px; padding-right: 70px; }
article#locus .tnc-txt { font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 120%; color: #FFFFFF; }
article#locus .stickyBTN { background-image: linear-gradient(rgba(219, 162, 55, 0), rgba(147, 101, 54, 0)), linear-gradient(90deg, #DBA237, #936536); }
article#locus .stickyBTN hr { margin: 10px auto; border-top: 3px solid #fbe6c1 !important; width: 100%; }
article#locus .mt30 { margin-top: 30px; }
article#locus .mt50 { margin-top: 50px; }
article#locus .text-left-center { text-align: left; }
article#locus .pageBG { background-color: #030905; }
article#locus .flexR { display: flex; flex-direction: row; justify-content: center; align-items: center; }
article#locus .flexC { display: flex; flex-direction: column; justify-content: center; align-items: center; }
article#locus sup, article#locus strong { color: inherit !important; }
/* article#locus h1 { font-size: max(2.604166666666667vw, 32px); background-image: -webkit-linear-gradient(135deg, #ece1b9 0%, #ffffff 17%, #ece1b9 39%, #ffffff 66%); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; } */
* { scroll-padding: 120px; scroll-behavior: smooth; }
.img-responsive { max-width: 100%; width: auto; }

@media (max-width: 991px) {
article#locus .row { padding-left: 25px; padding-right: 25px; }
article#locus .stickyBTN { align-items: center; }
article#locus .stickyBTN hr { margin: auto; border-top: 0 !important; border-left: 3px solid #fbe6c1 !important; width: 1px; height: 50px; }
}
/***************************************************************************************************************************************************************************************************/
body { color: inherit; }
:root { --purple : #8f54f0;
}
article#locus .bigpad { padding-left: 135px !important; padding-right: 135px !important; }
article#locus .bg1 { background-size: cover; background-image: url(../images/bg.jpg); background-position: center top; background-repeat: no-repeat; }
article#locus .bg2 { background-size: cover; background-image: url(../images/bg2.jpg); background-position: center top; background-repeat: no-repeat; border-top: 2px solid #d9d9d8; border-bottom: 2px solid #d9d9d8; }

@media (max-width: 991px) {
article#locus .bigpad { padding-left: 20px !important; padding-right: 20px !important; }
}

.header_lang a{color: #fff !important;}

.anchor_menu .flexC{width: 100%;}
.anchor_menu .flexC:first-child { border-right: 1px solid #373837;}
.anchor_menu { display: flex; flex-direction: row; justify-content: center; }
.anchor_menu a { font-size: 1.2em; font-weight: bold; color: #373837 !important; text-decoration: none; font-size: 22px !important; width: 100%; text-align: center; position: relative; }
.anchor_menu a font { color: var(--purple); }
.anchor_menu a:after { content: ''; position: absolute; transform: translate(24px, 3px); width: 30px; height: 30px; background-repeat: no-repeat; background-image: url(../images/anchor_arr.png); }
.leadin { font-size: 20px; color: #373837; line-height: 1.5; font-weight: normal; }
.big-gold { color: #ddbb78; font-size: 1.6em; font-weight: bold; }
.sect_head { position: relative; text-align: center; font-size: 32px; font-weight: bold; width: fit-content; margin: 0.6em auto; letter-spacing: 0.05em; }
.sect_head:before { content: ''; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); width: 24px; height: 10px; background-repeat: no-repeat; background-size: contain; background-image: url(../images/sect_head_tri.png); }
.sect_head:after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 3px; background-repeat: no-repeat; background-size: contain; background-image: url(../images/sect_head_line.png); }
.offer_flx { gap: 20px; }
.shops { gap: max(10%, 30px); }
.shops.rtl { flex-direction: row-reverse !important; }
.btn_flx { display: flex; flex-direction: row; justify-content: flex-start; gap: 10px; flex-wrap: wrap;}
.btn_flx a { width: fit-content; padding: 5px 1.5em; border-radius: 60px; font-size: 16px; color: #fff !important; background-color: #ababb0; transition: all 0.3s ease; }
.btn_flx a.active { background-color: var(--purple); }
.swipe_flx { display: flex; flex-direction: row; gap: 0px; padding-right: 0; padding-top: 30px; }
.swipe_head { width: 16.666666666666664%; }
.swipe_head h2 { font-size: 26px; font-weight: normal; margin: 0; position: relative; }
.swipe_head h2:after { content: ''; position: absolute; bottom: -20px; left: 0; width: 60%; height: 3px; background-image: url(../images/sect_head_line.png); background-size: contain; }
.swipe_flx .card { min-height: 260px; width: 200px; aspect-ratio: 1/1; background-color: #fff; border-radius: 10px; padding: 20px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3)); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); margin-bottom: 30px; }
.swiper-slide:nth-child(odd) .card { margin-top: 30px; }
.contain_swi { position: relative; width: 100%; overflow-x: hidden; cursor: grab !important; }
.contain_swi:after { content: ''; position: absolute; bottom: 0px; left: 0; width: 100%; height: 120px; background-color: var(--purple); border-radius: 30px 0 0 30px; opacity: 0.1; }
.contain_swi .swiper-container { padding-left: 50px; padding-right: 60px; }
.stps_contain { background: linear-gradient(135deg, #fff 0%, #f0ebf4 100%); padding: 20px 60px; border-radius: 20px; }
.redeem_step { display: flex; flex-direction: row; gap: 20px; margin-top: 30px; overflow: hidden; }
.redeem_step .txt_blk { width: 50%; display: flex; flex-direction: column; justify-content: center; }
.redeem_step .txt_blk .cir { width: 30px; height: 30px; border-radius: 50%; background-color: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; aspect-ratio: 1 / 1; }
.redeem_step .txt_blk p { color: #000; margin: 0; }
.redeem_step .txt_blk .flexR { gap: 20px; margin-bottom: 20px; justify-content: flex-start !important; opacity: 0.3; transition: all 0.3s ease; cursor: pointer; font-size: 18px; }
.redeem_step .txt_blk .flexR.reading { opacity: 1; }
.redeem_step .stp_swi { width: 50%; }
.redeem_step .stp_swi .swiper-container { width: 100%; }
.cta { width: fit-content; padding: 10px 60px; border-radius: 60px; font-size: 16px; color: var(--purple) !important; border: 1px solid var(--purple); background-color: #fff; transition: all 0.3s ease; position: relative; display: block; margin: 2em auto 0; font-weight: bold; }
.cta:after { content: ''; position: absolute; width: 16px; height: 16px; right: 15px; top: 50%; transform: translateY(-50%) rotate(-90deg); background-image: url(../images/anchor_arr.png); background-size: contain; background-repeat: no-repeat; }
/*********setup for alpinejs swiper********/
.swiper-container { width: 100%; overflow-x: hidden; cursor: grab !important; position: relative;}
.swiper { width: auto; overflow-x: hidden; white-space: nowrap; }
.swiper-wrapper { display: flex; gap: 0px; }
.swiper-slide { flex-shrink: 0; width: auto; }
.swiper-button-prev, .swiper-button-next { display: none; }
.swiper-cube .swiper-cube-shadow, .swiper-cube .swiper-cube-shadow:before, .swiper-slide-shadow-left, .swiper-slide-shadow-right { display: none; }

@media screen and (max-width: 768px) {
    :root { --swiper-navigation-size: 20px;
    }
    h2 { font-size: 18px; }
    h3, .leadin { font-size: 16px; }
    h4 { font-size: 14px; }
    .anchor_menu { flex-direction: row; }
    .anchor_menu a { padding: 10px 5px 25px 5px; width: 100%; height: auto; line-height: 120%; font-size: 18px !important; }
    .anchor_menu a:after { content: ''; position: absolute; transform: translate(0px, 0px); width: 100%; height: 21px; background-repeat: no-repeat; background-image: url(../images/anchor_arr.png); background-size: 17px; background-position: center; display: block; }
    .sect_head { font-size: 22px; }
    .offer_flx { flex-direction: column !important; }
    .offer_flx div { width: 100%; }
    .offer_flx div img { width: 100%; max-width: 260px;}
    .shops, .shops.rtl { flex-direction: column !important; }
    .btn_flx { flex-wrap: wrap; }
    .btn_flx a { font-size: 14px; }
    .swipe_head { display: none; }
    article#locus .bigpad:has(.swipe_flx) {
    padding-left: 0 !important;
    }

    .contain_swi {
        transform: translateX(30px);
    }
    .contain_swi .swiper-container { padding-left: 50px; padding-right: 40px; }
    .contain_swi:after { left: 0px;}
    .stps_contain { padding: 20px 20px; }
    .flexR.numF { flex-direction: column !important; gap: 10px !important; }
    .flexR.numF h3 { margin-top: 10px; }
    .redeem_step { flex-direction: column; }
    .redeem_step .txt_blk { order: 2; width: 100%; }
    .redeem_step .stp_swi { order: 1; width: 100%; }
    .redeem_step .stp_swi .swiper-container { min-height: 200px; }
    .redeem_step .txt_blk .flexR { display: none !important; }
    .redeem_step .txt_blk .flexR.reading { display: flex !important; }
    .cta { font-size: 14px; padding: 5px 30px; margin: 1em auto 0; width: calc(100% - 40px); text-align: center; }
    .cta:after { right: 10px; }
    .swiper-button-prev, .swiper-button-next { display: block; color: var(--purple); }
    .swiper-button-prev { left: 0; }
    .swiper-button-next { right: 0; }
    .swiper-slide img { max-width: 86%; margin: 0 7%; }

    .mob-pad-0{padding: 0 !important;}

}