/* =========================================================
   DESIGN SYSTEM V-1
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&display=swap");


/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {

    /* =====================================================
       TYPOGRAPHY
       ===================================================== */

    --font-family-base: "Geist", sans-serif;
    --font-family-heading: var(--font-family-base);

    --font-size-xs: 0.75rem;       /* 12px */
    --font-size-sm: 0.875rem;      /* 14px */
    --font-size-md: 1rem;          /* 16px */
    --font-size-lg: 1.125rem;      /* 18px */
    --font-size-xl: 1.25rem;       /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-2-5xl: 1.75rem;   /* 28px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 2.5rem;      /* 40px */
    --font-size-6xl: 3rem;        /* 48px */
    --font-size-7xl: 3.5rem;      /* 56px */
    --font-size-8xl: 3.75rem;     /* 60px */
    --font-size-9xl: 4.125rem;    /* 66px */
    --font-size-10xl: 5rem;       /* 80px */
    --font-size-11xl: 5.375rem;   /* 86px */
    --font-size-12xl: 5.625rem;   /* 90px */
    --font-size-13xl: 6rem;       /* 96px */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    --line-height-18: 1.125;
    --line-height-20: 1.25;
    --line-height-28: 1.75rem;
    --line-height-30: 1.875rem;


    /* =====================================================
       BRAND COLORS
       ===================================================== */

    --color-brand-primary: #211e53;
    --color-brand-secondary: #0982bb;
    --color-brand-accent: #fbdf0b;
    --color-red:#ff2500;
    --color-interactive: var(--color-brand-secondary);
    --color-interactive-hover: var(--color-brand-primary);

    --color-hover: rgb(13 231 255 / 80%);
    --color-hover-soft: rgb(13 231 255 / 10%);

    --color-primary-soft: rgb(33 30 83 / 5%);
    --color-secondary-soft: rgb(9 130 187 / 12%);
    --color-white-soft: rgb(255 255 255 / 14%);


    /* =====================================================
       TEXT COLORS
       ===================================================== */

    --color-text-primary: #000;
    --color-text-secondary: #555;
    --color-text-muted: #999;
    --color-text-inverse: #fff;

    --color-text-brand: var(--color-brand-primary);
    --color-text-link: var(--color-brand-secondary);


    /* =====================================================
       BACKGROUND COLORS
       ===================================================== */

    --color-bg-primary: #fff;
    --color-bg-light: #f9f9f9;
    --color-bg-lighter: #f5f5f5;
    --color-bg-dark: var(--color-brand-primary);

    --color-bg-brand: var(--color-brand-primary);
    --color-bg-interactive: var(--color-brand-secondary);


    /* =====================================================
       BORDER COLORS
       ===================================================== */

    --color-border: #ddd;
    --color-border-light: #eee;
    --color-border-focus: var(--color-brand-secondary);
    --color-border-inverse: rgb(255 255 255 / 30%);

    --border-width-thin: 1px;

    --border-default:
            var(--border-width-thin)
            solid
            var(--color-border);

    --border-light:
            var(--border-width-thin)
            solid
            var(--color-border-light);


    /* =====================================================
       SPACING
       ===================================================== */

    --space-1: 0.25rem;     /* 4px */
    --space-2: 0.5rem;      /* 8px */
    --space-3: 0.75rem;     /* 12px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-8: 2rem;        /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */
    --space-28: 7rem;       /* 112px */
    --space-30: 7.5rem;     /* 120px */
    --space-32: 8rem;       /* 128px */
    --space-36: 9rem;       /* 144px */
    --space-40: 10rem;      /* 160px */
    --space-48: 12rem;      /* 192px */


    /* =====================================================
       RADIUS
       ===================================================== */

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 1.875rem;
    --radius-5xl: 2.25rem;
    --radius-6xl: 2.5rem;
    --radius-7xl: 3rem;
    --radius-8xl: 3.5rem;
    --radius-9xl: 3.75rem;
    --radius-10xl: 4.125rem;
    --radius-full: 999px;


    /* =====================================================
       SHADOWS
       ===================================================== */

    --shadow-sm:
            0 1px 2px rgb(15 23 42 / 8%);

    --shadow-md:
            0 4px 12px rgb(15 23 42 / 12%);

    --shadow-lg:
            0 12px 32px rgb(15 23 42 / 16%);

    --shadow-card:
            0 8px 24px rgb(0 0 0 / 6%);

    --shadow-event-hover:
            0 4px 12px rgb(0 0 0 / 6%),
            0 12px 32px rgb(9 130 187 / 12%);

    --shadow-button-focus:
            var(--shadow-md),
            0 0 0 var(--space-1) var(--color-primary-soft);


    /* =====================================================
       GRADIENTS
       ===================================================== */

    --gradient-brand:
            linear-gradient(
                    92deg,
                    rgb(9 130 187 / 80%) 0.37%,
                    rgb(33 30 83 / 80%) 99.66%
            );


    /* =====================================================
       TRANSITIONS
       ===================================================== */

    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    --transition-fast:
            var(--duration-fast) var(--ease-standard);

    --transition-base:
            var(--duration-base) var(--ease-standard);

    --transition-slow:
            var(--duration-slow) var(--ease-emphasized);

    --transition-color:
            color var(--transition-fast);

    --transition-background:
            background-color var(--transition-base);

    --transition-shadow:
            box-shadow var(--transition-base);

    --transition-transform:
            transform var(--transition-base);

    --transition-image:
            transform var(--duration-slow) var(--ease-emphasized);


    /* =====================================================
       LAYOUT
       ===================================================== */

    --content-gap: var(--space-12);
    --grid-gap-sm: var(--space-6);
    --sidebar-min-width: 280px;

    --section-spacing: var(--space-30);
    --section-title-spacing: var(--space-10);


    /* =====================================================
       COMPONENT TOKENS
       ===================================================== */

    /* Card */

    --card-border: var(--border-light);
    --card-radius: var(--radius-xl);
    --card-shadow: var(--shadow-card);


    /* Button */

    --button-icon-size: var(--space-16);
    --button-gap: var(--space-4);
    --button-underline-offset: 5px;
    --button-underline-height: 2px;
    --button-underline-duration: 350ms;
    --button-sheen-duration: 500ms;
    --button-hover-lift: -2px;


    /* Image */

    --image-radius: var(--radius-xl);
    --image-hover-scale: 1.08;


    /* Event */

    --event-image-height: 240px;
    --event-content-padding-y: var(--space-8);
    --event-content-padding-x: var(--space-6);


    /* News */

    --news-feature-image-height: 380px;
    --news-grid-image-height: 240px;
    --news-sidebar-image-width: 130px;
    --news-sidebar-image-height: 80px;


    /* Header */

    --header-top-padding-y: var(--space-2);
    --header-nav-gap: var(--space-4);
    --header-link-padding-x: var(--space-1);
    --header-divider:
            var(--border-width-thin) solid var(--color-border-inverse);

    /* Dropdown */
    --dropdown-z-index: 999;
    --dropdown-min-width: 250px;
    --dropdown-padding-y: var(--space-2);
    --dropdown-padding-x: var(--space-1);
    --dropdown-radius: var(--radius-md);
    --dropdown-item-padding-y: var(--space-2);
    --dropdown-item-radius: var(--radius-sm);
    --dropdown-list-height: 270px;
    --dropdown-list-max-height: 285px;

    /* Scrollbar */
    --scrollbar-width: 6px;
    --scrollbar-thumb: #8a8a8a;
    --scrollbar-thumb-hover: #666;
    --scrollbar-track: transparent;

    /* Navigation */
    --department-logo-width: 76px;
    --department-subtitle-spacing: 0.6px;

    /* Page Banner */
    --page-banner-height: 600px;

    /* Mobile Navigation */
    --mobile-menu-icon-size: 24px;
    --mobile-menu-overlay: rgb(33 30 83 / 42%);


    /* Interaction */

    --interactive-lift: -4px;
}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);

    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
    font-family: var(--font-family-heading);
}

