.orange-button{text-transform: uppercase;}

.banner{background: url(/wp-content/themes/vantage/images/trading-cashback-bonanza-banner-new-bg.webp) center top no-repeat; position: relative; overflow: hidden;}
.banner:before,
.banner:after{ content:""; display: block; width: 50%; height: 100%; position: absolute; top:0; z-index: -1;}
.banner:before{ left: 0; background: url(/wp-content/themes/vantage/images/trading-cashback-bonanza-banner-new-left.webp) left top repeat-x;}
.banner:after{ right: 0; background: url(/wp-content/themes/vantage/images/trading-cashback-bonanza-banner-new-right.webp) left top repeat-x;}
.banner .inner{max-width: 1710px; height: 600px; position: relative; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: flex-start; padding-top:90px;}
.banner .text-box{ width: 690px; max-width:50%; position: relative; z-index: 1;}
.banner h1{font-size: 62px; font-weight: 600; color: var(--v-black); line-height:1; margin-bottom: 24px;}
.banner h1 span{color: var(--v-orange);}
.banner p.top-text{ margin-bottom:7px; color: var(--v-orange); font-weight: 500;}
.banner p{font-size: 20px; font-weight: 400; color: var(--v-black); line-height: 1.2; margin-bottom: 32px;}
.banner .text{ padding-left:6px;}
.banner .orange-button{margin-bottom: 5px;text-transform: uppercase; padding: 14px 35px 11px;}
.banner .tnc{line-height: 16px;margin: 0; font-size:17px;}
.banner .tnc:hover a{ text-decoration: underline;}
.banner .img-box{ position: absolute; right: -84px; bottom:-41px; /* transform: translateY(-50%); */ width: 988px; max-width:58%;}

html[lang='ms-MY'] .banner .text-box{ width: 720px;}

.row1{padding: 68px 0 109px;text-align: center;}
.row1 p{font-size: var(--fs-20);font-weight: 500;color: var(--v-orange);line-height: 20px;margin-bottom: 8px;}
.row1 h2{font-size: 48px;font-weight: 600;color: var(--v-black-light);margin-bottom: 20px;}

