/* ===================================================
   GLOBAL RESPONSIVE IMPROVEMENTS
=================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    overflow-x:hidden;
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
    width:100%;
}

img,
video,
iframe{
    max-width:100%;
    height:auto;
    display:block;
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl{
    width:100%;
    max-width:1320px;
    margin:auto;
    padding-inline:20px;
}

section{
    overflow:hidden;
}

.hero,
.about-hero,
.details-hero{
    overflow:hidden;
}

/* ================= Desktop ================= */

@media (max-width:1200px){

    .container{
        padding-inline:24px;
    }

}

/* ================= Tablet ================= */

@media (max-width:992px){

    h1{
        font-size:clamp(2rem,5vw,3rem);
    }

    h2{
        font-size:clamp(1.7rem,4vw,2.4rem);
    }

    p{
        font-size:15px;
        line-height:1.8;
    }

    .hero{
        min-height:auto;
        padding:120px 0 70px;
    }

    .hero-container{
        display:flex;
        flex-direction:column;
        gap:50px;
        align-items:center;
        text-align:center;
    }

    .hero-content{
        width:100%;
    }

    .hero-image{
        width:min(420px,90%);
        margin:auto;
    }

    .hero-actions{
        justify-content:center;
        flex-wrap:wrap;
        gap:16px;
    }

    .hero-stats{
        width:100%;
        gap:16px;
    }

    .section-header{
        margin-bottom:40px;
    }

    .section-header h2{
        font-size:34px;
    }

}

/* ================= Mobile ================= */

@media (max-width:768px){

    .container{
        padding-inline:16px;
    }

    section{
        padding:70px 0;
    }

    .hero{
        padding-top:110px;
    }

    .hero-title{
        font-size:2rem;
        line-height:1.3;
    }

    .hero-subtitle,
    .hero-description{
        width:100%;
        max-width:100%;
    }

    .hero-image{
        width:100%;
        max-width:340px;
    }

    .hero-stats{
        grid-template-columns:1fr;
    }

    .btn,
    .primary-btn,
    .secondary-btn{
        width:100%;
        justify-content:center;
    }

    .section-header h2{
        font-size:30px;
    }

}

/* ================= Small Phones ================= */

@media (max-width:480px){

    .container{
        padding-inline:14px;
    }

    h1{
        font-size:30px;
    }

    h2{
        font-size:26px;
    }

    p{
        font-size:14px;
    }

    .hero{
        padding-top:100px;
    }

    .hero-title{
        font-size:28px;
    }

    .hero-image{
        max-width:280px;
    }

}
/* =====================================================
   GLOBAL FIXES (ALL PAGES)
===================================================== */

html,
body{
    overflow-x:hidden;
    width:100%;
}

*{
    box-sizing:border-box;
}

img,
svg,
video,
canvas,
iframe{
    max-width:100%;
    height:auto;
}

.container{
    width:min(1320px,100%);
    padding-inline:20px;
}

section{
    overflow:hidden;
}

@media(max-width:992px){

    .container{
        padding-inline:18px;
    }

    h1{
        font-size:clamp(2rem,5vw,3.2rem);
    }

    h2{
        font-size:clamp(1.7rem,4vw,2.4rem);
    }

    .btn,
    .primary-btn,
    .secondary-btn{
        min-height:48px;
    }

}

@media(max-width:768px){

    .container{
        padding-inline:16px;
    }

    section{
        padding-block:70px;
    }

    h1{
        line-height:1.25;
    }

    h2{
        line-height:1.3;
    }

    p{
        font-size:15px;
        line-height:1.8;
    }

}

@media(max-width:480px){

    .container{
        padding-inline:14px;
    }

    h1{
        font-size:30px;
    }

    h2{
        font-size:26px;
    }

}
/*====================================================
            ENSAN RESPONSIVE
====================================================*/


/*==========================
      <=1200px
==========================*/

@media screen and (max-width:1200px){

    .container{
        width:min(100%,1100px);
        padding-inline:32px;
    }

}


/*==========================
      <=992px
==========================*/

@media screen and (max-width:992px){

    html{
        font-size:15px;
    }

    .container{
        width:100%;
        padding-inline:24px;
    }

    section{
        padding-block:80px;
    }

    img{
        max-width:100%;
        height:auto;
    }

}