ul,
ol {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

a {
    font-family: var(--font-family-base);
}


/* =========================================================
   COMMON UTILITIES
   ========================================================= */

.common-padding-lg {
    padding: var(--section-spacing);
}

.site-logo-menu,.common-page-banner-area{
    padding-inline: var(--section-spacing);
}

.card-padding-lg,
.card-square-padding-lg {
    padding: var(--space-12);
}

.radius-lg {
    border-radius: var(--radius-6xl);
}

.radius-md {
    border-radius: var(--radius-4xl);
}

.section-bg-lighter {
    background-color: var(--color-bg-lighter);
}


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

.footer-section {
    position: relative;
    overflow: hidden;
}

.footer-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.footer-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-section-container {
    position: relative;
    z-index: 1;
}


/* =========================================================
   FOOTER BRANDING
   ========================================================= */

.footer-section-branding-area {
    margin-bottom: var(--space-10);
}

.footer-title {
    margin: 0;
    padding: 0 !important;
    border: 0 !important;

    color: var(--color-text-inverse);

    font-family: var(--font-family-heading);
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.footer-text {
    margin: 0;

    color: var(--color-text-inverse);

    font-family: var(--font-family-base);
    font-size: var(--font-size-2-5xl);
    font-weight: var(--font-weight-regular);
    line-height: 1.3;
}


/* =========================================================
   FOOTER MENU
   ========================================================= */

.footer-section-menu-area {
    margin-bottom: var(--space-10);
    background: var(--gradient-brand);
}

.footer-section-menu-content h4 {
    margin: 0 0 var(--space-8);

    color: var(--color-text-inverse);

    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.footer-section-menu-content ul li {
    margin-bottom: var(--space-3);
}

.footer-section-menu-content ul li:last-child {
    margin-bottom: 0;
}

.footer-section-menu-content ul li a {
    display: inline-block;

    color: var(--color-text-inverse);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);

    text-decoration: none;

    transition: var(--transition-color);
}

.footer-section-menu-content ul li a:hover {
    color: var(--color-hover);
}


/* =========================================================
   FOOTER ICON LINK
   ========================================================= */

a.footer-link {
    display: inline-block;
    width: fit-content;
    margin-bottom: var(--space-4);
}

.footer-menu-link-with-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}


/* =========================================================
   SOCIAL MENU
   ========================================================= */

.footer-social-menu-content {
    margin-top: var(--space-12);
}

.footer-social-menu-content ul {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.footer-social-menu-content ul li {
    margin: 0;
}

.footer-social-menu-content ul a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: var(--transition-transform);
}

.footer-social-menu-content ul a svg {
    fill: var(--color-text-inverse);
    transition: fill var(--transition-fast);
}

.footer-social-menu-content ul a:hover {
    transform: translateY(var(--button-hover-lift));
}

.footer-social-menu-content ul a:hover svg {
    fill: var(--color-hover);
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.footer-section-copy-right-area span {
    color: var(--color-text-inverse);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-28);
}

.footer-section-copy-right-area span a {
    color: var(--color-brand-secondary);

    text-decoration: none;

    transition: var(--transition-color);
}

.footer-section-copy-right-area span a:hover {
    color: var(--color-hover);
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.section-title-area {
    margin-bottom: var(--section-title-spacing);
}

.section-title-content h6 {
    margin: 0 0 var(--space-2);

    color: var(--color-brand-primary);

    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.section-title-content p {
    margin: 0;

    color: var(--color-text-secondary);

    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}


/* =========================================================
   COMMON CARD
   ========================================================= */

.nsu-card {
    width: 100%;

    background-color: var(--color-bg-primary);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}


/* =========================================================
   NEWS LAYOUT
   ========================================================= */

.news-paper-style-content .section-content-area {
    display: grid;
    grid-template-columns:
        minmax(0, 3fr)
        minmax(var(--sidebar-min-width), 1fr);
    gap: var(--content-gap);

    margin-bottom: var(--space-16);
}


/* =========================================================
   NEWS FEATURE
   ========================================================= */

.news-paper-style-content
.feature-row-one
.single-news-item {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--content-gap);
}

.news-paper-style-content
.feature-row-one
.single-news-item-image img {
    display: block;

    width: 100%;
    height: var(--news-feature-image-height);

    object-fit: cover;
    border-radius: var(--image-radius);

    transition: var(--transition-image);
}


/* =========================================================
   NEWS GRID
   ========================================================= */

.news-paper-style-content .feature-row-two {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap-sm);
}

.news-paper-style-content
.feature-row-two
.single-news-item-image {
    margin-bottom: var(--space-6);
}

.news-paper-style-content
.feature-row-two
.single-news-item-image img {
    display: block;

    width: 100%;
    height: var(--news-grid-image-height);

    object-fit: cover;
    border-radius: var(--image-radius);

    transition: var(--transition-image);
}


/* =========================================================
   NEWS LEFT AREA
   ========================================================= */

.news-paper-style-content .left-area {
    display: grid;
    gap: var(--content-gap);
}


/* =========================================================
   NEWS TYPOGRAPHY
   ========================================================= */

.news-paper-style-content .single-news-item h6 {
    margin: 0 0 var(--space-2);

    color: var(--color-text-secondary);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-none);
}

.news-paper-style-content
.feature-row-one
.single-news-item h2 {
    margin: 0 0 var(--space-6);

    color: var(--color-brand-primary);

    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-28);
}

.news-paper-style-content
.feature-row-two
.single-news-item h2 {
    margin: 0 0 var(--space-4);

    color: var(--color-brand-primary);

    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-28);
}

.news-paper-style-content .single-news-item p {
    margin: 0 0 var(--space-4);

    color: var(--color-text-secondary);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}

.news-paper-style-content .single-news-item a {
    color: var(--color-brand-secondary);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-28);

    text-decoration: none;

    transition: var(--transition-color);
}

.news-paper-style-content .single-news-item a:hover {
    color: var(--color-brand-primary);
}


/* =========================================================
   TEXT CLAMPING
   ========================================================= */

.news-paper-style-content
.feature-row-one
.single-news-item h2,
.news-paper-style-content
.feature-row-one
.single-news-item p,
.news-paper-style-content
.feature-row-two
.single-news-item h2,
.news-paper-style-content
.feature-row-two
.single-news-item p,
.news-paper-style-content
.right-area
.single-news-item h2 {
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.news-paper-style-content
.feature-row-one
.single-news-item h2 {
    -webkit-line-clamp: 2;
}

.news-paper-style-content
.feature-row-one
.single-news-item p {
    -webkit-line-clamp: 3;
}

.news-paper-style-content
.feature-row-two
.single-news-item h2 {
    -webkit-line-clamp: 1;
}

.news-paper-style-content
.feature-row-two
.single-news-item p {
    -webkit-line-clamp: 2;
}


/* =========================================================
   NEWS SIDEBAR
   ========================================================= */

.news-paper-style-content .right-area {
    overflow: hidden;
}

.news-paper-style-content .right-area.nsu-card {
    padding: 0;
}

.news-paper-style-content
.right-area
.single-news-item {
    display: flex;
    align-items: center;
    gap: var(--space-6);

    padding:
            var(--space-5)
            var(--space-6);

    border-bottom: var(--border-light);

    text-decoration: none;

    transition:
            var(--transition-background),
            var(--transition-shadow);
}

.news-paper-style-content
.right-area
.single-news-item:nth-child(even) {
    background-color: var(--color-bg-light);
}

.news-paper-style-content
.right-area
.single-news-item:first-child {
    padding-top: var(--space-6);
}

.news-paper-style-content
.right-area
.single-news-item:last-child {
    padding-bottom: var(--space-6);
    border-bottom: 0;
}


/* =========================================================
   NEWS SIDEBAR IMAGE
   ========================================================= */

.news-paper-style-content
.right-area
.single-news-item-image {
    flex: 0 0 var(--news-sidebar-image-width);

    width: var(--news-sidebar-image-width);
    height: var(--news-sidebar-image-height);

    overflow: hidden;
    border-radius: var(--image-radius);
}

.news-paper-style-content
.right-area
.single-news-item-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: var(--transition-image);
}


/* =========================================================
   NEWS SIDEBAR TITLE
   ========================================================= */

.news-paper-style-content
.right-area
.single-news-item h2 {
    margin: var(--space-2) 0 0;

    color: var(--color-brand-primary);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-18);

    -webkit-line-clamp: 2;
}


/* =========================================================
   NEWS HOVER
   ========================================================= */

.news-paper-style-content
.right-area
.single-news-item:hover {
    background-color: var(--color-hover-soft);
}

.news-paper-style-content
.right-area
.single-news-item:hover
.single-news-item-image img,
.news-paper-style-content
.left-area
.single-news-item:hover
.single-news-item-image img {
    transform: scale(var(--image-hover-scale));
}


/* =========================================================
   NEWS IMAGE WRAPPER
   ========================================================= */

.news-paper-style-content
.left-area
.single-news-item-image {
    overflow: hidden;
    border-radius: var(--image-radius);
}

.news-paper-style-content
.left-area
.single-news-item-image img {
    display: block;

    width: 100%;

    object-fit: cover;

    transition: var(--transition-image);
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.button-secondary {
    --button-size: var(--button-icon-size);

    position: relative;

    display: inline-flex;
    align-items: center;
    gap: var(--button-gap);

    width: fit-content;

    color: var(--color-brand-secondary);

    text-decoration: none;

    transition: var(--transition-color);
}

.button-secondary span {
    position: relative;
    z-index: 2;

    color: currentColor;

    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.button-secondary span::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: calc(
            var(--button-underline-offset) * -1
    );

    width: 100%;
    height: var(--button-underline-height);

    background-color: var(--color-brand-primary);

    transform: scaleX(0);
    transform-origin: right;

    transition:
            transform var(--button-underline-duration) var(--ease-emphasized);
}

.button-secondary .btn-icon {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--button-size);
    height: var(--button-size);

    flex-shrink: 0;

    overflow: hidden;

    background-color: var(--color-brand-secondary);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);

    transition:
            background-color var(--transition-base),
            box-shadow var(--transition-base);
}

.button-secondary .btn-icon::before {
    content: "";

    position: absolute;
    inset: 0;

    background-color: var(--color-white-soft);

    transform:
            translateX(-120%)
            skewX(-20deg);

    transition:
            transform var(--button-sheen-duration) var(--ease-emphasized);
}

.button-secondary .btn-icon i,
.button-secondary .btn-icon svg {
    position: relative;
    z-index: 2;

    display: block;

    color: var(--color-text-inverse);

    transition: var(--transition-transform);
}

.button-secondary:hover {
    color: var(--color-brand-primary);
}

.button-secondary:hover span::after {
    transform: scaleX(1);
    transform-origin: left;
}

.button-secondary:hover .btn-icon {
    background-color: var(--color-brand-primary);
    box-shadow: var(--shadow-button-focus);
}

.button-secondary:hover .btn-icon::before {
    transform:
            translateX(120%)
            skewX(-20deg);
}

.button-secondary:hover .btn-icon i,
.button-secondary:hover .btn-icon svg {
    transform: translateY(var(--button-hover-lift));
}

.button-secondary:active .btn-icon i,
.button-secondary:active .btn-icon svg {
    transform: translateY(0);
}

.button-secondary:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: var(--space-2);
    border-radius: var(--radius-sm);
}

.button-secondary.back-to-top {
    position: fixed !important;
}


/* =========================================================
   EVENTS
   ========================================================= */

.event-section .section-content-area {
    display: grid;
    grid-template-columns:
        minmax(0, 3fr)
        minmax(var(--sidebar-min-width), 1fr);
    gap: var(--content-gap);

    margin-bottom: var(--space-16);
}

.event-section .left-area {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap-sm);

    height: fit-content;
}


/* =========================================================
   EVENT CARD
   ========================================================= */

.event-section .single-event-area {
    width: 100%;
    height: fit-content;

    overflow: hidden;

    background-color: var(--color-bg-primary);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);

    text-decoration: none;

    transition:
            transform var(--transition-base),
            box-shadow var(--transition-base);
}

.event-section .single-event-area:hover {
    cursor: pointer;

    transform: translateY(var(--interactive-lift));
    box-shadow: var(--shadow-event-hover);
}


/* =========================================================
   EVENT IMAGE
   ========================================================= */

.event-section .single-event-image-area {
    position: relative;
    height: var(--event-image-height);
    overflow: hidden;
}


.event-section .single-event-image-area img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: var(--transition-image);
    will-change: transform;
}
.event-section
.single-event-area:hover
.single-event-image-area img {
    transform: scale(var(--image-hover-scale));
}


