/* ===== GLOBAL CONTAINER OVERRIDE ===== */
    .container {
        max-width: 1800px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 48px !important;
    }

    /* ===== SECTION LABEL (Orange bar + text) ===== */
    .section-label {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .section-label::before {
        content: '';
        display: inline-block;
        width: 40px;
        height: 3px;
        background: rgb(177, 41, 54);
        border-radius: 2px;
    }

    .section-label span {
        font-size: 16.5px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgb(177, 41, 54);
    }

    /* ===== HERO SECTION WITH SLIDING BACKGROUND ===== */
    .hero-section {
        position: relative;
        padding-top: 36px;
        padding-bottom: 18px;
        min-height: calc(100vh - 190px);
        max-height: calc(100vh - 170px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        overflow: hidden;
        background: #0f172a;
    }

    .hero-bg-slides {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
    }

    .hero-bg-slide {
        position: absolute;
        inset: 0;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0;
        visibility: hidden;
        transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 6s linear;
        transform: scale(1);
    }

    .hero-bg-slide.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1.04);
    }

    .hero-bg-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.18) 100%);
        pointer-events: none;
    }

    .hero-section .container {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        width: 100%;
    }

    .hero-inner {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
        width: 100%;
        margin: auto 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .hero-content {
        flex: 1;
        max-width: 780px;
    }

    .hero-tagline {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .hero-tagline::before {
        content: '';
        display: inline-block;
        width: 36px;
        height: 3px;
        background: rgb(177, 41, 54);
        border-radius: 2px;
    }

    .hero-tagline span {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: #475467;
    }

    .hero-title {
        font-size: 64px;
        font-weight: 800;
        line-height: 1.15;
        color: #101828;
        margin-bottom: 18px;
    }

    .hero-title .highlight {
        color: rgb(177, 41, 54);
    }

    .hero-subtitle {
        font-size: 21px;
        color: #475467;
        line-height: 1.6;
        margin-bottom: 26px;
        max-width: 720px;
    }

    .hero-btn-courses,
    .hero-content .btn-primary,
    .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: rgb(177, 41, 54) !important;
        background-color: rgb(177, 41, 54) !important;
        border: none !important;
        border-color: rgb(177, 41, 54) !important;
        color: #FFFFFF !important;
        font-size: 17px;
        font-weight: 700;
        padding: 14px 34px;
        border-radius: 50px;
        cursor: pointer;
        text-decoration: none !important;
        box-shadow: 0 4px 14px rgba(177, 41, 54, 0.35);
        transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
        --bs-btn-bg: rgb(177, 41, 54) !important;
        --bs-btn-border-color: rgb(177, 41, 54) !important;
        --bs-btn-hover-bg: rgb(150, 32, 43) !important;
        --bs-btn-hover-border-color: rgb(150, 32, 43) !important;
        --bs-btn-color: #FFFFFF !important;
    }

    .hero-btn-courses:hover,
    .hero-btn-courses:focus,
    .hero-content .btn-primary:hover,
    .hero-content .btn-primary:focus,
    .btn-primary:hover,
    .btn-primary:focus {
        background: rgb(150, 32, 43) !important;
        background-color: rgb(150, 32, 43) !important;
        border-color: rgb(150, 32, 43) !important;
        color: #FFFFFF !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(177, 41, 54, 0.45);
    }

    /* ===== ANNOUNCEMENT CARD ===== */
    .announcement-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 16px 22px;
        width: 440px;
        min-width: 380px;
        max-width: 460px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
    }

    .announcement-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .announcement-header .bell-icon-img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .announcement-header h3 {
        font-size: 17px;
        font-weight: 800;
        color: #101828;
        margin: 0;
    }

    .announcement-header h3 span {
        color: rgb(177, 41, 54);
    }

    .announcement-item {
        padding: 8px 0;
        border-bottom: 1px solid #EAECF0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .announcement-item:last-of-type {
        border-bottom: none;
    }

    .announcement-item-body {
        flex: 1;
        min-width: 0;
    }

    .announcement-item-thumb {
        width: 52px;
        height: 52px;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
        border: 1px solid #E2E8F0;
        background: #f1f5f9;
        margin-top: 2px;
    }

    .announcement-item-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.25s ease;
    }

    .announcement-date {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        color: #475467;
        font-weight: 500;
        margin-bottom: 2px;
    }

    .announcement-date::before {
        content: '';
        width: 6px;
        height: 6px;
        background: rgb(177, 41, 54);
        border-radius: 50%;
    }

    .announcement-item h4 {
        font-size: 13.5px;
        font-weight: 700;
        color: rgb(177, 41, 54);
        margin-bottom: 2px;
        line-height: 1.3;
    }

    .announcement-item p {
        font-size: 12.5px;
        color: #667085;
        line-height: 1.4;
        margin: 0;
    }

    .announcement-item-link {
        transition: opacity 0.2s ease;
    }

    .announcement-item-link:hover .announcement-item h4 {
        text-decoration: underline;
        color: #8B0000;
    }

    .announcement-item-link:hover .announcement-item-thumb img {
        transform: scale(1.08);
    }

    .announcement-footer {
        margin-top: 10px;
    }

    .announcement-footer a {
        font-size: 12.5px;
        font-weight: 800;
        color: rgb(177, 41, 54);
        letter-spacing: 1.2px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: gap 0.3s ease;
    }

    .announcement-footer a:hover {
        gap: 12px;
    }

    /* ===== DESKTOP VS MOBILE HERO SECTIONS ===== */
    .mobile-hero-stats {
        display: none !important;
    }

    .desktop-only-announcement {
        display: block;
    }

    .desktop-only-stats {
        display: block;
    }

    /* ===== STATS BAR ===== */
    .stats-bar {
        position: relative;
        z-index: 10;
        max-width: 1260px;
        width: 100%;
        margin: 0 auto;
    }

    .stats-inner {
        background: #FFFFFF;
        border-radius: 18px;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.09);
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 24px 48px;
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 16px;
        transition: transform 0.3s ease;
    }

    .stat-item:hover {
        transform: translateY(-2px);
    }

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

    .stat-icon img {
        width: 38px;
        height: 38px;
        object-fit: contain;
        display: block;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .stat-item:hover .stat-icon img {
        transform: scale(1.12) rotate(-3deg);
    }

    .stat-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }

    .stat-number {
        font-size: 32px;
        font-weight: 800;
        color: #101828;
        line-height: 1;
        margin: 0;
        padding: 0;
        font-variant-numeric: tabular-nums;
    }

    .stat-label {
        font-size: 13.5px;
        font-weight: 700;
        color: #667085;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin: 0;
        margin-top: 2px;
        padding: 0;
        line-height: 1.15;
    }

    /* ===== ABOUT US SECTION ===== */
    .about-section {
        background: #F9F8F6;
        padding-top: 115px;
        padding-bottom: 0;
        min-height: 720px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        box-sizing: border-box;
    }

    .about-inner {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 40px;
        width: 100%;
        min-height: 605px;
    }

    .about-content {
        flex: 1.2;
        max-width: 760px;
        padding-top: 20px;
        padding-bottom: 110px;
    }

    .about-content h2 {
        font-size: 38px;
        font-weight: 800;
        color: #101828;
        line-height: 1.25;
        margin-bottom: 22px;
    }

    .about-content p {
        font-size: 16.5px;
        color: #475467;
        line-height: 1.8;
        margin-bottom: 32px;
    }

    .about-actions {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .btn-watch {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgb(177, 41, 54);
        color: #FFFFFF;
        font-size: 16.5px;
        font-weight: 700;
        padding: 14px 28px;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .btn-watch:hover {
        background: rgb(150, 32, 43);
    }

    .btn-watch .play-circle {
        width: 30px;
        height: 30px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .link-explore {
        font-size: 16.5px;
        font-weight: 800;
        color: rgb(177, 41, 54);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: gap 0.3s ease;
    }

    .link-explore:hover {
        gap: 12px;
    }

    .about-image {
        flex: 1;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-self: flex-end;
        margin-bottom: 0;
        margin-right: -48px;
    }

    .about-image img {
        max-height: 680px;
        width: auto;
        display: block;
        object-fit: contain;
        object-position: bottom right;
        margin-left: auto;
        margin-bottom: 0;
        vertical-align: bottom;
    }

    /* ===== COURSES SECTION ===== */
    .courses-section {
        background: #F4F5F7;
        padding: 60px 0;
    }

    .courses-header {
        margin-bottom: 40px;
    }

    .courses-header h2 {
        font-size: 32px;
        font-weight: 800;
        color: #101828;
        margin-bottom: 8px;
    }

    .courses-header p {
        font-size: 16.5px;
        color: #667085;
    }

    .courses-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
    }

    .course-card {
        background: #FFFFFF;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .course-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .course-card-image {
        width: 100%;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        background: #f8f9fa;
        position: relative;
    }

    .course-card-image a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .course-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
        transition: transform 0.4s ease;
    }

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

    .course-card-body {
        padding: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .course-card-body h3 {
        font-size: 14px;
        font-weight: 800;
        color: rgb(177, 41, 54);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .course-card-body p {
        font-size: 16.5px;
        color: #667085;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .course-card-arrow {
        display: flex;
        justify-content: right;
        padding: 0 20px 20px;
        margin-top: auto;
    }

    .arrow-circle {
        color: rgb(177, 41, 54);
        font-size: 20px;
        transition: transform 0.3s ease;
    }

    .course-card:hover .arrow-circle {
        transform: translateX(4px);
    }

    /* ===== ACADEMIC FOUNDATIONS / DEPARTMENTS ===== */
    .departments-section {
        background: #F2F1ED;
        padding: 60px 0;
    }

    .departments-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
    }

    .departments-layout {
        display: flex;
        gap: 40px;
    }

    .dept-tabs {
        min-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .dept-tab {
        padding: 18px 24px;
        border-radius: 10px;
        font-size: 16.5px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #FFFFFF;
        color: rgb(177, 41, 54);
        border: none;
        text-align: left;
    }

    .dept-tab.active {
        background: rgb(177, 41, 54);
        color: #FFFFFF;
    }

    .dept-tab:hover:not(.active) {
        background: #fef1ec;
    }

    .mobile-slider-arrows,
    .mobile-slider-dots,
    .mobile-explore-wrap {
        display: none;
    }

    .departments-slider-container {
        flex: 1;
        min-width: 0;
    }

    .dept-grid {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .dept-card {
        background: #FFFFFF;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .dept-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    }

    .dept-card-icon {
        color: rgb(177, 41, 54);
        font-size: 28px;
        margin-bottom: 12px;
    }

    .dept-card-icon .fa-scalpel,
    .fa-scalpel,
    .fa-solid.fa-scalpel,
    i.fa-scalpel {
        display: inline-block !important;
        width: 1em !important;
        height: 1em !important;
        line-height: 1 !important;
        vertical-align: -0.125em !important;
        background-color: currentColor !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' fill='%23000000' d='M441.3 116C455.4 101.9 456.8 77.8 445.5 66.5 434.2 55.2 410.1 56.6 396 70.7L236.9 229.8 L233.4 247.5 L65.1 432.8 L61.5 450.5C134.4 445.5 198 410.1 239.7 345.8 255.3 318.9 263.8 299.1 264.5 278.6L282.2 275.1 L441.3 116ZM393.5 148.2L363.8 118.5A3.5 3.5 0 0 0 358.9 123.4L388.6 153.1A3.5 3.5 0 0 0 393.5 148.2ZM365.2 176.5L335.5 146.8A3.5 3.5 0 0 0 330.6 151.7L360.3 181.4A3.5 3.5 0 0 0 365.2 176.5ZM337 204.7L307.3 175A3.5 3.5 0 0 0 302.3 180L332 209.7A3.5 3.5 0 0 0 337 204.7ZM216.4 301.3L164.1 362.1A4.5 4.5 0 0 0 157.7 355.7L210 294.9A4.5 4.5 0 0 0 216.4 301.3Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' fill='%23000000' d='M441.3 116C455.4 101.9 456.8 77.8 445.5 66.5 434.2 55.2 410.1 56.6 396 70.7L236.9 229.8 L233.4 247.5 L65.1 432.8 L61.5 450.5C134.4 445.5 198 410.1 239.7 345.8 255.3 318.9 263.8 299.1 264.5 278.6L282.2 275.1 L441.3 116ZM393.5 148.2L363.8 118.5A3.5 3.5 0 0 0 358.9 123.4L388.6 153.1A3.5 3.5 0 0 0 393.5 148.2ZM365.2 176.5L335.5 146.8A3.5 3.5 0 0 0 330.6 151.7L360.3 181.4A3.5 3.5 0 0 0 365.2 176.5ZM337 204.7L307.3 175A3.5 3.5 0 0 0 302.3 180L332 209.7A3.5 3.5 0 0 0 337 204.7ZM216.4 301.3L164.1 362.1A4.5 4.5 0 0 0 157.7 355.7L210 294.9A4.5 4.5 0 0 0 216.4 301.3Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
    }

    .dept-card-icon .fa-scalpel::before,
    .fa-scalpel::before,
    .fa-solid.fa-scalpel::before,
    i.fa-scalpel::before {
        content: '' !important;
        display: none !important;
    }

    .dept-card .department-description {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        line-height: 1.45;
        min-height: 2.9em;
        margin-bottom: 6px;
    }

    .dept-card .department-description p {
        margin: 0;
        font-size: 13.5px;
        color: #718096;
        line-height: 1.45;
    }

    /* ---------- Stomach / Gastroenterology Support (Solid Vector) ---------- */
    .fa-stomach,
    .fa-solid.fa-stomach,
    i.fa-stomach {
        display: inline-block !important;
        width: 1em !important;
        height: 1em !important;
        line-height: 1 !important;
        vertical-align: -0.125em !important;
        background-color: currentColor !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512.003%20511.984%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M163.409%2C443.018c-13.537-24.368-23.321-41.967-52.475-41.967a104.43%2C104.43%2C0%2C0%2C0-43.273%2C11.037%2C121.148%2C121.148%2C0%2C0%2C0-25.477%2C15.921%2C26.067%2C26.067%2C0%2C0%2C1-28.05%2C3.95%2C24.885%2C24.885%2C0%2C0%2C1-2.434-1.352A24.36%2C24.36%2C0%2C0%2C1%2C0%2C409.584V375.45a25.78%2C25.78%2C0%2C0%2C1%2C5.917-16.383%2C145%2C145%2C0%2C0%2C1%2C105.017-43.35%2C106.321%2C106.321%2C0%2C0%2C1%2C48.454%2C10.242%2C62.294%2C62.294%2C0%2C0%2C0%2C28.346%2C6.826%2C44.916%2C44.916%2C0%2C0%2C0%2C6.35-.49c.432-.059.865-.164%2C1.3-.236a51.022%2C51.022%2C0%2C0%2C0%2C5.4-1.209c.323-.091.645-.193.966-.289a58.734%2C58.734%2C0%2C0%2C0%2C6.2-2.262l.1-.042A76.015%2C76.015%2C0%2C0%2C0%2C227%2C316.1c.566-.491%2C1.124-1%2C1.682-1.508%2C1.16-1.048%2C2.3-2.155%2C3.424-3.283.931-.94%2C1.863-1.875%2C2.768-2.866.467-.506.913-1.048%2C1.372-1.568a115.124%2C115.124%2C0%2C0%2C0%2C23.515-43.559c.046-.157.162-.268.216-.421a119.1%2C119.1%2C0%2C0%2C0%2C4.559-32.512%2C115.123%2C115.123%2C0%2C0%2C0-5.062-32.433%2C216.711%2C216.711%2C0%2C0%2C0-17.737-42.742C223.4%2C121.3%2C200.724%2C71.977%2C196.857%2C29.534A25.783%2C25.783%2C0%2C0%2C1%2C217.249%2C2.043a113.232%2C113.232%2C0%2C0%2C1%2C47.237.941A25.514%2C25.514%2C0%2C0%2C1%2C282.824%2C22.51c1.762%2C8.567%2C5.1%2C23.484%2C9.783%2C38.717a122.225%2C122.225%2C0%2C0%2C1%2C74.329-27.108C400.965%2C34.119%2C512%2C48.885%2C512%2C238.919q-.009%2C16.656-.917%2C32.309l.007.088-.026.353c-.057.96-.147%2C1.884-.208%2C2.84-.262%2C4.062-.545%2C8.1-.905%2C12.062-.326%2C3.632-.73%2C7.174-1.132%2C10.718-.113.969-.2%2C1.966-.319%2C2.93-16.378%2C135.894-90.73%2C206.936-221.719%2C211.514q-6.761.252-13.717.253C201.742%2C511.984%2C180.488%2C473.743%2C163.409%2C443.018Zm14.922-8.291c16.446%2C29.592%2C33.455%2C60.192%2C94.738%2C60.192%2C7.668%2C0%2C15.089-.291%2C22.363-.756.905-.059%2C1.832-.091%2C2.732-.158%2C6.785-.491%2C13.361-1.228%2C19.8-2.129%2C1.263-.178%2C2.531-.349%2C3.78-.543q9.206-1.43%2C17.934-3.421c1.378-.316%2C2.737-.652%2C4.1-.99%2C5.636-1.391%2C11.14-2.939%2C16.463-4.7%2C1.339-.443%2C2.634-.94%2C3.954-1.407q7.127-2.5%2C13.858-5.459c1.619-.714%2C3.211-1.46%2C4.8-2.212%2C3.911-1.852%2C7.7-3.845%2C11.408-5.933%2C1.6-.9%2C3.228-1.766%2C4.789-2.712%2C3.861-2.336%2C7.553-4.867%2C11.182-7.471%2C1.845-1.328%2C3.687-2.662%2C5.472-4.059q4.894-3.845%2C9.5-8.023c1.922-1.749%2C3.792-3.553%2C5.632-5.393%2C2.155-2.147%2C4.234-4.384%2C6.281-6.655q3.78-4.186%2C7.305-8.666c1.325-1.678%2C2.605-3.406%2C3.878-5.143q4.277-5.839%2C8.159-12.135c.958-1.55%2C1.9-3.113%2C2.822-4.7q4.057-7.046%2C7.662-14.608c.7-1.464%2C1.411-2.913%2C2.084-4.408q4.058-9.071%2C7.493-18.856c.257-.731.54-1.429.791-2.165%2C1.19-3.494%2C2.307-7.072%2C3.377-10.7.648-2.2%2C1.24-4.471%2C1.843-6.725q2.13-7.86%2C3.884-16.146.967-4.626%2C1.827-9.374%2C1.226-6.726%2C2.227-13.707c.631-4.448%2C1.212-8.951%2C1.7-13.556.184-1.681.379-3.347.543-5.047a54.76%2C54.76%2C0%2C0%2C1-31.9%2C11.693%2C57.3%2C57.3%2C0%2C0%2C1-33.642-12.875%2C53.469%2C53.469%2C0%2C0%2C0-69.25%2C0%2C57.307%2C57.307%2C0%2C0%2C1-33.642%2C12.875%2C57.361%2C57.361%2C0%2C0%2C1-33.647-12.866%2C84.443%2C84.443%2C0%2C0%2C0-17.069-9.624c-.13.364-.293.708-.426%2C1.07-.919%2C2.509-1.892%2C4.982-2.939%2C7.4-.578%2C1.331-1.211%2C2.619-1.826%2C3.924-.8%2C1.691-1.614%2C3.365-2.472%2C5-.693%2C1.325-1.4%2C2.632-2.132%2C3.925-.886%2C1.563-1.812%2C3.081-2.751%2C4.59-.774%2C1.245-1.524%2C2.51-2.333%2C3.719q-2.3%2C3.424-4.765%2C6.629c-1.169%2C1.524-2.4%2C2.96-3.627%2C4.41-.659.777-1.313%2C1.56-1.987%2C2.314q-2.04%2C2.284-4.175%2C4.437c-.441.442-.891.866-1.337%2C1.3a99.5%2C99.5%2C0%2C0%2C1-15.8%2C12.609c-.327.21-.65.425-.978.63-1.78%2C1.106-3.577%2C2.144-5.406%2C3.1-.494.26-1%2C.491-1.491.739a77.663%2C77.663%2C0%2C0%2C1-8.779%2C3.74c-1.067.383-2.127.8-3.2%2C1.13-1.206.367-2.423.653-3.641.953q-2.388.6-4.8%2C1.022c-.981.167-1.958.343-2.946.466a63.076%2C63.076%2C0%2C0%2C1-8.01.572%2C79.176%2C79.176%2C0%2C0%2C1-35.121-8.225%2C90.4%2C90.4%2C0%2C0%2C0-41.679-8.842%2C126.456%2C126.456%2C0%2C0%2C0-91.867%2C37.167%2C8.547%2C8.547%2C0%2C0%2C0-2%2C5.5v34.132a7.2%2C7.2%2C0%2C0%2C0%2C4.267%2C6.9%2C8.836%2C8.836%2C0%2C0%2C0%2C1.775.558%2C9.057%2C9.057%2C0%2C0%2C0%2C3.432.047%2C9.467%2C9.467%2C0%2C0%2C0%2C4.648-2.139%2C131.51%2C131.51%2C0%2C0%2C1%2C16.685-11.579%2C127.629%2C127.629%2C0%2C0%2C1%2C63.061-19.386C150.131%2C383.985%2C164.464%2C409.776%2C178.331%2C434.727ZM436.682%2C271.61a42.062%2C42.062%2C0%2C0%2C0%2C24.121%2C9.975%2C42.144%2C42.144%2C0%2C0%2C0%2C24.162-9.983c2.918-1.954%2C6.01-3.921%2C9.27-5.835.439-8.718.7-17.636.7-26.85%2C0-117.55-47.85-187.733-128-187.733a106.276%2C106.276%2C0%2C0%2C0-72.375%2C31.067%2C8.542%2C8.542%2C0%2C0%2C1-14.021-3.2%2C414.069%2C414.069%2C0%2C0%2C1-14.433-53.108%2C8.552%2C8.552%2C0%2C0%2C0-6.162-6.508%2C95.1%2C95.1%2C0%2C0%2C0-39.154-.692%2C8.693%2C8.693%2C0%2C0%2C0-6.933%2C9.242c3.6%2C39.559%2C25.313%2C86.608%2C42.892%2C119.108a233.738%2C233.738%2C0%2C0%2C1%2C19.125%2C46.133%2C131.7%2C131.7%2C0%2C0%2C1%2C5.729%2C37.158%2C134.429%2C134.429%2C0%2C0%2C1-3.386%2C29.354%2C96.276%2C96.276%2C0%2C0%2C1%2C21.919%2C11.878%2C42.132%2C42.132%2C0%2C0%2C0%2C24.133%2C9.967%2C42.062%2C42.062%2C0%2C0%2C0%2C24.121-9.975%2C70.176%2C70.176%2C0%2C0%2C1%2C88.292%2C0ZM324.269%2C452.253a8.533%2C8.533%2C0%2C1%2C1%2C8.534%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C324.269%2C452.253Zm-85.333%2C0a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C238.937%2C452.253Zm153.6-34.134a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C392.537%2C418.118ZM273.07%2C401.053a8.533%2C8.533%2C0%2C1%2C1%2C8.534%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C273.07%2C401.053ZM204.8%2C392.519a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C204.8%2C392.519Zm136.534-25.6a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.534A8.533%2C8.533%2C0%2C0%2C1%2C341.337%2C366.918Zm68.266-25.6a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C409.6%2C341.319Zm-145.066%2C0a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C264.537%2C341.319Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain !important;
        mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512.003%20511.984%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M163.409%2C443.018c-13.537-24.368-23.321-41.967-52.475-41.967a104.43%2C104.43%2C0%2C0%2C0-43.273%2C11.037%2C121.148%2C121.148%2C0%2C0%2C0-25.477%2C15.921%2C26.067%2C26.067%2C0%2C0%2C1-28.05%2C3.95%2C24.885%2C24.885%2C0%2C0%2C1-2.434-1.352A24.36%2C24.36%2C0%2C0%2C1%2C0%2C409.584V375.45a25.78%2C25.78%2C0%2C0%2C1%2C5.917-16.383%2C145%2C145%2C0%2C0%2C1%2C105.017-43.35%2C106.321%2C106.321%2C0%2C0%2C1%2C48.454%2C10.242%2C62.294%2C62.294%2C0%2C0%2C0%2C28.346%2C6.826%2C44.916%2C44.916%2C0%2C0%2C0%2C6.35-.49c.432-.059.865-.164%2C1.3-.236a51.022%2C51.022%2C0%2C0%2C0%2C5.4-1.209c.323-.091.645-.193.966-.289a58.734%2C58.734%2C0%2C0%2C0%2C6.2-2.262l.1-.042A76.015%2C76.015%2C0%2C0%2C0%2C227%2C316.1c.566-.491%2C1.124-1%2C1.682-1.508%2C1.16-1.048%2C2.3-2.155%2C3.424-3.283.931-.94%2C1.863-1.875%2C2.768-2.866.467-.506.913-1.048%2C1.372-1.568a115.124%2C115.124%2C0%2C0%2C0%2C23.515-43.559c.046-.157.162-.268.216-.421a119.1%2C119.1%2C0%2C0%2C0%2C4.559-32.512%2C115.123%2C115.123%2C0%2C0%2C0-5.062-32.433%2C216.711%2C216.711%2C0%2C0%2C0-17.737-42.742C223.4%2C121.3%2C200.724%2C71.977%2C196.857%2C29.534A25.783%2C25.783%2C0%2C0%2C1%2C217.249%2C2.043a113.232%2C113.232%2C0%2C0%2C1%2C47.237.941A25.514%2C25.514%2C0%2C0%2C1%2C282.824%2C22.51c1.762%2C8.567%2C5.1%2C23.484%2C9.783%2C38.717a122.225%2C122.225%2C0%2C0%2C1%2C74.329-27.108C400.965%2C34.119%2C512%2C48.885%2C512%2C238.919q-.009%2C16.656-.917%2C32.309l.007.088-.026.353c-.057.96-.147%2C1.884-.208%2C2.84-.262%2C4.062-.545%2C8.1-.905%2C12.062-.326%2C3.632-.73%2C7.174-1.132%2C10.718-.113.969-.2%2C1.966-.319%2C2.93-16.378%2C135.894-90.73%2C206.936-221.719%2C211.514q-6.761.252-13.717.253C201.742%2C511.984%2C180.488%2C473.743%2C163.409%2C443.018Zm14.922-8.291c16.446%2C29.592%2C33.455%2C60.192%2C94.738%2C60.192%2C7.668%2C0%2C15.089-.291%2C22.363-.756.905-.059%2C1.832-.091%2C2.732-.158%2C6.785-.491%2C13.361-1.228%2C19.8-2.129%2C1.263-.178%2C2.531-.349%2C3.78-.543q9.206-1.43%2C17.934-3.421c1.378-.316%2C2.737-.652%2C4.1-.99%2C5.636-1.391%2C11.14-2.939%2C16.463-4.7%2C1.339-.443%2C2.634-.94%2C3.954-1.407q7.127-2.5%2C13.858-5.459c1.619-.714%2C3.211-1.46%2C4.8-2.212%2C3.911-1.852%2C7.7-3.845%2C11.408-5.933%2C1.6-.9%2C3.228-1.766%2C4.789-2.712%2C3.861-2.336%2C7.553-4.867%2C11.182-7.471%2C1.845-1.328%2C3.687-2.662%2C5.472-4.059q4.894-3.845%2C9.5-8.023c1.922-1.749%2C3.792-3.553%2C5.632-5.393%2C2.155-2.147%2C4.234-4.384%2C6.281-6.655q3.78-4.186%2C7.305-8.666c1.325-1.678%2C2.605-3.406%2C3.878-5.143q4.277-5.839%2C8.159-12.135c.958-1.55%2C1.9-3.113%2C2.822-4.7q4.057-7.046%2C7.662-14.608c.7-1.464%2C1.411-2.913%2C2.084-4.408q4.058-9.071%2C7.493-18.856c.257-.731.54-1.429.791-2.165%2C1.19-3.494%2C2.307-7.072%2C3.377-10.7.648-2.2%2C1.24-4.471%2C1.843-6.725q2.13-7.86%2C3.884-16.146.967-4.626%2C1.827-9.374%2C1.226-6.726%2C2.227-13.707c.631-4.448%2C1.212-8.951%2C1.7-13.556.184-1.681.379-3.347.543-5.047a54.76%2C54.76%2C0%2C0%2C1-31.9%2C11.693%2C57.3%2C57.3%2C0%2C0%2C1-33.642-12.875%2C53.469%2C53.469%2C0%2C0%2C0-69.25%2C0%2C57.307%2C57.307%2C0%2C0%2C1-33.642%2C12.875%2C57.361%2C57.361%2C0%2C0%2C1-33.647-12.866%2C84.443%2C84.443%2C0%2C0%2C0-17.069-9.624c-.13.364-.293.708-.426%2C1.07-.919%2C2.509-1.892%2C4.982-2.939%2C7.4-.578%2C1.331-1.211%2C2.619-1.826%2C3.924-.8%2C1.691-1.614%2C3.365-2.472%2C5-.693%2C1.325-1.4%2C2.632-2.132%2C3.925-.886%2C1.563-1.812%2C3.081-2.751%2C4.59-.774%2C1.245-1.524%2C2.51-2.333%2C3.719q-2.3%2C3.424-4.765%2C6.629c-1.169%2C1.524-2.4%2C2.96-3.627%2C4.41-.659.777-1.313%2C1.56-1.987%2C2.314q-2.04%2C2.284-4.175%2C4.437c-.441.442-.891.866-1.337%2C1.3a99.5%2C99.5%2C0%2C0%2C1-15.8%2C12.609c-.327.21-.65.425-.978.63-1.78%2C1.106-3.577%2C2.144-5.406%2C3.1-.494.26-1%2C.491-1.491.739a77.663%2C77.663%2C0%2C0%2C1-8.779%2C3.74c-1.067.383-2.127.8-3.2%2C1.13-1.206.367-2.423.653-3.641.953q-2.388.6-4.8%2C1.022c-.981.167-1.958.343-2.946.466a63.076%2C63.076%2C0%2C0%2C1-8.01.572%2C79.176%2C79.176%2C0%2C0%2C1-35.121-8.225%2C90.4%2C90.4%2C0%2C0%2C0-41.679-8.842%2C126.456%2C126.456%2C0%2C0%2C0-91.867%2C37.167%2C8.547%2C8.547%2C0%2C0%2C0-2%2C5.5v34.132a7.2%2C7.2%2C0%2C0%2C0%2C4.267%2C6.9%2C8.836%2C8.836%2C0%2C0%2C0%2C1.775.558%2C9.057%2C9.057%2C0%2C0%2C0%2C3.432.047%2C9.467%2C9.467%2C0%2C0%2C0%2C4.648-2.139%2C131.51%2C131.51%2C0%2C0%2C1%2C16.685-11.579%2C127.629%2C127.629%2C0%2C0%2C1%2C63.061-19.386C150.131%2C383.985%2C164.464%2C409.776%2C178.331%2C434.727ZM436.682%2C271.61a42.062%2C42.062%2C0%2C0%2C0%2C24.121%2C9.975%2C42.144%2C42.144%2C0%2C0%2C0%2C24.162-9.983c2.918-1.954%2C6.01-3.921%2C9.27-5.835.439-8.718.7-17.636.7-26.85%2C0-117.55-47.85-187.733-128-187.733a106.276%2C106.276%2C0%2C0%2C0-72.375%2C31.067%2C8.542%2C8.542%2C0%2C0%2C1-14.021-3.2%2C414.069%2C414.069%2C0%2C0%2C1-14.433-53.108%2C8.552%2C8.552%2C0%2C0%2C0-6.162-6.508%2C95.1%2C95.1%2C0%2C0%2C0-39.154-.692%2C8.693%2C8.693%2C0%2C0%2C0-6.933%2C9.242c3.6%2C39.559%2C25.313%2C86.608%2C42.892%2C119.108a233.738%2C233.738%2C0%2C0%2C1%2C19.125%2C46.133%2C131.7%2C131.7%2C0%2C0%2C1%2C5.729%2C37.158%2C134.429%2C134.429%2C0%2C0%2C1-3.386%2C29.354%2C96.276%2C96.276%2C0%2C0%2C1%2C21.919%2C11.878%2C42.132%2C42.132%2C0%2C0%2C0%2C24.133%2C9.967%2C42.062%2C42.062%2C0%2C0%2C0%2C24.121-9.975%2C70.176%2C70.176%2C0%2C0%2C1%2C88.292%2C0ZM324.269%2C452.253a8.533%2C8.533%2C0%2C1%2C1%2C8.534%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C324.269%2C452.253Zm-85.333%2C0a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C238.937%2C452.253Zm153.6-34.134a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C392.537%2C418.118ZM273.07%2C401.053a8.533%2C8.533%2C0%2C1%2C1%2C8.534%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C273.07%2C401.053ZM204.8%2C392.519a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C204.8%2C392.519Zm136.534-25.6a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.534A8.533%2C8.533%2C0%2C0%2C1%2C341.337%2C366.918Zm68.266-25.6a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C409.6%2C341.319Zm-145.066%2C0a8.533%2C8.533%2C0%2C1%2C1%2C8.533%2C8.533A8.533%2C8.533%2C0%2C0%2C1%2C264.537%2C341.319Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain !important;
    }

    .fa-stomach::before,
    .fa-solid.fa-stomach::before,
    i.fa-stomach::before {
        content: "" !important;
        display: none !important;
    }

    .dept-card h4 {
        font-size: 14px;
        font-weight: 700;
        color: rgb(177, 41, 54);
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .dept-card p {
        font-size: 16.5px;
        color: #667085;
        margin-bottom: 10px;
    }

    .dept-card .arrow-sm {
        color: rgb(177, 41, 54);
        font-size: 16px;
        display: flex;
        justify-content: flex-end;
    }

    /* ===== EXPLORE INSTITUTION ===== */
    .explore-section {
        background: #F5F5F5;
        padding: 60px 0;
    }

    .explore-section h2 {
        font-size: 40px;
        font-weight: 800;
        color: #101828;
        margin-bottom: 40px;
    }

    .explore-section h2 span {
        color: rgb(177, 41, 54);
    }

    .explore-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .explore-card {
        background: #FFFFFF;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .explore-card:hover {
        transform: translateY(-4px);
    }

    .explore-card-image {
        width: 100%;
        height: 240px;
        overflow: hidden;
    }

    .explore-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

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

    .explore-card-body {
        padding: 24px 24px 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .explore-card-body h3 {
        font-size: 20px;
        font-weight: 800;
        color: #101828;
        margin-bottom: 10px;
    }

    .explore-card-body p {
        font-size: 16.5px;
        color: #667085;
        line-height: 1.6;
    }

    .explore-card-footer {
        padding: 16px 24px 24px;
        display: flex;
        justify-content: flex-end;
        margin-top: auto;
    }

    .explore-card-footer .arrow-circle {
        color: rgb(177, 41, 54);
        font-size: 20px;
    }

    /* ===== VIDEOS SECTION ===== */
    .videos-section {
        background: #F9F8F6;
        padding: 60px 0;
    }

    .videos-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 36px;
    }

    .videos-header h2 {
        font-size: 40px;
        font-weight: 800;
        color: #101828;
    }

    .videos-header h2 span {
        color: rgb(177, 41, 54);
    }

    .videos-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        padding: 4px 2px 14px;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        touch-action: pan-x pan-y;
        touch-action: manipulation;
    }

    .videos-grid::-webkit-scrollbar {
        display: none;
    }

    .videos-grid,
    .videos-grid *,
    .happenings-grid,
    .happenings-grid *,
    .dept-grid,
    .dept-grid *,
    .rankholders-grid,
    .rankholders-grid * {
        -webkit-user-drag: none;
        user-drag: none;
        -webkit-touch-callout: none;
    }

    .videos-grid.is-dragging {
        cursor: grabbing !important;
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }

    .videos-grid.is-dragging * {
        cursor: grabbing !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    .video-card {
        flex: 0 0 calc((100% - 60px) / 4);
        max-width: calc((100% - 60px) / 4);
        width: calc((100% - 60px) / 4);
        min-width: 0;
        position: relative;
        height: 260px;
        overflow: hidden;
        cursor: pointer;
        border-radius: 12px;
        scroll-snap-align: start;
        user-select: none;
        -webkit-user-select: none;
    }

    .video-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
        user-drag: none;
        -webkit-user-drag: none;
        pointer-events: none;
    }

    .video-card:hover img {
        transform: scale(1.08);
    }

    .video-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.1) 100%);
        transition: opacity 0.3s ease;
    }

    .video-card-title-badge {
        position: absolute;
        bottom: 16px;
        left: 16px;
        right: 16px;
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        z-index: 2;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
        pointer-events: none;
    }

    .video-play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 58px;
        height: 58px;
        background: rgb(177, 41, 54);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 22px;
        box-shadow: 0 4px 20px rgba(177, 41, 54, 0.5);
        transition: transform 0.3s ease, background 0.3s ease;
        z-index: 3;
    }

    .video-card:hover .video-play-btn {
        transform: translate(-50%, -50%) scale(1.15);
        background: rgb(200, 48, 63);
    }

    /* ===== SLIDER ARROW CONTROLS (DESKTOP & MOBILE) ===== */
    .mobile-slider-arrows {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .slider-arrow {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1.5px solid #EAECF0;
        background: #FFFFFF;
        color: #101828;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    .slider-arrow:hover,
    .slider-arrow:active {
        background: rgb(177, 41, 54);
        color: #FFFFFF;
        border-color: rgb(177, 41, 54);
        transform: scale(1.06);
    }

    /* ===== EMBEDDED VIDEO MODAL LIGHTBOX ===== */
    .snims-video-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .snims-video-modal.active {
        display: flex;
    }

    .snims-video-modal-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.88);
        backdrop-filter: blur(8px);
    }

    .snims-video-modal-container {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 920px;
        background: #0f172a;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.12);
        animation: snimsModalZoom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes snimsModalZoom {
        from {
            opacity: 0;
            transform: scale(0.92);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .snims-video-modal-close {
        position: absolute;
        top: 14px;
        right: 18px;
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        border: none;
        font-size: 28px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        z-index: 10;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .snims-video-modal-close:hover {
        background: rgb(177, 41, 54);
        transform: scale(1.08);
    }

    .snims-video-modal-header {
        padding: 18px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 60px;
    }

    .snims-video-modal-header h4 {
        color: #ffffff;
        font-size: 18px;
        font-weight: 700;
        margin: 0;
    }

    .snims-video-modal-body {
        padding: 0;
        background: #000000;
    }

    .snims-video-wrapper {
        position: relative;
        padding-bottom: 56.25%;
        /* 16:9 Aspect Ratio */
        height: 0;
        overflow: hidden;
    }

    .snims-video-wrapper iframe,
    .snims-video-wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* ===== HAPPENINGS SECTION ===== */
    .happenings-section {
        background: #F9F8F6;
        padding: 60px 0;
    }

    .happenings-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
    }

    .happenings-header h2 {
        font-size: 40px;
        font-weight: 800;
        color: #101828;
    }

    .happenings-header h2 span {
        color: rgb(177, 41, 54);
    }

    .happenings-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 24px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        padding: 4px 2px 14px;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        touch-action: pan-x pan-y;
        touch-action: manipulation;
    }

    .happenings-grid::-webkit-scrollbar {
        display: none;
    }

    .happenings-grid.is-dragging {
        cursor: grabbing !important;
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }

    .happenings-grid.is-dragging * {
        cursor: grabbing !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    .happening-card {
        flex: 0 0 calc((100% - 48px) / 3);
        max-width: calc((100% - 48px) / 3);
        min-width: 320px;
        background: #FFFFFF;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;
        scroll-snap-align: start;
        user-select: none;
        -webkit-user-select: none;
        display: flex;
        flex-direction: column;
    }

    .happening-card:hover {
        transform: translateY(-4px);
    }

    .happening-card-image {
        position: relative;
        width: 100%;
        height: 240px;
        overflow: hidden;
    }

    .happening-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        user-drag: none;
        -webkit-user-drag: none;
        pointer-events: none;
    }

    .happening-date-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: rgb(177, 41, 54);
        color: #FFFFFF;
        padding: 8px 12px;
        border-radius: 8px;
        text-align: center;
        font-weight: 800;
        line-height: 1.2;
    }

    .happening-date-badge .day {
        font-size: 18px;
        display: block;
    }

    .happening-date-badge .month {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .happening-card-body {
        padding: 24px;
    }

    .happening-card-body h3 {
        font-size: 18px;
        font-weight: 800;
        color: #101828;
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .happening-card-body p {
        font-size: 16.5px;
        color: #667085;
        line-height: 1.6;
    }

    /* ===== PRINCIPAL'S MESSAGE ===== */
    .principal-section {
        background: #EEF0F5;
        padding-top: 20px;
        padding-bottom: 0;
        overflow: hidden;
    }

    .principal-inner {
        display: flex;
        align-items: flex-end;
        gap: 60px;
        max-width: 1380px;
        margin: 0 auto;
    }

    .principal-image {
        flex: 0 0 500px;
        max-width: 500px;
        margin-bottom: 0;
        align-self: flex-end;
    }

    .principal-image img {
        display: block;
        width: 100%;
        max-width: 500px;
        max-height: 600px;
        height: auto;
        object-fit: contain;
        margin-bottom: 0;
    }

    .principal-content {
        flex: 1;
        padding-bottom: 60px;
    }

    .principal-quote-icon {
        margin-bottom: 16px;
    }

    .principal-quote-icon img {
        width: 60px;
        height: auto;
    }

    .principal-content h3 {
        font-size: 32px;
        font-weight: 800;
        color: #101828;
        margin-bottom: 4px;
    }

    .principal-content .principal-title {
        font-size: 20px;
        font-weight: 700;
        color: rgb(177, 41, 54);
        margin-bottom: 24px;
    }

    .principal-content blockquote {
        font-size: 16.5px;
        color: #475467;
        line-height: 1.8;
        font-style: normal;
        margin-bottom: 24px;
    }

    .principal-underline {
        width: 240px;
        height: 4px;
        background: rgb(177, 41, 54);
        border-radius: 2px;
    }

    /* ===== LIFE@SNIMS GALLERY ===== */
    .gallery-section {
        background: #F5F5F5;
        padding: 60px 0;
    }

    .gallery-section h2 {
        font-size: 40px;
        font-weight: 800;
        color: rgb(177, 41, 54);
        text-align: center;
        margin-bottom: 40px;
    }

    .gallery-masonry {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 230px);
        gap: 20px;
    }

    .gallery-item {
        overflow: hidden;
        border-radius: 16px;
        height: 100%;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    .gallery-item:hover img {
        transform: scale(1.05);
    }

    /* Masonry layout spans */
    .gallery-item:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    .gallery-item:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    .gallery-item:nth-child(3) {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    .gallery-item:nth-child(4) {
        grid-column: 4 / 5;
        grid-row: 1 / 2;
    }

    .gallery-item:nth-child(5) {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }

    .gallery-item:nth-child(6) {
        grid-column: 4 / 5;
        grid-row: 2 / 3;
    }

    .gallery-item:nth-child(7) {
        grid-column: 1 / 3;
        grid-row: 3 / 5;
    }

    .gallery-item:nth-child(8) {
        grid-column: 3 / 5;
        grid-row: 3 / 4;
    }

    .gallery-item:nth-child(9) {
        grid-column: 3 / 5;
        grid-row: 4 / 5;
    }

    /* ===== RANK HOLDERS ===== */
    .rankholders-section {
        background: #F9F8F6;
        padding: 60px 0;
    }

    .rankholders-header {

        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 60px;
    }

    .rankholders-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
    }

    .rankholder-card {
        position: relative;
        background: #FFFFFF;
        border-radius: 16px;
        padding: 40px 24px 30px;
        text-align: center;
        border: 1px solid #e2e8f0;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(177, 41, 54, 0.06);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
    }

    .rankholder-card:hover {
        transform: translateY(-8px);
        border-color: rgba(177, 41, 54, 0.4);
        box-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.16), 0 8px 20px -4px rgba(177, 41, 54, 0.18);
    }

    .rank-badge {
        position: absolute;
        top: -18px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, rgb(195, 35, 50) 0%, rgb(145, 20, 32) 100%);
        color: #FFFFFF;
        font-size: 13.5px;
        font-weight: 700;
        padding: 8px 10px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(177, 41, 54, 0.4);
    }

    .rank-badge i {
        font-size: 13px;
    }

    .rank-badge sup {
        font-size: 10px;
        top: -0.4em;
    }

    .rankholder-photo {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin: 0 auto 16px;
        overflow: hidden;
        position: relative;
        background: linear-gradient(135deg, rgb(205, 45, 60) 0%, rgb(145, 20, 32) 100%);
        padding: 4px;
    }

    .rankholder-photo img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

    .rankholder-card h4 {
        font-size: 19px;
        font-weight: 800;
        color: #101828;
        margin-bottom: 4px;
    }

    .rankholder-card .degree {
        font-size: 16.5px;
        color: #667085;
        margin-bottom: 16px;
    }

    .rankholder-badge {
        display: inline-block;
        background: #FCEEE3;
        color: rgb(177, 41, 54);
        font-size: 16.5px;
        font-weight: 800;
        padding: 8px 18px;
        border-radius: 6px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    /* ===== FRONT-PAGE RESPONSIVE ===== */
    @media (max-width: 1200px) {
        .hero-title {
            font-size: 48px;
        }

        .courses-grid,
        .dept-grid,
        .rankholders-grid {
            gap: 18px;
        }

        .explore-grid,
        .happenings-grid {
            gap: 20px;
        }
    }

    @media (max-width: 1024px) {
        .hero-section {
            padding-top: 30px;
            padding-bottom: 30px;
        }

        .hero-inner {
            flex-direction: column;
            gap: 28px;
            padding-top: 0;
            padding-bottom: 0;
            max-width: 100%;
        }

        .stats-bar {
            margin-top: 24px;
            margin-bottom: 0;
            max-width: 100%;
        }

        .hero-title {
            font-size: 38px;
        }

        .hero-subtitle {
            font-size: 16.5px;
        }

        .hero-content {
            max-width: 100%;
        }

        .announcement-card {
            width: 100%;
            max-width: 100%;
            min-width: auto;
        }

        .stats-inner {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding: 20px 24px;
        }

        .stat-item {
            justify-content: center;
        }

        .about-section {
            min-height: auto;
            padding-top: 60px;
        }

        .about-inner {
            flex-direction: column;
            gap: 40px;
            min-height: auto;
        }

        .about-content {
            max-width: 100%;
            padding-bottom: 30px;
            padding-top: 0;
        }

        .about-image {
            text-align: center;
            width: 100%;
            margin-right: 0;
        }

        .about-image img {
            max-height: 480px;
            margin: 0 auto;
        }

        .courses-grid,
        .dept-grid,
        .rankholders-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .explore-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .happenings-grid .happening-card {
            flex: 0 0 calc((100% - 20px) / 2);
            max-width: calc((100% - 20px) / 2);
            min-width: 280px;
        }

        .videos-grid .video-card {
            flex: 0 0 calc((100% - 20px) / 2);
            max-width: calc((100% - 20px) / 2);
            min-width: 260px;
        }

        .departments-layout {
            flex-direction: column;
            gap: 24px;
        }

        .dept-tabs {
            flex-direction: row;
            min-width: auto;
            flex-wrap: wrap;
        }

        .principal-inner {
            flex-direction: column;
            text-align: center;
            gap: 28px;
        }

        .principal-image {
            flex: 0 0 auto;
            max-width: 290px;
            margin: 0 auto;
            align-self: center;
            width: 100%;
        }

        .principal-image img {
            max-width: 290px;
            max-height: 340px;
            margin: 0 auto;
        }

        .principal-quote-icon {
            display: flex;
            justify-content: center;
        }

        .principal-underline {
            margin: 0 auto;
        }

        .principal-content {
            padding-bottom: 40px;
        }

        .gallery-masonry {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
            gap: 16px;
        }

        .gallery-item:nth-child(n) {
            grid-column: auto;
            grid-row: auto;
            height: 220px;
        }
    }

    @media (max-width: 768px) {

        html,
        body {
            overflow-x: hidden !important;
            max-width: 100% !important;
            width: 100% !important;
        }

        .hero-section,
        .stats-bar,
        .about-section,
        .courses-section,
        .departments-section,
        .explore-section,
        .videos-section,
        .happenings-section,
        .principal-section,
        .gallery-section,
        .rankholders-section {
            overflow: hidden !important;
            max-width: 100% !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        .about-section,
        .courses-section,
        .departments-section,
        .explore-section,
        .videos-section,
        .happenings-section,
        .rankholders-section,
        .gallery-section {
            padding: 45px 0;
        }

        .principal-section {
            padding-top: 50px;
        }

        .hero-title {
            font-size: 34px;
        }

        .announcement-card,
        .desktop-only-announcement,
        .desktop-only-stats {
            display: none !important;
        }

        .mobile-hero-stats {
            display: block !important;
            margin-top: 100px !important;
            margin-bottom: 24px !important;
            width: calc(100% + 26px) !important;
            max-width: calc(100% + 26px) !important;
            margin-left: -13px !important;
            margin-right: -13px !important;
            position: relative !important;
            z-index: 10 !important;
        }

        .mobile-hero-stats .stats-inner {
            display: flex !important;
            flex-direction: row !important;
            align-items: stretch !important;
            gap: 0 !important;
            padding: 0 !important;
            border-radius: 16px !important;
            background: #FFFFFF !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
            overflow: hidden !important;
            width: 100% !important;
        }

        .mobile-hero-stats .stat-item {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            flex: 1 1 0 !important;
            gap: 0 !important;
            padding: 16px 6px 14px !important;
            margin: 0 !important;
            min-width: 0 !important;
            border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
            box-sizing: border-box !important;
        }

        .mobile-hero-stats .stat-item:last-child {
            border-right: none !important;
        }

        .mobile-hero-stats .stat-icon {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin-bottom: 6px !important;
            width: auto !important;
            height: auto !important;
        }

        .mobile-hero-stats .stat-icon img {
            display: block !important;
            width: 26px !important;
            height: 26px !important;
            max-width: 26px !important;
            max-height: 26px !important;
            object-fit: contain !important;
        }

        .mobile-hero-stats .stat-info {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 3px !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        .mobile-hero-stats .stat-number {
            font-size: 22px !important;
            font-weight: 800 !important;
            color: #101828 !important;
            line-height: 1.1 !important;
            margin: 0 !important;
            padding: 0 !important;
            white-space: nowrap !important;
            font-variant-numeric: tabular-nums !important;
        }

        .mobile-hero-stats .stat-label {
            font-size: 10.5px !important;
            font-weight: 700 !important;
            color: #2e4a6f !important;
            letter-spacing: 0.3px !important;
            text-transform: uppercase !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1.15 !important;
            white-space: nowrap !important;
        }




        .about-content h2,
        .courses-header h2,
        .explore-section h2,
        .videos-header h2,
        .happenings-header h2,
        .gallery-section h2 {
            font-size: 28px;
        }

        .departments-header,
        .happenings-header,
        .rankholders-header {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 24px;
        }

        .videos-header {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 24px;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .mobile-slider-arrows {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .slider-arrow {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1.5px solid #EAECF0;
            background: #FFFFFF;
            color: #101828;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s ease;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        }

        .slider-arrow:hover,
        .slider-arrow:active {
            background: rgb(177, 41, 54);
            color: #FFFFFF;
            border-color: rgb(177, 41, 54);
        }

        .mobile-slider-dots {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 18px;
        }

        .slider-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #D0D5DD;
            border: none;
            padding: 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .slider-dot.active {
            width: 24px;
            border-radius: 4px;
            background: rgb(177, 41, 54);
        }

        .desktop-explore {
            display: none !important;
        }

        .mobile-explore-wrap {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            margin-top: 18px !important;
        }

        .mobile-explore-wrap .link-explore {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 5px !important;
            font-size: 10.5px !important;
            font-weight: 700 !important;
            color: rgb(177, 41, 54) !important;
            letter-spacing: 0.8px !important;
            text-transform: uppercase !important;
            padding: 5px 13px !important;
            background: #FFFFFF !important;
            border: 1.5px solid rgb(177, 41, 54) !important;
            border-radius: 20px !important;
            box-shadow: 0 2px 8px rgba(177, 41, 54, 0.12) !important;
            transition: all 0.2s ease !important;
        }

        .mobile-explore-wrap .link-explore:hover,
        .mobile-explore-wrap .link-explore:active {
            background: rgb(177, 41, 54) !important;
            color: #101828 !important;
        }

        .about-actions {
            flex-direction: column;
            align-items: stretch;
            gap: 14px;
        }

        .btn-watch {
            justify-content: center;
            width: 100%;
        }

        .link-explore {
            justify-content: center;
        }

        .courses-grid,
        .explore-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .dept-tabs {
            display: flex;
            flex-direction: row;
            overflow-x: auto;
            gap: 10px;
            padding-bottom: 8px;
            width: 100%;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }

        .dept-tabs::-webkit-scrollbar {
            display: none;
        }

        .dept-tab {
            flex-shrink: 0;
            white-space: nowrap;
            padding: 12px 18px;
            font-size: 15px;
            border-radius: 8px;
        }

        /* HORIZONTAL SLIDERS (MOBILE VIEW ONLY) */
        .dept-grid,
        .videos-grid,
        .happenings-grid,
        .rankholders-grid {
            display: flex !important;
            flex-direction: row !important;
            overflow-x: auto !important;
            scroll-snap-type: x mandatory !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
            gap: 16px !important;
            padding: 20px 4px 20px !important;
            margin: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            touch-action: pan-x pan-y !important;
            touch-action: manipulation !important;
        }

        .dept-grid::-webkit-scrollbar,
        .videos-grid::-webkit-scrollbar,
        .happenings-grid::-webkit-scrollbar,
        .rankholders-grid::-webkit-scrollbar {
            display: none !important;
        }

        .dept-grid.is-dragging,
        .videos-grid.is-dragging,
        .happenings-grid.is-dragging,
        .rankholders-grid.is-dragging {
            scroll-snap-type: none !important;
            scroll-behavior: auto !important;
            cursor: grabbing !important;
        }

        .dept-grid.is-dragging *,
        .videos-grid.is-dragging *,
        .happenings-grid.is-dragging *,
        .rankholders-grid.is-dragging * {
            pointer-events: none !important;
            cursor: grabbing !important;
            user-select: none !important;
        }

        .dept-card {
            flex: 0 0 82% !important;
            max-width: 82% !important;
            scroll-snap-align: center !important;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
        }

        .video-card {
            flex: 0 0 88% !important;
            max-width: 88% !important;
            height: 260px !important;
            border-radius: 12px !important;
            overflow: hidden !important;
            scroll-snap-align: center !important;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
        }

        .happenings-header h2 {
            font-size: 22px !important;
            white-space: nowrap !important;
            margin: 0 !important;
        }

        .videos-header .mobile-slider-arrows,
        .happenings-header .mobile-slider-arrows {
            display: none !important;
        }

        .happening-card {
            flex: 0 0 88% !important;
            max-width: 88% !important;
            min-width: 0 !important;
            scroll-snap-align: center !important;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
            display: flex !important;
            flex-direction: column !important;
        }

        .happening-card-body {
            padding: 16px !important;
        }

        .happening-card-body h3 {
            font-size: 16px !important;
            line-height: 1.35 !important;
            margin-bottom: 0 !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .happening-card-body p {
            display: none !important;
        }

        .rankholder-card {
            flex: 0 0 82% !important;
            max-width: 82% !important;
            scroll-snap-align: center !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }

        .gallery-masonry {
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }

        .gallery-item {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            height: auto !important;
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 14px !important;
            padding: 10px !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
            box-sizing: border-box !important;
            grid-column: auto !important;
            grid-row: auto !important;
        }

        .gallery-item img,
        .gallery-item:first-child img,
        .gallery-item:not(:first-child) img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            max-height: 280px !important;
            object-fit: cover !important;
            display: block !important;
            border-radius: 8px !important;
            box-shadow: none !important;
        }
    }

    @media (max-width: 480px) {
        .hero-inner {
            padding-top: 36px;
            padding-bottom: 50px;
            gap: 28px;
        }

        .hero-title {
            font-size: 30px;
        }

        .hero-subtitle {
            font-size: 15.5px;
            margin-bottom: 24px;
        }

        .hero-btn-courses,
        .hero-content .btn-primary,
        .btn-primary {
            width: 100% !important;
            justify-content: center !important;
            padding: 13px 24px !important;
            font-size: 16px !important;
            background: rgb(177, 41, 54) !important;
            background-color: rgb(177, 41, 54) !important;
            border-color: rgb(177, 41, 54) !important;
            color: #FFFFFF !important;
            border-radius: 50px !important;
        }

        .announcement-card {
            padding: 20px 16px;
        }

        .announcement-header h3 {
            font-size: 18px;
        }

        .hero-section {
            padding-top: 28px;
            padding-bottom: 28px;
        }

        .stats-bar,
        .mobile-hero-stats {
            margin-top: 96px !important;
            margin-bottom: 22px !important;
            width: calc(100% + 22px) !important;
            max-width: calc(100% + 22px) !important;
            margin-left: -11px !important;
            margin-right: -11px !important;
        }

        .stats-inner,
        .mobile-hero-stats .stats-inner {
            display: flex !important;
            flex-direction: row !important;
            align-items: stretch !important;
            gap: 0 !important;
            padding: 0 !important;
            border-radius: 16px !important;
            background: #FFFFFF !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
            overflow: hidden !important;
            width: 100% !important;
        }

        .stat-item,
        .mobile-hero-stats .stat-item {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            flex: 1 1 0 !important;
            gap: 0 !important;
            padding: 13px 4px 11px !important;
            margin: 0 !important;
            min-width: 0 !important;
            max-width: unset !important;
            width: unset !important;
            border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
            box-sizing: border-box !important;
        }

        .stat-item:last-child,
        .mobile-hero-stats .stat-item:last-child {
            border-right: none !important;
        }

        .stat-icon,
        .mobile-hero-stats .stat-icon {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin-bottom: 5px !important;
            width: auto !important;
            height: auto !important;
        }

        .stat-icon img,
        .mobile-hero-stats .stat-icon img {
            display: block !important;
            width: 25px !important;
            height: 25px !important;
            max-width: 25px !important;
            max-height: 25px !important;
            object-fit: contain !important;
        }

        .stat-info,
        .mobile-hero-stats .stat-info {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 2px !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        .stat-number,
        .mobile-hero-stats .stat-number {
            font-size: 20px !important;
            font-weight: 800 !important;
            color: #101828 !important;
            line-height: 1.1 !important;
            margin: 0 !important;
            padding: 0 !important;
            white-space: nowrap !important;
            font-variant-numeric: tabular-nums !important;
        }

        .stat-label,
        .mobile-hero-stats .stat-label {
            font-size: 9.5px !important;
            font-weight: 700 !important;
            color: #2e4a6f !important;
            letter-spacing: 0.2px !important;
            text-transform: uppercase !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1.15 !important;
            white-space: nowrap !important;
        }

        @media (max-width: 375px) {
            .stat-number,
            .mobile-hero-stats .stat-number {
                font-size: 18px !important;
            }
            .stat-label,
            .mobile-hero-stats .stat-label {
                font-size: 8.5px !important;
                letter-spacing: 0 !important;
            }
            .stat-icon img,
            .mobile-hero-stats .stat-icon img {
                width: 22px !important;
                height: 22px !important;
            }
        }




        .gallery-masonry {
            gap: 14px !important;
        }

        .gallery-item {
            padding: 8px !important;
            border-radius: 12px !important;
        }

        .gallery-item img,
        .gallery-item:first-child img,
        .gallery-item:not(:first-child) img {
            max-height: 240px !important;
            border-radius: 6px !important;
        }

        .rankholder-card {
            padding: 36px 16px 24px;
        }

        .about-content h2,
        .courses-header h2,
        .explore-section h2,
        .videos-header h2,
        .happenings-header h2,
        .gallery-section h2 {
            font-size: 24px;
        }

        .principal-content h3 {
            font-size: 24px;
        }

        .principal-content .principal-title {
            font-size: 18px;
        }

        .principal-image {
            max-width: 240px;
        }

        .principal-image img {
            max-width: 240px;
            max-height: 280px;
        }

        .rankholders-header .section-label span {
            white-space: nowrap !important;
            font-size: 16px !important;
            display: inline-block !important;
        }

        .mobile-slider-arrows[data-slider="rankholders-grid"] {
            display: none !important;
        }
    }