﻿/* college name */


/* 📌 Sub College Header */
.sub-college-header {
    position: sticky;
    background: #1a1a1a;
    color: #fff;
    z-index: 900;
    padding: 0.15rem 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}



.sub-logo {
    height: 60px;
    width: auto;
}

.college-name {
    font-size: 2.72rem;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    margin: 0;
}



.sub-college-menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .sub-college-menu ul li a:hover {
        color: #ffae00;
    }

*/
/* 📱 Mobile */
@media (max-width: 768px) {
    .sub-college-container

{
    justify-content: center;
    text-align: center;
}

.sub-logo {
}

.college-name {
    font-size: 1.5rem;
    font-weight: 900;
}

}
/* .sub-college-menu ul {
        gap: 1.3rem;
        top: 80px;
        padding: 1rem 2rem;
    }*/


.college-name {
    font-size: 2.74rem;
    font-weight: 900;
    color: white;
    /* background: linear-gradient(90deg, #00b4ff, #ffae00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    margin: 0;
    white-space: nowrap; /* keep on one line by default */
}

    .college-name .mobile-break {
        display: inline;
    }

/* 📱 Mobile view: force line break after first part */
@media (max-width: 768px) {
    .college-name {
        white-space: normal; /* allow wrapping */
        text-align: center;
    }

        .college-name .mobile-break {
            display: block; /* forces line break */
        }


    .sub-logo {
    }

    .college-name {
        font-size: 1.3rem;
        font-weight: 800;
    }
}

/* ✅ Sub College Header Offset Fix */
.sub-college-header {
    position: fixed !important;
    top: 100px !important; /* ✨ added +1px buffer */
    left: 0;
    right: 0;
    background: #1a1a1a;
    color: #fff;
    z-index: 1100; /* higher than mega menu */
    padding: 0.15rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}



/* Push content exactly below the header stack */
body {
    padding-top: calc( var(--topbar-h) + var(--navbar-h) + var(--subcollege-name-h) 3px /* ✨ buffer to ensure no overlap */
    ) !important;
}

@media (max-width: 991px) {
    .sub-college-header {
        top: calc(var(--navbar-h) + 25px);
    }
}





/*new*/


/* 1) Single source of truth for heights */
:root {
    --topbar-h: 34px; /* quick links row */
    --navbar-h: 56px; /* main menu row (reduced from 64) */
    --subcollege-name-h: 60px; /* college name bar */
    /*--subcollege-menu-h: 40px;*/ /* college menu bar */
}

@media (max-width: 991px) {
    :root {
        --topbar-h: 0px;
        --navbar-h: 56px;
        --subcollege-name-h: 50px;
        /*        --subcollege-menu-h: 50px;
*/
    }
}

/* 2) Normalize main navbar so it never adds hidden vertical padding */
.header-topbar {
    height: var(--topbar-h);
}