/* =========================================================
   EVENT CONTENT
   ========================================================= */

.event-section .single-event-content-area {
    padding:
            var(--event-content-padding-y)
            var(--event-content-padding-x);
}


/* =========================================================
   EVENT PROPERTIES
   ========================================================= */

.event-section .event-properties,
.news-paper-style-content .event-properties {
    display: flex;
    gap: var(--space-6);

    margin-bottom: var(--space-2);
}

.event-section
.single-event-content-area h4 {
    display: -webkit-box !important;
    overflow: hidden;

    margin: 0;

    color: var(--color-brand-primary);

    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-size-xl);

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.event-section .card-subtitle-item,
.news-paper-style-content .card-subtitle-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.event-section
.card-subtitle-item span,
.news-paper-style-content
.card-subtitle-item span,
.notice-section .right-area .single-item .content .desc
{
    display: -webkit-box !important;
    overflow: hidden;

    margin: calc(var(--space-1) - 1px) 0 0;

    color: var(--color-text-secondary);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-none);

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}


/* =========================================================
   EVENT ALERT BADGE
   ========================================================= */

.card-floating-badge {
    position: absolute;
    bottom: 0;
    z-index: 999;

    padding:
            var(--space-1)
            var(--space-4);


    border-top-right-radius: var(--radius-xl);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-28);

    text-decoration: none;
}

.badge-happening {
    background-color:var(--color-red);
    color: var(--color-text-inverse) !important;
}

.badge-upcoming{
    background-color: var(--color-brand-accent);
    color: var(--color-brand-primary) !important;
}

.badge-recent{
    color: var(--color-brand-primary) !important;
    background: var(--color-bg-light);
}
/* =========================================================
   PAST EVENTS
   ========================================================= */

.event-section .right-area {
    width: 100%;
    height: fit-content;

    overflow: hidden;

    background-color: var(--color-bg-primary);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.event-section
.right-area
.single-past-event-area {
    display: block;

    padding:
            var(--space-5)
            var(--space-6);

    border-bottom: var(--border-light);

    text-decoration: none;
    cursor: pointer;

    transition:
            var(--transition-background),
            var(--transition-shadow);
}

.event-section
.right-area
.single-past-event-area:nth-child(even) {
    background-color: var(--color-bg-light);
}

.event-section
.right-area
.single-past-event-area:hover {
    background-color: var(--color-hover-soft);
}

.event-section
.right-area
.single-past-event-area h4 {
    display: -webkit-box !important;
    overflow: hidden;

    margin: var(--space-2) 0 0;

    color: var(--color-brand-primary);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-18);

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.event-section .right-area h2 {
    margin: 0;

    padding:
            var(--space-2)
            var(--space-6);

    background: var(--color-brand-secondary);
    color: var(--color-text-inverse);

    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-size-xl);
}


/* =========================================================
   HEADER TOP BAR
   ========================================================= */

.header-top-area {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-block: var(--header-top-padding-y);
}

.header-top-left ul,
.header-top-right ul {
    margin: 0;
    padding: 0;
}

.header-top-left ul li {
    display: inline-block;
    margin-right: var(--space-2);
}

.header-top-left ul li:last-child {
    margin-right: 0;
}

.header-top-left ul li a,
.header-top-right span {
    display: inline-block;

    color: var(--color-text-inverse);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);

    text-decoration: none;

    transition:
            color var(--transition-fast),
            background-color var(--transition-fast);
}

.header-top-left ul li a {
    padding-inline: var(--header-link-padding-x);
    border-radius: var(--radius-sm);
}

.header-top-left ul li a.active,
.header-top-left ul li a:hover {
    background-color: var(--color-brand-secondary);
}


/* =========================================================
   DROPDOWN

   Dropdown interaction is handled by click state in
   assets/styles/dropdown.css and assets/scripts/scripts.js.
   ========================================================= */

/* =========================================================
   HEADER TOP RIGHT
   ========================================================= */

.header-top-right ul li {
    display: inline-block;

    padding-inline: var(--space-4);

    border-right: var(--header-divider);
}

.header-top-right ul li:first-child {
    padding-left: 0;
}

.header-top-right ul li:last-child {
    padding-right: 0;
    border-right: 0;
}

.header-top-right ul li a {
    align-items: center;
    text-decoration: none;
}

.header-top-right span {
    margin-left: var(--space-1);
}

.header-top-right svg {
    fill: var(--color-text-inverse);

    transition: fill var(--transition-fast);
}

.header-top-right ul li a:hover span,
.header-top-right ul li a:hover svg {
    color: var(--color-brand-secondary);
    fill: var(--color-brand-secondary);
}


/* =========================================================
   DEPARTMENT LOGO & MENU
   ========================================================= */


.logo-menu-area {
    display: flex;
    position: relative;
    /*overflow: hidden;*/
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    justify-content: space-between;
    z-index: 9;
}
.logo-area.dept-logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--color-brand-primary);
    gap: var(--space-2);
    width: fit-content;
    padding:var(--space-2) var(--space-4) ;
    border-top-left-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
}

.logo-menu-area .logo-area.dept-logo-area a img {
    width: var(--department-logo-width);
}

.logo-area.dept-logo-area a {
    text-decoration: none;
}

.dept-title {
    display: block;

    margin: 0 0 var(--space-8);

    color: var(--color-text-primary);

    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);

    text-transform: uppercase;
}

.logo-menu-area .dept-title {
    display: block;

    margin: 0;

    color: var(--color-text-inverse);

    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);

    text-transform: uppercase;
}

.logo-menu-area .dept-sub-title {
    display: inline-block;

    color: var(--color-text-inverse);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);

    letter-spacing: var(--department-subtitle-spacing);
    text-decoration: none;
    text-transform: uppercase;

    transition: var(--transition-color);
}

.logo-menu-area .menu-area-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: end;
    padding: var(--space-2) var(--space-4);
}

.logo-menu-area
.menu-area-section
ul li {
    display: inline-block;

    margin-right: var(--space-6);
}

.logo-menu-area
.menu-area-section
ul li:last-child {
    margin-right: 0;
}

.logo-menu-area
.menu-area-section
ul li a {
    display: inline-block;

    padding:
            var(--space-1)
            var(--space-2);

    color: var(--color-brand-primary);

    border-radius: var(--radius-sm);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);

    text-decoration: none;
    text-transform: uppercase;

    transition:
            color var(--transition-fast),
            background-color var(--transition-fast);
    width: 100%;
}

.desktop-menu-area .active,
.desktop-menu-area li a:hover,
.mobile-menu-items-area ul li:hover

{
    background-color: var(--color-brand-secondary);
    color: var(--color-text-inverse)!important;
}

.mobile-menu-items-area ul li:hover a

{

    color: var(--color-text-inverse)!important;
}


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

.only-small-device-visbible {
    display: none !important;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */


.page-banner-section{
    position: relative;
    height: var(--page-banner-height);
    overflow: hidden;
}
.page-banner {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.page-banner img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.site-logo-menu, .common-page-banner-area{
    position: relative;

}
.mobile-menu-area{
    display: none;
}
.mobile-menu-area .menu-open-icon svg{
    width: var(--mobile-menu-icon-size);
    height: var(--mobile-menu-icon-size);
    fill: var(--color-brand-primary)!important;
}
.mobile-menu-area .mobile-menu-icons {
    display: flex;
}
.menu-close-icon {
    display: none;
}
/* Mobile menu backdrop: smooth, light and always behind the menu/header. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--mobile-menu-overlay);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1000;
    transition: opacity 220ms ease, visibility 220ms ease;
}

body.mobile-menu-overlay::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   DROPDOWN COMPONENT
   Click-based dropdown. Visual values intentionally reuse
   the existing design tokens to preserve the current design.
   ========================================================= */

.dropdown-component {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);

    margin: 0;
    padding: var(--space-1) var(--space-2);

    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;

    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
    text-transform: inherit;

    cursor: pointer;

    transition:
            color var(--transition-fast),
            background-color var(--transition-fast);
}

.dropdown-trigger:hover,
.dropdown-component.is-open .dropdown-trigger {
    background-color: var(--color-brand-secondary);
    color: var(--color-text-inverse);
}

.dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-icon-open,
.dropdown-icon-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dropdown-icon-close {
    display: none;
}

.dropdown-component.is-open .dropdown-icon-open {
    display: none;
}

.dropdown-component.is-open .dropdown-icon-close {
    display: inline-flex;
}

.dropdown-icon svg {
    display: block;
    width: var(--space-6);
    height: var(--space-6);
    fill: currentColor;
}

/* =========================================================
   TOP HEADER DROPDOWN
   Preserves the existing top-bar appearance.
   ========================================================= */

.header-top-left .dropdown-trigger {
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}

.header-top-left .dropdown-trigger:hover,
.header-top-left .dropdown-component.is-open .dropdown-trigger {
    background-color: var(--color-brand-secondary);
    color: var(--color-text-inverse);
}

.header-top-left .dropdown-icon svg {
    fill: var(--color-text-inverse);
}

/* =========================================================
   MAIN DESKTOP NAVIGATION DROPDOWN
   Preserves the existing navigation appearance.
   ========================================================= */

.desktop-menu-area .dropdown-trigger {
    color: var(--color-brand-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
    text-transform: uppercase;
}

.desktop-menu-area .dropdown-trigger:hover,
.desktop-menu-area .dropdown-component.is-open .dropdown-trigger {
    background-color: var(--color-brand-secondary);
    color: var(--color-text-inverse);
}

.desktop-menu-area .dropdown-icon svg {
    fill: var(--color-brand-primary);
}

.desktop-menu-area .dropdown-trigger:hover .dropdown-icon svg,
.desktop-menu-area .dropdown-component.is-open .dropdown-icon svg {
    fill: var(--color-text-inverse);
}

/* =========================================================
   DROPDOWN PANEL
   ========================================================= */

.dropdown-panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;

    z-index: var(--dropdown-z-index);

    width: max-content;
    min-width: var(--dropdown-min-width);
    max-width: min(90vw, 420px);

    margin: 0;

    background: var(--color-bg-primary);
    border-radius: var(--dropdown-radius);
    box-shadow: var(--card-shadow);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(var(--space-2) * -1));

    transition:
            opacity var(--transition-fast),
            transform var(--transition-fast),
            visibility var(--transition-fast);
}

