*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",sans-serif;
    color:#172033;
    background:#fff;
    line-height:1.75;
    overflow-x:hidden;
}

img{
    display:block;
    width:100%;
}

a{
    text-decoration:none;
}

button{
    font-family:inherit;
}

.container{
    width:min(1380px,calc(100% - 80px));
    margin:auto;
}

/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3{
    font-family:"Poppins",sans-serif;
    line-height:1.15;
}

h1{
    font-size:clamp(48px,6vw,82px);
    font-weight:800;
    letter-spacing:-3px;
}

h2{
    font-size:clamp(40px,4.3vw,62px);
    font-weight:800;
    letter-spacing:-2px;
}

h3{
    font-size:24px;
    font-weight:700;
}

p{
    font-size:18px;
}

.hero h1 span,
.heading h2 span,
.background-content h2 span,
.dark-section h2 span,
.practice-content h2 span,
.cta h2 span{
    color:#24b4f5;
}

.eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:25px;

    color:#46c4ff;

    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
}

.eyebrow::before{
    content:"";
    width:34px;
    height:2px;
    background:#28b7fa;
}

.eyebrow.dark{
    color:#087ed0;
}

.eyebrow.dark::before{
    background:#087ed0;
}

.heading{
    max-width:900px;
    margin-bottom:65px;
}

.heading p{
    max-width:800px;
    margin-top:25px;
    color:#66768a;
}

/* =========================
   BUTTON
========================= */

.btn{
    position:relative;

    min-height:62px;
    padding:0 32px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:13px;

    font-size:16px;
    font-weight:800;

    overflow:hidden;

    transition:.3s ease;
}

.btn-primary{
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #18a9f3,
            #006bc5
        );

    box-shadow:
        0 15px 35px rgba(0,126,215,.25);
}

.btn-primary:hover{
    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(0,126,215,.38);
}

.btn-outline{
    color:#fff;

    border:1px solid rgba(255,255,255,.3);

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(10px);
}

.btn-outline:hover{
    background:rgba(255,255,255,.13);
    transform:translateY(-4px);
}

/* =========================
   HERO
========================= */

.hero{
    position:relative;

    min-height:780px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(14,157,232,.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #020b18,
            #031727 55%,
            #00101f
        );
}

.hero-bg{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:.31;

    z-index:0;

    transition:transform 1s ease;
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(1,10,22,.98) 0%,
            rgba(1,14,29,.92) 42%,
            rgba(1,14,29,.62) 100%
        );
}

.hero-container{
    position:relative;
    z-index:5;

    display:grid;

    grid-template-columns:
        minmax(0,1.2fr)
        430px;

    align-items:center;

    gap:90px;

    padding-top:90px;
    padding-bottom:90px;
}

.hero-content{
    max-width:900px;
}

.hero h1{
    color:#fff;
    margin-bottom:30px;
}

.hero-content > p{
    max-width:830px;

    color:#c8d9e8;

    font-size:20px;
    line-height:1.9;
}

.hero-pills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin:32px 0;
}

.hero-pills span{
    padding:9px 16px;

    border:1px solid rgba(74,190,246,.28);

    border-radius:50px;

    color:#d3efff;

    background:rgba(255,255,255,.055);

    font-size:13px;
    font-weight:700;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;

    margin-top:35px;
}

/* =========================
   HERO CARD
========================= */

.hero-card{
    padding:35px;

    border:1px solid rgba(255,255,255,.14);

    border-radius:26px;

    background:rgba(255,255,255,.07);

    backdrop-filter:blur(20px);

    box-shadow:
        0 35px 90px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.hero-card-label{
    margin-bottom:26px;

    color:#54caff;

    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
}

.program-price{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.program-price small,
.hero-detail small{
    display:block;

    margin-bottom:6px;

    color:#8ea7bc;

    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
}

.program-price strong{
    display:block;

    color:#fff;

    font-size:25px;
    font-weight:800;

    line-height:1.3;
}

.program-price span{
    color:#9fb6c8;
    font-size:13px;
}

.hero-line{
    height:1px;

    margin:27px 0;

    background:rgba(255,255,255,.12);
}

.hero-detail{
    margin-top:18px;
}

.hero-detail strong{
    color:#fff;
    font-size:16px;
}

/* =========================
   TRUST
========================= */

.trust{
    position:relative;
    z-index:10;

    background:#fff;

    border-bottom:1px solid #e5eaf0;
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.trust-grid > div{
    min-height:120px;

    padding:25px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-align:center;

    border-right:1px solid #e5eaf0;
}

.trust-grid > div:last-child{
    border-right:none;
}

.trust strong{
    color:#087dd0;

    font-size:19px;
    font-weight:800;
}

.trust span{
    color:#758396;

    font-size:13px;
}

/* =========================
   GENERAL SECTION
========================= */

.section{
    padding:125px 0;
    background:#fff;
}

/* =========================
   ABOUT
========================= */

.background-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:75px;

    align-items:stretch;
}

.background-image{
    position:relative;

    min-height:550px;

    overflow:hidden;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            #061c30,
            #0a547b
        );
}

.background-image img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .8s ease;
}