.navbar {
    height: var(--navbar-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
    line-height: 1;
}

/* 3) Stack the two sub bars FIXED directly under the main header */
.sub-college-header {
    position: fixed !important;
    left: 0;
    right: 0;
    top: calc(var(--topbar-h) + var(--navbar-h));
    /* under main header (1100), above page */
    margin: 0px !important;
    border-top: 0;
}



    /* 4) Remove any stray margins that could create visual gaps */
    .sub-college-header * {
        margin-top: 0 !important;
    }



/* 5) Push page content down by the total fixed header stack */
body {
    padding-top: calc( var(--topbar-h) + var(--navbar-h) + var(--subcollege-name-h) ) !important;
}

/* 6) Keep hero perfectly centered below the stacked headers */
.hero-section {
    height: calc( 100vh - (var(--topbar-h) + var(--navbar-h) + var(--subcollege-name-h)  )) !important;
    display: flex;
    align-items: center;
}

@media (max-width: 991px) {
    .hero-section {
        height: calc( 100vh - (var(--navbar-h) + var(--subcollege-name-h))) !important;
        justify-content: center;
        padding-left: 0;
    }
}

/* 7) Drop the desktop mega menu gap */
@media (min-width: 992px) {
    .nav-menu > li {
        position: relative;
    }

    .mega {
        top: calc(100% + 2px) !important; /* sit right under the parent item */
        margin-top: 0 !important;
        transform: translateY(8px);
    }

    .nav-menu li:hover > .mega {
        transform: translateY(0);
    }
}

/* 📌 Sub College Header — Just below main header */
.sub-college-header {
    position: fixed !important;
    top: calc(var(--topbar-h) + var(--navbar-h) + 4px); /* ⬅ Added buffer */
    left: 0;
    right: 0;
    background: #1a1a1a;
    color: #fff;
    z-index: 1100;
    padding: 0.15rem 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}



@media (max-width: 991px) {
    .sub-college-header {
        top: calc(var(--navbar-h) + 2px);
    }
}

body {
    padding-top: calc( var(--topbar-h) + var(--navbar-h) + var(--subcollege-name-h) /* ✨ safety padding to prevent content jump */
    ) !important;
}

@media (max-width: 768px) {

    .sub-college-container {
        display: flex;
        flex-direction: row;
        align-items: center; /* ⬅ vertical centering */
        justify-content: center; /* ⬅ center the whole block */
        gap: 0.7rem;
        text-align: center; /* ⬅ center the two-line text */
    }

    .sub-logo {
        height: 42px;
        width: auto;
        flex-shrink: 0; /* ⬅ prevent it from shrinking */
    }

    .college-name {
        font-size: 1.15rem;
        font-weight: 900;
        line-height: 1.15;
        white-space: normal; /* allow wrapping */
        display: flex;
        flex-direction: column; /* ⬅ treat lines as a block */
        justify-content: center; /* ⬅ align block vertically */
        text-align: center; /* ⬅ center text */
        margin: 0;
    }

        .college-name .mobile-break {
            display: block; /* ⬅ ensures exact two lines */
        }
}

/* Desktop: no break */
.college-name .mobile-break {
    display: none;
}

/* Mobile: force break into two lines */
@media (max-width: 768px) {
    .college-name {
        white-space: normal; /* allow wrapping */
        text-align: center;
        line-height: 1.22;
        font-size: 1.15rem;
        font-weight: 900;
    }

        .college-name .mobile-break {
            display: block; /* ⬅ forces exact line break ONLY in mobile */
        }
}


@media (max-width: 768px) {

    .sub-college-container {
        flex-direction: row; /* logo + text same row */
        justify-content: flex-start; /* logo stays LEFT aligned */
        align-items: center;
        gap: 0.6rem;
        padding-left: 1rem; /* matches mobile menu's left padding */
        padding-right: 1rem;
    }

    .college-name {
        font-size: 1.15rem;
        font-weight: 900;
        line-height: 1.2;
        text-align: left; /* align with logo */
        white-space: normal;
    }

        .college-name .mobile-break {
            display: block; /* force 2nd line on mobile */
        }
}




@media (max-width: 768px) {

    .sub-college-container {
        flex-direction: row;
        justify-content: flex-start; /* ⬅ keep logo at left */
        align-items: center;
        gap: 0.6rem;
        padding-left: 1.1rem; /* match mobile navbar padding exactly */
        padding-right: 1.1rem;
    }

    .college-name {
        font-size: 1.2rem;
        font-weight: 900;
        line-height: 1.22;
        text-align: left; /* ⬅ align text with logo */
        margin: 0;
        white-space: normal;
    }

        .college-name .mobile-break {
            display: block; /* force exact 2 line break */
        }
}

.sub-college-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.college-name {
    flex: 1; /* ⬅ Fills the remaining space */
    text-align: left; /* ⬅ Keeps alignment correct */
    white-space: nowrap;
}

@media (max-width: 768px) {
    .college-name {
        white-space: normal; /* Allow 2 lines in mobile */
    }
}
/* Desktop */
.college-name {
    font-size: 3.1rem; /* ⬅ Increase here */
    font-weight: 900;
    line-height: 1.2;
    flex: 1;
    margin: 0;
    white-space: nowrap;
}

/* Mobile */
@media (max-width: 768px) {
    .college-name {
        font-size: 1.35rem; /* ⬅ Good readable size for phones */
        white-space: normal; /* allow 2 lines */
        line-height: 1.18;
    }
}

.sub-college-container {
    width: 100%;
    margin: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sub-logo {
    height: 56px;
    width: auto;
}


.sub-college-header {
    width: 100%;
    background: #1a1a1a;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.15);
}

/* Container fills full width with 5px padding */
.sub-college-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 5px;
    gap: 8px;
}

/* Logo never stretches */
.sub-logo {
    height: 58px; /* desktop default */
    width: auto;
}

/* Text stretches to remaining space */
.college-name {
    flex: 1; /* ✅ stretch */
    margin: 0;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap; /* ✅ desktop single-line */
    text-align: left;
    font-size: clamp(1.8rem, 3vw, 3.2rem); /* ✅ automatic responsive scaling */
}

    /* Force 2-line break only on mobile */
    .college-name .mobile-break {
        display: none;
    }

@media (max-width: 768px) {
    .sub-logo {
        height: 42px; /* smaller logo for phones */
    }

    .college-name {
        white-space: normal; /* allow two lines */
        font-size: clamp(1.2rem, 4vw, 1.45rem); /* ✅ smooth scaling on all mobiles */
        text-align: left;
        line-height: 1.18;
    }

        .college-name .mobile-break {
            display: block; /* ✅ forces second line */
        }
}

.sub-college-header {
    width: 100%;
    background: #1a1a1a;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.15);
}

/* Full width with 5px side gap */
.sub-college-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 5px;
    gap: 10px;
}

