/********** Template CSS **********/
:root {
    --primary: #3e4094;
    --secondary: #a4c639;
    --light: #e0e6fb;
    --dark: #181d38;
    --primary2: #6567A9;
    --secondary2: #c5e063;

    /* ------------------------------------------------------------------
       Bootstrap variable bridge — point Bootstrap's CSS vars at the brand
       so utilities like .text-primary, .bg-primary, .btn-primary,
       .border-primary, .link-primary all use brand colors out of the box.
       Bootstrap 5.0 partially honors these; later versions honor them
       fully. Adding here is forward-compatible.
       ------------------------------------------------------------------ */
    --bs-primary: #3e4094;
    --bs-primary-rgb: 62, 64, 148;
    --bs-secondary: #a4c639;
    --bs-secondary-rgb: 164, 198, 57;
    --bs-link-color: #3e4094;
    --bs-link-hover-color: #2a1eb8;
}

/* Dark-mode bridge: shift Bootstrap vars toward the dark palette so
   utility classes carry their meaning into dark mode automatically. */
[data-theme="dark"] {
    --bs-primary: #6c5ce7;
    --bs-primary-rgb: 108, 92, 231;
    --bs-secondary: #c5e063;
    --bs-secondary-rgb: 197, 224, 99;
    --bs-link-color: #c7d2fe;
    --bs-link-hover-color: #e0e6fb;
    --bs-body-bg: #0e0e1a;
    --bs-body-color: #e8e9f0;
    --bs-border-color: #2a2c4a;
}

/* ------------------------------------------------------------------
   Bootstrap 5.0 utility bridge — 5.0 hardcoded these to the default
   palette, so we re-point them at our --bs-primary/secondary vars.
   This lets dark mode flip automatically with no per-class overrides.
   ------------------------------------------------------------------ */
.text-primary { color: var(--bs-primary) !important; }
.bg-primary   { background-color: var(--bs-primary) !important; }
.border-primary { border-color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.bg-secondary   { background-color: var(--bs-secondary) !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }
.link-primary { color: var(--bs-primary) !important; }
.link-primary:hover, .link-primary:focus { color: var(--bs-link-hover-color) !important; }

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--bs-link-hover-color);
    border-color: var(--bs-link-hover-color);
    color: #fff;
}
.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* ------------------------------------------------------------------
   Small reusable helpers — used in templates instead of inline styles.
   ------------------------------------------------------------------ */
.contact-icon-tile {
    width: 60px;
    height: 60px;
    border-radius: 6px;
}
.back-to-top {
    background-color: var(--bs-secondary);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
}
.back-to-top:hover, .back-to-top:focus {
    background-color: var(--bs-primary);
    color: #fff;
}
/* ------------------------------------------------------------------
   Policy banner — used for the admission, rules, and mission policy
   blocks. Light surface in light mode, dark surface in dark mode.
   Replaces the previous .bg-primary/.bg-secondary banners which were
   too saturated for light mode.
   ------------------------------------------------------------------ */
