html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.bg-blue {
    /*background-color: #032238 !important;*/
    background: linear-gradient(135deg, #153f5b, #087f8c);
    color: #fff !important;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0px;
    max-height: 140px;
    gap: 10px;
}

    .main-header div {
        min-width: 0;
    }

        .main-header div:first-child {
            flex: 0 1 auto;
            display: flex;
            align-items: center;
        }

        .main-header div:last-child {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

    .main-header img {
        max-width: 100%;
        height: auto;
        display: block;
    }

/* Mobile (Extra Small) */
@media (max-width: 575.98px) {
    .main-header {
        max-height: 100px;
        gap: 5px;
    }

        .main-header img {
            max-height: 80px;
        }
}

/* Small devices and up */
@media (min-width: 576px) and (max-width: 767.98px) {
    .main-header {
        max-height: 120px;
        gap: 8px;
    }

        .main-header img {
            max-height: 100px;
        }
}

/* Medium devices and up */
@media (min-width: 768px) {
    .main-header {
        max-height: 140px;
        gap: 10px;
    }

        .main-header img {
            max-height: 120px;
        }
}

.top-bar img {
    height: 16px;
    width: auto;
}

.bg-blue .nav-link {
    color: #FFF;
}

.navbar-nav .bg-blue .nav-link.active, .navbar-nav .nav-link.show {
    color: #FFF !important;
}


/* Mobile devices */
@media (max-width: 575.98px) {
    .navbar-nav .bg-blue .nav-link {
        padding: 10px 12px;
        font-size: 13px;
    }

    .navbar-nav .bg-blue .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .navbar-nav .bg-blue .nav-item {
        width: 100%;
    }

    .navbar-nav .bg-blue .nav-link {
        border-bottom: none;
        border-left: 3px solid transparent;
        padding-left: 15px;
    }

        .navbar-nav .bg-blue .nav-link:hover,
        .navbar-nav .bg-blue .nav-link.active {
            border-bottom: none;
            border-left: 3px solid #FFF;
        }
}

/* Small devices */
@media (min-width: 576px) and (max-width: 767.98px) {
    .navbar-nav .bg-blue .nav-link {
        padding: 11px 15px;
        font-size: 13px;
    }
}

/* Medium devices and up */
@media (min-width: 768px) {
    .navbar-nav .bg-blue .navbar-nav {
        justify-content: flex-start;
    }

    .navbar-nav .bg-blue .nav-link {
        padding: 12px 18px;
        font-size: 14px;
    }

    .navbar-nav .bg-blue .navbar-toggler {
        display: none !important;
    }
}

.text-justify {
    text-align: justify !important;
}
/* Custom CSS to handle exact passport proportions across screens */
.passport-photo-box {
    margin: auto;
    width: 100px;
    height: 132px; /* Standard passport ratio approx 3.5cm x 4.5cm */
}

/* Medium screens (Tablets) */
@media (min-width: 768px) {
    .passport-photo-box {
        width: 120px;
        height: 158px;
    }
}

/* Large screens (Desktops) */
@media (min-width: 992px) {
    .passport-photo-box {
        width: 140px;
        height: 184px;
    }
}

.ndc-profile-card {
    /*background: linear-gradient(135deg, rgba(11, 43, 82, 0.96), rgba(18, 60, 114, 0.96));*/
    background: linear-gradient(135deg, #153f5b, #087f8c);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: all .35s ease;
    backdrop-filter: blur(10px);
}

.bg-light-blue {
    background: rgba(255, 255, 255, .12);
    color: #d6e4ff;
}

.h-95 {
    max-height: 100px;
}

.footer-modern {
    /*background: #0f172a;*/
    background: linear-gradient(135deg, #153f5b, #087f8c);
    color: #fff;
}

.footer-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 25px;
    transition: all .3s ease;
}

    .footer-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,.35);
    }

.footer-title {
    position: relative;
    font-weight: 600;
    margin-bottom: 25px;
    padding-bottom: 10px;
}

    .footer-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 60px;
        height: 3px;
        border-radius: 10px;
        background: linear-gradient( 90deg, #ffc107, #fd7e14 );
    }

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    text-decoration: none;
    color: #d1d5db;
    transition: all .3s ease;
}

    .footer-links a:hover {
        color: #ffc107;
        padding-left: 8px;
    }

.footer-links i {
    width: 25px;
}

.visitor-box {
    background: rgba(255,255,255,0.07);
    border-radius: 15px;
    padding: 15px;
}

    .visitor-box h3 {
        margin-bottom: 5px;
        color: #ffc107;
        font-weight: 700;
    }

    .visitor-box p {
        margin-bottom: 0;
        color: #d1d5db;
    }

.contact-info p {
    color: #e5e7eb;
    margin-bottom: 12px;
}

.contact-info i {
    width: 24px;
}

.social-icons {
    display: flex;
    gap: 12px;
}

    .social-icons a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-decoration: none;
        transition: .3s ease;
    }

        .social-icons a:hover {
            background: #ffc107;
            color: #000;
            transform: translateY(-4px);
        }

.footer-inline-link {
    color: #ffffff;
    text-decoration: none;
}

    .footer-inline-link:hover {
        color: #ffc107;
    }

.footer-bottom {
    background: rgba(255,255,255,0.05);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0;
}

    .footer-bottom a {
        color: #ffc107;
        text-decoration: none;
    }

        .footer-bottom a:hover {
            text-decoration: underline;
        }

.nic-logo {
    max-height: 45px;
    filter: brightness(1.1);
}

.footer-modern .row {
    align-items: stretch;
}

.footer-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.footer-links {
    flex-grow: 1;
}

.contact-info {
    flex-grow: 1;
}

.footer-links li {
    margin-bottom: 14px;
}

.nic-logo {
    max-height: 55px;
}

.social-icons {
    display: flex;
    gap: 12px;
}

    .social-icons a {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-decoration: none;
        transition: all .3s ease;
    }

        .social-icons a:hover {
            background: #ffc107;
            color: #000;
            transform: translateY(-3px);
        }

    .social-icons i {
        font-size: 18px;
    }

.footer-bottom {
    background: rgba(255,255,255,.05);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0;
    position: relative;
}

    .footer-bottom .privacy-link {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    .footer-bottom a {
        color: #ffc107;
        text-decoration: none;
    }

        .footer-bottom a:hover {
            text-decoration: underline;
        }

@media (max-width: 768px) {

    .footer-bottom .privacy-link {
        position: static;
        transform: none;
        text-align: center;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {

    .footer-card {
        margin-bottom: 20px;
    }

    .social-icons {
        justify-content: center;
    }

    .footer-title {
        text-align: center;
    }

        .footer-title::after {
            left: 50%;
            transform: translateX(-50%);
        }
}

.btn-gold {
    background-color: #D4A017;
    border-color: #D4A017;
}

    .btn-gold:hover {
        background-color: #B8860B;
        border-color: #B8860B;
        color: #fff;
    }

:root {
    --ndc-navy-900: #0B2E4E;
    --ndc-navy-800: #123A5E;
    --ndc-gold-500: #C98A2C;
    --ndc-gold-600: #B57920;
    --ndc-panel: #F6F8FA;
    --ndc-line: #E4E9EE;
}

.ndc-navbar {
    font-family: 'Inter', system-ui, sans-serif;
}

.ndc-toggler {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ndc-line);
    border-radius: 9px;
    background: #fff;
    color: var(--ndc-navy-900);
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: none;
}

    .ndc-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(11,46,78,.15);
    }

    .ndc-toggler i {
        color: inherit;
    }

/* ---- Dark sub-nav strip (matches reference screenshot) ---- */
.ndc-subnav {
    /*background: var(--ndc-navy-900);*/
    background: linear-gradient(135deg, #153f5b, #087f8c);
}

.ndc-sublist {
    --bs-navbar-nav-link-padding-x: 0;
    gap: .25rem;
}

.ndc-sublink {
    position: relative;
    color: #fff !important;
    font-weight: 700;
    font-size: .92rem;
    padding: .85rem .9rem !important;
}

    .ndc-sublink::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%);
        width: 5px;
        height: 5px;
        background: var(--ndc-gold-500);
    }

    .ndc-sublink:hover {
        color: var(--ndc-gold-500) !important;
    }

    .ndc-sublink.active {
        color: var(--ndc-gold-500) !important;
    }

        .ndc-sublink.active::after {
            content: "";
            left: .9rem;
            right: .9rem;
            bottom: 0;
            transform: none;
            width: auto;
            height: 3px;
            background: var(--ndc-gold-500);
        }

.ndc-new-badge {
    display: inline-block;
    background: var(--ndc-gold-500);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .02em;
    padding: .05rem .3rem;
    border-radius: 3px;
    margin-left: .35rem;
    line-height: 1.3;
}

.ndc-dropdown {
    border-radius: 12px;
    padding: .5rem;
    min-width: 15rem;
}

.ndc-item {
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .9rem;
}

    .ndc-item:hover, .ndc-item:focus {
        background: var(--ndc-panel);
        color: var(--ndc-navy-900);
    }

/* Bootstrap doesn't support nested (level-2) dropdowns natively — this adds it */
/* =========================================================
   NDC DROPDOWNS
   ========================================================= */

.ndc-navbar {
    position: relative;
    z-index: 1000;
}

.ndc-subnav {
    position: relative;
    z-index: 1000;
}

    .ndc-subnav .navbar-collapse {
        position: relative;
        z-index: 1000;
    }

    /* Bootstrap top-level dropdown */
    .ndc-subnav .dropdown-menu {
        z-index: 1050;
    }

/* Nested dropdown */
/* =========================================================
   NDC NESTED DROPDOWN - DESKTOP
   ========================================================= */

.dropdown-submenu {
    position: relative;
}

    /* Nested submenu */
    .dropdown-submenu > .dropdown-menu {
        position: absolute !important;
        top: -0.375rem !important;
        left: 100% !important;
        right: auto !important;
        min-width: 300px;
        margin: 0 !important;
        display: none;
        z-index: 9999;
    }

    /* Show nested submenu */
    .dropdown-submenu.show > .dropdown-menu {
        display: block !important;
    }

    /* Arrow */
    .dropdown-submenu > .dropdown-toggle::after {
        content: "";
        display: inline-block;
        margin-left: auto;
        vertical-align: middle;
        border-top: 0.3em solid transparent;
        border-bottom: 0.3em solid transparent;
        border-left: 0.3em solid currentColor;
        border-right: 0;
        transform: none;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    .dropdown-submenu > .dropdown-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        padding-left: 15px;
        display: none;
        box-shadow: none !important;
        border: 0 !important;
    }

    .dropdown-submenu.show > .dropdown-menu {
        display: block !important;
    }

    .dropdown-submenu > .dropdown-toggle::after {
        transform: rotate(90deg);
    }

    .dropdown-submenu.show > .dropdown-toggle::after {
        transform: rotate(-90deg);
    }
}

@media (min-width: 992px) {

    .dropdown-submenu > .dropdown-menu {
        position: absolute !important;
        top: -1px !important;
        left: calc(100% + 2px) !important;
        right: auto !important;
        width: 320px !important;
        min-width: 320px !important;
        margin: 0 !important;
        display: none !important;
        z-index: 99999 !important;
    }

    .dropdown-submenu.show > .dropdown-menu {
        display: block !important;
    }

    /*
     * Open submenu toward the left when there isn't
     * enough room on the right.
     */
    .dropdown-submenu.ndc-submenu-left > .dropdown-menu {
        left: auto !important;
        right: calc(100% + 2px) !important;
    }
}

.announcement-bar {
    width: 100%;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 10px 0;
    margin-top: 15px;
}

/* SPEAKER ICON */
.announcement-icon {
    width: 60px;
    text-align: center;
    font-size: 26px;
    color: #3f2ab3;
    border-right: 1px solid #ccc;
}

/* TEXT AREA */
.announcement-text {
    flex: 1;
    padding-left: 15px;
}

/* LINK STYLE */
.announcement-link {
    font-size: 24px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
}

    .announcement-link:hover {
        color: #3f2ab3;
        text-decoration: underline;
    }



/* ==========================================
   MODERN MATERIAL DESIGN ANNOUNCEMENT BAR
========================================== */
.announcement-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg,#ffffff,#f7faff);
    border-radius: 16px;
    padding: 12px 18px;
    margin: 15px 0;
    border-left: 5px solid #ff5722;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    overflow: hidden;
}

.announcement-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg,#ff6b35,#ff9800);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .announcement-icon i {
        color: #fff;
        font-size: 22px;
        animation: bellShake 2s infinite;
    }

@keyframes bellShake {
    0%,100% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(15deg);
    }

    30% {
        transform: rotate(-15deg);
    }

    45% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-10deg);
    }
}

.announcement-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #0b2b52;
    white-space: nowrap;
}

.live-dot {
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(244,67,54,.6);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(244,67,54,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(244,67,54,0);
    }
}

.announcement-marquee {
    flex: 1;
}

.announcement-item {
    color: #333;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
}

    .announcement-item:hover {
        color: #0056b3;
    }

.divider {
    color: #ff5722;
    margin: 0 18px;
    font-size: 18px;
}

.new-badge {
    background: linear-gradient(135deg,#e53935,#ff5722);
    color: #fff;
    padding: 3px 8px;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 700;
    margin-right: 8px;
}

.important {
    color: #c62828;
    font-weight: 700;
}

.announcement-btn a {
    display: inline-block;
    background: linear-gradient(135deg,#0b2b52,#1d5aa6);
    color: white;
    padding: 10px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

    .announcement-btn a:hover {
        color: white;
        text-decoration: none;
        transform: translateY(-1px);
    }

@media (max-width: 768px) {
    .announcement-wrapper {
        flex-wrap: wrap;
    }

    .announcement-btn {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .announcement-title {
        font-size: 13px;
    }
}

.slider-container {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 12px;
    margin: 15px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,.15);
}

.slider {
    display: flex;
    transition: transform .6s ease;
    height: 100%;
}

.slide {
    min-width: 100%;
}

    .slide img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
    }

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    transition: .3s;
}

    .slider-btn:hover {
        background: rgba(0,0,0,.7);
    }

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    background: rgba(255,255,255,.6);
    border-radius: 50%;
    cursor: pointer;
}

    .dot.active {
        background: #fff;
    }

.home-banner-section {
    display: flex;
    align-items: stretch;
}

.notice-item {
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
}

.notice-title span {
    display: block;
    line-height: 1.4;
}

s

.home-banner-section > div {
    display: flex;
}

.hero-slider-wrapper,
.notice-panel,
.ndc-profile-card {
    height: 100%;
}

.notice-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
}

.scroll-box {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.scroll-content {
    height: 100%;
    overflow-y: auto;
    padding: 10px;
}

.home-banner-section {
    display: flex;
    align-items: stretch;
}

    .home-banner-section > .col-md-3,
    .home-banner-section > .col-md-6 {
        display: flex;
    }

        .home-banner-section > .col-md-3 > *,
        .home-banner-section > .col-md-6 > * {
            width: 100%;
            height: 100%;
        }

.dashboard-grid {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

    .dashboard-grid .material-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

/* Equal Height Cards */
.secretary-card,
.update-card,
.nirf-card {
    min-height: 150px;
}

/* Secretary Layout */
.secretary-profile {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px;
}

    /* Reduce white space */
    .secretary-profile .profile-image-wrapper {
        margin-bottom: 10px;
    }

    .secretary-profile .profile-info {
        margin-bottom: 8px;
    }

    .secretary-profile .profile-description {
        margin-bottom: 12px;
        line-height: 1.5;
        flex: 1;
    }

/* Important Updates */
.update-card {
    overflow: hidden;
}

/* NIRF */
.nirf-card {
    overflow: hidden;
}

.nirf-wrapper {
    flex: 1;
    overflow: hidden;
}

.profile-action,
.card-footer {
    margin-top: auto;
}

.dashboard-grid.modern-grid {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));*/
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.ndc-card.modern-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 260px;
}

    .ndc-card.modern-card h3 {
        min-height: 50px;
    }

    .ndc-card.modern-card p {
        flex-grow: 1;
        min-height: 60px;
    }

.card-footer-modern,
.card-arrow,
.card-actions {
    margin-top: auto;
}

.home-banner-section {
    display: flex;
    align-items: stretch;
}

    .home-banner-section .col-md-3,
    .home-banner-section .col-md-6 {
        display: flex;
    }

.hero-slider-wrapper {
    flex: 1;
}

/*.material-carousel,
        .carousel-inner,
        .carousel-inner .item {
            height: 420px;*/ /* FIXED HEIGHT */
/*}*/

.slider-img {
    width: 100%;
    height: 420px;
    object-fit: cover; /* prevents stretching */
    border-radius: 0;
}
/* ==========================
   STABLE BANNER HEIGHT
========================== */

.home-banner-section {
    display: flex;
    align-items: stretch;
}

    .home-banner-section > .col-md-3,
    .home-banner-section > .col-md-6 {
        display: flex;
    }

        /* Left Card */
        .home-banner-section > .col-md-3:first-child > div {
            width: 100%;
            height: 480px;
        }

/* Slider */
.material-carousel {
    width: 100%;
    height: 480px !important;
    overflow: hidden;
}

/* Notice Card */
.notice-card {
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
}

/* Scroll Area */
.scroll-box {
    flex: 1;
    overflow: hidden;
}

.scroll-content {
    height: 100%;
    overflow-y: auto;
}

/* Carousel */
.carousel-inner,
.carousel-inner .item {
    height: 480px !important;
}

/* Images */
.slider-img {
    width: 100%;
    height: 480px !important;
    object-fit: cover;
    display: block;
}

.update-card {
    background: linear-gradient(180deg, #2b0a3d 0%, #6a0d5b 50%, #2b0a3d 100%);
    border-radius: 18px;
    padding: 18px;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    overflow: hidden;
    position: relative;
}

.material-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    color: white;
    font-weight: 600;
    font-size: 15px;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
}

.ticker {
    overflow: hidden;
    white-space: nowrap;
    background: #eef2ff;
    padding: 10px;
}

.ticker-track {
    display: inline-block;
    animation: scrollLeft 12s linear infinite;
}

.nirf-card {
    width: 100%;
    height: 520px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}

.nirf-header {
    background: linear-gradient(135deg, #1368aa, #0b4f85);
    color: #ffffff;
    padding: 15px 18px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.nirf-table-header {
    display: flex;
    align-items: center;
    background: #eef6ff;
    color: #1368aa;
    font-weight: 700;
    font-size: 13px;
    padding: 10px;
    border-bottom: 1px solid #dbeafe;
}

.rank-col {
    width: 55px;
    text-align: center;
}

.college-col {
    flex: 1;
    padding-left: 5px;
}

.nirf-scroll {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}

.nirf-marquee {
    height: 100%;
    overflow: hidden;
}

.nirf-marquee-content {
    animation: nirfScroll 70s linear infinite;
}

.nirf-marquee:hover .nirf-marquee-content {
    animation-play-state: paused;
}

.nirf-item {
    display: flex;
    align-items: flex-start;
    margin: 0 10px 12px;
    padding: 10px;
    border-radius: 12px;
    background: #f9fbff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.rank-badge {
    min-width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    background: #1368aa;
    color: #ffffff;
    font-weight: 700;
    margin-right: 10px;
    flex-shrink: 0;
}

.college-name {
    font-size: 13px;
    color: #374151;
    line-height: 1.6;
    padding-top: 1px;
}

.nirf-footer {
    padding: 12px;
    text-align: center;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
}

.nirf-btn {
    display: inline-block;
    padding: 9px 18px;
    background: #1368aa;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s ease;
}

    .nirf-btn:hover {
        background: #0b4f85;
        transform: translateY(-1px);
        color: #ffffff !important;
    }

@keyframes nirfScroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

@media (max-width: 767px) {

    .nirf-card {
        height: 480px;
    }

    .nirf-header {
        font-size: 15px;
    }

    .college-name {
        font-size: 12px;
    }
}
/* NOTICE */
.notice-card {
    background: #fff;
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    transition: 0.3s;
}

    .notice-card:hover {
        transform: translateY(-3px);
    }

.notice-date {
    background: #01bba4;
    color: #fff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 10px;
}

.notice-text {
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    text-align: justify;
}

.readmore-link {
    color: #c0392b !important;
    font-weight: 600;
    text-decoration: none;
    float: right;
    margin-top: 10px;
}

.archive-btn {
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 24px;
    font-weight: 600;
}

/* MOBILE CARD */
.mobile-card-modern {
    background: linear-gradient(145deg, #05113b, #9b0141);
    border-radius: 20px;
    color: #fff;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.18);
}

.mobile-title {
    color: #fff;
}

.mobile-image img {
    max-height: 130px;
}

.store-btn img {
    height: 50px;
    margin-top: 15px;
}

.feature-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.feature-box-modern {
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    width: 130px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

    .feature-box-modern img {
        width: 100%;
    }

.online-service-banner img {
    width: 100%;
    border-radius: 12px;
    margin-top: 20px;
}

.notice-marquee {
    flex: 1;
    overflow: hidden;
}

.notice-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    border-left: 4px solid #0f4c81;
}

.notice-date {
    display: block;
    font-size: 12px;
    color: #faf5f5;
    margin-bottom: 5px;
    font-weight: 600;
}

.notice-text {
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
}

.readmore-link {
    display: inline-block;
    margin-top: 8px;
    color: #0f4c81;
    font-weight: 600;
    text-decoration: none;
}

.archive-btn {
    background: #0f4c81;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 22px;
    font-weight: 600;
}

.equal-card {
    height: 560px; /* adjust this one number to taste — all three follow it */
}

/* Notice card: scroll the list instead of growing the card */
.notice-card .scroll-box {
    overflow-y: auto;
}

/* Important Updates: scroll its body instead of growing the card */
.update-card .update-card-body {
    overflow-y: auto;
}

/* NIRF: unchanged, already scrolls its own marquee area */
/* Header: circular icon badge + centered title */
.update-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1rem 1rem 0.75rem;
}

.update-header-icon {
    position: absolute;
    left: 1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: #fff;
}

.update-header-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}

/* "Update" eyebrow label */
.update-eyebrow {
    display: block;
    color: #2ee6a8;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.5rem 1.25rem 0;
}

/* Ticker bar */
.ticker {
    margin: 0.5rem 1.25rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    overflow: hidden;
}

.ticker-track a {
    display: block;
    text-align: right;
    padding: 0.6rem 1rem;
    color: #fff;
}

/* Slider */
.slider-container {
    margin: 0 1.25rem 1.25rem;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}

.slide img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border: none;
    font-size: 1.1rem;
}

    .slider-btn.prev {
        left: 12px;
    }

    .slider-btn.next {
        right: 12px;
    }

