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

@media (max-width:768px){

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

    .college-header{

        min-height:85px;

        padding:10px 12px;

    }
    

    .college-logo img{

        width:55px;
        height:55px;

    }

    .college-info{

        padding:0 10px;

    }

    .college-info h1{

        font-size:16px;

        line-height:1.25;

        margin-bottom:3px;

    }

    .college-info p{

        font-size:10px;

        margin-bottom:2px;

    }

    .college-info span{

        font-size:8px;

        display:block;

    }

    .phone{

        font-size:11px;

        gap:6px;

    }

    .phone i{

        width:32px;
        height:32px;

        font-size:13px;

    }

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

    .navbar{

        position:sticky;

        top:0;

    }

    .nav-container{

        width:92%;

        height:60px;

        justify-content:flex-end;

    }

    nav{

        justify-content:flex-end;

    }

    .hamburger{

        display:block;

        font-size:28px;

    }

    .nav-links{

        position:absolute;

        top:60px;

        left:0;

        width:100%;

        background:rgba(30,27,75,.96);

        backdrop-filter:blur(18px);

        -webkit-backdrop-filter:blur(18px);

        display:none;

        flex-direction:column;

        align-items:center;

        gap:22px;

        padding:30px 0;

        border-top:1px solid rgba(103,232,249,.20);

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

    }

    .nav-links.active{

        display:flex;

    }

    .nav-links li{

        width:100%;

        text-align:center;

    }

    .nav-links a{

        display:block;

        font-size:17px;

        padding:8px 0;

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

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

    .college-header{

        padding:10px 15px;
        min-height:85px;

    }

    .college-logo img{

        width:55px;
        height:55px;

    }

    .college-info{

        padding:0 8px;

    }

    .college-info h1{

        font-size:18px;
        line-height:1.2;
        margin-bottom:4px;

    }

    .college-info p{

        font-size:10px;
        margin-bottom:3px;

    }

    .college-info span{

        font-size:8px;

    }

    .phone{

        font-size:11px;
        gap:6px;

    }

    .phone i{

        width:32px;
        height:32px;
        font-size:13px;

    }

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

    .navbar{

        height:60px;

    }

    .nav-container{

        width:92%;
        height:100%;
        justify-content:flex-end;

    }

    nav{

        width:100%;
        justify-content:flex-end;

    }

    .hamburger{

        display:block;
        font-size:28px;

    }

    .nav-links{

        position:absolute;

        top:60px;
        left:0;

        width:100%;

        background:rgba(30,27,75,.97);

        backdrop-filter:blur(16px);

        -webkit-backdrop-filter:blur(16px);

        display:none;

        flex-direction:column;

        align-items:center;

        gap:20px;

        padding:25px 0;

        box-shadow:0 8px 25px rgba(0,0,0,.25);

    }

    .nav-links.active{

        display:flex;

    }

    .nav-links li{

        width:100%;
        text-align:center;

    }

    .nav-links a{

        display:block;
        padding:8px;
        font-size:17px;

    }

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

    .hero{

        height:70vh;

    }

    .hero-content{

        width:92%;

    }

    .hero-content h4{

        font-size:14px;

        letter-spacing:1.5px;

        margin-bottom:10px;

    }

    .hero-content h1{

        font-size:30px;

        line-height:1.3;

        margin-bottom:12px;

    }

    .hero-content h3{

        font-size:18px;

        margin-bottom:12px;

    }

    .hero-content p{

        font-size:14px;

        line-height:1.6;

        max-width:100%;

        margin-bottom:25px;

    }

    .hero-btn{

        flex-direction:column;

        align-items:center;

        gap:15px;

        margin-top:25px;

    }

    .btn-primary,
    .btn-secondary{

        width:200px;

        padding:12px 20px;

        font-size:15px;

        text-align:center;

    }

    .prev,
    .next{

        width:42px;

        height:42px;

        font-size:18px;

    }

    .prev{

        left:10px;

    }

    .next{

        right:10px;

    }

    .dots{

        bottom:18px;

        gap:10px;

    }

    .dot{

        width:10px;

        height:10px;

    }

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



    .about{

        padding:60px 5%;

    }

    .about-container{

        grid-template-columns:1fr;

        gap:40px;

    }

    /* Image */

    .about-image{

        order:1;

    }

    .about-image img{

        width:100%;

        border-radius:15px;

    }

    /* Content */

    .about-content{

        order:2;

        text-align:center;

    }

    .section-tag{

        font-size:13px;

        letter-spacing:1px;

    }

    .about-content h2{

        font-size:30px;

        margin-bottom:15px;

    }

    .about-content p{

        font-size:15px;

        line-height:1.8;

        margin-bottom:15px;

    }

    /* Features */

    .about-features{

        grid-template-columns:1fr;

        gap:15px;

        margin:25px 0;

    }

    .feature{

        justify-content:flex-start;

        font-size:15px;

    }

    .feature i{

        font-size:16px;

    }

    /* Button */

    .about-btn{

        padding:12px 30px;

        font-size:15px;

    }


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


    .principal{

        padding:60px 5%;

    }

    .principal-container{

        grid-template-columns:1fr;

        gap:30px;

        text-align:center;

    }

    /* Center Image */

    .principal-image{

        display:flex;

        justify-content:center;

        align-items:center;

    }

    .principal-image img{

        width:200px;

        height:250px;

        margin:0 auto;

    }

    /* Content */

    .principal-content{

        text-align:center;

    }

    .principal-content h2{

        font-size:28px;

    }

    .principal-content p{

        font-size:15px;

        line-height:1.7;

    }

    .principal-content h4{

        font-size:18px;

    }

    .designation{

        font-size:14px;

    }

    .principal-btn{

        padding:12px 28px;

        font-size:15px;

    }


    .notice{

        padding:60px 5%;

    }

    .notice-card{

        flex-direction:column;

        text-align:center;

        padding:20px;

    }

    .notice-content{

        padding-left:0;

    }

    .notice-content h4{

        font-size:18px;

    }

    .download-btn{

        margin-top:15px;

    }

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

    .courses{

        padding:60px 5%;

    }

    .course-container{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:35px;

    }

    .course-card{

        padding:28px 20px;

    }

    .course-icon{

        width:65px;

        height:65px;

        font-size:28px;

        margin-bottom:18px;

    }

    .course-card h3{

        font-size:20px;

    }

    .course-card p{

        font-size:14px;

    }


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



    /* Page Banner */

    .page-banner{

        height:30vh;

    }

    .banner-content h1{

        font-size:34px;

    }

    .banner-content p{

        font-size:15px;

    }

    /* Section Heading */

    .section-heading{

        margin-bottom:40px;

    }

    .section-heading h4{

        font-size:15px;

    }

    .section-heading h2{

        font-size:28px;

    }

    .title-line{

        width:70px;

    }

    /* Contact Info */

    .contact-info{

        padding:60px 5%;

    }

    .contact-container{

        grid-template-columns:1fr;

        gap:20px;

    }

    .contact-card{

        padding:30px 20px;

    }

    .contact-card i{

        width:65px;

        height:65px;

        font-size:24px;

        margin-bottom:18px;

    }

    .contact-card h3{

        font-size:20px;

    }

    .contact-card p{

        font-size:14px;

        line-height:1.7;

    }

    /* Contact Form */

    .contact-form-section{

        padding:60px 5%;

    }

    .form-container{

        grid-template-columns:1fr;

        gap:35px;

    }

    .form-content{

        text-align:center;

    }

    .form-content h2{

        font-size:30px;

        margin-bottom:15px;

    }

    .form-content p{

        font-size:15px;

        line-height:1.8;

    }

    .contact-form{

        padding:25px 20px;

    }

    .contact-form input,

    .contact-form textarea{

        padding:14px;

        font-size:14px;

    }

    .contact-form button{

        padding:14px;

        font-size:15px;

    }

    /* Google Map */

    .map-section{

        padding:0 5% 60px;

    }

    .map-container{

        border-radius:15px;

    }

    .map-container iframe{

        height:300px;

    }

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


    /* Banner */

    .page-banner{

        height:30vh;

    }

    .banner-content h1{

        font-size:34px;

    }

    .banner-content p{

        font-size:15px;

    }

    /* Section */

    .courses{

        padding:60px 5%;

    }

    .section-heading{

        margin-bottom:40px;

    }

    .section-heading h4{

        font-size:15px;

    }

    .section-heading h2{

        font-size:28px;

    }

    .title-line{

        width:70px;

    }

    /* Course Card */

    .course-card{

        margin-bottom:20px;

        border-radius:15px;

    }

    .course-header{

        padding:18px;

        align-items:center;

    }

    .course-info{

        gap:12px;

        flex:1;

    }

    .course-info i{

        width:50px;

        height:50px;

        font-size:20px;

        flex-shrink:0;

    }

    .course-info h3{

        font-size:18px;

        margin-bottom:4px;

    }

    .course-info p{

        font-size:12px;

        line-height:1.5;

    }

    .course-toggle{

        width:40px;

        height:40px;

        font-size:15px;

        margin-left:10px;

        flex-shrink:0;

    }

    /* Course Content */

    .course-content{

        padding:20px;

    }

    .course-content h4{

        font-size:18px;

        margin-bottom:18px;

    }

    .subject-list{

        grid-template-columns:1fr;

        gap:12px;

    }

    .subject{

        padding:12px 15px;

        font-size:14px;

    }



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


    /* Banner */

    .page-banner{

        height:250px;

    }

    .banner-content h1{

        font-size:34px;

    }

    .banner-content p{

        font-size:15px;

    }

    /* Common Heading */

    .section-heading{

        margin-bottom:40px;

    }

    .section-heading h4{

        font-size:15px;

        letter-spacing:1px;

    }

    .section-heading h2{

        font-size:28px;

    }

    .title-line{

        width:70px;

    }

    /* Sections */

    .principal-section,
    .teaching-section,
    .non-teaching-section{

        padding:60px 5%;

    }

    /* Principal */

    .principal-card{

        flex-direction:column;

        text-align:center;

        padding:25px 20px;

        gap:25px;

    }

    .principal-image{

        flex:unset;

        width:100%;

        display:flex;

        justify-content:center;

    }

    .principal-image img{

        width:180px;

        height:220px;

    }

    .principal-details h2{

        font-size:24px;

    }

    .principal-details h4{

        font-size:18px;

        margin-bottom:18px;

    }

    .principal-info p{

        font-size:14px;

        margin:8px 0;

    }

    .principal-message{

        font-size:14px;

        line-height:1.8;

        padding-left:12px;

    }

    /* Faculty Grid */

    .faculty-container{

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

        gap:15px;

    }

    .faculty-card{

        padding:18px 12px;

    }

    .faculty-card img{

        width:90px;

        height: 130px;

        border-width:3px;

        margin-bottom:12px;

    }

    .faculty-card h3{

        font-size:15px;

        line-height:1.4;

    }

    .faculty-card h5{

        font-size:13px;

        margin-bottom:10px;

    }

    .faculty-card p{

        font-size:12px;

        margin:5px 0;

        line-height:1.5;

    }

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

    /* Page Banner */

    .page-banner{

        height:250px;

    }

    .banner-content h1{

        font-size:34px;

    }

    .banner-content p{

        font-size:15px;

    }

    /* Gallery Section */

    .gallery-section{

        padding:60px 5%;

    }

    /* Heading */

    .section-heading{

        margin-bottom:35px;

    }

    .section-heading h4{

        font-size:15px;

        letter-spacing:1px;

    }

    .section-heading h2{

        font-size:28px;

    }

    .title-line{

        width:70px;

    }

    /* Filter Buttons */

    .gallery-filter{

        gap:10px;

        margin-bottom:35px;

    }

    .filter-btn{

        padding:10px 18px;

        font-size:13px;

    }

    /* Gallery Grid */

    .gallery-container{

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

        gap:12px;

    }

    .gallery-item{

        border-radius:12px;

    }

    .gallery-item img{

        height:170px;

    }

    /* Overlay */

    .gallery-overlay i{

        font-size:22px;

        margin-bottom:8px;

    }

    .gallery-overlay h3{

        font-size:14px;

        text-align:center;

        padding:0 8px;

    }

    /* Lightbox */

    #lightbox-img{

        max-width:92%;

        max-height:75%;

    }

    .close-lightbox{

        top:15px;

        right:20px;

        font-size:35px;

    }

    .lightbox-prev,
    .lightbox-next{

        width:42px;

        height:42px;

        font-size:18px;

    }

    .lightbox-prev{

        left:10px;

    }

    .lightbox-next{

        right:10px;

    }


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


/* Banner */

.page-banner{

    height:250px;

}

.banner-content h1{

    font-size:34px;

}

.banner-content p{

    font-size:15px;

}

/* Common Heading */

.section-heading{

    margin-bottom:40px;

}

.section-heading h4{

    font-size:15px;

}

.section-heading h2{

    font-size:30px;

}

/* Sections */

.about-college,
.management-section,
.vision-mission,
.why-us,
.highlights,
.infrastructure{

    padding:70px 5%;

}

/* About Section */

.about-container{

    flex-direction:column;

    gap:35px;

}

.about-image{

    text-align:center;

}

.about-image img{

    width:85%;

    height:300px;

}

.about-content{

    text-align:center;

}

.about-content h3{

    font-size:28px;

}

.about-content p{

    font-size:15px;

    line-height:1.8;

}

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



    .management-section{

        padding:70px 5%;

    }

    .management-card{

        flex-direction:column;

        align-items:center;

        text-align:center;

        padding:30px 20px;

        gap:30px;

        margin-bottom:35px;

    }

    .management-image{

        flex:none;

        width:220px;

    }

    .management-image img{

        width:220px;

        height: 325px;

        object-fit:cover;

        border-width:4px;

    }

    .management-content{

        width:100%;

    }

    .management-content h3{

        font-size:26px;

        margin-bottom:18px;

    }

    .management-content p{

        font-size:15px;

        line-height:1.8;

        text-align:left;

    }

    .management-sign{

        margin-top:25px;

        text-align:center;

    }

    .management-sign h4{

        font-size:22px;

    }

    .management-sign span{

        font-size:16px;

    }



/* Vision */

.vision-container{

    grid-template-columns:1fr;

    gap:25px;

}

.vision-card{

    padding:30px 20px;

}

.vision-card i{

    width:75px;

    height:75px;

    line-height:75px;

    font-size:28px;

}

.vision-card h3{

    font-size:24px;

}

.vision-card p{

    font-size:15px;

}

/* Features */

.features-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.feature-card{

    padding:30px 20px;

}

.feature-card i{

    font-size:34px;

}

.feature-card h3{

    font-size:22px;

}

.feature-card p{

    font-size:15px;

}

/* Highlights */

.highlight-grid{

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

    gap:18px;

}

.highlight-box{

    padding:25px 15px;

}

.highlight-box h2{

    font-size:32px;

}

.highlight-box p{

    font-size:15px;

}

/* Infrastructure */

.infra-grid{

    grid-template-columns:1fr;

    gap:25px;

}

.infra-card img{

    height:220px;

}

.infra-card h3{

    font-size:20px;

    padding:18px;

}


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

/* Banner */

.page-banner{

    height:250px;

}

.banner-content h1{

    font-size:34px;

}

.banner-content p{

    font-size:15px;

}

/* Common Heading */

.section-heading{

    margin-bottom:40px;

}

.section-heading h4{

    font-size:15px;

}

.section-heading h2{

    font-size:30px;

}

/* Sections */

.admission-hero,
.eligibility,
.admission-process,
.available-courses,
.documents,
.fee-section,
.instructions,
.apply-online{

    padding:70px 5%;

}

/* Admission Hero */

.admission-content h4{

    font-size:16px;

}

.admission-content h2{

    font-size:34px;

}

.admission-content p{

    font-size:15px;

    line-height:1.8;

}

.apply-btn{

    padding:14px 32px;

    font-size:15px;

}

/* Eligibility */

.eligibility-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.eligibility-card{

    padding:30px 20px;

}

.eligibility-card i{

    font-size:36px;

}

.eligibility-card h3{

    font-size:22px;

}

.eligibility-card p{

    font-size:15px;

}

/* Admission Process */

.process-container{

    grid-template-columns:1fr;

    gap:20px;

}

.process-card{

    padding:30px 20px;

}

.step-number{

    width:50px;

    height:50px;

    line-height:50px;

    font-size:20px;

}

/* Courses */

.course-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.course-box{

    padding:35px 25px;

}

.course-box i{

    font-size:42px;

}

.course-box h3{

    font-size:24px;

}

/* Documents */

  .documents{
        padding:60px 5%;
    }

    .document-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

    .document-card{
        padding:22px 15px;
    }

    .document-card i{
        font-size:28px;
        margin-bottom:12px;
    }

    .document-card p{
        font-size:14px;
        line-height:1.5;
    }

/* Fee Table */

.fee-table{

    overflow-x:auto;

}

.fee-table table{

    min-width:500px;

}

.fee-table th,

.fee-table td{

    padding:14px;

    font-size:14px;

}

/* Instructions */

.instruction-box{

    padding:25px;

}

.instruction-box li{

    font-size:15px;

    line-height:1.7;

}

/* Apply Section */

.apply-online h2{

    font-size:30px;

}

.apply-online p{

    font-size:15px;

}

.apply-btn-large{

    padding:15px 35px;

    font-size:16px;

}


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


    .footer{
        padding:50px 0 20px;
        overflow:hidden;
    }

    .footer .container{
        width:100%;
        max-width:100%;
        padding:0 20px;
        box-sizing:border-box;
    }

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

    .footer-box{
        min-width:0;
        width:100%;
    }

    .footer-box img{
        width:70px;
        margin:auto;
        margin-bottom:15px;
    }

    .footer-box h3{
        font-size:18px;
        margin-bottom:12px;
    }

    .footer-box h4{
        font-size:17px;
        margin-bottom:18px;
    }

    .footer-box p{
        font-size:13px;
        line-height:1.6;
        margin-bottom:9px;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .footer-box ul li{
        margin-bottom:10px;
    }

    .footer-box ul li a{
        font-size:13px;
    }

    .footer-box i{
        margin-right:7px;
    }

    .social-links{
        justify-content:center;
        gap:10px;
        margin-top:18px;
    }

    .social-links a{
        width:40px;
        height:40px;
        font-size:14px;
    }

    .footer-bottom{
        margin-top:40px;
        padding-top:20px;
        flex-direction:column;
        text-align:center;
        gap:8px;
    }

    .footer-bottom p{
        font-size:12px;
    }






}


/*=====================================
        SMALL MOBILE (480px)
======================================*/

@media (max-width:480px){

    .college-top-line{
    font-size:8px;
    margin-bottom:3px;
    line-height:1.3;
}


     .college-header{
        padding:8px 10px;
        min-height:70px;
    }

    .college-logo{
        width:48px;
    }

    .college-logo img{
        width:48px;
        height:48px;
    }

    .college-info{
        padding:0 8px;
    }

    .college-info h1{
        font-size:14px;
        margin-bottom:4px;
    }

    .college-info p{
        font-size:9px;
        margin-bottom:3px;
    }

    .college-info span{
        font-size:7px;
    }

    .nav-links a{

        font-size:16px;

    }

}