/*=========================================

        TABLET & MOBILE (768px)

=========================================*/

@media (max-width:768px){

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


    .container{

        width:94%;

    }


    /*=====================================
            TOP HEADER
    =====================================*/

    .top-header{

        padding:10px 0;

    }

    .top-header .container{

        display:grid;

        grid-template-columns:55px 1fr 30px;

        align-items:center;

        gap:8px;

    }


    /*=====================================
                LOGO
    =====================================*/

    .logo{

        width:55px;

    }

    .logo img{

        width:55px;

        height:55px;

        object-fit:contain;

    }


    /*=====================================
            COLLEGE INFO
    =====================================*/

    .college-info{

        padding:0;

        text-align:left;

        min-width:0;

    }

    .college-info h1{

        font-size:.9rem;

        line-height:1.3;

        white-space:nowrap;

        margin:0;

    }

    .college-info h3{

        font-size:.65rem;

        line-height:1.3;

        margin-top:3px;

        white-space:nowrap;

    }

    .college-info p{

        font-size:.55rem;

        line-height:1.3;

        margin-top:3px;

        white-space:nowrap;

    }


    /*=====================================
                CONTACT
    =====================================*/

    .contact-info{

        display:none;

    }


    /*=====================================
                HAMBURGER
    =====================================*/

    .hamburger{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:4px;

        width:30px;

        height:30px;

        cursor:pointer;

        z-index:10001;

    }

    .hamburger span{

        width:23px;

        height:3px;

        background:var(--primary);

        border-radius:10px;

        transition:.3s ease;

    }


    /*=====================================
            HAMBURGER ACTIVE
    =====================================*/

    .hamburger.active span:nth-child(1){

        transform:translateY(7px) rotate(45deg);

    }

    .hamburger.active span:nth-child(2){

        opacity:0;

    }

    .hamburger.active span:nth-child(3){

        transform:translateY(-7px) rotate(-45deg);

    }


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

    #navbar{

        position:relative;

        top:0;

        left:0;

        transform:none;

        width:100%;

        margin-top:5px;

    }


    /*=====================================
            NAV CONTAINER
    =====================================*/

    .nav-container{

        width:94%;

        margin:auto;

        padding:0;

        background:transparent;

        border:none;

        box-shadow:none;

        backdrop-filter:none;

        -webkit-backdrop-filter:none;

        display:flex;

        justify-content:flex-end;

    }


    /*=====================================
                MENU
    =====================================*/

    .nav-menu{

        position:absolute;

        top:42px;

        right:0;

        width:230px;

        display:none;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:8px 15px;

        background:var(--primary);

        border-radius:14px;

        box-shadow:0 12px 30px rgba(0,0,0,.20);

        z-index:10000;

    }

    .nav-menu.active{

        display:flex;

    }


    /*=====================================
                NAV LINKS
    =====================================*/

    .nav-menu > li{

        width:100%;

    }

    .nav-menu > li > a{

        display:flex;

        align-items:center;

        justify-content:space-between;

        width:100%;

        padding:10px 3px;

        color:#fff;

        font-size:13px;

        font-weight:500;

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

    }

    .nav-menu > li:last-child > a{

        border-bottom:none;

    }

    .nav-menu > li > a::after{

        display:none;

    }


    /*=====================================
                DROPDOWN
    =====================================*/

    .dropdown-menu{

        position:static;

        width:100%;

        display:none;

        margin:0 0 5px;

        padding:4px 8px;

        background:#fff;

        border-radius:8px;

        box-shadow:none;

        opacity:1;

        visibility:visible;

        transform:none;

    }

    .dropdown.active .dropdown-menu{

        display:block;

    }

    .dropdown-menu li a{

        display:block;

        padding:8px 10px;

        color:var(--dark);

        font-size:12px;

    }

    .dropdown-menu li a:hover{

        padding-left:15px;

        background:#EEF5FB;

        color:var(--primary);

    }


    /*=====================================
                STICKY
    =====================================*/

    #navbar.sticky{

        position:relative;

        top:0;

    }






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

.hero{
    
    height:100vh;
}

.hero-content{

    width:90%;

    text-align:center;

    top:55%;

}

.hero-tag{

    font-size:13px;

    padding:8px 18px;

}

.hero-content h1{

    font-size:2.2rem;

}

.hero-content p{

    font-size:15px;

    margin:20px auto;

}

.hero-buttons{

    flex-direction:column;

    gap:15px;

}