.background-image:hover img{
    transform:scale(1.05);
}

.background-image::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(0,0,0,.35)
        );

    pointer-events:none;
}

.background-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.background-content h2{
    margin-bottom:25px;
}

.background-content p{
    color:#68788b;
    margin-bottom:20px;
}

.highlight{
    display:flex;
    flex-direction:column;

    gap:7px;

    margin-top:24px;
    padding:20px 23px;

    border-left:3px solid #18aef2;

    border-radius:0 13px 13px 0;

    background:rgba(23,166,239,.07);
}

.highlight strong{
    color:#078fda;

    font-size:12px;
    letter-spacing:1px;
}

.highlight span{
    color:#526477;
    font-size:15px;
}

/* =========================
   MATERIAL
========================= */

.level-section{
    background:#f6f9fc;
}

.material-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.material-grid article{
    min-height:225px;

    padding:31px;

    border:1px solid #e2e9ef;

    border-radius:19px;

    background:#fff;

    transition:.3s ease;
}

.material-grid article:hover{
    transform:translateY(-6px);

    border-color:#8ddaff;

    box-shadow:
        0 20px 50px rgba(15,90,135,.08);
}

.material-grid b{
    color:#0b94df;
    font-size:13px;
}

.material-grid h3{
    margin:15px 0 11px;
    font-size:22px;
}

.material-grid p{
    color:#68788a;
    font-size:16px;
}

/* =========================
   DARK SECTION
========================= */

.dark-section{
    position:relative;

    padding:125px 0;

    overflow:hidden;

    color:#fff;

    background:
        radial-gradient(
            circle at 90% 30%,
            rgba(20,163,240,.18),
            transparent 28%
        ),
        #031322;
}

.dark-heading{
    max-width:850px;
    margin-bottom:60px;
}

.dark-heading p{
    max-width:750px;

    margin-top:25px;

    color:#adbfce;

    font-size:19px;
}

.benefit-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:18px;
}

.benefit-grid article{
    min-height:280px;

    padding:30px;

    border:1px solid rgba(255,255,255,.1);

    border-radius:20px;

    background:rgba(255,255,255,.045);

    transition:.35s ease;
}

.benefit-grid article:hover{
    transform:translateY(-7px);

    background:rgba(255,255,255,.075);

    border-color:rgba(54,187,246,.35);
}

.benefit-grid article > span{
    color:#40c0fa;

    font-size:42px;
    font-weight:800;
}

.benefit-grid h3{
    margin:30px 0 13px;
    color:#fff;
}

.benefit-grid p{
    color:#aebfce;
    font-size:16px;
}

/* =========================
   PRACTICE
========================= */

.practice-section{
    padding:125px 0;
    background:#f6f9fc;
}

.practice-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:75px;

    align-items:center;
}

.practice-image{
    min-height:520px;

    overflow:hidden;

    border-radius:28px;

    background:#08243a;
}

.practice-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .8s ease;
}

.practice-image:hover img{
    transform:scale(1.05);
}

.practice-content p{
    color:#68788a;
    margin-bottom:20px;
}

.practice-points{
    display:flex;
    flex-direction:column;

    gap:12px;

    margin-top:30px;
}

.practice-points div{
    display:flex;
    align-items:center;
    gap:14px;
}

.practice-points strong{
    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#fff;

    background:#0c99e4;
}

.practice-points span{
    color:#33445a;

    font-size:16px;
    font-weight:700;
}

/* =========================
   REQUIREMENTS
========================= */

.requirements{
    background:#fff;
}

.requirement-grid{
    display:grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:30px;
}

.requirement-main{
    padding:40px;

    border-radius:25px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #031728,
            #06304b
        );
}

.requirement-main h3{
    margin-bottom:25px;
    font-size:31px;
}

.requirement-main p{
    margin-bottom:18px;

    color:#c2d2df;

    font-size:17px;
}

.requirement-list{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:13px;
}

.requirement-list > div{
    display:flex;

    gap:16px;

    padding:21px;

    border:1px solid #e2e9ef;

    border-radius:15px;

    background:#fff;
}

.requirement-list span{
    color:#0a94df;
    font-weight:800;
}