.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

    .slider-dots .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
    }

        .slider-dots .dot.active {
            background: #fff;
        }

/* Quick action tiles: icon stacked above label */
.quick-actions {
    display: flex;
    gap: 1rem;
    padding: 0 1.25rem 1.25rem;
}

.action-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
    text-align: center;
}

.action-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

    .action-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.action-label {
    font-size: 0.85rem;
}
/* Modern thin scrollbar for the scrollable panels */
.notice-card .scroll-box,
.update-card .update-card-body {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}

    .notice-card .scroll-box::-webkit-scrollbar,
    .update-card .update-card-body::-webkit-scrollbar {
        width: 6px;
    }

    .notice-card .scroll-box::-webkit-scrollbar-track,
    .update-card .update-card-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .notice-card .scroll-box::-webkit-scrollbar-thumb,
    .update-card .update-card-body::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2);
        border-radius: 10px;
    }

    .update-card .update-card-body::-webkit-scrollbar-thumb {
        background-color: rgba(255,255,255,0.25);
    }

        .notice-card .scroll-box::-webkit-scrollbar-thumb:hover,
        .update-card .update-card-body::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0,0,0,0.35);
        }

.slider {
    position: relative;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

    .slide.active {
        position: relative;
        opacity: 1;
        z-index: 1;
    }

    .slide:not(.active) {
        z-index: 0;
    }
/* ================================
   NOTICE CARD — scoped, self-contained
   (mirrors the NIRF card's structure so all three feel consistent)
================================ */
.ndc-notice-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}

.ndc-notice-header {
    background: linear-gradient(135deg, #0f9d80, #06705a);
    color: #ffffff;
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ndc-notice-scroll {
    overflow: hidden;
    position: relative;
    background: #ffffff;
}

.ndc-notice-marquee {
    height: 100%;
    overflow: hidden;
}

.ndc-notice-marquee-content {
    animation: ndcNoticeScroll 40s linear infinite;
}

.ndc-notice-scroll:hover .ndc-notice-marquee-content {
    animation-play-state: paused;
}

@keyframes ndcNoticeScroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

.ndc-notice-item {
    margin: 0 12px 12px;
    padding: 12px;
    border-radius: 12px;
    background: #f9fbff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

    .ndc-notice-item:first-child {
        margin-top: 12px;
    }

.ndc-notice-date {
    display: inline-block;
    background: #0f9d80;
    color: #fff;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ndc-notice-title {
    font-weight: 700;
    font-size: 13.5px;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.4;
}

.ndc-notice-text {
    font-size: 12.5px;
    color: #4b5563;
    line-height: 1.5;
    margin-bottom: 6px;
}

.ndc-notice-readmore {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f9d80;
    text-decoration: none;
}

    .ndc-notice-readmore:hover {
        text-decoration: underline;
    }

.ndc-notice-footer {
    padding: 12px;
    text-align: center;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
}

.ndc-notice-btn {
    display: inline-block;
    width: 100%;
    padding: 9px 18px;
    background: #0f9d80;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s ease;
}

    .ndc-notice-btn:hover {
        background: #06705a;
        color: #ffffff !important;
    }

/* Mobile: shorter card, same as NIRF's own mobile override */
@media (max-width: 767px) {
    .ndc-notice-card {
        min-height: 320px;
    }

    .ndc-notice-header {
        font-size: 14px;
    }

    .ndc-notice-title {
        font-size: 13px;
    }

    .ndc-notice-text {
        font-size: 12px;
    }
}

.dashboard-header {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 40px;
    border-radius: 28px;
    background: radial-gradient(circle at 90% 10%, rgba(255,0,153,.25) 0%, transparent 35%), radial-gradient(circle at 20% 80%, rgba(80,0,255,.18) 0%, transparent 40%), linear-gradient( 135deg, #03045e 0%, #0b0f66 30%, #21084f 65%, #43003d 100% ) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08);
}

    .dashboard-header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 40% );
        pointer-events: none;
    }

    .dashboard-header::after {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        top: -180px;
        right: -120px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(255,0,153,.20) 0%, rgba(255,0,153,0) 70% );
        pointer-events: none;
    }

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.header-right {
    position: relative;
    z-index: 2;
}

.dashboard-header h1 {
    margin: 0;
    color: #fff !important;
    font-size: 32px;
    font-weight: 700;
}

.dashboard-header span {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.8) !important;
}

.portal-icon {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    background: linear-gradient( 135deg, #ff006e, #8338ec );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(255,0,110,.3);
}

    .portal-icon i {
        color: #fff;
        font-size: 34px;
    }

.status-chip {
    background: linear-gradient( 90deg, rgba(255,0,120,.35), rgba(30,30,80,.55) );
    backdrop-filter: blur(12px);
    border-radius: 50px;
    padding: 12px 24px;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.08);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
}

@media (max-width:768px) {

    .dashboard-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 25px;
    }

    .header-left {
        flex-direction: column;
    }

    .dashboard-header h4 {
        font-size: 18px;
    }
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 25px;
    margin-top: 30px;
}

.ndc-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 24px;
    padding: 30px 25px;
    text-align: center;
    text-decoration: none !important;
    transition: all .35s ease;
    border: 1px solid #eef2f7;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

    .ndc-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 45px rgba(37,99,235,.18);
    }

    .ndc-card:before {
        content: '';
        position: absolute;
        width: 250px;
        height: 250px;
        background: linear-gradient( 135deg, rgba(37,99,235,.08), rgba(124,58,237,.08) );
        border-radius: 50%;
        top: -120px;
        right: -120px;
        transition: .5s;
    }

    .ndc-card:hover:before {
        transform: scale(1.4);
    }

.card-footer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    color: #2563eb;
    font-size: 14px;
    font-weight: 600;
}

.icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient( 135deg, #2563eb, #7c3aed );
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 10px 25px rgba(37,99,235,.30);
}

    .icon-wrap i {
        color: white;
        font-size: 34px;
    }

.ndc-card h3 {
    color: #111827;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}

.ndc-card p {
    color: #6b7280;
    font-size: 15px;
    margin: 0;
    line-height: 1.5;
}

.card-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(37,99,235,.12);
    color: #2563eb;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 30px;
    backdrop-filter: blur(8px);
}

.stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 20px;
    margin-top: 40px;
}

.stat-box {
    background: linear-gradient( 135deg, #2563eb, #7c3aed );
    border-radius: 22px;
    padding: 25px;
    color: white;
    text-align: center;
    box-shadow: 0 15px 35px rgba(37,99,235,.25);
}

    .stat-box h2 {
        font-size: 36px;
        font-weight: 800;
        margin: 0;
    }

    .stat-box span {
        opacity: .9;
        font-size: 15px;
        letter-spacing: .5px;
    }

.dashboard-header {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 40px;
    border-radius: 28px;
    background: radial-gradient(circle at 90% 10%, rgba(255,0,153,.25) 0%, transparent 35%), radial-gradient(circle at 20% 80%, rgba(80,0,255,.18) 0%, transparent 40%), linear-gradient( 135deg, #03045e 0%, #0b0f66 30%, #21084f 65%, #43003d 100% ) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08);
}

    .dashboard-header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 40% );
        pointer-events: none;
    }

    .dashboard-header::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        top: -180px;
        right: -120px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(255,0,153,.20) 0%, rgba(255,0,153,0) 70% );
        pointer-events: none;
    }

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.header-right {
    position: relative;
    z-index: 2;
}

.dashboard-header h4 {
    margin: 0;
    color: #fff !important;
    font-size: 42px;
    font-weight: 700;
}

.dashboard-header span {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.8) !important;
}

.portal-icon {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    background: linear-gradient( 135deg, #ff006e, #8338ec );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(255,0,110,.3);
}

    .portal-icon i {
        color: #fff;
        font-size: 34px;
    }

.status-chip {
    background: linear-gradient( 90deg, rgba(255,0,120,.35), rgba(30,30,80,.55) );
    backdrop-filter: blur(12px);
    border-radius: 50px;
    padding: 12px 24px;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.08);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
}

@media (max-width:768px) {

    .dashboard-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 25px;
    }

    .header-left {
        flex-direction: column;
    }

    .dashboard-header h1 {
        font-size: 28px;
    }
}
/*Information Box*/
.info-section {
    padding: 60px;
    background: #f8fafc;
}

.section-header {
    text-align: center;
    margin-bottom: 35px;
}

    .section-header h2 {
        font-size: 36px;
        font-weight: 700;
        color: #312e81;
    }

    .section-header p {
        color: #64748b;
    }

.category-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

    .category-tabs button {
        border: none;
        padding: 14px 28px;
        border-radius: 50px;
        background: white;
        cursor: pointer;
        font-weight: 600;
        transition: .3s;
        box-shadow: 0 4px 15px rgba(0,0,0,.08);
    }

        .category-tabs button.active,
        .category-tabs button:hover {
            background: linear-gradient(135deg,#4f46e5,#7c3aed);
            color: white;
        }

.info-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
}

.hero-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    min-height: 450px;
    box-shadow: 0 15px 40px rgba(0,0,0,.12);
}

    .hero-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 25px;
    background: linear-gradient( transparent, rgba(0,0,0,.8) );
    color: white;
}

.cards-container {
    display: grid;
    gap: 20px;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: white;
    border-radius: 20px;
    text-decoration: none;
    color: #111827;
    transition: .35s;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

    .info-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 35px rgba(79,70,229,.18);
    }

.material-icons {
    font-size: 34px;
    color: #4f46e5;
}

.info-card h4 {
    margin: 0;
    font-size: 18px;
}

.info-card p {
    margin-top: 5px;
    color: #64748b;
}

@media(max-width:992px) {
    .info-grid {
        grid-template-columns: 1fr;
    }

    .hero-card {
        min-height: 280px;
    }
}



/*Button Switch*/
.tab-content {
    display: none;
}

    .tab-content.active {
        display: block;
    }

.tab-btn.active {
    background: #022a40;
    color: white;
}

.category-tabs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

    .category-tabs button.active {
        background: #061e33;
        color: #fff;
    }



.card-container {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Base Card */
.modern-card {
    flex: 1;
    min-width: 280px;
    max-width: 360px;
    background: #ffffff;
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.25s ease;
}

    .modern-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    }

/* Stats Gradient Card */
.stats-gradient {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
}

.stats-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 15px;
    border-radius: 16px;
}

.stats-number {
    font-size: 42px;
    font-weight: 800;
    margin-top: 10px;
}

.stats-sub {
    margin-top: 10px;
    font-size: 13px;
    opacity: 0.85;
}

/* Titles */
.card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111827;
}

/* Text */
.card-text {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 18px;
}

/* Inputs */
.field {
    margin-bottom: 15px;
}

    .field label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        color: #374151;
    }

.material-input {
    width: 100%;
    height: 50px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 10px 14px;
    font-size: 14px;
    background: #f9fafb;
    transition: 0.2s;
}

    .material-input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
        background: #fff;
    }

/* Buttons */
.btn-primary {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-primary:hover {
        transform: translateY(-2px);
    }

/* Link Button */
.btn-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

    .btn-link:hover {
        text-decoration: underline;
    }



.faculty-dashboard {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    align-items: stretch;
}

.faculty-stats-panel {
    width: 340px;
    min-width: 340px;
    background: linear-gradient(135deg,#2563eb,#7c3aed);
    color: #fff;
    border-radius: 28px;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(37,99,235,.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.faculty-icon {
    width: 75px;
    height: 75px;
    background: rgba(255,255,255,.15);
    border-radius: 18px;
    padding: 10px;
}

.faculty-stats-panel h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
}

.faculty-stats-panel p {
    margin: 5px 0 0;
    opacity: .85;
}

.faculty-count {
    font-size: 60px;
    font-weight: 800;
    margin: 30px 0;
}

.update-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.15);
    padding: 10px 18px;
    border-radius: 50px;
    width: fit-content;
}

.faculty-search-panel {
    flex: 1;
    background: #fff;
    border-radius: 28px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

.panel-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
}

.full-width {
    grid-column: span 2;
}

.field-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #475569;
}

.material-input {
    width: 100%;
    height: 50px;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    padding: 0 15px;
    font-size: 15px;
    transition: .3s;
    background: #fafafa;
}

    .material-input:focus {
        outline: none;
        border-color: #2563eb;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(37,99,235,.15);
    }

.search-btn-wrap {
    margin-top: 25px;
}

.material-search-btn {
    border: none;
    background: linear-gradient(135deg,#2563eb,#7c3aed);
    color: #fff;
    padding: 14px 30px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: .3s;
}

    .material-search-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(37,99,235,.25);
    }

/* Mobile */

@media(max-width:991px) {

    .faculty-dashboard {
        flex-direction: column;
    }

    .faculty-stats-panel {
        width: 100%;
        min-width: auto;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .full-width {
        grid-column: auto;
    }
}



.stats-card {
    background: linear-gradient(135deg,#0f4c81,#1565c0);
    color: #fff;
    border-radius: 25px;
    padding: 30px;
    text-align: center;
    transition: .4s;
    height: 100%;
}

    .stats-card:hover {
        transform: translateY(-8px);
    }

    .stats-card .material-icons {
        font-size: 50px;
    }

.stats-number {
    font-size: 2.5rem;
    font-weight: 700;
}

.stats-title {
    font-size: 1.5rem;
}



.dashboard-section {
    margin-top: 30px;
}

.glass-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-radius: 24px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    margin-bottom: 30px;
}

.portal-icon {
    width: 75px;
    height: 75px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( 135deg, #0f4c81, #1565c0 );
    color: white;
    font-size: 28px;
}

.pulse-icon {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.status-chip {
    padding: 12px 20px;
    border-radius: 30px;
    font-weight: 600;
    background: #e8fff0;
    color: #00a651;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00c853;
    animation: blink 1.5s infinite;
}

@keyframes blink {

    50% {
        opacity: .3;
    }
}

.modern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 24px;
}

.modern-card {
    position: relative;
    background: white;
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    transition: all .4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    min-height: 240px;
}

    .modern-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0,0,0,.15);
    }

.card-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient( 90deg, #0f4c81, #1565c0, #00bcd4 );
}

.icon-wrap {
    width: 85px;
    height: 85px;
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    font-size: 34px;
    transition: .4s;
}

.icon-blue {
    background: #e8f1ff;
    color: #1565c0;
}

.icon-green {
    background: #eafaf0;
    color: #00a651;
}

.icon-orange {
    background: #fff4e6;
    color: #ff9800;
}

.icon-red {
    background: #ffeaea;
    color: #f44336;
}

.modern-card:hover .icon-wrap {
    transform: rotate(10deg) scale(1.08);
}

.modern-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #0f4c81;
    margin-bottom: 10px;
}

.modern-card p {
    color: #666;
    min-height: 50px;
    line-height: 1.6;
}

.card-arrow {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #1565c0;
    transition: .3s;
}

.modern-card:hover .card-arrow {
    transform: translateX(8px);
}

@media(max-width:768px) {

    .glass-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .header-left {
        flex-direction: column;
    }

    .modern-card {
        min-height: auto;
        padding: 25px;
    }

        .modern-card h3 {
            font-size: 18px;
        }

    .icon-wrap {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }
}

.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
    font-size: 1.25rem;
}
/* =========================================================
   NDC MODERN BOOTSTRAP 5.3 DROPDOWN / SUBMENU
   ========================================================= */

.ndc-navbar .dropdown-menu {
    min-width: 245px;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid rgba(8, 50, 87, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 15px 45px rgba(0, 31, 63, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

    /* Show Bootstrap dropdown */
    .ndc-navbar .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Dropdown item */
    .ndc-navbar .dropdown-menu .dropdown-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 11px 14px;
        margin: 2px 0;
        border-radius: 10px;
        color: #243447;
        font-size: 14px;
        font-weight: 500;
        transition: background-color .2s ease, color .2s ease, transform .2s ease;
    }

        /* Item icon */
        .ndc-navbar .dropdown-menu .dropdown-item i {
            width: 20px;
            text-align: center;
            color: #0b5ed7;
            font-size: 14px;
            transition: transform .2s ease;
        }

        /* Hover */
        .ndc-navbar .dropdown-menu .dropdown-item:hover,
        .ndc-navbar .dropdown-menu .dropdown-item:focus {
            background: linear-gradient( 90deg, rgba(8, 50, 87, 0.10), rgba(8, 50, 87, 0.04) );
            color: #083257;
            transform: translateX(3px);
        }

            /* Icon hover */
            .ndc-navbar .dropdown-menu .dropdown-item:hover i {
                transform: scale(1.12);
                color: #083257;
            }


/* =========================================================
   SUBMENU
   ========================================================= */

.ndc-navbar .dropdown-submenu {
    position: relative;
}

    /* Submenu arrow */
    .ndc-navbar .dropdown-submenu > .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        /* Remove Bootstrap default arrow */
        .ndc-navbar .dropdown-submenu > .dropdown-toggle::after {
            margin-left: auto;
            border: 0;
            content: "\f054";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 10px;
            transition: transform .2s ease;
        }

    /* Rotate arrow when open */
    .ndc-navbar .dropdown-submenu.show > .dropdown-toggle::after {
        transform: rotate(90deg);
    }

    /* Submenu itself */
    .ndc-navbar .dropdown-submenu > .dropdown-menu {
        top: -10px;
        left: calc(100% + 8px);
        margin-top: 0;
    }

/* Desktop submenu animation */
@media (min-width: 992px) {

    .ndc-navbar .dropdown-submenu > .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        transform: translateX(8px);
        display: block;
    }

    .ndc-navbar .dropdown-submenu:hover > .dropdown-menu,
    .ndc-navbar .dropdown-submenu.show > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}


/* =========================================================
   DROPDOWN HEADER / SECTION
   ========================================================= */

.ndc-navbar .dropdown-header {
    padding: 8px 14px 6px;
    color: #083257;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.ndc-navbar .dropdown-divider {
    margin: 8px 10px;
    border-top-color: rgba(8, 50, 87, 0.10);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    .ndc-navbar .dropdown-menu {
        position: static !important;
        width: 100%;
        min-width: 0;
        margin: 5px 0 8px;
        padding: 7px;
        border-radius: 12px;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.98);
        transform: none;
    }

        .ndc-navbar .dropdown-menu.show {
            opacity: 1;
            visibility: visible;
        }

    .ndc-navbar .dropdown-submenu > .dropdown-menu {
        margin-left: 10px;
        width: calc(100% - 10px);
    }

    .ndc-navbar .dropdown-menu .dropdown-item {
        padding: 12px 14px;
    }
}
/* =========================================================
   NDC MODERN BOOTSTRAP 5.3.8 CAROUSEL
   ========================================================= */

