/* GKCIET Custom Theme CSS - Technical Education Design */

/* Custom Font Import — DBIM §4: Noto Sans (+ Devanagari for Hindi / GIGW multilingual) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700;800&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap');

/* Root Variables */
:root {
    --primary-color: #032e4a;
    --secondary-color: #0066cc;
    --accent-color: #ffca28;
    --dark-color: #07203a;
    --light-bg: #f8fafc;
    --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --card-shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --font-sans: 'Noto Sans', 'Noto Sans Devanagari', system-ui, sans-serif;
    --font-heading: 'Noto Sans', 'Noto Sans Devanagari', system-ui, sans-serif;
}

/* Body & Typography — DBIM typeface */
body {
    font-family: var(--font-sans);
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6,
.font-poppins {
    font-family: var(--font-heading);
}

.hindi-text {
    font-family: 'Noto Sans Devanagari', 'Noto Sans', sans-serif;
}

/* CMS rich text (Filament editor): paragraphs, lists, and headings */
.gkciet-prose {
    color: #374151;
    line-height: 1.7;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.gkciet-prose p,
.gkciet-prose ul,
.gkciet-prose ol,
.gkciet-prose blockquote,
.gkciet-prose h2,
.gkciet-prose h3,
.gkciet-prose h4 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.gkciet-prose h2,
.gkciet-prose h3,
.gkciet-prose h4 {
    text-align: left;
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.3;
}

.gkciet-prose h2 { font-size: 1.35rem; }
.gkciet-prose h3 { font-size: 1.15rem; }
.gkciet-prose h4 { font-size: 1.05rem; }

.gkciet-prose > :first-child {
    margin-top: 0;
}

.gkciet-prose > :last-child {
    margin-bottom: 0;
}

.gkciet-prose ul,
.gkciet-prose ol {
    padding-left: 1.35rem;
}

.gkciet-prose ul { list-style: disc outside; }
.gkciet-prose ol { list-style: decimal outside; }
.gkciet-prose ul ul { list-style: circle outside; }
.gkciet-prose ol ol { list-style: lower-alpha outside; }

.gkciet-prose li {
    display: list-item;
    margin: 0.3rem 0;
    text-align: justify;
}

.gkciet-prose li > p {
    margin: 0;
}

.gkciet-prose a {
    color: var(--secondary-color);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.gkciet-prose blockquote {
    border-left: 4px solid var(--accent-color);
    padding-left: 0.9rem;
    color: #4b5563;
    text-align: left;
}

.gkciet-prose strong { font-weight: 700; }

.dept-media-frame {
    min-height: 400px;
}

.lab-slider-viewport {
    overflow: hidden;
}

.lab-slider-track {
    transition: transform 0.45s ease;
}

.lab-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 0.2rem;
    box-sizing: border-box;
    display: flex;
}

.lab-slide > .card {
    width: 100%;
}

.lab-slider-btn {
    position: absolute;
    top: 38%;
    z-index: 2;
}

.lab-slider-prev { left: 0.15rem; }
.lab-slider-next { right: 0.15rem; }

.lab-slider.is-static .lab-slider-btn {
    display: none;
}

@media (min-width: 768px) {
    .lab-slide { flex-basis: 50%; }
}

@media (min-width: 1024px) {
    .lab-slide { flex-basis: 33.3333%; }
    .lab-slider[data-lab-per-view="2"] .lab-slide { flex-basis: 50%; }
    .lab-slider[data-lab-per-view="3"] .lab-slide { flex-basis: 33.3333%; }
    .lab-slider[data-lab-per-view="4"] .lab-slide { flex-basis: 25%; }
}

.dept-media-frame .min-h-\[400px\],
.dept-media-frame iframe {
    min-height: 400px;
}
.text-justify,
.about-page .leading-relaxed,
.about-page .leading-loose,
.academics-page .leading-relaxed,
.academics-page .leading-loose,
.department-page .leading-relaxed,
.department-page .leading-loose,
:is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .leading-relaxed,
:is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .leading-loose {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ========== GIGW §5.2.33 — Visible Keyboard Focus Indicators ========== */
*:focus-visible {
    outline: 3px solid var(--accent-color) !important;
    outline-offset: 2px !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent-color) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 202, 40, 0.3) !important;
}

/* Skip to Main Content link styling */
.sr-only:focus {
    position: absolute !important;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
}

/* ========== GIGW §5.2.15 — Text Resize Support ========== */
html {
    font-size: 100%; /* Base 16px — allows user zoom up to 200% */
}

html.text-size-small {
    font-size: 87.5%; /* 14px */
}

html.text-size-large {
    font-size: 112.5%; /* 18px */
}

html.text-size-xlarge {
    font-size: 125%; /* 20px */
}

/* ========== GIGW §5.2.14 — High Contrast Mode ========== */
html.high-contrast body {
    background-color: #000 !important;
    color: #fff !important;
}

html.high-contrast .bg-white,
html.high-contrast .bg-gray-50,
html.high-contrast .bg-gray-100,
html.high-contrast [class*="bg-gradient"] {
    background: #000 !important;
    color: #fff !important;
}

html.high-contrast .card,
html.high-contrast .bg-base-100 {
    background: #1a1a1a !important;
    border: 1px solid #fff !important;
    color: #fff !important;
}

html.high-contrast a {
    color: #ffca28 !important;
    text-decoration: underline !important;
}

html.high-contrast .btn {
    border: 2px solid #fff !important;
}

html.high-contrast .text-gray-600,
html.high-contrast .text-gray-700,
html.high-contrast .text-gray-800,
html.high-contrast .text-gray-500 {
    color: #e0e0e0 !important;
}

html.high-contrast .text-gkciet-primary {
    color: #90caf9 !important;
}

html.high-contrast img {
    filter: contrast(1.2);
}

/* Smooth Animations */
* {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header and blue menu stick as one bar so they cannot drift apart while scrolling */
.site-masthead {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
}

.site-masthead,
.site-masthead * {
    transition: none;
}

#instituteInfo {
    max-height: 320px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease;
}

#instituteInfo.is-collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

#mainNav a,
#mainNav button {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dept-subnav,
.placement-portal-nav {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    #instituteInfo {
        transition: none;
    }
}

/* Department in-page sticky links sit under global header + main nav */
.dept-subnav,
.placement-portal-nav {
    top: var(--dept-subnav-top, 0px);
    z-index: 40;
}

.placement-portal-nav {
    top: var(--placement-portal-nav-top, var(--dept-subnav-top, 0px));
}

.ic-page .ic-sticky {
    top: var(--ic-sticky-top, var(--dept-subnav-top, 0px));
}

.placement-portal-nav__mobile > summary::-webkit-details-marker {
    display: none;
}

.placement-portal-nav__mobile > summary {
    list-style: none;
}

.placement-portal-nav__mobile[open] > summary .fa-chevron-down {
    transform: rotate(180deg);
}

/* Hide Scrollbar Utility */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

/* Marquee Animation for Announcements */
.marquee-container {
    overflow: hidden;
    position: relative;
}

