/*=========================================
        Mobile Responsive (768px)
=========================================*/

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

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

    .top-header{
        padding:12px 0;
    }

    .top-header .container{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }

    .logo img{
        width:55px;
    }

    .school-info{
        flex:1;
        text-align:left;
    }

    .school-info h1{
        font-size:18px;
        line-height:1.3;
    }

    .school-info h3{
        font-size:12px;
        margin-top:2px;
    }

    .school-info p{
        display:none;
    }

    /* Hide contact on mobile */

    .contact-info{
        display:none;
    }

    /*========== Navbar ==========*/

    #navbar{
        position:relative;
        top:0;
        left:0;
        transform:none;
        width:100%;
        margin-top:10px;
    }

    .nav-container{

         background:rgba(255,255,255,.15);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.25);

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

        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .mobile-logo{
        display:none;
    }

    .hamburger{
        display:block;
        cursor:pointer;
    }

    .hamburger span{

        width:28px;
        height:3px;

        background:#4338CA;

        display:block;

        margin:5px 0;

        border-radius:20px;

    }

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

    .nav-menu{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#fff;

        display:none;

        flex-direction:column;

        padding:10px 0;

    }

    .nav-menu.active{
        display:flex;
    }

    .nav-menu li{
        width:100%;
    }

    .nav-menu li a{

        display:block;

        color:#4338CA;

        padding:15px 20px;

        font-size:15px;

    }

    .nav-menu li a:hover{

        background:#5648d9;

    }

    /*========== Dropdown ==========*/

    .dropdown-menu{

        position:static;

        width:100%;

        display:none;

        background:#fff;

        opacity:1;

        visibility:visible;

        transform:none;

        border-radius:0;

        box-shadow:none;

    }

    .dropdown.active .dropdown-menu{
        display:block;
    }

    .dropdown-menu li a{

        padding:12px 40px;

        font-size:14px;

    }
    /*=========================================
        HERO SECTION RESPONSIVE
=========================================*/

    .hero{
        height:75vh;
    }

    .hero-content{

        width:90%;
        text-align:center;

        top:50%;
        left:50%;
        transform:translate(-50%,-50%);

    }

    .hero-tag{

        padding:8px 18px;
        font-size:13px;

        margin-bottom:15px;

    }

    .hero-content h1{

        font-size:2rem;
        line-height:1.35;
        margin-bottom:15px;

    }

    .hero-content p{

        width:100%;
        font-size:15px;
        line-height:1.7;

        margin-bottom:25px;

    }

    .hero-buttons{

        justify-content:center;
        flex-wrap:wrap;
        gap:12px;

    }

    .btn{

        padding:12px 24px;
        font-size:14px;

    }

    .prev,
    .next{

        width:42px;
        height:42px;

        font-size:15px;

    }

    .prev{
        left:12px;
    }

    .next{
        right:12px;
    }

    .dots{

        bottom:20px;
        gap:8px;

    }

    .dot{

        width:10px;
        height:10px;

    }

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


    .about{

        padding:70px 0;

    }

    .about .container{

        flex-direction:column;

        gap:40px;

    }

    .about-content{

        text-align:center;

    }

    .about-content h2{

        font-size:1.8rem;

    }

    .about-features{

        grid-template-columns:1fr;

        text-align:left;

    }

    .about-btn{

        margin-top:10px;

    }


     .highlights{
        padding:70px 0;
    }

    .section-title h2{
        font-size:2rem;
    }

    .highlights-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .about-card img{
        height:250px;
    }

    .gallery-grid img{
        height:150px;
    }


    /*=========================================
        PAGE BANNER RESPONSIVE
=========================================*/

.page-banner{

    height:230px;

}

.banner-content h1{

    font-size:2rem;

}

.breadcrumb{

    font-size:14px;

}


/*=========================================
        SCHOOL PROFILE RESPONSIVE
=========================================*/

.school-profile{

    padding:70px 0;

}

.school-profile .container{

    flex-direction:column;

}

.profile-content{

    text-align:center;

}

