.banner{ width: 100%; overflow: hidden; background:url(/wp-content/themes/vantage/images/promotions-gebyar-merdeka-2025-banner-bg.webp) center center no-repeat; background-size:cover;}
.banner .inner{ min-height:600px; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; max-width:1440px; position: relative;}
.banner .text-box{ width:590px; max-width:54%; position: relative; padding-top:35px; padding-bottom:35px; }
.banner h1{color: var(--v-black-light);font-size: 48px;font-weight: 600;line-height: 1.2;margin-bottom:4px; text-shadow: 0px 3px 5px rgba(0,0,0,0.2);}
.banner h1 span{color: var(--v-orange);}
.banner p{ color: var(--v-black-light); font-size: 20px; line-height: 1.3; font-weight: 500; margin-bottom:16px;}
.banner p br{ display: none;}
.banner p span{color: var(--v-orange);}
.banner p a{ text-decoration: underline;}
.banner p.text-p{ opacity: 0.8;}
.banner p.small-text{ font-size:14px;color: var(--v-black); line-height: 1.4; margin-top:-3px; margin-bottom:0;}
.banner p.small-text a{color:#646464;}
.banner p.small-text a:hover{color:#646464;}
.banner .buttons-box{ padding:7px 0px 17px;}
.banner .orange-button.p18{padding:19px 36px 17px 36px; font-weight:500;}
.banner .img-box{ width: 574px; max-width:42%; position: absolute; right: 45px; bottom:0;}
    
.wire{position: absolute;top: 31px;height: 2px;background: var(--v-orange);transition: .4s;}
.vantage-reward-join{background: url(/wp-content/themes/vantage/images/promotions-gebyar-merdeka-2025-row1-bg.webp) center bottom no-repeat; background-size:cover; overflow: hidden;}
.vantage-reward-join .inner{ padding-top:96px; padding-bottom:57px;}
.vantage-reward-join h2{color: var(--v-black-light);font-size: 48px; font-weight: 600; margin-bottom:0; text-align: center; line-height:1.2;}
.vantage-reward-join h2 span{color: var(--v-orange);}
.vantage-reward-join .join-tab-list{display: flex;justify-content: center;margin-bottom:26px;cursor: pointer;position: relative;}
.vantage-reward-join .join-tab-list .tab-item{position: relative;}
.vantage-reward-join .join-tab-list .tab-item::after{content:"";display:block;width: 100%;height: 1px;background:#BABABA;position: absolute;bottom: -1px;left: 0;}
.vantage-reward-join .join-tab-list p{ color: var(--v-black);font-size:20px;font-weight: 500;line-height: 1.2;margin-bottom: 0;text-align: center; padding-top:3px; padding-left:8px; padding-right:8px;}
.vantage-reward-join .join-tab-list .tab-item.active p{color: var(--v-orange);font-weight: 600; padding-top:0px;}
.vantage-reward-join .img-box{text-align: center;margin-bottom: 32px;}
.vantage-reward-join .step{width: 53px;height: 53px;border-radius: 50%;display: flex;justify-content: center;/* align-items: center; */color: var(--v-white);font-size: 20px;font-weight: 600;margin-bottom:6px;position: relative; line-height:1.2; padding-top:13px;}
.vantage-reward-join .join-tab-con{text-align: center; }
.vantage-reward-join .join-tab-con ul{ width: 916px; max-width:100%; margin: 0 auto; padding-bottom:32px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start;}
.vantage-reward-join .join-tab-con ul li{ width: 260px; max-width:calc(100% / 3 - 40px); text-align:left;}
.vantage-reward-join .join-tab-con ul li h4{ position: relative; display: flex; align-items: center; font-size:20px; line-height:1.2; margin-bottom:12px;}
.vantage-reward-join .join-tab-con ul li:nth-child(1) h4{color:#FF8E5C;}
.vantage-reward-join .join-tab-con ul li:nth-child(2) h4{color:#E35728;}
.vantage-reward-join .join-tab-con ul li:nth-child(3) h4{color:#034854;}
.vantage-reward-join .join-tab-con ul li h4 span.num-text{/* position: absolute; left: 0; top:50%; transform: translateY(-50%); */ margin-right:16px; display: flex; justify-content: center; align-items: center; width: 52px; height: 52px; min-width:52px; min-height:52px; border-radius:50%;font-weight: 600; font-size:20px; color:var(--v-white);}
.vantage-reward-join .join-tab-con ul li:nth-child(1) h4 span.num-text{background:#FF8E5C;}
.vantage-reward-join .join-tab-con ul li:nth-child(2) h4 span.num-text{background:#E35728;}
.vantage-reward-join .join-tab-con ul li:nth-child(3) h4 span.num-text{background:#034854;}
.vantage-reward-join .join-tab-con ul li p{ color: var(--v-black); font-size:16px; line-height: 1.5; margin-bottom: 0; width: 102%;}
.vantage-reward-join .join-tab-con ul li p span{color: var(--v-orange);}
.vantage-reward-join .join-tab-top-con{ width: 580px; max-width:100%; margin: 0 auto; padding-bottom:33px; color: var(--v-black); font-size: 16px; line-height:1.45; text-align:center; }
.vantage-reward-join .join-tab-top-con p{color: var(--v-orange); font-size: 20px; font-weight: 500; margin-bottom:14px;}
.vantage-reward-join .join-tab-top-con span{opacity: 0.8;}
.vantage-reward-join .join-tab-top-con-item{display: none;}
.vantage-reward-join .join-tab-top-con-item.active{display: block;}
.vantage-reward-join .tab-con-item{display: none;}
.vantage-reward-join .tab-con-item.active{display: block;}
.vantage-reward-join .btn-box{ padding-bottom:9px;}
.vantage-reward-join .orange-arrow-button.p18{ padding:22px 62px 22px 28px; text-transform: none;}
.vantage-reward-join .bottom-text{ max-width:768px; margin: 0 auto;}
.vantage-reward-join .bottom-text p{ color: var(--v-black); font-size:16px; line-height: 1.45; margin-bottom:5px;}
.vantage-reward-join .bottom-text p span{color: var(--v-orange);}
.vantage-reward-join .bottom-text p a{ text-decoration: underline;color:#646464;}
.vantage-reward-join .bottom-text p a:hover{ text-decoration: underline;color:#646464;}
.vantage-reward-join .bottom-text p.small-text{font-size:14px; margin-bottom: 0;}


.row2 .inner{ max-width:1440px; padding-top:96px; padding-bottom:105px;}
.row2 h2{ font-size: 48px; font-weight: 600;color: var(--v-black-light); margin-bottom: 16px; line-height: 1.22; text-align:center;}
.row2 h2 span{color: var(--v-orange);}

.row2 .top-text{ max-width:590px; margin: 0 auto 58px; text-align:center;}
.row2 .top-text p{ color: var(--v-black); font-size:16px; line-height: 1.45; opacity: 0.8; margin-bottom:0;}
.row2 .top-text p span{color: var(--v-orange);}
.row2-table-wrap{width: 1062px; max-width:100%; margin: 0 auto 24px; box-shadow: 0px 4px 10px 0px #00000020; border-radius:16px; overflow: hidden; display: flex; justify-content: flex-start; align-items: flex-start;}
.row2-table-wrap .table-first{ width: 80px; position: relative; z-index: 99;}
.row2-table-wrap .row2-table-swiper{ width: calc(100% - 80px);}
.row2-table-wrap .table-column li{border-bottom:0; padding:0px 2px; text-align: center; font-size: 18px; font-weight: 600; color: #404040; background:var(--v-white); line-height:1.25; display: flex; text-align: center; justify-content: center; align-items: center; height: 75px; max-height:75px; overflow: hidden;}
.row2-table-wrap .table-column li:nth-child(2n){background:var(--v-grey-light2);}
.row2-table-wrap .table-column li:first-child{ background:var(--v-green-darker); color: var(--v-white); padding:0px 5px;}
.row2-table-wrap .table-column.last-table-column li{color:var(--v-orange);}
.row2-table-wrap .table-column.last-table-column li:first-child{background:var(--v-orange); color: var(--v-white);}
.row2 .swiper-pagination{ width: 90px; margin: 0px auto; border-radius:6px; background:#C6C6C6; overflow: hidden; height: 4px; position: static; /* display: none; */}
.row2 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--v-orange);height: 4px;border-radius:6px;}
.row2 .bottom-text{ text-align:center; padding-top:26px;}
.row2 .bottom-text p{ color: var(--v-orange); font-size:14px; line-height: 1.4; margin-bottom:5px;}
.row2 .bottom-text p a{ text-decoration: underline; color:var(--v-orange);}
.row2 .bottom-text p a:hover{ text-decoration: underline; color:var(--v-orange);}
.row2 .bottom-text .orange-button.p18{padding:19px 36px 17px 36px; font-weight:500; margin-bottom:10px;}

@media(max-width:1440px) {
    .banner .inner{min-height:auto; align-items: flex-end;}
    .banner .text-box{ padding-top:50px; padding-bottom:50px; }
    .banner .img-box{ position: static;}
    .banner h1{ font-size:42px;}
    .banner p{ font-size:18px;}
    .banner .orange-button.p18{padding:18px 36px 16px 36px;}

    .vantage-reward-join h2{ font-size:42px;}
    .vantage-reward-join .join-tab-top-con p{ font-size:18px;}

    .row2 h2{ font-size:42px;}
}
@media(max-width:1240px) {
    .banner h1{ font-size:36px;}
    .banner p{ font-size:16px;}
    .banner .text-box{ max-width:calc(100% - 400px);}
    .banner .img-box{ width: 400px; max-width:400px; margin-right:-20px;}
    .banner .orange-button.p18{padding:16px 36px 15px 36px;}
    .banner .buttons-box{ padding: 0px 0px 5px;}
    
    .vantage-reward-join .inner { padding-top:80px; padding-bottom: 50px;}
    .vantage-reward-join h2{ font-size:36px;}
    .vantage-reward-join .join-tab-top-con{ font-size:14px;}
    .vantage-reward-join .join-tab-top-con p{ font-size:16px;}
    .vantage-reward-join .join-tab-list p{ font-size:18px;}
    .vantage-reward-join .orange-arrow-button.p18{ padding:20px 62px 20px 28px;}

    .row2 .inner{ padding-top:80px; padding-bottom: 80px;}
    .row2 h2{ font-size:36px;}
}
@media(max-width:940px) {
    .banner h1{ font-size:32px;}    
    .banner .text-box{ padding-top:40px; padding-bottom:40px; }    
    
    .vantage-reward-join .inner { padding-top:60px; padding-bottom: 40px;}
    .vantage-reward-join h2{ font-size:32px;}
    .vantage-reward-join .img-box{margin-bottom: 20px;}
    .vantage-reward-join .join-tab-con ul li h4{ font-size:18px;}
    .vantage-reward-join .join-tab-con ul li h4 span.num-text{ margin-right:12px;  width: 40px; height: 40px; min-width: 40px; min-height: 40px;}
    .vantage-reward-join .join-tab-con ul li p{ font-size:14px;}
    .vantage-reward-join .orange-arrow-button.p18{ padding:18px 62px 18px 28px;}
    
    .row2 .inner{ padding-top:60px; padding-bottom: 60px;}
    .row2 h2{ font-size:32px;}
}
@media(max-width:768px) {
    .banner { background:url(/wp-content/themes/vantage/images/promotions-gebyar-merdeka-2025-banner-bg-mb.webp) center center no-repeat; background-size: 100% 100%;}
    .banner .inner{ height: auto; justify-content: center; align-items: flex-start; padding-bottom:320px;}
    .banner h1{ font-size:28px; margin-bottom:15px; text-shadow:none;}
    .banner p{ line-height:1.5; margin-bottom:24px;}
    .banner p.small-text{ margin-top:-7px;}
    .banner p.mb-color-p{ opacity: 0.8;}
    .banner p br{ display: block;}
    .banner .buttons-box{ padding-bottom: 2px;}
    .banner .orange-button.p18{ padding: 13px 20px 14px; min-width: 180px; font-size:16px;}
    .banner .text-box{ max-width:100%; width: 360px; margin: 0 auto; text-align:center; padding-top:34px; padding-bottom:20px;}
    .banner .img-box{ width: 348px; max-width:348px; margin-right:0; position: absolute; left: 50%; transform: translateX(-50%);}

    .vantage-reward-join{ background:#f2f3f5; border-top:1px solid #ffffff;}
    .vantage-reward-join .inner { padding-top:32px; padding-bottom: 32px;}
    .vantage-reward-join h2{ font-size:20px; margin-bottom:8px;}
    .vantage-reward-join h2 br{ display: none;}
    .vantage-reward-join .join-tab-top-con{ padding-bottom:16px; max-width: 400px;}
    .vantage-reward-join .join-tab-top-con p{ font-size:14px;}
    .vantage-reward-join .join-tab-list{ margin-bottom:28px;}
    .vantage-reward-join .join-tab-list p{ font-size:14px;}
    .vantage-reward-join .join-tab-list .tab-item.active p{ padding-top:2px;}
    .vantage-reward-join .join-tab-con ul{ width: 352px; gap: 17px; padding-bottom: 23px;}
    .vantage-reward-join .join-tab-con ul li{ width: 100%; max-width:100%; padding-left:33px; position: relative;}
    .vantage-reward-join .join-tab-con ul li h4{ position: static; font-size:16px; margin-bottom:7px;}
    .vantage-reward-join .join-tab-con ul li h4 span.num-text{ position: absolute; left: 0; top:-2px; width: 24px; height: 24px; min-width: 24px; min-height: 24px; font-size:14px;}
    .vantage-reward-join .join-tab-con ul li p{ line-height:1.45;}
    .vantage-reward-join .img-box{ display: none;}
    .vantage-reward-join .bottom-text{ max-width: 400px;}
    .vantage-reward-join .bottom-text p{ font-size:14px; margin-bottom:19px;}
    .vantage-reward-join .bottom-text p.small-text { font-size: 12px; line-height: 1.45;}
    .vantage-reward-join .bottom-text p.small-text br{ display: none;}
    .vantage-reward-join .orange-arrow-button.p18{ font-size:14px; padding:15px 56px 14px 24px;}
    
    .row2 .inner{ padding-top:32px; padding-bottom: 27px; /* padding-right:0; */}    
    .row2 h2{ font-size:20px; margin-bottom:4px;}
    .row2 .top-text{ margin-bottom:24px; max-width:350px;}
    .row2 .top-text p{ font-size:14px; line-height:1.3; opacity: 1; color: #4d4d4d; font-weight:500;}
    .row2-table-wrap{ border-radius:8px;}
    .row2-table-wrap .table-first{ width: 60px;}
    .row2-table-wrap .row2-table-swiper { width: calc(100% - 60px);}
    .row2-table-wrap .table-column li{ height: 60px; max-height:60px; font-size:16px; line-height: 1.4;}    
    .row2-table-wrap .table-column li:first-child{ height: 72px; max-height:72px; font-size:14px; font-weight:500;}
    .row2 .bottom-text{ padding-top:24px; margin: 0px auto; max-width:360px;}
    .row2 .bottom-text .orange-button.p18{ padding:14px 20px 13px 20px;}
    .row2 .bottom-text p{ font-size:12px;}
    .row2 .bottom-text p br{ display: none;}
}
/* ! vantagemarekts|2025-10-21 17:20:00 ! */