.logo-menu-area .dropdown-panel {
    left: unset;
    right: 0;

}

.dropdown-component.is-open .dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}


/* =========================================================
   DROPDOWN LIST
   ========================================================= */

.dropdown-list {
    display: block;

    width: 100%;
    max-height: var(--dropdown-list-max-height);

    margin: 0;
    padding:
            var(--dropdown-padding-y)
            var(--dropdown-padding-x);

    overflow-x: hidden;
    overflow-y: auto;

    list-style: none;

    scrollbar-width: thin;
    scrollbar-color:
            var(--scrollbar-thumb)
            var(--scrollbar-track);
}

.dropdown-list::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

.dropdown-list::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

.dropdown-list::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
}

.dropdown-list::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* =========================================================
   DROPDOWN ITEM
   ========================================================= */

.dropdown-item {
    display: block !important;

    margin: 0;
    padding: var(--dropdown-item-padding-y) 0;

    border-bottom: var(--border-light);
    border-radius: var(--dropdown-item-radius);

    text-align: center;

    transition:
            color var(--transition-fast),
            background-color var(--transition-fast);
}

.dropdown-item:last-child {
    border-bottom: 0;
}

.dropdown-item a {
    display: block;
    width: 100%;

    padding: var(--space-2) var(--space-3);

    color: var(--color-brand-primary)!important;

    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);

    text-decoration: none;

    transition: color var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item.active {
    background-color: var(--color-brand-secondary);
}

.dropdown-item:hover a,
.dropdown-item.active a {
    color: var(--color-text-inverse) !important;
}

/* =========================================================
   FOCUS
   ========================================================= */

.dropdown-trigger:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
}

/* =========================================================
   SMALL SCREEN / MOBILE STYLE
   Same component, expanded like the mobile navigation area.
   ========================================================= */


.mobile-nav-dropdown > .mobile-nav-dropdown-trigger {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    background: transparent !important;
    color: inherit;
}

.mobile-nav-dropdown-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Chevron toggle — only ONE visible at a time */
.mobile-nav-dropdown-icon .icon-up   { display: inline-flex !important; }
.mobile-nav-dropdown-icon .icon-down { display: none !important; }

.mobile-nav-dropdown.is-open .mobile-nav-dropdown-icon .icon-up   { display: none !important; }
.mobile-nav-dropdown.is-open .mobile-nav-dropdown-icon .icon-down { display: inline-flex !important; }

.mobile-nav-dropdown-trigger:hover,
.mobile-nav-dropdown-trigger:focus,
.mobile-nav-dropdown-trigger.active {
    background: transparent !important;
}

/* Submenu panel — forced with !important so nothing else can hide it */
.mobile-nav-dropdown .mobile-dropdwon {
    display: none !important;
    background: var(--color-bg-lighter, var(--color-bg-lighter)) !important;
}

.mobile-nav-dropdown.is-open .mobile-dropdwon {
    display: block !important;
}

.mobile-nav-dropdown .mobile-dropdwon ul li a {
    display: block !important;
    background: transparent !important;
    color: var(--color-brand-primary, var(--color-brand-primary)) !important;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
}

.mobile-nav-dropdown.is-open > .mobile-nav-dropdown-trigger {
    background-color: var(--color-brand-secondary, var(--color-brand-secondary)) !important;
    color: var(--color-text-inverse) !important;
}

.mobile-nav-dropdown.is-open > .mobile-nav-dropdown-trigger svg {
    fill: var(--color-text-inverse) !important;
}


.event-section{
    position: relative;
}
.event-section .background-shade-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.event-section .background-shade-bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.event-section .event-content-area{
    position: relative;
}
.single-event-image-area::before {
    border-top: 2px solid var(--color-brand-secondary);
    border-radius: var(--card-radius);
}
.single-news-item-image {
    position: relative;
}
.single-news-item-image::before,.single-event-image-area::before {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #06174233;
    content: '';
    z-index: 99;
    overflow: hidden;
}


.common-page-banner-area {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 444px;
}

.common-page-banner-area  h1 {
    margin: 0 0 var(--space-2);
    color: var(--color-text-inverse);
    font-size: var(--font-size-9xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

/* =========================================================
   STICKY HEADER — PROFESSIONAL MOTION
   ========================================================= */
.logo-menu-area.is-sticky {
    position: fixed;
    top: 0;
    transition:
            transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 220ms ease,
            box-shadow 300ms ease;
    box-shadow: 0 6px var(--space-6) rgba(0, 0, 0, 0.10);
    will-change: transform;
}

.logo-menu-area.is-sticky.sticky-enter {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
}

.logo-menu-area.is-sticky.sticky-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}


.page-banner-section.home-page-hero-banner-section{
    position: relative;
    height: 100vh;
}
.page-banner-section.home-page-hero-banner-section .carousel.slide{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
}
.page-banner-section.home-page-hero-banner-section .carousel-inner,.page-banner-section.home-page-hero-banner-section .carousel-item {

    height: 100%;

}
.page-banner-section.home-page-hero-banner-section .common-page-banner-area {
    max-height: 100%;
    padding-top: 140px;
}
/* =========================================================
   HOMEPAGE HERO — CINEMATIC PROFESSIONAL CAROUSEL
   Fully scoped to prevent conflicts with other sections
   ========================================================= */

.home-page-hero-banner-section {
    position: relative;
    height: 900px;
    overflow: hidden;
    background: #061742;
}
.home-page-hero-banner-section .common-page-banner-area {
    position: relative;
    z-index: 10;
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.home-page-hero-banner-section .common-page-banner-content {
    position: relative;
    z-index: 10;

    /* FIX */
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}
/* ---------------------------------------------------------
   CAROUSEL BASE
   --------------------------------------------------------- */

.home-page-hero-banner-section #homepagehero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-page-hero-banner-section .carousel-inner,
.home-page-hero-banner-section .carousel-item {
    width: 100%;
    height: 100%;
}

.home-page-hero-banner-section .carousel-inner {
    position: relative;
    overflow: hidden;
}

/* ---------------------------------------------------------
   SLIDE
   --------------------------------------------------------- */

.home-page-hero-banner-section .carousel-item {
    position: absolute;
    inset: 0;

    display: block !important;

    opacity: 0;
    visibility: hidden;
    z-index: 1;

    transform: scale(1.035);

    transition:
            opacity 900ms cubic-bezier(.22, 1, .36, 1),
            visibility 900ms ease,
            transform 1400ms cubic-bezier(.22, 1, .36, 1);
}

.home-page-hero-banner-section .carousel-item.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;

    transform: scale(1);
}
.page-banner {

    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page-banner img,
.page-banner video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.hero-video {
    position: absolute;
    inset: 0;
}
/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.home-page-hero-banner-section .page-banner {
    position: absolute;
    inset: 0;

    overflow: hidden;
}

.home-page-hero-banner-section .page-banner img {
    position: absolute;
    inset: -4%;

    width: 108%;
    height: 108%;

    max-width: none;

    object-fit: cover;
    object-position: center;

    transform: scale(1);
    filter: saturate(.92) contrast(1.04);

    transition:
            transform 8000ms cubic-bezier(.16, 1, .3, 1),
            filter 1200ms ease;
}

/*
 * Slow cinematic zoom on active slide.
 */
.home-page-hero-banner-section
.carousel-item.active
.page-banner img {
    transform: scale(1.08);
    filter: saturate(1) contrast(1.06);
}

/* ---------------------------------------------------------
   CINEMATIC OVERLAY
   --------------------------------------------------------- */


.home-page-hero-banner-section .page-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(161deg, rgb(33 30 83) 0%, rgb(6 23 66 / 58%) 38%, rgb(6 23 66 / 0%) 72%, rgba(6, 23, 66, .42) 100%);
    z-index: 2;
}

/*
 * Bottom cinematic fade.
 */
.home-page-hero-banner-section .page-banner::before {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    background:
            linear-gradient(
                    to top,
                    rgba(6, 23, 66, .72),
                    transparent
            );

    z-index: 3;
}

/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.home-page-hero-banner-section .common-page-banner-area {
    position: relative;
    z-index: 10;

    height: 100%;
    max-height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.home-page-hero-banner-section
.common-page-banner-content {
    position: relative;
    z-index: 10;
}

/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.home-page-hero-banner-section
.common-page-banner-content h1 {
    margin: 0;
    color: var(--color-text-inverse);
    font-size: clamp(42px, 5.2vw, 88px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -2px;
    text-shadow: 0 var(--space-2) 30px rgba(0, 0, 0, .22);
    opacity: 0;
    transform: translateY(45px);
    transition: opacity 850ms cubic-bezier(.16, 1, .3, 1) 250ms,
    transform 950ms cubic-bezier(.16, 1, .3, 1) 250ms;
    margin-bottom: 36px;
}

.home-page-hero-banner-section
.carousel-item.active
.common-page-banner-content h1 {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------------
   DECORATIVE LIGHT
   --------------------------------------------------------- */

.home-page-hero-banner-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    bottom: -180px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(9, 130, 187, .30) 0%,
                    rgba(9, 130, 187, 0) 70%
            );

    z-index: 4;

    pointer-events: none;

    animation: heroGlow 8s ease-in-out infinite alternate;
}

@keyframes heroGlow {
    0% {
        transform: scale(.9);
        opacity: .55;
    }

    100% {
        transform: scale(1.15);
        opacity: .9;
    }
}

/* ---------------------------------------------------------
   TOP LIGHT LINE
   --------------------------------------------------------- */

.home-page-hero-banner-section .carousel-inner::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(255,255,255,.65),
                    transparent
            );

    opacity: .5;

    z-index: 20;
}

/* ---------------------------------------------------------
   INDICATORS
   --------------------------------------------------------- */

