/* Reset and base styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

/* Add smooth scrolling for the whole page */
html {
    /* Fluid root font-size — the whole site uses rem units, so scaling the root
       makes every page shrink/grow proportionally with the screen. This keeps the
       layout looking the same on any resolution (Mac, laptop, desktop, 4K) without
       the user having to zoom in / out. ~16px around a 1440px screen. */
    font-size: clamp(13.5px, 0.4vw + 10.2px, 16px);
    scroll-behavior: smooth;
    background: #fff;
}

/* Custom scrollbar styling for WebKit browsers */
::-webkit-scrollbar {
    width: 0.75rem;
    height: 0.75rem;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0.625rem;
}

::-webkit-scrollbar-thumb {
    background-color: #d81b60;
    border-radius: 0.625rem;
    border: 3px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #b3154a;
}

/* Custom scrollbar styling for Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #d81b60 #f1f1f1;
}

.section {
    scroll-snap-align: start;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

/* Star decorations - hidden on zoom, decorative only */
/* left in per-cent, not rem: these sparkles sit around .hero-image, which is
   sized as a percentage (flex:1; max-width:40%) and therefore slides as the
   viewport changes. A fixed rem offset stayed put while the photo moved, so the
   two drifted apart on wider screens. Per-cent makes them track it. */
.star-image, .star-image2 {
    position: absolute;
    top: 14.375rem;
    left: 39%;
    width: 3.125rem;
    height: 3.125rem;
    z-index: 10;
}

.star-image2 {
    position: absolute;
    top: 28rem;
    left: 68.5%;
    width: 3.125rem;
    height: 3.125rem;
    z-index: 10;
}

/* Hero section background */
.hero {
    position: relative;
    padding: 2.5rem 1.25rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100vh;
    background: #fff;
    color: #333;
    line-height: 1.5;
    max-width: 120rem;
    margin-left: auto;
    margin-right: auto;
}

/* Disable problematic full-viewport scroll-snap on touch devices —
   it conflicts with iOS Safari address-bar collapse and breaks
   smooth scrolling on phones/tablets. */
@media (max-width: 1024px) {
    body {
        scroll-snap-type: none;
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }
}

a {
    text-decoration: none;
    color: #333;
}

/* Top bar */
.top-bar {
    background: linear-gradient(135deg, #0b336f 0%, #1a4a8a 100%);
    font-size: 0.78rem;
    display: flex;
    justify-content: space-between;
    padding: 0 1.25rem;
    align-items: center;
    height: 2.375rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    position: relative;
    z-index: 100;
}

.top-nav {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
}

.top-nav .admission-blink {
    background: #d81b60;
    color: #fff;
    padding: 0.1875rem 0.75rem;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.75rem;
    animation: blink-admission 1.2s ease-in-out infinite;
    white-space: nowrap;
    margin-right: 0.3125rem;
    letter-spacing: 0.3px;
}

@keyframes blink-admission {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.top-nav a {
    margin-left: 0.75rem;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    position: relative;
    padding-right: 0.875rem;
    transition: color 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.top-nav a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.top-nav a.admission-blink {
    margin-left: 0.75rem;
    padding-right: 0.875rem;
}

.top-nav a.admission-blink:hover {
    text-decoration: none;
    opacity: 1;
    animation: none;
}

.top-nav a:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    width: 1px;
    height: 0.875rem;
    background-color: rgba(255,255,255,0.35);
}

.top-nav .accessibility-group {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: 0.9375rem;
    border-left: 1px solid rgba(255,255,255,0.25);
    gap: 2px;
}

.top-nav button {
    margin-left: 0;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    transition: color 0.2s ease, background 0.2s ease;
}

.accessibility-btn, .search-btn {
    background: none;
    border: 1px solid transparent;
    padding: 2px 0.4375rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.85);
    transition: all 0.2s ease;
}

.accessibility-btn:hover, .search-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}

.search-btn {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.accessibility-group {
    position: relative;
}

/* Social Media Sidebar */
.social-sidebar {
    position: fixed;
    left: 0;
    top: 70%;
    transform: translateY(-50%);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    background: #d81b60;
    border-radius: 0 10px 10px 0;
    padding: 10px 8px;
    gap: 10px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}

.social-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}