.requirement-list p{
    color:#64758a;
    font-size:15px;
}

/* =========================
   INSTRUCTOR
========================= */

.instructor-grid{
    display:grid;

    grid-template-columns:
        1.3fr .7fr;

    gap:70px;

    align-items:center;
}

.instructor-grid p{
    max-width:720px;

    color:#b9c9d5;

    font-size:19px;
}

.instructor-box{
    padding:38px;

    border:1px solid rgba(255,255,255,.12);

    border-radius:23px;

    background:rgba(255,255,255,.05);
}

.instructor-icon{
    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:22px;

    border-radius:50%;

    color:#fff;

    background:#079ce9;

    font-size:23px;
    font-weight:800;
}

.instructor-box h3{
    color:#fff;
    margin-bottom:13px;
}

.instructor-box p{
    color:#aebfce;
    font-size:16px;
}

/* =========================
   LOCATION
========================= */

.location-section{
    padding:100px 0;

    color:#fff;

    background:#031322;
}

.location-grid{
    display:grid;

    grid-template-columns:1fr .7fr;

    gap:60px;

    align-items:center;
}

.location-grid p{
    margin-top:20px;
    color:#afc0cf;
}

.location-card{
    display:flex;
    align-items:center;

    gap:20px;

    padding:32px;

    border:1px solid rgba(255,255,255,.12);

    border-radius:20px;

    background:rgba(255,255,255,.05);
}

.location-icon{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:15px;

    background:#0a9ce8;

    font-size:25px;
}

.location-card small{
    display:block;

    margin-bottom:4px;

    color:#7f9aad;

    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
}

.location-card strong{
    color:#fff;
    font-size:22px;
}

/* =========================
   INVESTMENT
========================= */

.investment{
    padding:125px 0;

    color:#fff;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(13,160,237,.16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #031322,
            #061e31
        );
}

.investment .heading p{
    color:#adbfce;
}

.price-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:24px;
}

.price-card{
    padding:45px;

    border:1px solid rgba(255,255,255,.12);

    border-radius:27px;

    background:rgba(255,255,255,.045);
}

.featured-price{
    border-color:rgba(35,183,248,.4);

    background:
        linear-gradient(
            145deg,
            rgba(19,153,235,.17),
            rgba(255,255,255,.04)
        );
}

.price-label{
    color:#52caff;

    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
}

.big-price{
    margin-top:20px;

    font-family:"Poppins",sans-serif;

    font-size:clamp(44px,5vw,68px);

    font-weight:800;

    line-height:1.1;
}

.price-card > span{
    color:#9fb3c3;
}

.price-card p{
    margin:22px 0;

    color:#c1d0dc;

    font-size:17px;
}

.included-box{
    margin-top:25px;

    padding:35px;

    border:1px solid rgba(255,255,255,.1);

    border-radius:23px;

    background:rgba(255,255,255,.04);
}

.included-box h3{
    margin-bottom:25px;
}

.included-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:12px;
}

.included-grid span{
    padding:13px 16px;

    border-radius:10px;

    color:#c9d9e5;

    background:rgba(255,255,255,.05);

    font-size:14px;
}

.included-box small{
    display:block;

    margin-top:22px;

    color:#7f96a9;
}

/* =========================
   SCHEDULE
========================= */

.schedule{
    background:#f6f9fc;
}

.schedule-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;
}

.schedule-card{
    padding:35px;

    border:1px solid #e1e8ef;

    border-radius:24px;

    background:#fff;
}

.featured-schedule{
    border-color:#75cef5;

    box-shadow:
        0 20px 60px rgba(15,105,155,.08);
}

.schedule-title{
    padding-bottom:20px;

    margin-bottom:22px;

    border-bottom:1px solid #e7edf2;

    color:#078ed9;

    font-size:13px;
    font-weight:800;
    letter-spacing:1.5px;
}

.dates{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:10px;
}

.dates span{
    padding:12px 14px;

    border-radius:10px;

    color:#506175;

    background:#f4f7fa;

    font-size:14px;
    font-weight:600;
}

.dates span:hover{
    color:#078ed9;
    background:#eaf8ff;
}

/* =========================
   FAQ
========================= */

.faq{
    background:#f6f9fc;
}

.faq-list{
    max-width:950px;
}

.faq-item{
    margin-bottom:12px;

    overflow:hidden;

    border:1px solid #dfe7ee;

    border-radius:16px;

    background:#fff;
}

.faq-item button{
    width:100%;

    min-height:78px;

    padding:22px 25px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border:0;
    outline:0;

    color:#182337;

    background:#fff;

    cursor:pointer;

    text-align:left;

    font-size:17px;
    font-weight:700;
}