.home-page-hero-banner-section .carousel-indicators {
    position: absolute;

    left: 50%;
    bottom: 42px;

    transform: translateX(-50%);

    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.home-page-hero-banner-section .carousel-indicators li {
    position: relative;

    width: 34px;
    height: 3px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 10px;

    background: rgba(255,255,255,.35);

    opacity: 1;

    cursor: pointer;

    overflow: hidden;

    transition:
            width 350ms cubic-bezier(.16,1,.3,1),
            background-color 300ms ease;
}

.home-page-hero-banner-section
.carousel-indicators li.active {
    width: 72px;
    background: rgba(255,255,255,.35);
}

/*
 * Animated progress bar.
 */
.home-page-hero-banner-section
.carousel-indicators li.active::after {
    content: "";

    position: absolute;
    inset: 0;

    width: 0;

    border-radius: inherit;

    background: var(--color-text-inverse);

    animation:
            heroIndicatorProgress 4s linear forwards;
}

@keyframes heroIndicatorProgress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* ---------------------------------------------------------
   PREVIOUS / NEXT BUTTONS
   --------------------------------------------------------- */

.home-page-hero-banner-section .carousel-control-prev,
.home-page-hero-banner-section .carousel-control-next {
    position: absolute;

    top: 50%;

    width: 58px;
    height: 58px;

    margin: 0;

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;

    background: rgba(6,23,66,.18);

    backdrop-filter: blur(var(--space-2));
    -webkit-backdrop-filter: blur(var(--space-2));

    opacity: .85;

    transform: translateY(-50%);

    z-index: 30;

    transition:
            transform 350ms cubic-bezier(.16,1,.3,1),
            background-color 300ms ease,
            border-color 300ms ease,
            opacity 300ms ease;
}

.home-page-hero-banner-section .carousel-control-prev {
    left: var(--space-8);
}

.home-page-hero-banner-section .carousel-control-next {
    right: var(--space-8);
}

.home-page-hero-banner-section
.carousel-control-prev:hover,
.home-page-hero-banner-section
.carousel-control-next:hover {
    opacity: 1;

    background: rgba(9,130,187,.85);

    border-color: rgba(255,255,255,.6);

    transform:
            translateY(-50%)
            scale(1.08);
}

.home-page-hero-banner-section
.carousel-control-prev:active,
.home-page-hero-banner-section
.carousel-control-next:active {
    transform:
            translateY(-50%)
            scale(.94);
}

/* ---------------------------------------------------------
   ARROW ICONS
   --------------------------------------------------------- */

.home-page-hero-banner-section
.carousel-control-prev-icon,
.home-page-hero-banner-section
.carousel-control-next-icon {
    width: 18px;
    height: 18px;

    background-size: 100% 100%;

    transition: transform 300ms cubic-bezier(.16,1,.3,1);
}

.home-page-hero-banner-section
.carousel-control-prev:hover
.carousel-control-prev-icon {
    transform: translateX(-3px);
}

.home-page-hero-banner-section
.carousel-control-next:hover
.carousel-control-next-icon {
    transform: translateX(3px);
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   REDUCED MOTION ACCESSIBILITY
   --------------------------------------------------------- */


/* =========================================================
   FINAL HEADER LAYER / STACKING FIX
   Keep existing visual design; only stabilize stacking.
   ========================================================= */

:root {
    --site-header-z: 1100;
    --site-header-nav-z: 1101;
    --site-header-dropdown-z: 1110;
    --site-mobile-overlay-z: 1090;
}

/* The complete header always establishes one predictable layer. */
.site-logo-menu {
    position: relative;
    z-index: var(--site-header-z);
}

/* This rule intentionally overrides the old homepage z-index: 50 rule. */
.home-page-hero-banner-section .site-logo-menu {
    position: relative;
    z-index: var(--site-header-z);
}

.logo-menu-area {
    position: relative;
    z-index: var(--site-header-nav-z);
}

.logo-menu-area .menu-area-section,
.logo-menu-area .desktop-menu-area,
.logo-menu-area .mobile-menu-area {
    position: relative;
    z-index: var(--site-header-nav-z);
}

/* Desktop dropdowns must remain above hero/event content. */
.site-logo-menu .dropdown-component {
    position: relative;
    z-index: var(--site-header-dropdown-z);
}

.site-logo-menu .dropdown-panel {
    z-index: var(--site-header-dropdown-z) !important;
}

/* Sticky navigation is above the normal header layer and page content. */
.logo-menu-area.is-sticky {
    position: fixed;
    top: 0;
    z-index: calc(var(--site-header-z) + 2) !important;
}

/* Never allow hero content/controls to create a competing header layer. */
.home-page-hero-banner-section .common-page-banner-area,
.home-page-hero-banner-section .common-page-banner-content,
.home-page-hero-banner-section .carousel-control-prev,
.home-page-hero-banner-section .carousel-control-next,
.home-page-hero-banner-section .carousel-indicators {
    /* Preserve their original visual ordering; header owns the top layer. */
}

/* Mobile backdrop stays below the header and above page content. */
body::before {
    z-index: var(--site-mobile-overlay-z);
}

body.mobile-menu-overlay::before {
    z-index: var(--site-mobile-overlay-z);
}


.notice-section {
    overflow-x: clip; /* safety net: nothing inside can widen the page */
}

.notice-section .section-content-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--content-gap);

}


.notice-section .right-area .single-item .content .title {
    margin: 0 0 var(--space-1);
    color: var(--color-brand-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-28);
    -webkit-line-clamp: 1;
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.notice-section .single-item {
    display: flex;
    cursor: pointer;
}
.notice-section .date-time {
    background-color: var( --color-border-light);
    width: 100px;
    height: 100px;
    border-radius: var(--space-4);
    border:  var(--border-light);;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0;
    flex: 0 0 100px;
}
.notice-section  .right-area .day{
    color: var(--color-brand-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    display: block;
    width: 100%;
    margin: 0px;
    text-align: center;
}
.notice-section span.month-year {
    margin: 0;
    color: var(--color-brand-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-18);
    /* -webkit-line-clamp: 2; */
}

.notice-section .single-item {
    display: flex;
    align-items: center;
    gap: var(--space-6);;
    text-decoration: none;
}
.notice-section  .single-item{
    padding: var(--space-5)
    var(--space-6);
    background: var(--color-bg-primary);
    border-bottom: var(--border-light);
}
.notice-section  .single-item:nth-child(even) {
    background: var(--color-bg-light);

}
.notice-section .single-item:not(:has(~ .single-item)) {
    border-bottom: none;
}

.items-wrapper-area {
    width: 100%;
    height: fit-content;
    overflow: hidden;
    background-color: var(--color-bg-primary);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}
.notice-section .right-area .single-item .content .desc {
    -webkit-line-clamp: 2;
}

.single-item-btn-area {
    display: flex;
    border-bottom: var(--border-light);
}
.single-item-btn-area button {
    width: 100%;
    margin: 0;
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-light);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-size-xl);
    border: none;
    text-transform: uppercase;
}
.single-item-btn-area button:hover{
    background-color: var(--color-brand-secondary);
    color: var(--color-text-inverse);

}
.single-item-btn-area button.active{
    background-color: var(--color-brand-secondary);
    color: var(--color-text-inverse);

}


.single-item-area .btns-area {
    text-align: center;
    margin: 0px auto;
    justify-content: center;
    padding-bottom: 30px;
}

.notice-section .single-item:hover {
    background-color: var(--color-hover-soft);
}


.notice-left-section {
    border-radius: var(--card-radius);
    height: 815px;
    position: relative;
    /*overflow: hidden;*/
}

.notice-left-image {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
    overflow: hidden;
}
.notice-left-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.notice-left-content {
    position: relative;
    padding: var(--space-12);
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.notice-left-content .title-area h6{
    margin: 0 0 var(--space-6);
    color: var(--color-text-inverse);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--space-10);
}

.notice-left-content .title-area  p {
    margin: 0;
    color: var(--color-text-inverse);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}
.notice-left-content .title-area span {
    margin: var(--space-2) 0 0;
    color: var(--color-text-inverse);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-18);
    -webkit-line-clamp: 2;
}


.single-input-item {
    position: relative;
    width: 100%;

}

.single-input-item input {
    width: 100%;
    height: var(--space-16);
    padding: 0 var(--space-6);
    border: 1px solid #ffffff94;
    border-radius: var(--card-radius);
    background: #ffffff00;
    color: var(--color-text-inverse);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}


/* Focus / hover */
.single-input-item input:hover,
.single-input-item input:focus {
    border-color: var(--color-text-inverse);
}

/* Floating label */
.single-input-item input:focus + label,
.single-input-item input:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(60%);
    font-size: var(--space-3);
}
.filter-items {
    display: flex;
    gap: var(--space-4);
}

.single-input-item label {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    padding: 0 var(--space-1);
    background: #ffffff00;
    color: var(--color-text-inverse);
    font-size: var(--space-4);
    line-height: 1;
    pointer-events: none;
    transition: top 0.2s ease,
    transform 0.2s ease,
    font-size 0.2s ease;
}

.filter-area {
    background: #ffffff38;
    padding: var(--space-10) var(--space-6);
    border-radius: var(--space-6);
    display: grid;
    gap: var(--space-6);
    align-items: center;
}


/* =========================================================
   DATE PICKER — NEW RULES ONLY
   Everything is scoped to .date-range-picker so it cannot
   overwrite the existing site's components.
   ========================================================= */
.date-range-picker {
    position: relative;
}

.date-range-picker .date-range-input {
    cursor: pointer;
}

.date-range-picker .date-range-calendar {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 9999;
    width: 350px;
    max-width: calc(100vw - 100px); /* never wider than the screen */
    padding: var(--space-4);
    border: 1px solid #e5e5e5;
    border-radius: var(--space-4);
    background: var(--color-text-inverse);
    box-shadow: 0 var(--space-3) var(--space-8) rgb(0 0 0 / 16%);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -4px, 0);

    transition:
            opacity var(--duration-fast) var(--ease-standard),
            transform var(--duration-fast) var(--ease-standard),
            visibility 0s linear var(--duration-fast);
}

.date-range-picker.is-open .date-range-calendar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);

    transition:
            opacity var(--duration-fast) var(--ease-standard),
            transform var(--duration-fast) var(--ease-standard),
            visibility 0s linear 0s;
}