/* Logo fixed-size */
.sub-logo {
    height: 58px;
    width: auto;
}

/* Desktop name - fill remaining space */
.college-name {
    flex: 1;
    margin: 0;
    font-weight: 900;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    font-size: clamp(2.2rem, 3.6vw, 3.5rem); /* AUTO SCALE */
}

    /* Mobile formatting */
    .college-name .mobile-break {
        display: none;
    }

@media (max-width: 768px) {
    .sub-logo {
        height: 42px;
    }

    .college-name {
        white-space: normal;
        font-size: clamp(1.25rem, 4vw, 1.45rem);
        line-height: 1.2;
    }

        .college-name .mobile-break {
            display: block;
        }
}

@media (max-width: 768px) {

    .sub-college-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 0 5px; /* same spacing as desktop */
        gap: 8px; /* good balanced gap */
    }

    .sub-logo {
        height: 40px; /* correct visual scale */
        width: auto;
        flex-shrink: 0; /* prevents logo shrinking */
    }

    .college-name {
        flex: 1; /* allow full-width text */
        margin: 0;
        font-weight: 900;
        text-transform: uppercase;
        white-space: normal; /* allow 2 lines */
        line-height: 1.22;
        text-align: left; /* align with logo */
        font-size: clamp(1.1rem, 4vw, 1.35rem); /* ✅ responsive clean size */
    }

        .college-name .mobile-break {
            display: block; /* force second line exactly */
        }
}

@media (max-width: 768px) {

    .sub-college-container {
        display: flex;
        flex-direction: row; /* logo + text same row */
        align-items: center;
        justify-content: flex-start; /* align left */
        width: 100%;
        padding: 0 5px; /* your margin requirement */
        gap: 8px;
    }

    .sub-logo {
        height: 52px;
        width: auto;
        flex-shrink: 0; /* prevent logo from shrinking */
    }

    .college-name {
        flex: 1; /* fill remaining width */
        margin: 0;
        font-size: 1.32rem; /* clean readable size */
        font-weight: 900;
        line-height: 1.28;
        text-align: left; /* ✅ align text with logo */
        white-space: normal; /* allow wrap */
        display: block;
    }

        .college-name .mobile-break {
            display: block; /* force second line cleanly */
        }
}
/* Desktop only: match left & right spacing exactly */
@media (min-width: 769px) {
    .sub-college-container {
        padding-left: 1.5rem; /* same as main header */
        padding-right: 1.5rem; /* now left & right are equal */
    }
}