.policy-block {
    background: var(--rgc-surface-2, #f4f5fa);
    border: 1px solid var(--rgc-border, #e5e7eb);
    color: var(--rgc-text, #1a1a1a);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .06), 0 2px 4px -1px rgba(0, 0, 0, .04);
}
.policy-block p,
.policy-block h1, .policy-block h2, .policy-block h3,
.policy-block h4, .policy-block h5, .policy-block h6,
.policy-block li, .policy-block strong, .policy-block span {
    color: inherit !important;
}
[data-theme="dark"] .policy-block {
    background: var(--rgc-surface-2, #1d1d36);
    border-color: var(--rgc-border, #2a2c4a);
    color: var(--rgc-text, #e8e9f0);
}

/* Accent variant — used for "What We Do" and similar */
.policy-block--accent {
    background: rgba(164, 198, 57, .14);
    border-color: rgba(164, 198, 57, .35);
}
[data-theme="dark"] .policy-block--accent {
    background: rgba(164, 198, 57, .12);
    border-color: rgba(164, 198, 57, .3);
}

/* Warning variant — used for "Required Documents" */
.policy-block--warn {
    background: rgba(220, 53, 69, .08);
    border-color: rgba(220, 53, 69, .35);
}
[data-theme="dark"] .policy-block--warn {
    background: rgba(220, 53, 69, .15);
    border-color: rgba(220, 53, 69, .3);
}

/* Each rule row inside a .policy-block — white card in light mode,
   slightly lighter dark surface in dark mode, with brand left-border. */
.policy-rule {
    background: var(--rgc-surface, #ffffff);
    border: 1px solid var(--rgc-border, #e5e7eb);
    border-left: 4px solid var(--bs-secondary);
    color: var(--rgc-text, #1a1a1a);
    transition: transform .15s ease, box-shadow .15s ease;
}
.policy-rule p,
.policy-rule strong,
.policy-rule span {
    color: inherit !important;
}
.policy-rule:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .06);
}
[data-theme="dark"] .policy-rule {
    background: var(--rgc-surface, #16162a);
    border-color: var(--rgc-border, #2a2c4a);
    color: var(--rgc-text, #e8e9f0);
}
/* Variant: primary accent (used inside accent banners) */
.policy-rule--primary {
    border-left-color: var(--bs-primary);
}

/* ------------------------------------------------------------------
   Bootstrap accordion (FAQ sections) — re-skin to brand colors and
   add dark-mode support. BS 5.0 hardcodes cyan-ish tones that don't
   match our indigo brand, and has no dark-mode awareness.
   ------------------------------------------------------------------ */
.accordion-item {
    background-color: var(--rgc-surface, #fff);
    border-color: var(--rgc-border, #e5e7eb);
    color: var(--rgc-text, #1a1a1a);
}
.accordion-button {
    background-color: var(--rgc-surface, #fff);
    color: var(--rgc-text, #1a1a1a);
    font-weight: 600;
}
.accordion-button:not(.collapsed) {
    background-color: rgba(62, 64, 148, .08);
    color: var(--bs-primary);
    box-shadow: inset 0 -1px 0 var(--rgc-border, #e5e7eb);
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233e4094'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(62, 64, 148, .2);
}
.accordion-body {
    background-color: var(--rgc-surface, #fff);
    color: var(--rgc-text, #1a1a1a);
    line-height: 1.65;
}

/* Dark mode */
[data-theme="dark"] .accordion-item {
    background-color: var(--rgc-surface, #16162a);
    border-color: var(--rgc-border, #2a2c4a);
    color: var(--rgc-text, #e8e9f0);
}
[data-theme="dark"] .accordion-button {
    background-color: var(--rgc-surface, #16162a);
    color: var(--rgc-text, #e8e9f0);
}
[data-theme="dark"] .accordion-button::after {
    /* default chevron in light grey for dark mode */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c7d2fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(108, 92, 231, .18);
    color: #c7d2fe;
    box-shadow: inset 0 -1px 0 var(--rgc-border, #2a2c4a);
}
[data-theme="dark"] .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c7d2fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-theme="dark"] .accordion-button:focus {
    border-color: #6c5ce7;
    box-shadow: 0 0 0 .2rem rgba(108, 92, 231, .25);
}
[data-theme="dark"] .accordion-body {
    background-color: var(--rgc-surface, #16162a);
    color: var(--rgc-text, #e8e9f0);
}

* {
    font-family: 'Poppins', sans-serif;
}

body {
    overflow-x: hidden;
}



.fw-medium {
    font-weight: 600 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Button ***/
.btn {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    transition: .5s;
}

/* Top Info Bar */
.top-info-bar {
    background: var(--secondary);
    color: white;
    padding: 8px 0;
    font-size: 14px;
}

.top-info-bar a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.top-info-bar a:hover {
    color: white;
    text-decoration: underline;
}

.news-badge {
    font-weight: 600;
    margin-right: 10px;
}


.value-item {
    font-size: 20px;
    color:var(--primary);
}



/*** Navbar ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar-light .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
    outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar-light .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

.navbar-light .navbar-brand,
.navbar-light a.btn {
    height: 75px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--dark);
    font-weight: 500;
}

.navbar-light.sticky-top {
    top: -100px;
    transition: .5s;
}

/* ===== Courses component ===== */

/* Year selector — horizontal stat cards */
.course-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
@media (max-width: 991px) { .course-tabs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .course-tabs { grid-template-columns: repeat(2, 1fr); } }

.course-tab {
    appearance: none;
    background: #fff;
    border: 1px solid rgba(31, 18, 144, 0.10);
    border-radius: 14px;
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.course-tab:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(31, 18, 144, .10);
    border-color: var(--primary);
}
.course-tab__roman {
    font-family: 'Poppins', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    letter-spacing: 0.04em;
}
.course-tab__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    opacity: 0.7;
    margin-top: 2px;
}
.course-tab__meta {
    font-size: 0.6875rem;
    color: var(--primary);
    opacity: 0.55;
    margin-top: 4px;
    line-height: 1.4;
}
.course-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 10px 28px rgba(31, 18, 144, .28);
    transform: translateY(-3px);
}
.course-tab.active .course-tab__roman { color: var(--secondary); }
.course-tab.active .course-tab__label,
.course-tab.active .course-tab__meta { color: rgba(255, 255, 255, .9); opacity: 1; }

/* Course panel */
.course-panel {
    background: #fff;
    border: 1px solid rgba(31, 18, 144, 0.08);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 6px 24px rgba(31, 18, 144, 0.05);
}
@media (max-width: 575px) { .course-panel { padding: 22px 18px; } }

.course-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(31, 18, 144, 0.08);
}
.course-panel__title {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}
.course-panel__stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.course-panel__stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--primary);
    background: rgba(31, 18, 144, 0.06);
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
}
.course-panel__stat strong { font-weight: 800; }

/* Subject card grid */
.subject-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (max-width: 575px) { .subject-grid { grid-template-columns: 1fr; } }

.subject-card {
    position: relative;
    background: #f8f9fc;
    border: 1px solid rgba(31, 18, 144, 0.08);
    border-radius: 12px;
    padding: 16px 16px 16px 76px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.subject-card:hover {
    transform: translateY(-2px);
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 8px 22px rgba(31, 18, 144, 0.10);
}
.subject-card__num {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), #2a1eb8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.125rem;
    box-shadow: 0 4px 12px rgba(31, 18, 144, 0.25);
}
.subject-card__label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--primary);
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}
.subject-card__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.35;
    margin: 0 0 10px 0;
    letter-spacing: 0.01em;
}
.subject-card__marks {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    background: rgba(31, 18, 144, 0.08);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: background .2s ease, color .2s ease;
}
.subject-card__marks::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.5;
}
.subject-card:hover .subject-card__marks {
    background: var(--secondary);
    color: var(--primary);
}
.subject-card:hover .subject-card__marks::before { opacity: 1; }


@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .dropdown-menu.fade-down {
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        transform: rotateX(0deg);
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

.navbar-brand {

    padding: 8px 25px;
    transition: all 0.3s;
}

.navbar-brand:hover {

    transform: translateY(-2px);
}

.navbar-brand img {
    height: 65px;
    width: auto;
}


.modern-navbar .navbar-nav .nav-link {

    font-weight: 600;
    padding: 15px 20px;
    color: var(--primary);
    transition: all 0.3s;
    position: relative;
    font-size: 14px;
}

.modern-navbar .navbar-nav .nav-link:hover,
.modern-navbar .navbar-nav .nav-link.active {
    color: var(--secondary);
}

.modern-navbar .navbar-toggler {
    background: white;
}

.modern-navbar .dropdown-menu {
    background: var(--primary2);
    border: none;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    border-top: 3px solid var(--secondary);
}

.modern-navbar .dropdown-item {
    color: white;
    padding: 10px 20px;

}

.modern-navbar .dropdown-item:hover {
    background: var(--secondary);
    color: white;
    padding-left: 25px;
}

/*** Section Title ***/
.section-title {
    color: var(--secondary);
    position: relative;
    display: inline-block;
    text-transform: uppercase;
}

.gallery-image {
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    animation: zoomIn 0.3s;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    background: none;
    border: none;
}

.lightbox-close:hover {
    color: #06bbcc;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    padding: 20px;
    background: none;
    border: none;
    transition: 0.3s;
}

.lightbox-nav:hover {
    color: #06bbcc;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


.section-title.text-start::before {
    width: calc(100% + 40px);
    left: 0;
}

.section-title.text-start::after {
    width: calc(100% + 60px);
    left: 0;
}


/*** Service ***/
.service-item {

    border-radius: 20px;
    background: var(--light);
    transition: .5s;
}

.service-item * {
    transition: .5s;
}


/*** Categories & Courses ***/
.category img,
.course-item img {
    transition: .5s;
}

.category a:hover img,
.course-item:hover img {
    transform: scale(1.1);
}


/*** Team ***/
.team-item img {
    transition: .5s;
}

.team-item:hover img {
    transform: scale(1.1);
}


/*** Testimonial ***/
.testimonial-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.testimonial-carousel::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

@media (min-width: 768px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 200px;
    }
}

@media (min-width: 992px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 300px;
    }
}

.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item.center .testimonial-text * {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: #FFFFFF !important;
}

.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 1px solid #CCCCCC;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}


/*** Footer ***/
.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    font-weight: normal;
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

/* ============================================================
   Site UI v2  —  theme tokens, dark mode, news ticker, PhotoSwipe,
   gallery & button polish, theme toggle button
   ============================================================ */

:root {
    --rgc-bg:        #ffffff;
    --rgc-surface:   #ffffff;
    --rgc-surface-2: #f4f5fa;
    --rgc-text:      #1a1a1a;
    --rgc-text-muted:#6b7280;
    --rgc-border:    #e5e7eb;
    --rgc-shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
    --rgc-shadow-md: 0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -1px rgba(0,0,0,.04);
    --rgc-shadow-lg: 0 12px 24px -8px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
    --rgc-accent:    #c7e000;
    --rgc-radius:    12px;
}

[data-theme="dark"] {
    --rgc-bg:        #0e0e1a;
    --rgc-surface:   #16162a;
    --rgc-surface-2: #1d1d36;
    --rgc-text:      #e8e9f0;
    --rgc-text-muted:#9aa0b3;
    --rgc-border:    #2a2c4a;
    --rgc-shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --rgc-shadow-md: 0 4px 12px rgba(0,0,0,.5);
    --rgc-shadow-lg: 0 16px 40px rgba(0,0,0,.6);
}

body {
    background: var(--rgc-bg);
    color: var(--rgc-text);
    transition: background-color .25s ease, color .25s ease;
}

/* ----- Dark-mode overrides for Bootstrap / template classes ----- */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .modern-navbar,
[data-theme="dark"] .navbar-light,
[data-theme="dark"] section[class*="bg-light"],
[data-theme="dark"] .top-info-bar,
[data-theme="dark"] footer,
[data-theme="dark"] .container-xxl.bg-light {
    background-color: var(--rgc-surface) !important;
    color: var(--rgc-text);
}
[data-theme="dark"] .bg-light { background-color: var(--rgc-surface-2) !important; color: var(--rgc-text); }
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--rgc-text) !important; }
[data-theme="dark"] .text-muted { color: var(--rgc-text-muted) !important; }
[data-theme="dark"] .bg-white .text-dark { color: var(--rgc-text) !important; }
[data-theme="dark"] p { color: var(--rgc-text); }
[data-theme="dark"] .navbar-light .navbar-nav .nav-link { color: var(--rgc-text) !important; }
[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link.active { color: var(--secondary) !important; }
[data-theme="dark"] .dropdown-menu {
    background-color: var(--rgc-surface-2);
    border-color: var(--rgc-border);
}
[data-theme="dark"] .dropdown-item { color: var(--rgc-text); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item.active { background-color: var(--primary); color: #fff; }
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content { background-color: var(--rgc-surface); color: var(--rgc-text); border-color: var(--rgc-border); }
[data-theme="dark"] .border,
[data-theme="dark"] [class*="border-"] { border-color: var(--rgc-border) !important; }
[data-theme="dark"] hr { border-color: var(--rgc-border); opacity: 1; }

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea {
    background-color: var(--rgc-surface-2);
    border-color: var(--rgc-border);
    color: var(--rgc-text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { background-color: var(--rgc-surface-2); border-color: var(--primary); color: var(--rgc-text); }
[data-theme="dark"] .form-control::placeholder { color: var(--rgc-text-muted); }
[data-theme="dark"] .table { color: var(--rgc-text); }
[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--rgc-text); }
[data-theme="dark"] .table-bordered, [data-theme="dark"] .table-bordered > :not(caption) > * { border-color: var(--rgc-border); }
[data-theme="dark"] .table-hover tbody tr:hover > * { background-color: rgba(255,255,255,.04) !important; }

[data-theme="dark"] .modern-navbar { box-shadow: 0 1px 0 var(--rgc-border), 0 4px 16px rgba(0,0,0,.4) !important; }
[data-theme="dark"] .top-info-bar { background-color: var(--rgc-surface-2) !important; border-bottom: 1px solid var(--rgc-border); }
[data-theme="dark"] .top-info-bar a { color: var(--rgc-text); }

/* Service / feature / faculty / category cards: lift on hover */
.service-item, .team-item, .category .col-lg-7 .row > div, .gallery-image
{ transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.service-item:hover { transform: translateY(-4px); box-shadow: var(--rgc-shadow-lg); }
[data-theme="dark"] .service-item { background-color: var(--rgc-surface) !important; }
[data-theme="dark"] .service-item h5,
[data-theme="dark"] .service-item p { color: var(--rgc-text) !important; }
[data-theme="dark"] .service-item .btn-link { color: var(--secondary) !important; }

/* ----- News ticker ----- */
.news-ticker { gap: 12px; }
.news-badge {
    background: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%) !important;
    color: #fff !important;
    padding: 4px 12px !important;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    flex-shrink: 0;
    line-height: 1.4;
    position: relative;
}
.news-badge::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    margin-right: 6px;
    vertical-align: middle;
    animation: news-pulse 1.4s ease-in-out infinite;
}
@keyframes news-pulse {
    0%, 100% { opacity: .35; transform: scale(.8); }
    50%      { opacity: 1;   transform: scale(1.2); }
}
.news-ticker-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.news-ticker-content {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    animation: ticker-scroll 60s linear infinite;
    padding-left: 0;
}
.news-ticker-track:hover .news-ticker-content,
.news-ticker-track:focus-within .news-ticker-content { animation-play-state: paused; }
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.news-ticker-content a { color: var(--rgc-text); text-decoration: none; }
.news-ticker-content a:hover { color: var(--primary); }
.news-ticker-sep {
    display: inline-block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .3;
}

/* ----- Theme toggle button (injected by main.js) ----- */
.theme-toggle {
    background: var(--rgc-surface-2);
    border: 1px solid var(--rgc-border);
    color: var(--rgc-text);
    width: 38px; height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
    margin: 0 8px;
    font-size: 1rem;
    flex-shrink: 0;
}
.theme-toggle:hover { background: var(--rgc-surface); border-color: var(--primary); color: var(--primary); transform: rotate(15deg); }
.theme-toggle .bi-sun-fill { display: none; }
[data-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }
[data-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; color: #fbbf24; }
[data-theme="dark"] .theme-toggle:hover { color: #fbbf24; }
/* ----- PhotoSwipe gallery thumbs ----- */
.gallery-photoswipe a {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    cursor: zoom-in;
}
.gallery-photoswipe a img,
.gallery-image {
    transition: transform .35s ease, filter .35s ease;
}
.gallery-photoswipe a::after {
    content: '\F52A'; /* bi-zoom-in */
    font-family: "bootstrap-icons";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(31, 18, 144, .55);
    opacity: 0;
    transition: opacity .25s ease;
    font-size: 1.8rem;
}
.gallery-photoswipe a:hover img { transform: scale(1.06); filter: brightness(.78); }
.gallery-photoswipe a:hover::after { opacity: 1; }

/* ----- Misc polish ----- */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; height: auto; }



/* ============================================================
   Site UI v3  —  full app refresh
   Refreshed tokens, typography, sections, cards, tables, forms,
   buttons, lists, footer, page heros. Light + dark compatible.
   ============================================================ */

:root {
    --rgc-radius-sm: 8px;
    --rgc-radius:    14px;
    --rgc-radius-lg: 22px;
    --rgc-shadow-card:  0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --rgc-shadow-hover: 0 6px 16px rgba(31, 18, 144, .12), 0 18px 40px rgba(15, 23, 42, .10);
    --rgc-section-bg-1: #ffffff;
    --rgc-section-bg-2: #f8f9fc;
    --rgc-divider:      #e6e9f0;
    --rgc-accent-grad:  linear-gradient(135deg, #1f1290 0%, #4a2cc9 60%, #6c5ce7 100%);
    --rgc-accent-soft:  linear-gradient(135deg, rgba(31,18,144,.08), rgba(108,92,231,.10));
}
[data-theme="dark"] {
    --rgc-shadow-card:  0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .35);
    --rgc-shadow-hover: 0 8px 22px rgba(108, 92, 231, .35), 0 24px 60px rgba(0, 0, 0, .55);
    --rgc-section-bg-1: #16162a;
    --rgc-section-bg-2: #1d1d36;
    --rgc-divider:      #2a2c4a;
    --rgc-accent-soft:  linear-gradient(135deg, rgba(108,92,231,.18), rgba(255,255,255,.04));
}

/* ----- Base typography ----- */
body {
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', 'Poppins', sans-serif;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3, h4 { font-weight: 700; }
p { color: var(--rgc-text); }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary2, #4a2cc9); }
[data-theme="dark"] a { color: #a5b4fc; }
[data-theme="dark"] a:hover { color: #c7d2fe; }

::selection { background: rgba(31, 18, 144, .25); color: inherit; }
[data-theme="dark"] ::selection { background: rgba(165, 180, 252, .35); color: #fff; }

/* ----- Section title (replaces the small bg-white badge) ----- */
.section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rgc-accent-soft) !important;
    color: var(--primary) !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
    border: 1px solid rgba(31, 18, 144, .12);
}
.section-title::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--secondary, #c7e000);
    box-shadow: 0 0 0 3px rgba(199, 224, 0, .18);
}
[data-theme="dark"] .section-title {
    color: #c7d2fe !important;
    border-color: rgba(165, 180, 252, .2);
}
[data-theme="dark"] .section-title::before { background: var(--secondary); }

/* Headline under section-title */
section h1, section h2, .container h1, .container h2,
.container-xxl h1, .container-xxl h2 {
    color: var(--primary);
    margin-bottom: 1.25rem;
}
[data-theme="dark"] section h1,
[data-theme="dark"] section h2,
[data-theme="dark"] .container-xxl h1,
[data-theme="dark"] .container-xxl h2,
[data-theme="dark"] .container h1,
[data-theme="dark"] .container h2 { color: #e8e9f0 !important; }

/* ----- Section spacing & alternation ----- */
section, .container-xxl { position: relative; }
.bg-light, [data-theme="dark"] .bg-light { background: var(--rgc-section-bg-2) !important; }

/* ----- Card / item tiles  —  defaults only; inline styles win ----- */
.card, .service-item, .feature-item {
    background: var(--rgc-section-bg-1);
    border: 1px solid var(--rgc-divider);
    border-radius: var(--rgc-radius);
    box-shadow: var(--rgc-shadow-card);
    transition: transform .25s cubic-bezier(.34,1.2,.64,1), box-shadow .25s ease, border-color .25s ease;
}
.card:hover, .service-item:hover, .feature-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--rgc-shadow-hover);
    border-color: rgba(31, 18, 144, .25);
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .service-item:hover,
[data-theme="dark"] .feature-item:hover { border-color: rgba(165, 180, 252, .35); }

/* .team-item already has inline brand background/border in markup — only add motion. */
.team-item {
    transition: transform .25s cubic-bezier(.34,1.2,.64,1), box-shadow .25s ease;
}
.team-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--rgc-shadow-hover);
}

/* Inline service-item button polish */
.service-item .btn-link {
    text-decoration: none;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap .2s ease;
}
.service-item .btn-link::after {
    content: '\2192'; transition: transform .2s ease;
}
.service-item:hover .btn-link::after { transform: translateX(3px); }

/* Affiliation tile */
.affiliation-tile {
    background: var(--rgc-section-bg-1);
    border: 1px solid var(--rgc-divider);
    border-radius: var(--rgc-radius);
    padding: 24px 16px;
    transition: all .25s ease;
}
.affiliation-tile:hover { transform: translateY(-3px); box-shadow: var(--rgc-shadow-hover); border-color: rgba(31,18,144,.25); }

/* ----- Tables (public site) ----- */
.public-table-wrap {
    border: 1px solid var(--rgc-divider);
    border-radius: var(--rgc-radius);
    overflow: hidden;
    box-shadow: var(--rgc-shadow-card);
    background: var(--rgc-section-bg-1);
}
.public-table-wrap > .table { margin-bottom: 0; }

.table {
    color: var(--rgc-text);
    border-color: var(--rgc-divider);
    --bs-table-bg: transparent;
    --bs-table-color: var(--rgc-text);
}
.table thead {
    background: var(--rgc-accent-soft);
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}
.table thead th {
    border-bottom: 1px solid var(--rgc-divider) !important;
    padding: 14px 16px;
    font-weight: 700;
    background: transparent;
}
.table tbody td {
    padding: 14px 16px;
    border-color: var(--rgc-divider) !important;
    color: var(--rgc-text);
    background: transparent;
}
.table tbody tr:nth-child(even) td { background: var(--rgc-section-bg-2); }
.table tbody tr:hover > * {
    --bs-table-bg-state: rgba(31,18,144,.06);
    color: var(--rgc-text);
}
[data-theme="dark"] .table tbody tr:hover > * { --bs-table-bg-state: rgba(165,180,252,.10); }
[data-theme="dark"] .table thead { color: #c7d2fe; }

/* ----- Forms (public) ----- */
.form-control, .form-select, textarea.form-control {
    background: var(--rgc-section-bg-1);
    border: 1px solid var(--rgc-divider);
    border-radius: var(--rgc-radius-sm);
    padding: 12px 14px;
    color: var(--rgc-text);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    font-size: 0.95rem;
}
.form-control::placeholder, textarea.form-control::placeholder { color: var(--rgc-text-muted); opacity: .85; }
.form-control:focus, .form-select:focus, textarea.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(31, 18, 144, .12);
    outline: none;
    background: var(--rgc-section-bg-1);
    color: var(--rgc-text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { box-shadow: 0 0 0 4px rgba(165, 180, 252, .18); }
.form-label { font-weight: 600; color: var(--rgc-text); margin-bottom: 6px; font-size: 0.875rem; }

/* "was-validated" reset — kill Bootstrap's icon-as-bg-image (green check / red x)
   so it can never tile across the field. Covers BOTH .form-control and .form-select.
   For .form-select we re-apply the chevron-only background. */
.was-validated .form-control:invalid,
.was-validated .form-control:valid,
.form-control.is-invalid,
.form-control.is-valid,
.was-validated .form-select:invalid,
.was-validated .form-select:valid,
.form-select.is-invalid,
.form-select.is-valid {
    background-image: none !important;
    background-repeat: no-repeat !important;
    padding-right: 14px !important;
}
.was-validated .form-select:valid,
.was-validated .form-select:invalid,
.form-select.is-valid,
.form-select.is-invalid,
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 10px !important;
    padding-right: 36px !important;
}
.was-validated .form-control:invalid,
.was-validated .form-select:invalid { border-color: var(--rgc-divider) !important; }
.was-validated .form-control:focus:invalid,
.was-validated .form-select:focus:invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .12) !important;
}

/* ----- Buttons ----- */
.btn { border-radius: var(--rgc-radius-sm); font-weight: 600; padding: 10px 22px; transition: all .2s ease; }
.btn-primary {
    background: var(--rgc-accent-grad);
    border: none;
    color: #fff;
    box-shadow: 0 1px 2px rgba(31, 18, 144, .25);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--rgc-accent-grad);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(31, 18, 144, .35);
    color: #fff;
}
.btn-outline-primary { color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color: #fff; }
.btn-light { background: var(--rgc-section-bg-2); color: var(--rgc-text); border-color: var(--rgc-divider); }
.btn-light:hover { background: var(--rgc-section-bg-1); color: var(--rgc-text); border-color: var(--primary); }

/* ----- Lists (rules / regulations / general content) ----- */
.content ul, .content ol,
section ul:not(.navbar-nav):not(.dropdown-menu),
section ol {
    padding-left: 1.4em;
}
section li { margin-bottom: 6px; }

/* ----- Navbar polish ----- */
.modern-navbar { padding: 0 !important; border-bottom: 1px solid transparent; }
.modern-navbar .navbar-brand img {
    transition: transform .25s ease, filter .25s ease;
    /* Hint to browsers to render with smooth interpolation rather than
       any nearest-neighbor / sharpening — keeps the feathered alpha
       smooth even when the image is scaled. */
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.modern-navbar .navbar-brand:hover img { transform: scale(1.04); }
/* Dark mode: gentle brightness lift so indigo logo elements stay
   readable against the dark navbar. */
[data-theme="dark"] .modern-navbar .navbar-brand img {
    filter: brightness(1.2) saturate(1.1);
}
.modern-navbar .nav-link {
    font-weight: 600;
    font-size: 0.92rem;
    padding: 26px 18px !important;
    position: relative;
    color: var(--rgc-text) !important;
}
.modern-navbar .nav-link::after {
    content: ""; position: absolute;
    left: 18px; right: 18px; bottom: 18px;
    height: 2px; background: var(--primary);
    transform: scaleX(0); transform-origin: left;
    transition: transform .2s ease;
}
.modern-navbar .nav-link:hover::after,
.modern-navbar .nav-link.active::after { transform: scaleX(1); }
.modern-navbar .dropdown-menu {
    border-radius: var(--rgc-radius-sm);
    border: 1px solid var(--rgc-divider);
    box-shadow: var(--rgc-shadow-card);
    padding: 6px;
}
.modern-navbar .dropdown-item {
    border-radius: 6px; padding: 8px 12px; font-size: 0.9rem; font-weight: 500;
}
.modern-navbar .dropdown-item:hover, .modern-navbar .dropdown-item.active {
    background: var(--rgc-accent-soft); color: var(--primary);
}
[data-theme="dark"] .modern-navbar .dropdown-item:hover,
[data-theme="dark"] .modern-navbar .dropdown-item.active { color: #c7d2fe; }

/* ----- Top info bar (above navbar) ----- */
.top-info-bar { padding: 8px 0; font-size: 0.85rem; border-bottom: 1px solid var(--rgc-divider); }
.top-info-bar a { color: var(--rgc-text); text-decoration: none; }
.top-info-bar a:hover { color: var(--primary); }
[data-theme="dark"] .top-info-bar a:hover { color: #c7d2fe; }

/* ----- Footer ----- */
footer, .container-xxl.bg-dark, .container-fluid.bg-dark {
    background: #11121f !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] footer { background: #0a0a14 !important; }
footer h4, footer h5 { color: #fff !important; margin-bottom: 14px; font-weight: 700; }
footer a { color: #cbd5e1 !important; text-decoration: none; transition: color .15s; }
footer a:hover { color: var(--secondary) !important; }
footer .btn-link { padding: 4px 0; font-weight: 500; }
footer .btn-link::before { content: '\203A'; margin-right: 8px; opacity: .6; }
footer hr, footer .copyright { border-color: rgba(255, 255, 255, .08); color: #94a3b8; }

/* ----- Page hero / page-title bar ----- */
.page-hero {
    position: relative;
    padding: 80px 0 60px;
    background: var(--rgc-accent-grad);
    color: #fff;
    overflow: hidden;
    margin-bottom: 60px;
}
.page-hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 50%),
        radial-gradient(circle at 80% 100%, rgba(199,224,0,.20), transparent 50%);
    pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff !important; font-size: 2.25rem; margin-bottom: 12px; }
.page-hero p, .page-hero .lead { color: rgba(255,255,255,.85); margin-bottom: 0; max-width: 720px; }
.page-hero .breadcrumb-trail {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.85rem; opacity: .85; margin-bottom: 12px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
    padding: 4px 12px; border-radius: 999px;
}
.page-hero .breadcrumb-trail a { color: #fff; text-decoration: none; }

/* ----- Form card wrapper (for admission, contact, etc.) ----- */
.form-card {
    background: var(--rgc-section-bg-1);
    border: 1px solid var(--rgc-divider);
    border-radius: var(--rgc-radius-lg);
    box-shadow: var(--rgc-shadow-card);
    padding: 36px;
    max-width: 880px;
    margin: 0 auto;
}
@media (max-width: 575.98px) {
    .form-card { padding: 22px; border-radius: var(--rgc-radius); }
}
.form-card .form-card-section + .form-card-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rgc-divider); }
.form-card .form-card-section-title {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--rgc-text-muted); font-weight: 700; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
}
.form-card .form-card-section-title i { color: var(--primary); }

/* ----- Misc utility tweaks ----- */
.bg-secondary, [class*="bg-secondary"] { color: #11121f !important; }
.lead { font-size: 1.05rem; color: var(--rgc-text-muted); }

img.gallery-image, .img-thumbnail { border: 1px solid var(--rgc-divider); border-radius: var(--rgc-radius-sm); }
[data-theme="dark"] img.gallery-image, [data-theme="dark"] .img-thumbnail { border-color: var(--rgc-divider); background: var(--rgc-section-bg-1); }

/* Scrollbar — same width in both modes so theme toggle doesn't shift layout */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--rgc-section-bg-2); }
::-webkit-scrollbar-thumb { background: rgba(99, 102, 134, .35); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 134, .6); background-clip: padding-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(165, 180, 252, .25); background-clip: padding-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(165, 180, 252, .45); background-clip: padding-box; }


/* Bootstrap form-floating — label punches through the border cleanly */
.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.5rem + 2px);
    padding: 1.625rem 0.875rem 0.625rem;
}
.form-floating > textarea.form-control { height: 150px; padding-top: 1.625rem; }
.form-floating > label {
    padding: 1rem 0.875rem;
    color: var(--rgc-text-muted);
    border: none;
}
/* Hide Bootstrap's default ::after pseudo (we provide our own background on the label). */
.form-floating > label::after { display: none !important; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label,
.form-floating > .form-control-plaintext ~ label {
    color: var(--primary);
    transform: scale(.82) translateY(-1.05rem) translateX(.4rem);
    background-color: var(--rgc-section-bg-1);
    padding: 2px 8px;
    height: auto;
    line-height: 1;
    border-radius: 6px;
    box-shadow: 0 0 0 4px var(--rgc-section-bg-1);
    z-index: 3;
}
[data-theme="dark"] .form-floating > .form-control:focus ~ label,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-theme="dark"] .form-floating > .form-select ~ label {
    color: #c7d2fe;
    background-color: var(--rgc-section-bg-1);
    box-shadow: 0 0 0 4px var(--rgc-section-bg-1);
}
/* Keep placeholder transparent inside floating labels (the dark-mode
   .form-control::placeholder rule above otherwise shows it through the label).
   These MUST be split into separate rules — grouping vendor-prefixed
   pseudo-elements with commas invalidates the whole rule in browsers that
   don't recognize one of the selectors. */
.form-floating > .form-control::placeholder { color: transparent !important; opacity: 1 !important; }
.form-floating > .form-control::-webkit-input-placeholder { color: transparent !important; opacity: 1 !important; }
.form-floating > .form-control::-moz-placeholder { color: transparent !important; opacity: 1 !important; }
.form-floating > .form-control:-ms-input-placeholder { color: transparent !important; opacity: 1 !important; }
[data-theme="dark"] .form-floating > .form-control::placeholder { color: transparent !important; opacity: 1 !important; }
[data-theme="dark"] .form-floating > .form-control::-webkit-input-placeholder { color: transparent !important; opacity: 1 !important; }
[data-theme="dark"] .form-floating > .form-control::-moz-placeholder { color: transparent !important; opacity: 1 !important; }
[data-theme="dark"] .form-floating > .form-control:-ms-input-placeholder { color: transparent !important; opacity: 1 !important; }
/* textarea variants — same logic */
.form-floating > textarea.form-control::placeholder { color: transparent !important; opacity: 1 !important; }
.form-floating > textarea.form-control::-webkit-input-placeholder { color: transparent !important; opacity: 1 !important; }
.form-floating > textarea.form-control::-moz-placeholder { color: transparent !important; opacity: 1 !important; }
[data-theme="dark"] .form-floating > textarea.form-control::placeholder { color: transparent !important; opacity: 1 !important; }
[data-theme="dark"] .form-floating > textarea.form-control::-webkit-input-placeholder { color: transparent !important; opacity: 1 !important; }
[data-theme="dark"] .form-floating > textarea.form-control::-moz-placeholder { color: transparent !important; opacity: 1 !important; }


/* ============================================================
   Site UI v3.1  —  bug-fix patch
   • Dark mode for .footer (div, not <footer>)
   • Dark mode for courses page custom classes
   • More institutional button styling
   • Misc inline-style overrides that were missed
   ============================================================ */

/* ----- Footer (the site uses <div class="footer">) ----- */
.footer {
    background: #11121f !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .footer { background: #0a0a14 !important; }
.footer h4, .footer h5 { color: #fff !important; margin-bottom: 14px; font-weight: 700; }
.footer .btn-link, .footer a { color: #cbd5e1 !important; text-decoration: none; }
.footer .btn-link:hover, .footer a:hover { color: var(--secondary) !important; }
.footer .btn-link { padding: 4px 0; font-weight: 500; display: inline-flex; }
.footer .btn-link::before { content: '\203A'; margin-right: 8px; opacity: .6; }
.footer .btn-social {
    width: 40px; height: 40px;
    border-radius: 50%;
    border-color: rgba(255, 255, 255, .25) !important;
    color: rgba(255, 255, 255, .85) !important;
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: 8px;
    transition: all .2s ease;
}
.footer .btn-social:hover {
    background: var(--secondary) !important;
    color: #11121f !important;
    border-color: var(--secondary) !important;
    transform: translateY(-2px);
}
.footer .copyright {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 22px; margin-top: 22px;
    color: #94a3b8 !important;
    font-size: 0.875rem;
}
.footer .copyright a { color: #cbd5e1 !important; }
.footer .footer-menu a { padding: 0 12px; }
.footer .footer-menu a:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .15); }

/* ----- Courses component dark mode ----- */
[data-theme="dark"] .course-tab {
    background: var(--rgc-section-bg-1);
    border-color: var(--rgc-divider);
    color: var(--rgc-text);
}
[data-theme="dark"] .course-tab:hover { border-color: var(--secondary); box-shadow: 0 8px 22px rgba(0,0,0,.45); }
[data-theme="dark"] .course-tab__roman,
[data-theme="dark"] .course-tab__label,
[data-theme="dark"] .course-tab__meta { color: #c7d2fe; }
[data-theme="dark"] .course-tab.active {
    background: var(--secondary);
    border-color: var(--secondary);
}
[data-theme="dark"] .course-tab.active .course-tab__roman { color: var(--primary); }
[data-theme="dark"] .course-tab.active .course-tab__label,
[data-theme="dark"] .course-tab.active .course-tab__meta { color: rgba(17, 18, 31, .85); }

[data-theme="dark"] .course-panel {
    background: var(--rgc-section-bg-1);
    border-color: var(--rgc-divider);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .course-panel__head { border-bottom-color: var(--rgc-divider); }
[data-theme="dark"] .course-panel__title { color: #c7d2fe; }
[data-theme="dark"] .course-panel__stat {
    background: rgba(199, 210, 254, 0.08);
    color: #c7d2fe;
}

[data-theme="dark"] .subject-card {
    background: var(--rgc-section-bg-2);
    border-color: var(--rgc-divider);
}
[data-theme="dark"] .subject-card:hover {
    background: var(--rgc-section-bg-1);
    border-color: var(--secondary);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .subject-card__num {
    background: linear-gradient(135deg, var(--secondary), #c5e84a);
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .subject-card__label,
[data-theme="dark"] .subject-card__title { color: #c7d2fe; }
[data-theme="dark"] .subject-card__marks {
    background: rgba(199, 210, 254, 0.10);
    color: #c7d2fe;
}
[data-theme="dark"] .subject-card__marks::before { background: #c7d2fe; }
[data-theme="dark"] .subject-card:hover .subject-card__marks {
    background: var(--secondary);
    color: var(--primary);
}
[data-theme="dark"] .subject-card:hover .subject-card__marks::before { background: var(--primary); }

/* ----- Section background overrides for sections that use bg-white inline ----- */
[data-theme="dark"] .top-info-bar { background: var(--rgc-section-bg-2) !important; border-bottom: 1px solid var(--rgc-divider); }
[data-theme="dark"] .modern-navbar.bg-white { background: var(--rgc-section-bg-1) !important; }

/* ----- More institutional button styling (drop heavy gradients) ----- */
.btn { border-radius: 8px; font-weight: 600; padding: 10px 22px; transition: all .18s ease; letter-spacing: 0.01em; }
.btn-primary {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(31, 18, 144, .15);
}
.btn-primary:hover, .btn-primary:focus {
    background: #2a1b9a;
    border-color: #2a1b9a;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(31, 18, 144, .28);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
    color: var(--primary);
    border: 1.5px solid var(--primary);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(31, 18, 144, .25);
}

.btn-secondary {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #11121f;
}
.btn-secondary:hover {
    background: #b3d836;
    border-color: #b3d836;
    color: #11121f;
}

/* Carry the gentle lift + arrow nudge that .modern-btn used to add,
   onto plain .btn-primary buttons. */
.btn-primary .fa, .btn-primary i { transition: transform .15s ease; }
.btn-primary:hover .fa, .btn-primary:hover i { transform: translateX(3px); }

[data-theme="dark"] .btn-primary {
    background: #4a3cdc !important;
    border-color: #4a3cdc !important;
}
[data-theme="dark"] .btn-primary:hover {
    background: #6c5ce7 !important;
    border-color: #6c5ce7 !important;
}
[data-theme="dark"] .btn-outline-primary { color: #c7d2fe; border-color: #6c5ce7; }
[data-theme="dark"] .btn-outline-primary:hover { background: #6c5ce7; color: #fff; }

/* ----- iframe (Google Maps) gets a dark border in dark mode but won't truly darken
         the embed itself — that's a Google iframe limitation. ----- */
[data-theme="dark"] iframe { border-radius: 12px; border: 1px solid var(--rgc-divider); }


/* ----- Owl carousel nav buttons in both modes ----- */
.owl-nav button {
    background: rgba(255, 255, 255, .9) !important;
    color: var(--primary) !important;
    border: 1px solid var(--rgc-divider) !important;
}
[data-theme="dark"] .owl-nav button {
    background: rgba(22, 22, 42, .9) !important;
    color: #c7d2fe !important;
    border-color: var(--rgc-divider) !important;
}



/* ============================================================
   Site UI v3.2  —  institutional polish
   Cleaner section titles, calmer hover motion, refined hero,
   stronger typography hierarchy.
   ============================================================ */

/* ----- Calmer card hover (institutional, not springy) ----- */
.card:hover, .service-item:hover, .feature-item:hover, .team-item:hover, .affiliation-tile:hover {
    transform: translateY(-3px);
    transition-timing-function: ease-out;
}

/* ----- Section title — calm, institutional, less "pill-y" ----- */
.section-title {
    background: transparent !important;
    color: var(--primary) !important;
    padding: 4px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 14px !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: none;
}
.section-title::before {
    content: "";
    width: 32px; height: 2px; border-radius: 2px;
    background: var(--secondary);
    box-shadow: none;
}
[data-theme="dark"] .section-title { color: #c7d2fe !important; }
[data-theme="dark"] .section-title::before { background: var(--secondary); }

/* Headlines under section titles */
section h1, section h2, .container-xxl h1, .container-xxl h2,
.container > .text-center h1, .container > .text-center h2 {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    margin-bottom: 1rem !important;
    font-weight: 800;
    color: var(--primary) !important;
    line-height: 1.18;
}
[data-theme="dark"] section h1,
[data-theme="dark"] section h2,
[data-theme="dark"] .container-xxl h1,
[data-theme="dark"] .container-xxl h2,
[data-theme="dark"] .container > .text-center h1,
[data-theme="dark"] .container > .text-center h2 { color: #e8e9f0 !important; }

/* ----- Service items — stronger institutional feel ----- */
.service-item {
    text-align: center;
    padding: 32px 24px !important;
    height: 100%;
}
.service-item .fa, .service-item i.fa, .service-item i.bi {
    width: 70px; height: 70px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rgc-accent-soft) !important;
    color: var(--primary) !important;
    margin-bottom: 20px !important;
    font-size: 1.8rem !important;
    transition: transform .25s ease, background .25s ease;
}
.service-item:hover .fa, .service-item:hover i.fa, .service-item:hover i.bi {
    transform: scale(1.06) rotate(-4deg);
    background: var(--primary) !important;
    color: #fff !important;
}
.service-item h5 {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin-bottom: 12px !important;
}
[data-theme="dark"] .service-item h5 { color: #e8e9f0 !important; }
.service-item p {
    color: var(--rgc-text-muted);
    font-size: 0.92rem;
    margin-bottom: 14px;
    line-height: 1.55;
}

/* ----- Affiliation tiles ----- */
.affiliation-tile h6, [class*="affiliation"] h6 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--rgc-text);
    margin-top: 8px;
}
[data-theme="dark"] [class*="affiliation"] h6 { color: var(--rgc-text) !important; }

/* ----- Features section icon polish ----- */
.feature-item, [class*="feature"] .col i.fa-3x, .text-center i.fa-3x {
    color: var(--primary);
}
[data-theme="dark"] .feature-item, [data-theme="dark"] .text-center i.fa-3x { color: #c7d2fe !important; }

/* ----- Faculty (.team-item) text in dark mode ----- */
.team-item h5, .team-item p { color: #fff; }
.team-item h6 { color: var(--secondary); }
[data-theme="dark"] .team-item h5, [data-theme="dark"] .team-item p { color: #fff !important; }

/* ----- News ticker bar — refined ----- */
.top-info-bar {
    background: var(--primary) !important;
    color: #fff !important;
    padding: 10px 0 !important;
    border-bottom: none !important;
}
.top-info-bar a, .top-info-bar a:visited { color: #fff !important; }
.top-info-bar a:hover { color: var(--secondary) !important; }
.top-info-bar i { color: var(--secondary); }
[data-theme="dark"] .top-info-bar { background: #0a0a14 !important; border-bottom: 1px solid var(--rgc-divider); }
.news-ticker-content a { color: #fff !important; }
.news-ticker-content a:hover { color: var(--secondary) !important; }

/* ----- Spacing rhythm: tighten section padding ----- */
section, .container-xxl[class*="py-"] { padding-top: 64px; padding-bottom: 64px; }
@media (max-width: 768px) {
    section, .container-xxl[class*="py-"] { padding-top: 48px; padding-bottom: 48px; }
}

/* ----- Lead paragraphs ----- */
.lead, p.fs-5 {
    font-size: 1.05rem !important;
    line-height: 1.65;
    color: var(--rgc-text-muted) !important;
    max-width: 720px;
}
.text-center .lead, .text-center p.fs-5 { margin-left: auto; margin-right: auto; }

/* ----- Apply Now CTA in navbar (more refined) ----- */
.modern-navbar .btn-primary {
    margin: 8px 16px 8px 8px;
    padding: 9px 20px !important;
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    border-radius: 8px;
    white-space: nowrap;
}



/* ============================================================
   Site UI v3.3  —  footer cleanup + animation hygiene
   • Predictable footer text colors at every breakpoint, no fights
     with Bootstrap text-white / text-light utilities.
   • No transition properties on elements WOW.js animates.
   ============================================================ */

/* Footer — set color on every text element explicitly so Bootstrap
   utilities (.text-light, .text-white, etc.) can't bleed through. */
.footer { color: #cbd5e1 !important; }
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
    color: #ffffff !important;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}
.footer p, .footer span, .footer li, .footer div { color: #cbd5e1 !important; }
.footer p { margin-bottom: 10px; line-height: 1.6; }
.footer i.fa, .footer i.fab, .footer i.fas, .footer i.bi { color: var(--secondary) !important; }
.footer a, .footer .btn-link {
    color: #cbd5e1 !important;
    text-decoration: none;
}
.footer a:hover, .footer .btn-link:hover { color: var(--secondary) !important; }
.footer .btn-link {
    display: block;
    padding: 4px 0;
    font-weight: 500;
    font-size: 0.92rem;
    text-align: left;
}
.footer .btn-link::before {
    content: '\203A';
    margin-right: 10px;
    color: var(--secondary);
    font-weight: 700;
}
.footer .text-white { color: #ffffff !important; }
.footer .text-light { color: #cbd5e1 !important; }
.footer .border-bottom { border-bottom: 1px solid rgba(255, 255, 255, .25) !important; }

/* Footer copyright + footer menu */
.footer .copyright > .row {
    padding: 0 12px;
}
.footer .footer-menu a { padding: 0 12px; font-size: 0.875rem; }
.footer .footer-menu a:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .15); }

/* Animation hygiene: don't add property transitions to elements that WOW.js will animate.
   Otherwise the wow keyframe (transform/opacity) gets a competing 0.25s transition
   on transform and looks janky. Hover transitions still apply on non-wow / settled state. */
.wow { transition: none !important; }
.wow.animated { /* once revealed, allow transitions again */
    transition: transform .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out !important;
}

/* Disable owl-carousel/PhotoSwipe image hover transition while wow animation runs */
.gallery-photoswipe a img,
.gallery-image {
    transition: transform .35s ease, filter .35s ease;
}
.wow:not(.animated) .gallery-photoswipe a img,
.wow:not(.animated) .gallery-image { transition: none; }



/* ============================================================
   Site UI v3.4  —  gallery / dropdown / toggle / scrollbar fixes
   ============================================================ */

/* Dropdown hover — strong contrast in both modes */
.modern-navbar .dropdown-menu {
    background: var(--rgc-section-bg-1);
    border: 1px solid var(--rgc-divider);
    border-top: 3px solid var(--secondary);
    border-radius: 8px;
    box-shadow: var(--rgc-shadow-md);
    padding: 6px;
}
.modern-navbar .dropdown-item {
    color: var(--rgc-text);
    font-weight: 500;
    border-radius: 6px;
    padding: 9px 12px;
    transition: all .15s ease;
}
.modern-navbar .dropdown-item:hover,
.modern-navbar .dropdown-item.active,
.modern-navbar .dropdown-item:focus {
    background: var(--primary) !important;
    color: #fff !important;
    padding-left: 14px !important;
}
[data-theme="dark"] .modern-navbar .dropdown-menu { background: var(--rgc-section-bg-2); }
[data-theme="dark"] .modern-navbar .dropdown-item { color: var(--rgc-text); }
[data-theme="dark"] .modern-navbar .dropdown-item:hover,
[data-theme="dark"] .modern-navbar .dropdown-item.active,
[data-theme="dark"] .modern-navbar .dropdown-item:focus {
    background: #6c5ce7 !important;
    color: #fff !important;
}

/* Theme toggle (now lives in the top-info-bar) */
.top-info-bar .theme-toggle {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    width: 32px; height: 32px;
    margin-left: 12px;
    margin-right: 0;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
    flex-shrink: 0;
}
.top-info-bar .theme-toggle:hover {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.top-info-bar .theme-toggle:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}
.top-info-bar .theme-toggle .bi-sun-fill,
.top-info-bar .theme-toggle .bi-moon-stars { font-size: 0.95rem; }
[data-theme="dark"] .top-info-bar .theme-toggle:hover {
    background: rgba(251, 191, 36, .18);
    border-color: rgba(251, 191, 36, .65);
    color: #fbbf24;
}

/* ============================================================
   Site UI v3.5  —  major redesign pass
   • Hero carousel: bigger headlines, modern centered controls
   • Top info bar: cleaner layout, refined NEWS pill
   • Service cards: compact horizontal layout
   • Faculty cards: modern overlay style, less aggressive border
   • Rules / inline-indigo blocks: lighter, scannable, readable
   ============================================================ */

/* ----- TOP INFO BAR ----- */
.top-info-bar {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary2, #6567A9) 100%) !important;
    color: #fff !important;
    padding: 9px 0 !important;
    font-size: 0.86rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
.top-info-bar .container > .row { align-items: center; }
.top-info-bar a { color: #fff !important; }
.top-info-bar a:hover { color: var(--secondary) !important; }
.top-info-bar i { color: var(--secondary); }
.top-info-bar .news-ticker { gap: 10px; }
.news-badge {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%) !important;
    color: #fff !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.news-badge::before {
    width: 5px; height: 5px;
    background: #fff;
    margin-right: 5px;
    box-shadow: 0 0 6px rgba(255, 255, 255, .8);
}
/* size override only — visuals/hover handled by the canonical block above */
.top-info-bar .theme-toggle {
    width: 32px; height: 32px;
    border-radius: 999px;
}

/* ----- SERVICE CARDS (Courses / Eligibility / Admission / Faculty) ----- */
.service-item {
    text-align: left !important;
    padding: 26px !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
    background: #fff !important;
    border: 1px solid #e6e9f0 !important;
    will-change: transform;
    transition: transform .2s ease, box-shadow .2s ease !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}
[data-theme="dark"] .service-item {
    background: var(--rgc-section-bg-1) !important;
    border-color: var(--rgc-divider) !important;
}
.service-item > div, .service-item .p-4 { padding: 0 !important; }

/* Icon tile */
.service-item .fa, .service-item i.fa, .service-item i.bi {
    width: 48px !important; height: 48px !important;
    border-radius: 12px !important;
    font-size: 1.3rem !important;
    margin-bottom: 18px !important;
    background: var(--rgc-accent-soft) !important;
    color: var(--primary) !important;
    transition: background-color .2s ease, color .2s ease !important;
    transform: none !important;
}
[data-theme="dark"] .service-item .fa,
[data-theme="dark"] .service-item i.bi {
    background: rgba(108, 92, 231, .15) !important;
    color: #c7d2fe !important;
}

/* Hover — clean lift, no border flicker, no text re-paint */
.service-item:hover {
    transform: translate3d(0, -4px, 0) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .08), 0 4px 10px rgba(15, 23, 42, .04) !important;
    border-color: #e6e9f0 !important; /* keep border same color so it doesn't repaint */
}
[data-theme="dark"] .service-item:hover {
    border-color: var(--rgc-divider) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .25) !important;
}
.service-item:hover .fa,
.service-item:hover i.fa,
.service-item:hover i.bi {
    background: var(--primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .service-item:hover .fa,
[data-theme="dark"] .service-item:hover i.bi {
    background: #6c5ce7 !important;
    color: #fff !important;
}

/* Typography */
.service-item h5 {
    font-size: 0.98rem !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.04em;
    color: var(--primary) !important;
    transition: none !important;
}
[data-theme="dark"] .service-item h5 { color: #e8e9f0 !important; }
.service-item p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
    color: var(--rgc-text-muted) !important;
    transition: none !important;
}
.service-item .btn-link {
    padding: 0 !important;
    color: var(--primary) !important;
    font-weight: 600;
    font-size: 0.85rem;
    transition: none !important;
}
[data-theme="dark"] .service-item .btn-link { color: #c7d2fe !important; }

/* Disable WOW transition pause (introduced in v3.3) on service items so icon hover
   isn't blocked the first time after entry. */
.service-item.wow.animated { transition: transform .2s ease, box-shadow .2s ease !important; }

/* ----- FACULTY / LEADERSHIP CARDS (.team-item) ----- */
.team-item {
    background: var(--primary) !important;
    border: 2px solid var(--secondary) !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
}
/* Image wrapper — flex-grow so it fills any vertical slack from h-100,
   eliminating the white gap between image and the text band. */
.team-item > div:first-child {
    flex: 1 1 auto !important;
    min-height: 300px;
    overflow: hidden;
    position: relative;
}
.team-item > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    transition: transform .35s ease;
}
.team-item:hover > div:first-child img { transform: scale(1.04); }
.team-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(31, 18, 144, .22), 0 8px 16px rgba(15, 23, 42, .08);
}
.team-item > div:first-child::after { display: none; }
/* Text block — last child div, regardless of .p-3 vs .p-4 padding class */
.team-item > div:last-child,
.team-item .p-3, .team-item > .p-3,
.team-item .p-4, .team-item > .p-4 {
    background: var(--primary) !important;
    color: #fff !important;
    padding: 20px 22px !important;
    text-align: left !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.team-item > div:last-child h5,
.team-item h5,
.team-item .text-white {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    color: #fff !important;
    text-align: left !important;
}
.team-item > div:last-child small,
.team-item small {
    color: var(--secondary) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem !important;
    display: inline-block;
    margin-bottom: 6px;
}
.team-item > div:last-child h6,
.team-item h6 {
    font-size: 0.78rem !important;
    color: var(--secondary) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px !important;
}
.team-item > div:last-child p,
.team-item p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, .82) !important;
    margin-bottom: 0 !important;
}
[data-theme="dark"] .team-item {
    background: var(--primary) !important;
    border-color: var(--secondary) !important;
}

/* ----- PAGE INTRO HEADERS ----- */
section > .text-center.mt-5 h1,
section > .text-center.mt-4 h1,
.text-center.wow.fadeInUp h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    margin-bottom: 1rem !important;
}
[data-theme="dark"] section > .text-center.mt-5 h1,
[data-theme="dark"] section > .text-center.mt-4 h1,
[data-theme="dark"] .text-center.wow.fadeInUp h1 { color: #e8e9f0 !important; }

/* ============================================================
   HERO SPLIT  —  two-column hero (text left, image carousel right)
   Replaces the full-bleed overlay carousel.
   ============================================================ */
.hero-split {
    padding: 72px 0 64px;
    background: var(--rgc-section-bg-1, #fff);
}
@media (min-width: 992px) {
    .hero-split { padding: 96px 0 88px; }
}
[data-theme="dark"] .hero-split { background: var(--rgc-section-bg-1); }

.hero-split__text { padding-right: 8px; }
.hero-split__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
.hero-split__eyebrow::before {
    content: '';
    width: 36px;
    height: 2px;
    background: var(--secondary);
    border-radius: 2px;
}
[data-theme="dark"] .hero-split__eyebrow { color: #c7d2fe; }
.hero-split__title {
    font-family: 'Nunito', 'Poppins', sans-serif;
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 800;
    color: var(--primary);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.hero-split__title .accent { color: var(--secondary); }
[data-theme="dark"] .hero-split__title { color: #e8e9f0; }
.hero-split__lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--rgc-text-muted);
    max-width: 560px;
    margin-bottom: 28px;
}
.hero-split__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    margin-bottom: 36px;
}
.hero-split__cta .modern-btn {
    padding: 14px 32px;
    font-size: 0.95rem;
    font-weight: 700;
}
.hero-split__link {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .15s ease, color .2s ease;
}
.hero-split__link i { transition: transform .2s ease; }
.hero-split__link:hover { color: var(--primary); gap: 12px; }
.hero-split__link:hover i { transform: translateX(2px); }
[data-theme="dark"] .hero-split__link { color: #c7d2fe; }

/* Feature row (homepage) */
.hero-split__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    border-top: 1px solid var(--rgc-divider);
    padding-top: 24px;
}
.hero-split__features li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hero-split__feature-num {
    font-family: 'Nunito', 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}
[data-theme="dark"] .hero-split__feature-num { color: #c7d2fe; }
.hero-split__feature-label {
    font-size: 0.8rem;
    color: var(--rgc-text-muted);
    line-height: 1.35;
}

/* Contact list (campus pages) */
.hero-split__contact {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hero-split__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--rgc-text);
    font-size: 0.95rem;
    line-height: 1.5;
}
.hero-split__contact li i {
    color: var(--primary);
    font-size: 1rem;
    margin-top: 3px;
    flex-shrink: 0;
}
.hero-split__contact a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--rgc-divider);
}
.hero-split__contact a:hover { color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .hero-split__contact li i { color: #c7d2fe; }

/* Image column: rounded clipping on .owl-stage-outer so .owl-nav (its
   sibling) renders BELOW the image unclipped. Uses a fresh .hero-carousel
   class to avoid every legacy .header-carousel !important rule. */
.hero-split__media .hero-carousel {
    overflow: visible;
    background: transparent;
}
.hero-split__media .hero-carousel .owl-stage-outer {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .06);
}
[data-theme="dark"] .hero-split__media .hero-carousel .owl-stage-outer {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .3);
}
.hero-split__media .hero-slide {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0d1230;
}
.hero-split__media .hero-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-split__media .hero-slide::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 90px;
    background: linear-gradient(to top, rgba(0, 0, 0, .22), transparent);
    pointer-events: none;
}

/* Owl nav rendered statically as a sibling of .owl-stage-outer, so it
   sits BELOW the image card. */
.hero-split__media .hero-carousel .owl-nav {
    position: static;
    transform: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding: 0 4px;
}
body .hero-split__media .hero-carousel .owl-nav .owl-prev,
body .hero-split__media .hero-carousel .owl-nav .owl-next,
body .hero-split__media .hero-carousel .owl-nav button.owl-prev,
body .hero-split__media .hero-carousel .owl-nav button.owl-next {
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 14px rgba(31, 18, 144, .28), 0 1px 2px rgba(15, 23, 42, .08) !important;
    transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
    opacity: 1 !important;
}
body .hero-split__media .hero-carousel .owl-nav .owl-prev i,
body .hero-split__media .hero-carousel .owl-nav .owl-next i,
body .hero-split__media .hero-carousel .owl-nav .owl-prev > *,
body .hero-split__media .hero-carousel .owl-nav .owl-next > * {
    color: #fff !important;
    line-height: 1 !important;
    font-size: 18px !important;
}
body .hero-split__media .hero-carousel .owl-nav .owl-prev:hover,
body .hero-split__media .hero-carousel .owl-nav .owl-next:hover {
    background: #2a1eb8 !important;
    background-color: #2a1eb8 !important;
    border-color: #2a1eb8 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(31, 18, 144, .38), 0 2px 4px rgba(15, 23, 42, .1) !important;
}
body .hero-split__media .hero-carousel .owl-nav .owl-prev:focus-visible,
body .hero-split__media .hero-carousel .owl-nav .owl-next:focus-visible {
    outline: 3px solid rgba(31, 18, 144, .35) !important;
    outline-offset: 2px;
}
[data-theme="dark"] body .hero-split__media .hero-carousel .owl-nav .owl-prev,
[data-theme="dark"] body .hero-split__media .hero-carousel .owl-nav .owl-next {
    background: #6c5ce7 !important;
    background-color: #6c5ce7 !important;
    border-color: #6c5ce7 !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(108, 92, 231, .4), 0 1px 2px rgba(0, 0, 0, .35) !important;
}
[data-theme="dark"] body .hero-split__media .hero-carousel .owl-nav .owl-prev:hover,
[data-theme="dark"] body .hero-split__media .hero-carousel .owl-nav .owl-next:hover {
    background: #8b7cf0 !important;
    background-color: #8b7cf0 !important;
    border-color: #8b7cf0 !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(108, 92, 231, .55), 0 2px 4px rgba(0, 0, 0, .4) !important;
}
[data-theme="dark"] body .hero-split__media .hero-carousel .owl-nav .owl-prev:focus-visible,
[data-theme="dark"] body .hero-split__media .hero-carousel .owl-nav .owl-next:focus-visible {
    outline: 3px solid rgba(108, 92, 231, .45) !important;
}

@media (max-width: 991.98px) {
    .hero-split__text { padding-right: 0; }
    .hero-split__media .hero-slide { aspect-ratio: 16 / 10; }
}
@media (max-width: 575.98px) {
    .hero-split { padding: 48px 0 40px; }
    .hero-split__media .hero-slide { aspect-ratio: 4 / 3; }
    .hero-split__features { gap: 12px; padding-top: 18px; }
    .hero-split__feature-num { font-size: 1.25rem; }
    .hero-split__feature-label { font-size: 0.72rem; }
    body .hero-split__media .hero-carousel .owl-nav .owl-prev,
    body .hero-split__media .hero-carousel .owl-nav .owl-next { width: 40px !important; height: 40px !important; font-size: 16px !important; }
}

/* ============================================================
   MISSION & VALUES PAGE  +  DARK-MODE PATCHES
   ============================================================ */

/* Light-mode polish on the values cards: make the heading explicitly navy
   so it never falls back to a faint default. */
.value-item {
    color: var(--primary);
    font-weight: 700;
}
[data-theme="dark"] .value-item { color: #c7d2fe; }

/* ----- VALUE CARDS (mission-and-values.php) — class-based so dark mode +
   hover work without inline-style/JS substring matching. ----- */
.value-card {
    background: #fff;
    border: 1px solid var(--rgc-divider);
    border-top: 4px solid var(--primary);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
}
.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(31, 18, 144, .14);
    border-top-color: var(--secondary);
}
.value-card .value-item { font-size: 1.25rem; margin-bottom: 12px; }
.value-card__body {
    color: var(--rgc-text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
}
[data-theme="dark"] .value-card {
    background: var(--rgc-section-bg-1);
    border-color: var(--rgc-divider);
    border-top-color: var(--primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .value-card:hover {
    border-top-color: var(--secondary);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .value-card .value-item { color: #c7d2fe; }
[data-theme="dark"] .value-card__body { color: var(--rgc-text); }

/* ----- ABOUT-US FEATURE PILLS (mission-and-values.php) ----- */
.about-pill {
    background: #fff;
    border: 1px solid var(--rgc-divider);
    border-left: 4px solid var(--primary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    cursor: pointer;
    transition: transform .2s ease, border-left-color .2s ease, box-shadow .2s ease;
    color: var(--primary);
    font-weight: 500;
}
.about-pill:hover {
    transform: translateX(5px);
    border-left-color: var(--secondary);
    box-shadow: 0 8px 20px rgba(31, 18, 144, .14);
}
.about-pill i { color: var(--primary); }
[data-theme="dark"] .about-pill {
    background: var(--rgc-section-bg-1);
    border-color: var(--rgc-divider);
    color: #c7d2fe;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .about-pill i,
[data-theme="dark"] .about-pill span { color: #c7d2fe !important; }


/* ============================================================
   Site UI v4  —  Campus cards refresh, gallery grid + PhotoSwipe
   ============================================================ */

/* ----- Campus cards (home: "In 3 Major Cities") ----- */
.campus-card {
    background: var(--rgc-section-bg-1);
    border: 1px solid var(--rgc-divider);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.34, 1.2, .64, 1),
                box-shadow .3s ease,
                border-color .3s ease;
    position: relative;
    isolation: isolate;
}
.campus-card:hover {
    transform: translateY(-6px);
    border-color: rgba(31, 18, 144, .25);
    box-shadow: 0 18px 40px rgba(31, 18, 144, .12), 0 6px 16px rgba(15, 23, 42, .08);
}
.campus-card .campus-card__media {
    position: relative;
    background: linear-gradient(135deg, #f4f5fa 0%, #eaecf6 100%);
    padding: 18px 18px 14px;
    overflow: hidden;
}
.campus-card .campus-card__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(31, 18, 144, .08), transparent 55%),
        radial-gradient(120% 80% at 0% 100%, rgba(199, 224, 0, .12), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.campus-card .card-img-top,
.campus-card .campus-card__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    transition: transform .45s cubic-bezier(.34, 1.2, .64, 1);
    /* The source PNGs include a white inner mat behind the colored frame.
       Multiply lets that white drop into the soft tinted background so the
       edges no longer fight the card surface — works in light mode. */
    mix-blend-mode: multiply;
    background: transparent;
}
.campus-card:hover .card-img-top,
.campus-card:hover .campus-card__media img {
    transform: scale(1.025);
}
.campus-card .card-body {
    padding: 22px 24px 26px !important;
    position: relative;
    z-index: 1;
}
.campus-card .card-body h5 {
    color: var(--primary);
    font-size: 1.15rem;
    margin-bottom: 8px;
    line-height: 1.3;
}
.campus-card .card-body p { font-size: 0.92rem; line-height: 1.55; }
.campus-card .card-body p:first-of-type {
    color: var(--primary) !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(31, 18, 144, .06);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    margin-bottom: 10px !important;
}
.campus-card .card-body p:first-of-type::before {
    content: '\F3E7'; /* bi-geo-alt-fill */
    font-family: "bootstrap-icons";
    font-size: 0.78rem;
}

/* Dark mode: kill mix-blend-mode (would render as black on dark surface).
   Instead, give the image area a soft light "frame" tile so the bundled
   white border in the source PNG visually merges with it. */
[data-theme="dark"] .campus-card {
    background: var(--rgc-section-bg-1);
    border-color: var(--rgc-divider);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .campus-card:hover {
    border-color: rgba(165, 180, 252, .35);
    box-shadow: 0 18px 40px rgba(108, 92, 231, .25), 0 6px 16px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .campus-card .campus-card__media {
    background: linear-gradient(135deg, #f1f2f7 0%, #e2e6f1 100%);
}
[data-theme="dark"] .campus-card .card-img-top,
[data-theme="dark"] .campus-card .campus-card__media img {
    mix-blend-mode: normal;
}
[data-theme="dark"] .campus-card .card-body h5 { color: #e8e9f0; }
[data-theme="dark"] .campus-card .card-body p:first-of-type {
    background: rgba(165, 180, 252, .12);
    color: #c7d2fe !important;
}


/* ----- Gallery grid (replaces owl-carousel on /pages/gallery.php) ----- */
.gallery-section {
    padding: 24px 0 80px;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}
.gallery-grid > a {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: var(--rgc-section-bg-2);
    border: 1px solid var(--rgc-divider);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 16px rgba(15, 23, 42, .06);
    cursor: zoom-in;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gallery-grid > a:hover {
    transform: translateY(-3px);
    border-color: rgba(31, 18, 144, .35);
    box-shadow: 0 14px 32px rgba(31, 18, 144, .15), 0 4px 12px rgba(15, 23, 42, .08);
}
.gallery-grid > a img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.34, 1.2, .64, 1), filter .35s ease;
}
.gallery-grid > a:hover img {
    transform: scale(1.06);
    filter: brightness(.85) saturate(1.05);
}
.gallery-grid > a::after {
    content: '\F52A'; /* bi-zoom-in */
    font-family: "bootstrap-icons";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(31, 18, 144, .15), rgba(31, 18, 144, .55));
    opacity: 0;
    transition: opacity .25s ease;
    font-size: 1.6rem;
    border-radius: inherit;
}
.gallery-grid > a:hover::after { opacity: 1; }

/* Featured first tile spans 2x on wider viewports */
@media (min-width: 992px) {
    .gallery-grid > a:first-child {
        grid-column: span 2;
        grid-row: span 2;
        aspect-ratio: auto;
    }
}

[data-theme="dark"] .gallery-grid > a {
    background: var(--rgc-section-bg-2);
    border-color: var(--rgc-divider);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .gallery-grid > a:hover {
    border-color: rgba(165, 180, 252, .4);
    box-shadow: 0 14px 32px rgba(108, 92, 231, .35), 0 4px 12px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .gallery-grid > a::after {
    background: linear-gradient(180deg, rgba(108, 92, 231, .25), rgba(14, 14, 26, .8));
}

/* "Show more" toggle when a long gallery is collapsed */
.gallery-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 28px auto 0;
    padding: 12px 28px;
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(31, 18, 144, .22);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.gallery-toggle:hover {
    transform: translateY(-2px);
    background: #2a1aae;
    box-shadow: 0 12px 28px rgba(31, 18, 144, .32);
}
[data-theme="dark"] .gallery-toggle {
    background: #6c5ce7;
    box-shadow: 0 8px 22px rgba(108, 92, 231, .35);
}
[data-theme="dark"] .gallery-toggle:hover { background: #7c6cf0; }

/* Collapsed state: hide tiles past the first row(s) */
.gallery-grid.is-collapsed > a:nth-child(n + 13) { display: none; }
@media (max-width: 991.98px) {
    .gallery-grid.is-collapsed > a:nth-child(n + 9) { display: none; }
}
@media (max-width: 575.98px) {
    .gallery-grid.is-collapsed > a:nth-child(n + 7) { display: none; }
}

/* ----- PhotoSwipe (v5) lightbox polish ----- */
.pswp {
    --pswp-bg: #07060d;
    --pswp-icon-color: #ffffff;
    --pswp-icon-color-secondary: #1a1535;
    --pswp-icon-stroke-color: rgba(0, 0, 0, .55);
    --pswp-icon-stroke-width: 1.5;
}
.pswp__bg { background: radial-gradient(120% 90% at 50% 30%, rgba(31, 18, 144, .35), #07060d 65%) !important; }
.pswp__top-bar {
    background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0)) !important;
    height: 64px !important;
    padding: 8px 14px;
    align-items: center;
    display: flex;
}

/* Counter pill in the top-bar (top-left) */
.pswp__counter {
    color: #fff;
    font-family: 'Nunito', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0 14px;
    margin: 0 0 0 6px;
    height: 36px;
    line-height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    letter-spacing: 0.06em;
    text-shadow: none;
    opacity: 1;
}

/* Top-bar action buttons (zoom, close).
   We restyle the BUTTON visually but leave the inner SVG (.pswp__icn)
   alone so PhotoSwipe's default layout (incl. the next-arrow's mirrored
   <use> transform) keeps working. A ::before pill provides the disc. */
.pswp__button {
    width: 50px !important;
    height: 50px !important;
    margin: 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    color: #fff !important;
    position: relative;
    transition: transform .15s ease;
}
.pswp__button::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    transition: background .2s ease, border-color .2s ease;
    z-index: 0;
}
.pswp__button:hover::before {
    background: var(--secondary);
    border-color: var(--secondary);
}
.pswp__button:hover .pswp__icn,
.pswp__button:hover .pswp__icn-arrow {
    fill: var(--primary) !important;
    color: var(--primary) !important;
}
.pswp__button:focus-visible::before {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* Recolor only — never resize or reposition the icon. */
.pswp__icn,
.pswp__icn-arrow {
    fill: #fff !important;
    color: #fff !important;
    z-index: 1;
}
/* Hide PhotoSwipe's secondary "shadow" copy of the icon — already
   plenty of contrast from our button background. */
.pswp__icn-shadow { display: none !important; }

/* Nav arrows — same disc treatment, but bigger. Vertically centered. */
.pswp__button--arrow {
    width: 75px !important;
    height: 100px !important;
    top: 50% !important;
    margin-top: -50px !important;
}
.pswp__button--arrow::before {
    inset: 22px 12px;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.pswp__button--arrow:hover::before {
    background: var(--secondary);
    border-color: var(--secondary);
}
.pswp__button--arrow:hover {
    transform: scale(1.04);
}
.pswp__button--arrow.pswp__button--arrow--prev { left: 12px !important; right: auto !important; }
.pswp__button--arrow.pswp__button--arrow--next { right: 12px !important; left: auto !important; }

/* Zoom button — accent-tinted disc to distinguish from close. */
.pswp__button--zoom::before {
    background: rgba(199, 224, 0, .18);
    border-color: rgba(199, 224, 0, .42);
}
.pswp__button--zoom .pswp__icn {
    fill: var(--secondary) !important;
    color: var(--secondary) !important;
}
.pswp__button--zoom:hover::before {
    background: var(--secondary);
    border-color: var(--secondary);
}

/* Close button — turns red on hover. */
.pswp__button--close:hover::before {
    background: #ef4444;
    border-color: #ef4444;
}
.pswp__button--close:hover .pswp__icn {
    fill: #fff !important;
    color: #fff !important;
}

@media (max-width: 575.98px) {
    .pswp__top-bar { height: 56px !important; padding: 6px 8px; }
    .pswp__button { width: 44px !important; height: 44px !important; }
    .pswp__button--arrow { width: 60px !important; height: 80px !important; margin-top: -40px !important; }
    .pswp__button--arrow.pswp__button--arrow--prev { left: 4px !important; }
    .pswp__button--arrow.pswp__button--arrow--next { right: 4px !important; }
    .pswp__button--arrow::before { inset: 16px 8px; }
    .pswp__counter { font-size: 0.78rem; height: 32px; line-height: 32px; padding: 0 12px; }
}

/* Caption strip below image */
.pswp__custom-caption {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    max-width: min(92vw, 720px);
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    pointer-events: none;
    z-index: 10;
}

/* Gallery section title alignment */
.gallery-section .section-title { background: var(--rgc-accent-soft) !important; }
[data-theme="dark"] .gallery-section .section-title { background: rgba(108, 92, 231, .14) !important; }