.marquee-container p {
    display: inline-block;
    padding-left: 100%;
    /* Duration set in JS from content width so speed stays steady as notices grow */
    animation: marquee var(--marquee-duration, 30s) linear infinite;
    white-space: nowrap;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* GIGW §5.2.25 — Pause/Stop mechanism for marquee */
.marquee-container.paused p {
    animation-play-state: paused;
}

/* Header Sticky Effect */
header.sticky {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Navigation Enhancements */
nav {
    backdrop-filter: blur(10px);
}

nav a {
    position: relative;
    font-weight: 500;
}

nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background-color: var(--accent-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

nav a:hover::after {
    width: 80%;
}

/* Card Enhancements */
.card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
}

/* Button Styles */
.btn {
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-accent {
    background: linear-gradient(135deg, #ffca28 0%, #ffa000 100%);
    border: none;
    color: #07203a;
}

.btn-accent:hover {
    background: linear-gradient(135deg, #ffa000 0%, #ff6f00 100%);
}

/* Slider Dots */
.slider-dot {
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot.active {
    opacity: 1;
    transform: scale(1.2);
    background-color: var(--accent-color);
}

/* Badge Pulse */
.badge-error {
    animation: pulse-badge 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Tab System */
.tab {
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
}

/* Stats Cards */
.stat {
    padding: 1rem;
    transition: all 0.3s ease;
}

.stat:hover {
    transform: scale(1.05);
}

/* Image Hover Effects */
img {
    transition: all 0.3s ease;
}

.card img:hover {
    transform: scale(1.05);
}

/* Gradient Backgrounds */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, #ffca28 0%, #ff9800 100%);
}

/* Link Hover Effects */
a {
    transition: all 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
}

/* Dropdown Menu Animations */
.dropdown-content {
    animation: slideDown 0.3s ease;
}

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

/* Modal Animations */
.modal-box {
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scroll to Top Button */
#scrollToTop {
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

#scrollToTop.show {
    opacity: 1;
    pointer-events: auto;
}

#scrollToTop:hover {
    transform: translateY(-3px);
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.25rem;
    }
    
}

/* ========== GOOGLE TRANSLATE STYLING ========== */

/* Hide the Google Translate frame/banner injected at top of page */
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

/* Hide the Google branding in the widget */
.goog-logo-link,
.goog-te-gadget > span {
    display: none !important;
}

/* ========== HERO SLIDE TRANSITIONS ========== */
.hero-slide {
    will-change: opacity;
}

/* Single-scene slides (e.g. Excellence): cover fills the frame */
.hero-slide-img {
    object-fit: cover;
    object-position: center;
}

/*
 * Diptych slides put faces on the right and tagline space on the left (~3:1).
 * Hero box is much taller relatively on phone (≈1.3:1), so object-cover
 * center-crops ~55% of the width and chops both panels. Show the full
 * composite until md, then cover for desktop banner framing.
 */
.hero-slide-img--diptych {
    object-fit: contain;
    object-position: center;
    background-color: var(--dark-color, #07203a);
}

@media (min-width: 768px) {
    .hero-slide-img--diptych {
        object-fit: cover;
        object-position: center;
    }
}

/* Print Styles — GIGW §5.1.20 (Must print correctly on A4 paper) */
@media print {
    /* Hide non-essential elements */
    nav, 
    .btn, 
    .badge,
    #scrollToTop,
    .marquee-container,
    #marqueeToggle,
    #sliderPauseBtn,
    .carousel,
    .slider-dot,
    #mobileMenuBtn,
    #mobileMenu,
    .modal,
    .lightbox,
    #photoLightbox,
    .accessibility-tools,
    .social-link,
    [role="toolbar"],
    .fab,
    footer .flex.space-x-3,
    #heroSlider {
        display: none !important;
    }

    /* Reset backgrounds for printing */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.5;
    }

    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Show header ownership info */
    header, #instituteInfo {
        max-height: none !important;
        opacity: 1 !important;
        display: block !important;
        position: static !important;
    }

    /* Show link URLs */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #333;
    }

    /* Don't show URL for anchor links */
    a[href^="#"]:after,
    a[href^="javascript"]:after {
        content: "";
    }

    /* Page breaks */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .card {
        page-break-inside: avoid;
        border: 1px solid #ccc !important;
    }

    /* Footer: only show ownership */
    footer {
        border-top: 2px solid #000 !important;
        padding: 10px 0 !important;
    }
}

/* Accessibility — Enhanced in global section above (GIGW §5.2.33) */
/* Note: Focus-visible styles now defined globally at top of file */

/* Technical Pattern Background */
.tech-pattern {
    background-image: 
        linear-gradient(rgba(3, 46, 74, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 46, 74, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Glow Effect for Important Elements */
.glow-accent {
    box-shadow: 0 0 20px rgba(255, 202, 40, 0.3);
}

/* Career Highlight Animation */
.career-pulse {
    animation: career-glow 2s ease-in-out infinite;
}

@keyframes career-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 202, 40, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 202, 40, 0.8);
    }
}

/* Lazy Load Images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.5s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Floating Animation for Icons */
.float-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Notification Badge */
.notification-badge {
    position: relative;
}

.notification-badge::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Grid Hover Effect */
.grid-item {
    transition: all 0.3s ease;
}

.grid-item:hover {
    z-index: 10;
}

/* Timeline Connector */
.timeline-line::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-color), var(--secondary-color));
}

/* Counter Animation */
.counter {
    font-variant-numeric: tabular-nums;
}

/* Tooltip Custom */
.tooltip-custom {
    position: relative;
}

.tooltip-custom::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: var(--dark-color);
    color: white;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.tooltip-custom:hover::after {
    opacity: 1;
}

/* Success/Error Message Animations */
.alert-slide-in {
    animation: slideInRight 0.5s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Performance Optimization */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* ========== CAMPUS TOUR VIDEO PLAYER ========== */
.video-thumbnail {
    transition: all 0.3s ease;
}

.video-thumbnail:hover {
    filter: brightness(0.9);
}

.video-player iframe {
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Play button pulse animation */
@keyframes pulse-play {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.group:hover .fa-play {
    animation: pulse-play 1.5s ease-in-out infinite;
}

/* Video container border animation */
@keyframes border-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 202, 40, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 202, 40, 0.6);
    }
}

.border-gkciet-accent {
    animation: border-glow 3s ease-in-out infinite;
}

/* ========== DIRECTOR'S MESSAGE SECTION ========== */
/* Blob animation for background */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

/* Line clamp utilities for text truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Facility tabs active state */
.tab-facility {
    transition: all 0.3s ease;
    border-bottom: 4px solid transparent;
}

.tab-facility:hover {
    background-color: rgba(239, 68, 68, 0.05);
}

/* ========== NEWS & EVENTS SLIDER ========== */
#eventsSlider {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

#eventsSlider .carousel-item {
    scroll-snap-align: start;
}

/* Events slider navigation buttons hover effect */
.events-nav-btn {
    transition: all 0.3s ease;
}

.events-nav-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* News items hover animation */
.news-item {
    transition: all 0.3s ease;
}

.news-item:hover {
    transform: translateX(4px);
}

/* Event date badge animation */
.event-date-badge {
    transition: all 0.3s ease;
}

.event-date-badge:hover {
    transform: scale(1.05);
}

/* Smooth scroll for news section */
.news-scroll {
    scrollbar-width: thin;
    scrollbar-color: #dc2626 #f3f4f6;
}

.news-scroll::-webkit-scrollbar {
    width: 6px;
}

.news-scroll::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
}

.news-scroll::-webkit-scrollbar-thumb {
    background: #dc2626;
    border-radius: 10px;
}

.news-scroll::-webkit-scrollbar-thumb:hover {
    background: #b91c1c;
}

/* Upcoming events image overlay effect */
.upcoming-event-card {
    position: relative;
    overflow: hidden;
}

.upcoming-event-card img {
    transition: transform 0.4s ease;
}

.upcoming-event-card:hover img {
    transform: scale(1.1);
}

/* ========== CONNECT WITH US SECTION ========== */
/* Social media link hover animations */
.social-link {
    transition: all 0.3s ease;
}

.social-link:hover {
    transform: translateY(-2px);
}

/* Newsletter input focus effect */
.newsletter-input:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Navigation Menu Enhancements */
.dropdown-hover {
    position: relative;
}

.dropdown-hover .mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 70;
    animation: slideDown 0.3s ease-out;
    border: 1px solid #e5e7eb;
    margin-top: -2px; /* Remove gap between menu and submenu */
    padding-top: 2px; /* Add internal padding to maintain hover area */
}

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

/* Keep menu open when hovering over dropdown or submenu */
.dropdown-hover:hover > a {
    background-color: #032e4a;
}

/* Ensure continuous hover area */
.dropdown-hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
}

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

.mega-menu li a {
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.mega-menu li a:hover {
    transform: translateX(5px);
}

.mega-menu .menu-title {
    padding: 8px 12px;
    border-bottom: 2px solid #3b82f6;
    margin-bottom: 8px;
    pointer-events: none;
}

/* Mobile menu styles */
@media (max-width: 1023px) {
    .mobile-submenu-horizontal {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .mobile-submenu-horizontal li {
        width: 100%;
    }
}

/* Navigation gradient hover effect */
#mainNav .menu li a {
    position: relative;
    overflow: hidden;
}

#mainNav .menu li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #ffca28;
    transition: width 0.3s ease;
}

#mainNav .menu li a:hover::before {
    width: 100%;
}

/* Academic Departments Switcher Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Staggered animation for department cards */
.department-card {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.department-card:nth-child(1) { animation-delay: 0.1s; }
.department-card:nth-child(2) { animation-delay: 0.2s; }
.department-card:nth-child(3) { animation-delay: 0.3s; }
.department-card:nth-child(4) { animation-delay: 0.4s; }
.department-card:nth-child(5) { animation-delay: 0.5s; }

/* Department title animation */
#deptCategoryTitle {
    animation: fadeInScale 0.8s ease-out;
}

/* Enhanced hover effects for department cards */
.department-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --light-bg: #1a1a1a;
    }
}

/* Tagline Animations */
@keyframes gradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.animate-gradient {
    background-size: 200% auto;
    animation: gradient 3s ease infinite;
}

@keyframes blob {
    0%, 100% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* ========== Professional Polish Pass ========== */

/* Prefer scoped transitions over global * */
*,
*::before,
*::after {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform, filter;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.cta-btn,
.btn {
    border-radius: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.action-card {
    text-decoration: none;
    color: inherit;
}

.action-card:hover .btn,
.action-card:focus-visible .btn {
    transform: translateY(-1px);
}

.action-card .card-body {
    padding: 1.25rem 1rem;
}

/* Tighter, more institutional section rhythm */
main > section {
    scroll-margin-top: 7rem;
}

#mainNav .menu.menu-horizontal > li > a {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    white-space: nowrap;
}

#mainNav .menu.menu-horizontal > li > a i {
    font-size: 0.75rem;
    opacity: 0.9;
}

@media (min-width: 1024px) and (max-width: 1280px) {
    #mainNav .menu.menu-horizontal > li > a i {
        display: none;
    }

    #mainNav .menu.menu-horizontal > li > a {
        font-size: 0.8rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
}

