/*==================================================
    RESPONSIVE.CSS
    School Website
==================================================*/


/*==================================================
    1400px
==================================================*/

@media (max-width:1400px){

    .container{

        width:min(95%,1280px);

    }

}


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

@media (max-width:1200px){

    .header__wrapper{

        grid-template-columns:220px 1fr 160px;

        gap:20px;

    }

    .nav ul{

        gap:25px;

    }

    .hero__title{

        font-size:58px;

    }

    .hero__title small{

        font-size:42px;

    }

}

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

@media (max-width:992px){

    /*==========================
        Header
    ==========================*/

    .header{

        padding:15px 0;

    }

    .header__wrapper{

        display:flex;

        justify-content:space-between;

        align-items:center;

        padding:15px 18px;

    }

    .logo-text{

        display:none;

    }

    .header-actions{

        display:flex;

        align-items:center;

        gap:12px;

    }

    .header-actions .btn{

        display:none;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

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

   .nav{

    position:fixed;
    top:0;
    right:-100%;

    width:320px;
    max-width:88%;
    height:100vh;

    background:#ffffff;

    transition:right .4s cubic-bezier(.22,1,.36,1);

    z-index:1001;

    overflow-y:auto;

    border-radius:30px 0 0 30px;

    box-shadow:-15px 0 45px rgba(0,0,0,.15);

}

    .nav.active{

        right:0;

    }
    
    .mobile-menu-header{

    display:none;

}

    .nav ul{

    display:flex;
    flex-direction:column;

    gap:8px;

    padding:20px 25px 30px;

}

.nav ul li{

    opacity:0;

    transform:translateX(30px);

    transition:.35s;

}

.nav.active ul li{

    opacity:1;

    transform:translateX(0);

}

.nav.active ul li:nth-child(1){transition-delay:.05s;}
.nav.active ul li:nth-child(2){transition-delay:.10s;}
.nav.active ul li:nth-child(3){transition-delay:.15s;}
.nav.active ul li:nth-child(4){transition-delay:.20s;}
.nav.active ul li:nth-child(5){transition-delay:.25s;}
.nav.active ul li:nth-child(6){transition-delay:.30s;}
.nav.active ul li:nth-child(7){transition-delay:.35s;}

    .nav li{

        width:100%;

    }

   .nav a{

    display:flex;

    align-items:center;

    padding:16px 18px;

    color:var(--primary);

    font-size:17px;

    font-weight:700;

    border-radius:14px;

    border:none;

    transition:.25s;

}

.nav a:hover{

    background:#EEF8DD;

    color:var(--secondary);

    padding-right:26px;

}

.menu-overlay{

    position:fixed;
    inset:0;

    background:rgba(15,23,42,.45);

    opacity:0;
    visibility:hidden;

    transition:opacity .3s ease;

    z-index:1000;

}

    .menu-overlay.active{

        opacity:1;

        visibility:visible;

    }

}

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

@media (max-width:768px){

    .container{
        width:min(94%,100%);
    }

    .header__wrapper{
        padding:12px 16px;
    }

    .nav{
        width:280px;
    }

}

@media (max-width:576px){

    .header{
        padding:10px 0;
    }

    .header__wrapper{
        padding:10px 14px;
    }

    .nav{
        width:260px;
    }

    .nav ul{
        padding:40px 25px;
    }

}

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

@media (max-width:992px){

    .hero{

        padding:150px 0 90px;

    }

    .hero__wrapper{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .hero__content{

        order:2;

    }

    .hero__image{

        order:1;

    }

    .hero__buttons{

        justify-content:center;

    }

    .hero__stats{

        justify-content:center;

    }

}

@media (max-width:768px){

    .hero{

        padding:135px 0 70px;

    }

    .hero__title{

        font-size:42px;

        line-height:1.3;

    }

    .hero__title small{

        display:block;

        font-size:30px;

    }

    .hero__description{

        font-size:16px;

    }

}

@media (max-width:576px){

    .hero__title{

        font-size:34px;

    }

    .hero__title small{

        font-size:24px;

    }

    .hero__buttons{

        flex-direction:column;

        width:100%;

    }

    .hero__buttons .btn{

        width:100%;

    }

}

/*==================================================
    CARDS
==================================================*/

@media (max-width:992px){

    .cards-grid,
    .features-grid,
    .services-grid,
    .facilities-grid,
    .gallery-grid{

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

        gap:24px;

    }

}

@media (max-width:768px){

    .cards-grid,
    .features-grid,
    .services-grid,
    .facilities-grid,
    .gallery-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .card{

        padding:28px 24px;

    }

    .card-icon{

        width:70px;

        height:70px;

    }

}

@media (max-width:576px){

    .card{

        padding:24px 20px;

        border-radius:20px;

    }

    .card-title{

        font-size:20px;

    }

    .card-text{

        font-size:15px;

        line-height:1.8;

    }

}

.mobile-only{

    display:none;

}

@media (max-width:992px){

    .mobile-only{

        display:block;

        margin-top:20px;

    }

    .mobile-only .btn{

        width:100%;

        justify-content:center;

    }
    
    .mobile-menu-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:35px 25px 25px;

    border-bottom:1px solid #ECECEC;

}

.mobile-menu-header img{

    width:85px;

    margin-bottom:15px;

}

.mobile-menu-header h3{

    color:var(--primary);

    font-size:22px;

    font-weight:800;

    margin-bottom:6px;

}

.mobile-menu-header span{

    color:#64748B;

    font-size:14px;

}

}

@media (max-width:768px){

    .topbar{

        display:none;

    }

}

/*=========================================
Responsive Grid
=========================================*/

@media (max-width:992px){

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

    .grid-3{
        grid-template-columns:repeat(2,1fr);
    }

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

}

@media (max-width:768px){

    .grid-4,
    .grid-3,
    .grid-2{

        grid-template-columns:1fr;
        gap:20px;

    }

}

/*=========================================
Footer Responsive
=========================================*/

@media (max-width:992px){

    .footer-grid{

        display:grid;

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

        gap:35px;

    }

}

@media (max-width:768px){

    .footer{

        text-align:center;

    }

    .footer-grid{

         display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:40px;

    }

    .footer-logo{

        margin:0 auto 20px;

        display:block;

    }

    .footer ul{

        padding:0;

    }

    .footer ul li{

        justify-content:center;

    }

    .social{

        justify-content:center;

    }

    .footer-bottom{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

}

.social{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

@media (max-width:992px){

    .about-grid{

        grid-template-columns:1fr;
        gap:50px;

    }

}

@media (max-width:768px){

    .about{

        text-align:center;

    }

    .about-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .about-image{

        order:1;

    }

    .about-content{

        order:2;

    }

    .about-image img{

        width:100%;
        max-width:420px;

        margin:auto;

        display:block;

    }

    .about-badge{

        right:20px;
        bottom:20px;

        transform:none;

    }

    .about-content h2{

        font-size:32px;

    }

    .about-content p{

        max-width:100%;

    }

}

.about-features{

    display:grid;

    grid-template-columns:1fr;

    gap:15px;

    margin:30px 0;

}

.about-content .btn{

    width:100%;
    max-width:280px;

    margin:auto;

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

@media (max-width: 768px) {

    .cta-box{

        flex-direction: column;

        text-align: center;

        gap: 30px;

        padding: 40px 25px;

    }

    .cta-content{

        width: 100%;

    }

    .cta-content h2{

        font-size: 30px;

        line-height: 1.5;

    }

    .cta-content p{

        font-size: 16px;

    }

    .cta-buttons{

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 15px;

    }

    .cta-buttons .btn{

        width: 100%;

        justify-content: center;

    }

}

/*=========================================
ACHIEVEMENTS
=========================================*/

@media (max-width:991px){

    .counter-grid{

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

        gap:20px;

    }

}

@media (max-width:576px){

    .counter-grid{

        grid-template-columns:1fr;

    }

    .counter-card{

        padding:30px 20px;

    }

    .counter-card h3{

        font-size:34px;

    }

}