.profile-content h2{

    font-size:30px;

}

.profile-features{

    grid-template-columns:1fr;

    text-align:left;

}

.experience-box{

    right:15px;

    bottom:15px;

    width:140px;

    padding:18px;

}

.experience-box h2{

    font-size:30px;

}


/*=========================================
    VISION RESPONSIVE
=========================================*/


.vision-mission{

    padding:70px 0;

}

.vision-grid{

    grid-template-columns:1fr;

    gap:25px;

    margin-top:40px;

}

.vision-card{

    padding:35px 25px;

}

.vision-card h3{

    font-size:24px;

}

.vision-icon{

    width:75px;

    height:75px;

}

.vision-icon i{

    font-size:32px;

}


/*=========================================
    PRINCIPAL RESPONSIVE
=========================================*/


.principal-section{

    padding:70px 0;

}

.principal-wrapper{

    flex-direction:column;

    text-align:center;

    gap:40px;

}

.principal-image img{

    max-width:220px;

}

.principal-content{

    text-align:center;

}

.principal-content h2{

    font-size:1.7rem;

}

.principal-content p{

    text-align:center;

    font-size:14px;

}

.quote-icon{

    font-size:32px;

}

.principal-name{

    margin-top:20px;

}

.principal-name h4{

    font-size:18px;

}


/*=========================================
        MANAGEMENT RESPONSIVE
=========================================*/

    .management-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .management-card{

        padding:25px 20px;

    }

    .management-card img{

        width:160px;

        height:200px;

    }

    .management-card h3{

        font-size:22px;

    }



/*=========================================
        ACADEMICS RESPONSIVE
=========================================*/



/*========== Classes Section ==========*/

.classes-section{

    padding:70px 0;

}

.classes-grid{

    grid-template-columns:1fr;

    gap:20px;

    margin-top:35px;

}

.class-card{

    padding:28px 20px;

}

.class-card i{

    width:65px;
    height:65px;
    font-size:28px;

    margin-bottom:15px;

}

.class-card h3{

    font-size:18px;

}

.class-card p{

    font-size:14px;

}


/*========== Subjects Section ==========*/

.subjects-section{

    padding:70px 0;

}

.subjects-grid{

    grid-template-columns:1fr;

    gap:20px;

    margin-top:35px;

}

/* Subject Header */

.subject-header{

    padding:18px;

}

.subject-header i{

    width:45px;
    height:45px;

    font-size:18px;

}

.subject-header h3{

    font-size:18px;

}

/* Upper Primary & Secondary only */

.subject-card > ul{

    padding:18px;

}

.subject-card > ul > li{

    font-size:14px;

    padding:10px 0;

}

.subject-card > ul > li::before{

    width:20px;
    height:20px;

    font-size:11px;

}

/* Senior Secondary */

.stream{

    padding:18px;

}

.stream h4{

    font-size:22px;

    margin-bottom:18px;

}

.group-grid{

    grid-template-columns:1fr;

    gap:16px;

}

.group-card{

    padding:16px;

}

.group-card h5{

    font-size:17px;

}

.group-card ul li{

    font-size:14px;

    padding:8px 0;

}

.group-card ul li::before{

    width:20px;

    height:20px;

    font-size:11px;

}


/*=========================================
        ADMISSION RESPONSIVE
=========================================*/


.admission-process,
.documents-section,
.fee-section,
.download-section{

    padding:70px 0;

}

/* Process */

.process-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.process-card{

    padding:35px 20px;

}

.process-card h3{

    font-size:20px;

}

.process-card i{

    width:70px;

    height:70px;

    font-size:28px;

}

/* Documents */

.documents-grid{

    grid-template-columns:1fr;

}

.document-item{

    font-size:15px;

    padding:18px;

}

/* Fee Table */

.fee-table{

    overflow-x:auto;

}

.fee-table table{

    min-width:550px;

}

/* Download */

.download-box{

    padding:40px 20px;

}

.download-box h2{

    font-size:28px;

}

.download-box p{

    font-size:14px;

}