/* Reduce header density feel */
.bg-gkciet-primary.text-white.py-2.md\:py-3 {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Card polish */
.card {
    border-radius: 0.75rem;
}

.card.shadow-xl {
    box-shadow: 0 10px 24px -12px rgba(3, 46, 74, 0.28);
}

/* Typography refinements */
.card-title,
h1, h2, h3 {
    letter-spacing: -0.01em;
}

p, li, a {
    line-height: 1.6;
}

/* Announcement bar quieter */
section[aria-label="Announcements"] {
    background: linear-gradient(90deg, #fff7ed 0%, #fffbeb 100%);
}

/* Footer link readability */
footer a {
    opacity: 0.92;
}

footer a:hover {
    opacity: 1;
}

/* Department page — laboratories */
.dept-lab-featured {
    box-shadow: 0 18px 40px -18px rgba(3, 46, 74, 0.45);
}

.dept-lab-row {
    border-left: 4px solid transparent;
}

.dept-lab-row:hover {
    border-left-color: var(--accent-color, #ffca28);
}

/* Laboratory / department photo gallery */
.lab-photo-gallery .lab-gallery-item,
.dept-photo-gallery .lab-gallery-item {
    aspect-ratio: 4 / 3;
}

.lab-photo-gallery .lab-gallery-item.col-span-2,
.dept-photo-gallery .lab-gallery-item.md\:col-span-2 {
    aspect-ratio: auto;
    min-height: 0;
}

/* Information Center — DataTables (Tailwind / DaisyUI compatible) */
.gkciet-datatable-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 24px -12px rgba(3, 46, 74, 0.18);
    overflow: hidden;
}

/* Compact meta line used only on phone card layout */
.gkciet-datatable-panel .dt-mobile-meta {
    display: none;
}

.gkciet-datatable-panel .dataTables_wrapper {
    padding: 1rem 1.25rem 1.25rem;
    color: #374151;
    font-size: 0.875rem;
}

.gkciet-datatable-panel .gkciet-dt-top,
.gkciet-datatable-panel .gkciet-dt-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.gkciet-datatable-panel .gkciet-dt-bottom {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.gkciet-datatable-panel .dataTables_length label,
.gkciet-datatable-panel .dataTables_filter label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #4b5563;
}

.gkciet-datatable-panel .dataTables_length select,
.gkciet-datatable-panel .dataTables_filter input {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.4rem 0.65rem;
    background: #fff;
    min-height: 2.25rem;
}

.gkciet-datatable-panel .dataTables_filter input {
    min-width: 14rem;
}

.gkciet-datatable-panel .dataTables_filter input:focus,
.gkciet-datatable-panel .dataTables_length select:focus {
    outline: 2px solid rgba(0, 102, 204, 0.35);
    outline-offset: 1px;
    border-color: #0066cc;
}

.gkciet-datatable-panel .dataTables_info {
    color: #6b7280;
}

.gkciet-datatable-panel table.gkciet-datatable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
}

.gkciet-datatable-panel table.dataTable {
    border-collapse: collapse !important;
}

.gkciet-datatable-panel table.gkciet-datatable thead th,
.gkciet-datatable-panel table.dataTable thead th {
    background: #f9fafb !important;
    color: #032e4a;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.85rem 1rem !important;
    border-bottom: 2px solid #e5e7eb !important;
    vertical-align: middle;
}

.gkciet-datatable-panel table.gkciet-datatable tbody td,
.gkciet-datatable-panel table.dataTable tbody td {
    padding: 0.85rem 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    vertical-align: top;
}

.gkciet-datatable-panel table.gkciet-datatable tbody tr:hover td,
.gkciet-datatable-panel table.dataTable tbody tr:hover td {
    background: #f9fafb;
}

.gkciet-datatable-panel .dataTables_paginate {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.gkciet-datatable-panel .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.35rem 0.75rem !important;
    margin: 0 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    color: #032e4a !important;
    cursor: pointer;
}

.gkciet-datatable-panel .dataTables_paginate .paginate_button.current,
.gkciet-datatable-panel .dataTables_paginate .paginate_button.current:hover {
    background: #032e4a !important;
    border-color: #032e4a !important;
    color: #fff !important;
}

.gkciet-datatable-panel .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: #eff6ff !important;
    border-color: #0066cc !important;
    color: #0066cc !important;
}

.gkciet-datatable-panel .dataTables_paginate .paginate_button.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.gkciet-datatable-panel .dataTables_processing {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: #032e4a;
}

.gkciet-datatable-panel .sorting,
.gkciet-datatable-panel .sorting_asc,
.gkciet-datatable-panel .sorting_desc {
    background-position: right 0.5rem center !important;
    padding-right: 1.75rem !important;
}

/* Notice show — attachment focus (all breakpoints) */
.notice-page .notice-attachment.is-focused {
    background: #fffbeb;
    box-shadow: inset 3px 0 0 #ffca28;
}

/* ------------------------------------------------------------------ */
/* Department events (compact; only rendered when dept has events)     */
/* ------------------------------------------------------------------ */
.dept-upcoming-strip {
    border-top: 1px solid rgba(3, 46, 74, 0.06);
}

.dept-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    min-height: 2.85rem;
    border-radius: 0.45rem;
    line-height: 1.05;
    text-align: center;
}