.material-carousel {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
    border-radius: 22px;
    background: #061e33;
    box-shadow: 0 20px 45px rgba(0, 31, 63, 0.18), 0 5px 15px rgba(0, 31, 63, 0.08);
}

    /* Carousel inner */
    .material-carousel .carousel-inner {
        width: 100%;
        height: 100%;
        border-radius: inherit;
    }

    /* Bootstrap 5 carousel item */
    .material-carousel .carousel-item {
        position: relative;
        width: 100%;
        height: 480px;
        overflow: hidden;
        border-radius: inherit;
    }

    /* Main image */
    .material-carousel .slider-img {
        display: block;
        width: 100%;
        height: 480px;
        object-fit: cover;
        object-position: center;
        transition: transform 6s ease;
    }

    /* Slight zoom while slide is active */
    .material-carousel .carousel-item.active .slider-img {
        transform: scale(1.04);
    }


    /* =========================================================
   DARK GRADIENT OVERLAY
   ========================================================= */

    .material-carousel .carousel-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(0, 20, 40, 0.02) 20%, rgba(0, 20, 40, 0.12) 45%, rgba(0, 20, 40, 0.68) 100% );
        z-index: 1;
        pointer-events: none;
    }


    /* =========================================================
   CONTROLS
   ========================================================= */

    .material-carousel .carousel-control-prev,
    .material-carousel .carousel-control-next {
        width: 48px;
        height: 48px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        margin: 0 18px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 0.85;
        transition: background .25s ease, transform .25s ease, opacity .25s ease;
    }

        .material-carousel .carousel-control-prev:hover,
        .material-carousel .carousel-control-next:hover {
            opacity: 1;
            background: rgba(255, 255, 255, 0.30);
            transform: translateY(-50%) scale(1.08);
        }

    /* Material icon */
    .material-carousel .material-icons {
        font-size: 28px;
        line-height: 1;
        color: #fff;
    }


    /* =========================================================
   INDICATORS
   ========================================================= */

    .material-carousel .carousel-indicators {
        position: absolute;
        z-index: 5;
        right: auto;
        left: 50%;
        bottom: 18px;
        width: auto;
        margin: 0;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

        /* Indicator */
        .material-carousel .carousel-indicators [data-bs-target] {
            width: 9px;
            height: 9px;
            margin: 0;
            border: 0;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.55);
            opacity: 1;
            transition: width .25s ease, background-color .25s ease, transform .25s ease;
        }

        /* Active indicator */
        .material-carousel .carousel-indicators .active {
            width: 28px;
            border-radius: 20px;
            background-color: #fff;
            transform: scale(1.02);
        }


    /* =========================================================
   OPTIONAL SLIDE LABEL
   ========================================================= */

    .material-carousel .carousel-caption {
        z-index: 3;
        right: 8%;
        left: 8%;
        bottom: 45px;
        text-align: left;
    }

        .material-carousel .carousel-caption h5 {
            margin-bottom: 6px;
            color: #fff;
            font-size: 24px;
            font-weight: 700;
            text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
        }

        .material-carousel .carousel-caption p {
            margin-bottom: 0;
            color: rgba(255, 255, 255, .92);
            font-size: 14px;
            text-shadow: 0 1px 5px rgba(0, 0, 0, .35);
        }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    .material-carousel {
        height: 380px;
        border-radius: 18px;
    }

        .material-carousel .carousel-item {
            height: 380px;
        }

        .material-carousel .slider-img {
            height: 380px;
        }

        .material-carousel .carousel-control-prev,
        .material-carousel .carousel-control-next {
            width: 40px;
            height: 40px;
            margin: 0 10px;
        }

        .material-carousel .material-icons {
            font-size: 23px;
        }
}


@media (max-width: 575.98px) {

    .material-carousel {
        height: 280px;
        border-radius: 14px;
    }

        .material-carousel .carousel-item {
            height: 280px;
        }

        .material-carousel .slider-img {
            height: 280px;
        }

        .material-carousel .carousel-control-prev,
        .material-carousel .carousel-control-next {
            width: 36px;
            height: 36px;
            margin: 0 7px;
        }

        .material-carousel .material-icons {
            font-size: 21px;
        }

        .material-carousel .carousel-indicators {
            bottom: 12px;
        }

            .material-carousel .carousel-indicators [data-bs-target] {
                width: 7px;
                height: 7px;
            }

            .material-carousel .carousel-indicators .active {
                width: 22px;
            }
}


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

@media (prefers-reduced-motion: reduce) {

    .material-carousel .slider-img {
        transition: none;
        transform: none !important;
    }

    .material-carousel .carousel-control-prev,
    .material-carousel .carousel-control-next {
        transition: none;
    }
}

.introduction-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 15px 10px 35px;
}

.page-title {
    position: relative;
    display: inline-block;
    color: #337ab7;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 25px;
    padding-bottom: 10px;
}

    .page-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 55px;
        height: 3px;
        background: #337ab7;
        border-radius: 10px;
    }

.intro-text {
    color: #444;
    font-size: 16px;
    line-height: 1.9;
    text-align: justify;
    margin-bottom: 24px;
}

@media (max-width: 768px) {

    .introduction-page {
        padding: 10px 5px 25px;
    }

    .page-title {
        font-size: 1.4rem;
    }

    .intro-text {
        font-size: 15px;
        line-height: 1.8;
        text-align: left;
    }
}

body {
    font-family: 'Inter',sans-serif;
    background: #f4f6fb;
    margin: 0;
}

.split-page {
    padding: 40px 20px;
}

.page-title {
    text-align: center;
    margin-bottom: 40px;
}

    .page-title h1 {
        font-size: 32px;
        margin: 0;
        font-weight: 700;
    }

    .page-title p {
        color: #6b7280;
        margin-top: 6px;
    }

.split-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1000px;
    margin: auto;
}

.profile-split {
    display: flex;
    background: white;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
    transition: .4s;
}

    .profile-split:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 70px rgba(0,0,0,.15);
    }


.left-block {
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .left-block img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        object-fit: cover;
        border: 6px solid white;
        box-shadow: 0 15px 30px rgba(0,0,0,.2);
    }

.bg1 {
    background: linear-gradient(135deg,#ef476f,#ffd166);
}

.bg2 {
    background: linear-gradient(135deg,#118ab2,#06d6a0);
}

.bg3 {
    background: linear-gradient(135deg,#8338ec,#3a86ff);
}

.right-block {
    flex: 1;
    padding: 30px;
}

    .right-block h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
    }

.role {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 12px;
    border-radius: 30px;
    font-weight: 600;
}

.right-block p {
    margin-top: 15px;
    font-size: 13px;
    color: #6b7280;
}

.icons {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

    .icons i {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #f1f5f9;
        color: #334155;
        font-size: 16px;
        transition: .3s;
    }

        .icons i:hover {
            background: #4f46e5;
            color: white;
            transform: scale(1.1);
        }

@media(max-width:768px) {

    .profile-split {
        flex-direction: column;
    }

    .left-block {
        width: 100%;
        padding: 30px;
    }

        .left-block img {
            width: 120px;
            height: 120px;
        }

    .right-block {
        text-align: center;
    }

    .icons {
        justify-content: center;
    }
}
/* ================================
   PAGE HEADER
   ================================ */

.page-title {
    width: 100%;
    text-align: center;
    margin: 0 auto 40px auto;
    padding: 20px 15px;
}

    .page-title h1 {
        margin: 0;
        font-size: 2.2rem;
        font-weight: 700;
        text-align: center;
        color: #083257;
        line-height: 1.2;
    }

    .page-title p {
        margin: 10px 0 0;
        text-align: center;
        font-size: 1.05rem;
        font-weight: 500;
        color: #6c757d;
    }

.split-page {
    width: 100%;
    padding: 30px 20px 50px;
}

.split-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
/* =========================================
   HOW TO REACH NDC
   ========================================= */

.reach-page {
    padding: 45px 0 70px;
    background: #f5f8fc;
}


/* HERO */

.reach-hero {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 40px;
}

.reach-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    background: #e8f1fa;
    color: #083257;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.reach-title {
    margin: 0;
    color: #083257;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
}

.reach-subtitle {
    max-width: 800px;
    margin: 15px auto 0;
    color: #667085;
    font-size: 1.05rem;
    line-height: 1.7;
}


/* MAIN CARD */

.reach-card {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}


/* HEADER */

.reach-header {
    padding: 25px 30px;
    text-align: center;
    background: #083257;
    color: #ffffff;
}

    .reach-header h2 {
        margin: 0;
        font-size: 1.6rem;
        font-weight: 700;
    }

    .reach-header p {
        margin: 7px 0 0;
        opacity: 0.85;
    }


/* CONTENT */

.reach-content {
    padding: 30px;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 30px;
}


/* INFORMATION */

.info-box {
    padding: 10px;
}

.office-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #083257;
    margin-bottom: 25px;
}

.contact-item {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #e9edf2;
}

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

.contact-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eaf2f9;
    color: #083257;
    font-size: 19px;
}

.contact-text {
    color: #59636e;
    line-height: 1.7;
}

    .contact-text strong {
        display: block;
        margin-bottom: 4px;
        color: #212529;
        font-size: 15px;
    }

    .contact-text a {
        color: #083257;
        font-weight: 600;
        text-decoration: none;
    }

        .contact-text a:hover {
            text-decoration: underline;
        }


/* MAP */

.map-card {
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e7ebf0;
    border-radius: 16px;
}

.map-top {
    margin-bottom: 18px;
}

    .map-top h4 {
        margin: 0;
        color: #083257;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .map-top p {
        margin: 5px 0 0;
        color: #6c757d;
        font-size: 14px;
    }

.reach-map-image {
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}


/* BUTTON */

.map-action {
    text-align: center;
    margin-top: 20px;
}

.material-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-primary-material {
    background: #083257;
    color: #ffffff;
}

    .btn-primary-material:hover {
        background: #0b4778;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(8, 50, 87, 0.2);
    }


/* RESPONSIVE */

@media (max-width: 991.98px) {

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .reach-content {
        padding: 20px;
    }
}


@media (max-width: 575.98px) {

    .reach-page {
        padding: 25px 0 45px;
    }

    .reach-title {
        font-size: 1.8rem;
    }

    .reach-subtitle {
        font-size: 0.95rem;
    }

    .reach-header {
        padding: 20px 15px;
    }

        .reach-header h2 {
            font-size: 1.35rem;
        }

    .reach-content {
        padding: 15px;
    }

    .map-card {
        padding: 12px;
    }

    .contact-item {
        gap: 12px;
    }
}
/* ==========================================
   FUNCTIONS PAGE
   ========================================== */

.functions-page {
    padding: 45px 0 70px;
    background: #f5f8fc;
    min-height: 70vh;
}


/* PAGE HEADER */

.functions-header {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}

.functions-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    background: #e8f1fa;
    color: #083257;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.functions-header h1 {
    margin: 0;
    color: #083257;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
}

    .functions-header h1::after {
        content: "";
        display: block;
        width: 65px;
        height: 4px;
        margin: 15px auto 0;
        border-radius: 10px;
        background: #083257;
    }

.functions-header p {
    margin: 15px auto 0;
    max-width: 750px;
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.7;
}


/* MAIN CARD */

.functions-card {
    max-width: 1150px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e6ebf1;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.07);
}


/* CARD HEADER */

.functions-card-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px 30px;
    background: #083257;
    color: #ffffff;
}

.functions-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 22px;
}

.functions-card-header h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.functions-card-header p {
    margin: 4px 0 0;
    opacity: 0.85;
    font-size: 14px;
}


/* CONTENT */

.functions-content {
    padding: 35px;
}

    .functions-content > p {
        margin: 0 0 22px;
        color: #343a40;
        font-size: 1rem;
        line-height: 1.85;
        text-align: justify;
    }


/* REQUIREMENTS BOX */

.requirements-box {
    margin-top: 30px;
    padding: 25px;
    border: 1px solid #dfe7ef;
    border-radius: 14px;
    background: #f8fafc;
}

.requirements-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #083257;
    font-size: 1.15rem;
    font-weight: 700;
}

    .requirements-title i {
        font-size: 20px;
    }


/* LIST */

.functions-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .functions-list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 18px;
        padding: 18px;
        background: #ffffff;
        border: 1px solid #e5eaf0;
        border-radius: 12px;
        color: #343a40;
        font-size: 0.98rem;
        line-height: 1.8;
        text-align: justify;
    }

        .functions-list li:last-child {
            margin-bottom: 0;
        }

.list-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border-radius: 50%;
    background: #e8f1fa;
    color: #083257;
    font-size: 13px;
}


/* RESPONSIVE */

@media (max-width: 767.98px) {

    .functions-page {
        padding: 30px 0 50px;
    }

    .functions-card-header {
        padding: 20px;
    }

    .functions-content {
        padding: 22px;
    }

        .functions-content > p {
            text-align: left;
            font-size: 0.95rem;
            line-height: 1.75;
        }

    .requirements-box {
        padding: 18px;
    }

    .functions-list li {
        padding: 15px;
        text-align: left;
        font-size: 0.94rem;
    }
}


@media (max-width: 575.98px) {

    .functions-header {
        margin-bottom: 28px;
    }

        .functions-header h1 {
            font-size: 1.8rem;
        }

    .functions-card-header {
        align-items: flex-start;
    }

    .functions-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 18px;
    }

    .functions-card-header h2 {
        font-size: 1.2rem;
    }

    .functions-content {
        padding: 16px;
    }
}
/* =========================================================
   NDC REGULATIONS PAGE
   ========================================================= */

.regulations-page {
    min-height: 70vh;
    padding: 45px 0 70px;
    background: #f5f8fc;
}


/* =========================================================
   HERO
   ========================================================= */

.regulations-hero {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}

.regulations-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    margin-bottom: 18px;
    border-radius: 50px;
    background: #e8f1fa;
    color: #083257;
    font-size: 14px;
    font-weight: 600;
}

.regulations-hero h1 {
    margin: 0;
    color: #083257;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
}

    .regulations-hero h1::after {
        content: "";
        display: block;
        width: 70px;
        height: 4px;
        margin: 15px auto 0;
        border-radius: 10px;
        background: #083257;
    }

.regulations-hero p {
    max-width: 760px;
    margin: 16px auto 0;
    color: #667085;
    font-size: 1rem;
    line-height: 1.7;
}


/* =========================================================
   ACCORDION
   ========================================================= */

.regulations-accordion {
    max-width: 1200px;
    margin: 0 auto;
}

.regulation-section {
    margin-bottom: 20px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

    .regulation-section:last-child {
        margin-bottom: 0;
    }


    /* BOOTSTRAP ACCORDION OVERRIDE */

    .regulation-section .accordion-header {
        margin: 0;
    }

    .regulation-section .accordion-button {
        min-height: 75px;
        padding: 18px 25px;
        color: #083257;
        background: #ffffff;
        box-shadow: none;
        font-size: 1.05rem;
    }

        .regulation-section .accordion-button:not(.collapsed) {
            color: #ffffff;
            background: #083257;
        }

        .regulation-section .accordion-button::after {
            filter: none;
        }

        .regulation-section .accordion-button:not(.collapsed)::after {
            filter: brightness(0) invert(1);
        }

        .regulation-section .accordion-button:focus {
            box-shadow: none;
            border-color: transparent;
        }


/* HEADER ICON */

.regulation-header-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    border-radius: 12px;
    background: #eaf2f9;
    color: #083257;
    font-size: 19px;
}

.accordion-button:not(.collapsed) .regulation-header-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.regulation-section .accordion-button strong {
    display: block;
    font-weight: 700;
}

.regulation-section .accordion-button small {
    display: block;
    margin-top: 3px;
    color: #7a8794;
    font-size: 12px;
    font-weight: 400;
}

.regulation-section .accordion-button:not(.collapsed) small {
    color: rgba(255, 255, 255, 0.8);
}


/* =========================================================
   ACCORDION BODY
   ========================================================= */

.regulation-section .accordion-body {
    padding: 30px;
    background: #f8fafc;
}


/* =========================================================
   DOCUMENT CARD
   ========================================================= */

.regulation-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .regulation-card:hover {
        transform: translateY(-5px);
        border-color: #b8cadb;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
    }


/* =========================================================
   DOCUMENT IMAGE
   ========================================================= */

.regulation-image-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: 15px;
    overflow: hidden;
    background: #f2f5f8;
    text-decoration: none;
}

.regulation-image {
    width: 100%;
    height: 230px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.regulation-card:hover .regulation-image {
    transform: scale(1.04);
}


/* =========================================================
   PDF OVERLAY
   ========================================================= */

.pdf-overlay {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 20px;
    background: rgba(8, 50, 87, 0.92);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.25s ease;
}

.regulation-card:hover .pdf-overlay {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   CARD BODY
   ========================================================= */

.regulation-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px;
}

    .regulation-card-body h3 {
        min-height: 48px;
        margin: 0 0 15px;
        color: #26384a;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
    }


/* =========================================================
   VIEW DOCUMENT BUTTON
   ========================================================= */

.regulation-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: auto;
    padding: 10px 14px;
    border: 1px solid #083257;
    border-radius: 8px;
    background: #083257;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .regulation-btn:hover {
        background: #0b4778;
        border-color: #0b4778;
        color: #ffffff;
        transform: translateY(-1px);
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .regulations-page {
        padding: 35px 0 55px;
    }

    .regulation-section .accordion-body {
        padding: 22px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .regulations-page {
        padding: 25px 0 45px;
    }

    .regulations-hero {
        margin-bottom: 28px;
    }

        .regulations-hero h1 {
            font-size: 1.8rem;
        }

        .regulations-hero p {
            font-size: 0.94rem;
        }

    .regulation-section .accordion-button {
        min-height: 65px;
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .regulation-header-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin-right: 10px;
        font-size: 17px;
    }

    .regulation-section .accordion-body {
        padding: 15px;
    }

    .regulation-image-link {
        min-height: 210px;
    }

    .regulation-image {
        height: 210px;
    }

    /*
       Keep the PDF overlay visible on touch devices
       because there is no reliable hover interaction.
    */
    .pdf-overlay {
        opacity: 1;
        transform: none;
    }
}
/* =========================================================
   GAZETTE PAGE
   Bootstrap 5.3.8 compatible
   ========================================================= */

.gazette-page {
    min-height: 100vh;
    padding: 35px 0 60px;
    background: #f4f7fb;
}


/* =========================================================
   HERO
   ========================================================= */

.gazette-hero {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    padding: 42px 45px;
    border-radius: 26px;
    color: #fff;
    background: linear-gradient( 135deg, #041c5c 0%, #083b91 48%, #0d6efd 100% );
    box-shadow: 0 18px 45px rgba(4, 28, 92, .20);
}

    .gazette-hero::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        right: -90px;
        top: -110px;
        background: rgba(255,255,255,.08);
    }

    .gazette-hero::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        right: 100px;
        bottom: -130px;
        background: rgba(255,255,255,.05);
    }

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.hero-badge {
    display: inline-flex;
    padding: 7px 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    background: rgba(255,255,255,.10);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.gazette-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -.5px;
}

.gazette-hero p {
    max-width: 780px;
    margin: 0;
    color: rgba(255,255,255,.90);
    font-size: 16px;
    line-height: 1.7;
}

.hero-decoration {
    position: absolute;
    z-index: 1;
    right: 45px;
    bottom: 20px;
    color: rgba(255,255,255,.07);
    font-size: 70px;
    font-weight: 900;
    letter-spacing: 5px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.gazette-search {
    position: relative;
}

    .gazette-search .form-control {
        min-height: 58px;
        padding: 14px 55px 14px 52px;
        border: 1px solid #dce5f2;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 8px 25px rgba(0,0,0,.05);
        font-size: 15px;
    }

        .gazette-search .form-control:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 .25rem rgba(13,110,253,.12), 0 8px 25px rgba(0,0,0,.05);
        }

.search-icon {
    position: absolute;
    z-index: 3;
    top: 17px;
    left: 18px;
    color: #0d6efd;
    font-size: 19px;
}

.search-clear {
    position: absolute;
    z-index: 3;
    top: 11px;
    right: 11px;
    display: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #edf3fb;
    color: #36516f;
    font-size: 22px;
    line-height: 1;
}

    .search-clear.show {
        display: block;
    }

    .search-clear:hover {
        background: #dfeaf8;
    }


/* =========================================================
   TABLE CARD
   ========================================================= */

.gazette-card {
    overflow: hidden;
    border: 1px solid #e5ebf3;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(0,0,0,.07);
}

.gazette-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    border-bottom: 1px solid #edf1f6;
}

.section-kicker {
    display: block;
    margin-bottom: 5px;
    color: #6d7d91;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.gazette-card-header h2 {
    margin: 0;
    color: #092c62;
    font-size: 21px;
    font-weight: 750;
}

    .gazette-card-header h2 i {
        color: #0d6efd;
    }