/*==========================
      <=768px
==========================*/

@media screen and (max-width:768px){

    html{
        font-size:14px;
    }

    body{
        overflow-x:hidden;
    }

    .container{
        padding-inline:18px;
    }

    section{
        padding-block:70px;
    }

    h1{
        font-size:clamp(2rem,7vw,3rem);
        line-height:1.25;
    }

    h2{
        font-size:clamp(1.8rem,6vw,2.5rem);
    }

    p{
        font-size:15px;
        line-height:1.8;
    }

}


/*==========================
      <=576px
==========================*/

@media screen and (max-width:576px){

    .container{
        padding-inline:16px;
    }

    section{
        padding-block:60px;
    }

    h1{
        font-size:2rem;
    }

    h2{
        font-size:1.7rem;
    }

    h3{
        font-size:1.3rem;
    }

    p{
        font-size:14px;
    }

}


/*==========================
      <=400px
==========================*/

@media screen and (max-width:400px){

    .container{
        padding-inline:14px;
    }

    h1{
        font-size:1.8rem;
    }

}
/* @import url(../css/responsive/home-responsive.css);
@import url(../css/responsive/navbar-responsive.css);
@import url(../css/responsive/footer-responsive.css); */

/*====================================================
                FOOTER RESPONSIVE
====================================================*/

/* ==========================
        <= 1200px
========================== */

@media (max-width:1200px){

    .footer-wrapper{

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

        gap:40px;

    }

}


/* ==========================
        <= 991px
========================== */

@media (max-width:991px){

    /* CTA */

    .footer-cta{

        flex-direction:column;

        align-items:flex-start;

        text-align:left;

        padding:35px 30px;

    }

    .cta-left{

        max-width:100%;

    }

    .cta-left h2{

        font-size:34px;

    }

    .cta-buttons{

        width:100%;

        justify-content:flex-start;

        flex-wrap:wrap;

    }

    .btn-outline,

    .btn-fill,

    .cta-buttons .btn{

        width:220px;

    }

    /* FOOTER */

    .footer-wrapper{

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

        gap:35px;

    }

    .footer-brand p{

        max-width:100%;

    }

    /* BOTTOM */

    .footer-bottom{

        flex-direction:column;

        gap:18px;

        text-align:center;

    }

}


/* ==========================
        <= 767px
========================== */