.dept-event-date .day {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.dept-event-date .mon {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.9;
}

.dept-event-date.is-upcoming {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.dept-event-date.is-past {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

@media (max-width: 640px) {
    .dept-upcoming-strip .container {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
}

/* ------------------------------------------------------------------ */
/* Shared notice feed (home Updates, Admissions desk, IC lists)        */
/* ------------------------------------------------------------------ */
.notice-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notice-feed-item {
    border-left: 3px solid #e5e7eb;
    border-radius: 0 0.5rem 0.5rem 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.notice-feed-item.is-accent {
    border-left-color: var(--nf-accent, #f97316);
}

.notice-feed-item a.notice-feed-link {
    display: block;
    padding: 0.65rem 0.75rem;
    text-decoration: none;
}

.notice-feed-item:hover {
    background-color: rgba(248, 250, 252, 0.95);
}

.notice-feed-item.is-dark:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.notice-feed-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.notice-feed-item.is-dark .notice-feed-title {
    color: #fff;
}

.notice-feed-parent {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    line-height: 1.3;
    color: #9ca3af;
}

.notice-feed-item.is-dark .notice-feed-parent {
    color: rgba(254, 226, 226, 0.85);
}

.notice-feed-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    margin-top: 0.45rem;
}

.notice-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.25rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.notice-chip--new {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
    animation: none;
}

.notice-chip--update {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}

.notice-chip--updated {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.notice-chip--type,
.notice-chip--tag {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
    font-weight: 600;
}

.notice-chip--files {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #e5e7eb;
    font-weight: 600;
}

.notice-chip--archive {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
    font-weight: 700;
}

.notice-feed-item.is-dark .notice-chip--new {
    background: rgba(255, 255, 255, 0.18);
    color: #fef08a;
    border-color: rgba(255, 255, 255, 0.28);
}

.notice-feed-item.is-dark .notice-chip--update,
.notice-feed-item.is-dark .notice-chip--type,
.notice-feed-item.is-dark .notice-chip--tag {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.notice-date {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.notice-date i {
    font-size: 0.65rem;
    opacity: 0.8;
}

.notice-date--last {
    color: #dc2626;
    font-weight: 600;
}

.notice-feed-item.is-dark .notice-date {
    color: rgba(254, 226, 226, 0.9);
}

.notice-feed-item.is-dark .notice-date--last {
    color: #fde68a;
}

/* Home Updates tabs — compact segmented control */
.home-updates .update-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem;
    background: #f8fafc;
    border-bottom-width: 1px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.home-updates .update-tabs::-webkit-scrollbar {
    display: none;
}

.home-updates .tab-update {
    flex: 0 0 auto;
    border: 0 !important;
    border-radius: 0.45rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #4b5563;
    background: transparent;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.home-updates .tab-update:hover {
    color: #c2410c;
    background: #fff;
}

.home-updates .tab-update.border-orange-500,
.home-updates .tab-update.text-orange-500 {
    color: #fff !important;
    background: #f97316 !important;
    box-shadow: 0 1px 2px rgba(249, 115, 22, 0.35);
}

/* Ticker status chips */
.ticker-item .notice-chip {
    vertical-align: middle;
    margin-right: 0.25rem;
    position: relative;
    top: -1px;
}

/* IC overview notice lists */
.ic-page .notice-feed-item a.notice-feed-link {
    padding: 0.55rem 0.6rem;
}

.ic-page .notice-feed-title {
    color: var(--primary-color);
}

.ic-page .notice-feed-item:hover .notice-feed-title {
    color: var(--secondary-color);
}

@media (max-width: 640px) {
    .gkciet-datatable-panel .dataTables_wrapper {
        padding: 0.75rem;
    }

    .gkciet-datatable-panel .gkciet-dt-top,
    .gkciet-datatable-panel .gkciet-dt-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .gkciet-datatable-panel .dataTables_filter input {
        width: 100%;
        min-width: 0;
    }
}

.dept-slide .department-card {
    min-height: 9.25rem;
}

/* About and Academics pages on a phone */
@media (max-width: 639px) {
    .about-page nav[aria-label="Breadcrumb"] ol,
    .academics-page nav[aria-label="Breadcrumb"] ol {
        flex-wrap: wrap;
        row-gap: 0.2rem;
        font-size: 0.75rem;
    }

    .about-page h1,
    .academics-page h1,
    .about-page h1.text-3xl,
    .academics-page h1.text-3xl,
    .about-page h1.text-4xl,
    .academics-page h1.text-4xl,
    .about-page h1.text-5xl,
    .academics-page h1.text-5xl,
    .about-page h1.text-6xl,
    .academics-page h1.text-6xl {
        font-size: 1.55rem;
        line-height: 1.2;
    }

    .about-page h2,
    .academics-page h2 {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    .about-page .text-3xl,
    .academics-page .text-3xl,
    .about-page .text-4xl,
    .academics-page .text-4xl {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    .about-page .py-16,
    .academics-page .py-16,
    .about-page .py-14,
    .academics-page .py-14,
    .about-page section.py-12,
    .academics-page section.py-12,
    .about-page section.py-16,
    .academics-page section.py-16 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .about-page .p-8,
    .academics-page .p-8,
    .about-page .px-8,
    .academics-page .px-8,
    .about-page .py-8,
    .academics-page .py-8 {
        padding: 0.9rem;
    }

    .about-page .mb-14,
    .academics-page .mb-14,
    .about-page .mb-12,
    .academics-page .mb-12,
    .about-page .mt-10,
    .academics-page .mt-10 {
        margin-top: 0.85rem;
        margin-bottom: 0.85rem;
    }

    .about-page .gap-6,
    .academics-page .gap-6,
    .about-page .gap-8,
    .academics-page .gap-8 {
        gap: 0.75rem;
    }

    .about-page .leading-loose,
    .academics-page .leading-loose,
    .about-page .leading-relaxed,
    .academics-page .leading-relaxed {
        line-height: 1.55;
    }

    .about-page .org-node,
    .academics-page .org-node {
        padding: 0.8rem 0.7rem;
    }

    .about-page .org-node h3,
    .academics-page .org-node h3,
    .about-page .org-node h4,
    .academics-page .org-node h4 {
        font-size: 1rem;
    }

    .about-page .w-48.h-48,
    .academics-page .w-48.h-48,
    .about-page .w-40.h-40,
    .academics-page .w-40.h-40 {
        width: 7.5rem;
        height: 7.5rem;
    }

    .about-page nav[aria-label="Page sections"] .page-nav-link,
    .academics-page nav[aria-label="Page sections"] .page-nav-link {
        padding: 0.28rem 0.65rem;
        font-size: 0.72rem;
    }

    .academics-page .card-body {
        padding: 0.85rem;
    }

    .academics-page table th,
    .academics-page table td {
        padding: 0.45rem 0.5rem;
        font-size: 0.75rem;
    }

    .academics-page .text-lg {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .about-page.ghani-page .text-justify,
    .about-page.ghani-page .leading-relaxed,
    .about-page.ghani-page #ghani-legacy blockquote {
        text-align: justify;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    .about-page.ghani-page #ghani-hero .leading-relaxed {
        text-align: center;
    }

    .about-page.ghani-page #ghani-hero .py-16 {
        padding-top: 1.1rem;
        padding-bottom: 1.25rem;
    }

    .about-page.ghani-page #ghani-hero .w-48.h-48 {
        width: 6.5rem;
        height: 6.5rem;
    }

    .about-page.ghani-page #ghani-hero h1 {
        font-size: 1.35rem;
        margin-bottom: 0.4rem;
    }

    .about-page.ghani-page #ghani-hero .text-base {
        font-size: 0.86rem;
        line-height: 1.4;
    }

    .about-page.ghani-page #ghani-hero .mt-6 {
        margin-top: 0.65rem;
    }

    .about-page.ghani-page #ghani-life .space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.45rem;
    }

    .about-page.ghani-page #ghani-life .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.55rem;
    }

    .about-page.ghani-page #ghani-life .p-6 {
        padding: 0.7rem;
    }

    .about-page.ghani-page #ghani-life h3 {
        margin-bottom: 0.55rem;
        font-size: 1rem;
    }

    .about-page.ghani-page #ghani-contributions .grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
    }

    .about-page.ghani-page #ghani-contributions .p-6,
    .about-page.ghani-page #ghani-impact .p-6 {
        padding: 0.55rem;
    }

    .about-page.ghani-page #ghani-contributions .w-12.h-12 {
        width: 1.7rem;
        height: 1.7rem;
        margin-bottom: 0.3rem;
    }

    .about-page.ghani-page #ghani-contributions h4 {
        font-size: 0.8rem;
        line-height: 1.2;
        margin-bottom: 0.15rem;
    }

    .about-page.ghani-page #ghani-contributions .text-sm,
    .about-page.ghani-page #ghani-life .timeline-item p {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .about-page.ghani-page #ghani-impact h3 {
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
    }

    .about-page.ghani-page #ghani-impact .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.5rem;
    }

    .about-page.ghani-page #ghani-impact p,
    .about-page.ghani-page #ghani-legacy blockquote {
        font-size: 0.86rem;
        line-height: 1.4;
    }

    .about-page.ghani-page #ghani-legacy .text-5xl {
        font-size: 1.4rem;
        margin-bottom: 0.35rem;
    }

    .about-page.ghani-page #ghani-legacy .mt-8 {
        margin-top: 0.75rem;
    }

    .about-page #vision-mission,
    .about-page #goals,
    .about-page #objectives {
        padding-top: 1.05rem;
        padding-bottom: 1.05rem;
    }

    .about-page #vision-mission .mb-12,
    .about-page #goals .mb-12,
    .about-page #objectives .mb-12 {
        margin-bottom: 0.5rem;
    }

    .about-page #vision-mission .p-6 {
        padding: 0.65rem 0.75rem;
    }

    .about-page #vision-mission h3,
    .about-page #goals h3 {
        font-size: 1.02rem;
        line-height: 1.2;
    }

    .about-page #vision-mission .w-12.h-12,
    .about-page #objectives .w-12.h-12 {
        width: 1.75rem;
        height: 1.75rem;
    }

    .about-page #objectives .w-12.h-12 {
        margin-bottom: 0.3rem;
    }

    .about-page #vision-mission .w-12.h-12 i,
    .about-page #objectives .w-12.h-12 i {
        font-size: 0.85rem;
    }

    .about-page #vision-mission blockquote p,
    .about-page #vision-mission li span,
    .about-page #goals p.leading-relaxed {
        text-align: left;
        hyphens: manual;
        -webkit-hyphens: manual;
        font-size: 0.86rem;
        line-height: 1.4;
    }

    .about-page #vision-mission .pl-8 {
        padding-left: 1.1rem;
    }

    .about-page #vision-mission .space-y-3 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.32rem;
    }

    .about-page #vision-mission .w-6.h-6 {
        width: 1rem;
        height: 1rem;
        margin-top: 0.1rem;
    }

    .about-page #goals .w-16.h-16 {
        width: 1.9rem;
        height: 1.9rem;
        top: 0.5rem;
        right: 0.5rem;
    }

    .about-page #goals h3 {
        margin-top: 0.3rem;
        margin-bottom: 0.25rem;
        padding-right: 2rem;
    }

    .about-page #objectives .grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
    }

    .about-page #objectives .bg-white\/10 {
        padding: 0.55rem;
    }

    .about-page #objectives h4 {
        font-size: 0.8rem;
        line-height: 1.2;
        margin-bottom: 0.15rem;
    }

    .about-page #objectives .bg-white\/10 > p {
        font-size: 0.7rem;
        line-height: 1.35;
        text-align: left;
        hyphens: manual;
        -webkit-hyphens: manual;
    }

    .department-page h1,
    .department-page h1.text-3xl,
    .department-page h1.text-4xl,
    .department-page h1.text-5xl {
        font-size: 1.55rem;
        line-height: 1.2;
    }

    .department-page h2,
    .department-page .text-3xl,
    .department-page .text-4xl {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    .department-page .py-14,
    .department-page section.py-12 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .department-page .p-8,
    .department-page .px-8,
    .department-page .py-8,
    .department-page .card-body {
        padding: 0.85rem;
    }

    .department-page .mb-10,
    .department-page .mb-8,
    .department-page .mb-12,
    .department-page .mt-10 {
        margin-top: 0.85rem;
        margin-bottom: 0.85rem;
    }

    .department-page .gap-6,
    .department-page .gap-8 {
        gap: 0.75rem;
    }

    .department-page .leading-relaxed,
    .department-page .leading-loose {
        line-height: 1.55;
    }

    .department-page .text-lg {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .department-page nav[aria-label="Breadcrumb"] {
        font-size: 0.75rem;
        line-height: 1.35;
    }

    .department-page .badge-lg {
        font-size: 0.68rem;
        height: auto;
        min-height: 0;
        padding: 0.2rem 0.5rem;
    }

    .department-page table th,
    .department-page table td {
        padding: 0.45rem 0.5rem;
        font-size: 0.75rem;
    }

    .department-page .dept-subnav > .container > .flex,
    .department-page .dept-subnav .flex.flex-wrap {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .department-page .dept-subnav .btn {
        flex-shrink: 0;
        font-size: 0.72rem;
        min-height: 1.75rem;
        height: auto;
        padding: 0.28rem 0.55rem;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) h1,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) h1.text-2xl,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) h1.text-3xl,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) h1.text-4xl,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) h1.text-5xl {
        font-size: 1.55rem;
        line-height: 1.2;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) h2,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) h3.text-xl,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .text-2xl,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .text-3xl {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .py-14,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .md\:py-20,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) section.py-12,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .py-12 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .mb-10,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .mb-8 {
        margin-bottom: 0.85rem;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .p-6,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .p-8,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .md\:p-6 {
        padding: 0.85rem;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .gap-8 {
        gap: 0.75rem;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .text-lg {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) nav[aria-label="Breadcrumb"] ol {
        flex-wrap: wrap;
        row-gap: 0.2rem;
        font-size: 0.75rem;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .fee-card .w-16.h-16 {
        width: 2.75rem;
        height: 2.75rem;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .pay-table thead {
        display: none;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .pay-table,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .pay-table tbody,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .pay-table tr,
    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .pay-table td {
        display: block;
        width: auto;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .pay-table tr {
        margin-bottom: 0.65rem;
        padding: 0.55rem 0.7rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.65rem;
        background: #fff;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .pay-table tr[data-group]::before {
        content: attr(data-group);
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #032e4a;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .pay-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        border: 0;
        padding: 0.22rem 0;
        text-align: right;
        font-size: 0.8rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .pay-table td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #64748b;
    }

    .facility-page .member-row.flex {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .facility-page .member-row.flex > div {
        min-width: 0;
    }

    .facility-page .research-nav > .container > .flex {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .facility-page .research-nav .btn {
        flex-shrink: 0;
    }

    :is(.admission-page, .facility-page, .placement-page, .student-page, .contact-page) .card-body {
        padding: 0.85rem;
    }

    .facility-page img.h-72 {
        height: 11rem;
    }

    .placement-page .placement-yearbar form {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .placement-page .placement-yearbar .btn {
        flex-shrink: 0;
    }

    .placement-page .badge-lg {
        height: auto;
        font-size: 0.72rem;
        padding: 0.35rem 0.55rem;
        white-space: normal;
    }

    .placement-page .btn-lg {
        height: auto;
        min-height: 2.5rem;
        font-size: 0.85rem;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .student-page .rounded-lg.flex.items-center {
        flex-wrap: wrap;
    }

    .contact-page .-mt-16 {
        margin-top: 0.75rem;
    }

    .contact-page .h-80 {
        height: 14rem;
    }

    .contact-page a {
        overflow-wrap: anywhere;
    }

    /* Inner pages only: tighter boxes so a phone shows more without extra scrolling */
    .inner-page #main-content h1,
    .inner-page #main-content h1.text-2xl,
    .inner-page #main-content h1.text-3xl,
    .inner-page #main-content h1.text-4xl,
    .inner-page #main-content h1.text-5xl {
        font-size: 1.45rem;
        line-height: 1.25;
    }

    .inner-page #main-content h2,
    .inner-page #main-content h3.text-xl,
    .inner-page #main-content .text-2xl:not(h1),
    .inner-page #main-content .text-3xl:not(h1),
    .inner-page #main-content .text-4xl:not(h1) {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .inner-page #main-content .py-10,
    .inner-page #main-content .py-12,
    .inner-page #main-content .py-14,
    .inner-page #main-content .py-16,
    .inner-page #main-content .py-20,
    .inner-page #main-content .md\:py-16,
    .inner-page #main-content .md\:py-20 {
        padding-top: 1.1rem;
        padding-bottom: 1.1rem;
    }

    .inner-page #main-content .card-body,
    .inner-page #main-content .p-5,
    .inner-page #main-content .p-6,
    .inner-page #main-content .p-8,
    .inner-page #main-content .md\:p-6,
    .inner-page #main-content .md\:p-8 {
        padding: 0.7rem;
    }

    .inner-page #main-content .mb-6,
    .inner-page #main-content .mb-8,
    .inner-page #main-content .mb-10,
    .inner-page #main-content .mb-12,
    .inner-page #main-content .mb-16 {
        margin-bottom: 0.6rem;
    }

    .inner-page #main-content .mt-8,
    .inner-page #main-content .mt-10,
    .inner-page #main-content .mt-12,
    .inner-page #main-content .mt-16 {
        margin-top: 0.6rem;
    }

    .inner-page #main-content .space-y-6 > :not([hidden]) ~ :not([hidden]),
    .inner-page #main-content .space-y-8 > :not([hidden]) ~ :not([hidden]),
    .inner-page #main-content .space-y-10 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.6rem;
    }

    .inner-page #main-content .gap-5,
    .inner-page #main-content .gap-6,
    .inner-page #main-content .gap-8 {
        gap: 0.55rem;
    }

    .inner-page #main-content .w-12.h-12,
    .inner-page #main-content .w-14.h-14,
    .inner-page #main-content .w-16.h-16,
    .inner-page #main-content .w-20.h-20 {
        width: 2.25rem;
        height: 2.25rem;
    }

    .inner-page #main-content .h-56,
    .inner-page #main-content .h-64,
    .inner-page #main-content .h-72,
    .inner-page #main-content .h-80,
    .inner-page #main-content .h-96,
    .inner-page #main-content .md\:h-96 {
        height: 10rem;
    }

    .inner-page #main-content .stat {
        padding: 0.5rem 0.65rem;
    }

    .inner-page #main-content .stat-value {
        font-size: 1.2rem;
    }

    .inner-page #main-content nav[aria-label="Breadcrumb"] ol {
        flex-wrap: wrap;
        row-gap: 0.15rem;
    }

    .inner-page #main-content .pay-table thead {
        display: none;
    }

    .inner-page #main-content .pay-table,
    .inner-page #main-content .pay-table tbody,
    .inner-page #main-content .pay-table tr,
    .inner-page #main-content .pay-table td {
        display: block;
        width: auto;
    }

    .inner-page #main-content .pay-table tr {
        margin-bottom: 0.55rem;
        padding: 0.5rem 0.65rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.65rem;
        background: #fff;
    }

    .inner-page #main-content .pay-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
        border: 0;
        padding: 0.2rem 0;
        text-align: right;
        font-size: 0.8rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .inner-page #main-content .pay-table td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #64748b;
    }

    .inner-page #main-content .pay-table td[data-label="Title"],
    .inner-page #main-content .pay-table td[data-label="Title / Document"] {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 0.2rem;
        padding-bottom: 0.4rem;
        margin-bottom: 0.15rem;
        border-bottom: 1px solid #f1f5f9;
    }

    .inner-page #main-content .pay-table td[data-label="Title"]::before,
    .inner-page #main-content .pay-table td[data-label="Title / Document"]::before,
    .inner-page #main-content .pay-table td[data-label="Sl"]::before {
        display: none;
    }

    .inner-page #main-content .pay-table td[data-label="Sl"] {
        display: none;
    }

    .inner-page #main-content .pay-table td[data-label="Action"] {
        padding-top: 0.4rem;
        margin-top: 0.1rem;
        border-top: 1px solid #f1f5f9;
        justify-content: stretch;
    }

    .inner-page #main-content .pay-table td[data-label="Action"]::before {
        display: none;
    }

    .inner-page #main-content .pay-table td[data-label="Action"] .btn {
        width: 100%;
        justify-content: center;
    }

    .department-page #at-glance .glance-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .department-page #at-glance .glance-grid .card-body {
        padding: 0.55rem;
        gap: 0.35rem;
    }

    .department-page #at-glance .glance-grid .w-14.h-14 {
        width: 1.85rem;
        height: 1.85rem;
    }

    .department-page #at-glance .glance-grid .w-14.h-14 i {
        font-size: 0.85rem;
    }

    .department-page #at-glance .glance-grid .card-title {
        font-size: 0.82rem;
        line-height: 1.2;
    }

    .department-page #at-glance .glance-grid .btn {
        min-height: 1.7rem;
        height: auto;
        font-size: 0.68rem;
        padding: 0.25rem 0.4rem;
        white-space: normal;
    }

    .department-page #at-glance .glance-grid .flex.justify-between {
        flex-wrap: wrap;
        gap: 0.2rem;
    }

    .department-page .dept-tour-frame,
    .department-page .dept-tour-frame .min-h-\[400px\],
    .department-page .dept-tour-frame iframe {
        min-height: 11rem;
        height: 11rem;
    }

    .department-page .dept-media-frame:not(.dept-tour-frame) {
        min-height: 0;
        height: auto;
    }

    .department-page #at-glance .dept-gallery-grid img {
        height: 6.25rem;
    }

    .department-page #notices-events-news {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .department-page #notices-events-news .px-5 {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .department-page #notices-events-news .py-4 {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    .department-page .dept-hero {
        padding-top: 0.7rem;
        padding-bottom: 0.65rem;
    }

    .department-page .dept-hero nav {
        margin-bottom: 0.25rem;
    }

    .department-page .dept-hero h1 {
        margin-bottom: 0.2rem;
    }

    .department-page .dept-hero-tagline {
        font-size: 0.8rem;
        line-height: 1.3;
        margin-bottom: 0.35rem;
    }

    .department-page .dept-hero-badges {
        gap: 0.28rem;
    }

    .department-page .dept-hero-badges .badge-lg {
        font-size: 0.62rem;
        padding: 0.1rem 0.38rem;
        gap: 0.2rem;
    }

    .department-page #contact {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .department-page #contact .grid.gap-8 {
        gap: 0.55rem;
    }

    .department-page #contact .card-body {
        padding: 0.6rem;
    }

    .department-page #contact .card-title {
        margin-bottom: 0.4rem;
        font-size: 0.95rem;
    }

    .department-page #contact .space-y-3 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.4rem;
    }

    .department-page #contact .gap-4 {
        gap: 0.45rem;
    }

    .department-page #contact .bg-white\/20 {
        padding: 0.35rem;
    }

    .department-page #contact .bg-white\/20 i {
        font-size: 0.8rem;
    }

    .department-page #contact .text-sm {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .department-page #contact h4 {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .department-page #contact .btn-sm {
        min-height: 1.65rem;
        height: auto;
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }

    .department-page #contact .dept-message-card .card-body {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .department-page #contact .dept-message-card .card-title {
        font-size: 1rem;
    }

    .department-page #contact .dept-message-card .btn {
        min-height: 2.25rem;
        height: auto;
        font-size: 0.8125rem;
    }

    .department-page #hod img.w-32 {
        width: 5.5rem;
        height: 5.5rem;
    }

    /* Office pages — mobile rhythm (inherits .department-page via shared class) */
    .office-page .office-hero-kicker {
        font-size: 0.62rem;
        margin-bottom: 0.2rem;
        letter-spacing: 0.08em;
    }

    .office-page .office-hero-links {
        gap: 0.28rem;
    }

    .office-page #officeSubNav .office-subnav-track,
    .office-page #officeSubNav > .container > .flex {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        gap: 0.35rem;
    }

    .office-page #officeSubNav .office-subnav-track::-webkit-scrollbar,
    .office-page #officeSubNav > .container > .flex::-webkit-scrollbar {
        display: none;
    }

    .office-page #officeSubNav .btn {
        flex-shrink: 0;
        font-size: 0.72rem;
        min-height: 1.75rem;
        height: auto;
        padding: 0.28rem 0.55rem;
    }

    .office-page #overview,
    .office-page #updates,
    .office-page #head,
    .office-page #documents,
    .office-page #resources,
    .office-page #achievements,
    .office-page #events,
    .office-page #gallery,
    .office-page #videos,
    .office-page #people,
    .office-page #contact {
        scroll-margin-top: calc(var(--dept-subnav-top, 0px) + 3.25rem);
        padding-top: 1.15rem;
        padding-bottom: 1.15rem;
    }

    .office-page #overview .card-body {
        padding: 0.75rem;
    }

    .office-page .office-about-tabs {
        scrollbar-width: none;
    }

    .office-page .office-about-tabs::-webkit-scrollbar {
        display: none;
    }

    .office-page #updates .notice-feed-title {
        font-size: 0.84rem;
        line-height: 1.35;
    }

    .office-page #documents .card .px-5,
    .office-page #documents ul.divide-y > li {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .office-page #documents a.line-clamp-2 {
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .office-page #resources .card-body {
        padding: 0.85rem;
    }

    .office-page #gallery .dept-photo-gallery {
        gap: 0.45rem;
    }

    .office-page #gallery .gallery-item img.h-28 {
        height: 7rem;
    }

    .office-page #gallery .office-gallery-videos {
        margin-top: 0.85rem;
        padding-top: 0.75rem;
    }

    .office-page #gallery .office-gallery-videos .card-body {
        padding: 0.55rem 0.7rem;
    }

    .office-page #gallery .office-gallery-videos iframe {
        max-height: 52vw;
    }

    .office-page #resources .office-slide-card {
        width: 78%;
    }

    .office-page #updates .grid {
        gap: 0.75rem;
    }

    .office-page #head .btn {
        min-height: 2rem;
        height: auto;
        font-size: 0.75rem;
    }

    .office-page #contact {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .office-page #contact .card-body {
        padding: 0.65rem;
    }

    .office-page #contact .space-y-3 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.4rem;
    }

    .office-page #head img.w-32,
    .office-page #head img.sm\:w-32 {
        width: 5.5rem;
        height: 5.5rem;
    }

    .office-page li.flex.justify-between {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .department-page #people .people-grid,
    .office-page #people .people-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
    }

    .department-page #people .people-grid img.w-24,
    .office-page #people .people-grid img.w-24 {
        width: 3.25rem;
        height: 3.25rem;
    }

    .department-page #people .people-grid .card-body,
    .office-page #people .people-grid .card-body {
        padding: 0.45rem;
    }

    .department-page .lab-grid {
        gap: 0.65rem;
    }

    .department-page .lab-grid figure.h-52 {
        height: 8.5rem;
    }

    .office-page #achievements .grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .content-page .chip-row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .content-page .chip-wrap {
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: visible;
    }

    .notice-page .notice-crumb-sep,
    .notice-page .notice-crumb-title,
    .notice-page .notice-help {
        display: none;
    }

    /* Keep key facts on phone; hide duplicate sidebar detail cards only */
    .notice-page .notice-facts,
    .notice-page .notice-programmes {
        display: none;
    }

    .notice-page .notice-kicker {
        margin-bottom: 0.3rem;
    }

    .notice-page .notice-kicker .badge-lg {
        font-size: 0.68rem;
        min-height: 0;
        height: auto;
        padding: 0.12rem 0.4rem;
    }

    .inner-page #main-content .notice-page .notice-hero h1,
    .notice-page .notice-title {
        font-size: 1.05rem;
        line-height: 1.35;
        margin-bottom: 0.15rem;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .notice-page .notice-hero {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .notice-page .notice-breadcrumb {
        margin-bottom: 0.35rem;
        font-size: 0.7rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .notice-page .notice-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .notice-page .notice-hero .text-lg {
        font-size: 0.8rem;
        line-height: 1.35;
    }

    .notice-page .notice-meta {
        gap: 0.2rem 0.75rem;
        margin-top: 0.35rem;
        font-size: 0.72rem;
    }

    .notice-page .notice-body {
        padding-top: 0.75rem;
        padding-bottom: 0.85rem;
    }

    .notice-page .py-12 {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }

    .notice-page .gap-6 {
        gap: 0.55rem;
    }

    .notice-page .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.55rem;
    }

    .notice-page .card-body,
    .notice-page .p-6,
    .notice-page .p-5 {
        padding: 0.65rem;
    }

    .notice-page .notice-summary {
        font-size: 0.88rem;
        line-height: 1.45;
        padding: 0.75rem;
    }

    .notice-page .notice-panel-head {
        padding: 0.6rem 0.75rem;
    }

    .notice-page .notice-panel-head h2 {
        font-size: 0.9rem;
    }

    .notice-page .notice-attachment {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        padding: 0.75rem;
        scroll-margin-top: 5.5rem;
    }

    .notice-page .notice-attachment-title {
        font-size: 0.9rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .notice-page .notice-attachment-meta {
        gap: 0.35rem 0.45rem;
    }

    .notice-page .notice-attachment-meta .badge {
        font-size: 0.62rem;
        line-height: 1.2;
        padding: 0.15rem 0.4rem;
        height: auto;
        min-height: 0;
    }

    .notice-page .notice-attachment-open {
        width: 100%;
        min-height: 2.5rem;
        justify-content: center;
        margin-top: 0;
    }

    .notice-page .notice-attachment.is-focused {
        background: #fffbeb;
        box-shadow: inset 3px 0 0 #ffca28;
        outline: none;
    }

    .notice-page .notice-actions .btn {
        width: 100%;
        justify-content: flex-start;
        min-height: 2.4rem;
    }

    .notice-page .w-12.h-12 {
        width: 2.2rem;
        height: 2.2rem;
    }

    .events-page .events-hero,
    .event-page .event-hero {
        padding-top: 0.6rem;
        padding-bottom: 0.5rem;
    }

    .events-page .events-hero nav,
    .event-page .event-hero nav {
        margin-bottom: 0.25rem;
    }

    .event-page .event-crumb,
    .event-page .event-crumb-sep {
        display: none;
    }

    .inner-page #main-content .events-page .events-hero h1,
    .inner-page #main-content .event-page .event-hero h1 {
        font-size: 1.15rem;
        line-height: 1.3;
        margin-bottom: 0.25rem;
    }

    .events-page .events-hero .text-base,
    .event-page .event-hero .text-lg {
        font-size: 0.8rem;
        line-height: 1.35;
        margin-bottom: 0;
    }

    .event-page .event-kicker {
        gap: 0.3rem;
        margin-bottom: 0.35rem;
    }

    .event-page .event-kicker .badge-lg {
        font-size: 0.65rem;
        min-height: 0;
        height: auto;
        padding: 0.1rem 0.4rem;
    }

    .event-page .event-facts {
        gap: 0.2rem 0.7rem;
        font-size: 0.75rem;
    }

    .event-page .event-facts i {
        font-size: 0.75rem;
    }

    .events-page .sticky {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .events-page .events-filters {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .events-page .events-filters .select {
        min-height: 2rem;
        height: 2rem;
        font-size: 0.72rem;
        padding-left: 0.45rem;
        padding-right: 1.5rem;
    }

    .inner-page #main-content .events-page .event-card img {
        height: 7rem;
    }

    .events-page .event-card .card-body {
        padding: 0.6rem;
        gap: 0.3rem;
    }

    .events-page .event-card .card-title {
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .events-page .event-card .line-clamp-3 {
        -webkit-line-clamp: 2;
        font-size: 0.78rem;
    }

    .events-page .event-card .card-actions {
        display: none;
    }

    .event-page .event-nav-row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        gap: 0.35rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        scrollbar-width: none;
    }

    .event-page .event-nav-row > .flex {
        flex-wrap: nowrap;
        flex-shrink: 0;
        gap: 0.3rem;
    }

    .event-page .event-nav-row > .ml-auto {
        margin-left: 0.35rem;
    }

    .event-page .event-nav .btn {
        flex-shrink: 0;
        min-height: 1.65rem;
        height: auto;
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }

    .inner-page #main-content .event-page figure img.h-72,
    .inner-page #main-content .event-page figure img.h-80,
    .inner-page #main-content .event-page figure img.md\:h-96 {
        height: 8rem;
    }

    .event-page .text-2xl {
        font-size: 1.05rem;
    }

    .event-page .gkciet-prose,
    .event-page .leading-relaxed {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .event-page .event-repeat {
        display: none;
    }

    .event-page .card-body {
        padding: 0.7rem;
    }

    .event-page .space-y-6 > :not([hidden]) ~ :not([hidden]),
    .event-page .space-y-8 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.55rem;
    }

    .ic-page #admission,
    .ic-page [id^="type-"],
    .ic-page [id^="docs-"] {
        scroll-margin-top: calc(var(--ic-sticky-top, 0px) + 9.5rem);
    }

    .ic-page .ic-hero {
        padding-top: 0.75rem;
        padding-bottom: 0.7rem;
    }

    .ic-page .ic-hero h1 {
        font-size: 1.35rem;
        line-height: 1.25;
        margin-bottom: 0;
    }

    .ic-page .ic-hero nav {
        margin-bottom: 0.45rem;
        font-size: 0.72rem;
    }

    .ic-page .ic-hero-extra,
    .ic-page .ic-help {
        display: none;
    }

    .ic-page .ic-sticky {
        top: var(--ic-sticky-top, var(--dept-subnav-top, 0px));
        padding-top: 0;
        padding-bottom: 0;
    }

    .ic-page .ic-sticky > .container {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    .ic-page .ic-sticky .space-y-3 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.4rem;
    }

    .ic-page .ic-sticky #notificationsToolbar {
        gap: 0.4rem;
    }

    .ic-page .ic-area-tabs,
    .ic-page .ic-jump-chips,
    .ic-page .chip-row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.1rem;
    }

    .ic-page .ic-area-tabs::-webkit-scrollbar,
    .ic-page .ic-jump-chips::-webkit-scrollbar,
    .ic-page .chip-row::-webkit-scrollbar {
        display: none;
    }

    .ic-page .ic-area-tabs .btn,
    .ic-page .ic-jump-chips .btn,
    .ic-page .chip-wrap .btn,
    .ic-page .chip-row .btn {
        flex-shrink: 0;
        min-height: 1.7rem;
        height: auto;
        font-size: 0.72rem;
        padding: 0.2rem 0.55rem;
    }

    .ic-page .ic-sticky .input {
        min-height: 2.15rem;
        height: 2.15rem;
        font-size: 0.84rem;
    }

    .ic-page #notificationsSection,
    .ic-page #documentsSection {
        padding-top: 0.85rem;
        padding-bottom: 1rem;
    }

    .ic-page #notificationsSection > .container,
    .ic-page #documentsSection > .container {
        gap: 0.75rem;
    }

    .ic-page #notificationsSection .space-y-10 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.85rem;
    }

    .ic-page .ic-section-head {
        padding: 0.65rem 0.75rem !important;
    }

    .ic-page .ic-section-head h2,
    .ic-page .ic-section-head h3 {
        font-size: 1rem;
        line-height: 1.25;
    }

    .ic-page .ic-section-head .btn {
        min-height: 1.7rem;
        height: auto;
        font-size: 0.72rem;
        padding: 0.2rem 0.55rem;
    }

    .ic-page .ic-program-grid {
        gap: 0.55rem;
    }

    .ic-page .ic-program-card {
        border-radius: 0.65rem;
    }

    .ic-page .ic-program-head {
        padding: 0.45rem 0.6rem;
    }

    .ic-page .ic-program-head h3 {
        font-size: 0.9rem;
        line-height: 1.25;
    }

    .ic-page .ic-program-meta {
        font-size: 0.68rem;
    }

    .ic-page .ic-program-card > .p-3 {
        padding: 0.35rem 0.45rem !important;
    }

    .ic-page .ic-item-title {
        font-size: 0.86rem;
        line-height: 1.35;
    }

    .ic-page ul.space-y-1 > :not([hidden]) ~ :not([hidden]),
    .ic-page ul.space-y-2 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.1rem;
    }

    .ic-page .notice-section a.block {
        padding: 0.4rem 0.45rem;
    }

    .ic-page .notice-section a.block .text-xs {
        font-size: 0.68rem;
        gap: 0.35rem 0.55rem;
    }

    .ic-page .card-body,
    .ic-page .p-6,
    .ic-page .p-4 {
        padding: 0.55rem;
    }

    .ic-page #documentsSection h2 {
        font-size: 1.1rem;
        line-height: 1.25;
    }

    .ic-page #documentsSection > .container > .flex {
        margin-bottom: 0.75rem;
        gap: 0.5rem;
    }

    .ic-page #documentsSection > .container > .flex p {
        display: none;
    }

    .content-page .chip-row .btn {
        flex-shrink: 0;
    }

    .content-page a {
        overflow-wrap: anywhere;
    }

    .content-page img.w-36 {
        width: 5.5rem;
        height: 5.5rem;
    }

    .content-page.faculty-profile .faculty-head {
        flex-direction: row;
        align-items: flex-start;
        gap: 0.7rem;
        width: 100%;
    }

    .content-page.faculty-profile img.w-36 {
        width: 4.6rem;
        height: 4.6rem;
    }

    .content-page.faculty-profile .faculty-identity,
    .content-page.faculty-profile .faculty-identity h1,
    .content-page.faculty-profile .faculty-identity p {
        text-align: left;
    }

    .inner-page #main-content .faculty-profile .faculty-identity h1 {
        font-size: 1.15rem;
        line-height: 1.2;
    }

    .content-page.faculty-profile .faculty-identity .text-lg {
        font-size: 0.82rem;
        line-height: 1.3;
        margin-top: 0.15rem;
    }

    .content-page.faculty-profile .px-6.py-8,
    .content-page.faculty-profile .px-6.py-8 + .px-6 {
        padding: 0.75rem;
    }

    .content-page.faculty-profile .faculty-contacts {
        justify-content: flex-start;
        gap: 0.35rem;
        margin-top: 0.5rem;
    }

    .content-page.faculty-profile .faculty-contacts > a,
    .content-page.faculty-profile .faculty-contacts > span {
        font-size: 0.72rem;
        line-height: 1.2;
        padding: 0.25rem 0.45rem;
    }

    .content-page.faculty-profile .space-y-8 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.75rem;
    }

    .content-page.faculty-profile .space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.45rem;
    }

    .content-page.faculty-profile h2 {
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
        padding-bottom: 0.2rem;
    }

    .content-page.faculty-profile .leading-relaxed {
        text-align: left;
        font-size: 0.84rem;
        line-height: 1.4;
    }

    .content-page.faculty-profile .p-5 {
        padding: 0.65rem;
    }

    .gkciet-datatable-panel .gkciet-dt-top,
    .gkciet-datatable-panel .gkciet-dt-bottom,
    .gkciet-datatable-panel .dataTables_wrapper .gkciet-dt-top,
    .gkciet-datatable-panel .dataTables_wrapper .gkciet-dt-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    .gkciet-datatable-panel .dataTables_wrapper {
        padding: 0.55rem 0.6rem 0.7rem;
    }

    .gkciet-datatable-panel .dataTables_length label,
    .gkciet-datatable-panel .dataTables_filter label {
        width: 100%;
        flex-wrap: nowrap;
        white-space: nowrap;
        font-size: 0.78rem;
        gap: 0.35rem;
    }

    .gkciet-datatable-panel .dataTables_filter,
    .gkciet-datatable-panel .dataTables_filter input,
    .gkciet-datatable-panel .dataTables_length,
    .gkciet-datatable-panel .dataTables_length select {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }

    .gkciet-datatable-panel .dataTables_filter input {
        flex: 1 1 auto;
        min-height: 2rem;
        padding: 0.3rem 0.55rem;
        font-size: 0.84rem;
    }

    .gkciet-datatable-panel .dataTables_info {
        font-size: 0.72rem;
        text-align: center;
        width: 100%;
    }

    .gkciet-datatable-panel .dataTables_paginate {
        justify-content: center;
        width: 100%;
        gap: 0.15rem;
    }

    .gkciet-datatable-panel .dataTables_paginate .paginate_button {
        min-width: 1.9rem;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem;
    }

    .gkciet-datatable-panel .overflow-x-auto {
        overflow: visible;
    }

    .gkciet-datatable-panel,
    .gkciet-datatable-panel .dataTables_wrapper,
    .gkciet-datatable-panel table.dataTable {
        width: 100% !important;
        max-width: 100% !important;
    }

    .gkciet-datatable-panel table.dataTable thead {
        display: none !important;
    }

    .gkciet-datatable-panel table.dataTable,
    .gkciet-datatable-panel table.dataTable tbody,
    .gkciet-datatable-panel table.dataTable tr,
    .gkciet-datatable-panel table.dataTable td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Dense notice/document cards: title + one compact meta line */
    .gkciet-datatable-panel table.dataTable tr {
        margin: 0 0 0.4rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.55rem;
        background: #fff;
        padding: 0.4rem 0.55rem;
        box-shadow: none;
    }

    .gkciet-datatable-panel table.dataTable td {
        display: flex !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.4rem;
        border: 0 !important;
        padding: 0.15rem 0 !important;
        text-align: right;
        font-size: 0.8rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .gkciet-datatable-panel table.dataTable td::before {
        content: attr(data-label);
        flex: 0 0 32%;
        max-width: 7rem;
        text-align: left;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #64748b;
    }

    .gkciet-datatable-panel table.dataTable td[data-label="Title"],
    .gkciet-datatable-panel table.dataTable td[data-label="Title / Document"] {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 0.15rem;
        padding: 0 !important;
        margin: 0;
        border: 0 !important;
    }

    .gkciet-datatable-panel table.dataTable td[data-label="Title"]::before,
    .gkciet-datatable-panel table.dataTable td[data-label="Title / Document"]::before {
        display: none;
    }

    .gkciet-datatable-panel table.dataTable td[data-label="Title"] .ic-item-title,
    .gkciet-datatable-panel table.dataTable td[data-label="Title / Document"] .ic-item-title {
        display: block;
        font-size: 0.88rem;
        line-height: 1.3;
        font-weight: 700;
    }

    .gkciet-datatable-panel .dt-mobile-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.2rem 0.55rem;
        margin-top: 0.15rem;
        font-size: 0.68rem;
        line-height: 1.25;
        color: #64748b;
    }

    .gkciet-datatable-panel .dt-mobile-meta .badge {
        min-height: 1.05rem;
        height: auto;
        font-size: 0.6rem;
        padding: 0.05rem 0.3rem;
    }

    .gkciet-datatable-panel .dt-desktop-extra,
    .gkciet-datatable-panel table.dataTable td[data-label="Sl"],
    .gkciet-datatable-panel table.dataTable td.dt-col-meta,
    .gkciet-datatable-panel table.dataTable td[data-label="Posted"],
    .gkciet-datatable-panel table.dataTable td[data-label="Last date"],
    .gkciet-datatable-panel table.dataTable td[data-label="Action"],
    .gkciet-datatable-panel table.dataTable td[data-label="Audience"],
    .gkciet-datatable-panel table.dataTable td[data-label="Published"] {
        display: none !important;
    }

    /* Research / multi-column tables without dt-mobile-meta keep compact labeled rows */
    .gkciet-datatable-panel table.dataTable tr:has(td[data-label="Title"]:not(:has(.dt-mobile-meta))) td[data-label="Action"] {
        display: flex !important;
        padding-top: 0.25rem !important;
        justify-content: flex-end;
    }

    .gkciet-datatable-panel table.dataTable tr:has(td[data-label="Title"]:not(:has(.dt-mobile-meta))) td[data-label="Action"]::before {
        display: none;
    }

    .gkciet-datatable-panel table.dataTable tr:has(td[data-label="Title"]:not(:has(.dt-mobile-meta))) td[data-label="Action"] .btn {
        width: auto;
        min-height: 1.6rem;
        height: auto;
        font-size: 0.7rem;
        padding: 0.15rem 0.5rem;
    }

    .ic-page .ic-item-desc {
        display: none;
    }

    :is(.department-page, .office-page) dialog.modal .modal-box {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        margin: 0.5rem;
        padding: 0.7rem 0.7rem 0.85rem;
    }

    :is(.department-page, .office-page) dialog.modal .modal-box > .btn-circle {
        position: sticky;
        top: 0;
        float: right;
        z-index: 5;
        margin: 0 0 0.15rem 0.4rem;
    }

    :is(.department-page, .office-page) dialog.modal .modal-box > h3 {
        font-size: 1.05rem;
        line-height: 1.25;
        margin-bottom: 0.55rem;
        padding-right: 2rem;
    }

    :is(.department-page, .office-page) dialog.modal .modal-box .card-body {
        padding: 0.6rem;
    }

    :is(.department-page, .office-page) dialog.modal .modal-box .text-xl,
    :is(.department-page, .office-page) dialog.modal .modal-box .text-2xl {
        font-size: 0.95rem;
        line-height: 1.3;
    }

    :is(.department-page, .office-page) dialog.modal .glance-fields {
        gap: 0.4rem;
    }

    :is(.department-page, .office-page) dialog.modal .glance-fields > div {
        display: grid;
        grid-template-columns: 6.4rem minmax(0, 1fr);
        gap: 0.3rem 0.45rem;
        align-items: start;
    }

    :is(.department-page, .office-page) dialog.modal .glance-fields > div p {
        margin: 0;
    }

    :is(.department-page, .office-page) dialog.modal .gkciet-prose,
    :is(.department-page, .office-page) dialog.modal .gkciet-prose li {
        font-size: 0.9rem;
        text-align: left;
        hyphens: manual;
    }

    :is(.department-page, .office-page) dialog.modal .gkciet-prose li {
        margin: 0.28rem 0;
    }
}