.document-count {
    flex-shrink: 0;
    padding: 7px 13px;
    border-radius: 30px;
    background: #eaf2ff;
    color: #0b4aa2;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   TABLE
   ========================================================= */

.gazette-table {
    margin: 0;
    vertical-align: middle;
}

    .gazette-table thead th {
        padding: 16px;
        border: 0;
        background: linear-gradient( 135deg, #0b3f91, #0d6efd );
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .2px;
        white-space: nowrap;
    }

    .gazette-table tbody td {
        padding: 17px 16px;
        border-bottom: 1px solid #edf1f6;
        color: #34465c;
        font-size: 14px;
    }

    .gazette-table tbody tr {
        transition: background .2s ease, transform .2s ease;
    }

        .gazette-table tbody tr:hover {
            background: #f6faff;
        }

        .gazette-table tbody tr:last-child td {
            border-bottom: 0;
        }

    .gazette-table tbody td:first-child,
    .gazette-table tbody td:nth-child(3),
    .gazette-table tbody td:last-child {
        text-align: center;
    }


/* =========================================================
   SERIAL NUMBER
   ========================================================= */

.serial-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 35px;
    border-radius: 10px;
    background: #eef4fc;
    color: #0b4a9e;
    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   REGULATION TITLE
   ========================================================= */

.regulation-name {
    color: #1e3149;
    font-weight: 600;
    line-height: 1.55;
}


/* =========================================================
   YEAR
   ========================================================= */

.year-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 7px 12px;
    border-radius: 30px;
    background: #eaf2ff;
    color: #0b4a9e;
    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   PDF BUTTON
   ========================================================= */

.pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient( 135deg, #ff5252, #d90429 );
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 7px 18px rgba(217,4,41,.20);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .pdf-btn i {
        font-size: 18px;
    }

    .pdf-btn:hover {
        transform: translateY(-3px);
        color: #fff !important;
        box-shadow: 0 11px 24px rgba(217,4,41,.32);
    }

    .pdf-btn:focus-visible {
        outline: 3px solid rgba(13,110,253,.35);
        outline-offset: 3px;
    }


/* =========================================================
   NO RESULTS
   ========================================================= */

.no-results {
    padding: 55px 20px;
    text-align: center;
}

.no-results-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-bottom: 15px;
    border-radius: 50%;
    background: #eef4fc;
    color: #0d6efd;
    font-size: 23px;
}

.no-results h4 {
    margin-bottom: 5px;
    color: #263b54;
    font-weight: 750;
}

.no-results p {
    margin: 0;
    color: #78879a;
}


/* =========================================================
   DCI HERO
   ========================================================= */

.dci-hero {
    background: linear-gradient( 135deg, #172554 0%, #1e3a8a 50%, #2563eb 100% );
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .gazette-page {
        padding: 20px 0 40px;
    }

    .gazette-hero {
        min-height: auto;
        padding: 30px 22px;
        border-radius: 20px;
    }

        .gazette-hero h1 {
            font-size: 29px;
        }

        .gazette-hero p {
            font-size: 14px;
        }

    .hero-decoration {
        display: none;
    }

    .gazette-card {
        border-radius: 18px;
    }

    .gazette-card-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

        .gazette-card-header h2 {
            font-size: 18px;
        }

    .document-count {
        align-self: flex-start;
    }

    /* Convert table rows into cards */

    .gazette-table thead {
        display: none;
    }

    .gazette-table,
    .gazette-table tbody,
    .gazette-table tr,
    .gazette-table td {
        display: block;
        width: 100%;
    }

        .gazette-table tbody {
            padding: 12px;
        }

            .gazette-table tbody tr {
                margin-bottom: 12px;
                overflow: hidden;
                border: 1px solid #e8edf4;
                border-radius: 15px;
                background: #fff;
                box-shadow: 0 5px 16px rgba(0,0,0,.05);
            }

                .gazette-table tbody tr:last-child {
                    margin-bottom: 0;
                }

            .gazette-table tbody td {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 15px;
                padding: 13px 15px;
                border-bottom: 1px solid #edf1f6;
                text-align: right !important;
            }

                .gazette-table tbody td:last-child {
                    border-bottom: 0;
                }

                .gazette-table tbody td::before {
                    content: attr(data-label);
                    flex: 0 0 105px;
                    color: #315173;
                    font-size: 11px;
                    font-weight: 800;
                    letter-spacing: .4px;
                    text-align: left;
                    text-transform: uppercase;
                }

                .gazette-table tbody td:nth-child(2) {
                    display: block;
                    text-align: left !important;
                }

                    .gazette-table tbody td:nth-child(2)::before {
                        display: block;
                        margin-bottom: 7px;
                    }

    .regulation-name {
        font-size: 14px;
    }

    .gazette-search .form-control {
        min-height: 54px;
    }
}


@media (max-width: 400px) {

    .gazette-hero h1 {
        font-size: 25px;
    }

    .gazette-card-header h2 {
        font-size: 17px;
    }

    .gazette-table tbody {
        padding: 8px;
    }

        .gazette-table tbody td {
            padding: 12px;
        }

    .pdf-btn {
        width: 42px;
        height: 42px;
    }
}
/* =========================================================
   NDC GAZETTE - MODERN PDF BUTTON
   ========================================================= */

.gazette-pdf-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 118px;
    height: 42px;
    padding: 0 12px;
    color: #b42332;
    background: linear-gradient( 135deg, #fff5f6 0%, #ffffff 100% );
    border: 1px solid rgba(180, 35, 50, 0.20);
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(8, 50, 87, 0.08);
    transition: transform .25s ease, color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}


/* ---------------------------------------------------------
   PDF ICON
   --------------------------------------------------------- */

.gazette-pdf-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: #dc3545;
    background: #fff;
    border-radius: 7px;
    transition: transform .3s ease, color .3s ease, background .3s ease;
}

    .gazette-pdf-icon svg {
        width: 20px;
        height: 20px;
        display: block;
    }


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

.gazette-pdf-text {
    white-space: nowrap;
    transition: transform .25s ease, color .25s ease;
}


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

.gazette-pdf-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    opacity: .55;
    transform: translateX(0);
    transition: transform .25s ease, opacity .25s ease;
}

    .gazette-pdf-arrow svg {
        width: 12px;
        height: 12px;
    }


/* ---------------------------------------------------------
   TOP SHINE EFFECT
   --------------------------------------------------------- */

.gazette-pdf-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65), transparent );
    transform: skewX(-20deg);
    transition: left .55s ease;
    pointer-events: none;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.gazette-pdf-btn:hover {
    color: #fff;
    background: linear-gradient( 135deg, #dc3545 0%, #b42332 100% );
    border-color: #dc3545;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.25), 0 3px 8px rgba(8, 50, 87, 0.08);
}


    .gazette-pdf-btn:hover::before {
        left: 130%;
    }


    .gazette-pdf-btn:hover .gazette-pdf-icon {
        color: #dc3545;
        background: #fff;
        transform: translateY(-1px) rotate(-3deg);
        box-shadow: 0 3px 8px rgba(0,0,0,.12);
    }


    .gazette-pdf-btn:hover .gazette-pdf-text {
        transform: translateX(1px);
    }


    .gazette-pdf-btn:hover .gazette-pdf-arrow {
        opacity: 1;
        transform: translateX(3px);
    }


/* ---------------------------------------------------------
   ACTIVE / CLICK
   --------------------------------------------------------- */

.gazette-pdf-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.20);
}


/* ---------------------------------------------------------
   KEYBOARD ACCESSIBILITY
   --------------------------------------------------------- */

.gazette-pdf-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .20), 0 6px 16px rgba(220, 53, 69, .20);
}


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

@media (max-width: 576px) {

    .gazette-pdf-btn {
        min-width: 108px;
        height: 40px;
        padding: 0 10px;
        gap: 6px;
        font-size: 12px;
        border-radius: 9px;
    }

    .gazette-pdf-icon {
        width: 26px;
        height: 26px;
    }

        .gazette-pdf-icon svg {
            width: 18px;
            height: 18px;
        }

    .gazette-pdf-arrow {
        display: none;
    }
}


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

@media (prefers-reduced-motion: reduce) {

    .gazette-pdf-btn,
    .gazette-pdf-btn::before,
    .gazette-pdf-icon,
    .gazette-pdf-text,
    .gazette-pdf-arrow {
        transition: none !important;
    }
}

/* =========================================================
   NDC GAZETTE PDF BUTTON
   ========================================================= */

.pdf-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: 40px;
    padding: 5px 9px;
    color: #b42332;
    background: #fff;
    border: 1px solid rgba(180, 35, 50, 0.20);
    border-radius: 9px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(8, 50, 87, 0.08);
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}


/* PDF ICON */

.gazette-pdf-icon {
    width: 27px;
    height: 27px;
    min-width: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #dc3545;
    background: #fff5f6;
    border-radius: 6px;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

    .gazette-pdf-icon svg {
        width: 18px;
        height: 18px;
        display: block;
    }


/* TEXT */

.gazette-pdf-text {
    display: inline-block;
    white-space: nowrap;
    transition: transform .25s ease;
}


/* ARROW */

.gazette-pdf-arrow {
    width: 13px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: .55;
    transition: opacity .25s ease, transform .25s ease;
}

    .gazette-pdf-arrow svg {
        width: 11px;
        height: 11px;
    }


/* =========================================================
   SHINE
   ========================================================= */

.pdf-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65), transparent );
    transform: skewX(-20deg);
    transition: left .5s ease;
    pointer-events: none;
}


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

.pdf-btn:hover {
    color: #fff;
    background: linear-gradient( 135deg, #dc3545, #b42332 );
    border-color: #dc3545;
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(220,53,69,.24);
}

    .pdf-btn:hover::before {
        left: 130%;
    }

    .pdf-btn:hover .gazette-pdf-icon {
        color: #dc3545;
        background: #fff;
        transform: rotate(-4deg);
    }

    .pdf-btn:hover .gazette-pdf-arrow {
        opacity: 1;
        transform: translateX(2px);
    }


/* =========================================================
   GAZETTE DOWNLOAD CELL
   ========================================================= */

td[data-label="Download"] {
    width: 125px;
    min-width: 125px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    td[data-label="Download"] {
        width: auto;
        min-width: 0;
        text-align: left;
    }

    .pdf-btn {
        height: 38px;
        padding: 4px 8px;
        font-size: 11px;
        gap: 5px;
    }

    .gazette-pdf-icon {
        width: 25px;
        height: 25px;
        min-width: 25px;
    }

        .gazette-pdf-icon svg {
            width: 17px;
            height: 17px;
        }

    .gazette-pdf-arrow {
        display: none;
    }
}


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

.pdf-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13,110,253,.20), 0 6px 15px rgba(220,53,69,.20);
}


@media (prefers-reduced-motion: reduce) {

    .pdf-btn,
    .pdf-btn::before,
    .gazette-pdf-icon,
    .gazette-pdf-text,
    .gazette-pdf-arrow {
        transition: none !important;
    }
}
/* =========================================================
   NDC BOOTSTRAP CAROUSEL - FORCE VISIBILITY / TEST
   ========================================================= */

#ndcCarousel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: 420px !important;
    overflow: hidden !important;
}

    #ndcCarousel .carousel-inner {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 420px !important;
    }

    #ndcCarousel .carousel-item {
        height: 420px !important;
    }

        #ndcCarousel .carousel-item img {
            display: block !important;
            width: 100% !important;
            height: 420px !important;
            object-fit: cover !important;
        }

        /* Make the active slide visible */
        #ndcCarousel .carousel-item.active {
            display: block !important;
        }

        /* Keep Bootstrap transition behavior */
        #ndcCarousel .carousel-item:not(.active) {
            display: none !important;
        }

    /* Indicators */
    #ndcCarousel .carousel-indicators {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 20 !important;
    }

    /* Previous / Next */
    #ndcCarousel .carousel-control-prev,
    #ndcCarousel .carousel-control-next {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 20 !important;
    }
/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
/* =========================================
           RTI PAGE
        ========================================= */

.rti-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 25px 20px 50px;
}


/* =========================================
           HERO
        ========================================= */

.rti-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 35px 40px;
    margin-bottom: 25px;
    background: linear-gradient( 135deg, #0b3c5d 0%, #126e8c 55%, #159a9c 100% );
    color: #fff;
    box-shadow: 0 15px 40px rgba(0, 50, 70, 0.15);
}


    .rti-hero::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        right: -100px;
        top: -130px;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
    }


.rti-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 22px;
}


.rti-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 30px;
}


.rti-eyebrow {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .8;
}


.rti-hero h1 {
    margin: 0;
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 700;
}


.rti-hero p {
    margin: 8px 0 0;
    font-size: 15px;
    opacity: .9;
}


/* =========================================
           INTRO
        ========================================= */

.rti-intro {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #e6edf2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(20, 60, 80, .06);
}


.intro-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #e8f6f8;
    color: #087f8c;
    font-size: 20px;
}


.rti-intro h2 {
    margin: 0 0 7px;
    font-size: 21px;
    font-weight: 700;
    color: #163b4d;
}


.rti-intro p {
    margin: 0;
    color: #647784;
    line-height: 1.7;
    font-size: 14px;
}


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

.section-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}


.section-title-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef7fa;
    color: #087f8c;
    font-size: 21px;
}


.section-title h2 {
    margin: 0;
    color: #183c4c;
    font-size: 24px;
    font-weight: 700;
}


.section-title p {
    margin: 3px 0 0;
    color: #788994;
    font-size: 13px;
}


/* =========================================
           OFFICER GRID
        ========================================= */

.officer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}


/* =========================================
           OFFICER CARD
        ========================================= */

.officer-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5edf1;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(24, 65, 80, .07);
    transition: transform .25s ease, box-shadow .25s ease;
}


    .officer-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(24, 65, 80, .12);
    }


/* =========================================
           CARD HEADER
        ========================================= */

.officer-card-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px 24px;
    color: #fff;
}


.appellate-header {
    background: linear-gradient(135deg, #153f5b, #087f8c);
}


.pio-header {
    background: linear-gradient(135deg, #315d75, #168c8c);
}


.officer-header-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.2);
    font-size: 21px;
}


.officer-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .75;
}


.officer-card-header h3 {
    margin: 3px 0 8px;
    font-size: 17px;
    font-weight: 700;
}


.act-badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 20px;
    background: rgba(255,255,255,.13);
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.18);
}


/* =========================================
           CARD BODY
        ========================================= */

.officer-card-body {
    padding: 25px;
}


.officer-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #edf1f3;
}


.person-avatar {
    width: 55px;
    height: 55px;
    min-width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf8fa;
    color: #087f8c;
    font-size: 20px;
}


.officer-person h3 {
    margin: 0 0 3px;
    color: #183c4c;
    font-size: 19px;
    font-weight: 700;
}


.officer-person span {
    color: #778994;
    font-size: 13px;
}


/* =========================================
           CONTACT DETAILS
        ========================================= */

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 19px;
}


.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}


.contact-icon {
    width: 37px;
    height: 37px;
    min-width: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f1f7f9;
    color: #087f8c;
    font-size: 14px;
}


.contact-label {
    display: block;
    margin-bottom: 3px;
    color: #8997a0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}


.contact-item p {
    margin: 0;
    color: #405663;
    font-size: 13px;
    line-height: 1.65;
}


.email-text {
    font-weight: 600;
    color: #087f8c !important;
}


/* =========================================
           FOOTER INFORMATION CARD
        ========================================= */

.rti-footer-card {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
    padding: 22px 25px;
    border-radius: 17px;
    background: linear-gradient( 135deg, #f1f9fa, #f8fbfc );
    border: 1px solid #dcecef;
}


.footer-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #087f8c;
    color: #fff;
    font-size: 19px;
}


.rti-footer-card h3 {
    margin: 0 0 4px;
    color: #183c4c;
    font-size: 17px;
}


.rti-footer-card p {
    margin: 0;
    color: #687b85;
    font-size: 13px;
    line-height: 1.6;
}


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

@media (max-width: 991px) {

    .officer-grid {
        grid-template-columns: 1fr;
    }

    .rti-page {
        padding: 20px 15px 40px;
    }
}


@media (max-width: 575px) {

    .rti-hero {
        padding: 25px 20px;
        border-radius: 17px;
    }

    .rti-hero-content {
        align-items: flex-start;
    }

    .rti-icon {
        width: 55px;
        height: 55px;
        min-width: 55px;
        font-size: 23px;
    }

    .rti-hero h1 {
        font-size: 24px;
    }

    .rti-intro {
        padding: 18px;
    }

    .officer-card-header {
        padding: 18px;
    }

    .officer-card-body {
        padding: 20px;
    }

    .officer-header-icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
    }

    .rti-footer-card {
        align-items: flex-start;
    }
}
/* =========================================================
       PAGE
    ========================================================= */

.rti-monthly-page {
    max-width: 1450px;
    margin: 0 auto;
    padding: 25px 20px 50px;
}


/* =========================================================
       HEADER
    ========================================================= */

.rti-page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 32px 35px;
    margin-bottom: 25px;
    border-radius: 22px;
    color: white;
    background: linear-gradient( 135deg, #0b3c5d, #087f8c, #159a9c );
    box-shadow: 0 15px 40px rgba(0, 70, 90, .15);
}


.rti-header-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    font-size: 28px;
}


.rti-header-eyebrow {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .75;
}


.rti-page-header h1 {
    margin: 0;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 700;
}


.rti-page-header p {
    margin: 7px 0 0;
    font-size: 14px;
    opacity: .9;
}


/* =========================================================
       FILTER CARD
    ========================================================= */

.rti-filter-card {
    padding: 25px;
    margin-bottom: 25px;
    background: #fff;
    border: 1px solid #e4edf1;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(30, 70, 90, .06);
}


.filter-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}


.filter-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eaf7f8;
    color: #087f8c;
    font-size: 18px;
}


.filter-heading h2 {
    margin: 0;
    color: #193d4d;
    font-size: 19px;
}


.filter-heading p {
    margin: 3px 0 0;
    color: #80919a;
    font-size: 12px;
}


.filter-grid {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) auto;
    gap: 18px;
    align-items: end;
}


.filter-field label {
    display: block;
    margin-bottom: 7px;
    color: #526873;
    font-size: 12px;
    font-weight: 700;
}


    .filter-field label i {
        margin-right: 5px;
        color: #087f8c;
    }


.rti-select {
    width: 100%;
    height: 45px;
    padding: 0 13px;
    border: 1px solid #d8e3e7;
    border-radius: 10px;
    background: #fbfdfe;
    color: #304b57;
    font-size: 13px;
    outline: none;
    transition: .2s;
}


    .rti-select:focus {
        border-color: #087f8c;
        box-shadow: 0 0 0 3px rgba(8,127,140,.1);
    }


.rti-search-btn {
    height: 45px;
    padding: 0 25px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient( 135deg, #087f8c, #0c9b9d );
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(8,127,140,.18);
    transition: .2s;
}


    .rti-search-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 23px rgba(8,127,140,.25);
    }


    .rti-search-btn i {
        margin-right: 7px;
    }


/* =========================================================
       RESULT CARD
    ========================================================= */

.rti-result-card {
    overflow: hidden;
    margin-bottom: 25px;
    background: #fff;
    border: 1px solid #e1ebef;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(25, 65, 80, .07);
}


.result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient( 135deg, #f2fafb, #f9fcfd );
    border-bottom: 1px solid #e3edf0;
}


.result-title {
    display: flex;
    align-items: center;
    gap: 13px;
}


.result-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #087f8c;
    color: white;
    font-size: 17px;
}


.result-title span {
    display: block;
    color: #80929b;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}


.result-title h2 {
    margin: 3px 0 0;
    color: #183d4d;
    font-size: 19px;
}


.report-badge {
    padding: 6px 12px;
    border-radius: 20px;
    background: #e4f5f6;
    color: #087f8c;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}


/* =========================================================
       TABLE
    ========================================================= */

.rti-table-wrapper {
    width: 100%;
    overflow-x: auto;
}


.rti-status-table {
    width: 100%;
    min-width: 950px;
    border-collapse: collapse;
}


    .rti-status-table th {
        padding: 15px 12px;
        background: #f6f9fa;
        border-bottom: 1px solid #dce7eb;
        border-right: 1px solid #e7eef1;
        color: #425b66;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.35;
        text-align: center;
        vertical-align: middle;
    }


        .rti-status-table th span {
            display: block;
            margin-top: 4px;
            color: #8a9aa2;
            font-size: 9px;
            font-weight: 500;
        }


    .rti-status-table td {
        padding: 16px 12px;
        border-bottom: 1px solid #e8eef0;
        border-right: 1px solid #edf2f4;
        color: #435c67;
        font-size: 13px;
        text-align: center;
        vertical-align: middle;
    }


    .rti-status-table tbody tr {
        transition: .15s;
    }


        .rti-status-table tbody tr:hover {
            background: #f9fcfc;
        }


.category-column {
    width: 155px;
}


.category-cell {
    text-align: left !important;
    background: #fbfdfe;
    font-size: 12px !important;
}


    .category-cell strong {
        display: inline-block;
        margin-left: 8px;
        color: #294b58;
    }


.category-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13px;
}


    .category-icon.requests {
        background: #e9f7f8;
        color: #087f8c;
    }


    .category-icon.appeals {
        background: #eef2fb;
        color: #526da8;
    }


.small-column {
    width: 85px;
}


/* =========================================================
       EMPTY STATE
    ========================================================= */

.rti-empty-state {
    padding: 60px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid #e4edf1;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(30, 70, 90, .05);
}


.empty-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #f0f6f8;
    color: #8aa0aa;
    font-size: 25px;
}


.rti-empty-state h2 {
    margin: 0 0 6px;
    color: #294b58;
    font-size: 20px;
}


.rti-empty-state p {
    margin: 0 auto 20px;
    max-width: 500px;
    color: #83939b;
    font-size: 13px;
}


.reset-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 9px;
    background: #eef7f8;
    color: #087f8c;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}


    .reset-filter-btn:hover {
        background: #087f8c;
        color: #fff;
    }


/* =========================================================
       INFORMATION BAR
    ========================================================= */

.rti-information-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    margin-top: 25px;
    border-radius: 12px;
    background: #f5fafb;
    border: 1px solid #e0edef;
    color: #71848d;
    font-size: 11px;
}


    .rti-information-bar i {
        color: #087f8c;
        font-size: 15px;
    }


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

@media (max-width: 900px) {

    .filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .filter-action {
        grid-column: span 2;
    }

    .rti-search-btn {
        width: 100%;
    }
}


@media (max-width: 600px) {

    .rti-monthly-page {
        padding: 15px 10px 35px;
    }

    .rti-page-header {
        padding: 24px 20px;
        border-radius: 17px;
        align-items: flex-start;
    }

    .rti-header-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        font-size: 21px;
    }

    .rti-page-header h1 {
        font-size: 23px;
    }

    .filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-action {
        grid-column: auto;
    }

    .result-header {
        align-items: flex-start;
        gap: 12px;
    }

    .report-badge {
        display: none;
    }
}

/* =========================================================
           BASE
           ========================================================= */