@media (max-width:767px){

    .footer{

        margin-top:70px;

    }

    .footer-cta{

        width:94%;

        padding:28px 22px;

        border-radius:24px;

        text-align:center;

        align-items:center;

    }

    .cta-tag{

        font-size:13px;

    }

    .cta-left h2{

        font-size:28px;

    }

    .cta-left p{

        font-size:15px;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

    .cta-buttons .btn,

    .btn-outline,

    .btn-fill{

        width:100%;

        max-width:320px;

    }

    .footer-wrapper{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .social-links{

        justify-content:center;

    }

    .footer-wrapper h4::after{

        margin-inline:auto;

    }

    .contact-item{

        justify-content:center;

    }

    .newsletter{

        max-width:380px;

        margin-inline:auto;

    }

    .footer-bottom div{

        flex-direction:column;

        gap:12px;

    }

    .footer-shape{

        display:none;

    }

}


/* ==========================
        <= 480px
========================== */

@media (max-width:480px){

    .footer-cta{

        padding:22px 18px;

    }

    .cta-left h2{

        font-size:24px;

    }

    .footer-brand img{

        width:110px;

    }

    .footer-wrapper h4{

        font-size:20px;

    }

    .newsletter input{

        height:52px;

    }

}
/*====================================================
                HOME PAGE
====================================================*/

/*==========================
        <= 991px
==========================*/

@media (max-width:991px){

    /* HERO */

    .hero{

        min-height:auto;

        padding:140px 0 110px;

    }

    .hero .container{

        display:flex;

        justify-content:center;

        text-align:center;

    }

    .hero-content{

        max-width:700px;

    }

    .hero h1{

        font-size:clamp(42px,7vw,56px);

        line-height:1.2;

    }

    .hero p{

        margin-inline:auto;

        font-size:18px;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .scroll-indicator{

        display:none;

    }

    /* PROGRAMS */

    .programs{

        margin:90px auto 60px;

    }

    .programs-grid{

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

        gap:22px;

    }

    /* ABOUT */

    .about-teaser{

        margin:90px auto 60px;

    }

    .about-container{

        padding:32px;

    }

    /* TEAM */

    .team-preview{

        padding:80px 20px;

    }

}


/*==========================
        <= 767px
==========================*/

@media (max-width:767px){

    /* HERO */

    .hero{

        padding:120px 0 90px;

    }

    .hero h1{

        font-size:36px;

    }

    .hero p{

        font-size:16px;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        gap:14px;

        align-items:center;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

        max-width:320px;

        justify-content:center;

    }

    .shape{

        display:none;

    }

    .hero-wave svg{

        height:80px;

    }

    /* PROGRAMS */

    .section-header{

        margin-bottom:45px;

    }

    .section-header h2{

        font-size:30px;

    }

    .programs-grid{

        grid-template-columns:1fr;

    }

    .program-card{

        padding:28px;

    }

    /* ABOUT */

    .about-container{

        padding:28px 22px;

    }

    /* TEAM */

    .team-preview h2{

        font-size:30px;

    }

    /* TESTIMONIALS */

    .testimonials{

        padding:70px 20px;

    }

    .testimonials-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

}


/*==========================
        <= 480px
==========================*/

@media (max-width:480px){

    .hero{

        padding-top:105px;

    }

    .hero-tag{

        font-size:13px;

        padding:8px 14px;

    }

    .hero h1{

        font-size:30px;

    }

    .hero p{

        font-size:15px;

    }

    .btn-primary,

    .btn-secondary{

        height:54px;

        padding-inline:20px;

        font-size:15px;

    }

    .section-header h2{

        font-size:26px;

    }

    .program-card{

        border-radius:18px;

        padding:22px;

    }

    .about-container{

        padding:22px 18px;

    }

    .testimonial-card{

        padding:22px;

    }

}
/*====================================================
                NAVBAR
====================================================*/

/* Desktop */
.mobile-toggle,
.mobile-menu,
.mobile-overlay{
    display:none;
}

/* ================= Tablet ================= */

@media (max-width:991px){

    .nav-links,
    .nav-actions{
        display:none;
    }

    .mobile-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
        width:46px;
        height:46px;
        border:none;
        background:transparent;
        cursor:pointer;
        z-index:1002;
    }

    .mobile-toggle span{
        width:24px;
        height:2px;
        background:#2b2b2b;
        border-radius:10px;
        transition:.35s;
    }

    .mobile-toggle.active span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2){
        opacity:0;
    }

    .mobile-toggle.active span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .mobile-overlay{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.45);
        opacity:0;
        visibility:hidden;
        transition:.35s;
        z-index:999;
    }

    .mobile-overlay.active{
        opacity:1;
        visibility:visible;
    }

    .mobile-menu{
        display:flex;
        flex-direction:column;
        position:fixed;
        top:0;
        right:-100%;
        width:320px;
        max-width:85%;
        height:100vh;
        background:#fff;
        transition:.35s ease;
        z-index:1000;
        overflow-y:auto;
        padding:30px 24px;
    }

    .mobile-menu.active{
        right:0;
    }

    .mobile-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:30px;
    }

    .mobile-header img{
        width:70px;
    }

    .mobile-close{
        border:none;
        background:none;
        font-size:22px;
        cursor:pointer;
    }

    .mobile-menu ul{
        list-style:none;
        display:flex;
        flex-direction:column;
        gap:8px;
        margin:0;
        padding:0;
    }

    .mobile-menu ul li a{
        display:flex;
        align-items:center;
        gap:12px;
        padding:14px 0;
        text-decoration:none;
        color:var(--text);
        font-weight:600;
    }

    .mobile-actions{
        margin-top:auto;
        padding-top:30px;
    }

    .mobile-book{
        display:flex;
        justify-content:center;
        align-items:center;
        width:100%;
        min-height:52px;
        border-radius:999px;
    }

}

/* ================= Mobile ================= */

@media (max-width:576px){

    .mobile-menu{
        width:100%;
        max-width:100%;
        padding:24px 18px;
    }

    .mobile-header img{
        width:58px;
    }

}