/* Phone layout: readable header, announcements, and a scrollable menu */
@media (max-width: 1023px) {
    #mobileMenu:not(.hidden) {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 639px) {
    .top-utility {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.35rem;
        background: #07203a;
        padding: 0.2rem 0.45rem;
    }

    .top-utility > .bg-gkciet-dark,
    .top-utility > .quick-links-bar {
        flex: 1 1 auto;
        min-width: 0;
        background: transparent;
        border: 0;
        padding: 0;
    }

    .top-utility > .quick-links-bar {
        flex: 0 0 auto;
    }

    .top-utility .container {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .top-utility .container > .flex,
    .top-utility .py-1,
    .top-utility .py-1\.5 {
        padding-top: 0;
        padding-bottom: 0;
    }

    .top-utility a,
    .top-utility button,
    .top-utility select {
        font-size: 10px;
        line-height: 1.1;
    }

    .top-utility button {
        padding: 0 0.15rem;
    }

    .top-utility button[aria-label="Decrease text size"] { font-size: 9px; }
    .top-utility button[aria-label="Normal text size"] { font-size: 11px; }
    .top-utility button[aria-label="Increase text size"] { font-size: 13px; }

    .top-utility select {
        max-width: 4.8rem;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }

    .top-social {
        gap: 0.4rem;
        padding: 0.15rem 0.4rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
    }

    .top-social a {
        font-size: 12px;
    }

    .announcement-row {
        flex-wrap: nowrap;
        gap: 0.35rem;
    }

    .announcement-bar .marquee-container {
        flex: 1 1 auto;
        min-width: 0;
    }

    main > section.py-10,
    main > section.py-12 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .dept-slide .department-card {
        min-height: 5.6rem;
    }

    .department-card .card-body {
        padding: 0.55rem 0.35rem;
        gap: 0.15rem;
    }

    .department-card .card-body i {
        font-size: 1.35rem;
        margin-bottom: 0.15rem;
    }

    .events-nav-btn {
        width: 1.65rem;
        height: 1.65rem;
        min-height: 1.65rem;
    }

    .home-actions {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .action-card .card-body {
        padding: 0.7rem 0.45rem;
        gap: 0.15rem;
    }

    .action-card i {
        font-size: 1.25rem;
        margin-bottom: 0.15rem;
    }

    .action-card .card-title {
        font-size: 0.8rem;
        line-height: 1.2;
    }

    .action-card__detail,
    .action-card__btn {
        display: none;
    }

    .about-lead {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .about-stats .stat {
        padding: 0.35rem 0.15rem;
        text-align: center;
    }

    .about-stats .stat-value {
        font-size: 1rem;
        line-height: 1.1;
    }

    .about-stats .stat-title {
        font-size: 0.62rem;
        line-height: 1.15;
        white-space: normal;
    }

    .home-updates .card-body {
        padding: 0.85rem;
    }

    .home-updates .stat {
        padding: 0.4rem 0.3rem;
    }

    .home-updates .stat-value {
        font-size: 1.2rem;
        line-height: 1.2;
    }

    .home-updates .update-tabs {
        flex-wrap: nowrap;
        gap: 0.2rem;
        padding: 0.2rem;
    }

    .home-updates .tab-update {
        padding: 0.35rem 0.55rem;
        font-size: 0.68rem;
    }

    .home-updates .notice-feed-title {
        -webkit-line-clamp: 3;
        font-size: 0.86rem;
        line-height: 1.35;
    }

    .home-updates .notice-feed-link {
        padding: 0.5rem 0.55rem;
    }

    .home-updates .notice-feed-meta {
        gap: 0.3rem;
    }

    .home-updates .home-admit-links {
        gap: 0.35rem;
    }

    .home-updates .home-admit-links a {
        align-items: center;
        background: rgba(255, 255, 255, 0.14);
        border-radius: 0.45rem;
        padding: 0.4rem 0.45rem;
        min-height: 2rem;
        font-size: 0.75rem;
        line-height: 1.2;
    }

    .home-updates .home-admit-links i {
        font-size: 0.8rem;
        width: 0.95rem;
        text-align: center;
    }

}