:root{
    --accent:#01a385;
}



.heroPricing {text-align:center; background:#f6faf9; padding:40px; border-radius:20px; margin-top:20px;}
.heroPricing h1 span {display:block;}
.heroPricing .strap {color: #666; font-size: 18px; font-weight: 600; margin-bottom:20px;}
.heroPricing .bens {display: flex; align-items: center; justify-content: center; gap:50px;color: #666; font-weight: 600; margin-top: 20px;}

.pricingTable {display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap:8px; margin-top:30px;}
.pricingTable .card {display:flex; flex-direction:column; align-items: center; font-weight:600;}
.pricingTable .card:before {
    background: #e7faf6; color: #0f8b72; border-radius:50%; height:40px; width:40px; font-size:16px; font-weight:700;
    display:flex; align-items: center; justify-content: center; margin-bottom:10px;
}
.pricingTable .card.t4, .pricingTable .card.t5 {border-color:#15bb9a; position:relative;}
.pricingTable .card.t5 {background:#f6faf9;}
.pricingTable .card.t4:after, .pricingTable .card.t5:after {
    color:#fff; text-align:center; border-radius:8px; font-size:10px; position:absolute; top:-10px; padding:3px 15px; left:50%; transform: translateX(-50%);  width:max-content;
    
}
.pricingTable .card.t4:after {content:'MOST POPULAR';background:#000;}
.pricingTable .card.t5:after {content:'BEST VALUE'; background:var(--accent);}


.pricingTable .card.t1:before {content:'1';}
.pricingTable .card.t2:before {content:'5';}
.pricingTable .card.t3:before {content:'10';}
.pricingTable .card.t4:before {content:'20';}
.pricingTable .card.t5:before {content:'50';}
.pricingTable .card .price {font-size:32px; line-height:1; margin-bottom:10px;}
.pricingTable .card .discount {font-size:12px; color:#666;}
.pricingTable .card .save {color: #0f8b72;}
.pricingTable .card a {display:flex; width:100%; justify-content: center; margin-top:20px;}
.pricingTable .cta {
    grid-column:1 / -1; margin:30px auto 0; justify-content: center; display:grid; grid-template-columns: 1fr 200px; gap:30px;
    background: #f6faf9; padding:20px; border-radius:20px; 
}
.pricingTable [data-icon] { font-weight:600; color: #666; line-height:1; gap:10px;}
.pricingTable [data-icon]:before {min-width:24px;}


.simpleSteps {margin-top:30px;}
.simpleSteps .head {margin-bottom:25px;}
.simpleSteps .steps {display:grid; grid-template-columns: 1fr 1fr 1fr; gap:30px; position:relative;}
.simpleSteps .steps .card {position:relative;}
.simpleSteps .steps .card .text:before {position:absolute; top:0; right:10px; font-size:88px; line-height:1; font-weight:bold; color:#e7faf6;}    
.simpleSteps .steps .card:nth-of-type(1) .text::before {content:'01';}    
.simpleSteps .steps .card:nth-of-type(2) .text::before {content:'02';}    
.simpleSteps .steps .card:nth-of-type(3) .text::before {content:'03';}  
.simpleSteps .steps .card .text p {max-width:60%;} 
.simpleSteps .icon {background: #e7faf6; padding:10px; border-radius:50%; display:inline-flex; margin-bottom:20px;} 
.simpleSteps .icon [data-icon]:before {background: #0f8b72; } 


.topupContainer {margin-top:30px; background:url('/assets/images/website/topupcontainer.webp') #f6faf9 no-repeat bottom right; background-size:auto 100%; font-size:16px; padding:30px; border-radius:20px; display:grid; grid-template-columns: 400px 1fr; gap:100px;}
.topupContainer .text p {width:75%;}
.topupContainer .card {max-width:300px; font-size:12px; color:#333; font-weight:600;}
.topupContainer .card > div {display:flex; align-items: center; margin-bottom:10px;}
.topupContainer .card > div > div:nth-of-type(2) {margin-left: auto; display:flex; align-items: center; gap:5px;}
.topupContainer .card > div > div:nth-of-type(2) span {color:var(--accent)}
.topupContainer [data-icon=toggle_on]:before {width:36px; height:36px;}

.topupContainer .card > div > div.drop:nth-of-type(2) {gap:20px; padding:7px 7px 7px 15px; border-radius:6px; background: #fff; border: 1px solid #dce6ee; font-size:12px; font-weight: 600;color: #333;}
.topupContainer .drop [data-icon=chevron_down] {margin-left:auto;}
.topupContainer .drop [data-icon=chevron_down]:before {background: #333; width:18px; height:18px;}

.topupContainer .card > div:last-child {margin-bottom:0; margin-top:30px; margin-right:20px;}
.topupContainer .card > div:last-child [data-icon=check_circle]:before {width:18px; height:18px;}


.faqContainer {margin-top:30px; display:grid; grid-template-columns: 1fr 1fr; align-items: self-start; gap:30px;padding:20px; }
.faqContainer .head {grid-column:1 / -1;}
.faq {border-radius:10px; text-align:left; padding:0;}
.faqQuestion:first-child {border-top: 0;}
.faqQuestion {
    cursor: pointer;user-select: none;padding: 0 20px;display: flex;align-items: center;justify-content: space-between;font-size:16px;font-weight: 500;
    border-top: 1px solid #dce6ee;
}
.faqQuestion span {padding:10px 0;}
.faqQuestion[data-arrow]:after {margin-left: 10px;content:''; height:24px; width:24px; background:#ccebe4;mask:url('/assets/images/chevron_down.svg') no-repeat center/contain;}
.faqQuestion[data-arrow=keyboard_arrow_up]:after {mask:url('/assets/images/chevron_up.svg') no-repeat center/contain;}
.faqAnswer {display: none;padding: 0 20px 10px 20px;}
.faqContact {display:flex; align-items: flex-start; padding:0 50px; font-size: 16px;;}
.faqContact > div {padding:20px; border-radius: 10px; border: 1px solid #c3e6de; background: #ebf9f6;}
.faqContact h3 {font-size:32px;}
.faqContact a::after {margin-left:20px; content:''; height:24px; width:24px; background:#fff;mask:url('/assets/images/chevron_right.svg') no-repeat center/contain;}



.finalCTA {margin-top:30px; text-align: center;  color:#e7e7e7; padding:30px 20px; border-radius:20px; position:relative; background:#161e2f; z-index:1;}
.finalCTA::before, .finalCTA::after {content:''; position:absolute; top:0; bottom:0; width:300px;z-index:-1;border-radius:20px; background-size:cover;}
.finalCTA::before { left:0; background-image:url('/assets/images/website/ctabackground.webp'); }
.finalCTA::after { right:0; background-image:url('/assets/images/website/ctabackground.webp'); background-position: center right;}

.finalCTA .head .pill {background:transparent; font-size:16px; color:#00c39f}
.finalCTA .head h2 {color:#fff;}
.finalCTA .head .strap {color: #e7e7e7;}
.finalCTA .bens {display:flex; align-items: center; justify-content: center; gap:30px; color:#e7e7e7; font-size:12px; font-weight:600; margin-top:20px;}
.finalCTA .bens [data-icon]::before {width:18px; height:18px; background:#00c39f;}
.finalCTA .actions {display:flex; align-items: center; justify-content: center; gap:10px; margin-top:20px;}
.finalCTA .actions a {border:1px solid #00c39f; color:#fff; background:#161e2f;}
.finalCTA .actions a.prices::after {margin-left:20px; content:''; height:24px; width:24px; background:#fff;mask:url('/assets/images/arrow_right_alt.svg') no-repeat center/contain;}
.finalCTA .actions a.primary {background:#00c39f; border-color:#00c39f;}
.finalCTA .actions a.primary::before {margin-right:10px; content:''; height:24px; width:24px; background:#fff;mask:url('/assets/images/gift.svg') no-repeat center/contain;}


@media(max-width:1280px){
}

@media(max-width:960px){
    h1 {font-size: clamp(34px, 4.2vw, 64px);}
    h2 {font-size: clamp(22px, 3vw, 32px);}

    .pricingTable {grid-template-columns:repeat(6, 1fr); gap:20px 8px}
    .pricingTable .card {grid-column:span 2;}
    .pricingTable .card:nth-child(4) {grid-column:2 / span 2;}
    .pricingTable .card:nth-child(5) {grid-column:4 / span 2;}

    .pricingTable .cta {order:6; margin-top:15px;}

    .simpleSteps .steps {gap:10px;}
    
    .simpleSteps .steps .card .text p {max-width:unset;}
    .simpleSteps .steps .card .text:before {font-size: 56px;}

    .topupContainer {gap:20px; grid-template-columns:0.9fr 1.1fr;}
    .topupContainer .text p {width: unset;}
}


@media(max-width:900px){
    .faqContainer {grid-template-columns: 1fr; gap: 0;}
    .faq.f1 {border-radius:15px 15px 0 0; border-bottom:0; margin-top:20px;}
    .faq.f2 {border-radius:0 0 15px 15px;}
}

@media(max-width:760px){
    .heroPricing {text-align:left;}
    .heroPricing .bens {justify-content: flex-start; gap:30px;}
}

@media(max-width:710px){
    .topupContainer {grid-template-columns: 1fr; background-size:auto 270px; padding:15px;}

}



@media(max-width:660px){
    .heroPricing {padding:20px;}
    .heroPricing .bens {flex-direction: column; gap:10px; align-items: flex-start;}

    .pricingTable .card .save {font-size:12px;}


    .simpleSteps .steps {grid-template-columns: 1fr;}
    .simpleSteps .steps .card {max-width:400px; margin:0 auto;}
    .simpleSteps .steps .card .text:before {top:10px;}

    .pricingTable .cta {grid-template-columns: 1fr; padding:30px;}
    .pricingTable [data-icon] {flex-direction: column;text-align: center; font-size: 18px; line-height: 1.4;}
    .pricingTable .cta a {max-width: 200px; margin:0 auto;}

    .faqContainer {padding:0;}
    
}

@media (max-width:600px) {
    .pricingTable {grid-template-columns:repeat(4, 1fr);gap:20px 10px;}
    .pricingTable .card {grid-column:span 2;}
    .pricingTable .card:nth-child(4) {grid-column:span 2;}
    .pricingTable .card:nth-child(5) {grid-column:2 / span 2;}
}


@media(max-width:550px) {
    .finalCTA .actions {flex-direction:column}
    .finalCTA .actions {flex-direction:column}
    .finalCTA .actions a {width:250px; justify-content: center;}
    .finalCTA .bens {flex-direction: column; gap: 10px; width: 250px; margin: 20px auto 0; align-items: flex-start;}

    .finalCTA::before {background:transparent;}
    .finalCTA::after {background:transparent;}



}