.date-range-picker .calendar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.date-range-picker .calendar-month {
    color: var(--color-brand-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.date-range-picker .calendar-nav {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--space-2);
    background: rgb(33 30 83 / 6%);
    color: var(--color-brand-primary);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.date-range-picker .calendar-nav:hover {
    background: var(--color-brand-primary);
    color: var(--color-text-inverse);
}

.date-range-picker .calendar-weekdays,
.date-range-picker .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.date-range-picker .calendar-weekdays {
    margin-bottom: var(--space-1);
}

.date-range-picker .calendar-weekday {
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    font-size: var(--space-3);
    font-weight: var(--font-weight-semibold);
}

.date-range-picker .calendar-day {
    width: 100%;
    height: var(--space-10);
    padding: 0;
    border: 0;
    background: transparent;
    color: #222;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    border-radius: 999px;
}

.date-range-picker .calendar-day:hover {
    background: rgb(9 130 187 / 12%);
    color: var(--color-brand-secondary);
}

.date-range-picker .calendar-day.is-in-range {
    border-radius: 0;
    background: rgb(9 130 187 / 12%);
    color: var(--color-brand-primary);
}

.date-range-picker .calendar-day.is-start,
.date-range-picker .calendar-day.is-end {
    background: var(--color-brand-secondary);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
}

.date-range-picker .calendar-day.is-start {
    border-radius: 999px 0 0 999px;
}

.date-range-picker .calendar-day.is-end {
    border-radius: 0 999px 999px 0;
}

.date-range-picker .calendar-day.is-start.is-end {
    border-radius: 999px;
}

.date-range-picker .calendar-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light);
}

.date-range-picker .date-range-action {
    height: var(--space-10);
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--space-2);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

.date-range-picker .date-range-clear {
    background: var(--color-bg-lighter);
    color: var(--color-text-secondary);
}

.date-range-picker .date-range-apply {
    background: var(--color-brand-secondary);
    color: var(--color-text-inverse);
}

.date-range-picker .date-range-apply:hover {
    background: var(--color-brand-primary);
}
.button-primary {
    background-color: var(--color-brand-secondary);
    color: var(--color-text-inverse);
    border: none;
    height: var(--space-16);
    padding: 0px var(--space-10);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-28);
    border-radius: var(--card-radius);
    text-transform: uppercase;
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.button-primary:hover{
    background-color: var(--color-brand-primary);
    box-shadow: var(--shadow-button-focus);
}

.single-item-area {
    height: 760px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.single-item-area::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

.single-item-area::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

.single-item-area::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
}

.single-item-area::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
#noticeItemsInner {
    min-height: 90%;

    font-size: var(--space-6);
    color: var(--color-text-primary);
    text-align: center;
}
.no-notices, .notice-loading{
    padding: var(--space-6) var(--space-6);
}
.notice-clear-filters {
    color: #ff0000;
    border: 1px solid var(--color-text-inverse);
    width: 100%;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    height: 60px;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-28);
    border-radius: var(--card-radius);
    text-transform: uppercase;
    background: var(--color-text-inverse);
}
.filter-btns {
    display: grid;
    gap: var(--space-4);
}
.single-item-area .single-item .content{
    text-align: start;
}
.site-logo-menu.nsu-main-logo-menu {
    padding: 0px;

}
.nsu-main-home-page-hero-banner-section .site-logo-menu.nsu-main-logo-menu .header-top-area {
    background: var(--color-brand-secondary);
    padding-inline: var(--section-spacing);
}
.nsu-main-home-page-hero-banner-section  .site-logo-menu.nsu-main-logo-menu .logo-menu-area{
    padding-inline: var(--section-spacing);
}
.nsu-main-home-page-hero-banner-section  .site-logo-menu.nsu-main-logo-menu .logo-menu-area
.menu-area-section
ul li a {
    color: var(--color-text-inverse);

}
.nsu-main-home-page-hero-banner-section  .site-logo-menu.nsu-main-logo-menu .logo-menu-area .desktop-menu-area .dropdown-trigger {
    color: var(--color-text-inverse);

}
.nsu-main-home-page-hero-banner-section  .site-logo-menu.nsu-main-logo-menu .logo-menu-area .desktop-menu-area .dropdown-icon svg {
    fill: var(--color-text-inverse);
}
.nsu-main-home-page-hero-banner-section  .site-logo-menu.nsu-main-logo-menu .logo-menu-area {
    padding-inline: var(--section-spacing);
    border-bottom: 1px solid #ffffff40;
    background: #0982bb08;
}
.nsu-main-home-page-hero-banner-section .logo-menu-area ,
.nsu-main-home-page-hero-banner-section .logo-area.dept-logo-area
{
    border-radius: 0;
}
.nsu-main-home-page-hero-banner-section .logo-menu-area .menu-area-section {
    display: flex;
    align-items: center;
    justify-content: unset;
    text-align: unset;
    padding: var(--space-2) 0px;
    width: 100%;
}
.nsu-main-home-page-hero-banner-section .desktop-menu-area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.nsu-main-home-page-hero-banner-section img.sites-logo {
    height: var(--space-30);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}


