/*======================================================================
Site Name: VSPL Source Code
Theme URI: Velocis
Description: this site is developed by Velocis
Version: v5.3.3
Author: Web Team
------------------------------------------------------------------------
Layout Width: 100%
Container Width: 90%
Responsive Layout: Yes
=======================================================================*/
/* Table of Contents:
 * 1- Reset CSS
    1.1- COMMON TYPOGRAPHY CLASSES
    1.2- BORDER / DIVIDER UTILITIES
    1.3- COMMON IMAGE STYLE
    1.4- SPACING UTILITY CLASSES
    1.5- INPUT WIDTH HELPERS
    1.6- FONT FAMILY — NOTO SANS
    1.7- CONTAINER WIDTH OVERRIDES
    1.8- BASE STYLES
 * 2 - BUTTON STYLES
 * 3 - Header
    3.1 - NAV DROPDOWN
    3.2- BOTTOM NAVBAR
    3.3- HEADER SEARCH
 * 4 - ACCESSIBILITY OFFCANVAS
    4.1- ACCESSIBILITY PANEL 
    4.2 - INVERT FILTER MODE
    4.3 - SATURATION FILTER MODE
    4.4 - HIDE IMAGES MODE
    4.5 - DEFAULT CURSOR MODE
    4.6 - DARK CONTRAST MODE
    4.7 - HIGHLIGHT LINKS MODE
 * 5 - BANNER / HERO CAROUSEL
 * 6 - FEATURED WORK 
 * 7 - STUDENT SHOWCASE / GALLERY SECTION
    7.1- showcase filter
 * 8- EVENT SECTION
    8.1- CAROUSEL / OWL CONTROLS
 * 9 - CAMPUS SECTION LAYOUT
 * 10- GLOBAL CONNECT
 * 11 - ALUMNI
 * 12 - FOOTER
 * 13 - CHATBOT WIDGET
 * 14 - ug programes
 * 15 - ug programes details
 * 16 - Faculty details
 * 17 - RESPONSIVE STYLES
   
*/

/* ============================================================
   1 - RESET CSS
   Removes default browser margin, padding and box-sizing.
   Strips list styles, link underlines, and heading margins.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
h1,h2,h3,h4,h5,h6,p,ul{margin:0!important}
a{text-decoration:none}
p,ul{padding:0}
li{list-style:none}

/* ============================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
/* ===============================
   Scroll Reveal Base
================================= */
/* @media screen and (min-width: 991px){
    .reveal-line .line{
    display:block;
    overflow:hidden;
}

.reveal-line .line-inner{
    display:block;
    transform:translate3d(0,120%,0);
    opacity:0;
    will-change:transform,opacity;
    backface-visibility:hidden;
}

.visible .line:nth-child(1) .line-inner{
    animation:lineReveal .8s ease forwards;
}

.visible .line:nth-child(2) .line-inner{
    animation:lineReveal .8s .12s ease forwards;
}

.visible .line:nth-child(3) .line-inner{
    animation:lineReveal .8s .24s ease forwards;
}

@keyframes lineReveal{
    from{
        transform:translate3d(0,120%,0);
        opacity:0;
    }

    to{
        transform:translate3d(0,0,0);
        opacity:1;
    }
}

.reveal{
    opacity: 0;
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
    will-change: transform, opacity;
}

.reveal.visible{
    opacity: 1;
    transform: translate(0,0) scale(1) rotate(0deg);
}


.reveal-up{
    transform: translateY(60px);
}


.reveal-delay-1{
    transition-delay: 0.2s;
}

.reveal-delay-2{
    transition-delay: 0.3s;
}

.reveal-delay-3{
    transition-delay: 0.4s;
}

.reveal-delay-4{
    transition-delay: 0.5s;
}

} */


:root{
    /* --- Colour palette --- */               
    --text-primary:#1A1A1A;         
    --text-secondary:#333333;      
    --text-tertiary:#767676;         
    --accent:#B30000;                 
    --border-light:#E2E2E2;           
    --section-backgrounds:#f2f2f2;    
    --surface:#f6f6f6;            

    /* --- Spacing scale (desktop) --- */
    --spacing-cta:1.5rem;             /* 24px – space below CTA buttons */
    --spacing-label:1rem;             /* 16px – space below eyebrow labels */
    --spacing-title:1.25rem;          /* 20px – space below section titles */
    --spacing-text-btn:2rem;          /* 32px – space between text and button */
    --spacing-card-inner-v:2rem;      /* 32px – card vertical inner padding */
    --spacing-card-inner-h:2.25rem;   /* 20px – card horizontal inner padding */
    --spacing-equal:6rem;             /* 96px – top/bottom section padding */
    --spacing-footer:3rem;        /* 42px – footer section padding */
    --big-img-content-space:2rem;     /* 32px – gap beside full-bleed images */
    --small-img-content-space:0.75rem;/* 12px – gap beneath small thumbnails */
    --inner-spacing-extra: 3rem;

    /* --- Font-size scale (rem) ---*/
    --size-10:1rem;   /* 10px */
    --size-11:1rem;  /* 11px */
    --size-12:1rem;    /* 12px */
    --size-13:1rem;  /* 13px */
    --size-14:1rem;   /* 14px */
    --size-15:1rem;  /* 15px */
    --size-16:1.2rem;       /* 16px – base body size */
    --size-18:1.125rem;   /* 18px */
    --size-20:1.25rem;    /* 20px */
    --size-22:1.375rem;   /* 22px */
    --size-24:1.5rem;     /* 24px */
    --size-25:1.5625rem;  /* 25px */
    --size-28:1.75rem;    /* 28px */
    --size-30:1.875rem;   /* 30px */
    --size-32:2rem;       /* 32px */
    --size-36:2.25rem;    /* 36px */
    --size-38:2.375rem;   /* 38px */
    --size-40:2.5rem;     /* 40px */
    --size-42:2.625rem;   /* 42px */
    --size-43:2.6875rem;  /* 43px – accessibility icon size */
    --size-76:4.75rem;    /* 76px – hero H1 */
    --nav-link-text: 1.1rem;
    --footer-text: 1rem;
    --small-text: 0.85rem;

   /* Font Weights */
    --fw-thin: 100;
    --fw-extra-light: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;
    --fw-black: 900;
}

/* responsive nav link text  */
/* 1200px - 1499px */
@media (min-width: 1200px) and (max-width: 1250px) {
    :root {
        --nav-link-text: 0.74rem;
    }
    .nav-items .btn-pill {
    font-size: 0.74rem !important;
}
.nav-items .btn-pill {
    padding: 6px 16px;
}
.nav-items .icon-size{font-size: 0.75rem}
.nav-items .search-toggle {
    width: 29px;
    height: 29px;
    min-width: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
}
}
@media (min-width: 1251px) and (max-width: 1348px) {
    :root {
        --nav-link-text: 0.78rem;
    }
}
@media (min-width: 1349px) and (max-width: 1430px) {
    :root {
        --nav-link-text: 0.90rem;
    }
}
@media (min-width: 1431px) and (max-width: 1499.99px) {
    :root {
        --nav-link-text: 0.92rem;
    }
}

/* 1500px - 1699px */
@media (min-width: 1500px) and (max-width: 1699.98px) {
    :root {
        --nav-link-text: 1rem;
    }
}

/* 1700px and above */
@media (min-width: 1700px) {
    :root {
        --nav-link-text: 1.1rem;
    }
}
/* Edn responsive nav link text  */
/* ============================================================
   RESPONSIVE SPACING OVERRIDES — MOBILE (≤ 767px)
   ============================================================ */
@media(max-width:767px){
    :root{
        --spacing-cta:1rem;               /* 16px on mobile */
        --spacing-label:0.75rem;          /* 12px on mobile */
        --spacing-title:1rem;             /* 16px on mobile */
        --spacing-text-btn:1.5rem;        /* 24px on mobile */
        --spacing-card-inner-v:1.5rem;    /* 24px on mobile */
        --spacing-card-inner-h:1rem;      /* 16px on mobile */
        --spacing-equal:2rem;             /* 64px on mobile */
        --spacing-footer:2.5rem;            /* 32px on mobile */
        --big-img-content-space:1.25rem;  /* 20px on mobile */
        --small-img-content-space:0.5rem; /* 8px on mobile */
         --inner-spacing-extra: 2rem;
    }
}

@media(min-width:768px) and (max-width: 991px) {
    :root{
        --spacing-equal:3rem;             /* 64px on mobile */
    }
}

/* ============================================================
   1.1- COMMON TYPOGRAPHY CLASSES
   ============================================================ */
.title-h1{font-size:var(--size-76);line-height:1.35;letter-spacing:0.2%;font-weight:var(--fw-semi-bold);color:var(--text-primary)}
.title-h2{line-height:1.20;font-size:var(--size-36);font-weight:var(--fw-bold);color:var(--text-primary);}
.title-h3{font-size:var(--size-24)!important;line-height:1.30;font-weight:var(--fw-bold);color:var(--text-primary)}
.date-stats-title{font-size:var(--size-32)!important;line-height:32px;font-weight:var(--fw-semi-bold);color:var(--text-primary)}
.date-stats-content{font-size:var(--size-16);line-height:24px;font-weight:var(--fw-regular);color:var(--text-secondary)}
.view-faculty .announcement-right p,.view-faculty .contant_overview .content, .body-text{font-size:var(--size-16);font-weight:var(--fw-regular);color:var(--text-secondary);line-height:1.5}
.info p{font-size:var(--size-14);font-weight:var(--fw-semi-bold);line-height:1.6;color:var(--text-primary);    -webkit-line-clamp: 1 !important;}
.info span{font-size:var(--size-12);font-weight:var(--fw-regular);line-height:1.6;color:var(--text-tertiary)}
.nav-link-text{font-size:var(--nav-link-text);font-weight:var(--fw-regular);color:var(--text-primary)}
.image-text-title{font-size:var(--size-16);font-weight:var(--fw-semi-bold);color:var(--text-primary);line-height:1.5}
.image-text-details{font-size:var(--size-13);font-weight:var(--fw-regular);color:var(--text-tertiary);line-height:1.5}
.eyebrow-label{font-size:var(--size-13);font-weight:var(--fw-regular);text-transform:uppercase;color:var(--text-tertiary);display:block;line-height:1.5}
.error{font-size:var(--size-13);font-weight:var(--fw-regular);color:var(--accent);line-height:1.5}
.icon-size{font-size:var(--size-16) !important}
.breadcurm-title{font-size: var(--size-16);font-weight: 500;line-height: 24px;color: var(--text-secondary);}
.breadcurm-link{font-size: var(--size-14);font-weight: 400;line-height: 24px;color: var(--text-tertiary);}