.rti-handbook-page {
    width: 100%;
    max-width: 100%;
    min-height: 70vh;
    background: #f5f7fb;
    overflow-x: hidden;
    padding-bottom: 60px;
    box-sizing: border-box;
}

    .rti-handbook-page *,
    .rti-handbook-page *::before,
    .rti-handbook-page *::after {
        box-sizing: border-box;
    }


/* =========================================================
           PAGE HEADER
           ========================================================= */

.rti-handbook-header {
    width: 100%;
    background: linear-gradient(135deg, #0d47a1, #1565c0);
    color: #fff;
    padding: 42px 20px;
    position: relative;
    overflow: hidden;
}

    .rti-handbook-header::after {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        right: -120px;
        top: -160px;
        pointer-events: none;
    }

.rti-handbook-header-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.rti-handbook-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 18px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.rti-handbook-header-text {
    min-width: 0;
}

.rti-handbook-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 6px;
}

.rti-handbook-header h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rti-handbook-header p {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    opacity: .9;
}


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

.rti-handbook-content {
    width: 100%;
    padding: 40px 20px;
}

.rti-handbook-container {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}


/* =========================================================
           SECTION HEADING
           ========================================================= */

.rti-section-heading {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.rti-section-heading-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 13px;
    background: #e8f0fe;
    color: #1565c0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.rti-section-heading-text {
    min-width: 0;
}

    .rti-section-heading-text span {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .8px;
    }

    .rti-section-heading-text h2 {
        margin: 3px 0 0;
        color: #172033;
        font-size: 25px;
        line-height: 1.25;
        font-weight: 700;
    }


/* =========================================================
           DOCUMENT CARDS
           ========================================================= */

.rti-handbook-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.rti-handbook-card {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 17px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    text-decoration: none !important;
    color: #172033 !important;
    box-shadow: 0 5px 18px rgba(15,23,42,.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .rti-handbook-card:hover {
        transform: translateY(-4px);
        border-color: #90caf9;
        box-shadow: 0 12px 28px rgba(15,23,42,.11);
    }

.handbook-card-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 13px;
    background: #fff1f1;
    color: #d32f2f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.handbook-card-content {
    flex: 1 1 auto;
    min-width: 0;
}

.handbook-card-label {
    display: block;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .55px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.handbook-card-content h3 {
    margin: 2px 0 0;
    color: #172033;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
}

.handbook-card-content p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.handbook-card-action {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all .2s ease;
}

.rti-handbook-card:hover .handbook-card-action {
    background: #1565c0;
    color: #fff;
}


/* =========================================================
           INFORMATION BAR
           ========================================================= */

.rti-handbook-info {
    width: 100%;
    margin-top: 28px;
    padding: 17px 19px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: #eef6ff;
    border: 1px solid #d5e8ff;
    border-radius: 14px;
}

.rti-handbook-info-icon {
    color: #1565c0;
    font-size: 19px;
    min-width: 19px;
    margin-top: 2px;
}

.rti-handbook-info-content {
    min-width: 0;
}

.rti-handbook-info strong {
    display: block;
    color: #1e3a5f;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 3px;
}

.rti-handbook-info p {
    margin: 0;
    color: #53657a;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
           TABLET
           992px AND BELOW
           ========================================================= */

@media (max-width: 991.98px) {

    .rti-handbook-header {
        padding: 36px 20px;
    }

        .rti-handbook-header h1 {
            font-size: 29px;
        }

    .rti-handbook-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
           MOBILE
           767px AND BELOW
           ========================================================= */

@media (max-width: 767.98px) {

    .rti-handbook-page {
        padding-bottom: 35px;
    }

    .rti-handbook-header {
        padding: 30px 16px;
    }

    .rti-handbook-header-inner {
        align-items: flex-start;
        gap: 14px;
    }

    .rti-handbook-icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
        border-radius: 14px;
        font-size: 23px;
    }

    .rti-handbook-eyebrow {
        font-size: 9px;
        letter-spacing: .8px;
        line-height: 1.4;
    }

    .rti-handbook-header h1 {
        font-size: 23px;
        line-height: 1.25;
    }

    .rti-handbook-header p {
        font-size: 12px;
        line-height: 1.5;
        margin-top: 6px;
    }

    .rti-handbook-content {
        padding: 28px 14px;
    }

    .rti-section-heading {
        gap: 11px;
        margin-bottom: 18px;
    }

    .rti-section-heading-icon {
        width: 43px;
        height: 43px;
        min-width: 43px;
        border-radius: 11px;
        font-size: 17px;
    }

    .rti-section-heading-text span {
        font-size: 9px;
    }

    .rti-section-heading-text h2 {
        font-size: 20px;
    }

    .rti-handbook-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rti-handbook-card {
        padding: 16px 13px;
        gap: 12px;
        border-radius: 13px;
    }

    .handbook-card-icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
        border-radius: 11px;
        font-size: 19px;
    }

    .handbook-card-label {
        font-size: 9px;
    }

    .handbook-card-content h3 {
        font-size: 21px;
    }

    .handbook-card-content p {
        font-size: 11px;
        margin-top: 3px;
    }

    .handbook-card-action {
        width: 31px;
        height: 31px;
        min-width: 31px;
        font-size: 11px;
    }

    .rti-handbook-info {
        margin-top: 20px;
        padding: 14px;
        gap: 10px;
        border-radius: 12px;
    }

    .rti-handbook-info-icon {
        font-size: 17px;
        min-width: 17px;
    }

    .rti-handbook-info strong {
        font-size: 13px;
    }

    .rti-handbook-info p {
        font-size: 11px;
        line-height: 1.55;
    }
}


/* =========================================================
           SMALL PHONES
           480px AND BELOW
           ========================================================= */

@media (max-width: 480px) {

    .rti-handbook-header {
        padding: 25px 12px;
    }

    .rti-handbook-header-inner {
        gap: 11px;
    }

    .rti-handbook-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 12px;
        font-size: 20px;
    }

    .rti-handbook-eyebrow {
        font-size: 8px;
    }

    .rti-handbook-header h1 {
        font-size: 20px;
    }

    .rti-handbook-header p {
        font-size: 11px;
    }

    .rti-handbook-content {
        padding: 22px 10px;
    }

    .rti-section-heading {
        margin-bottom: 15px;
    }

    .rti-section-heading-icon {
        width: 39px;
        height: 39px;
        min-width: 39px;
        font-size: 15px;
    }

    .rti-section-heading-text h2 {
        font-size: 18px;
    }

    .rti-handbook-card {
        padding: 14px 11px;
        gap: 10px;
    }

    .handbook-card-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .handbook-card-content h3 {
        font-size: 19px;
    }

    .handbook-card-content p {
        font-size: 10px;
    }

    .handbook-card-action {
        width: 29px;
        height: 29px;
        min-width: 29px;
    }

    .rti-handbook-info {
        padding: 12px;
    }
}


/* =========================================================
           VERY SMALL PHONES
           360px AND BELOW
           ========================================================= */

@media (max-width: 360px) {

    .rti-handbook-header {
        padding: 22px 10px;
    }

    .rti-handbook-header-inner {
        gap: 9px;
    }

    .rti-handbook-icon {
        width: 43px;
        height: 43px;
        min-width: 43px;
        font-size: 18px;
    }

    .rti-handbook-header h1 {
        font-size: 18px;
    }

    .rti-handbook-header p {
        font-size: 10px;
    }

    .rti-handbook-content {
        padding-left: 8px;
        padding-right: 8px;
    }

    .rti-section-heading-text h2 {
        font-size: 17px;
    }

    .rti-handbook-card {
        padding: 13px 10px;
    }

    .handbook-card-icon {
        width: 39px;
        height: 39px;
        min-width: 39px;
        font-size: 17px;
    }

    .handbook-card-content h3 {
        font-size: 18px;
    }

    .handbook-card-action {
        display: none;
    }
}

.audit-page {
    padding: 30px 15px 50px;
    background: #f6f8fb;
}

.audit-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.audit-header {
    background: linear-gradient(135deg, #337ab7, #23527c);
    border-radius: 16px;
    padding: 30px;
    color: #fff;
    margin-bottom: 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.10);
}

.audit-header-content {
    display: flex;
    align-items: center;
    gap: 18px;
}

.audit-header-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.audit-header h1 {
    margin: 0 0 7px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}

.audit-header p {
    margin: 0;
    font-size: 15px;
    opacity: 0.9;
    line-height: 1.6;
}

/* Card */
.audit-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
    border: 1px solid #e8edf3;
}

.audit-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e9edf2;
}

.audit-title-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    background: #eaf3fb;
    color: #337ab7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.audit-card-title h2 {
    margin: 0;
    color: #26384a;
    font-size: 21px;
    font-weight: 700;
}

.audit-card-title p {
    margin: 4px 0 0;
    color: #718096;
    font-size: 14px;
}

/* Document List */
.audit-document-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.audit-document-item {
    width: 100%;
}

.audit-document-link {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 17px 18px;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid #e3e9f0;
    border-radius: 12px;
    color: #26384a;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

    .audit-document-link:hover {
        text-decoration: none;
        background: #eef6fd;
        border-color: #337ab7;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(51, 122, 183, 0.10);
    }

.document-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 10px;
    background: #fff;
    color: #d9534f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.document-content {
    flex: 1;
    min-width: 0;
}

.document-title {
    display: block;
    color: #26384a;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.document-meta {
    display: block;
    margin-top: 3px;
    color: #718096;
    font-size: 13px;
}

.document-arrow {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: #eaf3fb;
    color: #337ab7;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.audit-document-link:hover .document-arrow {
    background: #337ab7;
    color: #fff;
}

/* Information bar */
.audit-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #eef6fd;
    color: #456;
    font-size: 14px;
    line-height: 1.6;
}

    .audit-info i {
        color: #337ab7;
        margin-top: 3px;
    }

/* Tablet */
@media (max-width: 768px) {

    .audit-page {
        padding: 20px 12px 35px;
    }

    .audit-header {
        padding: 22px 18px;
        border-radius: 13px;
    }

        .audit-header h1 {
            font-size: 23px;
        }

        .audit-header p {
            font-size: 14px;
        }

    .audit-header-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 21px;
    }

    .audit-card {
        padding: 20px 16px;
        border-radius: 13px;
    }

    .audit-card-title h2 {
        font-size: 19px;
    }
}

/* Mobile */
@media (max-width: 576px) {

    .audit-page {
        padding: 15px 10px 30px;
    }

    .audit-header {
        padding: 20px 15px;
        margin-bottom: 15px;
    }

    .audit-header-content {
        align-items: flex-start;
        gap: 12px;
    }

    .audit-header-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 10px;
        font-size: 18px;
    }

    .audit-header h1 {
        font-size: 20px;
        line-height: 1.35;
    }

    .audit-header p {
        font-size: 13px;
        line-height: 1.5;
    }

    .audit-card {
        padding: 18px 12px;
    }

    .audit-card-title {
        gap: 9px;
        margin-bottom: 16px;
        padding-bottom: 14px;
    }

    .audit-title-icon {
        width: 37px;
        height: 37px;
        min-width: 37px;
        font-size: 16px;
    }

    .audit-card-title h2 {
        font-size: 17px;
    }

    .audit-card-title p {
        font-size: 12px;
    }

    .audit-document-list {
        gap: 10px;
    }

    .audit-document-link {
        padding: 13px 11px;
        gap: 10px;
        border-radius: 10px;
    }

    .document-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 17px;
    }

    .document-title {
        font-size: 14px;
        line-height: 1.45;
    }

    .document-meta {
        font-size: 11px;
    }

    .document-arrow {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 11px;
    }

    .audit-info {
        padding: 13px;
        font-size: 12px;
        margin-top: 15px;
    }
}

/* Very small phones */
@media (max-width: 360px) {

    .audit-header h1 {
        font-size: 18px;
    }

    .audit-header p {
        font-size: 12px;
    }

    .audit-card {
        padding: 15px 9px;
    }

    .audit-document-link {
        padding: 11px 8px;
        gap: 8px;
    }

    .document-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .document-title {
        font-size: 13px;
    }

    .document-arrow {
        width: 25px;
        height: 25px;
        min-width: 25px;
    }
}
/* =========================================================
       RTI PAGE
    ========================================================= */

.rti-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 35px 20px 60px;
}


/* =========================================================
       HERO
    ========================================================= */

.rti-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 32px;
    margin-bottom: 28px;
    border-radius: 18px;
    background: linear-gradient( 135deg, #eef6ff 0%, #ffffff 100% );
    border: 1px solid #dce9f7;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}


.rti-hero-icon {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #337ab7;
    color: #ffffff;
    font-size: 30px;
    box-shadow: 0 8px 20px rgba(51, 122, 183, 0.25);
}


.rti-eyebrow {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #337ab7;
}


.rti-hero h1 {
    margin: 0 0 7px;
    font-size: 30px;
    font-weight: 700;
    color: #1f2937;
}


.rti-hero p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #64748b;
}


/* =========================================================
       CONTENT CARD
    ========================================================= */

.rti-content-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}


/* =========================================================
       SECTION HEADER
    ========================================================= */

.rti-section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #edf0f3;
}


.rti-section-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef6ff;
    color: #337ab7;
    font-size: 21px;
}


.rti-section-header h2 {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 700;
    color: #1f2937;
}


.rti-section-header p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}


/* =========================================================
       DOCUMENT LIST
    ========================================================= */

.rti-document-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.rti-document {
    display: flex;
    align-items: center;
    gap: 17px;
    width: 100%;
    padding: 20px;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}


    .rti-document:hover {
        transform: translateY(-2px);
        background: #ffffff;
        border-color: #b9d5ee;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    }


/* =========================================================
       PDF ICON
    ========================================================= */

.rti-document-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fff1f2;
    color: #dc2626;
    font-size: 23px;
}


/* =========================================================
       DOCUMENT CONTENT
    ========================================================= */

.rti-document-content {
    flex: 1;
    min-width: 0;
}


    .rti-document-content h3 {
        margin: 0 0 5px;
        font-size: 17px;
        font-weight: 700;
        color: #1f2937;
        line-height: 1.4;
    }


    .rti-document-content p {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        color: #6b7280;
    }


/* =========================================================
       ARROW
    ========================================================= */

.rti-document-arrow {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef6ff;
    color: #337ab7;
    font-size: 15px;
    transition: background 0.2s ease, color 0.2s ease;
}


.rti-document:hover .rti-document-arrow {
    background: #337ab7;
    color: #ffffff;
}


/* =========================================================
       INFORMATION BAR
    ========================================================= */

.rti-info-bar {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 22px;
    padding: 17px 20px;
    border-radius: 13px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}


.rti-info-icon {
    color: #337ab7;
    font-size: 18px;
    flex: 0 0 auto;
}


.rti-info-bar strong {
    display: block;
    margin-bottom: 2px;
    color: #374151;
    font-size: 14px;
}


/* =========================================================
       TABLET
    ========================================================= */

@media (max-width: 768px) {

    .rti-page {
        padding: 25px 15px 45px;
    }


    .rti-hero {
        padding: 25px 20px;
        gap: 16px;
        border-radius: 15px;
    }


    .rti-hero-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        border-radius: 14px;
        font-size: 24px;
    }


    .rti-hero h1 {
        font-size: 24px;
    }


    .rti-content-card {
        padding: 22px 18px;
        border-radius: 15px;
    }


    .rti-section-header {
        align-items: flex-start;
    }


        .rti-section-header h2 {
            font-size: 19px;
        }
}


/* =========================================================
       MOBILE
    ========================================================= */

@media (max-width: 576px) {

    .rti-page {
        padding: 18px 12px 35px;
    }


    .rti-hero {
        display: block;
        padding: 22px 18px;
        text-align: center;
    }


    .rti-hero-icon {
        margin: 0 auto 15px;
    }


    .rti-eyebrow {
        font-size: 11px;
    }


    .rti-hero h1 {
        font-size: 22px;
        line-height: 1.3;
    }


    .rti-hero p {
        font-size: 13px;
    }


    .rti-content-card {
        padding: 20px 14px;
    }


    .rti-section-header {
        gap: 11px;
        padding-bottom: 18px;
        margin-bottom: 18px;
    }


    .rti-section-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
        border-radius: 11px;
        font-size: 18px;
    }


    .rti-section-header h2 {
        font-size: 17px;
    }


    .rti-section-header p {
        font-size: 12px;
    }


    .rti-document {
        gap: 12px;
        padding: 15px 13px;
        border-radius: 12px;
    }


    .rti-document-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
        border-radius: 10px;
        font-size: 19px;
    }


    .rti-document-content h3 {
        font-size: 14px;
        line-height: 1.35;
    }


    .rti-document-content p {
        font-size: 11px;
    }


    .rti-document-arrow {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 8px;
        font-size: 12px;
    }


    .rti-info-bar {
        padding: 14px;
        font-size: 11px;
    }


        .rti-info-bar strong {
            font-size: 12px;
        }
}


/* =========================================================
       VERY SMALL DEVICES
    ========================================================= */

@media (max-width: 360px) {

    .rti-document {
        gap: 9px;
        padding: 12px 10px;
    }


    .rti-document-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }


    .rti-document-content h3 {
        font-size: 13px;
    }


    .rti-document-content p {
        display: none;
    }


    .rti-document-arrow {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }
}

.related-links-page {
    padding: 45px 15px 60px;
    background: #f6f8fb;
    min-height: 70vh;
}

.related-links-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */

.related-links-header {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 25px;
    border: 1px solid #e7ebf0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.header-icon {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #337ab7, #245b8f);
    color: #ffffff;
    font-size: 25px;
}

.header-eyebrow {
    display: block;
    color: #337ab7;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 4px;
}

.related-links-header h1 {
    margin: 0;
    color: #1d2939;
    font-size: 28px;
    font-weight: 700;
}

.related-links-header p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 15px;
}

/* Main Card */

.related-links-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #e7ebf0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Link */

.related-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    text-decoration: none !important;
    background: #ffffff;
    border: 1px solid #e4e8ee;
    border-radius: 12px;
    transition: all .2s ease;
}

    .related-link:hover {
        transform: translateY(-2px);
        border-color: #337ab7;
        box-shadow: 0 7px 18px rgba(51, 122, 183, .12);
        background: #fafdff;
    }

.link-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf5fc;
    color: #337ab7;
    font-size: 18px;
}

.link-content {
    min-width: 0;
    flex: 1;
}

    .link-content strong {
        display: block;
        color: #25344a;
        font-size: 15px;
        line-height: 1.4;
        font-weight: 600;
    }

    .link-content small {
        display: block;
        color: #7b8794;
        font-size: 12px;
        margin-top: 3px;
        overflow-wrap: anywhere;
    }

.external-icon {
    color: #98a2b3;
    font-size: 13px;
    flex-shrink: 0;
    transition: .2s ease;
}

.related-link:hover .external-icon {
    color: #337ab7;
    transform: translate(2px, -2px);
}

/* Information */

.related-links-info {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 13px 16px;
    border-radius: 10px;
    background: #edf5fc;
    color: #526579;
    font-size: 13px;
}

    .related-links-info i {
        color: #337ab7;
    }

/* Tablet */

@media (max-width: 900px) {

    .related-links-page {
        padding: 30px 15px 45px;
    }

    .links-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile */

@media (max-width: 576px) {

    .related-links-page {
        padding: 20px 10px 35px;
    }

    .related-links-header {
        padding: 20px 17px;
        gap: 13px;
        border-radius: 13px;
        align-items: flex-start;
    }

    .header-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 11px;
        font-size: 19px;
    }

    .header-eyebrow {
        font-size: 10px;
        letter-spacing: .5px;
    }

    .related-links-header h1 {
        font-size: 21px;
        line-height: 1.25;
    }

    .related-links-header p {
        font-size: 13px;
        line-height: 1.5;
    }

    .related-links-card {
        padding: 12px;
        border-radius: 13px;
    }

    .links-grid {
        gap: 10px;
    }

    .related-link {
        padding: 12px;
        gap: 11px;
        border-radius: 10px;
    }

    .link-icon {
        width: 39px;
        height: 39px;
        min-width: 39px;
        border-radius: 9px;
        font-size: 15px;
    }

    .link-content strong {
        font-size: 13px;
        line-height: 1.35;
    }

    .link-content small {
        font-size: 11px;
    }

    .external-icon {
        font-size: 11px;
    }

    .related-links-info {
        font-size: 12px;
        line-height: 1.4;
        padding: 11px 13px;
    }
}

/* Very Small Devices */

@media (max-width: 380px) {

    .related-links-header {
        padding: 16px 13px;
    }

    .header-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .related-links-header h1 {
        font-size: 18px;
    }

    .related-links-card {
        padding: 8px;
    }

    .related-link {
        padding: 10px;
        gap: 9px;
    }

    .link-icon {
        width: 35px;
        height: 35px;
        min-width: 35px;
    }

    .link-content strong {
        font-size: 12px;
    }
}

.inspection-page {
    background: #f5f8fc;
    min-height: 100vh;
}

/* =========================================================
HERO
========================================================= */

.inspection-hero {
    background: linear-gradient(135deg, #0d6efd, #084298);
    color: #fff;
    padding: 45px 0;
    position: relative;
    overflow: hidden;
}

    .inspection-hero::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        right: -100px;
        top: -150px;
    }

.inspection-hero-content {
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
    z-index: 1;
}

.inspection-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    font-size: 30px;
}

.inspection-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .78rem;
    font-weight: 600;
    opacity: .8;
    margin-bottom: 5px;
}

.inspection-hero h1 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-weight: 700;
}