.nsu-main-home-page-hero-banner-section .logo-menu-area.is-sticky img.sites-logo{
    height: 70px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.nsu-main-home-page-hero-banner-section  .site-logo-menu.nsu-main-logo-menu .logo-menu-area.is-sticky {
    padding-inline: var(--section-spacing);
    border-bottom: 1px solid #ffffff40;
    background: var(--color-brand-primary);
    box-shadow: var(--card-shadow);
}
.nsu-main-home-page-hero-banner-section.home-page-hero-banner-section .common-page-banner-content h1 {
    text-transform: uppercase;
}
.nsu-main-home-page-hero-banner-section.home-page-hero-banner-section .common-page-banner-content p {
    margin: 0;
    color: var(--color-text-inverse);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    margin-bottom: 60px;
}

.slider-btn-area {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
}
.nsu-main-home-page-hero-banner-section.home-page-hero-banner-section .slider-btn-area .button-primary {
    width: 315px;
}

/* ---------------------------------------------------------
   SLIDE CONTENT ANIMATION (staggered reveal)
   --------------------------------------------------------- */

.home-page-hero-banner-section .common-page-banner-content h1,
.home-page-hero-banner-section .common-page-banner-content p,
.home-page-hero-banner-section .common-page-banner-content .slider-btn-area {
    opacity: 0;
    transform: translateY(45px);

    /* Leaving state: quick fade out, no delay */
    transition:
            opacity 400ms ease,
            transform 400ms ease;
}

/* Headline: its words already rise inside their own masks (.hero-word), so the h1 box only fades.
   p / buttons rise through the heroRise / heroPop keyframes, so their box never moves a second time. */
.home-page-hero-banner-section .common-page-banner-content h1{transform:none;opacity:1;transition:none}
.home-page-hero-banner-section .common-page-banner-content p,
.home-page-hero-banner-section .common-page-banner-content .slider-btn-area{transform:none}

.home-page-hero-banner-section .common-page-banner-content h1 {
    margin: 0 0 36px;
    color: var(--color-text-inverse);
    font-size: clamp(42px, 5.2vw, 88px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -2px;
    text-shadow: 0 var(--space-2) 30px rgba(0, 0, 0, .22);
}

/* Entering state: staggered, slower, emphasized easing */
.home-page-hero-banner-section .carousel-item.active .common-page-banner-content h1,
.home-page-hero-banner-section .carousel-item.active .common-page-banner-content p,
.home-page-hero-banner-section .carousel-item.active .common-page-banner-content .slider-btn-area {
    opacity: 1;
    transform: translateY(0);
}

.home-page-hero-banner-section .carousel-item.active .common-page-banner-content h1 {
    transition: none;
}

.home-page-hero-banner-section .carousel-item.active .common-page-banner-content p,
.home-page-hero-banner-section .carousel-item.active .common-page-banner-content .slider-btn-area {
    transition: none;      /* the keyframe animations below own their entrance */
}

.nsu-main-logo-menu .header-top-right {
    display: flex;
    align-items: center;
}
.nsu-main-logo-menu .header-top-right ul:first-child li {
    display: inline-block;
    padding-inline: var(--space-1);
    border-right: 0px;
}
.nsu-main-logo-menu .header-top-right ul,.nsu-main-logo-menu .header-top-right .info-text  {
    display: inline-block;
    padding-inline: var(--space-4);
    border-right: var(--header-divider);
}


.nsu-main-logo-menu .header-top-right ul:last-child {
    display: inline-block;
    padding-inline: var(--space-4);
    border-right: none;
    padding-right: 0px;
}
.nsu-main-logo-menu .header-top-right ul li a:hover span,.nsu-main-logo-menu .header-top-right ul li a:hover svg {
    color: var(--color-brand-primary);
    fill: var(--color-brand-primary);
}

/* =========================================================
   HEADER SEARCH (top bar)
   ========================================================= */

.nsu-main-logo-menu .header-top-right .header-search {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.header-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* White icon by default, same hover colour as your social icons */
.nsu-main-logo-menu .header-top-right .header-search-toggle svg {
    fill: var(--color-text-inverse);
    transition: fill var(--transition-fast);
}

.nsu-main-logo-menu .header-top-right .header-search-toggle:hover svg,
.nsu-main-logo-menu .header-top-right .header-search.is-open .header-search-toggle svg {
    fill: var(--color-brand-primary);
}

/* Sliding field */
.header-search-field {
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition:
            width 350ms var(--ease-emphasized),
            opacity 250ms var(--ease-standard);
}

.header-search.is-open .header-search-field {
    width: 240px;
    opacity: 1;
}

.header-search-field input {
    width: 100%;
    height: 30px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-inverse);
    border-radius: var(--radius-sm);
    background: var(--color-white-soft);
    color: var(--color-text-inverse);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    outline: none;
    transition:
            border-color var(--transition-fast),
            background-color var(--transition-fast);
}

.header-search-field input::placeholder {
    color: rgb(255 255 255 / 70%);
}

.header-search-field input:focus {
    border-color: var(--color-text-inverse);
    background: rgb(255 255 255 / 22%);
}

/* hide the browser's native clear (x) so it doesn't clash */
.header-search-field input::-webkit-search-cancel-button {
    display: none;
}

/* Shake when Enter is pressed on an empty field */
.header-search.is-empty .header-search-field {
    animation: searchShake 350ms var(--ease-standard);
}

.nsu-main-home-page-hero-banner-section .mobile-menu-area .menu-open-icon svg ,.nsu-main-home-page-hero-banner-section .mobile-menu-area .menu-close-icon svg {
    width: var(--mobile-menu-icon-size);
    height: var(--mobile-menu-icon-size);
    fill: var(--color-text-inverse)!important;
}

@keyframes searchShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}


/* ==========================================================
   HERO SLIDER – EXTRA ANIMATIONS (load AFTER style.css + responsive.css)
   Pure add-on: works with Bootstrap 4 or 5 (keys off .active)
   ========================================================== */
.home-page-hero-banner-section{--hero-accent:#37b6ff;--hero-ease:cubic-bezier(.16,1,.3,1)}

/* 1. Headline: word-by-word mask reveal + moving shine */
.hero-word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin-bottom:-.14em}
.hero-word>span{display:inline-block;transform:translateY(115%) rotate(7deg);transform-origin:left bottom;filter:blur(3px);
    background:linear-gradient(100deg,var(--color-text-inverse) 30%,#bfe8ff 45%,var(--color-text-inverse) 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    will-change:transform,filter;backface-visibility:hidden;
    transition:transform 800ms cubic-bezier(.22,1,.36,1) calc(80ms + var(--i)*70ms),filter 450ms ease-out calc(80ms + var(--i)*70ms)}
.home-page-hero-banner-section .carousel-item.active .hero-word>span{transform:none;filter:none;
    animation:heroShine 4.5s linear 1.8s 2 both}
@keyframes heroShine{from{background-position:100% 0}to{background-position:-150% 0}}

/* 2. Paragraph + buttons: staggered rise */
.home-page-hero-banner-section .carousel-item.active .common-page-banner-content p{animation:heroRise 750ms var(--hero-ease) 380ms both}
.home-page-hero-banner-section .carousel-item.active .slider-btn-area .button-primary{animation:heroPop 800ms var(--hero-ease) both,heroRing 2.8s ease-out 2s 4}
.home-page-hero-banner-section .carousel-item.active .slider-btn-area .button-primary:nth-child(1){animation-delay:550ms,1.6s}
.home-page-hero-banner-section .carousel-item.active .slider-btn-area .button-primary:nth-child(2){animation-delay:680ms,2.2s}
.home-page-hero-banner-section .carousel-item.active .poster-image{animation:heroRise 750ms var(--hero-ease) 380ms both}
.home-page-hero-banner-section .carousel-item.active .common-page-banner-content .hero-play-btn{animation:heroRise 750ms var(--hero-ease) 380ms both}
@keyframes heroRise{from{opacity:0;transform:translateY(28px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroPop{from{opacity:0;translate:0 var(--space-6);scale:.82}to{opacity:1;translate:0 0;scale:1}}
@keyframes heroRing{0%{box-shadow:0 0 0 0 rgba(55,182,255,.55)}70%,100%{box-shadow:0 0 0 18px rgba(55,182,255,0)}}

/* button shine sweep on hover */
.slider-btn-area .button-primary{position:relative;overflow:hidden;isolation:isolate;
    transition:background-color var(--transition-base),box-shadow var(--transition-base),transform 450ms var(--hero-ease)}
.slider-btn-area .button-primary::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%) skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transition:transform 700ms var(--hero-ease)}
.slider-btn-area .button-primary:hover::before{transform:translateX(120%) skewX(-20deg)}
.slider-btn-area .button-primary:hover{transform:translateY(-3px) scale(1.03)}

/* 3. SLIDE TRANSITION - seamless cross-fade (rewritten to remove the glitch)
   What caused the flicker: when the slide changed, the old slide dropped UNDER the new one at once
   while both were still mid-fade, so the dark page background showed through (a dip), and the old
   slide's text/buttons snapped off instantly while the picture was still visible.
   Now: the new slide fades in ON TOP of a fully opaque old slide. The old slide keeps .active and gets
   .is-leaving until the fade has finished (scripts.js), then it is hidden instantly behind the new one.
   Only opacity (and a gentle zoom of the picture) animates, so nothing shifts or reflows. */
.home-page-hero-banner-section .carousel-item{
    opacity:0;visibility:hidden;z-index:1;transform:none;transition:none;
    backface-visibility:hidden}
.home-page-hero-banner-section .carousel-item.active{
    opacity:1;visibility:visible;z-index:3;transform:none;
    transition:opacity 1.1s cubic-bezier(.4,0,.2,1);will-change:opacity}
.home-page-hero-banner-section .carousel-item.active.is-leaving{z-index:2;transition:none}
/* picture: gentle settle-in zoom (on the picture only - never on the text) */
.home-page-hero-banner-section .carousel-item .page-banner{transform:scale(1.05);transition:none}
.home-page-hero-banner-section .carousel-item.active .page-banner{transform:scale(1);transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.home-page-hero-banner-section .carousel-item.active.is-leaving .page-banner{transition:none}
/* leaving text fades out first so two headlines never overlap */
.home-page-hero-banner-section .carousel-item.is-leaving .common-page-banner-content{
    opacity:0;transition:opacity .22s ease-out}
/* words reset instantly when a slide is hidden (no visible slide-down) */
.home-page-hero-banner-section .carousel-item:not(.active) .hero-word>span{transition:none}

/* 4. Floating particles (spans injected by JS) */
.hero-particle{position:absolute;z-index:5;bottom:-20px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,var(--color-text-inverse),rgba(55,182,255,.6) 60%,transparent 70%);opacity:0;
    animation:heroFloat var(--d) linear var(--delay) infinite}
@keyframes heroFloat{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.8}
    50%{transform:translate(var(--dx),-45vh) scale(1)}100%{transform:translate(calc(var(--dx)*-1),-95vh) scale(.5);opacity:0}}

/* 5. Mouse parallax (uses the independent `translate` property, so it never fights the zoom) */
.home-page-hero-banner-section .page-banner img,.home-page-hero-banner-section .page-banner video{
    translate:calc(var(--mx,0)*-16px) calc(var(--my,0)*-10px)}
.home-page-hero-banner-section .common-page-banner-content{translate:calc(var(--mx,0)*10px) calc(var(--my,0)*6px)}

/* 6. Slide counter */
.hero-counter{position:absolute;z-index:30;right:var(--space-12);bottom:30px;display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-inverse);font-weight:600;letter-spacing:2px}
.hero-counter b{font-size:44px;line-height:1;display:inline-block}
.hero-counter b.is-changing{animation:heroCount .7s var(--hero-ease)}
.hero-counter i{width:46px;height:2px;background:rgba(255,255,255,.4)}
.hero-counter span{opacity:.6;font-size:var(--space-4)}
@keyframes heroCount{from{transform:translateY(60%);opacity:0;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}

/* 7. Arrows: pulse ring + nudge */
.home-page-hero-banner-section .carousel-control-prev:hover svg{animation:nudgeL .7s ease-in-out infinite}
.home-page-hero-banner-section .carousel-control-next:hover svg{animation:nudgeR .7s ease-in-out infinite}
@keyframes nudgeL{50%{transform:translateX(-6px)}}
@keyframes nudgeR{50%{transform:translateX(6px)}}


/* ==========================================================
   SCROLL PARALLAX – load AFTER slider-animations.css
   Driven by gsap-scroll.js (GSAP tweens --hp, --hy, --by on the hero)
   ========================================================== */

/* top scroll-progress bar */
.sp-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:99999;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
    background:linear-gradient(90deg,#37b6ff,#8b5cf6,#ff7ab6);box-shadow:0 0 14px rgba(55,182,255,.7)}

/* ---- HERO: background sinks slowly + zooms, text rises faster, fades and blurs ---- */
.home-page-hero-banner-section .page-banner img,.home-page-hero-banner-section .page-banner video{
    translate:calc(var(--mx,0)*-16px) calc(var(--my,0)*-10px + var(--sc-y,0px));
    scale:var(--sc-s,1);will-change:translate,scale;
    /* translate/scale are driven every frame (scroll + mouse): a CSS transition on them would
       restart each frame and feel laggy, so only the one-off transitions stay */
    transition:transform 8000ms cubic-bezier(.16,1,.3,1),filter 1200ms ease}
.home-page-hero-banner-section .common-page-banner-content{
    translate:calc(var(--mx,0)*10px) calc(var(--my,0)*6px + var(--sc-y,0px));
    opacity:var(--sc-o,1);filter:var(--sc-f,none);will-change:translate,opacity}
.home-page-hero-banner-section .hero-particle{translate:0 var(--sc-y,0px)}

/* ---- GSAP ScrollTrigger hooks (gsap-scroll.js tweens these CSS variables; no transform is touched,
        so your hover transforms keep working) ---- */
.gs{backface-visibility:hidden}
.gp-img{transform-origin:50% 50%;will-change:translate}


img.poster-image {
    width: 750px;
    height: 300px;
    object-fit: fill;
    /* box-shadow: 10px 0px; */
    border: var(--space-3) solid var(--color-text-inverse);
    border-radius: 10px;
    margin-bottom: 30px;
}
/* ---------------------------------------------------------
   MEGA MENU PANEL
   The size/position rules live on the panel ITSELF (not on .is-open), so when the menu
   closes the panel stays exactly where it is and only fades/slides out. Previously these
   rules disappeared the instant .is-open was removed, so the box snapped back to the
   small default dropdown size mid-fade = the glitch.
   --------------------------------------------------------- */
.dropdown-panel.mega-menu-area {
    position: fixed !important;
    top: 185px !important;
    left: 0 !important;
    right: 0 !important;
    width: 88% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 6% !important;
    box-sizing: border-box;
    height: 650px;
    border-radius: 0;
    border-bottom-left-radius: var(--space-12);
    border-bottom-right-radius: var(--space-12);
    overflow: hidden;
    box-shadow: var(--card-shadow);

    /* closed state: only these three things animate */
    transform: translateY(-18px);
    transition:
            opacity .3s ease,
            transform .5s cubic-bezier(.16, 1, .3, 1),
            visibility 0s linear .5s;
    will-change: opacity, transform;
}

.dropdown-component.is-open .dropdown-panel.mega-menu-area {
    transform: translateY(0);
    transition:
            opacity .3s ease,
            transform .5s cubic-bezier(.16, 1, .3, 1),
            visibility 0s;
}

.nsu-main-home-page-hero-banner-section .site-logo-menu.nsu-main-logo-menu .logo-menu-area.is-sticky .dropdown-component .dropdown-panel.mega-menu-area {
    top: 87px !important;
}


.mega-menu-bg img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.mega-menu-content {
    position: relative;
}

.mega-menu-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.submenu-items ul {
    padding: var(--space-4)!important;
}
.submenu-items ul li{
    display: block!important;
    margin-right: var(--space-6);
}
.submenu-items ul li a {
    display: inline-block!important;
    color: var(--color-brand-primary)!important;
    font-size: var(--font-size-md)!important;
    font-weight: var(--font-weight-regular)!important;
    line-height: var(--line-height-base)!important;
    text-decoration: none!important;
    transition: var(--transition-color)!important;
    text-transform: unset !important;
}
.submenu-items-title a {
    background: #D0D2DD;
    color: var(--color-brand-primary)!important;
    padding: var(--space-2) var(--space-6)!important;
}

.submenu-items-content-wrapper {
    padding: var(--space-6);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-6);
    overflow-y: scroll;
    height: 650px;
}
.mega-menu-content {
    position: relative;
    display: grid;
    grid-template-columns: 3fr 9fr;
}

.submenu-banner-bg img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
}
.submenu-banner-wrapper {
    width: 100%;
    border-right: var(--space-2) solid var(--color-text-inverse);
    border-bottom: var(--space-2) solid var(--color-text-inverse);
    margin-left: -5px;
    position: relative;
    overflow: hidden;
    margin-top: -1px;
    border-top: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 96%;
}
.submenu-banner-content {
    position: relative;
    padding: var(--space-6);
    padding-right: var(--space-10);
}
.submenu-banner-content h2 {
    margin: 0 0 var(--space-6);
    color: var(--color-text-inverse);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--space-10);
}
.submenu-banner-content p {
    margin: 0;
    color: var(--color-text-inverse);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}