.download-buttons{

    flex-direction:column;

    gap:15px;

}

.download-btn,
.apply-btn{

    justify-content:center;

    width:100%;

}

/*=========================================
        FACULTY RESPONSIVE
=========================================*/


    .faculty-update{

        padding:70px 0;

    }

    .update-box{

        padding:35px 25px;

    }

    .update-box i{

        font-size:50px;

    }

    .update-box h2{

        font-size:26px;

    }

    .update-box p{

        font-size:15px;

    }

    /*=========================================
      PRINCIPAL RESPONSIVE (768px)
=========================================*/

    .principal-section{

        padding:70px 0;

    }

    .principal-card{

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

        gap:30px;

    }

    .principal-image{

        width:100%;

    }

    .principal-image img{

        width:220px;

        height:280px;

        object-fit:cover;

        border-radius:15px;

        margin:auto;

        display:block;

    }

    .principal-content{

        width:100%;

    }

    .principal-content h3{

        font-size:24px;

        margin-bottom:8px;

    }

    .principal-content h5{

        font-size:16px;

        margin-bottom:18px;

        color:#4338CA;

    }

    .principal-content p{

        font-size:15px;

        line-height:1.8;

        text-align:justify;

    }




    /*=========================================
      FACULTY RESPONSIVE (768px)
=========================================*/

    .faculty-grid{

        display:grid;

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

        gap:20px;

    }

    .faculty-card{

        padding:20px 15px;

    }

    .faculty-card h3{

        font-size:16px;

    }

    .faculty-card p{

        font-size:14px;

    }


   
    /*=========================================
        FACILITIES RESPONSIVE
=========================================*/




    .facilities-section{

        padding:70px 0;

    }

    .facilities-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .facility-card{

        padding:30px 20px;

    }

    .facility-icon{

        width:75px;

        height:75px;

    }

    .facility-icon i{

        font-size:30px;

    }

    .facility-card h3{

        font-size:20px;

    }

    .facility-card p{

        font-size:14px;

    }



/*=========================================
        GALLERY RESPONSIVE
=========================================*/

    .gallery-section{

        padding:70px 0;

    }

    .gallery-filter{

        gap:10px;

        margin:35px 0 40px;

    }

    .gallery-filter button{

        padding:10px 20px;

        font-size:14px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .gallery-item img{

        height:240px;

    }



    .contact-section{

        padding:70px 0;

    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:35px;

    }

    .contact-card{

        padding:25px 20px;

    }

    .contact-icon{

        width:65px;

        height:65px;

    }

    .contact-icon i{

        font-size:24px;

    }

    .contact-card h3{

        font-size:20px;

    }

    .contact-card p{

        font-size:14px;

        line-height:1.7;

    }

    .contact-form-section{

        padding:70px 0;

    }

    .form-wrapper{

        grid-template-columns:1fr;

        gap:35px;

    }

    .form-content{

        text-align:center;

    }

    .form-content h2{

        font-size:30px;

    }

    .form-content p{

        font-size:15px;

    }

    .contact-form{

        padding:25px;

    }

    .contact-form input,

    .contact-form textarea{

        padding:14px 16px;

        font-size:14px;

    }

    .contact-form button{

        width:100%;

        padding:15px;

        font-size:15px;

    }

    .map-section{

        padding:70px 0;

    }

    .map-container{

        margin-top:35px;

    }

    .map-container iframe{

        height:300px;

    }





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

.footer{

    padding:60px 0 20px;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.footer-box{

    text-align:center;

}

.footer-box img{

    margin:auto auto 20px;

}

.social-links{

    justify-content:center;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}




}

@media(max-width:480px){

    .section-title h2{
        font-size:1.7rem;
    }

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

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

    .gallery-grid img{
        height:100px;
    }

    .notice-item{
        gap:10px;
    }

    .notice-date{
        width:55px;
        height:55px;
        min-width:55px;
    }

    .notice-date span{
        font-size:20px;
    }

    .notice-content h5{
        font-size:14px;
    }

}