.inspection-hero p {
    margin: 8px 0 0;
    max-width: 750px;
    opacity: .9;
}

/* =========================================================
INFORMATION CARD
========================================================= */

.info-card {
    background: #fff;
    border: 1px solid #e1e8f0;
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 5px 20px rgba(30, 60, 90, .05);
}

.info-card-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f1ff;
    color: #0d6efd;
    font-size: 18px;
}

.info-card h5 {
    margin: 0 0 4px;
    font-weight: 700;
    color: #17324d;
}

.info-card p {
    color: #65758b;
}

/* =========================================================
SECTIONS
========================================================= */

.resource-section {
    margin-top: 42px;
}

.section-heading {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto 45px auto;
}

.section-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    background: #e8f1ff;
    color: #0d6efd;
    font-size: .85rem;
    font-weight: 700;
}

.section-heading h2 {
    margin: 0;
    color: #17324d;
    font-size: 1.35rem;
    font-weight: 700;
}

.section-heading p {
    color: #718096;
    margin: 4px 0 0;
}

/* =========================================================
RESOURCE CARDS
========================================================= */

.resource-card {
    min-height: 92px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 1px solid #e1e8f0;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: all .2s ease;
    box-shadow: 0 4px 15px rgba(30, 60, 90, .04);
}

    .resource-card:hover {
        transform: translateY(-3px);
        border-color: #9fc4ff;
        box-shadow: 0 10px 25px rgba(30, 60, 90, .10);
        color: inherit;
    }

.resource-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background: #eaf2ff;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.resource-content {
    min-width: 0;
    flex: 1;
}

    .resource-content h3 {
        font-size: .98rem;
        line-height: 1.4;
        font-weight: 650;
        color: #243b53;
        margin: 0 0 4px;
    }

    .resource-content span {
        color: #718096;
        font-size: .82rem;
    }

.resource-arrow {
    color: #8b9aad;
    font-size: 15px;
}

.resource-card:hover .resource-arrow {
    color: #0d6efd;
}

.resource-card.compact {
    min-height: 82px;
}

/* =========================================================
MDS TABLE
========================================================= */

.mds-table-wrapper {
    background: #fff;
    border: 1px solid #e1e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(30, 60, 90, .05);
}

.mds-table {
    min-width: 650px;
}

    .mds-table thead th {
        background: #f0f5fb;
        color: #24527a;
        font-size: .82rem;
        text-transform: uppercase;
        letter-spacing: .4px;
        padding: 15px;
        border-bottom: 1px solid #dce5ef;
    }

    .mds-table tbody td {
        padding: 15px;
        color: #52677d;
        border-color: #edf1f5;
    }

        .mds-table tbody td:first-child {
            font-weight: 700;
            color: #0d6efd;
        }

    .mds-table tbody tr:hover {
        background: #f8fbff;
    }

.download-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf2ff;
    color: #0d6efd;
    text-decoration: none;
    transition: all .2s ease;
}

    .download-btn:hover {
        background: #0d6efd;
        color: #fff;
        transform: translateY(-2px);
    }

/* =========================================================
AFFIDAVIT
========================================================= */

.affidavit-section {
    margin-top: 45px;
    padding: 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff, #f7faff);
    border: 1px solid #d9e5f4;
    display: flex;
    align-items: center;
    gap: 18px;
}

.affidavit-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff0f0;
    color: #dc3545;
    font-size: 21px;
}

.affidavit-content {
    flex: 1;
}

    .affidavit-content span {
        color: #718096;
        text-transform: uppercase;
        font-size: .7rem;
        letter-spacing: 1px;
        font-weight: 700;
    }

    .affidavit-content h2 {
        color: #243b53;
        font-size: 1.15rem;
        margin: 3px 0 0;
    }

    .affidavit-content p {
        color: #718096;
        margin: 2px 0 0;
    }

.affidavit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #dc3545;
    color: #fff;
    text-decoration: none;
    padding: 11px 17px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .9rem;
    transition: all .2s ease;
}

    .affidavit-btn:hover {
        background: #bb2d3b;
        color: #fff;
        transform: translateY(-2px);
    }

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767.98px) {
    .inspection-hero {
        padding: 32px 0;
    }

    .inspection-hero-content {
        align-items: flex-start;
        gap: 14px;
    }

    .inspection-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 14px;
        font-size: 22px;
    }

    .inspection-hero h1 {
        font-size: 1.65rem;
    }

    .inspection-hero p {
        font-size: .9rem;
        line-height: 1.55;
    }

    .info-card {
        padding: 16px;
    }

    .resource-section {
        margin-top: 32px;
    }

    .section-heading h2 {
        font-size: 1.15rem;
    }

    .section-heading p {
        font-size: .86rem;
    }

    .resource-card {
        padding: 14px;
        min-height: 78px;
    }

    .resource-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 18px;
    }

    .resource-content h3 {
        font-size: .9rem;
    }

    .resource-content span {
        font-size: .77rem;
    }

    .affidavit-section {
        padding: 18px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .affidavit-content {
        min-width: calc(100% - 75px);
    }

    .affidavit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* EXTRA SMALL DEVICES */

@media (max-width: 400px) {
    .inspection-hero-content {
        display: block;
    }

    .inspection-icon {
        margin-bottom: 15px;
    }

    .section-heading {
        gap: 10px;
    }

    .section-number {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .resource-arrow {
        display: none;
    }

    .resource-card {
        gap: 10px;
    }
}

/*Public Notice*/
.public-notice-section {
    padding: 40px 0 60px;
    background: #f8fafc;
    min-height: 500px;
}

.notice-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.notice-header {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: #fff;
    border-radius: 16px 16px 0 0;
    padding: 22px 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

    .notice-header h2 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
    }

    .notice-header p {
        margin: 5px 0 0;
        opacity: .9;
        font-size: .9rem;
    }

.notice-card {
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.notice-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.notice-table {
    margin: 0;
    min-width: 700px;
}

    .notice-table thead th {
        background: #f1f5f9;
        color: #334155;
        font-weight: 600;
        font-size: .9rem;
        padding: 15px 16px;
        border-bottom: 2px solid #e2e8f0;
        white-space: nowrap;
    }

    .notice-table tbody td {
        padding: 16px;
        vertical-align: middle;
        color: #475569;
        border-color: #edf2f7;
    }

    .notice-table tbody tr {
        transition: background-color .2s ease;
    }

        .notice-table tbody tr:hover {
            background-color: #f8fafc;
        }

.serial-number {
    width: 70px;
    text-align: center;
    font-weight: 600;
    color: #64748b;
}

.college-name {
    font-weight: 500;
    color: #1e293b;
}

.course-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .8rem;
    font-weight: 500;
}

.academic-year {
    white-space: nowrap;
    font-weight: 500;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s ease;
    white-space: nowrap;
}

    .download-btn:hover {
        transform: translateY(-1px);
    }

.empty-state {
    padding: 55px 20px;
    text-align: center;
    color: #64748b;
}

    .empty-state i {
        font-size: 2.5rem;
        margin-bottom: 15px;
        color: #94a3b8;
    }

@media (max-width: 767.98px) {

    .public-notice-section {
        padding: 20px 0 40px;
    }

    .notice-wrapper {
        padding: 0 12px;
    }

    .notice-header {
        padding: 18px;
        border-radius: 12px 12px 0 0;
    }

        .notice-header h2 {
            font-size: 1.25rem;
        }

        .notice-header p {
            font-size: .82rem;
        }

    .notice-card {
        border-radius: 0 0 12px 12px;
    }

    .notice-table {
        min-width: 650px;
    }

        .notice-table thead th,
        .notice-table tbody td {
            padding: 12px;
        }

    .download-btn {
        padding: 7px 11px;
    }
}

@media (max-width: 480px) {

    .notice-wrapper {
        padding: 0 8px;
    }

    .notice-header h2 {
        font-size: 1.1rem;
    }
}

.key-development-page {
    background: #f8fafc;
    min-height: 100vh;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

    .section-title h1 {
        margin: 0;
        color: #337ab7;
        font-size: clamp(1.6rem, 3vw, 2.25rem);
        font-weight: 700;
        letter-spacing: .2px;
    }

.section-title-line {
    width: 45px;
    height: 3px;
    background: #337ab7;
    border-radius: 10px;
}

.development-card {
    border-radius: 16px;
    overflow: hidden;
}

.development-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.development-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 10px;
    border-bottom: 1px solid #e9ecef;
    transition: background-color .2s ease, transform .2s ease;
}

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

    .development-item:hover {
        background-color: #f8fbff;
    }

.development-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8f3ff;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-top: 2px;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.12);
}

.check-icon {
    display: block;
    transform: translateY(-1px);
}

.development-content {
    flex: 1;
    color: #343a40;
    font-size: 1rem;
    line-height: 1.75;
}

@media (max-width: 767.98px) {

    .key-development-page {
        padding-top: 1rem !important;
    }

    .section-title {
        gap: 8px;
    }

    .section-title-line {
        width: 25px;
        height: 2px;
    }

    .development-card {
        border-radius: 12px;
    }

        .development-card .card-body {
            padding: 12px !important;
        }

    .development-item {
        gap: 12px;
        padding: 16px 4px;
    }

    .development-icon {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        font-size: .9rem;
    }

    .development-content {
        font-size: .94rem;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 375px) {

    .section-title h1 {
        font-size: 1.45rem;
    }

    .development-item {
        gap: 9px;
    }

    .development-icon {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
        font-size: .8rem;
    }

    .development-content {
        font-size: .9rem;
    }
}

/*Major Achievement Page*/
.major-achievement-page {
    background: #f8fafc;
    min-height: 100vh;
}
/* Page Header */

.page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.page-title {
    margin: 0;
    color: #337ab7;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
}

.header-line {
    width: 45px;
    height: 3px;
    background: #337ab7;
    border-radius: 10px;
}
/* Main Card */

.achievement-card {
    border-radius: 18px;
    overflow: hidden;
}
/* Sections */

.achievement-section {
    padding: 0 0 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e9ecef;
}

    .achievement-section.last-section {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.achievement-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 15px;
    color: #337ab7;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
}

.title-number {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf4ff;
    color: #337ab7;
    font-size: .82rem;
    font-weight: 700;
    margin-top: -2px;
}

.achievement-section p {
    margin: 0;
    padding-left: 56px;
    color: #495057;
    font-size: 1rem;
    line-height: 1.8;
}
/* Regulation Highlights */

.highlight-box {
    margin-top: 20px;
    padding: 20px;
    background: #f8fbff;
    border: 1px solid #dceeff;
    border-left: 4px solid #337ab7;
    border-radius: 10px;
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    color: #495057;
    font-size: .97rem;
    line-height: 1.7;
    border-bottom: 1px solid #e8f0f7;
}

    .highlight-item:first-child {
        padding-top: 0;
    }

    .highlight-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }
/* CSS Check Icon - no Bootstrap Icons dependency */

.check-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border-radius: 50%;
    background: #337ab7;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
/* Tablet */

@media (max-width: 991.98px) {
    .achievement-title {
        font-size: 1.2rem;
    }

    .achievement-section p {
        line-height: 1.7;
    }
}
/* Mobile */

@media (max-width: 767.98px) {
    .major-achievement-page {
        padding-top: 20px !important;
    }

    .page-header {
        gap: 8px;
    }

    .page-title {
        font-size: 1.55rem;
    }

    .header-line {
        width: 25px;
        height: 2px;
    }

    .achievement-card {
        border-radius: 12px;
    }

        .achievement-card .card-body {
            padding: 18px !important;
        }

    .achievement-section {
        padding-bottom: 22px;
        margin-bottom: 22px;
    }

    .achievement-title {
        gap: 10px;
        font-size: 1.08rem;
        line-height: 1.45;
    }

    .title-number {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: .7rem;
    }

    .achievement-section p {
        padding-left: 0;
        font-size: .94rem;
        line-height: 1.7;
    }

    .highlight-box {
        padding: 14px;
        margin-top: 15px;
    }

    .highlight-item {
        gap: 9px;
        font-size: .91rem;
        line-height: 1.6;
    }

    .check-icon {
        flex: 0 0 23px;
        width: 23px;
        height: 23px;
        font-size: 13px;
    }
}
/* Small phones */

@media (max-width: 375px) {
    .achievement-card .card-body {
        padding: 14px !important;
    }

    .page-title {
        font-size: 1.4rem;
    }

    .achievement-title {
        font-size: 1rem;
    }

    .title-number {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
    }

    .achievement-section p, .highlight-item {
        font-size: .88rem;
    }
}

/* =========================================================
   NDC - What's New Dropdown
   ========================================================= */

.ndc-sublink {
    position: relative;
    font-weight: 500;
    color: #263238;
    transition: color 0.2s ease;
}

    .ndc-sublink:hover,
    .ndc-sublink:focus {
        color: #0d6efd;
    }


/* NEW Badge */

.ndc-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 50px;
    background: #dc3545;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
    vertical-align: middle;
    animation: ndcPulse 2s infinite;
}


@keyframes ndcPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.35);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}


/* Dropdown */

.ndc-dropdown {
    min-width: 350px;
    max-width: 460px;
    margin-top: 0.6rem !important;
    padding: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
    overflow: visible;
}


/* Dropdown item */

.ndc-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 2px;
    border-radius: 8px;
    color: #344054;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}


    .ndc-item:hover,
    .ndc-item:focus {
        color: #0d6efd;
        background-color: #f1f6ff;
        transform: translateX(3px);
    }


/* Icon */

.ndc-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eaf2ff;
    color: #0d6efd;
    font-size: 1rem;
}


/* Divider */

.ndc-dropdown li + li {
    border-top: 1px solid #f0f2f5;
}


/* Mobile */

@media (max-width: 991.98px) {

    .ndc-dropdown {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-top: 0.25rem !important;
        border-radius: 10px;
    }

    .ndc-item {
        padding: 13px 12px;
        font-size: 0.9rem;
    }

    .ndc-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }
}

/*Permitted Seats*/
.seat-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.empty-icon {
    width: 70px;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 1.7rem;
}

.form-select,
.form-control {
    min-height: 44px;
}

.card {
    border-radius: 14px;
}

.table > :not(caption) > * > * {
    padding: .9rem 1rem;
}
/* =========================================================
   NDC NESTED SUBMENUS
   Desktop  : Hover
   Mobile   : Click
   ========================================================= */

.ndc-navbar .dropdown-submenu {
    position: relative !important;
}


/* =========================================================
   DESKTOP - OPEN ON HOVER
   ========================================================= */

@media (min-width: 992px) {

    /* Allow submenu to extend outside parent dropdown */
    .ndc-navbar .dropdown-menu.ndc-dropdown {
        overflow: visible !important;
    }

    /* Nested submenu */
    .ndc-navbar .dropdown-submenu > .dropdown-menu {
        position: absolute !important;
        top: -1px !important;
        left: calc(100% + 5px) !important;
        right: auto !important;
        bottom: auto !important;
        width: 350px !important;
        min-width: 350px !important;
        max-width: 350px !important;
        margin: 0 !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        z-index: 99999 !important;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
        overflow: visible !important;
    }


    /*
     * OPEN ON HOVER
     */
    .ndc-navbar .dropdown-submenu:hover > .dropdown-menu {
        display: block !important;
    }


    /*
     * Also keep it open if JavaScript has added .show
     */
    .ndc-navbar .dropdown-submenu.show > .dropdown-menu {
        display: block !important;
    }


    /*
     * Nested menu item
     */
    .ndc-navbar .dropdown-submenu > .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


        /*
     * Right arrow
     */
        .ndc-navbar .dropdown-submenu > .dropdown-toggle::after {
            content: "";
            display: inline-block;
            margin-left: auto;
            border-top: 0.3em solid transparent;
            border-bottom: 0.3em solid transparent;
            border-left: 0.3em solid currentColor;
            border-right: 0;
            transform: none;
        }
}


/* =========================================================
   MOBILE - OPEN ON CLICK
   ========================================================= */

@media (max-width: 991.98px) {

    .ndc-navbar .dropdown-submenu > .dropdown-menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 5px 0 5px 10px !important;
        padding: 7px !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: 0 !important;
        background: rgba(255, 255, 255, .98);
    }


    /*
     * Mobile JavaScript adds .show
     */
    .ndc-navbar .dropdown-submenu.show > .dropdown-menu {
        display: block !important;
    }


    .ndc-navbar .dropdown-submenu > .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


        /*
     * Mobile arrow
     */
        .ndc-navbar .dropdown-submenu > .dropdown-toggle::after {
            content: "";
            border-top: 0.3em solid transparent;
            border-bottom: 0.3em solid transparent;
            border-left: 0.3em solid currentColor;
            border-right: 0;
            margin-left: auto;
            transform: rotate(90deg);
        }


    .ndc-navbar .dropdown-submenu.show > .dropdown-toggle::after {
        transform: rotate(-90deg);
    }
}
/* =========================================================
   TOP HOME ROW - EQUAL HEIGHT
   Chairperson | Carousel | Latest Circulars
   ========================================================= */

.top-home-row {
    display: flex;
    align-items: stretch;
}

    /* All three columns stretch to the same height */
    .top-home-row > .top-home-column {
        display: flex;
        flex-direction: column;
        align-self: stretch;
    }

/* All cards/carousel occupy the full row height */
.top-home-card,
.top-home-carousel {
    width: 100%;
    height: 100%;
}

/* =========================================================
   CAROUSEL - HEIGHT CONTROLS THE ENTIRE TOP ROW
   ========================================================= */

.top-home-carousel {
    position: relative;
    overflow: hidden;
}

    /*
   The carousel needs a real height.
   Adjust this single value if you want the complete
   top section taller/shorter.
*/
    .top-home-carousel,
    .top-home-carousel .carousel-inner,
    .top-home-carousel .carousel-item {
        height: 430px;
    }

        /* Carousel images fill the exact carousel height */
        .top-home-carousel .slider-img {
            width: 100%;
            height: 430px;
            object-fit: cover;
            display: block;
        }

/* =========================================================
   CHAIRPERSON CARD
   ========================================================= */

.top-home-column:first-child .top-home-card {
    height: 430px;
    overflow: hidden;
}

    .top-home-column:first-child .top-home-card .card-body {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

/* =========================================================
   LATEST CIRCULARS CARD
   ========================================================= */

.top-home-column:last-child .top-home-card {
    height: 310px;
    overflow: hidden;
}

.top-home-column:last-child .top-home-card {
    display: flex;
    flex-direction: column;
}

/* Make notice content consume available space */
.top-home-column:last-child .ndc-notice-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Footer stays at bottom */
.top-home-column:last-child .ndc-notice-footer {
    flex-shrink: 0;
}


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

@media (max-width: 767.98px) {

    .top-home-row {
        display: block;
    }

    .top-home-column {
        display: block !important;
        margin-bottom: 1rem;
    }

    .top-home-carousel,
    .top-home-carousel .carousel-inner,
    .top-home-carousel .carousel-item {
        height: 300px;
    }

        .top-home-carousel .slider-img {
            height: 300px;
        }

    .top-home-column:first-child .top-home-card,
    .top-home-column:last-child .top-home-card {
        height: auto;
        min-height: 300px;
    }
}
/* =========================================================
   NDC HOME TOP ROW - FINAL RESPONSIVE FIX
   Chairperson = Carousel = Latest Circulars
   ========================================================= */

.home-top-row {
    display: flex;
    align-items: stretch;
}

/* Desktop */
@media (min-width: 768px) {

    .home-top-row {
        height: 420px;
    }

    .home-top-col {
        display: flex;
        height: 420px;
    }

        .home-top-col > .ndc-profile-card,
        .home-top-col > .ndc-notice-card,
        .home-top-col > .material-carousel,
        .home-top-col > #ndcCarousel {
            width: 100%;
            height: 420px !important;
            min-height: 420px !important;
            max-height: 420px !important;
        }

        /* Carousel */
        .home-top-col #ndcCarousel {
            overflow: hidden;
            border-radius: 20px;
        }

        .home-top-col .carousel-inner,
        .home-top-col .carousel-item {
            height: 420px !important;
        }

        .home-top-col .slider-img {
            width: 100%;
            height: 420px !important;
            max-height: 420px !important;
            object-fit: cover;
            display: block;
        }

        /* Chairperson */
        .home-top-col .ndc-profile-card {
            overflow: hidden;
        }

            .home-top-col .ndc-profile-card .card-body {
                height: 100%;
                min-height: 0;
                overflow: hidden;
            }

        /* Latest Circulars */
        .home-top-col .ndc-notice-card {
            overflow: hidden;
            display: flex !important;
            flex-direction: column;
        }

        .home-top-col .ndc-notice-scroll {
            min-height: 0;
            flex: 1 1 auto;
            overflow: hidden;
        }

        .home-top-col .ndc-notice-marquee {
            height: 100%;
            overflow: hidden;
        }

        .home-top-col .ndc-notice-marquee-content {
            width: 100%;
        }

        .home-top-col .ndc-notice-footer {
            flex-shrink: 0;
        }
}


/* =========================================================
   NIRF CARD - DESKTOP
   ========================================================= */