.slide img{

    object-fit:cover;

 object-position:center top; 

    animation:none;

}

.btn,
.btn-outline{

    width:220px;

    text-align:center;

}

.prev,
.next{

    display:none;

}

.slider-dots{

    bottom:30px;

}

.dot{

    width:12px;

    height:12px;

}

.dot.active{

    width:30px;

}

.scroll-down{

    display:none;

}

.hero::after{

    height:70px;

}


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

.highlights{

    padding:70px 5%;

}

.highlights-container{

    grid-template-columns:1fr;

    gap:25px;

}

.highlight-title h3{

    font-size:24px;

}

.highlight-body{

    padding:22px;

}

.highlight-body img{

    height:220px;

}

.highlight-body p{

    font-size:15px;

}

.facility-grid{

    gap:14px;

}

.facility-box{

    padding:18px 10px;

}

.facility-box i{

    font-size:30px;

}

.facility-box span{

    font-size:15px;

}

.gallery-grid img{

    height:110px;

}

.highlight-btn{

    width:100%;

    text-align:center;

    padding:14px;

}



/*=========================================
        NOTICE RESPONSIVE
=========================================*/

.notice-wrapper{

    grid-template-columns:1fr;

}

.notice-card{

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

}

.download-btn{

    width:100%;

    text-align:center;

}

.moving-notice{

    padding:25px;

}

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


.page-banner{

    height:250px;

}

.page-banner-content h1{

    font-size:2rem;

}

.page-banner-content p{

    font-size:.9rem;

}

/* About */

.about-wrapper{

    grid-template-columns:1fr;

    gap:35px;

}

.about-content{

    text-align:center;

}

.about-content h3{

    font-size:1.7rem;

}

.about-content p{

    text-align:left;

}

.about-features{

    grid-template-columns:1fr;

}

/* Vision */

.vision-wrapper{

    grid-template-columns:1fr;

}

/* Principal */

.principal-wrapper{

    grid-template-columns:1fr;

}

.principal-image{

    max-width:320px;

    margin:auto;

}

/*=====================================
        MANAGEMENT - MOBILE
======================================*/

    .management-section{
        padding:60px 5%;
    }

    .management-container{

        display:grid;

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

        gap:35px 20px;

    }

    .management-card{

        text-align:center;

    }

    .management-image{

        width:150px;
        height:150px;

        margin:auto;

        border-radius:50%;

        overflow:hidden;

        border:3px solid #D4AF37;

    }

    .management-image img{

        width:100%;
        height:100%;

        object-fit:cover;

    }

    .management-card h3{

        font-size:17px;

        margin-top:18px;

        color:#0F2D4A;

        line-height:1.3;

    }

    .management-card p{

        font-size:14px;

        color:#0F4C81;

        margin-top:6px;

    }



/* Glance */

.glance-wrapper{

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

}

/* Choose */

.choose-wrapper{

    grid-template-columns:1fr;

}

.section-title h2{

    font-size:1.8rem;

}


/*=========================================
            CONTACT PAGE
=========================================*/


.contact-container{

    grid-template-columns:1fr;

}

.form-container{

    grid-template-columns:1fr;

    gap:40px;

}

.form-content{

    text-align:center;

}

.form-content h2{

    font-size:1.8rem;

}

.contact-form button{

    width:100%;

}

.map-container iframe{

    height:350px;

}

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


.principal-card{

    flex-direction:column;

    text-align:center;

    padding:30px 20px;

}

.principal-image{

    flex:unset;

}

.principal-image img{

    width:220px;

    height:270px;

}

.principal-details h2{

    font-size:1.6rem;

}

.faculty-container{

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

    gap:20px;

}

.faculty-card{

    padding:18px;

}

.faculty-card img{

    width:100px;

    height:100px;

}

.faculty-card h3{

    font-size:1rem;

}

.faculty-card h5{

    font-size:.9rem;

}

.faculty-card p{

    font-size:.8rem;

}


.page-banner{

    height:260px;

}

.banner-content h1{

    font-size:36px;

}

.banner-content p{

    font-size:16px;

}

.gallery-section{

    padding:70px 0;

}

.section-heading h2{

    font-size:30px;

}

.gallery-filter{

    gap:10px;

}

.filter-btn{

    padding:10px 20px;

    font-size:14px;

}

.gallery-container{

    grid-template-columns:1fr;

    gap:20px;

}

.gallery-item img{

    height:220px;

}