/* 🎯 Centered Sub College Header */
.sub-college-header {
    position: fixed;
    top: calc(var(--topbar-h) + var(--navbar-h));
    left: 0;
    right: 0;
    z-index: 1100;
    background: #1a1a1a;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.15);
    width: 100%;
    text-align: center;
}

/* ✅ Center the whole logo+name block */
.sub-college-container {
    display: inline-flex; /* inline so it centers as a block */
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    gap: 0.6rem; /* small gap between logo & text */
}

/* Logo */
.sub-logo {
    height: 58px;
    width: auto;
}

/* College Name */
.college-name {
    margin: 0;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    font-size: clamp(2rem, 3.5vw, 3rem);
    white-space: nowrap;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; /* or 900 if available */
    letter-spacing: 0.35rem; /* for spacing between letters if you want */
}

    /* Hide forced break on desktop */
    .college-name .mobile-break {
        display: none;
    }

/* 📱 Mobile adjustments */
@media (max-width: 768px) {
    .sub-college-container {
        display: inline-flex; /* still inline so center works */
        flex-direction: row; /* logo + name in one line */
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .sub-logo {
        height: 42px;
    }

    .college-name {
        font-size: clamp(1.1rem, 4vw, 1.35rem);
        white-space: normal;
        text-align: center;
    }

        .college-name .mobile-break {
            display: block;
        }
}


@media (max-width: 768px) {
    .sub-college-container {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        width: auto;
        text-align: center;
    }

    .sub-logo {
        height: 42px;
        width: auto;
    }

    .college-name {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
        white-space: normal;
        line-height: 1.25;
        text-align: center;
    }

        .college-name .mobile-break {
            display: block;
        }
}

/* 🧭 Final Override: Center logo + name together */
.sub-college-header {
    text-align: center !important;
}

.sub-college-container {
    display: inline-flex !important; /* inline block to allow centering */
    align-items: center !important; /* vertically centered */
    justify-content: center !important; /* horizontally centered */
    gap: 0.6rem !important; /* balanced gap */
    width: auto !important; /* prevents full width */
    margin: 0 auto !important; /* centers inline-flex block */
    text-align: center !important;
}

.sub-logo {
    height: 58px !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

.college-name {
    margin: 0 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    line-height: 1.2 !important;
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
    text-align: center !important;
    white-space: nowrap !important;
}

    .college-name .mobile-break {
        display: none;
    }

/* 📱 Mobile */
@media (max-width: 768px) {
    .sub-college-container {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        width: auto !important;
    }

    .sub-logo {
        height: 42px !important;
    }

    .college-name {
        font-size: clamp(1.1rem, 4vw, 1.35rem) !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        font-family: 'Montserrat', sans-serif;
        font-weight: 900 !important;
    }

        .college-name .mobile-break {
            display: block !important;
        }
}
/* 📌 Force mobile to center logo + name correctly */
@media (max-width: 768px) {

    .sub-college-header {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .sub-college-container {
        display: flex !important;
        flex-direction: column !important; /* logo on top, name below */
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        gap: 6px !important;
        margin: 0 auto !important;
        padding: 8px 0 !important;
    }

    .sub-logo {
        float: none !important; /* override Bootstrap */
        margin: 0 auto !important; /* center the logo */
        height: 48px !important;
    }

    .college-name {
        text-align: center !important;
        white-space: normal !important;
        margin: 0 !important;
        font-size: 1.1rem !important;
        line-height: 1.25 !important;
    }
}
/* -----------------------------------------
   ✅ MOBILE: LOGO + SCHOOL NAME SIDE BY SIDE CENTERED
------------------------------------------*/
@media (max-width: 768px) {

    .sub-college-header {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 6px 0 !important;
        text-align: center !important;
    }

    .sub-college-container {
        display: flex !important;
        flex-direction: row !important; /* SIDE BY SIDE */
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    .sub-logo {
        float: none !important; /* remove bootstrap float */
        margin: 0 !important;
        height: 40px !important; /* perfect mobile size */
        width: auto !important;
        flex-shrink: 0 !important; /* don't reduce logo */
    }

    .college-name {
        margin: 0 !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.15rem !important;
    }
}