/* ============================================================
   1.2- BORDER / DIVIDER UTILITIES
   ============================================================ */
.divider{border-bottom:1px solid var(--border-light)}
.divider-light{border-bottom:1px solid var(--text-secondary)}
.border-card{border:1px solid var(--border-light)}
.bg-section{background:var(--section-backgrounds)}

/* ============================================================
   1.3- COMMON IMAGE STYLE
   ============================================================ */
.image-style{overflow:hidden}
.image-style img, .image-style video{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s cubic-bezier(.19,1,.22,1),filter .6s ease;object-position:top}
.image-style img:hover{transform:scale(1.02)}
.small-image-style img{width: 50%;height: 100px;object-fit: contain;    object-position: left;}

/* ============================================================
   1.4- SPACING UTILITY CLASSES
   ============================================================ */
.equal-spacing{padding:var(--spacing-equal) 0}
.view-faculty .announcement-right p, .cta-spacing{margin:0 0 var(--spacing-cta)!important}
.label-spacing{margin:0 0 var(--spacing-label)!important}
.title-spacing{margin:0 0 var(--spacing-title)!important}
.spacing-text-btn{margin:0 0 var(--spacing-text-btn)!important}
.card-inner-spacing{padding:var(--spacing-card-inner-v) var(--spacing-card-inner-h)}
.dropdown-item-spacing{padding:10px 16px}
.footer-spacing{padding:var(--spacing-footer) 0}
.big_img_content_space_right{padding-right:var(--big-img-content-space)}
.big_img_content_space_left{padding-left:var(--big-img-content-space)}
.small_img_content_spacing{padding-bottom:var(--small-img-content-space)}
.inner-spacing-extra{padding-bottom: var(--inner-spacing-extra);}
.custom_inner_spacing_collapse{padding: var(--spacing-label) 0;}

/* ============================================================
  1.5- INPUT WIDTH HELPERS
   ============================================================ */
.showcase-input{max-width:165px!important;min-width:165px!important}
.campus-input{max-width:290px!important;min-width:290px!important}

/* common grid  */
.card_grid_two {display: grid;grid-template-columns: repeat(2, 1fr);align-items: start;gap: 48px 24px;}
.card_grid_three {display: grid;grid-template-columns: repeat(3, 1fr);align-items: start;gap: 48px 24px;}
.card_grid_four {display: grid;grid-template-columns: repeat(4, 1fr);align-items: start;gap: 48px 24px;}
.card_grid_five {display: grid;grid-template-columns: repeat(5, 1fr);align-items: start;gap: 48px 24px;}
.card_grid_six {display: grid;grid-template-columns: repeat(6, 1fr);align-items: start;gap: 48px 24px;}
.common_grid_max_three, .common_grid_max_four {
    display: grid;
    align-items: start;
    gap: 24px;
}


/* MAX 4 ITEMS */
.common_grid_max_four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.common_grid_max_four:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.common_grid_max_four:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.common_grid_max_four:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
}


/* MAX 3 ITEMS */
.common_grid_max_three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.common_grid_max_three:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.common_grid_max_three:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
}


/* ============================================================
   1.6- FONT FAMILY — NOTO SANS
   ============================================================ */