.social-sidebar-link:hover {
    transform: scale(1.12);
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

/* All icons blue */
.social-sidebar-link { color: #1877f2; }

.social-sidebar-link svg {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/* Hide fixed social sidebar on tablets/phones — it overlaps content
   and competes with the chat-widget for screen real estate. */
@media (max-width: 900px) {
    .social-sidebar {
        display: none !important;
    }
}

.search-form {
    display: none;
    align-items: center;
    gap: 0;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    z-index: 9999;
    background: #1a1a4e;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    min-width: 280px;
}

.search-input {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
    width: 100%;
}

.search-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.search-submit-btn {
    background: #c8102e;
    border: none;
    color: #fff;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}

.search-submit-btn:hover { background: #a50d25; }

/* Main header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.875rem;
    margin-top: -0.75rem;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 6.25rem;
    margin-right: 1px;
    filter: invert(0);
}

.university-name h1 {
    font-size: 3rem;
    color: #0b336f;
    font-weight: 1200;
}

.university-name p {
    font-size: 1.5rem;
    color: #0b336f;
    font-weight: 900;
    margin-left: 11.25rem;
}

/* Header contact */
.header-contact {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
}

.naac, .iso, .years {
    filter: invert(0);
    display: flex;
    padding: 1.5625rem 1.25rem;
    border-radius: 3px;
    white-space: nowrap;
}

.naac img, .iso img, .years img {
    height: 7rem;
    width: auto;
    display: block;
    filter: none !important;
    background: none !important;
}

.apply-btn {
    background: #2981c2;
    color: white;
    border: none;
    padding: 0.5rem 2.6875rem;
    border-radius: 1.5625rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    margin-bottom: 0.3125rem;
    transition: background-color 0.3s ease;
}

.apply-btn:hover {
    background: #1f6fa8;
}

.contact-number {
    background: #d81b60;
    color: white;
    border: none;
    padding: 0.375rem 1.25rem;
    border-radius: 1.5625rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

/* ==============================================================
   Main navigation — uniform spacing for both direct <a> items
   and <div.nav-dropdown> wrappers (Distance Education vs Home etc.)
   ============================================================== */
.main-nav {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0.15rem 0 0.4rem;
    margin-top: -0.5rem;
}

/* All top-level items (both <a> and .nav-dropdown) share the same look */
.main-nav > a,
.main-nav > .nav-dropdown > a {
    display: inline-flex;
    align-items: center;
    font-weight: 550;
    font-size: 1.125rem;
    font-family: Verdana, Tahoma, sans-serif;
    color: #0b336f;
    padding: 0.3125rem 0.625rem;
    transition: color 0.25s ease, background-color 0.25s ease;
    position: relative;
    border-radius: 0.3125rem;
    text-decoration: none;
    white-space: nowrap;
}

/* Uniform horizontal spacing for every top-level item */
.main-nav > a,
.main-nav > .nav-dropdown {
    margin: 0 1.25rem;
    position: relative;
}


/* Pink divider between items — placed on the inner <a> (which has
   position: relative). Works identically for direct <a> items
   (Distance Education) and dropdown items (Home, About Us, etc.) */
.main-nav > a:not(:last-child)::after,
.main-nav > .nav-dropdown:not(:last-child) > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background-color: #d81b60;
    pointer-events: none;
    display: block;
}

/* The last real nav item is followed by hidden mobile-only elements
   (.mobile-top-links / .mobile-menu-cta), so it is no longer :last-child
   and wrongly gets a trailing divider on desktop. Hide that one. */
.main-nav > a:has(+ .mobile-top-links)::after,
.main-nav > a:has(+ .mobile-menu-cta)::after,
.main-nav > .nav-dropdown:has(+ .mobile-top-links) > a::after,
.main-nav > .nav-dropdown:has(+ .mobile-menu-cta) > a::after { display: none !important; }

/* Hover + active states — applied to <a> consistently.
   The :hover on .nav-dropdown keeps the parent link highlighted even
   when the mouse moves down into the open mega-menu / dropdown-content. */
.main-nav > a:hover,
.main-nav > a.active,
.main-nav > .nav-dropdown > a:hover,
.main-nav > .nav-dropdown:hover > a {
    background-color: #f4e5ed;
    color: #d81b60;
}

/* Dropdown wrapper layout — flex so the inner <a> aligns vertically */
.nav-dropdown {
    display: inline-flex;
    align-items: center;
}

/* Hover bridge — extend .nav-dropdown's hit area vertically over .main-nav's
   0.625rem top+bottom padding, so the cursor doesn't lose hover when moving
   from the menu item down to the dropdown / mega menu below. The negative
   margin compensates so the visual position is unchanged. Higher specificity
   selector (`.main-nav > .nav-dropdown`) so the vertical margin overrides
   the shorthand `margin: 0 1.25rem` defined earlier. */
.main-nav > .nav-dropdown {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    margin-top: -0.625rem;
    margin-bottom: -0.625rem;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #e0e0e0;
    min-width: 13.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 0.25rem;
    z-index: 1000;
    padding: 0.3125rem 0;
}

.dropdown-content a {
    display: block;
    padding: 0.5rem 1rem;
    color: #0b336f;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: Verdana, Tahoma, sans-serif;
    white-space: nowrap;
}

.dropdown-content a:hover {
    background-color: #c8c8c8;
    color: #d81b60;
}

.nav-dropdown:hover .dropdown-content {
    display: block;
}

/* ── CDOE header line (Centre for Distance and Online Education) ──
   Shown on the distance home page AND on any /p/ page opened from the
   distance section (body gets `.distance-site`). Sits under the university
   name, centred over it. */
.cdoe-subtitle {
    display: block;
    text-align: center;
    background: #d81b60;          /* filled pink bar */
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: .03em;
    padding: .5rem 1.5rem;
    margin: -1.8rem 0 0 8rem;    /* sits just under the university name */
    width: fit-content;           /* bar hugs the text — less pink on left/right */
    max-width: 60%;
    border-radius: 8px;
    line-height: 1.2;
}
.cdoe-subtitle .cdoe-abbr { color: #fff; }
@media (max-width: 1024px) {
    /* header stacks + nav becomes hamburger — drop the desktop offset, centre full-width */
    .cdoe-subtitle {
        margin: 0.25rem 0 0.35rem !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 0 0.75rem 0.4rem !important;
        font-size: 1.15rem !important;
        text-align: center !important;
    }
}
@media (max-width: 480px) {
    .cdoe-subtitle { font-size: 1rem !important; }
}

/* ── Mega Menu ──────────────────────────────── */
.nav-dropdown.has-mega {
    position: static;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #e0e0e0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1000;
    padding: 1.25rem 1.5rem;
    border-top: 3px solid #c8102e;
}

.nav-dropdown.has-mega:hover .mega-menu {
    display: block;
}

/* Downward caret under a mega-menu parent (e.g. CIQA) while its panel is open */
.nav-dropdown.has-mega > a { position: relative; }
.nav-dropdown.has-mega:hover > a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.4rem;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 9px solid #c8102e;   /* points up toward the parent, same pink as the mega-menu top border */
    z-index: 1001;
    pointer-events: none;
}

.mega-menu-inner {
    display: flex;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
}

.mega-col {
    flex: 1;
    padding: 0 1.5rem;
    border-right: 1px solid #c8c8c8;
}

.mega-col:first-child {
    padding-left: 0;
}

.mega-col:last-child {
    border-right: none;
    padding-right: 0;
}

.mega-col-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #c8102e;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid #c8102e;
    font-family: Verdana, Tahoma, sans-serif;
}

.mega-col a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0;
    color: #0b336f;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: Verdana, Tahoma, sans-serif;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    transition: color 0.2s, padding-left 0.2s;
}

.mega-col a:last-child {
    border-bottom: none;
}

.mega-col a:hover {
    color: #c8102e;
    padding-left: 0.4rem;
}

.mega-arrow {
    color: #c8102e;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Remove nav separator lines inside mega menu */
.mega-col a::after,
.mega-col a::before {
    display: none !important;
}

/* 4th-level items: collapsible nested list under a grandchild inside mega menu */
.mega-sub { display: block; }
.mega-sub-toggle .mega-arrow {
    transition: transform 0.2s ease;
}
.mega-sub.open > .mega-sub-toggle .mega-arrow {
    transform: rotate(90deg);
}
.mega-sub-list {
    display: none;
    flex-direction: column;
    padding-left: 0.75rem;
    margin-bottom: 0.25rem;
    border-left: 2px solid #e8197c;
}
.mega-sub.open > .mega-sub-list {
    display: flex;
}
.mega-col .mega-sub-list a.mega-sub-item {
    padding: 0.3rem 0 0.3rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0b336f;
    border-bottom: 1px dashed #ddd;
    justify-content: flex-start;
}
.mega-col .mega-sub-list a.mega-sub-item:last-child { border-bottom: none; }
.mega-col .mega-sub-list a.mega-sub-item:hover { color: #c8102e; padding-left: 0.75rem; }

/* 3rd level submenu */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #0b336f;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-submenu > a:hover {
    background-color: #c8c8c8;
    color: #d81b60;
}

.dropdown-submenu-content {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 13.75rem;
    background: #e0e0e0;
    border: 1px solid #ccc;
    box-shadow: 2px 4px 8px rgba(0,0,0,0.12);
    border-radius: 0.25rem;
    z-index: 1001;
    padding: 0.3125rem 0;
}

.dropdown-submenu-content a {
    display: block;
    padding: 0.5rem 1rem;
    color: #0b336f;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-submenu-content a:hover {
    background-color: #c8c8c8;
    color: #d81b60;
}

.dropdown-submenu:hover .dropdown-submenu-content {
    display: block;
}

/* Hero section */
.hero {
    background-image: url('images/banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    padding: 2.5rem 1.25rem 2.5rem 4.5rem;
    position: relative;
}

.hero-text h2 {
    font-weight: 1000;
    font-size: 5rem;
    color: #0b336f;
    line-height: 1.1;
    margin-bottom: 0;
}

.highlight.pink-bold {
    color: #d81b60;
    font-weight: 900;
}

.hero-text p {
    font-size: 1rem;
    color: #0b336f;
    margin-bottom: 1.25rem;
}

.apply-now-btn {
    background: #d81b60;
    color: white;
    border: none;
    padding: 0.75rem 1.875rem;
    border-radius: 1.5625rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.apply-now-btn:hover {
    background: #b3154a;
}

.hero-image {
    position: relative;
    flex: 1;
    max-width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image img {
    position: relative;
    border-radius: 50%;
    width: 31.25rem;
    height: 31.25rem;
    max-width: 100%;
    object-fit: cover;
    z-index: 1;
}

/* ---- hero image slider ---- */
.hero-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}
.hero-slider {
    position: relative;
    width: 31.25rem;
    max-width: 100%;
    aspect-ratio: 1 / 1;
}
.hero-image .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .7s ease;
    z-index: 1;
}
/* CDOE hero art ships as a pre-composed cut-out — it already carries its own
   pink circular backdrop on a transparent canvas, and it is wider than tall.
   Cropping it to the square frame + circular mask clipped the artwork's edges,
   so contain it instead. Regular home banners keep the cover/circle treatment. */
body.distance-site .hero-image .hero-slide {
    object-fit: contain;
    border-radius: 0;
}
.hero-image .hero-slide.is-active {
    opacity: 1;
    z-index: 2;
}
.hero-dots {
    display: flex;
    justify-content: center;
    gap: .55rem;
    z-index: 5;
}
.hero-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(190, 30, 105, .28);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
.hero-dot.is-active {
    width: 28px;
    border-radius: 6px;
    background: #be1e69;
}

.badge {
    position: absolute;
    background: #3a7bd5;
    color: white;
    padding: 0.625rem 0.9375rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 2;
}

.badge-icon {
    font-size: 1.5rem;
    top: 3.125rem;
}

.badge.welcome {
    top: 50%;
    left: 5%;
}

.badge.congrats {
    bottom: 15%;
    right: 10%;
}

/* ── Enquiry Form (Manipal-style) ────────────────── */
.course-info-form {
    background: #fff;
    padding: 1.1rem 1.25rem 0.6rem;
    border-radius: 0.75rem;
    width: 22rem;
    max-width: 100%;
    box-shadow: 0 4px 24px rgba(11,51,111,0.13);
    font-family: 'Arial', sans-serif;
    max-height: 88vh;
    overflow-y: auto;
    margin-top: -2rem;
}
.course-info-form .enq-submit-btn { margin-bottom: 0; }

.enq-header { margin-bottom: 0.75rem; }
.enq-header h3 { font-weight: 800; color: #0b336f; font-size: 1.1rem; margin: 0 0 0.15rem; }
.enq-header p  { font-size: 0.78rem; color: #555; margin: 0; }

.course-info-form input,
.course-info-form select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.55rem;
    border: 1px solid #d0d5dd;
    border-radius: 0.35rem;
    font-size: 0.85rem;
    font-family: 'Arial', sans-serif;
    color: #333;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.course-info-form input:focus,
.course-info-form select:focus { border-color: #0b336f; }

/* 2-column row: State + City */
.enq-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.enq-row-2 input,
.enq-row-2 select { margin-bottom: 0; }

/* Mobile prefix */
.enq-mobile-wrap { display: flex; align-items: stretch; margin-bottom: 0.55rem; }
.enq-mobile-prefix {
    background: #f4f6fb;
    border: 1px solid #d0d5dd;
    border-right: none;
    padding: 0.55rem 0.5rem;
    border-radius: 0.35rem 0 0 0.35rem;
    font-size: 0.82rem;
    color: #333;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.enq-mobile-wrap input { margin-bottom: 0; border-radius: 0 0.35rem 0.35rem 0; flex: 1; }

/* Captcha row */
.enq-captcha-row { display: flex; align-items: stretch; gap: 0.35rem; margin-bottom: 0.55rem; }
.enq-captcha-box {
    background: #f4f6fb;
    border: 1px solid #d0d5dd;
    border-radius: 0.35rem;
    padding: 0.55rem 0.75rem;
    font-size: 1rem;
    font-weight: 800;
    color: #0b336f;
    letter-spacing: 2px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    min-width: 5rem;
    justify-content: center;
    font-family: 'Courier New', monospace;
}
.enq-captcha-refresh {
    background: #e8edf8;
    border: 1px solid #d0d5dd;
    border-radius: 0.35rem;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 0.5rem;
    color: #0b336f;
    display: flex;
    align-items: center;
    transition: background 0.2s;
}
.enq-captcha-refresh:hover { background: #cdd6ee; }
.enq-captcha-row input { flex: 1; margin-bottom: 0; }

/* Consent */
.enq-consent { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.75rem; color: #555; font-weight: 400; cursor: pointer; margin-bottom: 0.7rem; line-height: 1.4; }
.enq-consent input[type="checkbox"] { width: auto; margin: 0; flex-shrink: 0; margin-top: 2px; }

/* Error / Success */
.enq-err { color: #c0392b; font-size: 0.7rem; display: block; margin-top: -0.3rem; margin-bottom: 0.35rem; }
.enq-success { background: #d4edda; color: #155724; padding: 0.5rem 0.7rem; border-radius: 5px; margin-bottom: 0.7rem; font-size: 0.8rem; }
.enq-req { color: #d81b60; }

/* Submit */
.enq-submit-btn {
    background: #d81b60;
    color: #fff;
    border: none;
    padding: 0.7rem;
    width: 100%;
    border-radius: 0.4rem;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition: background 0.25s;
}
.enq-submit-btn:hover { background: #b01450; }

/* keep old .submit-btn for other uses */
.submit-btn {
    background: #3a7bd5;
    color: white;
    border: none;
    padding: 0.75rem;
    width: 100%;
    border-radius: 0.5rem;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}
.submit-btn:hover { background: #2a5ca8; }

/* Highlights Section */
.highlights {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.875rem 2.5rem;
    background: #fff;
}

.highlights img {
    max-width: 30%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* Responsive styles for Highlights Section */
@media (max-width: 1024px) {
    .highlights {
        flex-wrap: wrap;
        gap: 0.9375rem;
        padding: 1.25rem 0.9375rem;
    }
    .highlight-card {
        min-height: 7.5rem;
        padding: 0.9375rem 1.25rem;
    }
    .highlight-left {
        min-width: 3.75rem;
        padding-right: 0.9375rem;
    }
    .highlight-grade {
        font-size: 1rem;
    }
    .highlight-title {
        font-size: 1rem;
    }
    .highlight-right {
        max-width: 12.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .highlights {
        flex-direction: column;
        align-items: center;
        padding: 0.9375rem 0.625rem;
    }
    .highlight-card {
        width: 100%;
        max-width: 21.875rem;
        min-height: auto;
        padding: 1.25rem;
        flex-direction: row;
        justify-content: flex-start;
    }
    .highlight-left {
        border-right: none;
        border-bottom: 2px solid white;
        padding-right: 0;
        padding-bottom: 0.625rem;
        min-width: auto;
        text-align: center;
        width: 100%;
    }
    .highlight-grade {
        font-size: 2rem;
    }
    .highlight-title {
        font-size: 1.2rem;
    }
    .highlight-right {
        max-width: 100%;
        font-size: 1rem;
        padding-left: 0;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .highlight-card {
        padding: 0.9375rem;
    }
    .highlight-grade {
        font-size: 1.5rem;
    }
    .highlight-title {
        font-size: 1rem;
    }
    .highlight-right {
        font-size: 0.9rem;
    }
}

.highlight-card {
    flex: 1 1 18rem;
    color: white;
    padding: 1.25rem 1.875rem;
    border-radius: 0.5rem;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 13.75rem;
    width: 100%;
    max-width: 30rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    overflow: hidden;
    box-sizing: border-box;
    word-wrap: break-word;
    flex-wrap: wrap;
}

.highlight-card.naac {
    background: linear-gradient(180deg, #d81b60 0%, #3a1c71 100%);
}
.highlight-card.admired {
    background: linear-gradient(180deg, #d81b60 0%, #3a1c71 100%);
}
.highlight-card.top25 {
    background: linear-gradient(180deg, #d81b60 0%, #3a1c71 100%);
}

.highlight-left {
    border-right: 2px solid white;
    padding-right: 1.25rem;
    text-align: center;
    min-width: 7.5rem;
}

.highlight-title {
    font-size: 1.2rem;
    margin-bottom: 0.3125rem;
    text-transform: uppercase;
}

.highlight-grade {
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.highlight-right {
    padding-left: 1.25rem;
    font-size: 1.1rem;
    line-height: 1.3;
    max-width: 17.5rem;
    word-break: break-word;
    overflow-wrap: break-word;
}

.highlight-card.admired {
    background: linear-gradient(180deg, #d81b60 0%, #3a1c71 100%);
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 1.25rem;
}

.highlight-card.top25 {
    background: linear-gradient(180deg, #d81b60 0%, #3a1c71 100%);
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 1.25rem;
}

.highlight-card.admired .highlight-title,
.highlight-card.top25 .highlight-title {
    font-size: 1.8rem;
    margin-bottom: 0.625rem;
}

.highlight-text.admired-text,
.highlight-text.top25-text {
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 900;
    white-space: pre-line;
}

.admired-bold {
    font-family: 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Updated Programmes We Offer Section Styles */
.programmes {
    padding: 2.5rem 1.25rem 7rem;
    background: #fff;
    text-align: center;
    overflow: hidden;          /* contain the floated "View all" button so it doesn't overlap next section */
}
.programmes::after {
    content: '';
    display: table;
    clear: both;
}

.programmes h2 {
    font-size: 2rem;
    color: #0b336f;
    font-weight: 900;
    margin-bottom: 1.875rem;
    position: relative;
    display: inline-block;
    padding: 0 1.875rem;
}

.programmes h2::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -2.5rem;
    width: 3.75rem;
    height: 0.375rem;
    background-color: #d81b60;
    border-radius: 0.625rem;
    transform: translateY(-50%);
}

.programmes h2::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -2.5rem;
    width: 3.75rem;
    height: 0.375rem;
    background-color: #d81b60;
    border-radius: 0.625rem;
    transform: translateY(-50%);
}

.programmes-grid {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 1.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.programme-card {
    background: #fff;
    border: 2px solid #2a7ccf;
    border-radius: 0.75rem;
    height: 26.5rem;
    width: 20rem;
    max-width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    transition: transform 0.3s ease;
}

.programme-card:hover {
    transform: translateY(-0.9375rem);
}

/* The department used to be a pink pill sitting on the image; it now reads as a
   subtitle between the programme name and its duration. Two lines at most, so a
   long department name cannot push the duration out of the fixed-height card. */
.programme-dept {
    font-size: 0.8rem;
    font-weight: 600;
    color: #d81b60;
    line-height: 1.35;
    margin: -0.25rem 0 0.5rem;
    font-family: 'Roboto', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.programme-card img {
    position: relative;
    top: 0.625rem;
    left: 0;
    border: 2px solid #2a7ccf;
    width: 18.125rem;
    height: 16.5625rem;
    max-width: calc(100% - 1.875rem);
    object-fit: cover;
    border-radius: 0.5rem;
    margin-top: 0;
}

.programme-info {
    padding: 0.9375rem;
    text-align: left;
    position: relative;
}

.programme-info h3 {
    font-size: 1.1rem;
    font-weight: 900;
    color: #0b336f;
    margin-bottom: 0.625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rating {
    background-color: #d81b60;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
}

.rating::after {
    content: "★";
    font-size: 1rem;
    color: white;
}

.duration {
    font-size: 0.9rem;
    color: #0b336f;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
}

.calendar-icon {
    font-size: 1rem;
}

/* Pagination dots below the programmes grid */
.programmes-pagination {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 0.625rem;
}

.programmes-pagination .dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: #d81b60;
    opacity: 1;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.programmes-pagination .dot.inactive {
    background-color: #f7c6d9;
    opacity: 0.6;
}

/* View all courses button */
.view-courses-btn {
    margin-top: -2rem;
    background: #2a7ccf;
    color: white !important;
    border: none;
    padding: 0.75rem 1.875rem;
    font-size: 1rem;
    border-radius: 1.5625rem;
    cursor: pointer;
    font-weight: 700;
    float: right;
    font-family: 'Roboto', sans-serif;
    transition: background-color 0.3s ease;
    text-decoration: none !important;
    display: inline-block;
    position: relative;
    z-index: 5;
}

.view-courses-btn:hover {
    background: #1f5ca8;
    color: white !important;
    text-decoration: none !important;
}

/* Facilities Section */
.facilities {
    padding: 0.625rem 5%;
    background: darkgray;
    text-align: center;
    position: relative;
    overflow: visible;
}

.facilities h2 {
    font-size: 2rem;
    font-style: bold;
    color: #1a2a5a;
    margin: 2.5rem 0 1.875rem;
    font-weight: 1000;
    position: relative;
    display: inline-block;
    padding: 0 1.25rem;
}

.facilities h2::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -4.375rem;
    width: 3.75rem;
    height: 4px;
    background-color: #d81b60;
    transform: translateY(-50%);
}

.facilities h2::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4.375rem;
    width: 3.75rem;
    height: 4px;
    background-color: #d81b60;
    transform: translateY(-50%);
}

.facilities-grid {
    display: flex;
    gap: 5.125rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    justify-content: safe center;   /* `safe` keeps centering when items fit; falls back to flex-start on overflow so the left arrow can scroll back to the first card */
    flex-wrap: nowrap;              /* keep all cards in a single row — arrows handle horizontal scroll */
    overflow-x: auto;               /* allow horizontal scroll for the carousel arrows */
    overflow-y: clip;               /* `clip` (not `hidden`) lets card shadow + bottom corners stay visible via overflow-clip-margin */
    overflow-clip-margin: 2rem;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0 2rem;           /* breathing room so card body + box-shadow render fully */
    position: relative;
    background: transparent;
    box-sizing: border-box;
    scrollbar-width: none;          /* hide the native scrollbar — arrows drive navigation */
}
.facilities-grid::-webkit-scrollbar {
    display: none;
}

.facilities > .facilities-grid:first-child {
    margin-top: -6.5rem;          /* cards lifted higher into the section above */
}

.facilities > .facilities-grid:last-of-type {
    margin-bottom: -10.25rem;
    position: relative;
    z-index: 2;
}

/* Facilities wrapper — flex row with prev/next arrows flanking the grid.
   Preserves the negative-margin overlap effect of the inner grid because
   the wrapper itself takes the grid's margin behaviour. */
.facilities-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 72.5rem;        /* fits exactly 5 cards (5×10rem) + 4 gaps (4×5.125rem) + side padding */
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}
.facilities > .facilities-wrapper:first-child {
    margin-top: -6.5rem;
}
.facilities > .facilities-wrapper:last-of-type {
    margin-bottom: -8.25rem;
    position: relative;
    z-index: 2;
}
.facilities-wrapper > .facilities-grid {
    flex: 1;
    margin: 0;                    /* wrapper owns the offset margin now */
}

/* Pink circular arrows matching the requested look (#d81b60).
   Doubled selector specificity (.carousel-arrow.facilities-arrow)
   so we override the generic blue .carousel-arrow style defined
   later in the cascade. */
.carousel-arrow.facilities-arrow {
    background: #d81b60;
    border: none;
    color: #fff;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(216, 27, 96, 0.45);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    z-index: 5;
}
.carousel-arrow.facilities-arrow:hover {
    background: #b81350;
    color: #fff;                  /* override base blue hover colour */
    transform: scale(1.08);
    box-shadow: 0 6px 14px rgba(216, 27, 96, 0.6);
}
.carousel-arrow.facilities-arrow:active {
    transform: scale(0.95);
}

/* Nudge the arrows further from the grid (closer to the viewport edges). */
.facilities .facilities-wrapper > .carousel-arrow.carousel-prev.facilities-arrow {
    margin-left: -16rem !important;
}
.facilities .facilities-wrapper > .carousel-arrow.carousel-next.facilities-arrow {
    margin-right: -16rem !important;
}

/* Tablet range (769–1200px): the -16rem outward offset pushes the arrows
   past the viewport and forces a horizontal scroll. Pull them in close to
   the carousel so they stay on-screen. */
@media (min-width: 769px) and (max-width: 1200px) {
    .facilities .facilities-wrapper > .carousel-arrow.carousel-prev.facilities-arrow { margin-left: -2rem !important; }
    .facilities .facilities-wrapper > .carousel-arrow.carousel-next.facilities-arrow { margin-right: -2rem !important; }
}

.facility-item {
    flex: 0 0 auto;
    width: 10rem;
    height: 9.5rem;
    background: white;
    border-radius: 0.625rem;
    box-shadow: 0 2px 8px rgba(128, 128, 128, 0.6);
    text-align: center;
    cursor: pointer;
    padding: 1.25rem 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

/* Top row cards: match bottom row's downward shadow direction */
.facilities > .facilities-wrapper:first-child .facility-item {
    box-shadow: 0 2px 8px rgba(128, 128, 128, 0.6);
}

.facility-item:hover {
    transform: translateY(-0.625rem);
}

.facility-item img {
    width: 4.5rem;
    height: 4.5rem;
    max-width: 100%;
    margin-bottom: 0.75rem;
}

/* Navigation arrows */
.facilities .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    background-color: #d81b60;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    line-height: 2.5rem;
    text-align: center;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(216, 27, 96, 0.5);
}

.facilities .nav-arrow.left {
    left: 0.625rem;
}

.facilities .nav-arrow.right {
    right: 0.625rem;
}

.facility-item p {
    font-size: 1rem;
    color: #0b336f;
    font-weight: 800;
}

/* Leadership Section */
.leadership {
    /* Facilities above ends with margin-bottom:-8.25rem, so its last card row
       hangs that far into this section. Clear it, plus a little breathing room -
       anything under ~8.5rem and the facility cards land on the heading. */
    padding: 10.5rem 1.25rem 2rem;     /* extra top padding pushes "Our Leadership" further down */
    background: #fff;
    text-align: center;
}

.leadership h2 {
    font-size: 2rem;
    color: #0b336f;
    margin-bottom: 0.25rem;
    font-weight: 900;
    position: relative;
    z-index: 5;
    display: inline-block;
    padding: 0 1.875rem;
}

.leadership h2::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -2.5rem;
    width: 3.75rem;
    height: 0.375rem;
    background-color: #d81b60;
    border-radius: 0.625rem;
    transform: translateY(-50%);
}

.leadership h2::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -2.5rem;
    width: 3.75rem;
    height: 0.375rem;
    background-color: #d81b60;
    border-radius: 0.625rem;
    transform: translateY(-50%);
}

.leadership-grid {
    display: grid;
    /* Two columns, with the first card spanning both: the Anushasta (sort_order 0)
       gets a row to himself and the other two sit side by side underneath. Bound to
       first-child, not to a name or slug, so the leading card and the top card can
       never disagree. justify-items:center keeps the spanning card centred. */
    /* max-content, not 1fr: a 1fr column stretched to its share of the grid and
       the card sat centred inside it, so dead track space padded the pair apart no
       matter what gap said. Content-sized columns hug the cards, which makes the
       visible gap the gap value. justify-content centres the pair. */
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    justify-items: center;
    /* Row gap pulled right in; the horizontal gap between the lower pair stays. */
    gap: 0 4rem;
    /* Sized to the cards, not to the page. At 90rem each column ran ~43rem wide
       while a card is only 29rem, so 7rem of dead space sat on either side of
       both cards and the pair drifted 16rem apart. At 66rem the columns hug the
       cards and the visible gap is close to the 2rem gap above. */
    max-width: 66rem;
    margin: 0 auto;
    padding: 0 1rem;
}
.leadership-grid .leader-card:first-child { grid-column: 1 / -1; }

/* ── Leadership — colored block + overlapping photo ── */
.leader-card {
    /* Every dimension below is derived from this one length, so a card is
       resized by changing --card alone. The multipliers are the original
       fixed values divided by the original 20rem photo. */
    --card: 20rem;
    width: 100%;            /* fills its grid cell */
    max-width: calc(var(--card) * 1.45);
    min-width: 0;           /* allows shrinking when zoomed */
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.leader-card:hover { transform: translateY(-0.4rem); }

.leader-top {
    display: flex;
    align-items: flex-end;   /* text → bottom of photo */
    gap: 0;
    width: 100%;
}

/* Photo column: uniform rounded photo with an offset colored accent block */
.leader-photo {
    position: relative;
    width: var(--card);
    height: var(--card);
    flex-shrink: 0;
}
/* Colored accent card behind the cut-out photo */
.image-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--card) * 0.65);  /* pink card height — independent of photo height */
    border-radius: 0.85rem;
    z-index: 1;
}
.image-bg.pink-bg { background: #e3007c; }
.image-bg.blue-bg { background: #2a7fc1; }
.image-bg.gray-bg { background: #b5b5b5; }

.leader-image {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;            /* show the whole cut-out person */
    object-position: left bottom;   /* person aligned to left of the card */
    z-index: 2;
}

/* Text column — overlaps onto the photo's bottom-right */
.leader-info {
    flex: 0 1 auto;
    text-align: left;                        /* left-align all text */
    max-width: calc(var(--card) * 0.7);
    min-width: 0;
    position: relative;
    z-index: 3;                              /* above the photo */
    margin-left: calc(var(--card) * -0.45);  /* pull text onto the picture */
    margin-bottom: calc(var(--card) * -0.02);
    padding: calc(var(--card) * 0.0175) calc(var(--card) * 0.045);
    background: #ffffff;                     /* solid white backing */
    border-radius: 0.6rem;
    box-shadow: 0 0.2rem 0.7rem rgba(0, 0, 0, 0.12);
}
.leader-title {
    font-size: calc(var(--card) * 0.04);
    color: #0b336f;
    font-style: italic;
    line-height: 1.35;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.leader-card h3 {
    font-size: calc(var(--card) * 0.0675);
    font-weight: 800;
    color: #0b336f;
    line-height: 1.2;
    margin-bottom: 0.55rem;
}
.leader-desc {
    font-size: calc(var(--card) * 0.037);
    color: #0b336f;
    font-weight: 700;
    line-height: 1.5;
    
}

.read-more-btn {
    display: inline-block;
    text-decoration: none;
    background: transparent;
    color: #d81b60;
    border: 2px solid #d81b60;
    padding: 0.4rem 1.6rem;
    border-radius: 1.5rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.82rem;
    margin-top: 0.6rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.read-more-btn:hover {
    background: #d81b60;
    color: #fff;
}

/* The first card sits alone on its row and carries the section, so everything in
   it is scaled 1.2x from the values above. Explicit sizes rather than
   transform:scale(): scale() would fight the hover translateY, and it would soften
   the photo. At 24rem the image still renders below its 471px source, so it stays
   sharp. Desktop only - below 1025px the cards are already tight in their columns. */
@media (min-width: 1025px) {
    /* Shrink the photo+text block to its own width instead of stretching it across
       the card. The card box is wider than what is drawn inside it (the info panel
       is pulled back over the photo by a negative margin), so at width:100% the
       block sat flush left while the Read more button below it centred on the box -
       which also left the one-card row and the two-card row off from each other.
       align-items:center on .leader-card now centres the block, the button, and
       both rows on the same axis. */
    .leadership-grid .leader-top { width: auto; }

    /* The Anushasta keeps the full size; the two below him step down, which
       shortens the whole section and still reads as a hierarchy. One number
       per card - everything inside scales from it. */
    .leadership-grid .leader-card:not(:first-child) { --card: 16.5rem; }
}

/* ============================================================
   Page Builder Blocks
   ============================================================ */
.block { margin: 2rem 0; }
.block-btn { display:inline-block; background:#d81b60; color:#fff; padding:.7rem 1.6rem; border-radius:30px; text-decoration:none; font-weight:700; transition:.25s; }
.block-btn:hover { background:#3a1c71; transform:translateY(-2px); }
.block-btn-light { background:#fff; color:#d81b60; }

/* Hero */
.block-hero { position:relative; border-radius:12px; overflow:hidden; background-size:cover; background-position:center; color:#fff; }
.block-hero.hero-small  { min-height:200px; }
.block-hero.hero-medium { min-height:350px; }
.block-hero.hero-large  { min-height:500px; }
.block-hero.hero-full   { min-height:90vh; }
.block-hero-overlay.on  { position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,0,0,.55),rgba(0,0,0,.3)); }
.block-hero-inner { position:relative; z-index:2; padding:3rem; display:flex; flex-direction:column; justify-content:center; min-height:inherit; }
.block-hero-inner.align-left   { align-items:flex-start; text-align:left; }
.block-hero-inner.align-center { align-items:center; text-align:center; }
.block-hero-inner.align-right  { align-items:flex-end; text-align:right; }
.block-hero h2 { font-size:clamp(1.8rem,4vw,3rem); font-weight:900; margin:0 0 .5rem; }
.block-hero .hero-sub { font-size:1.2rem; opacity:.95; margin:0 0 1rem; }

/* Text */
.block-text.text-left { text-align:left; }
.block-text.text-center { text-align:center; }
.block-text.text-right { text-align:right; }
.block-text.text-justify { text-align:justify; }
.block-text.width-narrow { max-width:700px; margin-left:auto; margin-right:auto; }
.block-text.width-medium { max-width:900px; margin-left:auto; margin-right:auto; }
.block-text.width-wide   { max-width:1200px; margin-left:auto; margin-right:auto; }

/* Image */
.block-image.align-center { text-align:center; }
.block-image.align-right  { text-align:right; }
.block-image.width-small  img { max-width:300px; }
.block-image.width-medium img { max-width:500px; }
.block-image.width-large  img { max-width:800px; }
.block-image.width-full   img { width:100%; }
.block-image img.rounded-img { border-radius:12px; box-shadow:0 .3rem 1rem rgba(0,0,0,.12); }
.image-caption { font-size:.85rem; color:#777; margin-top:.5rem; font-style:italic; }

/* Gallery */
.block-gallery { display:grid; }
.block-gallery.cols-2 { grid-template-columns:repeat(2,1fr); }
.block-gallery.cols-3 { grid-template-columns:repeat(3,1fr); }
.block-gallery.cols-4 { grid-template-columns:repeat(4,1fr); }
.block-gallery.cols-5 { grid-template-columns:repeat(5,1fr); }
.block-gallery.gap-none   { gap:0; }
.block-gallery.gap-small  { gap:.5rem; }
.block-gallery.gap-medium { gap:1rem; }
.block-gallery.gap-large  { gap:1.5rem; }
.block-gallery img { width:100%; height:200px; object-fit:cover; border-radius:8px; transition:transform .25s; cursor:pointer; }
.block-gallery img:hover { transform:scale(1.03); }

/* Two Column */
.block-two-column { display:grid; gap:2rem; align-items:center; }
.block-two-column.ratio-1-1 { grid-template-columns:1fr 1fr; }
.block-two-column.ratio-1-2 { grid-template-columns:1fr 2fr; }
.block-two-column.ratio-2-1 { grid-template-columns:2fr 1fr; }
.block-two-column.image-right { direction:rtl; }
.block-two-column.image-right > * { direction:ltr; }
.block-two-column .bc-image img { width:100%; border-radius:12px; }
@media (max-width:768px) { .block-two-column { grid-template-columns:1fr !important; } }

/* Video */
.block-video.width-narrow { max-width:700px; margin-left:auto; margin-right:auto; }
.block-video.width-medium { max-width:900px; margin-left:auto; margin-right:auto; }
.block-video.width-wide   { max-width:1200px; margin-left:auto; margin-right:auto; }
.video-wrap { position:relative; padding-bottom:56.25%; height:0; }
.video-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border-radius:8px; }

/* CTA */
.block-cta { padding:3rem 2rem; text-align:center; border-radius:14px; }
.block-cta h2 { font-size:2rem; font-weight:800; margin-bottom:.6rem; }
.block-cta p  { font-size:1.1rem; opacity:.92; margin-bottom:1.4rem; }

/* FAQ */
.block-faq h3 { margin-bottom:1rem; color:#0b336f; }
.faq-item { background:#fff; border:1px solid #e0e0e0; border-radius:8px; margin-bottom:.6rem; padding:.8rem 1rem; }
.faq-item summary { font-weight:700; cursor:pointer; color:#0b336f; }
.faq-item .faq-answer { margin-top:.5rem; padding-top:.5rem; border-top:1px solid #eee; color:#555; }

/* Stats */
.block-stats { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; text-align:center; padding:2rem 0; }
.block-stats .stat { flex:1; min-width:140px; padding:1rem; }
.stat-icon  { font-size:2rem; color:#d81b60; margin-bottom:.5rem; }
.stat-number { font-size:2.5rem; font-weight:900; color:#0b336f; line-height:1; }
.stat-suffix { font-size:1.3rem; color:#d81b60; }
.stat-label { color:#555; font-size:.9rem; margin-top:.3rem; }

/* Team Cards */
.team-title { text-align:center; margin-bottom:1.5rem; color:#0b336f; }
.team-grid { display:grid; gap:1.5rem; }
.team-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.team-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.team-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.team-card { background:#fff; border-radius:12px; padding:1.2rem; text-align:center; box-shadow:0 .3rem 1rem rgba(0,0,0,.08); }
.team-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; max-width:140px; margin:0 auto .8rem; }
.team-card h4 { color:#0b336f; margin:.4rem 0; }
.team-card .team-role { color:#d81b60; font-weight:600; font-size:.9rem; }
.team-card p { color:#666; font-size:.85rem; }
@media (max-width:768px) { .team-grid { grid-template-columns:1fr !important; } }

/* Quote */
.block-quote { padding:1.5rem; margin:1.5rem 0; }
.block-quote.style-bordered { border-left:4px solid #d81b60; background:#fafafa; }
.block-quote.style-filled   { background:linear-gradient(135deg,#d81b60,#3a1c71); color:#fff; border-radius:12px; }
.block-quote.style-minimal  { text-align:center; font-style:italic; }
.quote-text { font-size:1.15rem; line-height:1.5; }
.quote-author-img { width:50px; height:50px; border-radius:50%; vertical-align:middle; margin-right:.5rem; }
.quote-role { color:#777; font-weight:normal; }

/* Map */
.block-map iframe { border-radius:8px; }

/* Divider */
.block-divider.spacing-small  { margin:1rem 0; }
.block-divider.spacing-medium { margin:2.5rem 0; }
.block-divider.spacing-large  { margin:4rem 0; }
.block-divider.divider-line   { border-top:1px solid var(--divider-color); }
.block-divider.divider-thick  { border-top:3px solid var(--divider-color); }
.block-divider.divider-dots   { border-top:2px dotted var(--divider-color); }
.block-divider.divider-wave   { height:30px; background:repeating-linear-gradient(45deg, var(--divider-color), var(--divider-color) 10px, transparent 10px, transparent 20px); }
.block-divider.divider-space  { border:0; }

/* Bullets */
.block-bullets ul li { padding:.5rem 0; }
.block-bullets h3 { color:#0b336f; margin-bottom:.6rem; }

/* Background section */
.block-background.padding-small  { padding:1.5rem; }
.block-background.padding-medium { padding:3rem 2rem; }
.block-background.padding-large  { padding:5rem 2rem; }
.block-background { border-radius:12px; }
.bg-inner { max-width:900px; margin:0 auto; }

/* Page layouts */
.layout-narrow { max-width:700px; margin:0 auto; padding:2rem 1rem; }
.layout-full-width { max-width:none; padding:0; }
.about-page-wrapper.sidebar-right { flex-direction:row-reverse; }

/* ============================================================
   Enhanced Chatbot — welcome buttons, timestamps, rating,
   language toggle, fullscreen, emoji picker, voice, prompt
   ============================================================ */
.chat-header-lang, .chat-header-fullscreen {
    background: transparent; border: 1px solid rgba(255,255,255,.3);
    color:#fff; padding:.2rem .55rem; margin-left:.4rem;
    border-radius:6px; cursor:pointer; font-size:.78rem; font-weight:600;
}
.chat-header-lang:hover, .chat-header-fullscreen:hover { background: rgba(255,255,255,.18); }

/* Welcome action buttons (WhatsApp/Call/Apply) */
.chat-welcome-actions {
    display:flex; gap:.5rem; flex-wrap:wrap; padding:.5rem 1rem;
}
.chat-action {
    flex:1; min-width:90px; text-align:center; padding:.55rem;
    border-radius:14px; text-decoration:none; font-weight:700; font-size:.85rem;
    color:#fff; transition:.25s ease;
}
.chat-action.wa    { background:#25d366; }
.chat-action.call  { background:#1a73e8; }
.chat-action.apply { background:linear-gradient(135deg,#d81b60,#3a1c71); }
.chat-action:hover { transform:translateY(-2px); opacity:.92; }

/* Message timestamps */
.chat-msg-time {
    font-size:.65rem; color:#999; padding:.1rem 0 0; margin-left:.3rem;
}
.chat-msg.user .chat-msg-time { text-align:right; margin-right:.3rem; }

/* Star rating bar */
.chat-rating-bar {
    display:none; align-items:center; gap:.6rem; padding:.6rem 1rem;
    background:#fff7e6; border-top:1px solid #ffe2bd; font-size:.82rem;
}
.chat-stars span {
    color:#ccc; cursor:pointer; font-size:1.3rem; transition:transform .15s ease;
}
.chat-stars span:hover, .chat-stars span.filled { color:#ffc107; transform:scale(1.15); }

/* Input area extras: emoji & voice buttons */
.chat-input-btn {
    background:transparent; border:0; cursor:pointer; font-size:1.2rem;
    padding:0 .3rem; opacity:.7; transition:.2s;
}
.chat-input-btn:hover { opacity:1; transform:scale(1.15); }
.chat-input-btn.listening { color:#d81b60; animation:micPulse 1s infinite; }
@keyframes micPulse { 50%{transform:scale(1.2);} }

/* Emoji picker */
.chat-emoji-picker {
    display:flex; flex-wrap:wrap; gap:.3rem; padding:.6rem;
    background:#f8f8f8; border-top:1px solid #eee;
}
.chat-emoji-picker span {
    cursor:pointer; font-size:1.3rem; padding:.2rem .35rem; border-radius:6px;
    transition:.15s ease;
}
.chat-emoji-picker span:hover { background:#fff; transform:scale(1.2); }

/* Prompt bubble (auto-open teaser) */
.chat-prompt-bubble {
    position:absolute; bottom:75px; right:0; min-width:170px;
    background:#fff; color:#333; padding:.6rem 1rem; border-radius:14px;
    font-size:.85rem; font-weight:500; box-shadow:0 .4rem 1rem rgba(0,0,0,.15);
    animation:promptBounce .5s ease;
}
.chat-prompt-bubble::after {
    content:''; position:absolute; bottom:-8px; right:20px;
    border-left:8px solid transparent; border-right:8px solid transparent;
    border-top:8px solid #fff;
}
@keyframes promptBounce { 0%{transform:translateY(10px);opacity:0;} 100%{transform:translateY(0);opacity:1;}}

/* Mobile fullscreen mode */
.chat-widget.fullscreen .chat-window {
    position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important;
    border-radius:0 !important; bottom:0 !important; right:0 !important;
}
@media (max-width:600px) {
    .chat-widget.open .chat-window {
        width:100vw; height:100vh; bottom:0; right:0; border-radius:0;
    }
}

/* ============================================================
   Menu badges + external link icons + dividers / headings
   ============================================================ */
.menu-badge {
    display: inline-block;
    background: #d81b60;
    color: #fff !important;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.12rem 0.45rem;
    border-radius: 0.7rem;
    margin-left: 0.4rem;
    vertical-align: middle;
    line-height: 1.2;
    animation: menuBadgePulse 2.2s ease-in-out infinite;
}
@keyframes menuBadgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.ext-icon {
    display: inline-block;
    font-size: 0.78em;
    margin-left: 0.25rem;
    opacity: 0.75;
    transform: translateY(-0.05em);
}

/* Section heading inside a menu (non-clickable label) */
.nav-heading,
.footer-heading,
.sidebar-heading {
    font-weight: 800;
    color: #b91e69;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.6rem;
    cursor: default;
}
/* Divider in nav rows / lists */
.nav-divider {
    display: inline-block;
    width: 1px; height: 1rem;
    background: rgba(255,255,255,0.35);
    margin: 0 0.5rem;
    vertical-align: middle;
}
.footer-divider {
    border: 0; border-top: 1px solid rgba(255,255,255,0.22);
    margin: 0.5rem 0;
}

/* Mega menu banner image (set via admin) */
.mega-banner img {
    width: 100%; height: auto;
    border-radius: 0.5rem;
    margin-bottom: 0.8rem;
}
.mega-menu[data-cols="3"] .mega-menu-inner { grid-template-columns: repeat(3, 1fr); }
.mega-menu[data-cols="4"] .mega-menu-inner { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   Homepage Slider (admin-managed)
   ============================================================ */
.home-slider {
    position: relative;
    width: 100%;
    height: 32rem;
    overflow: hidden;
    background: #0b336f;
}
.home-slider .slides-track { position: relative; width: 100%; height: 100%; }
.home-slider .slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 1;
}
.home-slider .slide.active { opacity: 1; z-index: 2; }
.home-slider .slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
    display: flex; align-items: center;
    padding: 0 clamp(1.5rem, 6vw, 6rem);
}
.home-slider .slide-content { max-width: 38rem; color: #fff; }
.home-slider .slide-title    { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; line-height: 1.1; margin-bottom: .5rem; }
.home-slider .slide-subtitle { font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 600; opacity: .92; margin-bottom: .8rem; }
.home-slider .slide-desc     { font-size: 1rem; line-height: 1.5; opacity: .9; margin-bottom: 1.2rem; }
.home-slider .slide-btn {
    display: inline-block; background: #d81b60; color: #fff;
    padding: .7rem 1.8rem; border-radius: 2rem;
    text-decoration: none; font-weight: 700;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 .5rem 1rem rgba(216,27,96,.4);
}
.home-slider .slide-btn:hover { transform: translateY(-2px); box-shadow: 0 .7rem 1.4rem rgba(216,27,96,.55); }

.home-slider .slide-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.2); color: #fff; border: 0;
    width: 3rem; height: 3rem; border-radius: 50%;
    font-size: 1.4rem; cursor: pointer; z-index: 5;
    backdrop-filter: blur(4px); transition: background .25s ease;
}
.home-slider .slide-nav:hover { background: rgba(255,255,255,.35); }
.home-slider .slide-nav.prev { left: 1.2rem; }
.home-slider .slide-nav.next { right: 1.2rem; }

.home-slider .slide-dots {
    position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
    display: flex; gap: .6rem; z-index: 5;
}
.home-slider .dot {
    width: .8rem; height: .8rem; border-radius: 50%;
    background: rgba(255,255,255,.5); cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}
.home-slider .dot.active { background: #d81b60; transform: scale(1.3); }

@media (max-width: 768px) {
    .home-slider { height: 22rem; }
    .home-slider .slide-nav { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
}

/* Video Section */
.video-section {
    padding: 0;
    margin: 0;
    background: #000;
    line-height: 0;
}

.video-section video {
    width: 100%;
    display: block;
    height: 500px;
    object-fit: cover;
}

.video-wrapper img {
    width: 100%;
    max-width: 100%;
    border-radius: 0.625rem;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.75rem;
    color: white;
    background: rgba(216, 27, 96, 0.7);
    border-radius: 50%;
    padding: 0.9375rem 1.25rem;
}

/* Scroll Reveal – Fade Up */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Info Sections: News, Notices, Academic Events */
.info-sections {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1.875rem;
    padding: 2.5rem 1.25rem;
    background: #f0f0f0;
    flex-wrap: wrap;
}

.info-sections > div {
    width: 29.375rem;
    max-width: 100%;
    background: transparent;
    border-radius: 0;
    border: none;
    padding: 1.25rem;
    box-sizing: border-box;
    box-shadow: none;
    position: relative;
    display: flex;
    flex-direction: column;
}

.section-title {
    font-size: 1.8rem;
    color: #0b336f;
    font-weight: 900;
    margin-bottom: 0.9375rem;
    position: relative;
    padding-left: 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.9375rem;
}

.section-title::after {
    content: "";
    display: inline-block;
    width: 2.5rem;
    height: 0.375rem;
    background-color: #d81b60;
    border-radius: 0.625rem;
    flex-shrink: 0;
}

.info-sections h3 {
    font-size: 1.2rem;
    margin-bottom: 0.625rem;
    font-weight: 700;
}

.info-sections p {
    font-size: 1rem;
    color: #0b336f;
    margin-bottom: 0.9375rem;
}

.info-card {
    background: white;
    border-radius: 0.625rem;
    padding: 1.25rem;
    margin-bottom: 0;
    font-size: 1rem;
    color: #0b336f;
    cursor: pointer;
    transition: transform 0.3s ease;
    border: 1px solid #ddd;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.06);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.info-card .read-more-btn {
    background: #d81b60;
    border: none;
    color: white;
    font-weight: 700;
    cursor: pointer;
    padding: 0.5rem 1.25rem;
    margin-top: auto;
    font-size: 0.9rem;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.3s ease;
    margin-left: auto;
    width: fit-content;
    text-decoration: none;
}

.info-card .read-more-btn:hover {
    background: #b3154a;
    color: white;
}

.info-card .read-more-btn::after {
    content: "▶";
    font-size: 0.8rem;
    color: white;
    background: #d81b60;
    border: 2px solid white;
    border-radius: 50%;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
}

.tab-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 0.3rem 0.3rem 0 0;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    color: white;
    background-color: #d81b60;  /* default / inactive: pink */
    transition: background-color 0.3s ease;
    flex: 1;
    text-align: center;
}

.tab-btn.active {
    background-color: #2a7ccf;  /* active: blue */
}

.tab-btn:not(.active):hover {
    background-color: #b3154a;  /* darker pink on hover */
}

.events-section .info-card {
    border-left: none;
}

.events-section .info-card p {
    margin-bottom: 0.4rem;
}

/* University Visitors Section */
.university-visitors {
    padding: 3rem 2rem;
    background: #fff;
    text-align: center;
}

.university-visitors h2 {
    font-size: 2.2rem;
    color: #0b336f;
    margin-bottom: 2.5rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.university-visitors h2::before,
.university-visitors h2::after {
    content: "";
    width: 3rem;
    height: 0.25rem;
    background: #2981c2;
    border-radius: 0.25rem;
}

.visitors-grid {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

/* Visitors carousel — same arrow pattern as partners */
.visitors-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 88rem;             /* wider than partners so all 5 visitor cards fit */
    margin: 0 auto;
    padding: 0 1rem;
}
.visitors-carousel {
    display: flex;
    align-items: flex-start;       /* photos align on one line regardless of text length */
    gap: 2rem;
    overflow: hidden;
    flex: 1;
    justify-content: flex-start;   /* clean left edge — no half cards */
    scroll-behavior: smooth;
}
.visitors-carousel .visitor-card { flex-shrink: 0; }

.visitor-card {
    flex: 0 0 calc((100% - 4 * 2rem) / 5);   /* exactly 5 cards per view */
    text-align: center;
    cursor: pointer;
}
.visitor-card h4 { white-space: normal; }

.visitor-card img {
    width: 11rem;
    height: 11rem;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.visitor-card h4 {
    font-size: 1rem;
    color: #0b336f;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.visitor-card p {
    font-size: 0.85rem;
    color: #0b336f;
}

/* Partners and Affiliates Section */
.partners-affiliates {
    padding: 3rem 2rem;
    background: #fff;
    text-align: center;
}

.partners-affiliates h2 {
    font-size: 2.2rem;
    color: #0b336f;
    margin-bottom: 2rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.partners-affiliates h2::before,
.partners-affiliates h2::after {
    content: "";
    width: 3rem;
    height: 0.25rem;
    background: #2981c2;
    border-radius: 0.25rem;
}

.partners-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 75rem;
    margin: 0 auto;
}

.carousel-arrow {
    background: none;
    border: 2px solid #2981c2;
    color: #2981c2;
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.carousel-arrow:hover {
    background: #2981c2;
    color: #fff;
}

.partners-carousel {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    overflow: hidden;
    flex: 1;
    justify-content: flex-start;
    scroll-behavior: smooth;
}

.partners-carousel img {
    flex: 0 0 12rem;            /* uniform slot so every logo gets equal space */
    width: 12rem;
    height: 5rem;
    max-width: 12rem;
    object-fit: contain;       /* logo scales to fit inside the slot, never overflows */
    cursor: pointer;
}

/* Footer */
footer {
    background: #2981c2;
    color: #ccc;
    padding: 1rem 1.25rem;
    position: relative;
}

/* Disclosure link pinned to the right of the footer menu columns */
.footer-disclosure {
    position: absolute;
    top: 11.5rem;
    right: 1rem;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2.5rem;
    background: #f5f5f5;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #2981c2;
    gap: 3rem;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 2.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-right: 1px solid #ccc;
}

.footer-contact h2 {
    color: #3a1c71;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    padding-bottom: 0.375rem;
    border-bottom: 3px solid #d81b60;
    display: inline-block;
}

.footer-contact p {
    margin: 0;
    color: #003366;
}

.contact-heading {
    display: flex;
    flex-direction: column;
}

.contact-grid {
    display: flex;
    gap: 3.75rem;
    align-items: flex-start;
}

.contact-col {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.application-form-btn {
    background: #d81b60;
    color: white;
    border: none;
    padding: 0.75rem 1.875rem;
    border-radius: 1.5625rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.application-form-btn:hover {
    background: #b3154a;
}

/* Footer right-side stack: disclosure link + application button */
.footer-top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.7rem;
}

/* Attractive animated "Public Self Disclosure" link */
.disclosure-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.4rem;
    border-radius: 1.5625rem;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.98rem;
    color: #fff;
    background: linear-gradient(135deg, #d81b60 0%, #3a1c71 100%);
    box-shadow: 0 0 0 0 rgba(216, 27, 96, 0.55);
    animation: disclosure-glow 2s ease-in-out infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    white-space: nowrap;
}
.disclosure-link:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0.4rem 1.1rem rgba(58, 28, 113, 0.45);
    animation-play-state: paused;
}
.disclosure-icon {
    font-size: 1.1rem;
    line-height: 1;
}
.disclosure-text {
    line-height: 1.15;
    text-align: center;
    background: linear-gradient(90deg, #fff, #ffe3f0, #fff);
    -webkit-background-clip: text;
    background-clip: text;
}
.disclosure-new {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: #fff;
    background: #ff1744;
    padding: 0.12rem 0.4rem;
    border-radius: 0.7rem;
    animation: disclosure-blink 1s steps(1) infinite;
}

@keyframes disclosure-glow {
    0%   { box-shadow: 0 0 0 0 rgba(216, 27, 96, 0.55); }
    70%  { box-shadow: 0 0 0 0.7rem rgba(216, 27, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(216, 27, 96, 0); }
}
@keyframes disclosure-blink {
    0%, 50%  { opacity: 1; }
    51%, 100% { opacity: 0.25; }
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.5fr 0.85fr;
    gap: 1.5rem 1.75rem;
    justify-content: center;
    padding: 0 4%;
    max-width: 84rem;
    margin: 0 auto;
    align-items: start;
}

@media (max-width: 768px) {
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        padding: 0 1.25rem;
    }
}

@media (max-width: 480px) {
    .footer-links {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
}

.footer-column {
    min-width: 0;
}

.footer-column h2 {
    color: white;
    margin-bottom: 0.625rem;
    font-weight: 900;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 0.25rem;
}

.footer-column ul li a {
    color: white;
    font-size: 1rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.footer-column ul li a:hover {
    color: #d81b60;
}

/* Additional Info Section Styles */
.additional-info {
    padding: 2.5rem 1.25rem 8.125rem;
    max-width: 87.5rem;
    margin: 0 auto;
}

.info-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.625rem;
    height: 31.25rem;
}

.info-block {
    position: relative;
    border-radius: 0.625rem;
    overflow: hidden;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.info-block:hover {
    transform: translateY(-0.3125rem);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.info-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.info-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.info-text {
    position: relative;
    z-index: 2;
}

.info-text h3 {
    font-size: 0.8rem;
    margin-bottom: 1.25rem;
    color: white;
    font-weight: 600;
    line-height: 1.4;
}

.info-text1 {
    position: relative;
    z-index: 2;
    align-self: flex-end;
    text-align: right;
}

.info-text1 h3 {
    font-size: 0.8rem;
    margin-top: 0;
    margin-right: 2px;
    margin-bottom: 0.625rem;
    margin-left: 0;
    color: white;
    font-weight: 600;
    line-height: 1.5;
}

.know-more {
    color: white;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.know-more:hover {
    transform: translateX(0.3125rem);
}

/* Grid positioning for 3-block layout */
.top-left {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.top-right {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.bottom-right {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* Background colors matching reference image */
.green-bg::before {
    background-image: url('images/distance-education.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.blue-bg::before {
    background-image: url('images/naturopathy-hospital.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.darkblue-bg::before {
    background-image: url('images/oriental-studies.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Responsive adjustments for info section */
@media (max-width: 768px) {
    .additional-info {
        padding: 1.25rem 0.625rem;
    }

    .info-container {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        height: auto;
    }

    .info-block {
        min-height: 12.5rem;
        padding: 1.875rem;
    }

    .info-text h3 {
        font-size: 1.4rem;
    }

    .know-more {
        font-size: 1rem;
    }

    .top-left, .top-right, .bottom-right {
        grid-column: auto;
        grid-row: auto;
    }

    /* Show the same photo backgrounds on mobile as desktop. The desktop design
       leans on each image's own colour panel behind the text, which crops away
       at mobile aspect — so add a dark overlay + bottom-anchored text so the
       heading stays readable over the photo. */
    .info-block {
        min-height: 14rem;
        justify-content: flex-end;
    }
    .info-block::after {
        z-index: 1;                                   /* sits above the photo (::before) */
        background: linear-gradient(180deg, rgba(0,0,0,.10) 35%, rgba(0,0,0,.68));
    }
    .info-text h3,
    .know-more { text-shadow: 0 1px 5px rgba(0,0,0,.75); }
}

.deemed {
    border-top: 3px solid #d81b60;
    border-bottom: 3px solid #d81b60;
    padding: 0;
    display: inline-block;
    font-weight: 900;
    font-size: 1rem;
}

/* Filter buttons for Programmes We Offer */
.programmes-filter {
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: center;
    gap: 0.9375rem;
}

.filter-btn {
    background: white;
    border: 2px solid #2a7ccf;
    color: #2a7ccf;
    padding: 0.5rem 1.25rem;
    border-radius: 1.5625rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.filter-btn.active {
    background: #2a7ccf;
    color: white;
}

/* ============================================
   HAMBURGER MENU TOGGLE
   ============================================ */
.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #0b336f;
    cursor: pointer;
    padding: 0.3125rem 0.625rem;
    z-index: 10;
}

.nav-wrapper {
    position: relative;
}

/* ============================================
   RESPONSIVE - TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .top-bar {
        padding: 0.5rem 0.625rem;
        overflow-x: auto;
    }
    .top-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.3125rem;
    }
    .top-nav a {
        font-size: 0.7rem;
        margin-left: 0.5rem;
        padding-right: 0.625rem;
    }
    .main-header {
        padding: 0.625rem 0.9375rem;
        flex-wrap: wrap;
        gap: 0.625rem;
    }
    .logo img {
        height: 4.375rem;
    }
    .naac img, .iso img, .years img {
        height: 3.125rem;
    }
    .naac, .iso, .years {
        padding: 0.625rem;
    }
    .hero {
        flex-wrap: wrap;
        gap: 1.25rem;
        padding: 1.875rem 0.9375rem;
    }
    .hero-text h2 {
        font-size: 3rem;
    }
    .hero-image {
        max-width: 100%;
    }
    .hero-image img {
        width: 21.875rem;
        height: 21.875rem;
    }
    .star-image, .star-image2 {
        display: none;
    }
    .programme-card {
        width: 17.5rem;
        height: auto;
    }
    .programme-card img {
        width: calc(100% - 1.875rem);
        height: 13.75rem;
    }
    .facilities {
        padding: 1.875rem 1.25rem;
    }
    .facilities-grid {
        gap: 2.5rem;
        justify-content: center;
    }
    .facilities > .facilities-wrapper:first-child {
        margin-top: -3.125rem;
    }
    .facilities > .facilities-wrapper:last-of-type {
        margin-bottom: -3.125rem;
    }
    .leadership {
        padding: 5rem 1.25rem 6.25rem;
    }
    .leadership-grid {
        gap: 1.25rem;
        /* Two columns here too, so the 1-above-2 shape holds. auto-fit used to
           give three columns around 981-1024px, which left the second row
           off-centre once the first card began spanning. */
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }
    .leader-card {
        max-width: 20rem;
    }
    .info-sections > div {
        width: 100%;
        max-width: 29.375rem;
    }
    .footer-column {
        min-width: 12.5rem;
    }
    .footer-links {
        gap: 1.875rem;
    }
}

/* ============================================
   RESPONSIVE - TABLETS: Hamburger nav from 1024px down
   ============================================ */
@media (max-width: 1024px) {
    .hamburger {
        display: block !important;
        align-self: flex-end;
        margin-right: 0.625rem;
        padding: 0.5rem 0.75rem;
        font-size: 1.6rem;
    }
    .nav-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .main-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        width: 100%;
    }
    .main-nav.open {
        /* Grow to full content height and let the PAGE scroll. The header is
           NOT sticky, so an internal scroll box (max-height: 100vh - 8rem)
           only pushed its own bottom off-screen — hiding the last submenu
           items (e.g. the tail of a long "Quick Links" list) even after
           scrolling. A large max-height keeps the open/close slide animation
           while never clipping real content; overflow stays hidden (inherited)
           and content always fits, so nothing is cut. */
        max-height: 500vh;
        padding: 0.625rem 0;
        background: #fff;
        border-top: 1px solid #eee;
    }
    .main-nav > a,
    .main-nav > .nav-dropdown { margin: 0; width: 100%; }
    .main-nav > a,
    .main-nav > .nav-dropdown > a {
        padding: 0.75rem 1.25rem;
        width: 100%;
        text-align: left;
        font-size: 1rem;
        border-bottom: 1px solid #eee;
    }
    .main-nav > a:not(:last-child)::after,
    .main-nav > .nav-dropdown:not(:last-child)::after { display: none; }
    /* Hide desktop-only inline nav item separators */
    .main-nav .nav-divider { display: none; }

    /* Dropdown parent — space for + icon on right, left-aligned text */
    .main-nav > .nav-dropdown { flex-direction: column; align-items: stretch; }
    .main-nav > .nav-dropdown > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        position: relative;
        padding-right: 3rem !important;
        padding-left: 1.25rem !important;
        text-align: left !important;
    }
    /* Override desktop pink divider on ::after — use higher specificity + !important */
    .main-nav > .nav-dropdown:not(:last-child) > a::after,
    .main-nav > .nav-dropdown:last-child > a::after,
    .main-nav > .nav-dropdown > a::after {
        content: '\25BE' !important;   /* ▾ down arrow (was +) */
        position: absolute !important;
        right: 1.25rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 26px !important;
        height: 26px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #0b336f !important;
        color: #fff !important;
        border-radius: 50% !important;
        font-size: 1.15rem !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        transition: transform 0.25s ease, background 0.2s ease;
    }
    /* Plain items (Home, Distance Education if not dropdown) — no + icon, hide divider */
    .main-nav > a:not(:last-child)::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
    }
    .main-nav > .nav-dropdown.mobile-open > a::after {
        content: '\25BE' !important;   /* ▾ same down arrow; the rule below rotates it 180° so it points up when open */
        transform: translateY(-50%) rotate(180deg) !important;
        background: #b91e69 !important;
    }

    /* Hide mega-menu/dropdown-content by default, show only when parent is open */
    .mega-menu, .dropdown-content {
        position: static !important;
        display: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: #f5f5f5 !important;
        padding: 0 !important;
        animation: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .nav-dropdown.mobile-open .mega-menu,
    .nav-dropdown.mobile-open .dropdown-content {
        display: block !important;
    }
    .mega-menu-inner { flex-direction: column; max-width: 100%; }
    .mega-col { border-right: none !important; max-width: 100% !important; padding: 0.25rem 1.25rem !important; }
    .mega-col-title { text-align: left; padding-left: 1.25rem; }
    .dropdown-content a, .mega-col a { text-align: left; justify-content: flex-start; padding: 0.6rem 1.25rem; }

    /* Nested (mega-sub) toggles get + icon too */
    .main-nav .mega-sub-toggle {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        padding-right: 2.75rem !important;
        position: relative;
    }
    .main-nav .mega-sub-toggle .mega-arrow {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #b91e69;
        color: #fff;
        border-radius: 50%;
        font-size: 1rem;
        transition: transform 0.25s ease;
    }
    .main-nav .mega-sub-toggle .mega-arrow::before { content: '+'; }
    .main-nav .mega-sub.open > .mega-sub-toggle .mega-arrow {
        transform: translateY(-50%) rotate(180deg);
        background: #0b336f;
    }
    .main-nav .mega-sub.open > .mega-sub-toggle .mega-arrow::before { content: '\2212'; }
    .main-nav .mega-sub .mega-sub-list { display: none; padding-left: 1rem; }
    .main-nav .mega-sub.open > .mega-sub-list { display: block; }
    .main-nav .mega-col > a .mega-arrow { display: none; }
}

/* ============================================
   RESPONSIVE - TABLET PORTRAIT (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Show ALL top-bar links on mobile. The bar scrolls horizontally
       (overflow-x:auto + nowrap inherited from the 1024px block), so links
       like Alumni / Careers / Library / Student Login / Contact Us are
       reachable by swiping instead of being hidden with display:none. */
    .top-bar { -webkit-overflow-scrolling: touch; }
    .accessibility-group {
        display: none !important;
    }
    .main-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.625rem;
    }
    .header-contact {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.625rem;
    }
    .naac, .iso, .years {
        padding: 0.3125rem 0.625rem;
    }
    .naac img, .iso img, .years img {
        height: 2.5rem;
    }
    .logo img {
        height: 4.5rem;
    }
    .nav-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .hamburger {
        display: block;
        align-self: flex-end;
        margin-right: 0.625rem;
        padding: 0.5rem 0.75rem;
        font-size: 1.6rem;
    }
    .main-nav {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        width: 100%;
    }
    .main-nav.open {
        max-height: 500vh;   /* see 1024px block: page scrolls, never clips submenu items */
        padding: 0.625rem 0;
    }
    .main-nav > a,
    .main-nav > .nav-dropdown {
        margin: 0;
        width: 100%;
    }
    .main-nav > a,
    .main-nav > .nav-dropdown > a {
        padding: 0.625rem 1.25rem;
        width: 100%;
        text-align: center;
        font-size: 1rem;
        border-bottom: 1px solid #eee;
        justify-content: center;
    }
    .main-nav > a:not(:last-child)::after,
    .main-nav > .nav-dropdown:not(:last-child)::after {
        display: none;
    }

    /* ── Mobile dropdown / mega-menu: tap to expand (no hover needed) ── */
    .main-nav > .nav-dropdown {
        flex-direction: column;
        align-items: stretch;
    }
    .main-nav > .nav-dropdown > a {
        display: flex;
        justify-content: space-between;    /* label left, icon right */
        align-items: center;
        gap: 6px;
        position: relative;
        padding-right: 3rem !important;   /* space for + icon on right */
        padding-left: 1.25rem !important;
        text-align: left !important;
    }
    /* + icon on right — override desktop pink divider with high specificity */
    .main-nav > .nav-dropdown:not(:last-child) > a::after,
    .main-nav > .nav-dropdown:last-child > a::after,
    .main-nav > .nav-dropdown > a::after {
        content: '\25BE' !important;   /* ▾ down arrow (was +) */
        position: absolute !important;
        right: 1.25rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 26px !important;
        height: 26px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #0b336f !important;
        color: #fff !important;
        border-radius: 50% !important;
        font-size: 1.15rem !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        transition: transform 0.25s ease, background 0.2s ease;
    }
    .main-nav > a:not(:last-child)::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
    }
    .main-nav > .nav-dropdown.mobile-open > a::after {
        content: '\25BE' !important;   /* ▾ same down arrow; the rule below rotates it 180° so it points up when open */
        transform: translateY(-50%) rotate(180deg) !important;
        background: #b91e69 !important;
    }
    /* Sub-nested dropdown items (mega-sub) also get + icon */
    .main-nav .mega-sub-toggle {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        padding-right: 2.5rem !important;
        position: relative;
    }
    .main-nav .mega-sub-toggle .mega-arrow {
        position: absolute;
        right: 0.9rem;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #b91e69;
        color: #fff;
        border-radius: 50%;
        font-size: 1rem;
        transition: transform 0.25s ease;
    }
    .main-nav .mega-sub-toggle .mega-arrow::before { content: '+'; }
    .main-nav .mega-sub.open > .mega-sub-toggle .mega-arrow {
        transform: translateY(-50%) rotate(180deg);
        background: #0b336f;
    }
    .main-nav .mega-sub.open > .mega-sub-toggle .mega-arrow::before { content: '\2212'; }
    /* Hide the default > mega arrow for regular links (non-toggle) — keep only on parents */
    .main-nav .mega-col > a .mega-arrow { display: none; }

    /* Hide submenus by default on mobile, even on hover */
    .mega-menu, .dropdown-content {
        position: static !important;
        display: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: #f5f5f5 !important;
        padding: 0 !important;
        animation: none !important;
    }
    /* Show only when the parent is tapped open */
    .nav-dropdown.mobile-open .mega-menu,
    .nav-dropdown.mobile-open .dropdown-content {
        display: block !important;
    }
    .mega-menu-inner { flex-direction: column; max-width: 100%; }
    .mega-col { border-right: none !important; max-width: 100% !important; padding: 0.25rem 1.25rem !important; }
    .mega-col-title { text-align: center; }
    .dropdown-content a, .mega-col a { text-align: center; justify-content: center; }

    .hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.25rem 0.9375rem;
    }
    .hero-text {
        order: 1;
    }
    .hero-text h2 {
        font-size: 2.5rem;
    }
    .hero-text p {
        font-size: 0.9rem;
    }
    .hero-image {
        order: 2;
        max-width: 100%;
        justify-content: center;
    }
    .hero-image img {
        width: 17.5rem;
        height: 17.5rem;
    }
    .badge.welcome {
        top: auto;
        bottom: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.75rem;
        padding: 0.5rem 0.625rem;
        white-space: nowrap;
    }
    .course-info-form {
        order: 3;
        width: 100%;
        max-width: 21.875rem;
    }
    .star-image, .star-image2 {
        display: none;
    }
    .programmes-filter {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .filter-btn {
        padding: 0.375rem 0.875rem;
        font-size: 0.85rem;
    }
    .programmes-grid {
        justify-content: center;
        gap: 0.9375rem;
    }
    .programme-card {
        width: 100%;
        max-width: 20rem;
        height: auto;
    }
    .programme-card img {
        width: calc(100% - 1.25rem);
        height: 13.75rem;
        margin: 0 auto;
    }
    .programmes h2::after {
        display: none;
    }
    .info-container {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 0.9375rem;
    }
    .info-text1 {
        align-self: flex-start;
        text-align: left;
    }
    .info-text1 h3 {
        margin-left: 0;
    }
    /* Facilities — mobile/tablet redesign.
       On desktop, two grids float above/below the section with
       negative margins and a "Facilities" heading sits between them.
       On small screens that creates an awkward sandwich, so we
       reorder the heading to the top with `order` and use CSS Grid
       to lay out cards in a clean 3-column responsive grid. */
    .facilities {
        padding: 1.5rem 1rem 2rem;
        background: #f5f5f5;          /* lighter than darkgray for mobile */
        display: flex;
        flex-direction: column;
    }
    .facilities h2 {
        order: -1;                    /* push heading above both grids */
        margin: 0.5rem auto 1.25rem;
    }
    .facilities > .facilities-wrapper:first-child {
        margin-top: 0;
        order: 0;
    }
    .facilities > .facilities-wrapper:last-of-type {
        margin-bottom: 0;
        order: 0;
        margin-top: 1rem;
    }
    .facilities-wrapper {
        padding: 0 0.25rem;
        gap: 0.4rem;
    }
    /* Grid shows every card on mobile, so the carousel arrows are redundant —
       and their desktop -16rem offset would shove the whole row off-screen. Hide them. */
    .facilities-arrow { display: none !important; }
    .facilities-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        justify-content: stretch;
        flex-wrap: initial;           /* override flex behaviour */
        padding: 0 0.25rem;
    }
    .facility-item {
        width: 100%;                  /* fill grid cell */
        height: auto;
        min-height: 8.75rem;
        padding: 0.85rem 0.5rem;
    }
    .facility-item img {
        width: 3.75rem;
        height: 3.75rem;
        margin-bottom: 0.5rem;
    }
    .facility-item p {
        font-size: 0.85rem;
        margin: 0;
        line-height: 1.25;
    }
    .leadership {
        padding: 1.875rem 0.9375rem;
        padding-bottom: 3.75rem;
    }
    .leadership-grid {
        gap: 1.75rem;
        grid-template-columns: 1fr;              /* stack on real mobile */
    }
    .leader-card {
        width: 100%;
        max-width: 24rem;
    }
    .info-sections {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        padding: 1.875rem 0.9375rem;
    }
    .info-sections > div {
        width: 100%;
        max-width: 100%;
    }
    /* Visitors — target the real `.visitors-carousel` markup, not the
       legacy `.visitors-grid` class. On tablets/phones the desktop
       layout (5 cards × 14rem with overflow:hidden) clips most cards;
       switch to a horizontally-scrollable strip and hide arrows
       (touch swipe handles navigation). */
    .visitors-wrapper {
        gap: 0.5rem;
        padding: 0 0.5rem;
        max-width: 100%;
    }
    .visitors-wrapper .carousel-arrow {
        display: none;            /* swipe instead of arrows on touch */
    }
    .visitors-carousel {
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        gap: 1.25rem;
        padding: 0.5rem 0.25rem 1rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;     /* hide ugly scrollbar */
    }
    .visitors-carousel::-webkit-scrollbar { display: none; }
    .visitor-card {
        flex: 0 0 9rem;   /* override the desktop 1/5-width flex-basis, else photos overflow the card */
        width: 9rem;
        scroll-snap-align: center;
    }
    .visitor-card img {
        width: 7rem;
        height: 7rem;
    }
    .visitor-card h4 {
        white-space: normal;        /* allow long names to wrap */
        font-size: 0.9rem;
        line-height: 1.2;
    }
    .visitor-card p {
        font-size: 0.78rem;
        line-height: 1.25;
    }
    /* Keep the legacy class working in case used elsewhere */
    .visitors-grid {
        gap: 0.9375rem;
    }
    .partners-carousel {
        gap: 1.25rem;
    }
    .partners-carousel img {
        width: 5rem;
        height: 2.5rem;
    }
    .footer-top {
        flex-direction: column;
        padding: 1.25rem 0.9375rem;
        gap: 0.9375rem;
        text-align: center;
    }
    .footer-top-right {
        align-items: center;
        width: 100%;
    }
    .disclosure-link {
        font-size: 0.9rem;
        padding: 0.55rem 1.1rem;
    }
    .footer-disclosure {
        position: static;
        display: flex;
        width: fit-content;
        margin: 1.25rem auto 0;
    }
    .footer-contact {
        flex-direction: column;
        gap: 0.625rem;
        padding: 0.9375rem;
        border-right: none;
    }
    .footer-contact h2 {
        font-size: 1.3rem;
    }
    .contact-grid {
        flex-direction: column;
        gap: 0.625rem;
    }
    .footer-links {
        gap: 1.25rem;
        justify-content: center;
    }
    .footer-column {
        min-width: 8.75rem;
        text-align: center;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .top-bar {
        padding: 0.3125rem 0.5rem;
    }
    .top-nav a {
        font-size: 0.65rem;
        margin-left: 0.3125rem;
        padding-right: 0.5rem;
    }
    /* (no more hiding of top-bar links here — all links stay visible and
       the bar scrolls horizontally; see the 768px block) */
    .logo img {
        height: 2.75rem;
    }
    .header-contact {
        gap: 0.3125rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .naac, .iso, .years {
        padding: 0.1875rem 0.3125rem;
    }
    .naac img, .iso img, .years img {
        height: 1.5rem;
    }
    .main-header {
        padding: 0.5rem;
    }
    .apply-btn {
        padding: 0.375rem 1.25rem;
        font-size: 0.85rem;
    }
    .contact-number {
        padding: 0.3125rem 0.9375rem;
        font-size: 0.85rem;
    }
    .hero {
        padding: 0.9375rem 0.625rem;
    }
    .hero-text h2 {
        font-size: 1.8rem;
    }
    .hero-text p {
        font-size: 0.85rem;
    }
    .apply-now-btn {
        padding: 0.625rem 1.5625rem;
        font-size: 0.9rem;
    }
    .hero-image img {
        width: 13.75rem;
        height: 13.75rem;
    }
    .badge.welcome {
        font-size: 0.65rem;
        padding: 0.3125rem 0.5rem;
        top: auto;
        bottom: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }
    .course-info-form {
        width: 100%;
        padding: 0.9375rem;
    }
    .enq-header h3 { font-size: 1rem; }
    .course-info-form input,
    .course-info-form select {
        padding: 0.5rem;
        font-size: 0.82rem;
    }
    .enq-row-2 { grid-template-columns: 1fr; gap: 0.5rem; }
    .highlights {
        flex-direction: column;
        align-items: center;
        padding: 0.9375rem 0.625rem;
        gap: 0.625rem;
    }
    .highlights img {
        max-width: 80%;
    }
    .programmes {
        padding: 1.25rem 0.625rem;
    }
    .programmes h2 {
        font-size: 1.5rem;
        padding: 0 0.625rem;
    }
    .programmes h2::before,
    .programmes h2::after {
        display: none;
    }
    .programmes-filter {
        gap: 0.3125rem;
    }
    .filter-btn {
        padding: 0.3125rem 0.625rem;
        font-size: 0.75rem;
    }
    .programme-card {
        width: 100%;
        max-width: 18.75rem;
    }
    .programme-card img {
        width: calc(100% - 1rem);
        height: 12.5rem;
    }
    .programme-dept {
        font-size: 0.75rem;
    }
    .view-courses-btn {
        float: none;
        display: block;
        margin: 0.9375rem auto 0;
    }
    .facilities {
        padding: 1.25rem 0.75rem 1.75rem;
    }
    .facilities h2 {
        font-size: 1.4rem;
        margin: 0.25rem auto 1rem;
        padding: 0 0.75rem;
    }
    /* Shorten the decorative side-lines so they don't extend past
       the viewport edge on small phones. */
    .facilities h2::before,
    .facilities h2::after {
        width: 1.5rem;
    }
    .facilities h2::before { left: -2.25rem; }
    .facilities h2::after  { right: -2.25rem; left: auto; }
    .facilities-wrapper {
        gap: 0.3rem;
        padding: 0 0.1rem;
    }
    .facilities-arrow { display: none !important; }
    .facilities-grid {
        grid-template-columns: repeat(2, 1fr);   /* 2 columns on small phones */
        gap: 0.6rem;
        padding: 0 0.1rem;
    }
    .facility-item {
        min-height: 8rem;
        padding: 0.7rem 0.3rem;
        border-radius: 0.5rem;
    }
    .facility-item img {
        width: 3.25rem;
        height: 3.25rem;
        margin-bottom: 0.35rem;
    }
    .facility-item p {
        font-size: 0.75rem;
        line-height: 1.2;
    }
    .leadership {
        padding: 1.25rem 0.625rem;
        padding-bottom: 2.5rem;
    }
    .leadership h2 {
        font-size: 1.5rem;
    }
    .leadership h2::before,
    .leadership h2::after {
        width: 1.875rem;
    }
    .leader-card {
        width: 100%;
        max-width: 22rem;
    }
    .leader-top {
        flex-direction: column;
        align-items: stretch;
    }
    .leader-photo {
        width: 100%;
        max-width: 18rem;
        height: 18rem;
        margin: 0 auto;
    }
    .leader-info {
        margin-left: 0;
        margin-top: -1.5rem;
        margin-bottom: 0;
        max-width: 92%;
        width: 92%;
        align-self: center;
        text-align: center;
        padding: 0.75rem 1rem;
    }
    .leader-card h3 { font-size: 1.15rem; }
    .leader-desc { font-size: 0.8rem; }
    .video-stats {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .play-button {
        font-size: 2.5rem;
        padding: 0.625rem 0.875rem;
    }
    .info-sections {
        padding: 1.25rem 0.625rem;
        gap: 0.9375rem;
    }
    .section-title {
        font-size: 1.3rem;
    }
    .section-title::after {
        display: none;
    }
    .tabs {
        gap: 0.3125rem;
    }
    .tab-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }
    .university-visitors {
        padding: 1.5625rem 0.625rem;
    }
    .university-visitors h2 {
        font-size: 1.5rem;
    }
    /* Small mobile — tighter sizing for the real carousel.
       Cards remain in a horizontal swipe strip, but smaller. */
    .visitors-carousel {
        gap: 1rem;
        padding: 0.4rem 0.2rem 0.85rem;
    }
    .visitor-card {
        flex: 0 0 7.5rem;
        width: 7.5rem;
    }
    .visitor-card img {
        width: 5.75rem;
        height: 5.75rem;
    }
    .visitor-card h4 {
        font-size: 0.8rem;
    }
    .visitor-card p {
        font-size: 0.7rem;
    }
    .visitors-grid {
        gap: 0.625rem;
    }
    .partners-affiliates {
        padding: 1.5625rem 0.625rem;
    }
    .partners-affiliates h2 {
        font-size: 1.5rem;
    }
    .partners-carousel {
        gap: 0.9375rem;
    }
    .partners-carousel img {
        width: 3.75rem;
        height: 1.875rem;
    }
    footer {
        padding: 1.5625rem 0.625rem;
    }
    .footer-column {
        min-width: 7.5rem;
    }
    .footer-column h2 {
        font-size: 1rem;
    }
    .footer-column ul li a {
        font-size: 0.85rem;
    }
}

/* ============================================================
   CHATBOT WIDGET
   ============================================================ */

.chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    font-family: 'Roboto', sans-serif;
}

.chat-toggle-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a4e 0%, #d81b60 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(216, 27, 96, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    outline: none;
}

.chat-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(216, 27, 96, 0.6);
}

.chat-toggle-btn svg {
    width: 26px;
    height: 26px;
    fill: white;
    position: absolute;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.chat-toggle-btn .chat-icon  { opacity: 1; transform: rotate(0deg); }
.chat-toggle-btn .close-icon { opacity: 0; transform: rotate(-90deg); }
.chat-widget.open .chat-toggle-btn .chat-icon  { opacity: 0; transform: rotate(90deg); }
.chat-widget.open .chat-toggle-btn .close-icon { opacity: 1; transform: rotate(0deg); }

.chat-notification-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 13px;
    height: 13px;
    background: #4caf50;
    border-radius: 50%;
    border: 2px solid white;
    animation: chatDotPulse 2s infinite;
}

@keyframes chatDotPulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%       { transform: scale(1.4); opacity: 0.7; }
}

.chat-widget.open .chat-notification-dot { display: none; }

.chat-window {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 360px;
    height: 510px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    transform: scale(0.85) translateY(16px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.chat-widget.open .chat-window {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: all;
}

.chat-header {
    background: linear-gradient(135deg, #1a1a4e 0%, #2a2a7e 100%);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.chat-header-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: #fff;
}

.chat-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.chat-header-info { flex: 1; }

.chat-header-name {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.chat-header-status {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.chat-header-status::before {
    content: '';
    width: 7px;
    height: 7px;
    background: #4caf50;
    border-radius: 50%;
    flex-shrink: 0;
    animation: chatDotPulse 2s infinite;
}

.chat-header-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

.chat-header-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: #dde; border-radius: 2px; }

.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 88%;
    animation: chatMsgIn 0.28s ease;
}

@keyframes chatMsgIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-msg.bot  { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }

.chat-msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
}

.chat-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.chat-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.55;
    word-wrap: break-word;
    max-width: 100%;
}

.chat-msg.bot  .chat-msg-bubble {
    background: #f0f2f8;
    color: #222;
    border-bottom-left-radius: 4px;
}

.chat-msg.user .chat-msg-bubble {
    background: linear-gradient(135deg, #1a1a4e, #2d2d82);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-quick-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0 6px 38px;
    align-self: flex-start;
    animation: chatMsgIn 0.3s ease;
}

.chat-quick-btn {
    background: #fff;
    border: 1.5px solid #d81b60;
    color: #d81b60;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
}

.chat-quick-btn:hover {
    background: #d81b60;
    color: #fff;
    transform: translateY(-1px);
}

.chat-typing {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    align-self: flex-start;
    animation: chatMsgIn 0.25s ease;
}

.chat-typing-dots {
    background: #f0f2f8;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    padding: 12px 16px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.chat-typing-dots span {
    width: 7px;
    height: 7px;
    background: #aab;
    border-radius: 50%;
    animation: chatTypingBounce 1.3s infinite;
}

.chat-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes chatTypingBounce {
    0%, 60%, 100% { transform: translateY(0);   opacity: 0.5; }
    30%            { transform: translateY(-7px); opacity: 1;   }
}

.chat-footer-brand {
    text-align: center;
    font-size: 10px;
    color: #bbb;
    padding: 5px 0 7px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.chat-input-area {
    padding: 10px 12px;
    border-top: 1px solid #efefef;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    background: #fff;
}

.chat-input {
    flex: 1;
    border: 1.5px solid #e0e0e0;
    border-radius: 24px;
    padding: 9px 16px;
    font-size: 13px;
    outline: none;
    font-family: 'Roboto', sans-serif;
    transition: border-color 0.25s;
    background: #fafafa;
}

.chat-input:focus { border-color: #1a1a4e; background: #fff; }

.chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a4e, #d81b60);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
    outline: none;
}

.chat-send-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(216, 27, 96, 0.35);
}

.chat-send-btn svg { width: 16px; height: 16px; fill: #fff; }

@media (max-width: 480px) {
    .chat-window {
        width: calc(100vw - 32px);
        height: 460px;
    }
    .chat-widget {
        bottom: 16px;
        right: 16px;
    }
}

/* Hide chatbot when the hamburger menu is open (mobile) — chatbot was
   covering menu items like "Annual Reports". Also hide floating socials. */
body.nav-menu-open .chat-widget,
body.nav-menu-open .social-media-icons {
    display: none !important;
}

/* ============================================
   ADDITIONAL RESPONSIVE FIXES — small phones
   ============================================ */

/* Mega-menu: tighter interior padding on small phones so menu items
   don't crowd the viewport edge */
@media (max-width: 480px) {
    .mega-col {
        padding: 0.25rem 0.625rem !important;
    }
    .mega-col-title {
        font-size: 0.9rem;
        padding: 0.25rem 0;
    }
    .dropdown-content a,
    .mega-col a {
        font-size: 0.85rem;
        padding: 0.5rem 0.625rem;
    }
}

/* Facilities carousel arrows — shrink on small phones so they
   don't dominate the strip */
@media (max-width: 480px) {
    .facilities-arrow {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.8rem;
    }
}

/* CMS page content tables — make horizontally scrollable on mobile
   instead of pushing the layout wider than the viewport */
.cms-page-content {
    overflow-x: auto;
}
@media (max-width: 768px) {
    .cms-page-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 0.9rem;
    }
    .cms-page-content table th,
    .cms-page-content table td {
        padding: 6px 10px;
    }
    /* Tables that ship their OWN responsive (stack-into-cards) design —
       e.g. the How-to-Reach route chart — must NOT inherit the global
       nowrap/scroll behaviour, or their long text lines get clipped. */
    .cms-page-content table.htr-routes,
    .cms-page-content table.htr-routes th,
    .cms-page-content table.htr-routes td {
        white-space: normal;
    }
}

/* Generic safety net: prevent images and media from forcing
   horizontal overflow inside any rendered page content */
.cms-page-content img,
.cms-page-content video,
.cms-page-content iframe {
    max-width: 100%;
    height: auto;
}

/* Block templates — hero & gallery sizing on mobile */
@media (max-width: 768px) {
    .block-hero-inner { padding: 1.5rem; }
    .block-hero.hero-medium { min-height: 260px; }
    .block-hero.hero-large  { min-height: 360px; }
    .block-hero.hero-full   { min-height: 75vh; }
    .block-hero .hero-sub { font-size: 1rem; }
    .block-gallery.cols-3,
    .block-gallery.cols-4,
    .block-gallery.cols-5 { grid-template-columns: repeat(2, 1fr); }
    .block-gallery img { height: 160px; }
}
@media (max-width: 480px) {
    .block-hero-inner { padding: 1rem; }
    .block-hero.hero-small  { min-height: 160px; }
    .block-hero.hero-medium { min-height: 220px; }
    .block-hero.hero-large  { min-height: 300px; }
    .block-hero.hero-full   { min-height: 60vh; }
    .block-hero .hero-sub { font-size: 0.9rem; }
    .block-gallery.cols-2,
    .block-gallery.cols-3,
    .block-gallery.cols-4,
    .block-gallery.cols-5 { grid-template-columns: 1fr 1fr; }
    .block-gallery img { height: 130px; }
}

/* iOS Safari auto-zooms on form focus when input font-size < 16px.
   Force 16px on phones to prevent the jarring zoom. */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* ============================================
   "View All" pill button — reusable across home sections
   ============================================ */
.view-all-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #0b336f, #1a5cb5);
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(11, 51, 111, .25);
    transition: transform .18s ease, box-shadow .18s ease, background .18s;
}
.view-all-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #082854, #144a93);
    box-shadow: 0 8px 18px rgba(11, 51, 111, .35);
    color: #fff !important;
    text-decoration: none;
}
@media (max-width: 480px) {
    .view-all-btn { font-size: .9rem; padding: .6rem 1.25rem; }
}

/* ============================================
   Page content — IMAGE PLACEMENT HELPERS
   Editors add these classes via TinyMCE.
   ============================================ */
.cms-page-content img.img-left {
    float: left;
    max-width: 45%;
    margin: 0.25rem 1.25rem 1rem 0;
    border-radius: 8px;
    height: auto;
}
.cms-page-content img.img-right {
    float: right;
    max-width: 45%;
    margin: 0.25rem 0 1rem 1.25rem;
    border-radius: 8px;
    height: auto;
}
.cms-page-content img.img-center {
    display: block;
    margin: 1.25rem auto;
    max-width: 80%;
    height: auto;
    border-radius: 8px;
}
.cms-page-content img.img-full {
    display: block;
    width: 100%;
    margin: 1.5rem 0;
    height: auto;
    border-radius: 8px;
}

/* Thumbnail — for putting 4-6 small images in a row.
   Each ~18% wide so 5 fit comfortably with margins. Inline-block flows
   automatically — admins just insert 5 images and mark each as Thumbnail. */
.cms-page-content img.img-thumb {
    display: inline-block;
    width: 18%;
    min-width: 90px;
    max-width: 200px;
    margin: 0.35rem 0.4rem;
    border-radius: 6px;
    vertical-align: top;
    object-fit: cover;
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
}
.cms-page-content img.img-thumb:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
/* The <p> wrapping a row of thumbnails should not centre-shrink them */
.cms-page-content p:has(> img.img-thumb) {
    text-align: center;
    margin: 1rem 0;
}

/* Twin (Both Sides): the editor inserts ONE image with class img-twin.
   At render time we duplicate it visually using a wrapper + ::after.
   Approach: the <img> becomes the LEFT-side picture, and a CSS ::after
   pseudo-element on the wrapping <p> shows a mirror copy on the right. */
.cms-page-content p:has(> img.img-twin) {
    position: relative;
    display: block;
    text-align: center;
    margin: 1.5rem 0;
}
.cms-page-content img.img-twin {
    display: inline-block;
    max-width: 30%;
    height: auto;
    border-radius: 8px;
    vertical-align: middle;
}
.cms-page-content img.img-twin::after {
    /* Browsers that don't support ::after on img will simply show one image. */
    content: '';
}
/* For broad browser support, JS auto-clones twin images at runtime — see scripts.js. */

@media (max-width: 768px) {
    .cms-page-content img.img-left,
    .cms-page-content img.img-right {
        float: none;
        display: block;
        max-width: 100%;
        margin: 1rem auto;
    }
    .cms-page-content img.img-center,
    .cms-page-content img.img-twin {
        max-width: 100%;
    }
    /* Thumbnails: 3 per row on tablets */
    .cms-page-content img.img-thumb {
        width: 30%;
        max-width: 30%;
    }
}
@media (max-width: 480px) {
    /* Thumbnails: 2 per row on phones */
    .cms-page-content img.img-thumb {
        width: 47%;
        max-width: 47%;
        margin: 0.25rem;
    }
}
/* ── Distance / CDOE logo ──────────────────────────────────────────────
   The CDOE logo image (jvbiCDOElogo.png) is squarer (~5.45:1) than the
   regular logo (~8.42:1). Scale its height at every breakpoint so it looks
   as big as the regular logo. NOTE: no scaleX() stretch — a transform widens
   the image beyond its layout box, so it spilled onto the NAAC badge (and
   distorted the letters). Height-only keeps the aspect ratio true, and the
   logo can shrink so it never overflows into the badges. */
.cdoe-header .logo { min-width: 0; flex-shrink: 1; }
.cdoe-header .logo img { height: 8.4rem; max-width: 100%; object-fit: contain; }
@media (max-width: 1024px) { .cdoe-header .logo img { height: 5.9rem; } }
@media (max-width: 768px)  { .cdoe-header .logo img { height: 6.1rem; } }
@media (max-width: 480px)  { .cdoe-header .logo img { height: 3.75rem; } }
/* Taller CDOE logo grows downward — pull the nav up to keep the logo-to-menu
   gap small. Add a little top gap so the logo doesn't touch the blue top bar. */
.cdoe-header .nav-wrapper { margin-top: -0.3rem; }
.cdoe-header .main-header {
    margin-top: 0.5rem;
    /* CDOE logo is wide — allow the badge group to wrap below (not overlap)
       only on this header, at heavy zoom / narrow widths. The regular header
       keeps its single-row layout. */
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ── "Enquiry Now" fixed side tab (shows on every page; jumps to enquiry form) ── */
.enquiry-tab {
    position: fixed;
    right: 0;
    top: 45%;
    transform: translateY(-50%);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 15px 7px;
    background: linear-gradient(135deg, #d81b60, #b91e69);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.4px;
    border-radius: 10px 0 0 10px;
    box-shadow: -3px 3px 12px rgba(0,0,0,0.28);
    transition: background 0.25s ease, padding-right 0.2s ease;
}
.enquiry-tab:hover { background: #b3154a; color: #fff; padding-right: 13px; text-decoration: none; }
.enquiry-tab-text { writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; }
@media (max-width: 768px) {
    .enquiry-tab { font-size: 0.72rem; padding: 11px 5px; top: 50%; }
    .enquiry-tab-icon { width: 13px; height: 13px; }
}

/* ── Mobile: enquiry form becomes a slide-in panel (opened by "Enquiry Now" tab) ── */
.enq-close-btn { display: none; background: none; border: 0; font-size: 2rem; line-height: 1; color: #b91e69; cursor: pointer; padding: 0 4px; }
.enq-overlay { display: none; }
@media (max-width: 1024px) {
    .course-info-form {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; max-width: none !important;
        height: 100dvh !important; margin: 0 !important;
        z-index: 3000 !important;
        display: flex !important; flex-direction: column !important;
        padding: 0 !important; border-radius: 0 !important;
        background: #f4f6fb !important; box-shadow: none !important;
        overflow: hidden !important;                 /* header fixed, form scrolls inside */
        transform: translateX(100%);
        transition: transform .3s ease;
    }
    .course-info-form.enq-open { transform: translateX(0); }

    /* Navy header with subtitle + pink accent bar */
    .course-info-form .enq-header {
        position: relative; flex: none; margin: 0; text-align: left;
        background: linear-gradient(135deg,#0b336f,#123a72 55%,#1a1a4e);
        color: #fff; padding: 22px 20px 18px;
    }
    .course-info-form .enq-header h3 { color: #fff !important; font-size: 1.55rem; font-weight: 800; margin: 0 0 6px; }
    .course-info-form .enq-header p { color: rgba(255,255,255,.85) !important; font-size: .9rem; line-height: 1.45; margin: 0 0 12px; }
    .course-info-form .enq-header::after { content: ''; display: block; width: 58px; height: 4px; border-radius: 2px; background: #d81b60; }
    .enq-close-btn { display: flex !important; align-items: center; justify-content: center; position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 1.4rem; padding: 0; }

    /* Scrollable form body */
    .course-info-form form { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 16px 22px; display: flex; flex-direction: column; gap: 12px; }
    .course-info-form input, .course-info-form select { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid #d3ddea; border-radius: 10px; font-size: .95rem; background: #fff; margin: 0; }
    .course-info-form .enq-row-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .course-info-form .enq-row-2 > div { display: flex; flex-direction: column; }
    .course-info-form .enq-mobile-wrap { display: flex; align-items: stretch; margin: 0; }
    .course-info-form .enq-mobile-prefix { display: flex; align-items: center; padding: 0 10px; background: #eef2f8; border: 1px solid #d3ddea; border-right: 0; border-radius: 10px 0 0 10px; font-weight: 700; color: #0b336f; white-space: nowrap; }
    .course-info-form .enq-mobile-wrap input { border-radius: 0 10px 10px 0; }
    .course-info-form .enq-consent { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: #555; margin: 2px 0; }
    .course-info-form .enq-consent input { width: auto; }
    .course-info-form .enq-submit-btn {
        width: 100%; padding: 14px; border: 0; border-radius: 12px;
        background: linear-gradient(135deg,#d81b60,#b91e69); color: #fff;
        font-size: 1.05rem; font-weight: 800; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 6px 18px rgba(216,27,96,.35); margin: 4px 0 0;
    }

    .enq-overlay { display: none; }   /* full-screen panel — no separate backdrop needed */
}

/* (Facilities uniform-grid override removed — reverted to the original dual
   carousel design per user request. Original carousel CSS above is in effect.) */

/* (Removed the `html, body { max-width: 100% }` safety-net rule — it overrode the
   original `body { max-width: 120rem; margin: auto }`, which centers the whole
   page on ultra-wide screens exactly like demo1. body already has overflow-x:hidden.) */

/* ── Mobile: slim the top blue bar to just Admission Open + Student Login ── */
@media (max-width: 768px) {
    .top-nav > a:not(.admission-blink):not(.top-mobile-keep),
    .top-nav > .nav-divider,
    .top-nav > .nav-heading { display: none !important; }
    .top-nav { justify-content: flex-start; gap: 0.85rem; }
    .top-bar { overflow-x: hidden; }
}

/* ═══════════ Mobile: clean header + JNU-style menu + bottom bar ═══════════ */
.mobile-top-links { display: none; }
.mobile-bottombar { display: none; }
.mobile-bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #e3e3e3;
    box-shadow: 0 -2px 12px rgba(0,0,0,.14);
}
.mbb-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 8px 4px; min-height: 60px;
    text-decoration: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: .72rem; font-weight: 700;
}
.mbb-item svg { width: 22px; height: 22px; }
.mobile-bottombar .mbb-item:nth-child(1) { background: #d81b60; color: #fff; }
.mobile-bottombar .mbb-item:nth-child(2) { background: #2a2140; color: #fff; }
.mobile-bottombar .mbb-item:nth-child(3) { background: #d81b60; color: #fff; }
.mobile-bottombar .mbb-item:nth-child(4) { background: #f4f4f6; color: #b91e69; }

/* ── Desktop header fit: between the 1024px mobile breakpoint and full
   desktop (~1520px) the full header (logo+name+badges+Apply/Call) is wider
   than the viewport and forces a horizontal scroll. Scale it down to fit
   this range — the full-size look is preserved at >=1520px. */
@media (min-width: 1025px) and (max-width: 1520px) {
    .main-header { padding: 0 1rem; }
    .logo img { height: 5rem; }
    .university-name h1 { font-size: 2.35rem; }
    .university-name p { font-size: 1.15rem; margin-left: 7.5rem; }
    .header-contact { gap: 0.55rem; }
    .naac, .iso, .years { padding: 0.9rem 0.55rem; }
    .naac img, .iso img, .years img { height: 5rem; }
    .apply-btn { padding: 0.45rem 1.5rem; font-size: 0.9rem; }
    .contact-number { padding: 0.35rem 1rem; font-size: 0.9rem; }
}
/* 1025–1365px: no room for the three accreditation badges alongside the
   name + Apply/Call — hide the badges (as the mobile header does) and keep
   logo + name + Apply/Call. Badges return at >=1366px. */
@media (min-width: 1025px) and (max-width: 1365px) {
    .naac, .iso, .years { display: none; }
    .university-name h1 { font-size: 2.15rem; }
    .university-name p { font-size: 1.05rem; margin-left: 6.5rem; }
    .logo img { height: 4.6rem; }
    .apply-btn { padding: 0.45rem 1.4rem; font-size: 0.88rem; }
    .contact-number { padding: 0.35rem 0.95rem; font-size: 0.88rem; }
    .header-contact { gap: 0.5rem; }
    .main-header { padding: 0 1rem; }
    /* Blue top-bar: tighten link spacing / font so all links + the
       accessibility group fit without forcing a horizontal scroll. */
    .top-bar { font-size: 0.64rem; padding: 0 0.5rem; }
    .top-nav a { margin-left: 0.22rem; padding-right: 0.3rem; }
    .top-nav a:not(:last-child)::after { right: 0.1rem; }
    .top-nav .admission-blink { padding: 0.15rem 0.45rem; margin-right: 0.18rem; font-size: 0.62rem; }
    .accessibility-btn, .search-btn { padding-left: 0.35rem; padding-right: 0.35rem; }
    .top-nav .accessibility-group { gap: 0.25rem; }
    /* Main nav (Home … Distance Education): tighten font + item spacing so
       all 8 items fit on one row without overflowing. */
    .main-nav > a,
    .main-nav > .nav-dropdown > a { font-size: 0.9rem; padding: 0.3125rem 0.4rem; }
    .main-nav > a,
    .main-nav > .nav-dropdown { margin: 0 0.55rem; }
    .main-nav > a:not(:last-child)::after,
    .main-nav > .nav-dropdown:not(:last-child) > a::after { right: -0.55rem; }
}

@media (max-width: 1024px) {
    /* 1) Blue top-bar gone; header = logo+name only. Hamburger hidden — the
          bottom bar's "Menu" opens/closes the nav now, so it's redundant. */
    .top-bar { display: none !important; }
    .hamburger { display: none !important; }
    .main-header {
        flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
        padding: 0.7rem 1rem !important;
        margin: 0 !important;
        position: fixed !important; top: 0; left: 0; right: 0; z-index: 1250;   /* ALWAYS visible; page scrolls underneath */
        background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08);
    }
    .main-header .logo img { height: 40px !important; width: auto !important; }
    body { padding-top: 60px; }   /* room so content isn't hidden under the fixed header */
    .header-contact { display: none !important; }   /* hide NAAC/ISO/badges + Apply/Call — logo+name only */

    /* 2) JNU-style menu: navy panel, big bold white items, chevrons */
    .main-nav.open { background: #0b336f !important; border-top: 0 !important; }
    .main-nav > a,
    .main-nav > .nav-dropdown > a {
        color: #fff !important; font-size: 1.2rem !important; font-weight: 700 !important;
        padding: 1.05rem 1.25rem !important; border-bottom: 1px solid rgba(255,255,255,.13) !important;
    }
    /* plain links (Home, Distance Education) were centered — left-align like the dropdowns */
    .main-nav > a { justify-content: flex-start !important; text-align: left !important; }
    .main-nav > .nav-dropdown > a::after,
    .main-nav > .nav-dropdown:not(:last-child) > a::after,
    .main-nav > .nav-dropdown:last-child > a::after {
        content: '' !important; position: absolute !important;
        top: 45% !important; right: 1.4rem !important;
        width: 11px !important; height: 11px !important;
        background: none !important; border: 0 !important; border-radius: 0 !important;
        border-right: 2.5px solid rgba(255,255,255,.9) !important;
        border-bottom: 2.5px solid rgba(255,255,255,.9) !important;
        transform: translateY(-50%) rotate(45deg) !important;
        transition: transform .25s ease !important;
    }
    .main-nav > .nav-dropdown.mobile-open > a::after { transform: translateY(-20%) rotate(-135deg) !important; }
    .nav-dropdown.mobile-open .mega-menu,
    .nav-dropdown.mobile-open .dropdown-content { background: #0a2c5f !important; }
    .mega-col a, .dropdown-content a { color: #dbe6f5 !important; }
    .mega-col-title { color: #9dc0ee !important; }

    /* 3) Former blue-bar links inside the menu */
    .mobile-top-links { display: block; width: 100%; align-self: stretch; box-sizing: border-box; background: #0b336f; padding: 0; }
    .mobile-top-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; background: none; border: 0; cursor: pointer; text-align: left; color: #fff; font-family: inherit; font-size: 1.2rem; font-weight: 700; padding: 1.05rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.13); }
    .mobile-top-toggle::after { content: ''; flex: none; width: 11px; height: 11px; border-right: 2.5px solid rgba(255,255,255,.9); border-bottom: 2.5px solid rgba(255,255,255,.9); transform: rotate(45deg); transition: transform .25s ease; margin-right: .3rem; }
    .mobile-top-links.open .mobile-top-toggle::after { transform: rotate(-135deg); }
    .mobile-top-sublist { display: none; background: #0a2c5f; }
    .mobile-top-links.open .mobile-top-sublist { display: block; }
    .mobile-top-link { display: block; color: #cdd9f0; font-size: 1rem; font-weight: 600; padding: .78rem 1.25rem .78rem 1.75rem; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none; }

    /* 4) Bottom bar visible; keep content + chat clear of it */
    .mobile-bottombar { display: grid; }
    body { padding-bottom: 62px; }
    /* Lift the whole chat widget (z-index 99999) above the bottom bar, else it
       overlaps and steals taps meant for the "Menu" button. */
    .chat-widget { bottom: 76px !important; }
}

/* ── Frontend pagination (Bootstrap-4 markup via useBootstrapFour(), otherwise unstyled) ── */
.pagination {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 6px; list-style: none; padding: 0; margin: 0;
}
.pagination .page-item { list-style: none; }
.pagination .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border: 1px solid #dce3ec; border-radius: 8px;
    color: #0b336f; background: #fff; text-decoration: none;
    font-weight: 700; font-size: 0.95rem; line-height: 1;
    transition: background .15s, color .15s, border-color .15s;
}
.pagination .page-link:hover { background: #f0f4fa; border-color: #b9c7da; color: #0b336f; }
.pagination .page-item.active .page-link { background: #b91e69; border-color: #b91e69; color: #fff; }
.pagination .page-item.disabled .page-link { color: #aab4c0; background: #f6f7f9; cursor: not-allowed; opacity: .65; }

/* ── Mobile menu = fixed full-screen overlay (opens from the bottom bar at any scroll position) ── */
@media (max-width: 1024px) {
    .main-nav.open {
        position: fixed !important;
        top: 60px !important;                /* start BELOW the fixed logo header so it stays visible */
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        z-index: 1350 !important;            /* under the bottom bar (1400) so "Menu" stays tappable to close */
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;  /* content starts at TOP — was centered, pushing Home/About Us above the scroll area */
        align-items: stretch !important;
        padding: 0 0 80px !important;        /* clear the fixed bottom bar */
        background: #0b336f !important;
    }
    body.nav-menu-open { overflow: hidden; } /* lock background scroll while the menu is open */
}

/* ── Menu bottom CTAs — Apply Now + Enquiry Now (mobile only) ── */
.mobile-menu-cta { display: none; }
@media (max-width: 1024px) {
    .mobile-menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 14px 24px; background: #0b336f; }
    .mobile-menu-cta a { display: flex; align-items: center; justify-content: center; padding: 13px 8px; border-radius: 9px; font-weight: 800; font-size: 1rem; text-decoration: none; }
    .mmc-apply { background: linear-gradient(135deg,#d81b60,#b91e69); color: #fff; box-shadow: 0 4px 14px rgba(216,27,96,.4); }
    .mmc-enquiry { background: #fff; color: #0b336f; }
}

/* Hide the floating chat button while the enquiry panel is open (they overlapped) */
body.enq-panel-open .chat-widget { display: none !important; }

/* ── Enquiry form polish: focus states, success message, field icons ── */
.enq-success { background: #e4f3ec; border: 1px solid #b9e0cd; color: #1c7a4f; padding: 12px 14px; border-radius: 10px; font-weight: 600; font-size: .92rem; margin: 0 0 12px; }
.course-info-form input:focus, .course-info-form select:focus { border-color: #b91e69 !important; box-shadow: 0 0 0 3px rgba(185,30,105,.12) !important; outline: none; }
@media (max-width: 1024px) {
    .course-info-form #enq-name { padding-left: 42px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a4b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a7 7 0 0 1 14 0v1'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 13px center; background-size: 18px; }
    .course-info-form #enq-email { padding-left: 42px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a4b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 13px center; background-size: 18px; }
}

/* ── Mobile: chatbot = clean full-screen (was cramped & clashing with bottom bar) ── */
@media (max-width: 1024px) {
    .chat-widget.open .chat-window {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important; height: 100dvh !important;
        max-width: none !important; max-height: none !important;
        margin: 0 !important; border-radius: 0 !important;
        z-index: 100000 !important;
        transform: none !important;
        display: flex !important; flex-direction: column !important;
    }
    .chat-widget.open .chat-messages { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; }
    .chat-widget.open .chat-header,
    .chat-widget.open .chat-rating-bar,
    .chat-widget.open .chat-footer-brand,
    .chat-widget.open .chat-input-area { flex: none !important; }
}

/* Shared enquiry panel: mobile-only (desktop keeps its own inline forms / href) */
@media (min-width: 1025px) { .course-info-form.enq-shared { display: none !important; } }

/* Hero banner image: cap to the viewport on phones (was 500px → overflowed/cut on small screens) */
@media (max-width: 767px) {
    .hero-slider { width: min(31.25rem, 82vw) !important; max-width: 82vw !important; }
    .hero-image, .hero-carousel { max-width: 100% !important; }
}

/* CDOE logo is squarer than the regular logo — on mobile make it taller so it
   fills the header width like the regular one (was leaving a big right gap). */
@media (max-width: 1024px) {
    body.distance-site .main-header .logo img { height: 60px !important; }
    body.distance-site { padding-top: 82px; }
    body.distance-site .main-nav.open { top: 82px !important; }
}

/* Vision & Mission page: the custom_css mobile rules target the wrong class,
   so the absolute-positioned .vm-point items break on phones. Force a clean
   stacked layout on mobile (hide the desktop map illustration). */
@media (max-width: 900px) {
    .vm-stage { position: static !important; margin: 1rem auto 0 !important; max-width: 100% !important; padding: 0 1rem 1rem !important; }
    .vm-illustration { display: none !important; }
    .vm-point, .vm-point-1, .vm-point-2, .vm-point-3, .vm-point-4, .vm-point-5 {
        position: static !important; width: 100% !important; max-width: 100% !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        display: block !important; box-sizing: border-box;
        margin: 0 0 0.85rem !important; padding: 0.9rem 1rem !important;
        background: #f4f6fb; border-left: 4px solid #b91e69; border-radius: 8px;
        font-size: 0.95rem !important;
    }
}

/* Committee/cell pages: their custom_css forces .about-sidebar { width:300px !important },
   which breaks the mobile stacking (content then overflows). Higher-specificity
   !important restores the responsive stacked layout on phones/tablets. */
@media (max-width: 900px) {
    body .about-page-wrapper { flex-direction: column !important; max-width: 100% !important; }
    body .about-sidebar { width: 100% !important; max-width: 100% !important; flex: none !important; }
    body .about-main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; }
    body .about-main .cms-page-content { max-width: 100% !important; }
    body .about-main table { display: block; overflow-x: auto; max-width: 100%; }
}

/* (Header/hero max-width centering removed — it clipped the Apply Online / Call
   and form content at 80–90% zoom. Reverted to original full-width layout.) */

/* Remove the white divider lines between mobile menu items (per user request) */
@media (max-width: 1024px) {
    .main-nav > a,
    .main-nav > .nav-dropdown > a,
    .main-nav .mega-col a,
    .main-nav .dropdown-content a,
    .main-nav .mega-col .mega-sub-list a.mega-sub-item,
    .mobile-top-link,
    .mobile-top-toggle {
        border-bottom: 0 !important;
        border-top: 0 !important;
    }
}

/* Left-align expanded sub-menu items on mobile (like the "More" links) */
@media (max-width: 1024px) {
    .main-nav .nav-dropdown.mobile-open .mega-col a,
    .main-nav .nav-dropdown.mobile-open .dropdown-content a,
    .main-nav .nav-dropdown.mobile-open .mega-col-title,
    .main-nav .nav-dropdown.mobile-open .mega-sub-item,
    .main-nav .nav-dropdown.mobile-open .mega-sub-toggle {
        justify-content: flex-start !important;
        text-align: left !important;
        padding-left: 1.75rem !important;
    }
}

/* All facility photo galleries: uniform 2-column (Art Gallery style), overriding
   each page's own custom_css (which set 4 columns on some pages). */
.cms-page-content .voc-gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
@media (max-width: 560px) { .cms-page-content .voc-gallery { grid-template-columns: 1fr !important; } }

/* Mobile: home Facilities carousel shows 2 cards per view, with prev/next arrows */
@media (max-width: 768px) {
    .facilities .facilities-wrapper > .carousel-arrow.facilities-arrow { display: flex !important; width: 30px; height: 30px; font-size: 1.1rem; line-height: 30px; flex: 0 0 auto; }
    .facilities-wrapper { gap: 0.4rem !important; padding: 0 0.35rem !important; }
    .facilities-grid { display: flex !important; flex: 0 0 auto !important; min-width: 0 !important; width: calc(100vw - 5.5rem) !important; max-width: calc(100vw - 5.5rem) !important; margin: 0 !important; gap: 0.75rem !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; scroll-snap-type: x mandatory; }
    .facilities-grid .facility-item {
        flex: 0 0 calc(50vw - 3.25rem) !important;
        width: calc(50vw - 3.25rem) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }
}

/* ── Mobile: stack wide data tables into readable label:value cards ──
   scripts.js tags any CMS table whose content is wider than the phone
   viewport with .mtable-stack and copies each column header onto its cells
   as data-label. These rules turn such tables into stacked cards so no
   column is hidden off-screen (fixes committee / disclosure / video tables).
   Doubled class = high specificity, so it beats each page's own
   min-width:NNNpx rule regardless of source order. */
@media (max-width: 600px) {
    table.mtable-stack.mtable-stack {
        display: block; width: 100% !important; min-width: 0 !important;
        white-space: normal !important; border-collapse: collapse; overflow: visible;
    }
    .mtable-stack.mtable-stack thead { display: none; }
    .mtable-stack.mtable-stack tbody,
    .mtable-stack.mtable-stack tr,
    .mtable-stack.mtable-stack td { display: block; width: auto !important; }
    .mtable-stack.mtable-stack tr {
        margin: 0 0 0.9rem; border: 1px solid #dbe2ea; border-radius: 8px;
        overflow: hidden; background: #fff;
    }
    .mtable-stack.mtable-stack td {
        white-space: normal !important; text-align: left !important;
        padding: 0.5rem 0.8rem !important; border: 0 !important;
        border-bottom: 1px solid #eef1f5 !important; min-width: 0 !important;
        width: auto !important; word-break: break-word; overflow-wrap: anywhere;
    }
    .mtable-stack.mtable-stack td:last-child { border-bottom: 0 !important; }
    .mtable-stack.mtable-stack td[data-label]::before {
        content: attr(data-label); display: block; font-weight: 700;
        color: #b91e69; font-size: 0.68rem; text-transform: uppercase;
        letter-spacing: 0.3px; margin-bottom: 3px;
    }
    /* full-width banner rows (section headers via colspan) stay as headers */
    .mtable-stack.mtable-stack td[colspan] {
        background: #6f9ad3 !important; color: #fff !important; font-weight: 700;
        border-radius: 6px; margin-bottom: 0.4rem;
    }
    .mtable-stack.mtable-stack td[colspan]::before { content: none; }
    /* hide empty cells so stacked cards don't show blank labeled rows */
    .mtable-stack.mtable-stack td:empty { display: none; }
}

/* Mobile: the about/committee sidebar is position:sticky on desktop (set in
   several pages' custom_css). Once the layout stacks (<=900px) a sticky
   sidebar pins to the top and the page content scrolls underneath it,
   causing an overlap (e.g. Committees & Cells pages). Make it flow normally
   on mobile. !important beats the non-important custom_css `position:sticky`. */
@media (max-width: 900px) {
    .about-sidebar {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
    }
}