.nirf-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.nirf-header {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.nirf-table-header {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
}

.nirf-scroll {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.nirf-marquee {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.nirf-marquee-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.nirf-item {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-items: center;
}

.rank-badge {
    flex-shrink: 0;
}

.college-name {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

    .home-top-row {
        height: 420px;
    }

    .home-top-col {
        height: 420px;
    }

        .home-top-col .ndc-profile-card,
        .home-top-col #ndcCarousel,
        .home-top-col .ndc-notice-card {
            height: 420px !important;
            min-height: 420px !important;
            max-height: 420px !important;
        }

    .nirf-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px;
    }

    .nirf-table-header {
        grid-template-columns: 45px minmax(0, 1fr);
    }

    .college-name {
        font-size: 13px;
        line-height: 1.3;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    /* Do NOT force desktop height on mobile */
    .home-top-row {
        height: auto !important;
        display: block;
    }

    .home-top-col {
        display: flex;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 15px;
    }

        .home-top-col:last-child {
            margin-bottom: 0;
        }

        /* Chairperson */
        .home-top-col .ndc-profile-card {
            width: 100%;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
        }

            .home-top-col .ndc-profile-card .card-body {
                height: auto;
                min-height: 0;
                overflow: visible;
            }

        /* Carousel */
        .home-top-col #ndcCarousel {
            width: 100%;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: 16px;
        }

        .home-top-col .carousel-inner,
        .home-top-col .carousel-item {
            height: 100% !important;
        }

        .home-top-col .slider-img {
            width: 100%;
            height: 100% !important;
            max-height: none !important;
            object-fit: cover;
        }

        /* Latest Circulars */
        .home-top-col .ndc-notice-card {
            width: 100%;
            height: 420px !important;
            min-height: 0 !important;
            max-height: none !important;
        }

        .home-top-col .ndc-notice-scroll {
            min-height: 0;
            overflow: hidden;
        }


    /* =====================================================
       NIRF MOBILE FIX
       ===================================================== */

    .nirf-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 350px;
        max-height: 500px;
        overflow: hidden !important;
    }

    .nirf-header {
        width: 100%;
        max-width: 100%;
        padding: 12px 10px;
        font-size: 15px;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .nirf-table-header {
        width: 100%;
        grid-template-columns: 50px minmax(0, 1fr);
        font-size: 13px;
    }

    .nirf-scroll {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden !important;
    }

    .nirf-marquee,
    .nirf-marquee-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .nirf-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 10px;
        box-sizing: border-box;
    }

    .rank-badge {
        width: 34px;
        min-width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .college-name {
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        font-size: 12px;
        line-height: 1.35;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .nirf-footer {
        width: 100%;
        flex-shrink: 0;
        padding: 10px;
        box-sizing: border-box;
    }

    .nirf-btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        white-space: normal;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

    .home-top-col .ndc-notice-card {
        height: 380px !important;
    }

    .nirf-card {
        min-height: 320px;
    }

    .nirf-header {
        font-size: 14px;
    }

    .nirf-item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 6px;
        padding: 7px 8px;
    }

    .rank-badge {
        width: 30px;
        min-width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .college-name {
        font-size: 11px;
    }
}
/* ========================================================= */
/* NDC HOME FEATURE SECTION                                  */
/* Secretary | Important Updates | NIRF                      */
/* ========================================================= */

.ndc-home-feature-row {
    align-items: stretch;
}


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

.ndc-secretary-card,
.ndc-updates-card,
.ndc-nirf-card {
    height: 100%;
    min-height: 570px;
    border-radius: 22px;
    overflow: hidden;
}


/* ========================================================= */
/* SECRETARY CARD                                            */
/* ========================================================= */

.ndc-secretary-card {
    /*background: #ffffff;*/
    background: linear-gradient(135deg, #153f5b, #087f8c);
    border: 1px solid #e4eaf0;
    box-shadow: 0 8px 28px rgba(20, 55, 85, 0.08);
    display: flex;
}


.ndc-secretary-inner {
    width: 100%;
    height: 100%;
    padding: 24px 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


/* Photo */

.ndc-secretary-photo {
    width: 185px;
    height: 215px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #eef4f8;
    border: 1px solid #dce5ec;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
}


    .ndc-secretary-photo img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }


/* Name */

.ndc-secretary-heading {
    margin-top: 17px;
}


    .ndc-secretary-heading h2 {
        margin: 0;
        color: #fcfcfc;
        font-size: 25px;
        font-weight: 700;
        line-height: 1.2;
    }


.ndc-role-badge {
    display: inline-flex;
    margin-top: 9px;
    padding: 6px 17px;
    border-radius: 50px;
    background: #eaf4fa;
    color: #11628b;
    border: 1px solid #d2e8f4;
    font-size: 14px;
    font-weight: 600;
}


/* Divider */

.ndc-card-divider {
    width: 70px;
    height: 3px;
    margin: 17px auto 15px;
    border-radius: 10px;
    background: #1b78ad;
}


/* Message */

.ndc-secretary-message {
    /*color: #425466;*/
    color: #e8ebed;
    font-size: 15px;
    line-height: 1.65;
    text-align: justify;
    max-width: 100%;
}


/* Button area */

.ndc-secretary-action {
    margin-top: auto;
    padding-top: 18px;
}


.ndc-read-message {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 10px 19px;
    border-radius: 50px;
    background: #176fa3;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #176fa3;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}


    .ndc-read-message i {
        font-size: 13px;
        transition: transform 0.2s ease;
    }


    .ndc-read-message:hover {
        background: #125b86;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(23, 111, 163, 0.22);
    }


        .ndc-read-message:hover i {
            transform: translateX(3px);
        }


/* ========================================================= */
/* IMPORTANT UPDATES CARD                                    */
/* ========================================================= */

.ndc-updates-card {
    display: flex;
    flex-direction: column;
    /*background: #ffffff;*/
    background: linear-gradient(90deg,#69116f 0%,#64106a 50%,#4b0755 100%);
    box-shadow: 0 8px 28px rgba(20, 55, 85, 0.08);
}


/* Header */

.ndc-updates-header {
    min-height: 84px;
    padding: 17px 24px;
    display: flex;
    align-items: center;
    gap: 15px;
    /*background: #f7fafc;*/
    background: linear-gradient( 90deg, #69116f 0%, #64106a 50%, #4b0755 100% );
    border-bottom: 1px solid #e4eaf0;
}


.ndc-updates-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #176fa3;
    color: #ffffff;
    font-size: 18px;
    box-shadow: 0 5px 12px rgba(23, 111, 163, 0.18);
}


.ndc-updates-label {
    margin-bottom: 2px;
    color: #718096;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}


.ndc-updates-header h2 {
    margin: 0;
    color: #f7f9fa;
    font-size: 23px;
    font-weight: 700;
}


/* Body */

.ndc-updates-body {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 24px 20px;
}


/* Status */

.ndc-update-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: #f2f5f4;
    font-size: 13px;
    font-weight: 700;
}


.ndc-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #20a36a;
    box-shadow: 0 0 0 4px rgba(32, 163, 106, 0.10);
}


/* Update title */

.ndc-update-title {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 16px;
    padding: 12px 15px;
    border-radius: 10px;
    background: #f5f8fb;
    border: 1px solid #e2e9ef;
    color: #263f52 !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease;
}


    .ndc-update-title:hover {
        background: #edf5fa;
        border-color: #c8dce8;
    }


.ndc-fire {
    font-size: 18px;
    flex-shrink: 0;
}


/* ========================================================= */
/* IMAGE SLIDER                                              */
/* ========================================================= */

.ndc-slider-container {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #eef2f5;
    border: 1px solid #dfe7ed;
}


.ndc-slider {
    position: relative;
    width: 100%;
    height: 100%;
}


/* Slides */

.ndc-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease;
}


    .ndc-slide.active {
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }


    .ndc-slide img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }


/* Slider buttons */

.ndc-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #176fa3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.2s ease;
}


    .ndc-slider-btn:hover {
        background: #ffffff;
        transform: translateY(-50%) scale(1.05);
    }


.ndc-slider-prev {
    left: 13px;
}


.ndc-slider-next {
    right: 13px;
}


/* Dots */

.ndc-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.35);
}


.ndc-slider-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}


    .ndc-slider-dot.active {
        width: 22px;
        border-radius: 10px;
        background: #ffffff;
    }


/* ========================================================= */
/* NIRF CARD                                                 */
/* ========================================================= */

.ndc-nirf-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e1e7ed;
    box-shadow: 0 8px 28px rgba(20, 55, 85, 0.08);
}


/* Header */

.ndc-nirf-header {
    min-height: 86px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    background: #176fa3;
    color: #ffffff;
    text-align: center;
}


.ndc-nirf-trophy {
    font-size: 22px;
    flex-shrink: 0;
}


.ndc-nirf-header span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    opacity: 0.92;
}


.ndc-nirf-header strong {
    display: block;
    margin-top: 2px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}


/* Table columns */

.ndc-nirf-columns {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    flex-shrink: 0;
    min-height: 50px;
    background: #edf5fb;
    border-bottom: 1px solid #d9e5ee;
    color: #17649a;
    font-size: 14px;
    font-weight: 700;
    align-items: center;
}


.ndc-nirf-rank-heading {
    text-align: center;
}


.ndc-nirf-college-heading {
    padding: 0 12px;
    text-align: left;
}


/* Ranking scroll */

/* ========================================================= */
/* NIRF AUTO SCROLL                                          */
/* ========================================================= */

.ndc-nirf-scroll {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}


/*
   The list contains the original rankings + duplicate rankings.
   Moving it upward by 50% creates a seamless loop.
*/

.ndc-nirf-list {
    width: 100%;
    animation: ndcNirfAutoScroll 25s linear infinite;
    will-change: transform;
}


/* Pause when user places mouse over ranking */

.ndc-nirf-scroll:hover .ndc-nirf-list {
    animation-play-state: paused;
}


/* Continuous vertical movement */

@keyframes ndcNirfAutoScroll {

    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}


/* ========================================================= */
/* NIRF ITEMS                                                */
/* ========================================================= */

.ndc-nirf-item {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    align-items: center;
    min-height: 76px;
    padding: 10px 8px;
    box-sizing: border-box;
    border-bottom: 1px solid #edf1f4;
    background: #ffffff;
}


    .ndc-nirf-item:nth-child(even) {
        background: #f9fbfd;
    }


/* ========================================================= */
/* RANK BADGE                                                */
/* ========================================================= */

.ndc-rank-badge {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f3fa;
    border: 1px solid #cce3f0;
    color: #176fa3;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}


/* ========================================================= */
/* COLLEGE NAME                                              */
/* ========================================================= */

.ndc-college-name {
    min-width: 0;
    padding: 0 7px;
    color: #334e61;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
}


/* ========================================================= */
/* MOBILE                                                   */
/* ========================================================= */

@media (max-width: 767.98px) {

    .ndc-nirf-list {
        animation-duration: 22s;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ndc-nirf-list {
        animation: none;
    }
}


/* Footer */

.ndc-nirf-footer {
    flex-shrink: 0;
    padding: 14px;
    background: #f8fafc;
    border-top: 1px solid #e4eaf0;
}


    .ndc-nirf-footer a {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 9px 12px;
        border-radius: 8px;
        background: #176fa3;
        color: #ffffff !important;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        box-sizing: border-box;
        transition: background 0.2s ease, transform 0.2s ease;
    }


        .ndc-nirf-footer a:hover {
            background: #125b86;
            transform: translateY(-1px);
        }


    .ndc-nirf-footer i {
        font-size: 11px;
    }


/* ========================================================= */
/* DESKTOP HEIGHT CONTROL                                    */
/* ========================================================= */

@media (min-width: 992px) {

    .ndc-secretary-card,
    .ndc-updates-card,
    .ndc-nirf-card {
        height: 570px;
        min-height: 570px;
        max-height: 570px;
    }
}


/* ========================================================= */
/* TABLET                                                   */
/* ========================================================= */

@media (max-width: 991.98px) {

    .ndc-secretary-card,
    .ndc-updates-card,
    .ndc-nirf-card {
        min-height: 520px;
    }


    .ndc-updates-card {
        min-height: 550px;
    }


    .ndc-nirf-card {
        min-height: 520px;
    }
}


/* ========================================================= */
/* MOBILE                                                   */
/* ========================================================= */

@media (max-width: 767.98px) {

    .ndc-home-feature-row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }


    .ndc-secretary-card,
    .ndc-updates-card,
    .ndc-nirf-card {
        min-height: 0;
        height: auto;
        max-height: none;
        border-radius: 16px;
    }


    /* Secretary */

    .ndc-secretary-inner {
        padding: 20px 18px;
    }


    .ndc-secretary-photo {
        width: 150px;
        height: 175px;
    }


    .ndc-secretary-heading h2 {
        font-size: 22px;
    }


    .ndc-secretary-message {
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
    }


    /* Updates */

    .ndc-updates-header {
        min-height: 74px;
        padding: 14px 17px;
    }


    .ndc-updates-icon {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }


    .ndc-updates-header h2 {
        font-size: 20px;
    }


    .ndc-updates-body {
        padding: 15px 17px 17px;
    }


    .ndc-update-title {
        font-size: 14px;
        padding: 11px 12px;
    }


    .ndc-slider-container {
        height: 300px;
        flex: none;
    }


    .ndc-slider-btn {
        width: 36px;
        height: 36px;
    }


    /* NIRF */

    .ndc-nirf-header {
        min-height: 76px;
    }


        .ndc-nirf-header strong {
            font-size: 18px;
        }


    .ndc-nirf-item {
        min-height: 70px;
    }


    .ndc-college-name {
        font-size: 13px;
    }
}


/* ========================================================= */
/* SMALL MOBILE                                              */
/* ========================================================= */

@media (max-width: 480px) {

    .ndc-secretary-photo {
        width: 135px;
        height: 160px;
    }


    .ndc-secretary-heading h2 {
        font-size: 20px;
    }


    .ndc-update-title {
        align-items: flex-start;
        font-size: 13px;
    }


    .ndc-slider-container {
        height: 235px;
    }


    .ndc-nirf-columns,
    .ndc-nirf-item {
        grid-template-columns: 58px minmax(0, 1fr);
    }


    .ndc-rank-badge {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }


    .ndc-college-name {
        padding: 0 5px;
        font-size: 12px;
    }
}
/* =========================================================
   NDC DIGITAL PORTAL - COMPACT MODERN CARDS
   ========================================================= */

.dashboard-grid.modern-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.dashboard-grid .ndc-card {
    position: relative;
    height: 100px;
    min-height: 100px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}


/* Top colored line */

.dashboard-grid .card-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient( 90deg, #155a9c, #00b8d4 );
}


/* Decorative circle */

.dashboard-grid .ndc-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -60px;
    top: -65px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.055);
    pointer-events: none;
}


/* ---------------------------------------------------------
   ICON
   --------------------------------------------------------- */

.dashboard-grid .icon-wrap {
    width: 38px;
    height: 38px;
    min-width: 38px;
    margin: 0 0 7px 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.dashboard-grid .ndc-card h3 {
    margin: 0 0 3px 0;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    color: #15558c;
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.dashboard-grid .ndc-card p {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.3;
    color: #6b7280;
    max-width: 90%;
    position: relative;
    z-index: 2;
}


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

.dashboard-grid .card-arrow {
    position: absolute;
    right: 14px;
    bottom: 13px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #1769c2;
    font-size: 14px;
    z-index: 3;
    transition: transform 0.2s ease, background 0.2s ease;
}


.dashboard-grid .ndc-card:hover .card-arrow {
    transform: translateX(3px);
    background: #f1f6fc;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.dashboard-grid .ndc-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.10);
}


/* =========================================================
   BADGES
   ========================================================= */

.dashboard-grid .card-badge {
    position: absolute;
    top: 9px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 600;
    background: #edf3ff;
    color: #2563eb;
    z-index: 5;
}


/* =========================================================
   SPECIAL CARDS
   ========================================================= */

.dashboard-grid .featured-card,
.dashboard-grid .biometric-card,
.dashboard-grid .support-card {
    min-height: 100px;
}


/* ---------------------------------------------------------
   OFSAMS ACTIONS
   --------------------------------------------------------- */

.dashboard-grid .card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    position: relative;
    z-index: 5;
}

.dashboard-grid .portal-link,
.dashboard-grid .faq-link {
    font-size: 9px;
    text-decoration: none;
    padding: 3px 7px;
    border-radius: 5px;
}

.dashboard-grid .portal-link {
    color: #2563eb;
}

.dashboard-grid .faq-link {
    color: #64748b;
}


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

.dashboard-grid .card-footer-modern {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 9px;
    color: #2563eb;
    position: relative;
    z-index: 4;
}


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

@media (max-width: 1199px) {

    .dashboard-grid.modern-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width: 991px) {

    .dashboard-grid.modern-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 575px) {

    .dashboard-grid.modern-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dashboard-grid .ndc-card {
        height: 88px;
        min-height: 88px;
        padding: 12px 14px;
        flex-direction: row;
        align-items: center;
        gap: 11px;
    }

    .dashboard-grid .icon-wrap {
        width: 34px;
        height: 34px;
        min-width: 34px;
        margin: 0;
        font-size: 14px;
    }

    .dashboard-grid .ndc-card h3 {
        font-size: 14px;
    }

    .dashboard-grid .ndc-card p {
        font-size: 10px;
    }

    .dashboard-grid .card-arrow {
        right: 12px;
        bottom: 50%;
        transform: translateY(50%);
    }
}
/* =========================================================
           PAGE
           ========================================================= */

.dentist-page {
    padding: 24px 0 40px;
    background: #f5f7fb;
    min-height: calc(100vh - 100px);
}


/* =========================================================
           HEADER
           ========================================================= */

.dentist-header {
    background: linear-gradient( 135deg, #0b4f82, #087ea4 );
    border-radius: 18px;
    padding: 24px 28px;
    color: #ffffff;
    margin-bottom: 18px;
    box-shadow: 0 8px 25px rgba(11, 79, 130, 0.15);
}


.dentist-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.dentist-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}


.dentist-header-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    font-size: 23px;
}


.dentist-header h1 {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
}


.dentist-header p {
    margin: 4px 0 0;
    opacity: 0.88;
    font-size: 13px;
}

.dentist-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


.dentist-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.25);
    color: #ffffff;
    background: rgba(255,255,255,0.12);
    transition: all .2s ease;
}


    .dentist-action-btn:hover {
        background: #ffffff;
        color: #0b4f82;
    }


/* =========================================================
           DISCLAIMER
           ========================================================= */

.dentist-disclaimer {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #0b6fa4;
    border-radius: 12px;
    padding: 11px 15px;
    margin-bottom: 18px;
    box-shadow: 0 3px 12px rgba(15,23,42,.04);
}


.disclaimer-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: #eaf5fb;
    color: #087ea4;
    display: flex;
    align-items: center;
    justify-content: center;
}


.disclaimer-label {
    font-weight: 700;
    color: #334155;
    font-size: 12px;
    white-space: nowrap;
}


.disclaimer-text {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
           MAIN CARD
           ========================================================= */

.dentist-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(15,23,42,.06);
}


/* =========================================================
           CARD TOOLBAR
           ========================================================= */

.dentist-toolbar {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #edf0f4;
}


.record-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 13px;
}


.record-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 3px 8px;
    border-radius: 20px;
    background: #eaf4ff;
    color: #1261a0;
    font-weight: 700;
    font-size: 12px;
}


.print-btn {
    border: 1px solid #dbe3ec;
    background: #ffffff;
    color: #334155;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    transition: .2s ease;
}


    .print-btn:hover {
        background: #0b6fa4;
        color: #ffffff;
        border-color: #0b6fa4;
    }


/* =========================================================
           TABLE
           ========================================================= */

.dentist-table-wrapper {
    width: 100%;
    overflow-x: auto;
}


.dentist-table {
    width: 100%;
    min-width: 850px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}


    .dentist-table thead th {
        background: #f1f6fb;
        color: #145886;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .25px;
        padding: 12px 10px;
        border-bottom: 1px solid #dce7f0;
        white-space: nowrap;
    }


    .dentist-table tbody td {
        padding: 11px 10px;
        font-size: 12px;
        color: #475569;
        border-bottom: 1px solid #edf1f5;
        vertical-align: middle;
    }


    .dentist-table tbody tr {
        transition: background .15s ease;
    }


        .dentist-table tbody tr:hover {
            background: #f8fbfe;
        }


.serial-number {
    font-weight: 700;
    color: #64748b;
}


.dentist-name {
    font-weight: 700;
    color: #174f7b;
}


.registration-number {
    font-family: monospace;
    font-size: 11px;
    background: #f5f7fa;
    padding: 4px 7px;
    border-radius: 5px;
    color: #334155;
}


.council-name {
    font-size: 11px;
    color: #475569;
}


.address {
    max-width: 260px;
    line-height: 1.45;
}


/* =========================================================
           VIEW BUTTON
           ========================================================= */

.view-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eaf4ff;
    color: #1261a0;
    text-decoration: none;
    transition: all .2s ease;
}


    .view-btn:hover {
        background: #1261a0;
        color: #ffffff;
        transform: translateY(-1px);
    }


/* =========================================================
           EMPTY
           ========================================================= */

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}


.empty-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #94a3b8;
}


.empty-state h5 {
    margin-bottom: 4px;
    color: #475569;
}


.empty-state p {
    font-size: 12px;
    margin: 0;
}


/* =========================================================
           PAGINATION
           ========================================================= */

.dentist-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-top: 1px solid #edf0f4;
    gap: 15px;
    flex-wrap: wrap;
}