.close-lightbox{

    top:18px;

    right:20px;

    font-size:38px;

}

.lightbox-prev,

.lightbox-next{

    width:45px;

    height:45px;

    font-size:22px;

}

.lightbox-prev{

    left:10px;

}

.lightbox-next{

    right:10px;

}


    .guidelines-section{

        padding:55px 0 30px;

    }

    .section-heading{

        margin-bottom:30px;

        padding:0 10px;

    }

    .section-heading h2{

        font-size:25px;

    }

    .section-heading p{

        font-size:13px;

        line-height:1.7;

    }

    .section-heading span{

        font-size:13px;

    }


    /* Guideline */

    .guideline-card{

        width:94%;

        padding:28px 22px;

        border-top-width:4px;

        border-radius:0 0 15px 15px;

    }

    .guideline-card ol{

        padding-left:20px;

    }

    .guideline-card ol li{

        font-size:13px;

        line-height:1.7;

        padding-left:5px;

        margin-bottom:14px;

    }


    /* Procedure */

    .procedure-heading{

        margin-top:30px;

        margin-bottom:18px;

    }

    .procedure-heading span{

        width:36px;

        height:36px;

        font-size:13px;

    }

    .procedure-heading h3{

        font-size:19px;

    }

    .procedure-list{

        grid-template-columns:1fr;

        gap:12px;

    }

    .procedure-item{

        padding:13px;

        gap:12px;

    }

    .procedure-icon{

        min-width:36px;

        height:36px;

        font-size:12px;

    }

    .procedure-item p{

        font-size:13px;

    }


    /* Documents */

    .documents-section{

        padding:30px 0 60px;

    }

    .documents-grid{

        width:94%;

        grid-template-columns:1fr 1fr;

        gap:12px;

    }

    .document-card{

        min-height:125px;

        padding:18px 10px;

        border-radius:12px;

    }

    .document-icon{

        width:45px;

        height:45px;

        margin-bottom:10px;

        font-size:16px;

    }

    .document-card p{

        font-size:12px;

    }



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


.page-banner{

    height:250px;

}

.banner-content h1{

    font-size:34px;

}

.banner-content p{

    font-size:16px;

}

.academics-intro{

    padding:60px 5% 30px;

}

.courses{

    padding:30px 5% 60px;

}

.course-header{

    padding:20px;

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

.course-info{

    align-items:flex-start;

}

.course-info i{

    width:60px;

    height:60px;

    font-size:24px;

}

.course-info h3{

    font-size:22px;

}

.course-content{

    padding:25px;

}

.course-content h4{

    font-size:20px;

}

.subject-list{

    grid-template-columns:1fr;

}

.course-details{

    grid-template-columns:1fr;

}

.detail-box{

    padding:25px;

}


    .facilities-section{

        padding:70px 5%;

    }

    .facilities-grid{

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

        gap:18px;

    }

    .facility-card{

        padding:25px 18px;

    }

    .facility-icon{

        width:65px;

        height:65px;

        margin-bottom:18px;

    }

    .facility-icon i{

        font-size:26px;

    }

    .facility-card h3{

        font-size:18px;

    }

    .facility-card p{

        font-size:14px;

        line-height:1.6;

    }

.gallery-container{

    

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

    gap:20px;

}


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

.gallery-item.videos video{
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
    display:block;
}

/* Keep video card same height as image cards */
.gallery-item.videos{
    height:100%;
    overflow:hidden;
}

/* Play button */
.video-play{
    width:45px;
    height:45px;
    font-size:15px;
}

/* Video overlay */
.gallery-item.videos .gallery-overlay{
    padding:20px 10px 10px;
}

.gallery-item.videos .gallery-overlay h3{
    font-size:12px;
}


/*====================================
        VIDEO LIGHTBOX
====================================*/

.video-lightbox{
    padding:15px;
}

.video-lightbox-content{
    width:100%;
}

.video-lightbox video{
    width:100%;
    max-height:70vh;
    object-fit:contain;
}

.video-close{
    right:-5px;
    top:-15px;
    width:35px;
    height:35px;
}


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

.footer{
    padding:60px 0 20px;
}

.footer-grid{
    grid-template-columns:1fr;
    gap:35px;
    text-align:center;
}

.footer-box img{
    margin:auto;
    margin-bottom:20px;
}

.social-links{
    justify-content:center;
}

.footer-bottom{
    flex-direction:column;
    text-align:center;
}

}