.submenu-banner-bg::after {
    background: linear-gradient(178deg, rgb(33 30 83) 0%, rgb(6 23 66 / 67%) 38%, rgb(6 23 66 / 0%) 72%, rgba(6, 23, 66, .42) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    content: 'ff';
}
.submenu-items ul li {
    margin-right: 0!important;
}


/* =========================================================
   HERO: POSTER + VIDEO MODALS, PLAY BUTTON
   ========================================================= */

.carousel-item .poster-image{cursor:zoom-in;transition:box-shadow .3s ease}
.carousel-item .poster-image:hover{box-shadow:0 18px 50px rgba(0,0,0,.35)}
.carousel-item .poster-image:focus-visible{outline:3px solid #37b6ff;outline-offset:var(--space-1)}

/* Play button (first slide) */
.hero-play-btn{
    /* position:absolute; */
    z-index:12;
    right:var(--space-12);
    bottom:110px;
    display: grid;
    align-items:center;
    gap:14px;
    padding:0;
    border:0;
    background:none;
    color:var(--color-text-inverse);
    cursor:pointer;
    font:inherit;
    font-weight:600;
    letter-spacing:.6px;
    text-shadow:0 2px var(--space-3) rgba(0,0,0,.45);
    justify-content: center;
}
.hero-play-btn__icon{
    position:relative;
    display:grid;
    place-items:center;
    width: 100px;
    height: 100px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    border:1.5px solid rgba(255,255,255,.75);
    -webkit-backdrop-filter:blur(var(--space-2));
    backdrop-filter:blur(var(--space-2));
    transition:transform .3s ease,background .3s ease,border-color .3s ease;
    margin-bottom: 20px;
}
.hero-play-btn__icon::before{
    content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
    animation:heroPlayPulse 2.6s ease-out infinite}
.hero-play-btn__icon svg{width:28px;height:28px;margin-left:var(--space-1);fill:var(--color-text-inverse)}
.hero-play-btn:hover .hero-play-btn__icon,.hero-play-btn:focus-visible .hero-play-btn__icon{
    transform:scale(1.06);background:#0d86c4;border-color:#0d86c4}
.hero-play-btn:focus-visible{outline:3px solid #37b6ff;outline-offset:6px;border-radius:var(--space-10)}
@keyframes heroPlayPulse{0%{transform:scale(.92);opacity:.8}70%,100%{transform:scale(1.25);opacity:0}}

/* Modal */
html.hero-modal-open{overflow:hidden}
.hero-modal{
    position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
    padding:clamp(var(--space-3),3vw,var(--space-8));background:rgba(4,10,30,.82);overscroll-behavior:contain;
    opacity:0;transition:opacity .3s ease}
.hero-modal.is-open{opacity:1}
.hero-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%,1100px);
    max-height: 100%;
    background: var(--color-text-inverse);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px var(--space-20) rgba(0,0,0,.55);
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.hero-modal.is-open .hero-modal__dialog{opacity:1;transform:none}
.hero-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex: none;
    padding: var(--space-3) var(--space-3) var(--space-3) 22px;
    color: var(--color-text-inverse);
    border-bottom: 1px solid var(--color-border);
}
.hero-modal__title {

    text-transform: none;
    color: var(--color-text-inverse);
    margin: 0;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-18);
}
.hero-modal__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-brand-primary);
    color: var(--color-text-inverse);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease;
}
.hero-modal__close:hover{background:#e5384f}
.hero-modal__close:focus-visible{outline:3px solid #37b6ff;outline-offset:2px}
.hero-modal__body{
    display:flex;align-items:center;justify-content:center;min-height:0;overflow:auto;background:#050a1c}
.hero-modal__body img{
    display:block;width:auto;height:auto;max-width:100%;
    max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);object-fit:contain}
.hero-modal__body video{
    display:block;width:100%;background:var(--color-text-primary);
    max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px)}

.hero-modal__footer{
    flex:none;
    display:flex;
    /* flex-wrap:wrap; */
    justify-content: end;
    gap:var(--space-4);
    padding:14px 22px;
    background:var(--color-text-inverse);
    border-top:1px solid var(--color-border)
}
.hero-modal--has-footer .hero-modal__body img,
.hero-modal--has-footer .hero-modal__body video{
    max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px)}


.info-text h2 {
    display: block;
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: 14px;
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast);
    margin-bottom: 0px;
}

.home-page-hero-banner-section .common-page-banner-area:has(.hero-play-btn) {
    align-items: end;
    padding-bottom: 150px;
}

.logo-menu-area
.menu-area-section
.top-menu li {
    text-align: center;

}



/* =========================================================
   ADMISSION LANDING
   Only layout + look. Padding, radius, card, button, colors and
   font sizes all come from style.css tokens / existing classes:
   common-padding-lg, nsu-card, radius-lg, card-square-padding-lg,
   button-primary, section-bg-lighter.
   ========================================================= */

.admission-landing-section .admission-landing-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap-sm);
}

/* ---------- hero card ---------- */
.admission-landing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 460px;
}

.admission-landing-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background-color: var(--color-brand-primary);
}

.admission-landing-hero__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.admission-landing-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;                               /* sits on the image, inside the clipped layer */
    pointer-events: none;
    background: linear-gradient(90deg, rgb(33 30 83 / 90%) 0%, rgb(33 30 83 / 66%) 38%, rgb(33 30 83 / 0%) 78%);
}

.admission-landing-hero__content {
 
    color: var(--color-text-inverse);
}

.admission-landing-hero__label {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

.admission-landing-hero__title {
    margin: 0 0 var(--space-5);
    color: var(--color-text-inverse);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.admission-landing-hero__text {
    margin: 0 0 var(--space-12);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
}

.admission-landing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

/* outline modifier on the existing .button-primary (size/font stay yours) */
.button-primary.button-outline {
    width: auto;
    gap: var(--space-3);
    background-color: rgb(255 255 255 / 4%);
    border: var(--border-width-thin) solid var(--color-text-inverse);
}

.button-primary.button-outline:hover {
    background-color: var(--color-text-inverse);
    color: var(--color-brand-primary);
}

.button-primary.button-outline svg {
    width: var(--space-6);
    height: var(--space-6);
    fill: currentColor;
}

/* ---------- quick-link cards ---------- */
.admission-quick-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap-sm);
}

.admission-quick-card {
    position: relative;                       /* anchors the stretched link: the whole card is clickable */
    display: flex;
    flex-direction: column;
    transition: var(--transition-transform), var(--transition-shadow);
}

.admission-quick-card__icon {
    display: grid;
    place-items: center;
    width: var(--space-16);
    height: var(--space-16);
    margin-bottom: var(--space-6);
    border-radius: var(--radius-full);
    background-color: var(--color-secondary-soft);
    color: var(--color-brand-secondary);
}

.admission-quick-card__icon svg {
    width: var(--space-8);
    height: var(--space-8);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admission-quick-card__title {
    margin: 0 0 var(--space-2);
    color: var(--color-text-brand);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.admission-quick-card__text {
    margin: 0 0 var(--space-12);
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
}

.admission-quick-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    margin-top: auto;
    color: #0875a8;                           /* AA fallback: 5.1:1 on white (brand link colour is 4.3:1) */
    color: color-mix(in srgb, var(--color-text-link) 90%, #000);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: var(--button-underline-offset);
    transition: var(--transition-color);
}

.admission-quick-card__link svg {
    width: var(--space-6);
    height: var(--space-6);
    fill: currentColor;
    transition: var(--transition-transform);
}

.admission-quick-card__link:hover {
    color: var(--color-brand-primary);
}

.admission-quick-card__link:hover svg {
    transform: translateX(var(--space-1));
}

.admission-landing-section a:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
}

/* white ring on the dark hero (brand blue would vanish on navy) */
.admission-landing-section .admission-landing-hero a:focus-visible {
    outline-color: var(--color-text-inverse);
}




h1.display-6.line-through {
    color: var(--color-brand-primary);
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-2);
}
.card i {
    color: var(--color-brand-primary)!important;
}

/* whole card is the target: ring the card, not just the small text link */
@supports selector(:has(*)) {
    .admission-landing-section .admission-quick-card__link:focus-visible {
        outline: none;
    }
    .admission-quick-card:has(.admission-quick-card__link:focus-visible) {
        outline: 2px solid var(--color-border-focus);
        outline-offset: 3px;
    }
}

/* hover feedback only where a real pointer exists */
@media (hover: hover) {
    .admission-quick-card:hover {
        transform: translateY(calc(var(--space-1) * -1));
        box-shadow: var(--shadow-event-hover);
    }
    .admission-quick-card:hover .admission-quick-card__link {
        color: var(--color-brand-primary);
    }
    .admission-quick-card:hover .admission-quick-card__link svg {
        transform: translateX(var(--space-1));
    }
}