.pagination-info {
    font-size: 11px;
    color: #64748b;
}


.pagination {
    margin: 0;
}


    .pagination .page-link {
        border: 1px solid #e2e8f0;
        color: #475569;
        font-size: 11px;
        min-width: 32px;
        text-align: center;
        border-radius: 7px !important;
        margin: 0 2px;
    }


    .pagination .page-item.active .page-link {
        background: #0b6fa4;
        border-color: #0b6fa4;
        color: #ffffff;
    }


    .pagination .page-link:hover {
        background: #eef7fc;
        color: #0b6fa4;
    }


/* =========================================================
           MOBILE
           ========================================================= */

@media (max-width: 767.98px) {

    .dentist-page {
        padding: 12px 0 25px;
    }


    .dentist-header {
        padding: 18px;
        border-radius: 13px;
    }


    .dentist-header-inner {
        align-items: flex-start;
        flex-direction: column;
    }


    .dentist-header h1 {
        font-size: 20px;
    }


    .dentist-header p {
        font-size: 11px;
    }


    .dentist-header-icon {
        width: 44px;
        height: 44px;
    }


    .dentist-actions {
        width: 100%;
    }


    .dentist-action-btn {
        flex: 1;
        justify-content: center;
    }


    .dentist-disclaimer {
        align-items: flex-start;
        flex-wrap: wrap;
    }


    .disclaimer-text {
        flex: 1 1 100%;
    }


    .dentist-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }


    .print-btn {
        width: 100%;
    }


    .dentist-pagination {
        justify-content: center;
    }
}
/*Dentist Details*/

.details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    margin-bottom: 18px;
    /*background: #ffffff;*/
    background: linear-gradient( 135deg, #0b4f82, #087ea4 );
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
}


.details-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}


.details-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    /*background: linear-gradient( 135deg, #0d6efd, #0a58ca );*/
    background: rgba(255,255,255,0.15);
    color: white;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(13,110,253,.20);
}


.details-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #ebeef2;
}


.details-header p {
    color: #ebeef2;
    font-size: 13px;
}


.details-actions {
    display: flex;
    gap: 8px;
}


.details-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15,23,42,.07);
}


.details-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient( 135deg, #f8fbff, #eef5ff );
    border-bottom: 1px solid #e5e7eb;
}


    .details-card-header h5 {
        color: #172033;
        font-size: 16px;
        font-weight: 700;
    }


    .details-card-header small {
        color: #6b7280;
        font-size: 12px;
    }


.id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 20px;
    background: #e7f1ff;
    color: #0d6efd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}


.detail-item {
    padding: 17px 20px;
    border-bottom: 1px solid #edf0f4;
    min-height: 85px;
}


    .detail-item:nth-child(odd) {
        border-right: 1px solid #edf0f4;
    }


.detail-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}


    .detail-label i {
        width: 18px;
        color: #0d6efd;
        text-align: center;
    }


.detail-value {
    color: #172033;
    font-size: 14px;
    font-weight: 600;
    word-break: break-word;
}


.details-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 20px;
    background: #fafbfc;
    color: #6b7280;
    font-size: 11px;
}


    .details-footer strong {
        color: #374151;
    }


@media (max-width: 767px) {

    .details-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .details-actions {
        width: 100%;
    }


        .details-actions button {
            flex: 1;
        }


    .detail-item:nth-child(odd) {
        border-right: 0;
    }


    .details-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media print {

    body {
        background: white !important;
    }


    .details-header {
        box-shadow: none;
        border: none;
        padding: 10px 0;
    }


    .details-actions {
        display: none !important;
    }


    .details-card {
        box-shadow: none;
        border: 1px solid #999;
    }


    .details-footer {
        color: #333;
    }
}

/* =========================================================
           FUNCTION ITEMS
        ========================================================= */

.function-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 16px;
    border: 1px solid #e9edf3;
    border-radius: 14px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .function-item:hover {
        transform: translateY(-2px);
        border-color: #cfe0f7;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    }


.function-number {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f0f6ff;
    color: #0d6efd;
    font-size: 11px;
    font-weight: 700;
    margin-right: 12px;
}


.function-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef7f6;
    color: #087f73;
    margin-right: 14px;
    font-size: 15px;
}


.function-text {
    flex: 1;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.65;
    padding-top: 2px;
}


/* =========================================================
           SECTION DIVIDER
        ========================================================= */

.section-line {
    height: 1px;
    flex: 1;
    background: #e3e8ef;
}


/* =========================================================
           MEMBER CARD
        ========================================================= */

.member-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 125px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e5eaf0;
    border-radius: 18px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .045);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}


    .member-card:hover {
        transform: translateY(-3px);
        border-color: #c8dbf2;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    }


/* =========================================================
           PHOTO
        ========================================================= */

.member-photo {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    border-radius: 16px;
    overflow: hidden;
    background: #f1f4f8;
    border: 1px solid #e1e6ed;
}


    .member-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


/* =========================================================
           MEMBER INFO
        ========================================================= */

.member-info {
    flex: 1;
    min-width: 0;
    margin-left: 20px;
}


.member-name {
    color: #17324d;
    font-size: 18px;
    font-weight: 700;
}


.member-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 50px;
    background: #eef5ff;
    color: #0d6efd;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}


.member-email {
    color: #6b7280;
    font-size: 13px;
    margin-top: 5px;
}


    .member-email i {
        color: #0d6efd;
    }


/* =========================================================
           MEMBER ICONS
        ========================================================= */

.member-icons {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
}


    .member-icons span,
    .member-icons a {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #f4f7fa;
        color: #526273;
        font-size: 13px;
        text-decoration: none;
        transition: .2s ease;
    }


        .member-icons span:hover {
            background: #eef5ff;
            color: #0d6efd;
        }


    .member-icons a {
        background: #fff1f1;
        color: #dc3545;
    }


        .member-icons a:hover {
            background: #dc3545;
            color: #fff;
        }


/* =========================================================
           STATUS
        ========================================================= */

.member-status {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-left: 15px;
    color: #6b7280;
    font-size: 11px;
    white-space: nowrap;
}


.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #198754;
    box-shadow: 0 0 0 3px #e9f7ef;
}


/* =========================================================
           MOBILE
        ========================================================= */

@media (max-width: 767.98px) {

    .member-card {
        align-items: flex-start;
        padding: 15px;
    }

    .member-photo {
        flex: 0 0 70px;
        width: 70px;
        height: 70px;
        border-radius: 12px;
    }

    .member-info {
        margin-left: 14px;
    }

    .member-name {
        font-size: 15px;
    }

    .member-badge {
        font-size: 10px;
    }

    .member-email {
        font-size: 11px;
        word-break: break-word;
    }

    .member-status {
        display: none;
    }

    .function-item {
        padding: 13px;
    }

    .function-number {
        margin-right: 8px;
    }

    .function-icon {
        margin-right: 10px;
    }

    .function-text {
        font-size: 13px;
        line-height: 1.55;
    }
}

.icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #0d6efd;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

    .icon-box:hover {
        transform: translateY(-3px);
        background: #0d6efd;
        color: #fff;
    }

.pdf-icon {
    color: #dc3545;
}

    .pdf-icon:hover {
        background: #dc3545;
        color: #fff;
    }


.card {
    transition: transform .25s ease, box-shadow .25s ease;
}

    .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, .12) !important;
    }


.badge.rounded-circle {
    font-size: .9rem;
}


/* Functions */

section .card-header {
    background: linear-gradient( 135deg, #0b4f82, #087ea4 );
}


@media (max-width: 767.98px) {

    .display-5 {
        font-size: 2rem;
    }

    .card-body {
        padding: 1.25rem !important;
    }
}
/* =========================================================
   DARB MEMBER ID CARDS
   ========================================================= */

.members-section {
    padding: 20px 0 60px;
}

.section-heading {
    text-align: center;
    margin-bottom: 35px;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(135, 7, 39, 0.08);
    color: #870727;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.section-heading h2 {
    margin: 12px 0 5px;
    font-size: 30px;
    font-weight: 700;
    color: #202633;
}

.section-heading p {
    margin: 0;
    color: #6c757d;
}


/* =========================================================
   ID CARD
   ========================================================= */

.member-id-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e1e5ea;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(31, 45, 61, 0.10);
    transition: all 0.3s ease;
}

    .member-id-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 45px rgba(31, 45, 61, 0.16);
    }


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

.id-card-top {
    min-height: 82px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*background: linear-gradient( 135deg, #870727 0%, #a10b35 55%, #6f0521 100% );*/
    background: linear-gradient( 135deg, #0b4f82, #087ea4 );
    color: #fff;
}

.board-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-logo {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient( 135deg, #0b4f82, #087ea4 );
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 23px;
}

.brand-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .6px;
}

.brand-subtitle {
    margin-top: 3px;
    font-size: 12px;
    opacity: .82;
}

.card-type {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 30px;
    background: linear-gradient( 135deg, #0b4f82, #087ea4 );
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
}


/* =========================================================
   CARD BODY
   ========================================================= */

.id-card-body {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px 30px;
}


/* =========================================================
   PHOTO
   ========================================================= */

.member-photo-section {
    width: 170px;
    min-width: 170px;
    text-align: center;
}

.photo-frame {
    width: 145px;
    height: 165px;
    margin: 0 auto 10px;
    padding: 5px;
    background: #fff;
    border: 1px solid #d9dee4;
    border-radius: 12px;
    box-shadow: 0 7px 18px rgba(0,0,0,.10);
}

    .photo-frame img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: 8px;
    }

.member-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #198754;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
}


/* =========================================================
   MEMBER DETAILS
   ========================================================= */

.member-details {
    flex: 1;
    min-width: 0;
}

.member-designation {
    display: inline-block;
    margin-bottom: 7px;
    padding: 5px 11px;
    border-radius: 5px;
    background: #f7e9ee;
    color: #870727;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
}

.member-details h3 {
    margin: 0 0 17px;
    color: #1f2937;
    font-size: 25px;
    font-weight: 750;
}


/* =========================================================
   DETAIL ROW
   ========================================================= */

.detail-line {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.detail-icon {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f4f6f8;
    color: #870727;
    font-size: 14px;
}

.detail-line small {
    display: block;
    margin-bottom: 2px;
    color: #8a929c;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.detail-line strong {
    display: block;
    color: #343a40;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}


/* =========================================================
   TAGS
   ========================================================= */

.member-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

    .member-tags span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border: 1px solid #e3e6ea;
        border-radius: 6px;
        background: #fafbfc;
        color: #5d6670;
        font-size: 10px;
        font-weight: 700;
    }


/* =========================================================
   ACTION
   ========================================================= */

.member-action {
    min-width: 145px;
    display: flex;
    justify-content: center;
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 10px;
    background: linear-gradient( 135deg, #0b4f82, #087ea4 );
    color: #fff;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(135,7,39,.20);
    transition: all .25s ease;
}

    .profile-btn:hover {
        background: #6f0521;
        color: #fff;
        transform: translateY(-2px);
    }

    .profile-btn > i {
        font-size: 20px;
    }

    .profile-btn span {
        font-size: 12px;
        font-weight: 700;
    }

    .profile-btn small {
        display: block;
        margin-top: 2px;
        font-size: 9px;
        font-weight: 400;
        opacity: .75;
    }

.no-document {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #f4f6f8;
    color: #6c757d;
    font-size: 11px;
    font-weight: 700;
}


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

.id-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    border-top: 1px solid #e9ecef;
    background: #fafbfc;
    color: #7a828b;
    font-size: 10px;
    font-weight: 600;
}

    .id-card-footer span {
        display: flex;
        align-items: center;
        gap: 6px;
    }


/* =========================================================
   PRESIDENT CARD
   ========================================================= */

.president-card {
    border: 1px solid rgba(135, 7, 39, .20);
}

    .president-card .id-card-top {
        /*background: linear-gradient( 135deg, #720521, #9b0a32, #5f041c );*/
        background: linear-gradient(135deg, #153f5b, #087f8c);
    }


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

@media (max-width: 767.98px) {

    .members-section {
        padding: 15px 0 40px;
    }

    .section-heading h2 {
        font-size: 24px;
    }

    .id-card-top {
        padding: 14px 16px;
    }

    .card-type {
        display: none;
    }

    .brand-title {
        font-size: 12px;
    }

    .brand-subtitle {
        font-size: 10px;
    }

    .id-card-body {
        flex-direction: column;
        text-align: center;
        padding: 25px 18px;
    }

    .member-photo-section {
        width: 100%;
    }

    .member-details {
        width: 100%;
    }

    .detail-line {
        justify-content: flex-start;
        text-align: left;
    }

    .member-tags {
        justify-content: center;
    }

    .member-action {
        width: 100%;
    }

    .profile-btn {
        width: 100%;
        justify-content: center;
    }

    .id-card-footer {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
}

/* =========================================================
           OFFICERS PAGE
           ========================================================= */

.officers-page {
    background: #f4f7fb;
    min-height: calc(100vh - 100px);
}


/* =========================================================
           HEADER
           ========================================================= */

.officers-header {
    background: linear-gradient( 135deg, #0d4d7d 0%, #176da8 100% );
    border-radius: 14px 14px 0 0;
    border-bottom: 6px solid #f4c400;
    padding: 22px 36px;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}


.header-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.header-kicker {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    padding-left: 20px;
}


    .header-kicker::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        width: 6px;
        height: 42px;
        border-radius: 10px;
        background: #ffd000;
    }


.officers-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .3px;
}


/* =========================================================
           SEARCH
========================================================= */

.officers-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 34px 38px 20px;
    background: #f4f7fb;
}


.search-wrapper {
    width: 540px;
    position: relative;
}


    .search-wrapper i {
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #246b9f;
        z-index: 2;
    }


    .search-wrapper input {
        height: 62px;
        border-radius: 15px;
        border: 1px solid #1688d4;
        padding-left: 60px;
        font-size: 18px;
        background: #fff;
        box-shadow: 5px 0 0 rgba(21, 132, 201, .12), 0 4px 10px rgba(0, 0, 0, .04);
    }


        .search-wrapper input:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12), 5px 0 0 rgba(21, 132, 201, .12);
        }


/* =========================================================
           TABLE CONTAINER
           ========================================================= */

.officers-table-wrapper {
    margin: 0 38px 35px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .06);
    background: #fff;
}


/* =========================================================
           TABLE
           ========================================================= */

.officers-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: 18px;
}


    .officers-table thead th {
        background: linear-gradient( 135deg, #083c69, #1265a0 );
        color: #fff;
        font-weight: 800;
        font-size: 19px;
        padding: 22px 24px;
        vertical-align: middle;
        border-right: 2px solid rgba(255, 255, 255, .35);
        white-space: normal;
    }


        .officers-table thead th:last-child {
            border-right: none;
        }


    .officers-table tbody td {
        padding: 22px 24px;
        vertical-align: middle;
        color: #12395d;
        border-bottom: 1px solid #dce5ee;
        border-right: 1px solid #dce5ee;
        line-height: 1.5;
    }


        .officers-table tbody td:last-child {
            border-right: none;
        }


    .officers-table tbody tr:nth-child(even) {
        background: #f8fbfe;
    }


    .officers-table tbody tr:hover {
        background: #eef7ff;
        transition: .2s ease;
    }


    .officers-table tbody td:first-child {
        color: #173e64;
        font-weight: 500;
    }


    .officers-table tbody strong {
        font-weight: 800;
        color: #123c66;
    }


    .officers-table a {
        color: #0568bd;
        text-decoration: none;
    }


        .officers-table a:hover {
            text-decoration: underline;
        }


.serial-column {
    width: 110px;
}


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

@media (max-width: 992px) {

    .officers-toolbar {
        justify-content: stretch;
    }

    .search-wrapper {
        width: 100%;
    }

    .officers-table-wrapper {
        margin-left: 15px;
        margin-right: 15px;
    }

    .officers-header {
        margin: 0;
    }
}

@media (max-width: 768px) {

    .officers-header {
        padding: 20px;
    }

        .officers-header h1 {
            font-size: 26px;
        }

    .officers-kicker {
        font-size: 14px;
    }

    .officers-toolbar {
        padding: 25px 15px 15px;
    }

    .officers-table {
        font-size: 16px;
        min-width: 1100px;
    }

        .officers-table thead th {
            font-size: 17px;
        }
}
/* Language Button */
.btn-red {
    background: #370a40 !important;
    border: 1px solid #870727 !important;
    color: #fff !important;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

    .btn-red:hover,
    .btn-red:focus,
    .btn-red:active,
    .btn-red.show {
        background: #6d051f !important;
        border-color: #6d051f !important;
        color: #fff !important;
        box-shadow: 0 0 0 0.15rem rgba(135, 7, 39, 0.20);
    }

    /* Dropdown arrow */
    .btn-red.dropdown-toggle::after {
        border-top-color: #fff;
    }
/* =========================================================
   OFSAMS CARD - DESKTOP CLICK FIX
========================================================= */

.biometric-card {
    position: relative;
    z-index: 10;
    overflow: visible;
}

    /* Keep card content above decorative elements */
    .biometric-card .card-actions {
        position: relative;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

        /* Make both links actual clickable areas */
        .biometric-card .card-actions a {
            position: relative;
            z-index: 30;
            pointer-events: auto;
            cursor: pointer;
            text-decoration: none;
        }

    /* Open Portal */
    .biometric-card .portal-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    /* FAQ */
    .biometric-card .faq-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    /* Make sure decorative pseudo-elements cannot block clicks */
    .biometric-card::before,
    .biometric-card::after,
    .biometric-card .card-top-bar::before,
    .biometric-card .card-top-bar::after {
        pointer-events: none;
    }
/* =========================================================
   OFSAMS - FORCE CLICKABLE ACTION AREA
========================================================= */

.biometric-card {
    position: relative !important;
    z-index: 100 !important;
}

    .biometric-card .card-actions {
        position: relative !important;
        z-index: 999 !important;
        pointer-events: auto !important;
    }

        .biometric-card .card-actions a {
            position: relative !important;
            z-index: 1000 !important;
            pointer-events: auto !important;
            cursor: pointer !important;
        }
/* =========================================================
   GRIEVANCE REDRESSAL MODAL
========================================================= */

.grievance-modal {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   HEADER
========================================================= */

.grievance-modal-header {
    position: relative;
    padding: 22px 24px;
    border: 0;
    background: linear-gradient( 135deg, #0b4f82, #087ea4 );
}

.grievance-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.grievance-modal-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 22px;
}

.grievance-modal-header .modal-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 3px;
}

.grievance-modal-header p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
}


/* =========================================================
   BODY
========================================================= */

.grievance-modal-body {
    padding: 24px;
    background: #f8fafc;
}


/* =========================================================
   INTRO MESSAGE
========================================================= */

.grievance-intro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #eef6ff;
    border: 1px solid #d8eaff;
    color: #315b7d;
    font-size: 0.88rem;
}

    .grievance-intro i {
        color: #0d6efd;
        margin-top: 2px;
    }


/* =========================================================
   GUIDELINES
========================================================= */

.grievance-guidelines {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.grievance-guideline {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .grievance-guideline:hover {
        transform: translateY(-1px);
        border-color: #cbdff0;
        box-shadow: 0 6px 18px rgba(25, 70, 100, 0.08);
    }


/* =========================================================
   NUMBER
========================================================= */

.guideline-number {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: #eaf3fb;
    color: #0b5a8f;
    font-size: 0.78rem;
    font-weight: 800;
}


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

.guideline-content {
    flex: 1;
    min-width: 0;
}

    .guideline-content h6 {
        margin: 0 0 5px;
        color: #17324d;
        font-size: 0.95rem;
        font-weight: 700;
    }

    .guideline-content p {
        margin: 0;
        color: #5c6873;
        font-size: 0.87rem;
        line-height: 1.65;
    }


/* =========================================================
   EMAIL
========================================================= */

.grievance-email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #eef7f2;
    border: 1px solid #d5ecdf;
    color: #176b42;
    font-size: 0.85rem;
    font-weight: 700;
}

    .grievance-email i {
        font-size: 0.9rem;
    }


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

.grievance-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 24px;
    background: #fff;
    border-top: 1px solid #e9edf1;
}

.grievance-footer-note {
    color: #6c757d;
    font-size: 0.76rem;
}

    .grievance-footer-note i {
        margin-right: 5px;
        color: #0b5a8f;
    }


/* =========================================================
   CLOSE BUTTON
========================================================= */

.grievance-close-btn {
    padding: 8px 18px;
    border-radius: 8px;
    background: #17324d;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    border: 0;
    transition: all 0.2s ease;
}

    .grievance-close-btn:hover {
        background: #0b4f82;
        color: #fff;
        transform: translateY(-1px);
    }


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .grievance-modal {
        margin: 10px;
        border-radius: 14px;
    }

    .grievance-modal-header {
        padding: 18px;
    }

    .grievance-modal-body {
        padding: 16px;
    }

    .grievance-modal-footer {
        padding: 14px 16px;
        align-items: flex-start;
        flex-direction: column;
    }

    .grievance-close-btn {
        width: 100%;
    }

    .grievance-guideline {
        padding: 13px;
        gap: 10px;
    }

    .guideline-number {
        width: 34px;
        height: 34px;
    }
}
.ofsams-login-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

    .ofsams-login-link:hover {
        text-decoration: none;
    }

    .ofsams-login-link .fa-external-link-alt {
        font-size: 0.7em;
    }