@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:100;src:url('../css/fonts/noto-sans-v36-latin-100.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:100;src:url('../css/fonts/noto-sans-v36-latin-100italic.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:200;src:url('../css/fonts/noto-sans-v36-latin-200.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:200;src:url('../css/fonts/noto-sans-v36-latin-200italic.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:300;src:url('../css/fonts/noto-sans-v36-latin-300.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:300;src:url('../css/fonts/noto-sans-v36-latin-300italic.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:400;src:url('../css/fonts/noto-sans-v36-latin-regular.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:400;src:url('../css/fonts/noto-sans-v36-latin-italic.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:500;src:url('../css/fonts/noto-sans-v36-latin-500.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:500;src:url('../css/fonts/noto-sans-v36-latin-500italic.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:600;src:url('../css/fonts/noto-sans-v36-latin-600.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:600;src:url('../css/fonts/noto-sans-v36-latin-600italic.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:700;src:url('../css/fonts/noto-sans-v36-latin-700.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:700;src:url('../css/fonts/noto-sans-v36-latin-700italic.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:800;src:url('../css/fonts/noto-sans-v36-latin-800.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:800;src:url('../css/fonts/noto-sans-v36-latin-800italic.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:900;src:url('../css/fonts/noto-sans-v36-latin-900.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:900;src:url('../css/fonts/noto-sans-v36-latin-900italic.woff2') format('woff2')}

/* ============================================================
   1.7- CONTAINER WIDTH OVERRIDES
   ============================================================ */
/* ≥ 768px — tablets and up */
@media(min-width:768px){.container,.container-md,.container-sm{max-width:100%;padding:0 80px}}
/* ≥ 992px — small desktops */
@media(min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:100%;padding:0 80px}}
/* ≥ 1200px — large desktops */
@media(min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:100%;padding:0 80px}}
/* ≥ 1600px — wide screens: still full-width with 80px padding */
@media(min-width:1600px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:100%;padding:0 80px}}

/* ============================================================
   1.8- BASE STYLES
   ============================================================ */
body{font-family:"Noto Sans",sans-serif;color:var(--text-primary);overflow-x:hidden;background:var(--surface)}

/* ============================================================
   2 - BUTTON STYLES
   .btn-pill     — base pill-shaped button (shared by all variants)
   .btn-primary-pill   — filled red (accent colour)
   .btn-secondary-pill — filled dark
   .btn-tertiary-pill  — outlined dark
   All share the same hover state for simplicity.
   ============================================================ */
.btn-pill{display:inline-flex;align-items:center;justify-content:space-between;padding:11px 16px;border-radius:999px;font-size:var(--size-14);font-weight:var(--fw-medium);text-decoration:none;transition:all .25s ease-in-out;cursor:pointer;line-height:1;width:fit-content;}
.btn-primary-pill{background:var(--accent);color:var(--section-backgrounds);border:1px solid var(--accent)}
.btn-primary-pill:hover,.btn-secondary-pill:hover,.btn-tertiary-pill:hover{background:var(--text-secondary);color:var(--surface);border-color:var(--text-secondary)}
.btn-secondary-pill{background:var(--text-primary);color:var(--section-backgrounds);border:1px solid var(--text-primary)}
.btn-tertiary-pill{background:transparent;color:var(--text-primary);border:1px solid var(--text-primary)}
.pill-with-icon span{display:flex;align-items:center}
.pill-with-icon{display:flex;align-items:center;gap:5px}
/* .btn-pill:focus, .btn-pill:focus-visible{    
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);} */
	
	.btn-pill:focus, .btn-pill:focus-visible{
    border-color: #030912;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(3 9 18 / 25%);
    }
.icon-wrapper{position:relative;width:16px;height:16px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.icon-first,.icon-second{position:absolute;transition:transform .35s ease}
.icon-first{transform:translateY(0)}
.icon-second{transform:translateY(120%)}
.btn-pill:hover .icon-first{transform:translateY(-120%)}
.btn-pill:hover .icon-second{transform:translateY(0)}
.download_btn {border-radius: 0;width: 40px;height: 40px;}
.download_btn span {font-size: var(--size-16) !important;color: var(--text-primary);}
.download_btn:hover span {color: var(--surface);}
.right-btn-bottom{margin-top: var(--spacing-text-btn);display: flex;justify-content: end;}

/* ============================================================
   3 - Header
   ============================================================ */
   .custom_sticky{position:sticky;top:0;z-index:100;width:100%}
.top-nav{position:sticky;width: 100%;background:var(--surface);padding:0;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.1)}

/* ============================================================
   3.1 - NAV DROPDOWN
   ============================================================ */
/* Wrapper must be relative to position dropdown correctly */
.custom-dropdown{position:relative}
.custom-dropdown .dropdown-menu{display:block;opacity:0;visibility:hidden;transform:translateY(7px)!important;transition:.35s ease;margin-top:0;border:0;border-radius:0;padding:0;width:auto;background:var(--section-backgrounds);left:0;top:100%;position:absolute!important;min-width: 235px;max-width: 235px}
.custom-dropdown .dropdown-menu li a{white-space: normal;}
/* Desktop: show dropdown on parent hover */
@media(min-width:992px){.custom-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(20px)}}
.dropdown-item:after{display:none}
.dropdown-item:hover,.dropdown-item:focus, .nav-item .footer-submenu li a:hover{background:var(--border-light) !important;color:var(--text-primary) !important}
.dropdown-item.active,.dropdown-item:active{background:var(--border-light);color:var(--text-primary) !important;}
@keyframes mobileDropdown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
/* Second-level submenu wrapper — relative for absolute child */
.dropdown-submenu{position:relative}
.submenu{list-style:none;margin:0;padding:0}
.dropdown-item.child-toggle{display:flex;align-items:center;gap:5px;transition:.3s ease-in-out}
.dropdown-item.child-toggle .child-arrow{transition:.3s ease-in-out}
.logo-icon-box{flex-shrink:0;display:flex;align-items:center;gap:5px;padding:16px 0}
.logo-icon-box img.logo-1{width:50px}
.logo-icon-box img{width:100%}
.logo-text-block{display:flex;flex-direction:column}
.top-links-nav{display:flex;align-items:center;width:100%;justify-content:end}
.top-links{border-right:1px solid var(--border-light);padding-right:20px;min-height:50px;padding-left:25px;display:flex;align-items:center}
.top-link.access-btn{font-size:var(--size-10);background:var(--section-backgrounds);color:var(--accent);padding:3px 6px;display:flex;align-items:center}
.top-link.access-btn:hover{background:var(--accent);color:var(--section-backgrounds)}
.other-links{display:flex;align-items:center;gap:12px;border:1px solid var(--border-light);padding:0 7px 2px 7px;border-top:0;border-radius:0 0 10px 10px}
.nav-links-grid{width:100%;display:flex;flex-direction:column;gap:5px;height:100%;align-items:end}
.logo-line1,.logo-line2{font-size:var(--size-12);font-weight:var(--fw-bold);color:var(--text-primary);letter-spacing:.02em}
.logo-line3{font-size:var(--size-10);font-weight:var(--fw-extra-bold);color:var(--accent);letter-spacing:.04em}
.top-link{font-size:var(--size-13);font-weight:var(--fw-medium);color:var(--text-primary);text-decoration:none;border-radius:4px;transition:color .2s,background .2s;white-space:nowrap}
.colors a:after{display:none}
.other-links a:nth-child(3):after{display:none}
.other-links a.top-link:after{display:none}
.top-link:hover{color:var(--accent);background:transparent}
.top-link .bi-lock-fill{font-size:var(--size-11)}
.dropdown-menu.dropdown-menu-end.show{padding:0;border:0}

/* nav link  */
.nav-item .dropdown-menu .footer-collapse {
    overflow-y: auto;
    max-height: 185px;    transition: none !important;
}

.nav-item .dropdown-menu .footer-collapse li a {
    font-size: var(--small-text);white-space: normal;
}
.nav-item .inner-list a{justify-content: space-between !important;}
/* ============================================================
   3.2- BOTTOM NAVBAR
   ============================================================ */
.bottom-nav{position:relative;z-index:99;align-items:center}
.bottom-nav .navbar-nav{gap:0}
.bottom-link{text-decoration:none;padding:0 0 6px 0;transition:color .2s,border-color .2s;white-space:normal;border-bottom:2px solid transparent;position: relative;}

.bottom-link::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 35px;
    height: 2px;
    background: var(--text-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.footer-child-menu a.footer-accordion-trigger.open-plus-minu.footer_text {
    color: var(--border-light) !important;
}

.footer-child-menu a.footer-accordion-trigger.open-plus-minu.footer_text.collapsed {
    color: var(--text-tertiary) !important;
}
.bottom-link:hover::before,
.bottom-link.show::before,
.bottom-link.active::before{
    transform: scaleX(1);
}
.btn-both{display:flex;align-items:center;gap:8px}
.nav-items{display:flex;align-items:center;gap:15px}
.bottom-link.dropdown-toggle::after{content:"keyboard_arrow_down";font-family:'Material Symbols Outlined';border:none;vertical-align:middle;color:var(--text-tertiary);font-size:var(--size-14);margin-left:5px;display:inline-block}
#mainNav .navbar-nav{gap:15px}
.bottom-link.submenu-toggle span{display:none}
.btn_both{display:flex;align-items:center;gap:8px}
.nav-items .btn-pill {font-size: 14px;}
/* ============================================================
   3.3- HEADER SEARCH
   ============================================================ */
.hero-search-wrap{position:relative;display:flex;align-items:center}
.search-toggle{cursor:pointer;transition:.4s ease;color:var(--text-primary);border:1px solid var(--border-light);padding:9px;border-radius:50px; width:40px;height:40px;min-width:40px;display: flex;align-items: center;justify-content: center;}
.hero-search-box{position:absolute;right:0;bottom:-89px;top:auto;transform:translateY(-50%) scaleX(0);transform-origin:right center;display:flex;align-items:center;gap:0;opacity:0;visibility:hidden;transition:.4s ease;z-index:9;background:var(--section-backgrounds);padding:10px}
.hero-search-box.active{opacity:1;visibility:visible;transform:translateY(-50%) scaleX(1)}
.hero-search-box button{position:absolute;right:11px;border-radius: 50%;width: 40px;height: 40px;min-width: 40px;}
.hero-search-box input{    max-width: 280px !important;
    min-width: 100%;height:40px;font-size:var(--size-14);border:1px solid var(--border-light);padding:0 15px;outline:none;border-radius:50px}

/* ============================================================
   4 - ACCESSIBILITY OFFCANVAS
   ============================================================ */
/* Grid layout for icon + label; small horizontal padding */
ul.icons-list-top-header li a,ul.icons-list-top-header li button{display:grid;border:0;padding:0 3px;align-items:center}
/* SVG icon size and fill colour — white to contrast dark header bg */
.icons-list-top-header li button svg,ul.icons-list-top-header li a svg,.icons-list-top-header li button svg path,ul.icons-list-top-header li a svg path{width:18px;height:18px;fill:var(--section-backgrounds)}
/* Transparent bg for dropdown trigger buttons inside icon list */
ul.icons-list-top-header li .dropdown button{background-color:transparent}
/* Inherit bg on active to prevent flicker */
ul.icons-list-top-header li .dropdown button:active{background-color:inherit}
/* Relative needed so absolute dropdown-cust-menu positions correctly */
ul.icons-list-top-header li .dropdown{position:relative}
/* Remove Bootstrap caret from icon list dropdowns and home-menu */
.bottom-nav.home-menu-items::after,ul.icons-list-top-header .dropdown-toggle::after{display:none}
/* Language/translate dropdown menu — fixed 8rem width, rounded */
ul.icons-list-top-header .dropdown-cust-menu{white-space:normal;border-radius:.5rem;width:8rem!important;min-width:unset!important;max-width:8rem!important;border:1px solid var(--border-light);background:var(--section-backgrounds);position:absolute!important;padding:0;left:-10px!important}
/* Hover/active states for language dropdown links */
ul.icons-list-top-header .gtranslate-wrapper a.gt-current-lang,ul.icons-list-top-header .gtranslate-wrapper a:hover,ul.icons-list-top-header li .dropdown a:active,ul.icons-list-top-header li .dropdown a:hover{background:#f1f1f1;color:#e7e7e7}
/* Each icon list item has small padding and right separator */
ul.icons-list-top-header li{padding:0 2px;position:relative;border-right:1px solid var(--border-light)}
/* Hover: fill SVG icon and path with accent colour */
.icons-list-top-header li button:hover svg,.icons-list-top-header li button:hover svg path,ul.icons-list-top-header li a:hover svg path{fill:var(--accent)}

/* ============================================================
   4.1- ACCESSIBILITY PANEL (OFFCANVAS CONTENT)
   ============================================================ */
/* Column-flex card layout with center alignment */
.inner-box-access{display:flex;flex-direction:column;align-items:center;transition:0.2s ease-in-out}
/* Hover: show white background behind card */
.inner-box-access:hover, .inner-box-access.active{background:var(--text-secondary);transition:0.2s ease-in-out}
.inner-box-access:hover .icons_ .material-symbols-outlined, .inner-box-access:hover p, .inner-box-access.active .icons_ .material-symbols-outlined, .inner-box-access.active p{color: var(--surface);}
/* 2-column grid for the control cards */
.grid-accessibility-ctrl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Card border, radius, gap and padding */
.inner-box-access{padding:8px 16px;border-radius:0px;border:1px solid var(--border-light);gap:4px;text-align:center}
/* Large icon inside each accessibility card */
.inner-box-access .icons_ .material-symbols-outlined{color:var(--text-tertiary);font-weight:299;font-size:var(--size-20)}
/* Label text below the icon */
.inner-box-access p{color:var(--text-tertiary);font-style:normal;font-weight:var(--fw-medium);line-height:normal;letter-spacing:.5px;font-size:var(--small-text);}
/* Remove focus ring from offcanvas close button */
.offcanvas-header button:focus,.offcanvas-header button:focus-visible{box-shadow:none!important;border:0!important;outline:0!important}
/* Active state — uses dark-mode var for filled bg */
div#offcanvasRight {width: 25%;}
.offcanvas_accsbility  .offcanvas-header{color: var(--text-primary);}


/* ============================================================
   4.2 - INVERT FILTER MODE
   ============================================================ */
.invert-filter{filter:invert(1)}
/* When inverted, active state bg becomes light grey */
.invert-filter .inner-box-access.active{background:#cecece}
.invert-filter .footer-bottom{background: var(--surface);}
.invert-filter .main-footer .footer-trigger, .invert-filter a.footer-accordion-trigger.footer_text, .invert-filter .main-footer .footer_text{color: var(--text-primary) !important;}
.invert-filter .inner-box-access:hover .icons_ .material-symbols-outlined, .invert-filter .inner-box-access:hover p, .invert-filter .inner-box-access.active .icons_ .material-symbols-outlined, .invert-filter .inner-box-access.active p{color: var(--text-primary);}
.invert-filter .inner-box-access:hover, .invert-filter .inner-box-access.active{background: var(--text-tertiary);}
.invert-filter .img-f img, .invert-filter .social_media a img {filter: grayscale(0%) brightness(0%);}
/* ============================================================
   4.3 - SATURATION FILTER MODE
   ============================================================ */
.saturation-filter{filter:saturate(0.5)}
.saturation-filter .inner-box-access.active .icons_ .material-symbols-outlined{color: var(--surface);}

/* ============================================================
   4.4 - HIDE IMAGES MODE
   ============================================================ */
.hide-img img{visibility:hidden!important;opacity:0!important}

/* ============================================================
   4.5 - DEFAULT CURSOR MODE
   Replaces cursor with a large custom SVG for users who need
   a bigger pointer target.
   ============================================================ */
/* Default/arrow cursor replacement */
.cursor-size{cursor:url('../images/cursor-size.svg'),auto!important}
/* Pointer cursor replacement for interactive elements */
.cursor-size a,.cursor-size button{cursor:url('../images/cursor-size-pointer.svg'),auto!important}

/* ============================================================
   4.6 - DARK CONTRAST MODE
   Dark mode is toggled by adding .dark-mode to <html> or :root.
   Overrides colours across the site to a dark theme.
   JS adds/removes this class via the accessibility panel.
   ============================================================ */
/* Dark mode CSS variable overrides — applied to :root when active */
:root.dark-mode {

    --text-primary: #F5F5F5;
    --text-secondary: #D1D1D1;
    --text-tertiary: #A0A0A0;

    --accent: #E24A4A;

    --border-light: #3A3A3A;

    --section-backgrounds: #181818;
    --surface: #222222;
}
/* Dark body background — near-black */
.dark-mode body, .dark-mode .footer-bottom{background:var(--surface)}
.dark-mode .btn-primary-pill, .dark-mode .btn-secondary-pill, .dark-mode .chatbot-send, .dark-mode #chatbot-toggle{background: var(--text-primary);color: var(--surface);border: transparent;}
.dark-mode .btn-primary-pill:hover, .dark-mode .btn-secondary-pill:hover, .dark-mode .chatbot-send:hover{background: var(--text-primary);color: var(--surface);}
.dark-mode .main-footer .footer-trigger, .dark-mode a.footer-accordion-trigger.footer_text, .dark-mode .main-footer .footer_text{color: var(--text-primary) !important;}


.dark-mode .custom-dropdown .dropdown-menu, .dark-mode .custom-select-dropdown .select-menu, .dark-mode div#offcanvasRight, .dark-mode .dropdown-menu.dropdown-menu-end.show{background: var(--surface);}
.dark-mode .other-links img{filter: invert(1);}
.dark-mode .control-view .owl-nav button:hover{color: var(--surface);}
.dark-mode #chatbot-toggle:hover img{filter: none;}
.dark-mode .chatbot-header, .dark-mode .chatbot-footer, .dark-mode .chatbot-quick-btn{background: var(--section-backgrounds);}
.dark-mode .chatbot-avatar, .dark-mode .chatbot-messages, .dark-mode .chatbot-input, .dark-mode .hero-search-box, .dark-mode .bottom-nav .navbar-collapse.show, .dark-mode .inner-box-access:hover{background: var(--section-backgrounds);}
.dark-mode .chatbot-msg-bubble, .dark-mode .chatbot-msg-avatar,  .dark-mode .hero-search-box input{background: var(--surface);color: var(--text-primary);}
.dark-mode .nav-items .navbar-toggler span, .dark-mode .offcanvas-header .btn-close{filter: invert(1);}
.dark-mode .mobile-menu-brand span, .dark-mode .mobile-menu-close, .dark-mode .offcanvas-title{color: var(--text-primary);}
.dark-mode .inner-box-access:hover, .dark-mode .inner-box-access.active{background:var(--text-primary);transition:0.2s ease-in-out}
.dark-mode .inner-box-access:hover .icons_ .material-symbols-outlined, .dark-mode .inner-box-access:hover p, .dark-mode .inner-box-access.active .icons_ .material-symbols-outlined, .dark-mode .inner-box-access.active p{color: var(--surface);}
.dark-mode .logo-icon-box img, .dark-mode .mobile-menu-brand img{filter: grayscale(100%) brightness(1000%);}
.dark-mode .breadcrumb-item+.breadcrumb-item::before{color: var(--text-tertiary);}
.dark-mode .breadcrumb-item.active{color: var(--text-tertiary);}
.dark-mode .footer-child-menu a.footer-accordion-trigger.open-plus-minu.footer_text{color: var(--text-primary) !important;}
.dark-mode .main-footer .footer-submenu .footer_text, .footer-child-menu a.footer-accordion-trigger.open-plus-minu.footer_text.collapsed{color: var(--text-tertiary) !important;}
.dark-mode .breadcrumb-item a{color: var(--text-secondary);}

/* ============================================================
   4.7 - HIGHLIGHT LINKS MODE
   Makes all links bright yellow on black for maximum visibility.
   Used by visitors with visual impairments.
   ============================================================ */
/* All links (except skip link): yellow text on black bg */
/* .highlight-link a, .highlight-link .custom-select-dropdown .select-menu, .highlight-link .custom-select-dropdown .select-menu li, .highlight-link .custom-select-dropdown .select-menu li.active, .highlight-link .search-toggle, .highlight-link .inner-box-access .icons_ .material-symbols-outlined, .highlight-link .inner-box-access p{color:var(--section-backgrounds)!important;  background-color:var(--text-primary)!important}
.highlight-link button, .highlight-link .footer-child-menu a.footer-accordion-trigger.open-plus-minu.footer_text.collapsed, .highlight-link .footer-child-menu a.footer-accordion-trigger.open-plus-minu.footer_text, .highlight-link .footer-submenu li a, .highlight-link .footer-submenu li a:hover{color:var(--section-backgrounds)!important;  background-color:var(--text-primary)!important;border: var(--text-primary);}
.highlight-link .inner-box-access.active .icons_ .material-symbols-outlined, .highlight-link .inner-box-access.active p{color: var(--section-backgrounds);}
.highlight-link a img, .highlight-link button img, .highlight-link .social_media a img{filter: invert(1) !important}
.highlight-link .btn-close-white {
    filter: brightness(70) saturate(200%) invert(677%) sepia(296%) saturate(1388%) hue-rotate(15deg);
}
.highlight-link .global-campus-section .campus-image-wrap img, .highlight-link .gallery-item img{filter: none !important;}
.highlight-link .offcanvas-header .btn-close{background-color: transparent !important; }
.highlight-link .gallery-item{background: transparent !important;}
.highlight-link .gallery-item p, .highlight-link .gallery-item span{color:var(--section-backgrounds)!important;  background-color:var(--text-primary)!important}
.highlight-link .dropdown-item.active, .highlight-link .dropdown-item:active{color:var(--section-backgrounds) !important;  }
.highlight-link .dropdown-item.hover, .highlight-link .dropdown-item:hover, .highlight-link .accordient_custom .footer-accordion-trigger{color:var(--section-backgrounds) !important;  background-color:var(--text-primary)!important}
.highlight-link .main-footer .footer_text{text-decoration: underline;}
.highlight-link .main-footer .footer_text span{text-decoration: none;} */
/* ============================================================
   5 - BANNER / HERO CAROUSEL
   ============================================================ */
.custom-login-o{position:absolute;top:50%;transform:translateY(-50%);right:0;width:100%}
.gallery-slider .carousel-item{display:flex;flex-direction:column}
.gallery-slider .carousel-item img,.gallery-slider .carousel-item video, .inner_banner_style img{width:100%;aspect-ratio:2.5/1;object-fit:cover}
.carousel-controls{position:absolute;right:0;bottom:0;z-index:9999;display:flex;gap:10px}
.carousel-control-prev,.carousel-control-next{position:static;width:auto;height:auto;opacity:.6!important;border-radius:50%}
.carousel-control-prev:hover,.carousel-control-next:hover{opacity:1!important}
.carousel-control-prev-icon,.carousel-control-next-icon{width:20px;height:13px;filter:invert(1)}
.indicator{display:flex;align-items:center;gap:20px;position:absolute;bottom:22px;right:6%}
.banner-content p{max-width:65%}
.hero-section-control-text{display:flex;justify-content:space-between;align-items:center;gap: 40px;}
.hero-slider-custom video {width: 100%;height: 100%;object-fit: cover;display: block; pointer-events: none; /* Prevent Safari's play button */
}
/* ============================================================
   6 - FEATURED WORK / STUDENT PROJECT CARDS
   ============================================================ */
.gallery-top p{overflow:hidden;text-overflow:ellipsis;display:-webkit-box !important;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.profile-details{display:flex;align-items:center;gap:8px}
.profile-image img{width:40px;height:40px;object-fit:cover;border-radius:50%}
.right-content{display:flex;flex-direction:column}
.border-card .title-h3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-height: 93px; */
	padding-bottom:10px;
}
.student-project .border-card{height: 100%;}

/* ============================================================
   7 - STUDENT SHOWCASE / GALLERY SECTION
   ============================================================ */
   .arrow-right {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
}.owl-carousel {
    width: 100% !important;
}
/* .right-arrow-overlay .gallery-image {
    position: relative;
}

.right-arrow-overlay .gallery-image span {
    position: absolute;
    bottom: 24px;
    right: 14px;
}
.right-arrow-overlay .material-symbols-outlined{background:var(--text-primary);color:var(--section-backgrounds);border:1px solid var(--text-primary);display:flex;align-items:center;padding:11px;border-radius:50%;transition:.2s ease-in-out;font-size: var(--size-16);width: 40px;height: 40px;justify-content: center;}
.right-arrow-overlay .material-symbols-outlined:hover{background:var(--text-secondary);border:1px solid var(--text-secondary);transition:.2s ease-in-out;} */
.flex-custom{display:flex;align-items:end;justify-content:space-between}
.flex-custom{display:flex;align-items:end;justify-content:space-between}
.gallery-tabs{gap:8px}
.custom-select-dropdown{position:relative;display:inline-flex;flex-wrap:nowrap}
.custom-select-dropdown .select-toggle{background:var(--surface);display:flex;align-items:center;justify-content:space-between;color:var(--text-tertiary);border:1px solid var(--border-light);border-radius:50px;gap:8px;min-width:fit-content;width:-webkit-fit-content;padding:8px 15px;cursor:pointer;transition:border-color .2s;text-align:start;}
.custom-select-dropdown .select-toggle span.selectedShowcase, .custom-select-dropdown .select-toggle span#selectedCampus{display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;    overflow: hidden;text-overflow: ellipsis;}
.custom-select-dropdown .select-toggle span:last-child{transition:.4s ease;pointer-events:none}
.custom-select-dropdown .select-toggle.active span:last-child{transform:rotate(180deg)}
.custom-select-dropdown .select-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;max-width:200px; background:var(--section-backgrounds);list-style:none;padding:0;margin:0;display:none;z-index:2;overflow:hidden}
.custom-select-dropdown .select-menu.active{display:block}
.custom-select-dropdown .select-menu li{cursor:pointer;transition:background .15s,color .15s;overflow-wrap: break-word;}
.custom-select-dropdown .select-menu li:hover,.custom-select-dropdown .select-menu li.active{background:var(--border-light);color:var(--text-primary)}

/* ============================================================
   7.1- showcase filter
   ============================================================ */
.form-control:hover,.form-select:hover{box-shadow:none}
input[type="date"]:focus{color:transparent!important}
.form-control,.form-select{border:1px solid var(--border-light);border-radius:0px;font-size:var(--size-14);padding:7px 8px;font-weight:var(--fw-regular);color:var(--text-tertiary);background:var(--surface)}
.form-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='14px' viewBox='0 -960 960 960' width='14px' fill='%23767676'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:14px!important;padding-right:40px!important}
@media screen and (min-width:767px){
input[type="date"]{color:transparent;max-width:40px!important;min-width:40px!important;width:40px!important;height:40px!important;text-align:center;justify-content:center;display:flex;padding:0}
.date-field{position:relative}
.date-field input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;width:100%;height:100%;cursor:pointer}
.date-field .material-symbols-outlined{position:absolute;left:50%;transform:translate(-50%,-50%)!important;top:50%;pointer-events:none;color:var(--text-tertiary)}
}

.hero-search-box.showcase-search{position: static;}
.hero-search-box.showcase-search {
    position: static;
    opacity: 1;
    visibility: visible;
    background: transparent;
        transform: translateY(0);
        padding: 0;
}
.hero-search-box .btn-pill {
    justify-content: center;
}
.hero-search-box.showcase-search .btn-pill
 {
    position: absolute;
    right: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    min-width: 40px;
}
.hero-search-box.showcase-search input {
    width: 340px;
    padding-right: 50px;
}

/* ============================================================
   8- EVENT SECTION
   ============================================================ */
.venue-details{display:flex;gap:20px;    justify-content: space-between;}
.event-project .gallery-top p{-webkit-line-clamp:2}
/* .date-event{display:inline-block;text-align:start;border:1px solid var(--border-light);padding:18px} */

/* ============================================================
   8.1- CAROUSEL / OWL CONTROLS
   ============================================================ */
.control-view{display:flex;align-items:center;gap:10px;justify-content:space-between}
.control-view .owl-nav{display:flex;gap:4px}
.control-view .owl-nav button{background:var(--surface);display:flex;align-items:center;border:1px solid var(--border-light);color:var(--text-primary);padding:11px;border-radius:50%;transition:.2s ease-in-out}
.control-view .owl-nav button:hover{background:var(--text-primary);color:var(--section-backgrounds)}

/* ============================================================
   9 - CAMPUS SECTION LAYOUT
   ============================================================ */
.campus-dropdown{position:relative;width:auto;display:flex;flex-wrap:nowrap}
.campus-content.gallery-top{padding-bottom:0}
.campus-stats{position:relative;bottom:0;left:0;width:100%;z-index:1}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
}
.stats-item{padding:0;display:flex;align-items:start;flex-direction:column}
.campus-image-wrap{height:100%;overflow:hidden}
.campus-image-wrap img, .campus-image-wrap video, .campus-image-wrap iframe{width:100%;aspect-ratio:3/1;object-fit:cover;transition:1s cubic-bezier(.19,1,.22,1);object-position:bottom}
.global-campus-section .campus-image-wrap img:hover{transform:scale(1.02)}



/* ============================================================
   10- GLOBAL CONNECT
   ============================================================ */
.gallery-top.content-projects button{width:fit-content}
.flex-direction{height:100%}
.global-connect-box{position:absolute;left:0;bottom:0;background:var(--text-primary);padding:18px 40px;width:350px;z-index:5}
.announcement-links{display:flex;flex-direction:column}


/* ============================================================
   11 - ALUMNI
   ============================================================ */
.journey-content{display:flex;flex-direction:column}

/* ============================================================
   12 - FOOTER
   ============================================================ */
.footer-bottom .container {max-width: 85%;}
.padding-custom_left {padding-left: 90px !important;}
.footer-mega-links ul{margin:0;padding:0;list-style:none;justify-content:start;display:flex;flex-direction:column;    align-items: start !important;    text-align: start;}
.footer-mega-links {margin-top: 20px;}
.main-footer .footer_text{color:var(--border-light);font-weight: var(--fw-light);}
.main-footer .footer-trigger, a.footer-accordion-trigger.footer_text.mobile{color: var(--surface) !important;font-weight: var(--fw-semi-bold);}
.footer-mega-links a:hover,.footer-policy-links a:hover,.main-footer .footer_text a:hover{color:var(--section-backgrounds)}
.footer-submenu li a {color: var(--text-tertiary) !important;}
.footer-submenu li a:hover{color: var(--surface) !important;}
.footer_text{font-size:var(--footer-text);font-weight:var(--fw-regular);color:var(--text-primary)}
.flex-links{display:flex;justify-content:space-between;align-items:flex-start;gap:30px}
.inner-list{flex:1}
.inner-list a{width:100%;display:flex;align-items:center !important;gap:8px;justify-content:start;text-align: start !important;}
.inner-list a span{font-size:var(--size-16)}
.footer-links .inner-list>a{color:var(--section-backgrounds);display:flex;align-items:center;justify-content:center;gap:10px}
.footer-links .inner-list>a span{color:var(--text-tertiary);transition:.3s;font-size:var(--size-18)}
.footer-bottom{background:var(--text-primary)}
.img-f{text-align:center;width:100%}
.footer-bottom-wrap{text-align:center;justify-content:center;display:flex;flex-direction:column;gap:0}
.footer-policy-links{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.footer-policy-links a:not(:last-child)::after{content:"|";margin-left:18px;color:rgba(255,255,255,.4)}
.footer-mobile-links{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.footer-accordion-trigger{display:flex;align-items:center;justify-content:center;gap: 8px; width:100%;text-decoration:none}
.gallery-top .accordient_custom .footer-accordion-trigger {
    justify-content: space-between;
}
.gallery-top .footer-accordion-trigger {
    display: flex !important;
}
.accordion-icon{transition:transform .3s ease}
.footer-accordion-trigger[aria-expanded="true"] .accordion-icon{transform:rotate(180deg)}
.social_media {display: flex;align-items: center;justify-content: center;gap: 8px;}
.social_media a img {width: 30px;height: 30px;padding: 7px;filter: invert(1);transition: 0.2s ease-in-out;}
.social_media a img:hover{transform: translateY(-2px);transition: 0.2s ease-in-out;}
#back-to-top{display:flex;align-items:center;gap:4px;font-size: var(--size-13);color: var(--text-tertiary);}
#back-to-top:hover{color: var(--section-backgrounds);}
.footer-collapse {
    width: 100%;
}

.footer-submenu {
    margin: 0 !important;
    align-items: center !important;
}

.footer-submenu li {
    width: 100%;
}

.footer-collapse.collapsing {
    overflow: hidden;
    transition: height 0.35s ease;
}
/* Default: Plus show */
.footer-accordion-trigger.open-plus-minu .icon-add {
    display: inline-block;
}

.footer-accordion-trigger.open-plus-minu .icon-remove {
    display: none;
}

/* Open: Minus show */
.footer-accordion-trigger.open-plus-minu[aria-expanded="true"] .icon-add {
    display: none;
}

.footer-accordion-trigger.open-plus-minu[aria-expanded="true"] .icon-remove {
    display: inline-block;
}



/* ============================================================
   13 - CHATBOT WIDGET
   ============================================================ */
#chatbot-toggle{position:fixed;bottom:1rem;right:0.8rem;z-index:99;opacity:0;visibility:hidden;transform:translateY(20px);width:58px;height:58px;border-radius:50%;background:var(--section-backgrounds);border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;transition:.35s cubic-bezier(.4,0,.2,1)}
#chatbot-toggle.visible{opacity:1;visibility:visible;transform:translateY(0)}
#chatbot-toggle:hover{background:var(--text-primary);transform:scale(1.02)}
#chatbot-toggle img{width:28px;height:28px}
/* #chatbot-toggle img:nth-child(2){width:28px;height:28px} */
#chatbot-toggle:hover img{filter:invert(1)}
#chatbot-toggle .chat-close{display:none}
#chatbot-toggle.open .chat-icon{display:none}
#chatbot-toggle.open .chat-close{display:block}
#chatbot-toggle .chat-pulse{position:absolute;top:-3px;right:-3px;width:14px;height:14px;background:var(--accent);border-radius:50%;border:2px solid var(--border-light);animation:pulse-ring 2s infinite}
@keyframes pulse-ring{0%{transform:scale(1);opacity:1}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1);opacity:0}}
#chatbot-window{position:fixed;bottom:5rem;right:2rem;z-index:1000;width:360px;background:var(--section-backgrounds);border-radius:8px;box-shadow:0 20px 60px rgba(15,14,12,.22),0 0 0 1px rgba(200,71,43,.15);display:flex;flex-direction:column;-webkit-transform:scale(.88) translateY(16px);transform:scale(.88) translateY(16px);will-change:transform;transform-origin:bottom right;opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s;max-height:450px}
#chatbot-window.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}
.chatbot-header{background:var(--text-primary);color:var(--section-backgrounds);padding:1.25rem 1.5rem;border-radius:8px 8px 0 0;display:flex;align-items:center;gap:1rem}
.chatbot-avatar{width:40px;height:40px;border-radius:50%;background:var(--section-backgrounds);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--border-light)}
.chatbot-avatar svg{width:18px;height:18px;fill:var(--text-primary)}
.chatbot-header-name{font-size:var(--size-16);font-weight:var(--fw-semi-bold);line-height:1.2}
.chatbot-header-status{font-size:var(--size-11);color:rgba(255,255,255,.5);display:flex;align-items:center;gap:.3rem;margin-top:.1rem}
.chatbot-header-status::before{content:'';width:6px;height:6px;background:#4ade80;border-radius:50%}
.chatbot-header-badge{margin-left:auto;background:rgba(200,71,43,.25);border:1px solid rgba(200,71,43,.4);color:#ff8a70;font-size:var(--size-10);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;padding:.2rem .55rem;border-radius:20px}
.chatbot-messages{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;background:#f7f4ef}
.chatbot-msg{display:flex;gap:.75rem;align-items:flex-start}
.chatbot-msg-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:var(--text-primary);display:flex;align-items:center;justify-content:center}
.chatbot-msg-avatar svg{width:14px;height:14px}
.chatbot-msg-bubble{background:var(--section-backgrounds);border:1px solid var(--border-light);border-radius:0 12px 12px 12px;padding:.85rem 1rem;max-width:260px;font-size:var(--size-13);color:var(--text-secondary);line-height:1.6}
.chatbot-msg-time{font-size:var(--size-10);color:#7a7163;margin-top:.35rem}
.chatbot-quick-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.chatbot-quick-btn{font-size:var(--size-12);background:var(--section-backgrounds);border:1.5px solid var(--border-light);color:var(--text-primary);padding:.35rem .8rem;border-radius:20px;transition:.35s cubic-bezier(.4,0,.2,1)}
.chatbot-quick-btn:hover{background:var(--text-primary);color:var(--section-backgrounds)}
.chatbot-footer{padding:1rem 1.25rem;border-top:1px solid var(--border-light);background:var(--section-backgrounds);border-radius:0 0 8px 8px}
.chatbot-input-row{display:flex;align-items:center;gap:.6rem}
.chatbot-input{flex:1;border:1.5px solid var(--border-light);border-radius:24px;padding:.6rem 1rem;font-size:var(--size-13);color:var(--text-primary);outline:none;background:var(--section-backgrounds);transition:border-color .2s}
.chatbot-input:focus{border-color:var(--text-primary)}
.chatbot-send{width:36px;height:36px;border-radius:50%;background:var(--text-primary);color:var(--section-backgrounds);display:flex;align-items:center;justify-content:center;transition:.35s cubic-bezier(.4,0,.2,1);border:none;flex-shrink:0}
.chatbot-send:hover{background:var(--accent)}
.chatbot-send svg{width:15px;height:15px}
.chatbot-footer-note{font-size:var(--size-10);color:var(--text-secondary);text-align:center;margin-top:.6rem}
.chatbot-label{position:absolute;right:68px;bottom:14px;background:var(--text-primary);color:var(--section-backgrounds);font-size:var(--size-12);font-weight:var(--fw-semi-bold);letter-spacing:.06em;padding:.35rem .8rem;border-radius:20px;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.2);animation:fadeInLabel .5s 1.5s both}
@keyframes fadeInLabel{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

/* ============================================================
   14 - ug programes
   ============================================================ */
   .breadcurm-title {
    display: none;
}
.breadcurm {display: flex;flex-direction: column;align-items: start;}
.content_hero_border {padding: 17px 0;}
ol.breadcrumb {justify-content: start;margin: 0;}
.item-key-highlight
 {
    background: var(--section-backgrounds);
    border: 1px solid var(--border-light);
    padding: 32px 20px;
    height: 100%;
}


/* 15 - ug programes details  */
.accordient_custom .footer-accordion-trigger {
    justify-content: space-between;
}
.accordient_custom .divider{padding: 8px 0;}
.accordient_custom .divider:nth-child(1){border-top: 1px solid var(--border-light);}
.accordient_custom .divider .inner-list{padding: 12px 0;}
.fashion-img{
    float:left;
    width:48%;
    margin:0 44px 0px 0;
}
.fashion-img{overflow:hidden}
.fashion-img img{float:left;
    width:100%; height: 415px;aspect-ratio:4/3;object-fit:cover;transition:transform 1s cubic-bezier(.19,1,.22,1),filter .6s ease;object-position:top}
.fashion-img img:hover{transform:scale(1.02)}
.content::after{
    content:"";
    display:block;
    clear:both;
}
@media screen and (max-width: 1800px) and (min-width: 1380px) {
  .fashion-img img{height: 550px;} 
}
@media screen and (max-width: 2200px) and (min-width: 1801px) {
  .fashion-img img{height: 650px;} 
}
@media screen and (min-width: 2201px) {
  .fashion-img img{height: auto;} 
}
@media screen and (max-width: 767px) {
   .fashion-img img{height: auto; width: 100%;} 
   .fashion-img{width: 100%;margin: 0;}
}
@media screen and (max-width: 991px) and (min-width: 768px) {
   .fashion-img img{height: auto;} 
}

.list-style {
    padding-left: 18px;
    gap: 34px;
}
.list-style li {
    list-style: disc;
}
.flex_custom {display: flex;flex-wrap: wrap;gap: 24px;align-items: center;}
.creative-future button{border: 1px solid var(--border-light);color: var(--text-tertiary);}
.brand-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.brand-item {
    height: 90px;
    padding: 4px 15px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    flex-shrink: 0;
}

.brand-item img {
    height: 80px;
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* 16 - Faculty details  */
.contant_overview .content {
    overflow: hidden;
    max-height: 90px; /* 3 lines */
    transition: max-height .5s ease;
}
.inner_page_links_btn {
    padding: 8px 10px;
    font-size: var(--size-15);
    border-radius: 50px;
    color: var(--text-primary );
        white-space: nowrap;

}
.inner_page_links_btn:hover, .inner_page_links_btn.active {
    background: var(--text-tertiary);
    color: var(--section-backgrounds);
}
.inner-links-wrapper {
    position: sticky;
    top: var(--header-height);
    z-index: 99;
}
.flex_custom_inner_links {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pill-with-icon.active span
 {
    rotate: 90deg;
}
.flex_details .info {
    display: flex;
    flex-direction: row;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    gap: 20px;
    height: 100%;
}
.flex_details .info:last-of-type {
    border: 0;
}
.flex_details .info p {
    width: 150px;
    min-width: 150px;
}
.extra_space_width .info p {
    width: 300px;
    min-width: 300px;
}
.flex_details .info span {
    word-break: break-word;
}
.publication-item {
    background: var(--surface);
    border: 1px solid var(--border-light);
    padding: 32px 20px;

}
.not-elipes .publication-item span {-webkit-line-clamp: none;}
.space-btwn-for-btn .publication-item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.space-btwn-for-btn .publication-item button {
    width: fit-content;
}
.publication-item span{
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical
}
.facilty-info {
    border-left: 1px solid var(--border-light);
}
.info .btn-pill span{color: var(--section-backgrounds) !important;}
.parent-grid .info {
    display: flex;
    gap: 16px;
    align-items: end;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}
.custom-flex .info-child{
        display: flex;
    gap: 16px;
    align-items: start;
}
.custom-flex{
            display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
}
.child-content .info:nth-last-child(1){padding-bottom: 0;}
.parent-grid .info:nth-last-child(1) {
    border: 0;
}

/* 17 - admissions  */
 .publication-item:hover {
    background: var(--text-tertiary);
    transition: 0.2s ease-in-out;
}
 .publication-item {
    transition: 0.2s ease-in-out;
}
 .publication-item:hover .eyebrow-label,  .publication-item:hover span,  .publication-item:hover span a{color: var(--section-backgrounds);} .publication-item:hover p{color: var(--surface);}
.prospects_card {
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: var(--spacing-card-inner-v) 20px;
    background: var(--surface);
    border: 1px solid var(--border-light);
        height: 100%;
}
.contact-info-details {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-info-details span, .contact-info-details a {
    font-size: var(--size-14);
    color: var(--text-tertiary);
    font-weight: var(--fw-medium);
    word-break: break-word;
}
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* research  */
.research-phd button.form-control{background: var(--section-backgrounds);}
.spacing-inner-sectin-page{padding: var(--inner-spacing-extra) 0;}
/* table css  */
.custom-table {
    width: 100%;
     border-spacing: 0 6px; 
    border-collapse: separate;
}

.custom-table thead th {
    background: var(--border-light);
    color: var(--text-primary);
    font-size: var(--size-14);
    font-weight: var(--fw-bold);
    padding: 20px 20px;
}
.custom-table tbody td:first-child {
border-left: 1px solid var(--border-light);
}
.custom-table tbody td:last-child {
border-right: 1px solid var(--border-light);
}
.custom-table tbody td {
    padding: 20px 20px;
    color: var(--text-primary);
    font-size: var(--size-14);
    line-height: 1.5;
    vertical-align: top;
    border-bottom: 1px solid var(--border-light);
    border-top: 1px solid var(--border-light);
    background: var(--surface);
}
.more-card{
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .4s ease, opacity .3s ease;
}
/* pagination css  */
.pagination .owl-nav button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.right-btn-bottom
 {
    justify-content: end;
}
.pagination .owl-nav button.active {
    background: var(--text-primary);
    color: var(--surface);
}
.pagination .owl-nav {
    flex-wrap: wrap;
    justify-content: center;
}
/* placement  */
#partner-us .prospects_card{justify-content: start;}
.company-list.card_grid_two, .company-list.card_grid_three {gap: 0 24px;}
.bg-section .alphabet-filter{background: var(--surface);}
.alphabet-filter {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    align-items: center;
    background: var(--section-backgrounds);
    position: relative;
    padding: 8px 24px;
}

.alphabet-filter button {
    font-weight: var(--fw-medium);
    font-size: var(--size-14);
    color: var(--text-tertiary);
    border: 0;
    padding: 0 4px;
    transition: .3s;
    border-bottom: 2px solid transparent;
    position: relative;
        background: transparent;
}
.alphabet-filter button:after{
    content: "";
    background: var(--text-tertiary);
    width: 1px;
    height: 100%;
    position: absolute;
    right: -10px;
    top: 0;
}
.alphabet-filter button:nth-last-child(1):after{display: none;}
.alphabet-filter button.active, .alphabet-filter button:hover {border-bottom: 2px solid var(--text-tertiary);}
.company-list li {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}

/* nift advantage  */

.timeline .publication-item span{
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box !important;-webkit-line-clamp:none;-webkit-box-orient:vertical
}
a[x-apple-data-detectors],
a[x-apple-data-detectors]:link,
a[x-apple-data-detectors]:visited {
    color: inherit !important;
    text-decoration: none !important;
    font: inherit !important;
}
/* conferences  */

.image-style-small-profile img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 0px;
}
.flex-custom-confe{display: flex;align-items: start;gap: 16px;}

/* academic patnerships  */
.inner-logo-image img {
    min-height: 100px;
    max-height: 100px;
    object-fit: contain;
    background: #ffffff;
    padding: 8px;
}
.inner-logo-image {
    width: 100%;
}
.space-btn-btn-section-cutom{display: flex;flex-direction: column;justify-content: space-between;height: 100%;}
.space-btn-btn-section-cutom button{width: fit-content;}

/* student project details  */
#popup-carousel .owl-item{
    opacity:.4;
    transform:scale(.8);
    transition:.4s;
}

#popup-carousel .owl-item.center{
    opacity:1;
    transform:scale(1);
}

#galleryModal{
    background:rgba(0, 0, 0, 0.945);
}
.popup-item.mobile_spacing {
    height: 70vh;
}
.popup-item img, .popup-item video{
    width:100%;
    transition:.4s;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

#popup-carousel .owl-item{
    opacity:.35;
    transform:scale(.8);
    transition:.4s;
}

#popup-carousel .owl-item.center{
    opacity:1;
    transform:scale(1);
}

#popup-carousel .owl-nav{
display: none;
}
#image-collection-carousel .image-style {
    cursor: pointer;
}
.footer-collapse .divider:nth-last-child(1) {
    border: 0;
}
.footer-collapse .custom_inner_spacing_collapse
 {
    padding-bottom: 0;
}

/* life at nift  */
.gallery-album{
    position:relative;
    cursor:pointer;
    overflow:hidden;
}

.album-count{
    position:absolute;
    top:15px;
    right:15px;
    background:rgba(0,0,0,.65);
    color:#fff;
    padding:8px 12px;
    border-radius:30px;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    z-index:2;
}

/* Site Map Page css Start */
.sitemap h2{display:none}
.sitemap ul{list-style-type:none;padding:0;margin:0}
.sitemap ul li{padding:0px 10px;list-style:none;margin-bottom:10px;}
.sitemap ul li a:before{content: "";background: var(--text-primary);width: 8px;height: 8px;display: flex;border-radius: 100%;}
.sitemap ul li a{font-size:var(--size-14);color:var(--text-primary);display: flex;width:100%;padding: 11px 0;position: relative;align-items: center;gap: 8px;}
.sitemap ul li a:hover{text-decoration:underline;color:var(--text-primary)}
.sitemap ul li ul{padding-left:20px}
.sitemap ul li.leaf a {font-weight: 400 !important;}.sitemap ul li.expanded a {font-weight: 600;}
/* Site Map Page css End */

/* feedback  */
.form-group {
    margin-bottom: 10px;
}
.form-group label {
    margin-bottom: 4px;
    text-transform: capitalize;
}
.capture-flex {
    display: flex;
    align-items: start;
        gap: 12px;
}
.capture-flex .form-group:nth-child(2) {
    flex: 1;
}
.flex-capture img {width: 170px;height: 40px;}
.flex-capture a{color: var(--text-secondary);display: flex;}
.capture-flex .form-group:nth-child(2) {
    flex: 1;
}

.flex-capture {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* internation confrance  */
.confrance-h .prospects_card{height: auto;}

/* top language icons css   */
.bhashini-plugin-container .bhashini-dropdown-btn-icon{display:block}
.bhashini-plugin-container .bhashini-dropdown-content{border:0px;right:0!important;left:auto!important}
.bhashini-plugin-container .bhashini-dropdown-content li{padding:10px 16px!important;font-size:var(--nav-link-text);font-weight:var(--fw-regular);color:var(--text-primary)}
.dark-mode .bhashini-plugin-container .bhashini-dropdown-content{border-color:#222222;background:#222222}
.dark-mode .bhashini-plugin-container .bhashini-dropdown-content li:hover{background-color:#3A3A3A}
.dark-mode .bhashini-plugin-container .bhashini-branding{background-color:#333}
.dark-mode .bhashini-plugin-container .bhashini-dropdown-content>div{color:#fff}
.dark-mode .bhashini-plugin-container .bhashini-dropdown-content div:hover{background-color:#3A3A3A}



/* ============================================================
   18 - RESPONSIVE STYLES
   ============================================================ */

/* ── ≤ 462px — Very small phones ───────────────────────── */
@media screen and (max-width:462px){
   /* showcase-filter  */
   .hero-search-box.showcase-search, .hero-search-box.showcase-search input{width: 100%;}
    /* Chatbot toggle shifts left so it doesn't cover scroll */
    #back-to-top{right:1.6rem}
    #chatbot-toggle{right:1rem}
    /* Narrower, shorter chat window on tiny screens */
    #chatbot-window{width:80vw;max-height:450px}
    /* Reduce chatbot header/message/footer padding on small screens */
    .chatbot-header{padding:1.25rem 0.5rem}
    .chatbot-messages{padding:0.5rem}
    .chatbot-footer{padding:1rem 0.5rem}
    /* ug programe details  */
    .brand-item img{width:100%}
    #faculty .campus-dropdown .custom-select-dropdown, #faculty .campus-dropdown .custom-select-dropdown button {
        width: fit-content;
        min-width: 130px !important;
        max-width: 130px !important;
}
.flex-capture img{    width: 110px;}
}

/* ── ≤ 767px — Mobile phones ────────────────────────────── */
@media screen and (max-width:767px){
    /* Scale down typography for smaller screens */
    .title-h1{font-size:var(--size-42);word-break: break-word;}
    .title-h2{font-size:var(--size-30);    word-break: break-word;}
    .title-h3{font-size:var(--size-20)!important}
    .date-stats-title{font-size:var(--size-24)!important}
    /* Keep body and image-title at base size */
    .body-text,.image-text-title{font-size:var(--size-16)}
    /* Slightly smaller detail and info text */
    .image-text-details,.info p{font-size:var(--size-14)}
    /* Smallest text scale */
    .info span,.eyebrow-label,.error{font-size:var(--size-12)}
    /* Hide desktop logo box — replaced by mobile logo */
    .logo-icon-box{display:none}
    /* Mobile logo image size */
    .logo_mobile img{width:60px}
        .top-links-nav {
        display: none;
    }
    /* Search box overlays in the gallery header row */
    .gallery-top.flex-custom .hero-search-wrap{position:absolute;top:10px;right:0px}
    /* Nav items: space-between on mobile, add top padding, allow wrap */
    .nav-items{justify-content:space-between!important;padding-top:10px;gap:10px 0;flex-wrap:wrap}
    /* Banner text goes full width on mobile */
    .banner-content p{max-width:100%}
    /* Hide calendar icon label on mobile (input only) */
    .date-field span{display:none}
    /* Taller aspect ratio on small screens */
    .gallery-slider .carousel-item img,.gallery-slider .carousel-item video, .inner_banner_style img{aspect-ratio:1.8/1}
    /* Campus image: squarer on mobile */
    .campus-image-wrap img{aspect-ratio:2/1}
.student-project .border-card{height: auto;}

    /* Venue details: wrap and reduce gap on mobile */
    .venue-details{gap:24px;flex-wrap:wrap;justify-content: start;}
    /* Stats grid: 2-column on mobile */
    .stats-grid{grid-template-columns:repeat(1,1fr);gap:24px}
    /* Remove side padding for big images on mobile */
.parent-grid .info.flex-custom
 {
    flex-direction: column;
    align-items: start;
}


.hero-search-box.showcase-search, .hero-search-box.showcase-search input{width: 100%;}
.student-project .control-view, .showcase_section .control-view{justify-content: end;}

    .big_img_content_space_right{padding-right:0}
    /* Full-width block links on mobile */
    .bottom-link{width:100%;display:block}
    /* Footer mega-links align left on mobile */
    .footer-mega-links ul{align-items:start}
    .desktop-footer{display: none;}
    .footer-policy-links a {display: none;}
    /* Stack mobile footer groups vertically */
    .footer-mobile-links{flex-direction:column}

    /* ug programe  */
    .border-card .title-h3{    -webkit-line-clamp: none;}
    .card_grid_two, .card_grid_three, .card_grid_four, .card_grid_five, .card_grid_six, .card_grid_four, .common_grid_max_three{grid-template-columns: repeat(1, 1fr) !important;gap: 24px 24px;}
.content-projects .card_grid_two {
    width: fit-content;
}
    /* faculty details  */
    .flex_details .info {
    flex-direction: column;
    gap: 0;
    }
    #faculty .campus-dropdown {
        width: 100%;
        gap: 3px;
}
     .prospects_card {
    height: auto;
     }
     .publication-item span{    -webkit-line-clamp: none;}
     .flex-wrap-custom-mobile{flex-wrap: wrap;}
}

/* ── ≤ 991px — Tablets and below ───────────────────────── */
@media screen and (max-width:991px){
    /* Mobile dropdown: toggle display instead of opacity */
    .custom-dropdown .dropdown-menu{display:none;opacity:1;visibility:visible;transform:none!important;position:static;width:100%;background:var(--section-backgrounds);box-shadow:none;padding:0;overflow:hidden;animation:mobileDropdown .4s ease}
    /* Show dropdown when .active is added by JS */
    .custom-dropdown.active .dropdown-menu{display:block}
    /* Search submit button: auto-width */
    /* Gallery section header: allow wrapping */
    .gallery-top.flex-custom{position:relative;flex-wrap:nowrap;gap:20px}
    .btn-pill{min-width: fit-content;display: inline-flex;}
        .big_img_content_space_left{padding-left:0}
    /* Last gallery card: no margin */
    .gallery-grid .gallery-item:nth-last-child(1){margin:0}
    /* Footer nav text centred on tablet */
    .main-footer .footer_text{text-align:start;align-items: center;justify-content: start;}
    .main-footer p.footer_text{text-align: center;}
    /* Announcement links expand full width */
    .announcement-links{width:100%}
    /* Filter items: smaller horizontal padding */
    .filter-item{padding:0 10px}
    /* Filter toggle visible on tablet */
    .filter-toggle{display:flex;align-items:center;margin-left:10px}
    /* Gallery tabs: smaller gap */
    .gallery-tabs{gap:5px}
    /* Campus dropdown wraps on tablet */
    /* .campus-dropdown{flex-wrap:wrap} */

    /* Remove decorative pseudo-element on campus section */
    .global-campus-section::after{display:none}
    /* Filter wrap full-width */
    .gallery-filter-wrap{width:100%}
    /* Filters row: space-between */
    .gallery-filters{width:100%;justify-content:space-between}
    /* Filter panel full-width */
    .filter-panel{width:100%}
    /* Gallery grid: single column */
    .gallery-grid{column-count:1}
    /* Campus left column: reset padding and gap */
    .campus-left{padding:0px;gap:0}
    /* Campus dropdown: full-width, left-aligned */
    .campus-dropdown{width:100%;}
    .campus-input {
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
}
    /* Campus stats: static position (no longer overlapping image) */
    .campus-stats{position:static;width:100%}
    /* Alumni grid: single column */
    .journey-grid{grid-template-columns:1fr}
    /* Carousel button: not full-width even when .btn-pill is */
    .control-view .btn-pill{width:fit-content}
    /* Stat items reset grid-column */
    .stats-item.large{grid-column:auto}
    /* Remove right border from stat items on mobile */
    .stats-item:not(:nth-child(3n)){border-right:none}
    .stats-grid .stats-item:nth-child(3){border-right:none}
    /* Add bottom border between stat rows */
    .stats-item{border-bottom:1px solid #ffffff41;border-top:none}
    /* Hide desktop footer link columns on tablet/mobile */
    .flex-links{display:none}
    .desktop_btn{display: none;}
    .control-view
 {
    display: none;
}
.popup-navigation.control-view {
    display: block;
}
.right-btn-bottom
 {
  display: flex;
}
.flex-wrap-custom{flex-wrap: wrap;}
.showcase_section .gallery-top.flex-custom, .global-campus-section .gallery-top.flex-custom{flex-wrap: wrap !important;}
    /* Generic mobile bottom spacing utility */
    .mobile_spacing{margin-bottom:24px}
        .custom_class {display: flex;align-items: center;gap: 25px;justify-content: space-between;width: 100%;}
        .custom_start{align-items:start;}
        .tab_width{width: 100%;}
        .mobile_tab_margin_remove{margin-bottom: 0px !important;}
    /* Reduce policy links gap */
    .footer-policy-links{gap:15px}
    /* Policy link text left-aligned on mobile */
    .footer-bottom-right{text-align:left}
    /* ug programe  */
     .title_breadcurm .hero-section-control-text {flex-wrap: wrap;gap: 20px;}
     .breadcurm {min-width: 100%; max-width: 100%}
     /* faculty details  */
     .prospects_card {
    flex-direction: column;
    align-items: start;
     }
}

/* ── 462px – 991px — Small tablets / large phones ──────── */
@media screen and (min-width:462px) and (max-width:991px){
    /* 2-column masonry gallery on mid-sized screens */
    .gallery-grid{column-count:2}
    /* 2-column stats and alumni grids */
    .stats-grid,.journey-grid{grid-template-columns:1fr 1fr}
    /* Buttons auto-width again at this breakpoint */
    .btn-pill{width:fit-content}
}


/* ── 768px – 991px — Landscape tablets ─────────────────── */
@media screen and (min-width:768px) and (max-width:991px){
    /* Nav items right-aligned on tablet landscape */
    .nav-items{justify-content:end!important}
    /* Narrower slide-in menu on tablet */
    .bottom-nav .navbar-collapse.show{width:50%!important}
    /* Hero border section: auto height on tablet */
    .content-hero-border{min-height:auto}
    /* Banner caption: clamp to 1 line on tablet */
    .banner-content p{-webkit-line-clamp:1}
    /* Projects header: tighter gap */
    .gallery-top.content-projects{gap:10px}
    /* 2-column gallery on tablet landscape */
    .gallery-grid{column-count:2}
    /* Show desktop footer link columns on tablet landscape */
    .flex-links{display:flex;}
.padding-custom_left {
    padding-left: 30px !important;
}
        /* ur programe  */
    .card_grid_two, .card_grid_three, .card_grid_four, .card_grid_five, .card_grid_six, .card_grid_four, .common_grid_max_three{grid-template-columns: repeat(2, 1fr) !important;}
        .global-campus-section .gallery-top.flex-custom {
    flex-wrap: nowrap;
}
    .campus-dropdown {
        min-width: fit-content;
    }
    .tab_spacing{margin-bottom: 24px;}
    /* showcase  */
    .hero-search-box.showcase-search, .hero-search-box.showcase-search input{width: 100%;}
    /* campus  */
    .global-campus-section .mobile_btn {
    display: none;
}
.global-campus-section .desktop_btn {
    display: flex;
}
.global-campus-section .gallery-top.flex-custom{flex-wrap: nowrap !important;}
/* faculty details  */

}

/* ── ≤ 1199px — Breakpoint for mobile nav drawer ──────── */
@media screen and (max-width:1199px){
    /* Submenu: hidden by default on mobile; opened by JS */
    .submenu{display:none;padding-left:15px}
    /* Show submenu when parent has .open */
    .dropdown-submenu.open>.submenu{display:block}
    /* Rotate arrow icon when submenu is open */
    .dropdown-submenu.open .child-arrow{transform:rotate(90deg);transition:.3s ease-in-out}
    /* Space-between for child toggle items */
    .dropdown-item.child-toggle{justify-content:space-between}
    /* Hide the existing chevron arrow on mobile */
    .submenu-toggle .arrow-icon{display:none}
    /* Submenu toggle: full-width flex row */
    .submenu-toggle{display:flex;align-items:center;justify-content:space-between;width:100%}
    /* Use CSS + as expand indicator */
    .submenu-toggle::after{content:"+";font-size:var(--size-24);font-weight:var(--fw-light);line-height:1;transition:.3s ease-in-out}
    /* Switch to − when open */
    .custom-dropdown.open>.submenu-toggle::after{content:"−";transition:.3s ease-in-out}
    /* Mobile menu header buttons */
    .mobile-menu-header .btn-pill{width:fit-content;width:-webkit-fit-content;height:fit-content}
    /* Brand row inside mobile nav panel */
    .mobile-menu-brand{display:flex;align-items:center;gap:4px}
    /* Logo image inside mobile menu */
    .mobile-menu-brand img{width:60px;height:60px;object-fit:contain}
    /* Brand name text inside mobile menu */
    .mobile-menu-brand span{font-size:var(--Size-16);font-weight:var(--fw-semi-bold);color:var(--text-primary)}
    /* Close button for mobile menu */
    .mobile-menu-close{        border: 1px solid var(--border-light);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: var(--size-18);
        display: flex;
        align-items: center;
        padding: 8px;        justify-content: center;
        background: transparent;}
    /* Nav links grid: right-aligned on smaller desktop */
    .nav-links-grid{align-items:end;justify-content:end}
    /* Logo padding: larger top pad when links move above */
    .logo-icon-box{padding:20px 0 8px 0}
    /* Top links bar: absolute position above logo */
    .top-links-nav{position:absolute;top:0}
    /* Mobile nav drawer: 90% width, full-height slide-in */
    .bottom-nav.navbar-collapse.show{width:90%!important;right:0}
    /* Show close button inside nav drawer */
    .bottom-nav.navbar-collapse button.btn-close{display:block!important;margin:auto 0 auto auto}
    /* Space-between for home menu items on mobile */
    .bottom-nav.home-menu-items{justify-content:space-between}
    /* Dropdown menu: full-width on mobile */
    .bottom-nav.dropdown-menu{width:100%!important}
    /* Dropdown items: block-level on mobile */
    .bottom-nav.dropdown-menu li{display:block}
    /* Active/hovered home items: remove bg and border on mobile */
    .bottom-nav.home-menu-items.active,.bottom-nav.nav-item:hover .home-menu-items{background:0 0;border-bottom:0!important;color:var(--TwoColor)!important}
    /* Slide-in nav drawer: fixed, starts off-screen right */
    .bottom-nav .navbar-collapse{position:fixed;top:0;right:-100%;z-index:9999;border-top:none;border-bottom:none;color:#212529;outline:0;background:#fff;width:0;height:100vh;display:block;padding:1rem;transition:.15s ease-in-out}
    /* Shown state: full width, flush right */
    .bottom-nav .navbar-collapse.show{width:100%;right:0}
    /* Nav list: scrollable within the drawer */
    .bottom-nav .navbar-nav{overflow-y:auto;height:calc(100vh - 120px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:10px}
    /* Header row inside mobile nav drawer */
    .mobile-menu-header{display:flex;justify-content:space-between;margin-bottom:15px;align-items:center}
    /* Submenu toggle: full-width with space-between */
    .submenu-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;height:auto}
    /* Mobile dropdown: static, no transform, just show/hide */
    .custom-dropdown .dropdown-menu{display:none;position:static!important;transform:none!important;border:none;box-shadow:none;padding-left:15px;margin-top:8px}
    /* Open state: show with no indent */
    .custom-dropdown.open .dropdown-menu{display:block;padding-left:0;margin:0;visibility:visible;opacity:1;width: 100%; min-width: 100%;max-width: 100%;}
    /* Arrow icon transition */
    .arrow-icon{transition:.3s}
    /* Submenu arrow visible on mobile */
    .bottom-link.submenu-toggle span{display:block}
    /* Rotate arrow when open */
    .custom-dropdown.open .arrow-icon{transform:rotate(180deg)}
    /* Nav items: full-width with space-between and bottom padding */
    .nav-items{width:100%;justify-content:space-between;padding-bottom:20px}
    /* Hamburger button: round bordered */
    .nav-items .navbar-toggler{border:1px solid var(--border-light);border-radius:50%;width:40px;height:40px;font-size:var(--size-18);display:flex;align-items:center;padding:8px}
}

/* ── 768px – 1199px — Tablet to large desktop ─────────── */
@media(min-width:768px) and (max-width:1199px){
    /* Scale down heading sizes on mid-range screens */
    .title-h1{font-size:var(--size-43)}
    .title-h2{font-size:var(--size-32)}
    .title-h3{font-size:var(--size-22)!important}
    /* Stats title smaller + better line-height at mid range */
    .date-stats-title{font-size:var(--size-28)!important;line-height:1.3}
    /* Keep body-size text at base 16px */
    .date-stats-content,.body-text,.image-text-title,.icon-size{font-size:var(--size-16)}
    /* Info paragraph and nav link text */
    .info p,.nav-link-text{font-size:var(--nav-link-text)}
    /* Smaller detail text */
    .info span,.image-text-details,.eyebrow-label,.error{font-size:var(--size-13)}
    /* header responsive align */
    .nav-items .btn-pill, .nav-items .btn-pill span {font-size: 12px;}
    .nav-items .btn-pill{padding: 8px 10px;}
    .other-links a img {
    height: 12px;
}
.other-links a {
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-items .navbar-toggler, .search-toggle {height: 36px;width:36px;min-width:36px}
}

/* ── 991px – 1199px — Small desktops ───────────────────── */
@media screen and (min-width:991px) and (max-width:1199px){
    /* Narrower nav drawer on small desktop */
    .bottom-nav .navbar-collapse.show{width:50%!important}
    /* Nav items right-aligned */
    .nav-items{justify-content:end}
    /* Announcement links expand full width */
    .announcement-links{width:100%}
    .card_grid_six{grid-template-columns: repeat(4, 1fr);}
           
}
   @media (min-width: 1200px) {

    .navbar-nav > .nav-item.custom-dropdown.keyboard-open
    .sapacing_for_hovering {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .navbar-nav > .nav-item.custom-dropdown.keyboard-open
    .sapacing_for_hovering .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

}
/* ── 1200px – 1260px — Narrow large desktop ─────────────── */
@media screen and (min-width:1200px) and (max-width:1260px){
    /* Tighten nav gaps to prevent overflow at this borderline size */
    #mainNav .navbar-nav,.nav-items{gap:12px}
}
/* ── ≥ 767px — Tablet and above ────────────────────────── */
@media screen and (min-width:768px){
    /* Hide mobile-only logo above 767px */
    .logo_mobile{display:none}    
}
@media screen and (min-width:991px){
.mobile_btn{display: none;}
}
/* ── ≥ 1200px — Desktop: submenu hover behaviour ────────── */
@media(min-width:1200px){
    /* Second-level submenu: absolutely positioned to the right of parent */
    .submenu{position:absolute;top:0;left:100%;min-width:220px;background:#fff;opacity:0;visibility:hidden;transition:.3s}
    /* Show on hover */
    .dropdown-submenu:hover>.submenu{opacity:1;visibility:visible}
    /* Push submenu arrow to right edge */
    .child-arrow{margin-left:auto}
}
@media screen and (min-width: 1500px) and (max-width: 1598px) {
    .nav-links-grid {
    gap: 10px;
    }
}
@media screen and (min-width: 1599px) and (max-width: 1650px) {
    .nav-links-grid {
    gap: 13px;
    }
}
@media screen and (min-width: 1651px) and (max-width: 3000px) {
    .nav-links-grid {
    gap: 15px;
    }
}

/* ── ≥ 1599px — Large/wide desktops ─────────────────────── */
@media screen and (min-width:1599px){
    /* More breathing room between nav items on wide screens */
    #mainNav .navbar-nav,.nav-items{gap:26px}
}

/* header responsive alignment  */
@media screen and (min-width: 768px) and (max-width: 830px) {
    .nav-items {
        padding-bottom: 42px;
    }
}
@media screen and (min-width: 831px) and (max-width: 873px) {
    .nav-items {
        padding-bottom: 48px;
    }
}
@media screen and (min-width: 873px) and (max-width: 920px) {
    .nav-items {
        padding-bottom: 50px;
    }
}
@media screen and (min-width: 921px) and (max-width: 940px) {
    .nav-items {
        padding-bottom: 52px;
    }
}
@media screen and (min-width: 941px) and (max-width: 981px) {
    .nav-items {
        padding-bottom: 54px;
    }
}
@media screen and (min-width: 982px) and (max-width: 999px) {
    .nav-items {
        padding-bottom: 55px;
    }
}
@media screen and (min-width: 1000px) and (max-width: 1040px) {
    .nav-items {
        padding-bottom: 57px;
    }
}
@media screen and (min-width: 1041px) and (max-width: 1199px) {
    .nav-items {
        padding-bottom: 59px;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1250px) {
.nav-links-grid {
    gap: 4px;
}
}
@media screen and (min-width: 1251px) and (max-width: 1349px) {
.other-links a {
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-items .navbar-toggler, .search-toggle {height: 36px;width:36px;min-width:36px}
}
@media screen and (min-width: 1251px) and (max-width: 1380px) {
.nav-links-grid {
    gap: 4px;
}
}