.faq-item button b{
    color:#078fdc;

    font-size:26px;

    transition:.3s ease;
}

.answer{
    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;
}

.answer p{
    padding:0 25px 25px;

    color:#68788a;

    font-size:16px;
}

.faq-item.active button b{
    transform:rotate(45deg);
}

/* =========================
   CTA
========================= */

.cta{
    position:relative;

    min-height:560px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:#031322;
}

.cta-bg{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:.3;

    transition:transform 1s ease;
}

.cta-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,13,26,.97),
            rgba(2,13,26,.7),
            rgba(2,13,26,.9)
        );
}

.cta .container{
    position:relative;
    z-index:2;
}

.cta-content{
    max-width:880px;
}

.cta h2{
    color:#fff;
    margin-bottom:24px;
}

.cta p{
    max-width:730px;

    color:#c1d0dc;

    font-size:20px;
}

.cta-buttons{
    display:flex;
    flex-wrap:wrap;

    gap:14px;

    margin-top:35px;
}

/* =========================
   WHATSAPP
========================= */

.floating-wa{
    position:fixed;

    right:25px;
    bottom:25px;

    z-index:999;

    width:59px;
    height:59px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#18aeea;

    box-shadow:
        0 12px 35px rgba(0,0,0,.28);

    transition:.3s ease;
}

.floating-wa:hover{
    transform:
        translateY(-5px)
        scale(1.06);
}

.floating-wa svg{
    width:29px;
    height:29px;

    fill:#fff;
}

/* =========================
   REVEAL
========================= */

.reveal{
    opacity:0;
    transform:translateY(35px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.show{
    opacity:1;
    transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

    .container{
        width:min(
            calc(100% - 50px),
            1000px
        );
    }

    .hero-container{
        grid-template-columns:1fr;
        gap:45px;
    }

    .hero{
        min-height:auto;
    }

    .hero-card{
        max-width:650px;
    }

    .background-grid,
    .practice-grid{
        grid-template-columns:1fr;
    }

    .benefit-grid{
        grid-template-columns:1fr 1fr;
    }

    .material-grid{
        grid-template-columns:1fr 1fr;
    }

    .requirement-grid{
        grid-template-columns:1fr;
    }

    .instructor-grid{
        grid-template-columns:1fr;
    }

    .included-grid{
        grid-template-columns:1fr 1fr;
    }

    .location-grid{
        grid-template-columns:1fr;
    }
}

/* =========================
   MOBILE
========================= */

@media(max-width:700px){

    .container{
        width:calc(100% - 32px);
    }

    .section,
    .practice-section,
    .investment,
    .dark-section{
        padding:85px 0;
    }

    .hero-container{
        padding-top:70px;
        padding-bottom:70px;
    }

    h1{
        font-size:
            clamp(
                40px,
                12vw,
                58px
            );

        letter-spacing:-2px;
    }

    h2{
        font-size:39px;
        letter-spacing:-1.5px;
    }

    h3{
        font-size:22px;
    }

    p{
        font-size:16px;
    }

    .hero-content > p{
        font-size:17px;
        line-height:1.8;
    }

    .hero-actions,
    .cta-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-actions .btn,
    .cta-buttons .btn{
        width:100%;
    }

    .hero-card{
        padding:26px;
    }

    .program-price{
        grid-template-columns:1fr;
    }

    .trust-grid{
        grid-template-columns:1fr 1fr;
    }

    .trust-grid > div{
        min-height:100px;
        border-bottom:1px solid #e5eaf0;
    }

    .heading{
        margin-bottom:45px;
    }

    .background-image,
    .practice-image{
        min-height:350px;
    }

    .material-grid,
    .benefit-grid,
    .price-grid,
    .schedule-grid{
        grid-template-columns:1fr;
    }

    .requirement-list{
        grid-template-columns:1fr;
    }

    .requirement-main{
        padding:30px;
    }

    .included-grid{
        grid-template-columns:1fr;
    }

    .dates{
        grid-template-columns:1fr;
    }

    .cta{
        min-height:520px;
    }

    .cta h2{
        font-size:40px;
    }

    .cta p{
        font-size:17px;
    }

    .floating-wa{
        right:17px;
        bottom:17px;

        width:54px;
        height:54px;
    }
}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:420px){

    .trust-grid{
        grid-template-columns:1fr;
    }

    .trust-grid > div{
        border-right:none;
    }

    .hero-pills span{
        font-size:11px;
    }

    .hero-card{
        border-radius:19px;
    }

    .price-card{
        padding:30px;
    }

    .big-price{
        font-size:43px;
    }
}