.flip {display: inline-block;position: relative;width: 60px;height: 98px;line-height: 98px;/*border: solid 1px #000;*/border-radius: 10px;background: #fff;font-size:44px;color: #fff;box-shadow: 0 0 6px rgba(0, 0, 0, .5);text-align: center;font-family: "Helvetica Neue"}
.flip .digital:before,.flip .digital:after {content: "";position: absolute;left: 0;right: 0;background: #000;overflow: hidden;box-sizing: border-box;font-style: normal;font-weight: 600; padding-left: 3px; padding-right: 3px;}
.flip .digital:before {top: 0;bottom: 50%;border-radius: 10px 10px 0 0;border-bottom: solid 1px #666;}
.flip .digital:after {top: 50%;bottom: 0;border-radius: 0 0 10px 10px;line-height: 0;}
.flip.down .front:before {z-index: 3;}
.flip.down .back:after {z-index: 2;transform-origin: 50% 0%;transform: perspective(160px) rotateX(180deg);}
.flip.down .front:after,.flip.down .back:before {z-index: 1;}
.flip.down.go .front:before {transform-origin: 50% 100%;animation: frontFlipDown 0.6s ease-in-out both;box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);backface-visibility: hidden;}
.flip.down.go .back:after {animation: backFlipDown 0.6s ease-in-out both;}
.clock {text-align: center;display:flex;justify-content: center; gap: 12px;}
.clock em {display: inline-block;line-height: 102px;font-size: 66px;font-style: normal;vertical-align: top;}
.clock .times{font-size:var(--fs-18);font-weight:600;line-height:1.2;margin-top:16px;color:var(--v-black-light);text-transform: uppercase;}

.timelist{ width: 109px; display: flex;flex-wrap: wrap;}
.timelist .times{ width: 100%;}
.timelist .flip{ display: block; width: 50%; background-color:#000;}
.timelist .flip:nth-of-type(1){border-radius: 10px 0px 0px 10px;}
.timelist .flip:nth-of-type(1) .digital:before{border-radius: 10px 0px 0px 0px; text-align: right;}
.timelist .flip:nth-of-type(1) .digital:after{border-radius: 0px 0px 0px 10px; text-align: right;}	
.timelist .flip:nth-of-type(2){border-radius: 0px 10px 10px 0px;}
.timelist .flip:nth-of-type(2) .digital:before{border-radius: 0px 10px 0px 0px; text-align: left;}
.timelist .flip:nth-of-type(2) .digital:after{border-radius: 0px 0px 10px 0px; text-align: left;}

@keyframes frontFlipDown {
    0% {transform: perspective(160px) rotateX(0deg);}
    100% {transform: perspective(160px) rotateX(-180deg);}
}

@keyframes backFlipDown {
    0% {transform: perspective(160px) rotateX(180deg);}
    100% {transform: perspective(160px) rotateX(0deg);}
}

.flip .number0:before,.flip .number0:after {content: "0";}
.flip .number1:before,.flip .number1:after {content: "1";}
.flip .number2:before,.flip .number2:after {content: "2";}
.flip .number3:before,.flip .number3:after {content: "3";}
.flip .number4:before,.flip .number4:after {content: "4";}
.flip .number5:before,.flip .number5:after {content: "5";}
.flip .number6:before,.flip .number6:after {content: "6";}
.flip .number7:before,.flip .number7:after {content: "7";}
.flip .number8:before,.flip .number8:after {content: "8";}
.flip .number9:before,.flip .number9:after {content: "9";}

.row2{background: url(/wp-content/themes/vantage/images/trading-cashback-bonanza-row1-banner.webp) left center no-repeat;background-size: cover;overflow: hidden;position: relative;padding: 80px 0 117px;}
.row2 h2{color: var(--v-black-light);font-size: var(--fs-56);font-weight: 500;margin-bottom: 64px;text-align: center;line-height: 68px;}
.row2 h2 span{color: var(--v-orange);}
.row2 .tab-con-item{max-width: 1006px;margin: 0 auto;text-align: center;}
.row2 .swiper{overflow: visible;}
.row2 .swiper-wrapper{justify-content: center;}
.row2 .swiper-slide{max-width: 243px;}
.row2 .swiper-slide:last-child{margin-right: 0 !important;}
.row2 .swiper-slide::after{content:"";display:block;width: 15px;height: 19px;background:url(/wp-content/themes/vantage/images/deposit-bonus-get-icon1.svg) top center no-repeat; background-size:cover;position: absolute;top: 20px;right: -80px;}
.row2 .swiper-slide:last-child::after{display: none;}
.row2 .step{width: 64px;height: 64px;border-radius: 50%;display: flex;justify-content: center;align-items: center;color: var(--v-white);font-size: 28px;font-weight: 500;margin-bottom: 16px;line-height: 34px;}
.row2 .swiper-slide:nth-child(1) .step{background:#FF8E5C;}
.row2 .swiper-slide:nth-child(2) .step{background:#E35728;}
.row2 .swiper-slide:nth-child(3) .step{background:#164B53;}
.row2 h3{color: var(--v-black);font-size: var(--fs-20);font-weight: 400;line-height: 23px;margin-bottom: 0;text-align: left;}
.row2 h3 em{display: block;font-size: var(--fs-18);line-height: 21px;}
.row2 .swiper-slide:last-child h3::after{display: none;}
.row2 p{color: var(--v-black);font-size: var(--fs-16);font-weight: 400;line-height: 19px;margin-bottom: 0;text-align: left;}
.row2 p em{font-size: var(--fs-12);}
.row2 .tab-con-swiper { margin-bottom: 64px; }
.wire{position: absolute;top: 31px;height: 2px;background: var(--v-orange);transition: .4s;}
.row2 .account{margin-top: 32px;line-height: 19px;font-size: var(--fs-16);font-weight: 500;text-align: center;}
.row2 .account a{font-weight: 400;text-decoration: underline;color: var(--v-orange);}

.row3{padding: 96px 0;}
.row3 .inner{max-width: 1409px;}
.row3 h2{color: var(--v-black-light);font-size: var(--fs-56);font-weight: 500;text-align: center;margin-bottom: 44px;}
.row3 h2 span{color: var(--v-orange);}
.row3 .content-market{display: flex;align-items: center;}
.row3 .content-market .content-market-right{max-width: 416px;margin-left: 88px;}
.row3 ul li{margin-bottom: 32px;}
.row3 ul li:last-child{margin-bottom: 0;}
.row3 h3{color: #034854;font-size: var(--fs-24);font-weight: 500;margin-bottom: 32px;line-height: 17px;}
.row3 ul li h4{color: var(--v-black-light);font-size: var(--fs-24);font-weight: 400;margin-bottom: 13px;position: relative;padding-left: 33px;line-height: 19px;}
.row3 ul li h4::before{content: '';background: url(/wp-content/themes/vantage/images/vantage-reward-get-check.svg) top center no-repeat;display: block;width: 20px;height: 20px;border-radius: 50%;background-color: #23555C;position: absolute;left: 0px;top: 50%;transform: translateY(-50%);}
.row3 ul li p{color:  var(--v-black);font-size: var(--fs-16);font-weight: 400;margin-bottom: 0;line-height: 19px;max-width: 96%;}
.row3 ul li p span{color: var(--v-orange);}

.row4{padding: 34px 0 96px;overflow: hidden;text-align: center;}
.row4 h2{color: var(--v-black-light);font-size: var(--fs-56);font-weight: 500;margin-bottom: 16px;text-align: center;line-height: 68px;}
.deposit-bonus-power h2 span,
.row4 h2 span{color: var(--v-orange);}
.row4 p{color: var(--v-black);font-size: var(--fs-20);font-weight: 400;margin-bottom: 32px;text-align: center;line-height: 24px;}
.row4 .calculation-table{max-width: 1024px;margin: 0 auto 32px;}
.row4 .calculation-table table{width: 100%;border-radius: 16px;box-shadow: 0px 4px 15px -2px rgb(16,24,40,0.3);overflow: hidden;}
.row4 .calculation-table table th{color: var(--v-white);font-size: var(--fs-20);font-weight: 600;padding: 24px 36px;text-align: center;}
.row4 .calculation-table table th:nth-child(1){background:var(--v-green-darker);width: 50%;}
.row4 .calculation-table table th:nth-child(2){background:var(--v-orange);}
.row4 .calculation-table table td{color: #4A4A4A;font-size: 16px;font-weight: 400;padding: 16px;text-align: center;line-height: 23px;}
.row4 .calculation-table table td span{font-weight: 500;color: var(--v-orange);}
.row4 .calculation-table table tr:nth-child(even) td{background:var(--v-white);}
.row4 .calculation-table table tr:nth-child(odd) td{background:var(--v-grey-light2);}
.row4 .account{margin: 16px 0 0;line-height: 19px;font-size: var(--fs-16);font-weight: 500;text-align: center;}
.row4 .account a{font-weight: 400;text-decoration: underline;color: var(--v-orange);}

.faq-module{background: #F2F3F5;}
.faq-module-inner .faq-list .faq-module-tit h3{font-size: var(--fs-22) !important;}
.faq-module-inner .faq-list .faq-module-detial{font-size: var(--fs-20) !important;}

@media(max-width:1700px) {
    .banner .img-box{ bottom:50%; transform: translateY(50%); width:auto; max-width:100%; height: 100%; right: -180px;}
    .banner .img-box img{ width: auto; height: 100%;}
}

@media(max-width:1240px) {
    .banner .inner{ height: 500px; padding-top:0px; align-items: center;}    
    .banner h1{font-size: 50px; margin-bottom: 20px;}
    .banner p.top-text{ margin-bottom:5px;}
    .banner p{font-size: 18px; margin-bottom: 20px;}
    .banner .text{ padding-left:0px;}
    .banner .tnc{line-height: 16px;margin: 0; font-size:14px;}
    .banner .img-box{ right: -200px;}




    .row1 h2{font-size: var(--fs-40);line-height: 1.22;}

    .row2{padding: 80px 0;}
    .row2 .swiper-slide::after{right: -30px;}

    .row3{padding: 80px 0;}

    .row4{padding: 32px 0 80px;}
    .row4 h2{line-height: 1.22;}
}
@media(max-width:1024px) {    
    .banner h1{font-size: 42px;}


    .row2{padding: 70px 0;}

    .row3 .content-market .content-market-right{margin-left: 50px;}

    .row3{padding: 70px 0;}

    .row4{padding: 32px 0 70px;}
}
@media(max-width:960px) {
}
@media(max-width:890px) {
    .row2 .swiper-wrapper{justify-content: flex-start;}
}

@media(max-width:768px) {
    .banner{ background-size:cover;}
    .banner:before,
    .banner:after{ display: none;}
    .banner .inner{ height: auto; padding-top:30px; align-items: flex-start; padding-bottom: 320px;}
    .banner .text-box{ width: 300px; max-width:100%; margin: 0 auto; text-align:center;}
    .banner h1{font-size: 24px;}
    .banner p{font-size: 16px;}
    .banner .img-box{ right:50%; bottom:0; transform: translateX(50%); height: 300px; width: 478px; max-width:478px;}
    .banner .img-box img{ width: 100%; height: auto; max-width:100%;}

    html[lang='ms-MY'] .banner .text-box{ width: 300px;}




    .row1{padding: 50px 0;}

    .row2{padding: 60px 0;}
    .row2 h2{margin-bottom: 32px;line-height: 1.22;}

    .row3{padding: 60px 0;}
    .row3 h2{margin-bottom: 32px;}
    .row3 .content-market{flex-direction: column;}
    .row3 .content-market .content-market-right{width: 100%;max-width: 100%;margin-left: 0;margin-top: 20px;}
    .row3 h3{margin-bottom: 20px;}
    .row3 ul li{margin-bottom: 20px;}

    .row4{padding: 32px 0 60px;}
    .row4 .calculation-table table th{padding: 20px 15px;}
}
@media(max-width:510px) {

    .row1{padding: 52px 0 32px;}
    .row1 p{font-size: 18px;margin-bottom: 8px;}
    .row1 h2{font-size: 32px;}
    .timelist{width: 75px;}
    .flip {width: 75px;height: 88px;line-height: 88px;font-size:40px;border:none;border-radius:4px;}
    .flip .digital:before{border-radius: 4px 4px 0 0;}
    .flip .digital:after{border-radius: 0 0 4px 4px}

    .row2{padding: 32px 0;}
    .row2 h2{margin-bottom: 20px;}
    .row2 .tab-con-swiper{margin-bottom: 30px;}
    .row2 .swiper-slide{max-width: 160px;}
    .row2 .swiper-slide::after{top: 50px;right: -27px;}
    .row2 .step{width: 36px;height: 36px;font-size: 16px;}
    .row2 h3{line-height: 19px;}
    .row2 h3 em{line-height: 16px;}
    .row2 .account{margin-top: 10px;}

    .row3{padding: 32px 0;}
    .row3 h2{margin-bottom: 20px;}

    .row4{padding: 32px 0;}
}
@media(max-width:360px){
    .flip{font-size:32px;}
}
@media(max-width:330px){
    .clock{gap:5px;}
    .flip{width: 25px;height: 50px;line-height: 50px;font-size: 32px;}
}



.banner .expired { position: absolute; left: 0px; top: 0px; background: var(--v-black); padding: 9px 16px 9px 12px; color: var(--v-white); font-size: var(--fs-18); margin-bottom: 0; line-height: 18px; font-style: italic; font-family: Gilroy; font-weight: 400; }
.banner .expired .triangle-up { width: 0; height: 0; border-right: 10px solid transparent; border-top: 36px solid var(--v-black); display: block; position: absolute; top: 0; right: -10px; }
@media (max-width:1440px) {
    .banner .expired {  padding: 5px 8px 5px 6px; }
    .banner .expired .triangle-up {    border-top: 28px solid var(--v-black); }
}