/* ===========================
   CSS VARIABLES - ORGANIZED
   Same styles, just with variables!
   =========================== */

:root {
    /* ===== PRIMARY COLORS ===== */
    --color-primary: #B92525;
    /* Main red - used 128 times */
    --color-primary-dark: #8B1D1D;
    /* Dark red */
    --color-primary-hover: #8B2332;
    /* Hover red */
    --color-primary-light: #6d1a27;
    /* Light red */

    /* ===== SECONDARY COLORS ===== */
    --color-secondary: #F8B531;
    /* Main yellow - used 81 times */
    --color-secondary-hover: #e8b461;
    /* Hover yellow */
    --color-secondary-dark: #E5A328;
    /* Dark yellow */
    --color-secondary-alt: #e8a521;
    /* Alt yellow */
    --color-secondary-darker: #E0A020;
    /* Darker yellow */

    /* ===== NEUTRAL COLORS ===== */
    --color-black: #000000;
    /* Black - used 168 times total */
    --color-black-alt: #000;
    /* Black alt */
    --color-white: #FFFFFF;
    /* White - used 116 times total */
    --color-white-alt: #fff;
    /* White alt */

    /* ===== GRAY SCALE ===== */
    --color-gray-darkest: #333;
    /* Darkest gray */
    --color-gray-dark: #555;
    /* Dark gray */
    --color-gray-medium: #666;
    /* Medium gray */
    --color-gray: #999;
    /* Gray */
    --color-gray-light: #C4C4C4;
    /* Light gray */
    --color-gray-lighter: #D9D9D9;
    /* Lighter gray */
    --color-gray-lightest: #E0E0E0;
    /* Lightest gray */

    /* ===== BACKGROUND COLORS ===== */
    --color-bg-cream: #FFF3DB;
    /* Cream background */
    --color-bg-light: #F5F5F5;
    /* Light background - used 51 times */
    --color-bg-lighter: #F0F0F0;
    /* Lighter background */
    --color-bg-lightest: #f4f4f4;
    /* Lightest background */
    --color-bg-yellow-light: #FFFBF5;
    /* Light yellow bg */
    --color-bg-yellow-lighter: #FFF9E6;
    /* Lighter yellow bg */
    --color-bg-yellow-alt: #FFF8E8;
    /* Alt yellow bg */
    --color-bg-blue-light: #E2EDF9;
    /* Light blue bg */

    /* ===== SPECIFIC COLORS ===== */
    --color-text-dark: #5F5F5F;
    /* Dark text */

    /* ===== FONTS ===== */
    --font-primary: 'Nunito', 'Arial', sans-serif;

    /* ===== RGBA COLORS (Most Used) ===== */
    --shadow-light: rgba(0, 0, 0, 0.15);
    --shadow-medium: rgba(0, 0, 0, 0.2);
    --overlay-dark: rgba(0, 0, 0, 0.95);
    --overlay-medium: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(0, 0, 0, 0.1);
    --overlay-lighter: rgba(0, 0, 0, 0.08);
    --overlay-lightest: rgba(0, 0, 0, 0.05);
}

/* ===========================
   Bootstrap Custom Styles
   EXACT SAME STYLES - Just using variables
   =========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden !important;
}

body {
    font-family: var(--font-primary);
    overflow-x: hidden;
}

/* ===========================
   Hero Section
   =========================== */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
    z-index: 2;
}

/* ===========================
   Header
   =========================== */

.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 20px;
}

.header-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    margin: 0 auto;
}

/* Logo */
.logo {
    padding: 8px 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo img {
    height: 115px;
    width: 115px;
    object-fit: contain;
}

/* Navigation Container */
.nav-container {
    background-color: var(--color-secondary);
    border-radius: 10px 0 0 10px;
    padding: 0;
    display: flex;
    align-items: center;
    flex: 1;
}

.nav {
    display: flex;
    gap: 0;
    align-items: center;
    padding: 0 5px;
    width: 100%;
    justify-content: space-evenly;
}

.nav-link {
    color: var(--color-black);
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    transition: color 0.3s;
    white-space: nowrap;
    padding: 17px 12px;
}

.nav-link:hover {
    color: var(--color-primary-hover);
}

.nav-icon {
    font-size: 22px;
    text-decoration: none;
    color: var(--color-gray-darkest);
    display: flex;
    align-items: center;
    padding: 20px 12px;
    transition: color 0.3s;
}

.nav-icon img {
  width: 22px;
}

.nav-icon:hover {
    color: var(--color-primary-hover);
}



.nav-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 150px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.nav-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* Video Overlay (Optional) */
.nav-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000ab;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-radius: 10px;
}


.nav-video-play-icon:hover {
    transform: scale(1.1);
}

.nav-video-play-icon i {
    font-size: 30px;
    color: #fff;
    margin-left: 3px;
}

.nav-video-text {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 0 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Thumbnail Style (if using poster) */
.nav-video-wrapper video[poster] {
    cursor: pointer;
}

/* Mobile - Hide submenu */
@media (max-width: 991px) {
    .nav-submenu-three-cols {
        display: none;
    }
}

/* Add this class to the specific submenu you want to fix */
.nav-submenu-wide {
    min-width: 1000px !important;
    left: 250px !important;
}


/* ===========================
   Sub-Menu Dropdown (Our Community)
   =========================== */

.nav-item.dropdown {
    position: relative;
}

.dropdown-menu-community {
    background-color: var(--color-bg-cream);
    border: none;
    border-radius: 20px;
    padding: 30px 40px;
    min-width: 400px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    margin-top: 10px;
}

.dropdown-menu-community .dropdown-item {
    color: var(--color-black);
    font-size: 20px;
    font-weight: 600;
    padding: 15px 20px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    font-family: var(--font-primary);
}

.dropdown-menu-community .dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
}

.dropdown-menu-community .dropdown-divider {
    margin: 0;
    border-color: rgba(0, 0, 0, 0.1);
    opacity: 0.3;
}

@media (min-width: 992px) {
    .dropdown-menu-community {
        min-width: 450px;
        padding: 40px 50px;
    }

    .dropdown-menu-community .dropdown-item {
        font-size: 22px;
        padding: 18px 20px;
    }
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-right: 45px;
}

.login-btn {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 19px 30px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 0;
    font-weight: 700;
    transition: background-color 0.3s;
}

.login-btn:hover {
    background-color: var(--color-primary-light);
}

.lang-selector {
    background-color: var(--color-secondary);
    padding: 17px 15px;
    font-weight: 700;
    cursor: pointer;
    color: var(--color-gray-darkest);
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 0 10px 10px 0;
    transition: background-color 0.3s;
}

.lang-selector:hover {
    background-color: var(--color-secondary-hover);
}

/* ===========================
   Mobile Header - Responsive
   =========================== */

/* Mobile Only (< 992px) */
@media (max-width: 991px) {

    /* Header Layout */
    .header {
        padding: 15px;
    }

    .header-wrapper {
        display: flex;
        align-items: center;
        gap: 0;
    }

    /* Logo - Left Side */
    .logo {
        padding: 0;
        margin-right: auto;
    }

    .logo img {
        height: 80px;
        width: 80px;
    }

    /* Hide Desktop Navigation */
    .nav-container {
        display: none !important;
    }

    /* Header Actions Container */
    .header-actions {
        display: flex;
        gap: 0;
        padding-right: 0;
        flex-shrink: 0;
    }

    /* Menu Button - Yellow */
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background-color: var(--color-secondary);
        border: none;
        border-radius: 10px 0 0 10px;
        padding: 20px 25px;
        font-size: 16px;
        font-weight: 700;
        color: var(--color-black);
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .mobile-menu-btn:hover {
        background-color: var(--color-secondary-hover);
    }

    /* Hamburger Icon */
    .mobile-menu-btn::before {
        content: '';
        display: block;
        width: 24px;
        height: 18px;
        background-image:
            linear-gradient(var(--color-black) 0 3px, transparent 3px 6px),
            linear-gradient(var(--color-black) 0 3px, transparent 3px 6px),
            linear-gradient(var(--color-black) 0 3px, transparent 3px 6px);
        background-size: 100% 6px;
        background-position: 0 0, 0 50%, 0 100%;
        background-repeat: no-repeat;
    }

    /* Login Button - Red */
    .login-btn {
        border-radius: 0;
        padding: 20px 30px;
        font-size: 16px;
        font-weight: 700;
    }

    /* Language Selector - Yellow */
    .lang-selector {
        border-radius: 0 10px 10px 0;
        padding: 20px 20px;
        font-size: 16px;
        font-weight: 700;
        gap: 5px;
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .logo img {
        height: 90px;
        width: 90px;
    }

    .mobile-menu-btn {
        padding: 22px 30px;
        font-size: 17px;
    }

    .login-btn {
        padding: 22px 35px;
        font-size: 17px;
    }

    .lang-selector {
        padding: 22px 25px;
        font-size: 17px;
    }
}

/* Small Mobile (< 576px) */
@media (max-width: 575px) {
    .header {
        padding: 10px;
    }

    .logo img {
        height: 60px;
        width: 60px;
    }

    .mobile-menu-btn {
        padding: 15px 18px;
        font-size: 14px;
        gap: 8px;
    }

    .mobile-menu-btn::before {
        width: 20px;
        height: 15px;
    }

    .login-btn {
        padding: 15px 20px;
        font-size: 14px;
    }

    .lang-selector {
        padding: 15px 15px;
        font-size: 14px;
    }
}


/* ===========================
   Video Background & Overlay
   =========================== */

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

/* ===========================
   Hero Content
   =========================== */

.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 200px 0 100px;
    flex: 1;
    display: flex;
    align-items: center;
}

.hero-content .container-fluid {
    position: relative;
    width: 100%;
    padding: 0 40px;
}

/* Brochure Image */
.brochure-image {
    position: absolute;
    left: 80px;
    top: -80px;
    max-width: 480px;
    z-index: 3;
}

.brochure-image img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.4));
}

/* Hero Title Wrapper */
.hero-title-wrapper {
    position: relative;
    display: inline-block;
    width: 50%;
    max-width: 700px;
    margin: 0 auto;
    left: 23%;
    transform: translateX(-50%);
}

.title-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.hero-title {
    font-size: 35px;
    color: white;
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    padding: 40px 14px;
    text-align: center;
    font-family: var(--font-primary);
    margin: 0;
}

/* Anniversary Badge */
.anniversary-badge {
    position: absolute;
    right: 80px;
    bottom: -20px;
    max-width: 220px;
    z-index: 3;
}

.anniversary-badge img {
    width: 100%;
    height: auto;
}

/* ===========================
   Section Transition
   =========================== */

.section-transition {
    position: relative;
    width: 100%;
    margin-top: -1px;
    z-index: 100;
}

.transition-brush {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

.transition-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    z-index: 2;
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
}

.transition-logo {
    flex-shrink: 0;
}

.transition-logo img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.transition-social {
    display: flex;
    gap: 25px;
    align-items: center;
}

.transition-social-icon {
    color: var(--color-primary-hover);
    font-size: 28px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.transition-social-icon:hover {
    transform: scale(1.2);
    color: var(--color-primary);
}

/* Brush Shape Bottom - REMOVED */

/* ===========================
   Responsive Breakpoints
   =========================== */

/* Large Desktops (1400px) */
@media (max-width: 1400px) {
    .nav-link {
        font-size: 15px;
        padding: 19px 15px;
    }

    .nav {
        padding: 0 25px;
    }
}

/* Desktops (1200px) */
@media (max-width: 1200px) {
    .nav-link {
        font-size: 14px;
        padding: 18px 10px;
    }

    .nav {
        padding: 0 20px;
    }

    .nav-icon {
        padding: 18px 10px;
        font-size: 20px;
    }

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

    .hero-title-wrapper {
        width: 55%;
    }

    .brochure-image {
        max-width: 400px;
        left: 60px;
    }
}

/* Tablets & Small Desktops (1024px) */
@media (max-width: 1024px) {

    .header {
        padding: 15px 30px;
    }

    .logo img {
        height: 80px;
        width: 80px;
    }

    .nav-container {
        justify-content: flex-end;
    }

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

    .hero-title-wrapper {
        width: 60%;
    }

    .brochure-image {
        max-width: 350px;
        left: 40px;
    }

    .anniversary-badge {
        max-width: 180px;
        right: 40px;
    }

    .transition-content {
        gap: 40px;
    }

    .transition-logo img {
        width: 90px;
        height: 90px;
    }

    .transition-social {
        gap: 20px;
    }

    .transition-social-icon {
        font-size: 26px;
    }
}

/* Tablets (768px) */
@media (max-width: 768px) {
    .header {
        padding: 12px 20px;
    }

    .logo img {
        height: 60px;
        width: 60px;
    }

    .login-btn {
        padding: 15px 25px;
        font-size: 14px;
    }

    .lang-selector {
        padding: 15px 15px;
        font-size: 14px;
    }

    .hero-content {
        padding: 150px 0 80px;
    }

    .hero-content .container-fluid {
        padding: 0 20px;
    }

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

    .hero-title-wrapper {
        width: 70%;
        max-width: 500px;
    }

    .brochure-image {
        max-width: 280px;
        left: 20px;
        top: -60px;
    }

    .anniversary-badge {
        max-width: 150px;
        right: 20px;
    }

    .transition-content {
        gap: 30px;
        max-width: 500px;
    }

    .transition-logo img {
        width: 80px;
        height: 80px;
    }

    .transition-social {
        gap: 18px;
    }

    .transition-social-icon {
        font-size: 24px;
    }
}

/* Mobile (480px) */
@media (max-width: 480px) {
    .header {
        padding: 10px 15px;
    }

    .header-wrapper {
        gap: 10px;
    }

    .logo img {
        height: 80px;
        width: 80px;
    }

    .hero-content {
        padding: 120px 0 60px;
    }

    .hero-content .container-fluid {
        padding: 0 15px;
    }

    .hero-title {
        font-size: 20px;
        padding: 25px 10px;
    }

    .hero-title-wrapper {
        width: 80%;
        max-width: 400px;
    }

    .brochure-image {
        max-width: 220px;
        left: 10px;
        top: -40px;
    }

    .anniversary-badge {
        max-width: 120px;
        right: 10px;
    }

    .transition-content {
        gap: 20px;
        max-width: 400px;
        flex-direction: column;
    }

    .transition-logo img {
        width: 70px;
        height: 70px;
    }

    .transition-social {
        gap: 15px;
    }

    .transition-social-icon {
        font-size: 22px;
    }
}

/* ===========================
   Headmaster Section
   =========================== */

.headmaster-section {
    background-color: #F4F4F4;
    padding: 90px 0;
    position: relative;
    z-index: 111;
}

.headmaster-image-wrapper {
    position: relative;
    max-width: 470px;
}

.headmaster-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.headmaster-content {
    padding-left: 20px;
}

.headmaster-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 2.313rem;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-family: var(--font-primary);
}

.headmaster-text {
    font-size: 15px;
    line-height: 1.438rem;
    color: var(--color-black);
}

.headmaster-text p {
    margin-bottom: 20px;
}

.headmaster-text p:last-child {
    margin-bottom: 0;
}

.regards {
    margin-top: 30px;
    margin-bottom: 10px;
}

.signature {
    font-size: 48px;
    font-weight: 400;
    color: var(--color-black);
    margin: 10px 0;
    font-family: var(--font-primary);
}

.principal-title {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 10px;
}

/* ===========================
   Headmaster Section - Responsive
   =========================== */

@media (max-width: 1200px) {
    .headmaster-section {
        padding: 80px 0;
    }

    .headmaster-content {
        padding-left: 30px;
    }

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

    .signature {
        font-size: 44px;
    }
}

@media (max-width: 991px) {
    .headmaster-section {
        padding: 60px 0;
    }

    .headmaster-content {
        padding-left: 0;
        margin-top: 40px;
    }

    .headmaster-title {
        font-size: 36px;
        text-align: left;
    }

    .headmaster-text {
        text-align: left;
    }

    .signature {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .headmaster-section {
        padding: 50px 0;
    }

    .headmaster-title {
        font-size: 32px;
    }

    .headmaster-text {
        font-size: 15px;
    }

    .signature {
        font-size: 38px;
    }

    .headmaster-image-wrapper {
        max-width: 400px;
    }
}

@media (max-width: 576px) {
    .headmaster-section {
        padding: 40px 0;
    }

    .headmaster-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .headmaster-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .headmaster-text p {
        margin-bottom: 15px;
    }

    .signature {
        font-size: 34px;
    }

    .principal-title {
        font-size: 14px;
    }

    .headmaster-image-wrapper {
        max-width: 350px;
    }
}

@media (max-width: 400px) {
    .headmaster-title {
        font-size: 24px;
    }

    .signature {
        font-size: 30px;
    }

    .headmaster-image-wrapper {
        max-width: 350px;
        margin: 0 auto;
    }
}

/* ===========================
   Upcoming Events Section
   =========================== */

.events-section {
    padding: 80px 0;
    position: relative;
}

.events-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 50px;
    text-transform: uppercase;
    font-family: var(--font-primary);
}

/* Events Grid */
.events-grid {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 10px 5px 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

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

/* Event Card */
.event-card {
    min-width: 220px;
    max-width: 220px;
    flex-shrink: 0;
}

.event-card-inner {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #f8b531;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.event-card-inner:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Event Date Badge */
.event-date-badge {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-secondary);
    border-radius: 10px 0px 10px 0px;
    padding: 8px 12px;
    text-align: center;
    z-index: 10;
}

.event-date-badge.event-date-yellow {
    background-color: var(--color-secondary);
}

.event-date-badge.event-date-red {
    background-color: var(--color-primary);
}

.event-date-badge.event-date-red .event-day-name,
.event-date-badge.event-date-red .event-day,
.event-date-badge.event-date-red .event-month {
    color: white;
}

.event-date-badge.event-date-gray {
    background-color: #6B7280;
}

.event-date-badge.event-date-gray .event-day-name,
.event-date-badge.event-date-gray .event-day,
.event-date-badge.event-date-gray .event-month {
    color: white;
}

.event-day-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    display: block;
    line-height: 1;
    margin-bottom: 2px;
}

.event-day {
    font-size: 28px;
    font-weight: 900;
    color: var(--color-black);
    line-height: 1;
    display: block;
    margin: 3px 0;
}

.event-month {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    display: block;
    line-height: 1;
    margin-top: 2px;
}

/* Event Image */
.event-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.event-card-inner:hover .event-image img {
    transform: scale(1.08);
}

/* Event Content */
.event-content {
    padding: 20px 18px 22px;
    flex: 1;
}

.event-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 10px;
    line-height: 1.3;
    font-family: var(--font-primary);
}

.event-description {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-gray-medium);
    margin: 0;
}

/* Progress Navigation */
.events-progress {
    width: 100%;
    margin: 30px 0 0;
    padding: 0;
}

.progress-track {
    width: 100%;
    height: 5px;
    background-color: #D1D5DB;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background-color: var(--color-primary);
    border-radius: 3px;
    transition: width 0.1s ease-out;
}

/* ===========================
   Events Section - Responsive
   =========================== */

@media (max-width: 1199px) {
    .events-title {
        font-size: 42px;
    }

    .event-card {
        min-width: 200px;
        max-width: 200px;
    }
}

@media (max-width: 991px) {
    .events-section {
        padding: 60px 0;
    }

    .events-title {
        font-size: 38px;
        margin-bottom: 40px;
    }

    .event-image {
        height: 180px;
    }

    .event-card {
        min-width: 190px;
        max-width: 190px;
    }
}

@media (max-width: 768px) {
    .events-section {
        padding: 50px 0;
    }

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

    .event-image {
        height: 170px;
    }

    .event-content {
        padding: 15px;
    }

    .events-grid {
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .events-section {
        padding: 40px 0;
    }

    .events-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .event-card {
        min-width: 240px;
        max-width: 240px;
    }

    .event-image {
        height: 180px;
    }

    .event-date-badge {
        padding: 6px 10px;
    }

    .event-day {
        font-size: 24px;
    }

    .event-title {
        font-size: 15px;
    }

    .event-description {
        font-size: 11px;
    }

    .events-grid {
        gap: 15px;
    }
}

/* ===========================
   Updates Section
   =========================== */

.updates-section {
    background-color: var(--color-white);
    padding: 80px 0;
    position: relative;
}

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

.updates-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin: 0;
}

.view-all-btn {
    background-color: var(--color-secondary);
    color: var(--color-black);
    padding: 12px 35px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.view-all-btn:hover {
    background-color: #e8a521;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(248, 181, 49, 0.4);
    color: var(--color-black);
}

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

/* Updates Grid */
.updates-grid {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 10px 5px 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

/* Update Card */
.update-card {
    min-width: 409px;
    max-width: 409px;
    flex-shrink: 0;
}

.update-card-inner {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.update-card-inner:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* Update Category Badge */
.update-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--color-secondary);
    color: var(--color-black);
    padding: 8px 15px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 11px;
    z-index: 10;
    width: 90px;
    text-align: center;
}

.update-category-yellow {
    background-color: var(--color-secondary);
}

.update-category-blue {
    background-color: #4A90E2;
    color: white;
}

/* Update Image */
.update-image {
    width: 100%;
    height: 409px;
    overflow: hidden;
    position: relative;
}

.update-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    pointer-events: none;
}

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

.update-card-inner:hover .update-image img {
    transform: scale(1.08);
}

.unesco-logo {
    margin-bottom: 10px;
    width: 130px;
}

/* Update Content */
.update-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    z-index: 5;
}

.update-date {
    font-size: 14px;
    color: var(--color-white);
    margin-bottom: 10px;
    font-weight: 400;
}

.update-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    line-height: 1.4;
    font-family: var(--font-primary);
}

/* Updates Progress Navigation */
.updates-progress {
    width: 100%;
    margin: 30px 0 0;
    padding: 0;
}

/* ===========================
   Updates Section - Responsive
   =========================== */

@media (max-width: 1199px) {
    .updates-title {
        font-size: 42px;
    }

    .update-card {
        min-width: 420px;
        max-width: 420px;
    }
}

@media (max-width: 991px) {
    .updates-section {
        padding: 60px 0;
    }

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

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

    .view-all-btn {
        padding: 12px 28px;
        font-size: 15px;
    }

    .update-card {
        min-width: 380px;
        max-width: 380px;
    }

    .update-image {
        height: 280px;
    }
}

@media (max-width: 768px) {
    .updates-section {
        padding: 50px 0;
    }

    .updates-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

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

    .update-card {
        min-width: 340px;
        max-width: 340px;
    }

    .update-image {
        height: 250px;
    }

    .update-content {
        padding: 20px;
    }

    .update-title {
        font-size: 18px;
    }

    .updates-grid {
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .updates-section {
        padding: 40px 0;
    }

    .updates-title {
        font-size: 28px;
    }

    .view-all-btn {
        padding: 10px 24px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }

    .update-card {
        min-width: 280px;
        max-width: 280px;
    }

    .update-image {
        height: 220px;
    }

    .update-category {
        padding: 6px 16px;
        font-size: 12px;
    }

    .update-content {
        padding: 18px;
    }

    .update-date {
        font-size: 12px;
    }

    .update-title {
        font-size: 16px;
    }

    .updates-grid {
        gap: 15px;
    }
}

/* ===========================
   Quick Links Section
   =========================== */

.quick-links-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
    position: relative;
}

.quick-links-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 50px;
    text-transform: uppercase;
    font-family: var(--font-primary);
}

/* Quick Link Card */
.quick-link-card {
    display: block;
    text-decoration: none;
    border-radius: 20px;
    padding: 25px 20px;
    height: 259px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.quick-link-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Card Colors */
.quick-link-red {
    background-color: var(--color-primary);
}

.quick-link-yellow {
    background-color: var(--color-secondary);
}

.quick-link-gray {
    background-color: #6B7280;
}

/* Quick Link Icon - Large Background */
.quick-link-icon {
    position: absolute;
    top: 10px;
    left: -10px;
    width: 140px;
    height: 140px;
    opacity: 1;
    pointer-events: none;
}

.quick-link-icon svg {
    width: 100%;
    height: 100%;
}

.quick-link-red .quick-link-icon svg {
    color: rgba(139, 35, 50, 0.5);
}

.quick-link-yellow .quick-link-icon svg {
    color: rgba(218, 165, 32, 0.5);
}

.quick-link-gray .quick-link-icon svg {
    color: rgba(55, 65, 81, 0.5);
}

/* Quick Link Content */
.quick-link-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
}

.quick-link-title {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
    text-transform: uppercase;
    font-family: var(--font-primary);
}

.quick-link-red .quick-link-title,
.quick-link-gray .quick-link-title {
    color: white;
}

.quick-link-yellow .quick-link-title {
    color: var(--color-black);
}

.quick-link-content i {
    font-size: 20px;
    align-self: flex-start;
}

.quick-link-red .quick-link-content i,
.quick-link-gray .quick-link-content i {
    color: white;
}

.quick-link-yellow .quick-link-content i {
    color: var(--color-black);
}

/* ===========================
   Quick Links - Responsive
   =========================== */

@media (max-width: 1199px) {
    .quick-links-title {
        font-size: 42px;
    }

    .quick-link-card {
        height: 240px;
        padding: 22px 18px;
    }

    .quick-link-title {
        font-size: 17px;
    }

    .quick-link-icon {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 991px) {
    .quick-links-section {
        padding: 60px 0;
    }

    .quick-links-title {
        font-size: 38px;
        margin-bottom: 40px;
    }

    .quick-link-card {
        height: 220px;
        padding: 20px 16px;
    }

    .quick-link-title {
        font-size: 16px;
    }

    .quick-link-icon {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 768px) {
    .quick-links-section {
        padding: 50px 0;
    }

    .quick-links-title {
        font-size: 34px;
    }

    .quick-link-card {
        height: 200px;
        padding: 18px 15px;
    }

    .quick-link-title {
        font-size: 15px;
    }

    .quick-link-icon {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 575px) {
    .quick-links-section {
        padding: 40px 0;
    }

    .quick-links-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .quick-link-card {
        height: 180px;
        padding: 16px 14px;
    }

    .quick-link-title {
        font-size: 14px;
    }

    .quick-link-content i {
        font-size: 18px;
    }

    .quick-link-icon {
        width: 90px;
        height: 90px;
    }
}

.graduates-section {
    background-color: #E5E5E5;
    padding: 0;
    overflow: hidden;
}

.graduates-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: auto;
    gap: 0;
}

.grad-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

/* Images that share row with title should align to bottom */
.grad-img {
    z-index: 1;
}

.grad-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

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

/* Grid Item Sizes */
/* Note: Position controlled by inline styles, these classes add sizing/behavior */

/* Default Short: 200px min height */
.grad-img {
    min-height: 200px;
}

/* Medium: 300px min height */
.grad-medium {
    min-height: 300px;
}

.grad-medium img {
    min-height: 300px;
    object-fit: cover;
}

/* Tall: 400px min height */
.grad-tall {
    min-height: 400px;
}

.grad-tall img {
    min-height: 400px;
    object-fit: cover;
}

/* Wide: 2:1 aspect ratio preference */
.grad-wide {
    min-height: 200px;
}

.grad-wide img {
    min-height: 200px;
    object-fit: cover;
}

/* Title Block: half height */
.grad-title {
    height: 50%;
    align-self: start;
    z-index: 10;
    position: relative;
}

.grad-title-card {
    width: 100%;
    height: 100%;
    min-height: 100px;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.grad-title-card h2 {
    font-size: 56px;
    font-weight: 900;
    color: white;
    margin: 0;
    text-transform: uppercase;
    font-family: var(--font-primary);
}

/* Stat Cards */
.grad-stat {
    /* Inherits size from explicit positioning */
}

.grad-stat-card {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}

.grad-stat-yellow {
    background-color: var(--color-secondary);
}

.grad-stat-black {
    background-color: var(--color-black);
}

.grad-stat-red {
    background-color: var(--color-primary);
}

.stat-number {
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
    font-family: var(--font-primary);
}

.grad-stat-yellow .stat-number {
    color: var(--color-black);
}

.grad-stat-black .stat-number,
.grad-stat-red .stat-number {
    color: white;
}

.stat-label {
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-primary);
}

.grad-stat-yellow .stat-label {
    color: var(--color-black);
}

.grad-stat-black .stat-label,
.grad-stat-red .stat-label {
    color: white;
}

/* ===========================
   Graduates Magazine Layout
   =========================== */

/* Main Section */
.graduates-magazine {
    width: 100%;
    min-height: 110vh;
    background-color: var(--color-white);
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.3fr 1.4fr 1fr;
    gap: 0;
    padding: 0;
}

/* Column Structure */
.grad-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* Column 1 - Far Left */
.grad-col-1 {
    padding: 8vh 0 8vh 3vw;
}

.grad-col-1 .grad-portrait-1 {
    height: 45vh;
    margin-bottom: 3vh;
}

.grad-col-1 .grad-portrait-2 {
    height: 30vh;
}

/* Column 2 */
.grad-col-2 {
    padding: 5vh 0 8vh 0;
}

.grad-title-block {
    background-color: var(--color-primary);
    height: 18vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4vh;
}

.grad-title-block h2 {
    color: var(--color-white);
    font-size: 3.5vw;
    font-weight: 900;
    text-transform: uppercase;
}

.grad-col-2 .grad-tall {
    height: 52vh;
    margin-bottom: 4vh;
}

.grad-stat-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4vh 2vw;
    height: 22vh;
}

.grad-stat-yellow {
    background-color: var(--color-secondary);
}

.grad-stat-black {
    background-color: var(--color-black);
}

.grad-stat-red {
    background-color: var(--color-primary);
}

.stat-number {
    font-size: 4.5vw;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.5vh;
}

.stat-label {
    font-size: 1.3vw;
    font-weight: 600;
    text-transform: capitalize;
}

.grad-stat-yellow .stat-number,
.grad-stat-yellow .stat-label {
    color: var(--color-black);
}

.grad-stat-black .stat-number,
.grad-stat-black .stat-label,
.grad-stat-red .stat-number,
.grad-stat-red .stat-label {
    color: var(--color-white);
}

/* Column 3 - Center */
.grad-col-3 {
    padding: 12vh 0 8vh 0;
}

.grad-col-3 .grad-medium {
    height: 35vh;
    margin-bottom: 5vh;
}

.grad-col-3 .grad-stat-black {
    margin-bottom: 5vh;
}

.grad-col-3 .grad-small {
    height: 28vh;
}

/* Column 4 */
.grad-col-4 {
    padding: 5vh 0 8vh 0;
}

.grad-col-4 .grad-dominant {
    height: 68vh;
    margin-bottom: 4vh;
}

.grad-col-4 .grad-bottom {
    height: 25vh;
}

/* Column 5 - Far Right */
.grad-col-5 {
    padding: 10vh 3vw 8vh 0;
}

.grad-col-5 .grad-top {
    height: 32vh;
    margin-bottom: 4vh;
}

.grad-col-5 .grad-stat-red {
    margin-bottom: 4vh;
}

.grad-col-5 .grad-bottom-2 {
    height: 30vh;
}

/* Image Container */
.grad-image {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-light);
}

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

.grad-image:hover img {
    transform: scale(1.03);
}

/* Hover Overlay */
.grad-hover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    align-items: flex-end;
    padding: 2vh 1.5vw 1.5vh 1.5vw;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.grad-image:hover .grad-hover-overlay {
    opacity: 1;
    transform: translateY(0);
}

.grad-info {
    width: 100%;
}

.grad-name {
    color: var(--color-white);
    font-size: 1.1vw;
    font-weight: 700;
    margin-bottom: 0.3vh;
    line-height: 1.2;
}

.grad-title {
    color: var(--color-white);
    font-size: 0.85vw;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.95;
}

/* Hover States - Desktop Only */
@media (hover: hover) {
    .grad-image {
        cursor: pointer;
    }
}

/* ===========================
   Graduates Responsive - Tablet
   =========================== */

@media (max-width: 1024px) {
    .graduates-magazine {
        grid-template-columns: repeat(3, 1fr);
        min-height: auto;
        gap: 0;
    }

    .grad-col-1,
    .grad-col-2,
    .grad-col-3,
    .grad-col-4,
    .grad-col-5 {
        padding: 4vh 2vw;
    }

    .grad-title-block h2 {
        font-size: 5vw;
    }

    .stat-number {
        font-size: 6vw;
    }

    .stat-label {
        font-size: 2vw;
    }

    .grad-name {
        font-size: 1.8vw;
    }

    .grad-title {
        font-size: 1.3vw;
    }

    .grad-col-1 .grad-portrait-1,
    .grad-col-1 .grad-portrait-2,
    .grad-col-2 .grad-tall,
    .grad-col-3 .grad-medium,
    .grad-col-3 .grad-small,
    .grad-col-4 .grad-dominant,
    .grad-col-4 .grad-bottom,
    .grad-col-5 .grad-top,
    .grad-col-5 .grad-bottom-2 {
        height: 40vh;
    }

    .grad-title-block {
        height: 15vh;
    }

    .grad-stat-block {
        height: 20vh;
    }
}

/* ===========================
   Graduates Responsive - Mobile
   =========================== */

@media (max-width: 768px) {
    .graduates-magazine {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .grad-col-1,
    .grad-col-2,
    .grad-col-3,
    .grad-col-4,
    .grad-col-5 {
        padding: 2vh 4vw;
    }

    .grad-title-block {
        height: 20vh;
        margin-bottom: 3vh;
    }

    .grad-title-block h2 {
        font-size: 8vw;
    }

    .stat-number {
        font-size: 12vw;
    }

    .stat-label {
        font-size: 4vw;
    }

    .grad-stat-block {
        height: 25vh;
        margin-bottom: 3vh;
    }

    .grad-image {
        height: 50vh;
        margin-bottom: 3vh;
    }

    .grad-col-1 .grad-portrait-1,
    .grad-col-1 .grad-portrait-2,
    .grad-col-2 .grad-tall,
    .grad-col-3 .grad-medium,
    .grad-col-3 .grad-small,
    .grad-col-4 .grad-dominant,
    .grad-col-4 .grad-bottom,
    .grad-col-5 .grad-top,
    .grad-col-5 .grad-bottom-2 {
        height: 50vh;
        margin-bottom: 3vh;
    }

    .grad-name {
        font-size: 4vw;
    }

    .grad-title {
        font-size: 3vw;
    }

    .grad-hover-overlay {
        height: 30%;
        padding: 2vh 4vw;
    }
}

/* ===========================
   FAQs Section
   =========================== */

.faqs-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

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

.faqs-title {
    font-size: 56px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin: 0;
}

.view-all-btn {
    background-color: var(--color-secondary);
    color: var(--color-black);
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-primary);
}

.view-all-btn:hover {
    background-color: #e0a02a;
    color: var(--color-black);
    transform: translateX(5px);
}

/* Accordion Styling */
.faqs-accordion {
    border: none;
}

.accordion-button.faqs-accordion-button {
    background: transparent;
}

.faqs-accordion .accordion-item {
    overflow: hidden;
    border-radius: 0;
}

.faqs-accordion .accordion-button {
    color: var(--color-black);
    font-size: 22px;
    font-weight: normal;
    padding: 25px 75px;
    border: none;
    font-family: var(--font-primary);
    position: relative;
}


.faqs-accordion .accordion-button:focus {
    border: none;
}

.faqs-accordion .accordion-button::after {
    content: '+';
    background-image: none;
    width: auto;
    height: auto;
    font-size: 28px;
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1;
}

.faqs-accordion .accordion-button:not(.collapsed)::after {
    content: '−';
    transform: rotate(0deg);
}

.faqs-accordion .accordion-body {
    padding: 20px 30px 30px 30px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-dark);
    font-family: var(--font-primary);
}

.faqs-accordion .accordion-body h4 {
    display: block;
    margin-bottom: 10px;
    color: var(--color-black);
    font-size: 17px;
    font-weight: 700;
}

.faqs-accordion .accordion-body p {
    margin: 0;
}

/* Right Side Image */
.faqs-image {
    position: relative;
}

.faqs-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.col-lg-7.col-md-12.mb-4.mb-lg-0 {
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {

    .faqs-bootstrap-header {
        order: 1;
    }

    .faqs-accordion {
        order: 2;
    }

    .faqs-bootstrap-view-all {
        order: 3;
        margin-top: 20px;
    }
}

@media (min-width: 992px) {

    .faqs-bootstrap-header {
        order: 1;
    }

    .faqs-bootstrap-view-all {
        order: 2;
        margin-top: 0;
        margin-top: -80px !important;
    align-self: flex-end;
    margin-bottom: 41px;
    }

    .faqs-accordion {
        order: 3;
    }
}



/* ===========================
   FAQs Section - Responsive
   =========================== */

@media (max-width: 1199px) {
    .faqs-title {
        font-size: 42px;
    }

    .faqs-accordion .accordion-button {
        font-size: 17px;
        padding: 22px 0;
    }
}

@media (max-width: 991px) {
    .faqs-section {
        padding: 60px 0;
    }

    .faqs-header {
        margin-bottom: 35px;
    }

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

    .faqs-accordion .accordion-button {
        font-size: 16px;
        padding: 20px 0;
    }

    .faqs-image {
        min-height: 350px;
        margin-top: 30px;
    }
}

@media (max-width: 768px) {
    .faqs-section {
        padding: 50px 0;
    }

    .faqs-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

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

    .view-all-btn-small {
        width: 100%;
        justify-content: center;
    }

    .faqs-accordion .accordion-button {
        font-size: 15px;
        padding: 18px 0;
        gap: 12px;
    }

    .accordion-icon {
        font-size: 24px;
        width: 25px;
    }

    .faqs-accordion .accordion-body {
        padding: 0 0 25px 37px;
        font-size: 14px;
    }

    .faqs-image {
        min-height: 300px;
    }
}

@media (max-width: 575px) {
    .faqs-section {
        padding: 40px 0;
    }

    .faqs-title {
        font-size: 28px;
    }

    .faqs-accordion .accordion-button {
        font-size: 22px;
        padding: 15px 30px;
        gap: 10px;
    }

    .accordion-icon {
        font-size: 22px;
        width: 22px;
    }

    .faqs-accordion .accordion-body {
        padding: 0 0 20px 32px;
        font-size: 13px;
    }

    .faqs-accordion .accordion-body h4 {
        font-size: 14px;
    }

    .faqs-image {
        min-height: 250px;
        border-radius: 15px;
    }
}

/* ===========================
   Survey Banner Section
   =========================== */

.survey-banner {
    background-color: var(--color-secondary);
    background-image: linear-gradient(rgba(244, 163, 19, 0.76), rgb(244, 163, 19, 0.76)), url(../images/Group\ 71.png);
    padding: 40px 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.survey-graphic {
    border-radius: 10px;
}

.survey-graphic img {
    width: 432px;
    height: auto;
    border-radius: 10px;
}

.survey-content {
    color: var(--color-black);
    padding-top: 30px;
    padding-left: 20px;
}

.survey-title {
    font-size: 40px;
    font-weight: 900;
    font-family: var(--font-primary);
}

.survey-text {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 30px;
}

.take-survey-btn {
    background-color: white;
    color: var(--color-black);
    padding: 13px 35px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    width: 232px;
    gap: 10px;
    transition: all 0.3s ease;
}

/* ===========================
   Contact & Map Section
   =========================== */

.contact-map-section {
    position: relative;
}

.contact-info {
    background-color: var(--color-primary);
    color: white;
    padding: 65px 60px;
    height: 100%;
    min-height: 400px;
    position: relative;
}

.contact-title {
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 40px;
    font-family: var(--font-primary);
}

.contact-detail {
    margin-bottom: 12px;
}

.contact-detail h3 {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 6px;
    font-family: var(--font-primary);
}

.contact-detail p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.contact-brush {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
}

.brush-decoration {
    width: 100%;
    height: auto;
    display: block;
}

.map-container {
    height: 100%;
    min-height: 400px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

/* ===========================
   Footer
   =========================== */

.footer {
    background-color: var(--color-white);
    padding: 0 0 30px;
    position: relative;
    z-index: 11;
}

.footer-logo img {
    max-width: 120px;
}

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

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

.footer-links li:before {
    content: "•";
    color: var(--color-primary);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    margin-right: 0.5em;
}

.footer-links a {
    color: var(--color-black);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--color-primary);
}

.newsletter-section {
    padding-left: 20px;
}

.newsletter-title {
    font-size: 16px;
    font-weight: normal;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-family: var(--font-primary);
}

.newsletter-form {
    display: flex;
    gap: 0;
    border: 1px solid var(--color-black);
    border-radius: 10px;
    overflow: hidden;
}

.newsletter-form p {
    margin: 0 !important;
    display: flex !important;
    gap: 0 !important;
    width: 100% !important;
    align-items: center;
}

.newsletter-form br {
    display: none !important;
}

.newsletter-form .wpcf7-form-control-wrap {
    flex: 1;
    display: block;
}

.newsletter-input {
    flex: 1;
    border: none;
    padding: 12px 20px;
    font-size: 14px;
    outline: none;
    width: 100% !important;
}

.newsletter-btn {
    background-color: var(--color-secondary);
    color: var(--color-black);
    border: none;
    padding: 10px 22px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 8px;
    margin: 4px;
    flex-shrink: 0;
}

.newsletter-btn:hover {
    background-color: #e8a521;
}

.newsletter-form .wpcf7-spinner {
    display: none;
}

.newsletter-form .wpcf7-response-output {
    margin: 10px 0 0 0 !important;
}
.partner-logos {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 10px;
    width: 70%;
    margin: 0 auto;
}

.partners-section {
    border-bottom: 1px solid #DBDBDB;
}

.partner-logo {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

.copyright {
    font-size: 12px;
    color: #000;
    text-transform: uppercase;
    margin: 0;
}

.copyright a {
  color: #000;
  text-decoration: none;
}

.footer-social {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.footer-social-icon {
    color: var(--color-primary);
    font-size: 20px;
    text-decoration: none;
    transition: transform 0.3s;
}

.footer-social-icon:hover {
    transform: scale(1.2);
}

/* ===========================
   Responsive - Survey/Contact/Footer
   =========================== */

@media (max-width: 991px) {
    .survey-banner {
        padding: 60px 0;
    }

    .survey-title {
        font-size: 36px;
    }

    .survey-graphic {
        padding: 30px;
        margin-bottom: 30px;
    }

    .contact-info {
        padding: 60px 40px;
        min-height: 400px;
    }

    .contact-title {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .survey-banner {
        padding: 50px 0;
    }

    .survey-title {
        font-size: 32px;
    }

    .survey-text {
        font-size: 14px;
    }

    .contact-info {
        padding: 50px 30px;
        min-height: 350px;
    }

    .contact-title {
        font-size: 36px;
    }

    .map-container {
        min-height: 350px;
    }

    .partner-logos {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
    }

    .footer-social {
        justify-content: center;
        margin-top: 20px;
    }
}

@media (max-width: 575px) {
    .partner-logo {
        width: 85px !important;
    }

    .survey-banner {
        padding: 40px 0;
    }

    .survey-title {
        font-size: 28px;
    }

    .survey-graphic {
        padding: 20px;
    }

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

    .contact-info {
        padding: 40px 20px;
        min-height: 300px;
    }

    .contact-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .contact-detail h3 {
        font-size: 18px;
    }

    .contact-detail p {
        font-size: 14px;
    }

    .map-container {
        min-height: 300px;
    }

    .newsletter-section {
        padding-left: 0;
    }

    .newsletter-form {
        border-radius: 10px;
    }

    .newsletter-btn {
        border-radius: 8px;
    }

    .copyright {
        text-align: left;
        margin-bottom: 15px;
    }
}

/* ===========================
   Graduates Section - Exact Layout
   =========================== */

.graduates-section {
    background-color: var(--color-white);
    padding: 60px 0;
    overflow: hidden;
}

.graduates-container {
    width: 100%;
    max-width: 1280px;
    height: 620px;
    position: relative;
    margin: 0 auto;
}

.grad-item {
    position: absolute;
    overflow: hidden;
}

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

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

/* Title Box */
.grad-title-box {
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.grad-title-box h2 {
    font-size: 52px;
    font-weight: 900;
    color: white;
    margin: 0;
    text-transform: uppercase;
    font-family: var(--font-primary);
}

/* Stat Boxes */
.grad-stat-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.grad-stat-yellow {
    background-color: var(--color-secondary);
}

.grad-stat-black {
    background-color: var(--color-black);
}

.grad-stat-red {
    background-color: var(--color-primary);
}

.grad-stat-box .stat-number {
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 5px;
    font-family: var(--font-primary);
}

.grad-stat-yellow .stat-number {
    color: var(--color-black);
}

.grad-stat-black .stat-number,
.grad-stat-red .stat-number {
    color: white;
}

.grad-stat-box .stat-label {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--font-primary);
}

.grad-stat-yellow .stat-label {
    color: var(--color-black);
}

.grad-stat-black .stat-label,
.grad-stat-red .stat-label {
    color: white;
}

/* ===========================
   Graduates Items Positioning
   Based on original design measurements
   =========================== */

/* Row 1 */
.item-38 {
    left: 0;
    top: 0;
    width: 218px;
    height: 261px;
}

.item-title {
    left: 218px;
    top: 0;
    width: 340px;
    height: 140px;
}

.item-34 {
    left: 558px;
    top: 0;
    width: 215px;
    height: 271px;
}

.item-30 {
    left: 773px;
    top: 0;
    width: 301px;
    height: 381px;
    filter: grayscale(100%);
}

.item-31 {
    left: 1074px;
    top: 0;
    width: 206px;
    height: 261px;
}

/* Row 2 */
.item-39 {
    left: 0;
    top: 261px;
    width: 157px;
    height: 219px;
}

.item-37 {
    left: 157px;
    top: 140px;
    width: 147px;
    height: 221px;
}

.item-36 {
    left: 304px;
    top: 271px;
    width: 196px;
    height: 297px;
}

.item-35 {
    left: 500px;
    top: 271px;
    width: 215px;
    height: 248px;
}

.item-33 {
    left: 715px;
    top: 381px;
    width: 165px;
    height: 209px;
}

.item-universities {
    left: 880px;
    top: 381px;
    width: 194px;
    height: 168px;
}

.item-32 {
    left: 1074px;
    top: 375px;
    width: 169px;
    height: 245px;
}

/* Row 3 */
.item-graduates-count {
    left: 157px;
    top: 361px;
    width: 147px;
    height: 157px;
}

.item-years {
    left: 304px;
    top: 518px;
    width: 211px;
    height: 102px;
}

/* ===========================
   Graduates Section Responsive
   =========================== */

@media (max-width: 1320px) {
    .graduates-container {
        transform: scale(0.85);
        transform-origin: top center;
        height: 527px;
    }
}

@media (max-width: 1100px) {
    .graduates-container {
        transform: scale(0.75);
        transform-origin: top center;
        height: 465px;
    }
}

@media (max-width: 991px) {
    .graduates-section {
        padding: 40px 0;
    }

    .graduates-container {
        transform: scale(0.65);
        transform-origin: top center;
        height: 403px;
    }

    .grad-title-box h2 {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .graduates-container {
        transform: scale(0.5);
        transform-origin: top center;
        height: 310px;
    }

    .grad-title-box h2 {
        font-size: 36px;
    }

    .grad-stat-box .stat-number {
        font-size: 48px;
    }

    .grad-stat-box .stat-label {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .graduates-container {
        transform: scale(0.45);
        transform-origin: top center;
        height: 279px;
    }
}

@media (max-width: 480px) {
    .graduates-section {
        padding: 30px 0;
    }

    .graduates-container {
        transform: scale(0.35);
        transform-origin: top center;
        height: 217px;
    }

    .grad-title-box h2 {
        font-size: 28px;
    }
}


/* ===========================
   About Page Styles
   =========================== */
/* ===========================
   School Profile Tabs Section
   =========================== */

/* ===========================
   School Profile - Mobile Dropdown
   Desktop: Tabs (unchanged)
   Mobile: Dropdown Select
   =========================== */

/* ===========================
   Desktop - Keep Original Tabs
   =========================== */

@media (min-width: 768px) {

    /* Desktop tabs stay as is */
    .profile-mobile-dropdown {
        display: none !important;
    }

    .profile-tabs {
        display: flex !important;
    }
}

/* ===========================
   Mobile - Dropdown Select
   =========================== */

@media (max-width: 767px) {

    /* Hide Desktop Tabs */
    .profile-tabs {
        display: none !important;
    }

    /* Show Mobile Dropdown */
    .profile-mobile-dropdown {
        display: block !important;
        width: 100%;
        margin-bottom: 30px;
    }

    /* Dropdown Select Styling */
    .profile-dropdown-select {
        width: 100%;
        padding: 18px 45px 18px 20px;
        font-size: 16px;
        font-weight: 600;
        color: var(--color-black);
        background-color: transparent;
        border: 2px solid var(--color-gray-lighter);
        border-radius: 10px;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B92525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 20px;
        transition: all 0.3s ease;
        font-family: var(--font-primary);
    }

    .profile-dropdown-select:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(185, 37, 37, 0.1);
    }

    .profile-dropdown-select option {
        padding: 15px;
        font-weight: 600;
    }

    /* Tab Content - Full Width on Mobile */
    .profile-tab-content {
        width: 100%;
    }

    .tab-content-box {
        padding: 25px 20px;
    }

    .content-title {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .content-text {
        font-size: 15px;
    }

    .content-list li {
        font-size: 15px;
        padding: 8px 0;
        padding-left: 25px;
    }

}

@media (max-width: 575px) {

    .profile-dropdown-select {
        font-size: 15px;
        padding: 16px 40px 16px 18px;
    }

    .tab-content-box {
        padding: 20px 15px;
    }

    .content-title {
        font-size: 20px;
    }

    .content-text {
        font-size: 14px;
    }

}

/* ===========================
   Dropdown - Selected Red & Larger
   =========================== */

@media (max-width: 767px) {

    .profile-dropdown-select {
        width: 100%;
        padding: 18px 70px 18px 35px;
        font-size: 19px;
        font-weight: 700;
        color: var(--color-primary);
        background-color: transparent;

        /* Border Top & Bottom Only */
        border: none;
        border-top: 2px solid var(--color-gray-lighter);
        border-bottom: 2px solid var(--color-gray-lighter);
        border-radius: 0;

        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        font-family: var(--font-primary);
        transition: all 0.3s ease;

        /* Yellow Dot */
        background-image: radial-gradient(circle, var(--color-secondary) 5px, transparent 5px) !important;
        background-repeat: no-repeat;
        background-position: 15px center;
        background-size: 12px 12px;
    }

    .profile-dropdown-select option {
        font-size: 17px;
        font-weight: 600;
        color: var(--color-black);
        padding: 15px;
        background-color: var(--color-white);
    }

    .profile-dropdown-select option:checked {
        background-color: #FFF9E6;
        color: var(--color-primary);
        font-weight: 700;
    }

    .profile-dropdown-select:focus {
        outline: none;
        border-top-color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(185, 37, 37, 0.1);
    }

    .profile-dropdown-select:hover {
        border-top-color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        background-color: #FFFBF5;
    }

}

@media (max-width: 575px) {

    .profile-dropdown-select {
        font-size: 18px;
        padding: 16px 65px 16px 32px;
        background-position: 12px center;
    }

    .profile-dropdown-select option {
        font-size: 16px;
    }

}

/* ===========================
   Red Arrow Box (same as before)
   =========================== */

.profile-mobile-dropdown {
    position: relative;
}

.dropdown-arrow-box {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background-color 0.3s ease;
}

.dropdown-arrow-box i {
    color: var(--color-white);
    font-size: 18px;
    font-weight: bold;
}

.profile-dropdown-select:hover+.dropdown-arrow-box {
    background-color: var(--color-primary-dark);
}

@media (max-width: 575px) {
    .dropdown-arrow-box {
        width: 36px;
        height: 36px;
        right: 12px;
    }

    .dropdown-arrow-box i {
        font-size: 16px;
    }
}


/* ===========================
   NOTES:
   
   Desktop (≥768px):
   =================
   • Vertical tabs on left
   • Content on right
   • Original design unchanged
   
   Mobile (<768px):
   ================
   • Tabs hidden
   • Dropdown select shown
   • Content full width below dropdown
   • Custom arrow icon
   • Focus state styling
   
   =========================== */

.school-profile-student-section {
    padding: 80px;
    background-color: #f4f4f4;
}



.school-profile-tabs-section {
    padding-bottom: 80px;
    background-color: #f4f4f4;
}

/* Section Title */
.profile-main-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 30px;
}

.profile-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-gray-darkest);
    max-width: 1000px;
    margin: 0 auto;
}

/* Vertical Tabs - Left Side */
.profile-tabs {
    background-color: transparent;
    border: none;
    gap: 0;
    width: 100%;
}

.profile-tabs .nav-link {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-gray-lighter);
    color: var(--color-black);
    font-size: 18px;
    font-weight: 600;
    padding: 20px 0;
    text-align: left;
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
    display: block;
    width: 100%;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.profile-tabs .nav-link:hover {
    color: var(--color-primary);
}

.profile-tabs .nav-link.active {
    background-color: transparent;
    color: var(--color-primary);
    font-weight: 700;
    padding-left: 25px;
}

.profile-tabs .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-color: var(--color-secondary);
    border-radius: 50%;
}

/* Yellow Indicator Dot - Hidden by default */
.tab-indicator {
    display: none;
}

/* Tab Content - Right Side */
.profile-tab-content {
    border-radius: 10px;
    padding: 0;
    min-height: 500px;
}

.tab-content-box {
    padding: 40px;
}

.tab-content-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px !important;
}

.content-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 20px;
    font-family: var(--font-primary);
}

.content-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-gray-dark);
    margin-bottom: 20px;
}

.content-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.content-list li {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-black);
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
    border-bottom: 1px solid #F0F0F0;
}

.content-list-white li {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-black);
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
    border-bottom: 1px solid #F0F0F0;

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

.content-list li:last-child {
    border-bottom: none;
}

.content-list li:before {
    content: "•";
    position: absolute;
    left: 10px;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 20px;
}

/* Principal Info */
.principal-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 5px;
}

.principal-title {
    font-size: 15px;
    color: #000;
    font-style: normal;
    margin-bottom: 20px;
}

/* Prestigious Badges */
.prestigious-badges {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #FFF9E6;
    padding: 20px 25px;
    border-radius: 10px;
    border-left: 4px solid var(--color-secondary);
}

.badge-item i {
    font-size: 36px;
    color: var(--color-secondary);
}

.badge-item span {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    .profile-main-title {
        font-size: 36px;
    }

    .profile-tabs .nav-link {
        font-size: 16px;
        padding: 15px 10px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .content-title {
        font-size: 28px;
    }

    .tab-content-box {
        padding: 30px;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .school-profile-tabs-section {
        padding-bottom: 60px;
    }

    .profile-main-title {
        font-size: 28px;
    }

    .profile-description {
        font-size: 14px;
    }

    .profile-tabs {
        margin-bottom: 30px;
    }

    .profile-tabs .nav-link {
        font-size: 15px;
        padding: 12px 10px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .content-title {
        font-size: 24px;
    }

    .tab-content-box {
        padding: 20px;
    }

    .prestigious-badges {
        flex-direction: column;
    }

    .badge-item {
        width: 100%;
    }
}

/* Animation */
.tab-pane {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
   Downloads Section
   =========================== */

/* Downloads Section */
.downloads-section {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    padding: 100px 0;
    overflow: hidden;
}

/* Background Image */
.downloads-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.downloads-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dark Overlay */
.downloads-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Content Above Background */
.downloads-section .container {
    z-index: 3;
}

/* Download Box */
.download-box {
    background: #000000ba;
    border-radius: 10px;
    padding: 25px 35px;
    display: flex;
    align-items: center;
    gap: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.download-box:hover {
    transform: translateY(-5px);
}

/* Download Icon */
.download-icon {
    flex-shrink: 0;
}

.download-icon img {
  width: 40px;
}

.download-icon i {
    font-size: 56px;
    color: var(--color-secondary);
    display: block;
}

/* Download Content */
.download-content {
    flex: 1;
}

.download-label {
    font-size: 20px;
    font-weight: normal;
    color: var(--color-white);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.download-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    line-height: 1.1;
}

/* Download Arrow */
.download-arrow {
    flex-shrink: 0;
}

.download-arrow i {
    font-size: 36px;
    color: var(--color-secondary);
    transition: transform 0.3s ease;
}

.download-box:hover .download-arrow i {
    transform: translateX(8px);
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    .downloads-section {
        padding: 80px 0;
    }

    .download-box {
        padding: 35px 30px;
    }

    .download-icon i {
        font-size: 48px;
    }

    .download-title {
        font-size: 20px;
    }

    .download-arrow i {
        font-size: 32px;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .downloads-section {
        padding: 60px 0;
        min-height: 350px;
    }

    .download-box {
        padding: 30px 25px;
        gap: 20px;
    }

    .download-icon i {
        font-size: 42px;
    }

    .download-label {
        font-size: 12px;
    }

    .download-title {
        font-size: 16px;
    }

    .download-arrow i {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .download-box {
        padding: 30px 20px;
    }

    .download-icon i {
        font-size: 48px;
    }

    .download-title {
        font-size: 15px;
    }

    .school-profile-student-section {
        padding-top: 60px !important;
        padding-bottom: 80px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

/* ===========================
   School Program Section
   =========================== */

/* ===========================
   School Program - Mobile Responsive
   المربعات: 2×2 على الموبايل
   Tabs: Dropdown أبيض
   =========================== */

/* ===========================
   Desktop - Keep Original (≥768px)
   =========================== */

@media (min-width: 768px) {
    .program-mobile-dropdown {
        display: none !important;
    }

    .program-tabs {
        display: flex !important;
    }
}

/* ===========================
   Mobile - Stage Boxes 2×2 Grid
   =========================== */

@media (max-width: 767px) {

    /* Stages Container - Grid 2 columns */
    .stages-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: -60px;
        padding: 0 20px;
    }

    /* Stage Box */
    .stage-box {
        width: 100%;
        max-width: none;
        min-width: auto;
        height: 180px;
        padding: 20px 15px;
    }

    /* Last box (5th) - الصف الأخير على الشمال */
    .stage-box:nth-child(5) {
        grid-column: 1;
        /* على الشمال */
    }

    .stage-number {
        font-size: 60px;
    }

    .stage-year {
        font-size: 12px;
    }

    .stages-name {
        font-size: 12px;
        line-height: 1.4;
    }

}

/* ===========================
   Mobile - Dropdown (White Theme)
   =========================== */

@media (max-width: 767px) {

    /* Hide Desktop Tabs */
    .program-tabs {
        display: none !important;
    }

    /* Show Mobile Dropdown */
    .program-mobile-dropdown {
        display: block !important;
        margin-bottom: 30px;
        position: relative;
    }

    /* Dropdown Select - White Theme */
    .program-dropdown-select {
        width: 100%;
        padding: 18px 70px 18px 35px;

        /* Selected Text - WHITE & LARGER */
        font-size: 19px;
        font-weight: 700;
        color: var(--color-white);
        /* ← أبيض */

        background-color: transparent;

        /* Border Top & Bottom - White */
        border: none;
        border-top: 2px solid var(--color-white);
        border-bottom: 2px solid var(--color-white);
        border-radius: 0;

        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        font-family: var(--font-primary);
        transition: all 0.3s ease;

        /* White Dot */
        background-image: radial-gradient(circle, var(--color-white) 5px, transparent 5px);
        background-repeat: no-repeat;
        background-position: 15px center;
        background-size: 12px 12px;
    }

    /* Options - في القائمة */
    .program-dropdown-select option {
        font-size: 17px;
        font-weight: 600;
        color: var(--color-black);
        /* أسود في القائمة */
        padding: 15px;
        background-color: var(--color-white);
    }

    .program-dropdown-select option:checked {
        background-color: var(--color-primary);
        color: var(--color-white);
        font-weight: 700;
    }

    .program-dropdown-select:focus {
        outline: none;
        border-top-color: var(--color-secondary);
        border-bottom-color: var(--color-secondary);
        box-shadow: 0 0 0 3px rgba(248, 181, 49, 0.2);
    }

    .program-dropdown-select:hover {
        border-top-color: var(--color-secondary);
        border-bottom-color: var(--color-secondary);
        background-color: rgba(255, 255, 255, 0.05);
    }

}

/* ===========================
   White Arrow Box
   =========================== */

@media (max-width: 767px) {

    .program-arrow-box {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background-color: var(--color-primary);
        /* ← مربع أبيض */
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        transition: background-color 0.3s ease;
    }

    .program-arrow-box i {
        color: var(--color-white);
        /* ← سهم أحمر */
        font-size: 18px;
        font-weight: bold;
    }

    .program-dropdown-select:hover+.program-arrow-box {
        background-color: var(--color-secondary);
        /* ← يصفر عند Hover */
    }

    .program-dropdown-select:hover+.program-arrow-box i {
        color: var(--color-white);
        /* ← السهم يبيض */
    }

    .house-rules-tab-content {
        margin-top: 0 !important;
    }
}

/* ===========================
   Small Mobile (< 576px)
   =========================== */

@media (max-width: 575px) {

    .stages-container {
        gap: 12px;
        padding: 0 15px;
    }

    .stage-box {
        height: 160px;
        padding: 20px 15px;
    }

    .stage-number {
        font-size: 50px;
    }

    .stage-year {
        font-size: 11px;
    }

    .stages-name {
        font-size: 11px;
    }

    .program-dropdown-select {
        font-size: 18px;
        padding: 16px 65px 16px 32px;
        background-position: 12px center;
    }

    .program-dropdown-select option {
        font-size: 16px;
    }

    .program-arrow-box {
        width: 36px;
        height: 36px;
        right: 12px;
    }

    .program-arrow-box i {
        font-size: 16px;
    }

}

/* ===========================
   NOTES:
   
   Mobile Layout:
   ==============
   
   Stage Boxes (2×2 Grid):
   -----------------------
   [Box 1] [Box 2]
   [Box 3] [Box 4]
   [Box 5]
     ↑ على الشمال
   
   Dropdown (White Theme):
   -----------------------
   • Selected text: White, 19px
   • Border: White (top & bottom)
   • Dot: White
   • Arrow box: White background
   • Arrow icon: Red
   • Hover: Yellow box, White arrow
   
   =========================== */

/* ===========================
   Stage Boxes - Stronger Overlap
   margin سالب أكبر
   =========================== */

@media (max-width: 767px) {

    /* Program Top - Padding قليل جداً */
    .program-top {
        padding: 60px 0 20px !important;
        /* ← قللنا من تحت */
    }

    /* Stages Container - Negative Margin أكبر */
    .stages-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
        padding: 0 20px;
        position: relative;
        z-index: 10;

        /* Negative Margin كبير جداً */
        margin-top: 50px !important;
        margin-bottom: -150px !important;
        /* ← زوّدنا من -100 لـ -150 */

        flex-direction: initial !important;
        align-items: initial !important;
    }

    /* Stage Box - مع Shadow */
    .stage-box {
        width: 100% !important;
        max-width: none !important;
        min-width: 170px !important;
        height: 180px;
        padding: 25px 20px;
        flex: initial !important;
    }

    /* Box 5 على الشمال */
    .stage-box:nth-child(5) {
        grid-column: 1 !important;
    }

    /* Program Bottom - Padding كبير جداً */
    .program-bottom {
        padding: 200px 0 60px !important;
        /* ← زوّدنا من 150 لـ 200 */
        margin-top: 0 !important;
    }

    .stage-number {
        font-size: 60px;
    }

    .stage-year {
        font-size: 12px;
    }

    .stages-name {
        font-size: 12px;
        line-height: 1.4;
    }

}

@media (max-width: 575px) {

    .program-top {
        padding: 50px 0 15px !important;
    }

    .stages-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        padding: 0 15px;
        margin-top: 40px !important;
        margin-bottom: -500px !important;
    }

    .stage-box {
        height: 160px;
        padding: 20px 15px;
    }

    .program-bottom {
        padding: 500px 0 50px !important;
    }

    .stage-number {
        font-size: 50px;
    }

    .stage-year {
        font-size: 11px;
    }

    .stages-name {
        font-size: 11px;
    }

}

/* ===========================
   ALTERNATIVE: إذا لسه مفيش تأثير
   امسحي margin-bottom القديم من CSS
   =========================== */

.school-program-section {
    background-color: var(--color-white);
}

/* ===========================
   Top Part - White Background
   =========================== */

.program-top {
    background-color: var(--color-white);
    padding: 80px 0 50px;
    position: relative;
    z-index: 10;
}

/* Title */
.program-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 25px;
}

.program-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-gray-darkest);
    max-width: 1100px;
    margin: 0 auto;
}

/* Educational Stages */
.stages-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 50px;
    position: relative;
    z-index: 10;
    margin-bottom: -130px;
}

.stage-box {
    min-width: 200px;
    height: 200px;
    padding: 30px 35px;
    border-radius: 10px;
    text-align: left;
    flex: 1;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stage-gray {
    background-color: #5F5F5F;
    color: var(--color-white);
}

.stage-yellow {
    background-color: var(--color-secondary);
    color: var(--color-black);
}

.stage-number {
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 10px;
}

.stage-year {
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.stages-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
}

/* ===========================
   Bottom Part - Red Background with Tabs
   =========================== */

.program-bottom {
    background-color: var(--color-primary);
    padding: 180px 0 80px;
    position: relative;
    z-index: 1;
}

/* Tabs - Left Side */
.program-tabs {
    background-color: transparent;
    border: none;
    gap: 0;
    width: 100%;
}

.program-tabs .nav-link {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: 20px;
    font-weight: 600;
    padding: 20px 0;
    padding-left: 0;
    text-align: left;
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
    display: block;
    width: 100%;
}

.program-tabs .nav-link:hover {
    color: var(--color-secondary);
}

.program-tabs .nav-link.active {
    background-color: transparent;
    color: var(--color-white);
    font-weight: 700;
    border-bottom-color: var(--color-white);
    padding-left: 30px;
}

/* White Dot Indicator on Active Tab */
.program-tabs .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--color-white);
    border-radius: 50%;
}

/* Tab Content - Right Side */
.program-tab-content {
    color: var(--color-white);
}

.content-heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 25px;
    font-family: var(--font-primary);
}

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

.content-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--color-secondary);
    font-size: 20px;
    line-height: 1.5;
}

.content-list li strong {
    font-weight: 700;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .program-top {
        padding: 80px 0 40px;
    }


    .program-bottom {
        padding: 150px 0 60px;
    }

    .program-title {
        font-size: 40px;
    }

    .program-description {
        font-size: 15px;
    }

    .stages-container {
        gap: 15px;
    }

    .stage-box {
        min-width: 160px;
        max-width: 180px;
        height: 180px;
        padding: 25px 20px;
    }

    .stage-number {
        font-size: 60px;
    }

    .stage-year {
        font-size: 12px;
    }

    .stage-name {
        font-size: 11px;
    }

    .program-tabs .nav-link {
        font-size: 18px;
        padding: 18px 0;
    }

    .program-tabs .nav-link.active {
        padding-left: 25px;
    }

    .content-heading {
        font-size: 24px;
    }

    .content-list li {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .program-top {
        padding: 60px 0 30px;
    }


    .program-bottom {
        padding: 120px 0 60px;
    }

    .program-title {
        font-size: 32px;
    }

    .program-description {
        font-size: 14px;
    }

    .stages-container {
        gap: 12px;
    }

    .stage-box {
        height: 180px;
    }

    .program-tabs {
        margin-bottom: 30px;
    }

    .program-tabs .nav-link {
        font-size: 16px;
        padding: 18px 0;
    }

    .program-tabs .nav-link.active {
        padding-left: 25px;
    }

    .content-heading {
        font-size: 22px;
    }

    .content-list li {
        font-size: 14px;
        padding-left: 20px;
    }
}

@media (max-width: 576px) {
    .program-title {
        font-size: 28px;
    }

    .stage-number {
        font-size: 50px;
    }

    .program-tabs .nav-link {
        font-size: 15px;
        padding: 15px 0;
    }

    .program-tabs .nav-link.active {
        padding-left: 20px;
    }

    .program-tabs .nav-link.active::before {
        width: 12px;
        height: 12px;
    }

    .content-heading {
        font-size: 20px;
    }
}

/* Animation */
.tab-pane {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
   Program Details Section
   =========================== */

.program-details-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Top Part - Two Detail Boxes
   =========================== */

.program-details-top {
    margin-bottom: 60px;
    padding: 0 25px;
}

.detail-box {
    padding: 0 40px;
}

.detail-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 20px;
    font-family: var(--font-primary);
}

.detail-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-black);
    margin-bottom: 20px;
}

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

.detail-list li {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-black);
    padding-left: 25px;
    position: relative;
}

.detail-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--color-black);
    font-size: 18px;
}

.detail-list li strong {
    font-weight: 700;
    color: var(--color-black);
}

/* ===========================
   Bottom Part - Image + Table
   =========================== */

.program-summary-row {
    background-color: var(--color-bg-light);
}

/* Image - Left Side */
.summary-image {
    height: 100%;
    max-height: 400px;
    overflow: hidden;
}

.summary-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0 10px 10px 0;
}

/* Summary Table - Right Side */
.summary-table-container {
    padding: 0px 50px;
}

.summary-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 20px;
    font-family: var(--font-primary);
}

/* Table Styling */
.summary-table {
    width: 100%;
    border-collapse: collapse;
}

.summary-table thead th {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    padding: 15px 0;
    text-align: left;
}

.summary-table thead th:first-child {
    width: 35%;
    padding-left: 20px;
}

.summary-table thead th:last-child {
    width: 65%;
}

.summary-table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}

.summary-table tbody tr:nth-child(even) {
    background-color: var(--color-bg-light);
}

.summary-table tbody tr:last-child {
    border-bottom: none;
}

.summary-table tbody td {
    padding: 17px 0;
    vertical-align: top;
}

.stage-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-black);
    padding-left: 20px !important;
}

.stage-focus {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-black);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .program-details-section {
        padding: 60px 0;
    }

    .detail-box {
        padding: 0 20px;
    }

    .detail-title {
        font-size: 28px;
    }

    .detail-text,
    .detail-list li {
        font-size: 15px;
    }

    .summary-image {
        min-height: 400px;
    }

    .summary-table-container {
        padding: 40px 30px;
    }

    .summary-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .summary-table thead th,
    .stage-name,
    .stage-focus {
        font-size: 15px;
    }

    .summary-table tbody td {
        padding: 20px 0;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .program-details-section {
        padding: 40px 0;
    }

    .program-details-top {
        margin-bottom: 40px;
    }

    .detail-box {
        padding: 0 15px;
        margin-bottom: 30px;
    }

    .detail-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .detail-text,
    .detail-list li {
        font-size: 14px;
    }

    .summary-image {
        min-height: 300px;
    }

    .summary-table-container {
        padding: 30px 20px;
    }

    .summary-title {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .summary-table thead th {
        font-size: 12px;
        padding: 15px 0;
    }

    .stage-name,
    .stage-focus {
        font-size: 14px;
    }

    .summary-table tbody td {
        padding: 18px 0;
    }

    /* Stack table on mobile */
    .summary-table thead th:first-child {
        width: 40%;
    }

    .summary-table thead th:last-child {
        width: 60%;
    }
}

@media (max-width: 576px) {
    .detail-title {
        font-size: 22px;
    }

    .summary-title {
        font-size: 22px;
    }

    .summary-table-container {
        padding: 25px 15px;
    }

    .summary-table thead th {
        font-size: 11px;
        padding: 12px 0;
    }

    .stage-name,
    .stage-focus {
        font-size: 13px;
    }

    .summary-table tbody td {
        padding: 15px 0;
    }
}

/* ===========================
   Our Core Values Section
   =========================== */
.core-values-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Title & Description
   =========================== */

.value-icon img {
  width: 45px;
}

.values-main-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 15px;
}

.values-subtitle {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 25px;
    font-family: var(--font-primary);
}

.values-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-gray-darkest);
    max-width: 1000px;
    margin: 0 auto;
}

/* ===========================
   Value Cards
   =========================== */

.value-card {
    padding: 40px 40px;
    border-radius: 10px;
    text-align: center;
    min-height: 255px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Card Colors */
.value-card-red {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.value-card-yellow {
    background-color: var(--color-secondary);
    color: var(--color-black);
}

.value-card-gray {
    background-color: #5F5F5F;
    color: var(--color-white);
}

/* Icon */
.value-icon {
    margin-bottom: 20px;
}

.value-icon i {
    font-size: 64px;
    color: inherit;
}

.value-card-red .value-icon i {
    color: var(--color-white);
}

.value-card-yellow .value-icon i {
    color: var(--color-black);
}

.value-card-gray .value-icon i {
    color: var(--color-white);
}

/* Text */
.value-text {
    font-size: 15px;
    line-height: 20px;
    margin: 0;
    font-weight: 400;
}

.value-card-red .value-text {
    color: var(--color-white);
}

.value-card-yellow .value-text {
    color: var(--color-black);
}

.value-card-gray .value-text {
    color: var(--color-white);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .core-values-section {
        padding: 60px 0;
    }

    .values-main-title {
        font-size: 40px;
    }

    .values-subtitle {
        font-size: 24px;
    }

    .values-description {
        font-size: 15px;
    }

    .value-card {
        padding: 40px 30px;
        min-height: 320px;
    }

    .value-icon i {
        font-size: 56px;
    }

    .value-text {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .core-values-section {
        padding: 50px 0;
    }

    .values-main-title {
        font-size: 32px;
    }

    .values-subtitle {
        font-size: 22px;
    }

    .values-description {
        font-size: 14px;
    }

    .value-card {
        padding: 35px 25px;
        min-height: 280px;
    }

    .value-icon {
        margin-bottom: 20px;
    }

    .value-icon i {
        font-size: 48px;
    }

    .value-text {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .values-main-title {
        font-size: 28px;
    }

    .values-subtitle {
        font-size: 20px;
    }

    .value-card {
        padding: 30px 20px;
        min-height: 260px;
    }

    .value-icon i {
        font-size: 42px;
    }
}

/* ===========================
   Teaching Methods & Quality Section
   =========================== */
.teaching-quality-section {
    background-color: #f4f4f4;
    padding: 60px 0;
}

/* ===========================
   Part 1 - Teaching Methods
   =========================== */

.teaching-methods-part {
    background-color: var(--color-bg-light);
    padding: 0;
    padding-bottom: 60px;
}

/* Image - Left Side */
.methods-image {
    height: 100%;
    min-height: 450px;
    overflow: hidden;
}

.methods-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0 10px 10px 0;
    z-index: 111;
    position: relative;
}

/* Content - Right Side */
.methods-content {
    padding: 0px 80px 80px 60px;
}

/* ===========================
   Part 2 - Quality Development
   =========================== */

.quality-part {
    background-color: var(--color-bg-light);
    padding: 0;
}

/* Content - Left Side */
.quality-content {
    padding: 0px 60px 80px 80px;
}

/* Image - Right Side */
.quality-image {
    height: 100%;
    min-height: 400px;
    overflow: hidden;
}

.quality-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    border-radius: 10px 0 0 10px;
}

/* ===========================
   Common Styles
   =========================== */

.section-heading {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 20px;
    font-family: var(--font-primary);
}

/* List with Red Bullets */
.content-lists {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-lists li {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-black);
    padding-left: 30px;
    position: relative;
    list-style: none;
}

.content-lists li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-size: 20px;
    line-height: 1.8;
}

.content-lists li:last-child {
    margin-bottom: 0;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {

    .methods-image,
    .quality-image {
        min-height: 400px;
    }

    .methods-content,
    .quality-content {
        padding: 60px 40px;
    }

    .section-heading {
        font-size: 35px;
        margin-bottom: 25px;
    }

    .content-list li {
        font-size: 15px;
        margin-bottom: 18px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {

    .methods-image,
    .quality-image {
        min-height: 300px;
        border-radius: 0 !important;
    }

    .methods-content,
    .quality-content {
        padding: 40px 30px;
    }

    .section-heading {
        font-size: 35px;
        margin-bottom: 20px;
    }

    .content-lists li {
        font-size: 14px;
        margin-bottom: 15px;
        padding-left: 25px;
    }

    .content-lists li::before {
        font-size: 18px;
    }
}

@media (max-width: 576px) {

    .methods-image,
    .quality-image {
        min-height: 250px;
    }

    .methods-content,
    .quality-content {
        padding: 30px 20px;
    }

    .section-heading {
        font-size: 35px;
    }

    .content-lists li {
        font-size: 13px;
    }
}

/* ===========================
   Quote Section
   =========================== */
.quote-section {
    background-color: var(--color-bg-light);
    padding: 0 130px 80px 130px;
}

/* Quote Box */
.quote-box {
    background-color: var(--color-primary);
    border-radius: 10px;
    padding: 60px 70px;
    position: relative;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Quote Marks */
.quote-mark {
    position: absolute;
    opacity: 0.9;
}

.quote-mark i {
    font-size: 80px;
    color: var(--color-white);
}

/* Opening Quote Mark (Top-Left) */
.quote-mark-open {
    top: 40px;
    left: 60px;
}

/* Closing Quote Mark (Bottom-Right) */
.quote-mark-close {
    bottom: 40px;
    right: 60px;
    transform: rotate(180deg);
}

/* Quote Text */
.quote-text {
    position: relative;
    z-index: 2;
}

.quote-text p {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.5;
    margin: 0;
    font-family: var(--font-primary);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .quote-section {
        padding: 60px 0;
    }

    .quote-box {
        padding: 60px 80px;
    }

    .quote-mark i {
        font-size: 70px;
    }

    .quote-mark-open {
        top: 30px;
        left: 40px;
    }

    .quote-mark-close {
        bottom: 30px;
        right: 40px;
    }

    .quote-text p {
        font-size: 30px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .quote-section {
        padding: 50px 0;
    }

    .quote-box {
        padding: 50px 40px;
        border-radius: 20px;
    }

    .quote-mark i {
        font-size: 60px;
    }

    .quote-mark-open {
        top: 20px;
        left: 20px;
    }

    .quote-mark-close {
        bottom: 20px;
        right: 20px;
    }

    .quote-text p {
        font-size: 24px;
        line-height: 1.4;
    }
}

@media (max-width: 576px) {
    .quote-box {
        padding: 40px 30px;
        height: 384px;
        align-content: center;
    }

    .quote-mark i {
        font-size: 50px;
    }

    .quote-mark-open {
        top: 15px;
        left: 15px;
    }

    .quote-mark-close {
        bottom: 15px;
        right: 15px;
    }

    .quote-text p {
        font-size: 30px;
    }
}

/* ===========================
   DSB Alexandria History Section
   =========================== */

.dsb-history-section {
    background-color: var(--color-bg-light);
    padding: 60px 0;
}

/* ===========================
   Image - Left Side
   =========================== */

.history-image {
    height: 100%;
    min-height: 400px;
    overflow: hidden;
    position: relative;
    z-index: 111;
}

.history-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0 15px 15px 0;
}

/* ===========================
   Content - Right Side
   =========================== */

.history-content {
    padding: 0px 60px 35px 60px;
}

.history-title {
    font-size: 35px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 30px;
    line-height: 1.2;
}

.history-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-gray-darkest);
    margin: 0;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .history-image {
        min-height: 350px;
    }

    .history-content {
        padding: 60px 60px 60px 50px;
    }

    .history-title {
        font-size: 40px;
        margin-bottom: 25px;
    }

    .history-text {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .history-image {
        min-height: 300px;
        border-radius: 0 !important;
    }

    .history-image img {
        border-radius: 0 !important;
    }

    .history-content {
        padding: 50px 30px;
    }

    .history-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .history-text {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .history-image {
        min-height: 250px;
    }

    .history-content {
        padding: 0px 20px;
    }

    .history-title {
        font-size: 28px;
    }

    .history-text {
        font-size: 13px;
    }
}

.dsb-alex-section {
    padding-bottom: 40px;
    opacity: 1 !important;
    background-color: #f4f4f4;
    overflow-x: hidden;
}

.dsb-alex-title {
    color: #c4272f !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    font-family: var(--font-primary);
    font-size: 35px;
}

.dsb-alex-desc {
    max-width: 800px;
    margin: 0 auto 80px;
    color: #4a4a4a;
    line-height: 1.6;
    font-size: 1.1rem;
}

.dsb-alex-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* Central Line */
.dsb-alex-timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: #e9ecef;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.dsb-alex-container {
    padding: 0px 15px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* Dots on the timeline */
.dsb-alex-container::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    right: -7px;
    background-color: #f0ad4e;
    top: 30px;
    border-radius: 50%;
    z-index: 10;
}

.dsb-alex-right {
    left: 50%;
}

.dsb-alex-left {
    left: 0;
}

.dsb-alex-right::after {
    left: -7px;
}

/* Year styling - positioned NEXT to the dot inside the same side as the box */
.dsb-alex-year {
    position: absolute;
    top: 24px;
    font-weight: 700;
    color: var(--color-gray-darkest);
    font-size: 1.1rem;
    width: 60px;
    z-index: 20;
}

/* Positioning the year on the same side as the box, right before the central line/dot */
.dsb-alex-left .dsb-alex-year {
    right: 20px;
    /* Inside the left container, before the dot */
    text-align: right;
}

.dsb-alex-right .dsb-alex-year {
    left: 20px;
    /* Inside the right container, before the dot */
    text-align: left;
}

/* Card Content - added extra margin to make room for the year */
.dsb-alex-content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Adjusting card margins to accommodate the year between the card and the center dot */
.dsb-alex-left .dsb-alex-content {
    margin-right: 100px;
}

.dsb-alex-right .dsb-alex-content {
    margin-left: 100px;
}

/* Horizontal Connector Line - adjusted to connect through the year to the dot */
.dsb-alex-content::after {
    content: "";
    position: absolute;
    top: 37px;
    width: 40px;
    height: 2px;
    background: var(--color-gray-light);
}

.dsb-alex-left .dsb-alex-content::after {
    right: -42px;
}

.dsb-alex-right .dsb-alex-content::after {
    left: -40px;
}

/* Responsive - Mobile View */
@media screen and (max-width: 991px) {
    .dsb-alex-timeline::after {
        left: 31px;
    }

    .dsb-alex-container {
        width: 100%;
        padding-left: 100px;
        /* Increased padding for year */
        padding-right: 15px;
    }

    /* Mobile positioning for year */
    .dsb-alex-year {
        left: 45px !important;
        right: auto !important;
        width: 50px;
        text-align: left !important;
        font-size: 0.95rem;
    }

    .dsb-alex-left .dsb-alex-content,
    .dsb-alex-right .dsb-alex-content {
        margin-left: 0;
        margin-right: 0;
    }

    .dsb-alex-content::after {
        left: -55px !important;
        right: auto !important;
        width: 55px;
    }
}


/* ===========================
   Desktop - Keep Original (≥992px)
   =========================== */

@media (min-width: 992px) {
    /* Desktop timeline stays as is */
}

/* ===========================
   Mobile Timeline - Perfect Design
   =========================== */

@media (max-width: 991px) {

    /* Timeline Container */
    .dsb-alex-timeline {
        position: relative;
        padding-left: 0;
        padding-right: 15px;
    }

    .dsb-alex-timeline::after {
        content: '';
        position: absolute;
        width: 3px;
        background-color: var(--color-gray-light);
        top: -19px;
        bottom: 0;
        left: 20px;
        margin-left: 0;
    }

    .dsb-alex-container {
        width: 100% !important;
        padding: 0 0 0 15px !important;
        margin-bottom: 50px;
        position: relative;
        left: 0 !important;
        right: auto !important;
    }

    .dsb-alex-container::after {
        content: '';
        position: absolute;
        width: 17px;
        height: 17px;
        background-color: var(--color-secondary);
        border-radius: 50%;
        left: 12.5px;
        top: -30px;
        right: auto !important;
        z-index: 10;
    }

    .dsb-alex-year {
        position: absolute;
        top: -31px;
        left: 50px !important;
        right: auto !important;
        width: auto;
        font-size: 20px !important;
        font-weight: 800 !important;
        color: var(--color-black) !important;
        text-align: left !important;
        z-index: 20;
        line-height: 1;
    }

    .dsb-alex-content {
        margin-left: 50px !important;
        margin-right: 0 !important;
        margin-top: 30px !important;
        padding: 20px 25px;
        background-color: var(--color-white);
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        position: relative;
    }

    .dsb-alex-content::after {
        display: none !important;
    }

    .dsb-alex-text {
        font-size: 15px;
        line-height: 1.7;
        color: var(--color-gray-darkest);
        margin: 0;
    }

}

/* ===========================
   Small Mobile (< 576px)
   =========================== */

@media (max-width: 575px) {

    .dsb-alex-timeline::after {
        left: 15px;
    }

    .dsb-alex-container::after {
        left: 8.5px;
        width: 16px;
        height: 16px;
    }

    .dsb-alex-year {
        left: 40px !important;
        font-size: 18px !important;
    }

    .dsb-alex-content {
        margin-left: 40px !important;
        margin-top: 28px !important;
        padding: 18px 20px;
    }

    .dsb-alex-text {
        font-size: 14px;
    }

}



/* ===========================
   Community Statement Section
   =========================== */

.community-statement-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Title - Left Side
   =========================== */

.statement-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1.2;
    font-family: var(--font-primary);
    margin: 0;
}

/* ===========================
   Content - Right Side
   =========================== */

.statement-content {
    padding-left: 40px;
}

.statement-content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-black);
    margin-bottom: 20px;
}

.statement-content p:last-child {
    margin-bottom: 0;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .community-statement-section {
        padding: 60px 0;
    }

    .statement-title {
        font-size: 40px;
        margin-bottom: 30px;
    }

    .statement-content {
        padding-left: 0;
    }

    .statement-content p {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .community-statement-section {
        padding: 50px 0;
    }

    .statement-title {
        font-size: 32px;
        margin-bottom: 25px;
    }

    .statement-content p {
        font-size: 14px;
        margin-bottom: 18px;
    }
}

@media (max-width: 576px) {
    .community-statement-section {
        padding: 40px 0;
    }

    .statement-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .statement-content p {
        font-size: 13px;
        margin-bottom: 15px;
    }
}

/* ===========================
   Expectations & Responsibilities Section
   =========================== */

.expectations-section {
    background-color: var(--color-primary);
    padding: 80px 0;
    color: var(--color-white);
}

/* ===========================
   Main Title
   =========================== */

.expectations-main-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-white);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 50px;
    line-height: 1.2;
}

/* ===========================
   Vertical Tabs - Left Side
   =========================== */

.expectations-tabs {
    background-color: transparent;
    border: none;
    gap: 0;
    width: 100%;
}

.expectations-tabs .nav-link {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    font-size: 20px;
    font-weight: 600;
    padding: 20px 0;
    text-align: left;
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
    display: block;
    width: 100%;
}

.expectations-tabs .nav-link:hover {
    color: var(--color-secondary);
}

.expectations-tabs .nav-link.active {
    background-color: transparent;
    color: var(--color-white);
    font-weight: 700;
    padding-left: 30px;
}

/* White Dot Indicator */
.expectations-tabs .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--color-white);
    border-radius: 50%;
}

/* Tab Indicator - Hidden by default */
.tab-indicator {
    display: none;
}

/* ===========================
   Tab Content - Right Side
   =========================== */

.expectations-tab-content {
    padding: 0;
    min-height: 400px;
}

.expectations-content-box {
    padding: 0 40px;
    color: var(--color-white);
}

.expectations-content-title {
    font-size: 25px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 25px;
    font-family: var(--font-primary);
}

.expectations-intro {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-white);
    margin-bottom: 25px;
}

/* List with White Bullets */
.expectations-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.expectations-list li {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-white);
    margin-bottom: 18px;
    padding-left: 30px;
    position: relative;
}

.expectations-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--color-white);
    font-size: 20px;
    line-height: 1.8;
}

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

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .expectations-section {
        padding: 60px 0;
    }

    .expectations-main-title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .expectations-tabs .nav-link {
        font-size: 18px;
        padding: 18px 0;
    }

    .expectations-tabs .nav-link.active {
        padding-left: 25px;
    }

    .expectations-content-box {
        padding: 0 20px;
    }

    .expectations-content-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .expectations-intro,
    .expectations-list li {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .expectations-section {
        padding: 50px 0;
    }

    .expectations-main-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .expectations-tabs {
        margin-bottom: 30px;
    }

    .expectations-tabs .nav-link {
        font-size: 16px;
        padding: 15px 0;
    }

    .expectations-tabs .nav-link.active {
        padding-left: 22px;
    }

    .expectations-tabs .nav-link.active::before {
        width: 12px;
        height: 12px;
    }

    .expectations-content-box {
        padding: 0;
    }

    .expectations-content-title {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .expectations-intro,
    .expectations-list li {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .expectations-list li {
        padding-left: 25px;
    }
}

@media (max-width: 576px) {
    .expectations-main-title {
        font-size: 28px;
    }

    .expectations-tabs .nav-link {
        font-size: 15px;
    }

    .expectations-content-title {
        font-size: 22px;
    }

    .expectations-intro,
    .expectations-list li {
        font-size: 13px;
    }
}

/* Animation */
.tab-pane {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
   Our House Rules Section
   =========================== */

.house-rules-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Main Title
   =========================== */

.house-rules-main-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 50px;
}

/* ===========================
   Vertical Tabs - Left Side
   =========================== */

.house-rules-tabs {
    background-color: transparent;
    border: none;
    gap: 0;
    width: 100%;
}

.house-rules-tabs .nav-link {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-gray-lighter);
    color: var(--color-black);
    font-size: 20px;
    font-weight: 600;
    padding: 20px 0;
    text-align: left;
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
    display: block;
    width: 100%;
}

.house-rules-tabs .nav-link:hover {
    color: var(--color-primary);
}

.house-rules-tabs .nav-link.active {
    background-color: transparent;
    color: var(--color-primary);
    font-weight: 700;
    padding-left: 30px;
}

/* Yellow Dot Indicator */
.house-rules-tabs .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--color-secondary);
    border-radius: 50%;
}

/* Tab Indicator - Hidden by default */
.tab-indicator {
    display: none;
}

/* ===========================
   Tab Content - Right Side
   =========================== */

.house-rules-tab-content {
    padding: 0;
    min-height: 400px;
    margin-top: 110px;
}

.house-rules-content-box {
    padding: 0 40px;
}

.house-rules-content-title {
    font-size: 25px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 25px;
    font-family: var(--font-primary);
}

.house-rules-content-box p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-gray-darkest);
    margin-bottom: 20px;
}

.house-rules-content-box p:last-child {
    margin-bottom: 0;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .house-rules-section {
        padding: 60px 0;
    }

    .house-rules-main-title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .house-rules-tabs .nav-link {
        font-size: 18px;
        padding: 18px 0;
    }

    .house-rules-tabs .nav-link.active {
        padding-left: 25px;
    }

    .house-rules-content-box {
        padding: 0 20px;
    }

    .house-rules-content-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .house-rules-content-box p {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .house-rules-section {
        padding: 50px 0;
    }

    .house-rules-main-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .house-rules-tabs {
        margin-bottom: 30px;
    }

    .house-rules-tabs .nav-link {
        font-size: 16px;
        padding: 15px 0;
    }

    .house-rules-tabs .nav-link.active {
        padding-left: 22px;
    }

    .house-rules-tabs .nav-link.active::before {
        width: 12px;
        height: 12px;
    }

    .house-rules-content-box {
        padding: 0;
    }

    .house-rules-content-title {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .house-rules-content-box p {
        font-size: 14px;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .house-rules-main-title {
        font-size: 28px;
    }

    .house-rules-tabs .nav-link {
        font-size: 15px;
    }

    .house-rules-content-title {
        font-size: 22px;
    }

    .house-rules-content-box p {
        font-size: 13px;
    }
}

/* Animation */
.tab-pane {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
   Discipline & Educational Measures Section
   =========================== */
.discipline-section {
    background-color: var(--color-secondary);
    padding: 80px 0;
}

/* ===========================
   Title & Description
   =========================== */

.discipline-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 30px;
}

.discipline-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-black);
    max-width: 1100px;
    margin: 0 auto;
}

/* ===========================
   Vertical Tabs - Left Side
   =========================== */

.discipline-tabs {
    background-color: transparent;
    border: none;
    gap: 0;
    width: 100%;
}

.discipline-tabs .nav-link {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--color-black);
    font-size: 20px;
    font-weight: 600;
    padding: 20px 0;
    text-align: left;
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
    display: block;
    width: 100%;
}

.discipline-tabs .nav-link:hover {
    color: var(--color-primary);
}

.discipline-tabs .nav-link.active {
    background-color: transparent;
    color: var(--color-primary);
    font-weight: 700;
    padding-left: 30px;
}

/* Red Dot Indicator */
.discipline-tabs .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--color-primary);
    border-radius: 50%;
}

/* Tab Indicator - Hidden by default */
.tab-indicator {
    display: none;
}

/* ===========================
   Tab Content - Right Side
   =========================== */

.discipline-tab-content {
    padding: 0;
    min-height: 400px;
}

.discipline-content-box {
    padding: 0 40px;
}

.discipline-content-title {
    font-size: 25px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 25px;
    font-family: var(--font-primary);
}

.discipline-subtitle {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-black);
    margin-top: 30px;
    margin-bottom: 15px;
    font-family: var(--font-primary);
}

.discipline-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-black);
    margin-bottom: 20px;
}

.discipline-text em {
    font-style: italic;
}

/* List with Red Bullets */
.discipline-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.discipline-list li {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-black);
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative;
}

.discipline-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-size: 20px;
    line-height: 1.8;
}

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

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .discipline-section {
        padding: 60px 0;
    }

    .discipline-title {
        font-size: 40px;
        margin-bottom: 25px;
    }

    .discipline-description {
        font-size: 15px;
    }

    .discipline-tabs .nav-link {
        font-size: 18px;
        padding: 18px 0;
    }

    .discipline-tabs .nav-link.active {
        padding-left: 25px;
    }

    .discipline-content-box {
        padding: 0 20px;
    }

    .discipline-content-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .discipline-subtitle {
        font-size: 22px;
    }

    .discipline-text,
    .discipline-list li {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .discipline-section {
        padding: 50px 0;
    }

    .discipline-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .discipline-description {
        font-size: 14px;
    }

    .discipline-tabs {
        margin-bottom: 30px;
    }

    .discipline-tabs .nav-link {
        font-size: 16px;
        padding: 15px 0;
    }

    .discipline-tabs .nav-link.active {
        padding-left: 22px;
    }

    .discipline-tabs .nav-link.active::before {
        width: 12px;
        height: 12px;
    }

    .discipline-content-box {
        padding: 0;
    }

    .discipline-content-title {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .discipline-subtitle {
        font-size: 20px;
        margin-top: 25px;
    }

    .discipline-text,
    .discipline-list li {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .discipline-list li {
        padding-left: 25px;
    }
}

@media (max-width: 576px) {
    .discipline-title {
        font-size: 28px;
    }

    .discipline-tabs .nav-link {
        font-size: 15px;
    }

    .discipline-content-title {
        font-size: 22px;
    }

    .discipline-subtitle {
        font-size: 18px;
    }

    .discipline-text,
    .discipline-list li {
        font-size: 13px;
    }
}

/* Animation */
.tab-pane {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
   Final Thoughts Section
   =========================== */

.final-thoughts-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Title
   =========================== */

.final-thoughts-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 30px;
}

/* ===========================
   Text
   =========================== */

.final-thoughts-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-black);
    max-width: 1100px;
    margin: 0 auto;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .final-thoughts-section {
        padding: 60px 0;
    }

    .final-thoughts-title {
        font-size: 40px;
        margin-bottom: 25px;
    }

    .final-thoughts-text {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .final-thoughts-section {
        padding: 50px 0;
    }

    .final-thoughts-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .final-thoughts-text {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .final-thoughts-section {
        padding: 40px 0;
    }

    .final-thoughts-title {
        font-size: 28px;
    }

    .final-thoughts-text {
        font-size: 13px;
    }
}

/* ===========================
   Key Benefits of the DIA Section
   =========================== */

.key-benefits-section {
    background-color: #f4f4f4;
    padding-bottom: 80px;
}

/* ===========================
   Title
   =========================== */

.benefits-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 40px;
}

/* ===========================
   Benefit Boxes
   =========================== */

.benefit-box {
    padding: 40px 35px;
    border-radius: 10px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.benefit-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Yellow Box */
.benefit-box-yellow {
    background-color: var(--color-secondary);
}

/* Red Box */
.benefit-box-red {
    background-color: var(--color-primary);
}

/* ===========================
   Icon
   =========================== */

.benefit-icon {
    margin-bottom: 20px;
}

.benefit-icon i {
    font-size: 48px;
}

.benefit-icon img {
  width: 37px;
}

.benefit-box-yellow .benefit-icon i {
    color: var(--color-black);
}

.benefit-box-red .benefit-icon i {
    color: var(--color-white);
}

/* ===========================
   Heading
   =========================== */

.benefit-heading {
    font-size: 25px;
    font-weight: 700;
    font-family: var(--font-primary);
    margin-bottom: 20px;
}

.benefit-box-yellow .benefit-heading {
    color: var(--color-black);
}

.benefit-box-red .benefit-heading {
    color: var(--color-white);
}

/* ===========================
   List
   =========================== */

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

.benefit-list li {
    font-size: 18px;
    font-weight: normal;
    line-height: 1.6;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

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

.benefit-list li i {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 3px;
}

/* Yellow Box List */
.benefit-box-yellow .benefit-list li {
    color: var(--color-black);
}

.benefit-box-yellow .benefit-list li i {
    color: var(--color-black);
}

/* Red Box List */
.benefit-box-red .benefit-list li {
    color: var(--color-white);
}

.benefit-box-red .benefit-list li i {
    color: var(--color-white);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .key-benefits-section {
        padding: 60px 0;
    }

    .benefits-title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .benefit-box {
        padding: 35px 30px;
        min-height: 350px;
    }

    .benefit-icon i {
        font-size: 42px;
    }

    .benefit-heading {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .benefit-list li {
        font-size: 15px;
        margin-bottom: 12px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .key-benefits-section {
        padding: 50px 0;
    }

    .benefits-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .benefit-box {
        padding: 30px 25px;
        min-height: auto;
        margin-bottom: 20px;
    }

    .benefit-icon i {
        font-size: 38px;
    }

    .benefit-heading {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .benefit-list li {
        font-size: 14px;
        margin-bottom: 12px;
        gap: 10px;
    }

    .benefit-list li i {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .benefits-title {
        font-size: 35px;
    }

    .benefit-box {
        padding: 25px 20px;
    }

    .benefit-icon i {
        font-size: 36px;
    }

    .benefit-heading {
        font-size: 22px;
    }

    .benefit-list li {
        font-size: 13px;
    }
}

/* ===========================
   Educational Partners Section
   =========================== */

.educational-partners-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Introduction
   =========================== */

.partners-intro {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 50px;
}

.partners-intro p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-black);
    margin-bottom: 15px;
}

.partners-subtitle {
    font-weight: 600;
    margin-bottom: 0;
}

/* ===========================
   Partner Cards
   =========================== */

.partner-card {
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 30px 25px;
    height: 255px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Logo */
.sponsor-logo {
    margin-bottom: 20px;
    min-height: 123px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sponsor-logo img {
    max-width: 150px;
    max-height: 80px;
    object-fit: contain;
}

/* Title */
.partner-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 15px;
    font-family: var(--font-primary);
    line-height: 1.3;
}

/* Description */
.partner-description {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-gray-dark);
    margin-bottom: 20px;
    flex: 1;
}

.partner-card.sponsor-card {
    height: 400px;
}

/* Link */
.partner-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.partner-link:hover {
    color: var(--color-primary-hover);
    gap: 12px;
}

.partner-link i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.partner-link:hover i {
    transform: translateX(4px);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .educational-partners-section {
        padding: 60px 0;
    }

    .partners-intro {
        margin-bottom: 40px;
    }

    .partners-intro p {
        font-size: 13px;
    }

    .partner-card {
        padding: 25px 20px;
    }

    .partner-logo {
        min-height: 70px;
    }

    .partner-logo img {
        max-width: 130px;
        max-height: 70px;
    }

    .partner-title {
        font-size: 17px;
    }

    .partner-description {
        font-size: 12px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .educational-partners-section {
        padding: 50px 0;
    }

    .partners-intro {
        margin-bottom: 30px;
    }

    .partners-intro p {
        font-size: 12px;
    }

    .partner-card {
        padding: 20px 18px;
    }

    .partner-logo {
        min-height: 60px;
        margin-bottom: 15px;
    }

    .partner-logo img {
        max-width: 120px;
        max-height: 60px;
    }

    .partner-title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .partner-description {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .partner-link {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .partner-card {
        padding: 18px 15px;
    }

    .partner-title {
        font-size: 15px;
    }

    .partner-description {
        font-size: 11px;
    }
}

/* ===========================
   Sponsors & Offers Section
   Uses most styles from educational-partners.css
   Only adding specific overrides
   =========================== */

/* Title - Red centered */
.sponsors-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 30px;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    .sponsors-title {
        font-size: 40px;
        margin-bottom: 25px;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .sponsors-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .sponsors-title {
        font-size: 28px;
    }
}



/* ===========================
   Please Download Section
   REUSES: download-box structure from Downloads section
   ADDS: Only yellow color variant
   =========================== */

/* Section Background */
.please-download-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Yellow Download Box
   REUSES: .download-box structure
   CHANGES: Only background color
   =========================== */

.download-box-yellow {
    background: var(--color-secondary);
    border-radius: 10px;
    padding: 0px 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    height: 65px;
}

.section-title-centered {
    text-align: center;
}

.download-box-yellow:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(248, 181, 49, 0.3);
}

/* Download Icon - Reuse structure */
.download-box-yellow .download-icon {
    flex-shrink: 0;
}

.download-box-yellow .download-icon i {
    font-size: 42px;
    color: var(--color-black);
    display: block;
}

/* Download Content - Reuse structure */
.download-box-yellow .download-content {
    flex: 1;
}

.download-box-yellow .download-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.3;
    display: block;
}

/* Download Arrow - Reuse structure */
.download-box-yellow .download-arrow {
    flex-shrink: 0;
}

.download-box-yellow .download-arrow i {
    font-size: 28px;
    color: var(--color-black);
    transition: transform 0.3s ease;
}

.download-box-yellow:hover .download-arrow i {
    transform: translateY(4px);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .please-download-section {
        padding: 60px 0;
    }

    .download-box-yellow {
        padding: 22px 25px;
    }

    .download-box-yellow .download-icon i {
        font-size: 38px;
    }

    .download-box-yellow .download-title {
        font-size: 15px;
    }

    .download-box-yellow .download-arrow i {
        font-size: 26px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .please-download-section {
        padding: 50px 0 80px;
    }

    .download-box-yellow {
        padding: 20px 22px;
        gap: 20px;
    }

    .download-box-yellow .download-icon i {
        font-size: 36px;
    }

    .download-box-yellow .download-title {
        font-size: 14px;
    }

    .download-box-yellow .download-arrow i {
        font-size: 24px;
    }
}

@media (max-width: 576px) {
    .download-box-yellow {
        padding: 18px 20px;
    }

    .download-box-yellow .download-icon i {
        font-size: 32px;
    }

    .download-box-yellow .download-title {
        font-size: 13px;
    }

}

/* ===========================
   NOTES:
   This CSS file is minimal because it REUSES:
   - .section-title-red (from main CSS)
   - .section-title-centered (from main CSS)
   - .download-box structure (adapted from Downloads section)
   
   Only adds:
   - Yellow color variant (.download-box-yellow)
   - Section padding
   
   Total: ~150 lines vs ~300+ if written from scratch
   Savings: ~50%
   =========================== */
/* ===========================
   Departments Section
   REUSES: .vertical-tab-nav from main CSS
   ADDS: Only table styling
   =========================== */

/* Section Background */
.departments-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Tab Content - Right Side
   REUSES: .fade-in-content animation
   =========================== */

.departments-tab-content {
    padding: 0;
}

.department-content-box {
    padding: 0 40px;
}

/* Department Title */
.department-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 10px;
    font-family: var(--font-primary);
}

/* Department Category */
.department-category {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-gray-medium);
    margin-bottom: 30px;
}

/* ===========================
   Alternating Table Rows
   =========================== */

.department-table {
    width: 100%;
    border-collapse: collapse;
}

.department-table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}

.department-table tbody tr:nth-child(even) {
    background-color: var(--color-bg-light);
}

.department-table tbody td {
    padding: 18px 20px;
    vertical-align: middle;
}

/* Grade Column */
.grade-col {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    width: 35%;
}

/* Subject Column */
.subject-col {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-gray-darkest);
    width: 65%;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .departments-section {
        padding: 60px 0;
    }

    .department-content-box {
        padding: 0 20px;
        margin-top: 30px;
    }

    .department-title {
        font-size: 28px;
    }

    .department-category {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .department-table tbody td {
        padding: 16px 18px;
    }

    .grade-col,
    .subject-col {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .departments-section {
        padding: 50px 0;
    }

    .department-content-box {
        padding: 0;
    }

    .department-title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .department-category {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .department-table tbody td {
        padding: 15px 16px;
    }

    .grade-col,
    .subject-col {
        font-size: 14px;
    }

    /* Stack table on very small screens */
    .grade-col {
        width: 40%;
    }

    .subject-col {
        width: 60%;
    }
}

@media (max-width: 576px) {
    .department-title {
        font-size: 22px;
    }

    .department-category {
        font-size: 14px;
    }

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

    .grade-col,
    .subject-col {
        font-size: 13px;
    }
}

/* ===========================
   Departments Section
   COMPLETE standalone version
   =========================== */

/* Section Background */
.departments-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Vertical Tabs - Left Side
   =========================== */

.departments-tabs {
    background-color: transparent;
    border: none;
    gap: 0;
    width: 100%;
}

.departments-tabs .nav-link {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-gray-lighter);
    color: var(--color-black);
    font-size: 20px;
    font-weight: 600;
    padding: 20px 0;
    text-align: left;
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
    display: block;
    width: 100%;
}

.departments-tabs .nav-link:hover {
    color: var(--color-primary);
}

.departments-tabs .nav-link.active {
    background-color: transparent;
    color: var(--color-primary);
    font-weight: 700;
    padding-left: 30px;
}

/* Yellow Dot Indicator */
.departments-tabs .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--color-secondary);
    border-radius: 50%;
}

/* Tab Indicator - Hidden by default */
.tab-indicator {
    display: none;
}

/* ===========================
   Tab Content - Right Side
   =========================== */

.departments-tab-content {
    padding: 0;
    min-height: 400px;
}

.department-content-box {
    padding: 0 40px;
}

/* Department Title */
.department-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 10px;
    font-family: var(--font-primary);
}

/* Department Category */
.department-category {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-gray-medium);
    margin-bottom: 30px;
}

/* ===========================
   Alternating Table Rows
   =========================== */

.department-table {
    width: 100%;
    border-collapse: collapse;
}

.department-table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}

.department-table tbody tr:nth-child(even) {
    background-color: var(--color-bg-light);
}

.department-table tbody td {
    padding: 18px 20px;
    vertical-align: middle;
}

/* Grade Column */
.grade-col {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    width: 35%;
}

/* Subject Column */
.subject-col {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-gray-darkest);
    width: 65%;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .departments-section {
        padding: 60px 0;
    }

    .department-content-box {
        padding: 0 20px;
        margin-top: 30px;
    }

    .department-title {
        font-size: 28px;
    }

    .department-category {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .department-table tbody td {
        padding: 16px 18px;
    }

    .grade-col,
    .subject-col {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .departments-section {
        padding: 50px 0;
    }

    .department-content-box {
        padding: 0;
    }

    .department-title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .department-category {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .department-table tbody td {
        padding: 15px 16px;
    }

    .grade-col,
    .subject-col {
        font-size: 14px;
    }

    /* Stack table on very small screens */
    .grade-col {
        width: 40%;
    }

    .subject-col {
        width: 60%;
    }
}

@media (max-width: 576px) {
    .department-title {
        font-size: 22px;
    }

    .department-category {
        font-size: 14px;
    }

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

    .grade-col,
    .subject-col {
        font-size: 13px;
    }

    .departments-tabs .nav-link {
        font-size: 16px;
        padding: 15px 0;
    }

    .departments-tabs .nav-link.active {
        padding-left: 22px;
    }

    .departments-tabs .nav-link.active::before {
        width: 12px;
        height: 12px;
    }
}

/* ===========================
   Animation
   =========================== */

.tab-pane {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===========================
   Requirements Section
   REUSES: accordion structure from FAQs section
   ADDS: Only yellow line separator
   =========================== */

.requirements-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Title
   =========================== */

.requirements-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 10px;
}

/* ===========================
   Accordion (Reuses FAQs styles)
   Add yellow separator lines
   =========================== */

.requirements-accordion {
    border-top: 1px solid var(--color-secondary);
}

.requirements-accordion .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-secondary);
    margin-bottom: 0;
    border-radius: 0;
}

.requirements-accordion .accordion-item:last-child {
    border-bottom: 1px solid var(--color-secondary);
}

.requirements-accordion .accordion-button {
    background-color: transparent;
    color: var(--color-black);
    font-size: 20px;
    font-weight: 600;
    padding: 25px 0;
    border: none;
    font-family: var(--font-primary);
    box-shadow: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.requirements-accordion .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--color-black);
    box-shadow: none;
}

.requirements-accordion .accordion-button:focus {
    box-shadow: none;
    border: none;
}

/* Icon (+ and −) */
.accordion-icon {
    font-size: 28px;
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1;
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.requirements-accordion .accordion-button::after {
    display: none;
}

.requirements-accordion .accordion-body {
    padding: 0 0 25px 45px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-dark);
    font-family: var(--font-primary);
}

.accordion-section {
    padding: 0 50px 0 50px;
}

/* ===========================
   Right Side - Image
   =========================== */

.requirements-image {
    height: 100%;
    min-height: 500px;
}

.requirements-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px 0 0 10px;
    padding: 50px 0 50px 50px;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .requirements-section {
        padding: 60px 0;
    }

    .requirements-title {
        font-size: 40px;
        margin-bottom: 35px;
    }

    .requirements-accordion .accordion-button {
        font-size: 18px;
        padding: 22px 0;
    }

    .accordion-icon {
        font-size: 26px;
    }

    .requirements-accordion .accordion-body {
        font-size: 15px;
        padding: 0 0 22px 40px;
    }

    .requirements-image {
        min-height: 400px;
        margin-top: 40px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .requirements-section {
        padding: 50px 0;
    }

    .requirements-title {
        font-size: 32px;
        margin-bottom: 30px;
        padding-bottom: 15px;
    }

    .requirements-title::after {
        height: 2px;
    }

    .requirements-accordion .accordion-button {
        font-size: 16px;
        padding: 20px 0;
        gap: 12px;
    }

    .accordion-icon {
        font-size: 24px;
        width: 25px;
    }

    .requirements-accordion .accordion-body {
        padding: 0 0 20px 37px;
        font-size: 14px;
    }

    .requirements-image {
        min-height: 350px;
        margin-top: 30px;
    }
}

@media (max-width: 576px) {
    .requirements-title {
        font-size: 28px;
    }

    .requirements-accordion .accordion-button {
        font-size: 15px;
        padding: 18px 0;
        gap: 10px;
    }

    .accordion-icon {
        font-size: 22px;
        width: 22px;
    }

    .requirements-accordion .accordion-body {
        padding: 0 0 18px 32px;
        font-size: 13px;
    }

    .requirements-image {
        min-height: 300px;
        border-radius: 8px;
    }
}

/* ===========================
   NOTES:
   This CSS reuses accordion structure from FAQs section:
   - Accordion button styles
   - Collapse animation
   - Body padding
   
   Only adds:
   - Yellow line under title (::after)
   - Yellow separators between items (border-bottom)
   - Custom icon positioning
   
   Savings: ~40% compared to writing from scratch
   =========================== */


/* ===========================
   School Bus & Insurance Section
   =========================== */

.school-bus-insurance-section {
    background-color: #f4f4f4;
    padding: 0;
}

/* ===========================
   School Bus Part
   =========================== */

.school-bus-part {
    background-color: #f4f4f4;
    padding: 80px 0 60px;
    margin: 0 auto;
}

/* Bus Image */
.bus-image {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
}

.bus-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Title (reuses .section-title-red from main CSS) */
.section-title-red {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 30px;
}

/* Numbered Rules List */
.bus-rules-list {
    list-style: none;
    counter-reset: bus-counter;
    padding: 0;
    margin: 0;
}

.bus-rules-list li {
    counter-increment: bus-counter;
    position: relative;
    padding-left: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-darkest);
}

.bus-rules-list li::before {
    content: counter(bus-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    height: 35px;
    color: var(--color-primary);
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

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

/* ===========================
   Insurance Part
   =========================== */

.insurance-part {
    background-color: #f4f4f4;
    padding: 60px 0 80px;
    text-align: center;
}

.insurance-title {
    text-align: center;
    margin-bottom: 30px;
}

.insurance-text {
    max-width: 900px;
    margin: 0 auto;
}

.insurance-text p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-gray-darkest);
    margin-bottom: 20px;
    text-align: center;
}

.insurance-text p:last-child {
    margin-bottom: 0;
}

.insurance-discount {
    margin-top: 30px;
}

.insurance-discount strong {
    font-weight: 700;
    color: var(--color-black);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .school-bus-part {
        padding: 0 0 50px;
    }

    .bus-image {
        max-width: 700px;
        margin-bottom: 35px;
    }

    .section-title-red {
        font-size: 40px;
        margin-bottom: 25px;
    }

    .bus-rules-list li {
        padding-left: 45px;
        font-size: 15px;
        margin-bottom: 18px;
    }

    .bus-rules-list li::before {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .insurance-part {
        padding: 50px 0 60px;
    }

    .insurance-text p {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .school-bus-part {
        padding: 0 0 40px;
    }

    .bus-image {
        max-width: 100%;
        margin-bottom: 30px;
        border-radius: 10px;
    }

    .section-title-red {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .bus-rules-list li {
        padding-left: 40px;
        font-size: 14px;
        margin-bottom: 16px;
    }

    .bus-rules-list li::before {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .insurance-part {
        padding: 40px 0 50px;
    }

    .insurance-text p {
        font-size: 14px;
    }

    .insurance-discount {
        margin-top: 25px;
    }
}

@media (max-width: 576px) {
    .section-title-red {
        font-size: 28px;
    }

    .bus-rules-list li {
        padding-left: 38px;
        font-size: 13px;
        margin-bottom: 14px;
    }

    .bus-rules-list li::before {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .insurance-text p {
        font-size: 13px;
    }
}


/* ===========================
   Events Highlights Section
   Uses Bootstrap Carousel Component
   =========================== */

.events-highlights-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Event Item
   =========================== */

.event-item {
    margin-bottom: 80px;
}

.event-item:last-child {
    margin-bottom: 0;
}

/* ===========================
   Bootstrap Carousel Customization
   =========================== */

.event-carousel {
    overflow: hidden;
}

/* Carousel on LEFT - border-radius on RIGHT side only */
.event-item-left .event-carousel {
    border-radius: 0 10px 10px 0;
}

.event-item-left .event-carousel .carousel-inner {
    border-radius: 0 10px 10px 0;
}

.event-item-left .event-carousel img {
    border-radius: 0 10px 10px 0;
}

/* Carousel on RIGHT - border-radius on LEFT side only */
.event-item-right .event-carousel {
    border-radius: 10px 0 0 10px;
}

.event-item-right .event-carousel .carousel-inner {
    border-radius: 10px 0 0 10px;
}

.event-item-right .event-carousel img {
    border-radius: 10px 0 0 10px;
}

.event-carousel img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 400px;
}

/* Carousel Controls - Bottom Positioning */
.event-carousel .carousel-control-prev,
.event-carousel .carousel-control-next {
    width: 50px;
    height: 50px;
    background-color: var(--color-white);
    border-radius: 6px;
    top: auto;
    bottom: 20px;
    opacity: 1;
}

/* When carousel on LEFT - arrows on bottom RIGHT */
.event-item-left .event-carousel .carousel-control-prev {
    left: auto;
    right: 70px;
}

.event-item-left .event-carousel .carousel-control-next {
    right: 10px;
}

/* When carousel on RIGHT - arrows on bottom LEFT */
.event-item-right .event-carousel .carousel-control-prev {
    left: 10px;
}

.event-item-right .event-carousel .carousel-control-next {
    left: 70px;
    right: auto;
}

.event-carousel .carousel-control-prev:hover,
.event-carousel .carousel-control-next:hover {
    background-color: rgba(255, 255, 255, 1);
}

/* Carousel Icons - RED Color (Keep Bootstrap default arrow shape) */
.event-carousel .carousel-control-prev-icon,
.event-carousel .carousel-control-next-icon {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    /* Filter to make Bootstrap arrow red var(--color-primary) */
    filter: brightness(0) saturate(100%) invert(14%) sepia(93%) saturate(4823%) hue-rotate(353deg) brightness(92%) contrast(94%);
}

/* ===========================
   Event Content
   =========================== */

.event-content {
    padding: 0 40px;
}

.event-item-right .event-content {
    padding: 0 40px 0 40px;
}

.event-item-left .event-content {
    padding: 0 40px 0 40px;
}

.event-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 25px;
    line-height: 1.2;
}

.event-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-darkest);
    margin-bottom: 20px;
}

.event-text:last-child {
    margin-bottom: 0;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .events-highlights-section {
        padding: 60px 0;
    }

    .event-item {
        margin-bottom: 60px;
    }

    .event-carousel img {
        min-height: 350px;
    }

    /* On mobile/tablet - all carousels have arrows on bottom right */
    .event-carousel .carousel-control-prev {
        left: auto;
        right: 60px;
    }

    .event-carousel .carousel-control-next {
        right: 10px;
        left: auto;
    }

    .event-content {
        padding: 0 30px;
        margin-top: 30px;
    }

    .event-item-right .event-content,
    .event-item-left .event-content {
        padding: 0 30px;
        margin-top: 30px;
    }

    .event-title {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .event-text {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .events-highlights-section {
        padding: 50px 0;
    }

    .event-item {
        margin-bottom: 50px;
    }

    /* On mobile - all carousels use full border-radius */
    .event-carousel,
    .event-item-left .event-carousel,
    .event-item-right .event-carousel {
        border-radius: 10px;
    }

    .event-carousel .carousel-inner,
    .event-item-left .event-carousel .carousel-inner,
    .event-item-right .event-carousel .carousel-inner {
        border-radius: 10px;
    }

    .event-carousel img,
    .event-item-left .event-carousel img,
    .event-item-right .event-carousel img {
        min-height: 300px;
        border-radius: 10px;
    }

    .event-carousel .carousel-control-prev,
    .event-carousel .carousel-control-next {
        width: 40px;
        height: 40px;
    }

    .event-carousel .carousel-control-prev {
        left: auto;
        right: 55px;
    }

    .event-carousel .carousel-control-next {
        right: 10px;
        left: auto;
    }

    .event-carousel .carousel-control-prev-icon,
    .event-carousel .carousel-control-next-icon {
        width: 16px;
        height: 16px;
        background-size: 16px 16px;
        color: var(--color-white) !important;
        filter: none !important;
    }

    .event-content {
        padding: 0 20px;
        margin-top: 25px;
    }

    .event-item-right .event-content,
    .event-item-left .event-content {
        padding: 0 20px;
        margin-top: 25px;
    }

    .event-title {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .event-text {
        font-size: 14px;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .event-title {
        font-size: 24px;
    }

    .event-text {
        font-size: 13px;
    }

    .event-carousel img {
        min-height: 250px;
    }
}

/* ===========================
   NOTES:
   This section heavily uses Bootstrap Carousel:
   - .carousel (Bootstrap component)
   - .carousel-inner (Bootstrap)
   - .carousel-item (Bootstrap)
   - .carousel-control-prev/next (Bootstrap)
   - Auto-slide functionality (Bootstrap)
   
   Only custom CSS:
   - Border-radius and shadows
   - Control button styling
   - Content padding and spacing
   
   Result: Minimal custom CSS, maximum use of Bootstrap
   =========================== */

/* ===========================
   Educational Journeys Section
   =========================== */

.educational-journeys-section {
    background-color: var(--color-bg-light);
    padding: 0;
}

/* ===========================
   Top Part
   =========================== */

.journeys-top {
    padding: 80px 0;
}

.section-trip-left {
    padding: 0 40px 0 40px;
}

.section-trip-right {
    padding: 0 40px 0 40px;
}

/* Journey Image */
.journey-image {
    width: 100%;
    overflow: hidden;
}

.journey-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Top part - Image on left has radius on right side */
.journeys-top .journey-image {
    border-radius: 0 10px 10px 0;
}

.journeys-top .journey-image img {
    border-radius: 0 10px 10px 0;
}

/* Content */
.journey-content {
    padding: 0 0 0 40px;
}

.journey-main-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 25px;
    line-height: 1.2;
}

.journey-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-darkest);
    margin-bottom: 20px;
}

.journey-text:last-child {
    margin-bottom: 0;
}

/* ===========================
   Bottom Part
   =========================== */

.journeys-bottom {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* Bottom part - Image on right has radius on left side */
.journeys-bottom .journey-image {
    border-radius: 10px 0 0 10px;
}

.journeys-bottom .journey-image img {
    border-radius: 10px 0 0 10px;
}

/* Program Title */
.program-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 30px;
    line-height: 1.2;
}

/* ===========================
   Journey Program Table
   =========================== */

.journey-table {
    width: 100%;
    border-collapse: collapse;
}

.journey-table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}

.journey-table tbody tr:nth-child(even) {
    background-color: var(--color-bg-light);
}

.journey-table tbody td {
    padding: 18px 20px;
    vertical-align: middle;
}

/* Grade Column */
.grade-col {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    width: 35%;
}

/* Destination Column */
.destination-col {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-gray-darkest);
    width: 65%;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .journeys-top {
        padding: 60px 0;
    }

    .journeys-bottom {
        padding: 60px 0;
    }

    .journey-content {
        padding: 0 30px;
        margin-top: 30px;
    }

    .journey-main-title {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .program-title {
        font-size: 28px;
        margin-bottom: 25px;
    }

    .journey-text {
        font-size: 15px;
    }

    .journey-table tbody td {
        padding: 16px 18px;
    }

    .grade-col,
    .destination-col {
        font-size: 15px;
    }

    /* On tablet - images have full border-radius */
    .journeys-top .journey-image,
    .journeys-bottom .journey-image {
        border-radius: 10px;
    }

    .journeys-top .journey-image img,
    .journeys-bottom .journey-image img {
        border-radius: 10px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .journeys-top {
        padding: 50px 0;
    }

    .journeys-bottom {
        padding: 50px 0;
    }

    .journey-content {
        padding: 0 20px;
        margin-top: 25px;
    }

    .journey-main-title {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .program-title {
        font-size: 24px;
        margin-bottom: 20px;
        padding: 0 20px;
    }

    .journey-text {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .journey-table {
        margin: 0 20px;
    }

    .journey-table tbody td {
        padding: 15px 16px;
    }

    .grade-col,
    .destination-col {
        font-size: 14px;
    }

    /* Stack table on very small screens */
    .grade-col {
        width: 40%;
    }

    .destination-col {
        width: 60%;
    }
}

@media (max-width: 576px) {
    .journey-main-title {
        font-size: 24px;
    }

    .program-title {
        font-size: 22px;
    }

    .journey-text {
        font-size: 13px;
    }

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

    .grade-col,
    .destination-col {
        font-size: 13px;
    }
}


/* ===========================
   Title
   =========================== */

.trips-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 50px;
}

/* ===========================
   Events Grid Section
   Uses Bootstrap Cards + Pagination
   ALL CLASSES PREFIXED WITH 'events-grid-'
   =========================== */

.events-grid-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Event Card (Bootstrap Card)
   =========================== */

.events-grid-card {
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    border: 2px solid transparent;
}

/* Alternating Borders: Red → Yellow → Gray → Red... */
/* Target the parent column div */
.events-grid-section .row>div:nth-child(3n+1) .events-grid-card {
    border-color: var(--color-primary);
    /* Red */
}

.events-grid-section .row>div:nth-child(3n+2) .events-grid-card {
    border-color: var(--color-secondary);
    /* Yellow */
}

.events-grid-section .row>div:nth-child(3n+3) .events-grid-card {
    border-color: #5F5F5F;
    /* Gray */
}

.events-grid-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Image Wrapper */
.events-grid-image-wrapper {
    position: relative;
    overflow: hidden;
}

.events-grid-card .card-img-top {
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 10px;
}

.events-grid-card:hover .card-img-top {
    transform: scale(1.05);
}

/* Date Badge */
.events-grid-date-badge {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-secondary);
    border-radius: 0 0 10px 0;
    padding: 8px 12px;
    text-align: center;
    z-index: 10;
}

.events-grid-date-badge.events-grid-orange-badge {
    background-color: var(--color-secondary);
}

.events-grid-date-weekday {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 3px;
}

.events-grid-date-day {
    font-size: 24px;
    font-weight: 900;
    color: var(--color-black);
    line-height: 1;
    margin-bottom: 2px;
}

.events-grid-date-month {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    line-height: 1;
}

/* Card Body */
.events-grid-card .card-body {
    padding: 20px;
    background-color: var(--color-white);
}

.events-grid-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 10px;
    font-family: var(--font-primary);
    min-height: 44px;
}

.events-grid-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-gray-medium);
    margin-bottom: 0;
}

/* ===========================
   Bootstrap Pagination (Custom Style)
   =========================== */


.events-grid-pagination .events-grid-page-item .events-grid-page-link {
    border: none;
    background-color: var(--color-secondary);
    color: var(--color-black);
    font-weight: 700;
    font-size: 16px;
    padding: 10px 18px;
    transition: all 0.3s ease;
}

.events-grid-pagination .events-grid-page-item .events-grid-page-link:hover {
    background-color: var(--color-secondary-dark);
    color: var(--color-black);
}

.events-grid-pagination .events-grid-page-item.active .events-grid-page-link {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-weight: 900;
}

.events-grid-pagination .events-grid-page-item:first-child .events-grid-page-link,
.events-grid-pagination .events-grid-page-item:last-child .events-grid-page-link {
    background-color: var(--color-secondary);
    color: var(--color-black);
    font-weight: 700;
}

.events-grid-pagination .events-grid-page-item:first-child .events-grid-page-link:hover,
.events-grid-pagination .events-grid-page-item:last-child .events-grid-page-link:hover {
    background-color: var(--color-secondary-dark);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .events-grid-section {
        padding: 60px 0;
    }

    .events-grid-card .card-img-top {
        height: 180px;
    }

    .events-grid-title {
        font-size: 17px;
        min-height: 42px;
    }

    .events-grid-text {
        font-size: 13px;
    }

    .events-grid-pagination .events-grid-page-item .events-grid-page-link {
        font-size: 15px;
        padding: 8px 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .events-grid-section {
        padding: 50px 0;
    }

    .events-grid-card .card-img-top {
        height: 185px;
    }

    .events-grid-date-badge {
        top: 12px;
        left: 12px;
        padding: 6px 10px;
    }

    .events-grid-date-weekday {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .events-grid-date-day {
        font-size: 20px;
    }

    .events-grid-date-month {
        font-size: 11px;
    }

    .events-grid-card .card-body {
        padding: 15px;
    }

    .events-grid-title {
        font-size: 16px;
        min-height: 38px;
    }

    .events-grid-text {
        font-size: 13px;
    }

    .events-grid-pagination .events-grid-page-item .events-grid-page-link {
        font-size: 14px;
        padding: 8px 12px;
    }
}

@media (max-width: 576px) {
    .events-grid-card .card-img-top {
        height: 185px;
    }

    .events-grid-title {
        font-size: 15px;
        min-height: 36px;
    }

    .events-grid-text {
        font-size: 12px;
    }

    .events-grid-pagination {
        gap: 0;
    }

    .events-grid-pagination .events-grid-page-item .events-grid-page-link {
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* ===========================
   NOTES:
   ALL CLASSES ARE NOW UNIQUE WITH 'events-grid-' PREFIX
   
   This section uses Bootstrap components:
   - .card (Bootstrap card component)
   - .card-img-top (Bootstrap image)
   - .card-body (Bootstrap card body)
   - .card-title (Bootstrap title - with events-grid-title)
   - .card-text (Bootstrap text - with events-grid-text)
   - .pagination (Bootstrap pagination - with events-grid-pagination)
   - .page-item (Bootstrap page item - with events-grid-page-item)
   - .page-link (Bootstrap page link - with events-grid-page-link)
   
   Custom classes added:
   - .events-grid-card
   - .events-grid-image-wrapper
   - .events-grid-date-badge
   - .events-grid-date-day
   - .events-grid-date-month
   - .events-grid-title
   - .events-grid-text
   - .events-grid-pagination
   - .events-grid-page-item
   - .events-grid-page-link
   - .events-grid-orange-badge
   
   NO CLASS NAME CONFLICTS!
   =========================== */

/* ===========================
   News Grid Section
   ALL CLASSES PREFIXED WITH 'news-grid-'
   =========================== */

.news-grid-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   News Card (Bootstrap Card with Overlay)
   =========================== */

.news-grid-card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    position: relative;
}

.news-grid-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Image Wrapper */
.news-grid-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 409px;
}

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

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

/* Category Badge */
.news-grid-category-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--color-secondary);
    color: var(--color-black);
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    z-index: 10;
    text-transform: capitalize;
}

/* Dark Overlay */
.news-grid-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    padding: 30px 20px 20px;
    color: var(--color-white);
}

.news-grid-date {
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
    color: var(--color-white);
}

.news-grid-title a {
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
}

/* ===========================
   Bootstrap Pagination (Custom Style)
   =========================== */


.news-grid-pagination .news-grid-page-item .news-grid-page-link {
    border: none;
    background-color: var(--color-secondary);
    color: var(--color-black);
    font-weight: 700;
    font-size: 16px;
    padding: 10px 18px;
    transition: all 0.3s ease;
}

.news-grid-pagination .news-grid-page-item .news-grid-page-link:hover {
    background-color: var(--color-secondary-dark);
    color: var(--color-black);
}

.news-grid-pagination .news-grid-page-item.active .news-grid-page-link {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 900;
}

.news-grid-pagination .news-grid-page-item:first-child .news-grid-page-link,
.news-grid-pagination .news-grid-page-item:last-child .news-grid-page-link {
    background-color: var(--color-secondary);
    color: var(--color-black);
    font-weight: 700;
}

.news-grid-pagination .news-grid-page-item:first-child .news-grid-page-link:hover,
.news-grid-pagination .news-grid-page-item:last-child .news-grid-page-link:hover {
    background-color: var(--color-secondary-dark);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .news-grid-section {
        padding: 60px 0;
    }

    .news-grid-image-wrapper {
        height: 320px;
    }

    .news-grid-category-badge {
        font-size: 12px;
        padding: 6px 16px;
    }

    .news-grid-date {
        font-size: 13px;
    }

    .news-grid-title {
        font-size: 17px;
    }

    .news-grid-pagination .news-grid-page-item .news-grid-page-link {
        font-size: 15px;
        padding: 8px 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .news-grid-section {
        padding: 50px 0;
    }

    .news-grid-image-wrapper {
        height: 300px;
    }

    .news-grid-category-badge {
        top: 15px;
        left: 15px;
        font-size: 11px;
        padding: 6px 14px;
    }

    .news-grid-overlay {
        padding: 25px 18px 18px;
    }

    .news-grid-date {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .news-grid-title {
        font-size: 16px;
    }

    .news-grid-pagination .news-grid-page-item .news-grid-page-link {
        font-size: 14px;
        padding: 8px 12px;
    }
}

@media (max-width: 576px) {
    .news-grid-image-wrapper {
        height: 280px;
    }

    .news-grid-category-badge {
        font-size: 10px;
        padding: 5px 12px;
    }

    .news-grid-date {
        font-size: 11px;
    }

    .news-grid-title {
        font-size: 15px;
    }

    .news-grid-pagination {
        gap: 0;
    }

    .news-grid-pagination .news-grid-page-item .news-grid-page-link {
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* ===========================
   Single Blog Post Section
   =========================== */

.single-blog-section {
    background-color: #f4f4f4 !important;
    padding: 80px 0 60px;
}

/* Featured Image */
.single-blog-featured {
    max-width: 900px;
    margin: 0 auto 30px;
    border-radius: 10px;
    overflow: hidden;
}

.single-blog-featured-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Post Header */
.single-blog-header {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

.single-blog-category {
    display: inline-block;
    background-color: var(--color-secondary);
    color: var(--color-black);
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 15px;
}

.single-blog-date {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-gray-medium);
    margin-bottom: 20px;
}

.single-blog-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-black);
    font-family: var(--font-primary);
    margin-bottom: 30px;
    line-height: 1.3;
}

/* Social Share */
.single-blog-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.single-blog-share-bottom {
    justify-content: flex-start;

}

.share-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
}

.share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-primary);
    font-size: 22px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.share-icon:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-3px);
}

/* Post Content */
.single-blog-content {
    max-width: 900px;
    margin: 50px auto;
    padding: 0 20px;
}

.single-blog-content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-gray-darkest);
    margin-bottom: 25px;
}

.single-blog-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-black);
    margin-top: 40px;
    margin-bottom: 20px;
    font-family: var(--font-primary);
}

/* Share Bottom */
.single-blog-share-bottom {
    max-width: 900px;
    margin: 40px auto 0;
    padding: 30px 20px 0;
    border-top: 2px solid var(--color-gray-lightest);
}

/* ===========================
   More Blog Posts Section
   =========================== */

.more-posts-section {
    background-color: #f4f4f4;
    padding-bottom: 80px;
}

.more-posts-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 30px;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .single-blog-section {
        padding: 60px 0 50px;
    }

    .single-blog-title {
        font-size: 36px;
    }

    .single-blog-content h3 {
        font-size: 22px;
    }

    .single-blog-content p {
        font-size: 15px;
    }

    .more-posts-section {
        padding: 60px 0;
    }

    .more-posts-title {
        font-size: 40px;
        margin-bottom: 40px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .single-blog-section {
        padding: 50px 0 40px;
    }

    .single-blog-featured {
        border-radius: 10px;
        margin-bottom: 25px;
    }

    .single-blog-category {
        font-size: 13px;
        padding: 6px 16px;
    }

    .single-blog-date {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .single-blog-title {
        font-size: 28px;
        margin-bottom: 25px;
    }

    .single-blog-share,
    .single-blog-share-bottom {
        gap: 12px;
        margin-top: 25px;
    }

    .share-label {
        font-size: 13px;
    }

    .share-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .single-blog-content {
        margin: 40px auto;
    }

    .single-blog-content p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .single-blog-content h3 {
        font-size: 20px;
        margin-top: 30px;
        margin-bottom: 18px;
    }

    .single-blog-share-bottom {
        margin-top: 30px;
        padding-top: 25px;
    }

    .more-posts-section {
        padding: 50px 0;
    }

    .more-posts-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .single-blog-title {
        font-size: 24px;
    }

    .single-blog-content p {
        font-size: 13px;
    }

    .single-blog-content h3 {
        font-size: 18px;
    }

    .more-posts-title {
        font-size: 28px;
    }
}

/* ===========================
   FAQs Section
   =========================== */

.faqs-main-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* Title */
.faqs-main-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 40px;
}


/* ===========================
   Mobile - Arrows Below LEFT (< 768px)
   =========================== */

@media (max-width: 767px) {

    /* Carousel Container - Add space for arrows */
    .event-carousel {
        position: relative;
        padding-bottom: 60px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        top: auto !important;
        bottom: 5px !important;
        width: 45px;
        height: 45px;
        background-color: var(--color-primary) !important;
        border-radius: 8px;
        opacity: 1;
        z-index: 10;
    }

    .carousel-control-prev {
        left: 15px !important;
        right: auto !important;
        transform: none;
    }

    .carousel-control-next {
        left: 70px !important;
        right: auto !important;
        transform: none;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        filter: brightness(0) invert(1);
        width: 20px;
        height: 20px;
    }

    .carousel-control-prev:hover,
    .carousel-control-next:hover {
        background-color: var(--color-primary-dark) !important;
    }

}

/* ===========================
   Small Mobile (< 576px)
   =========================== */

@media (max-width: 575px) {

    .carousel-control-prev {
        left: 10px !important;
    }

    .carousel-control-next {
        left: 60px !important;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 40px;
        height: 40px;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 18px;
        height: 18px;
    }

}

/* ===========================
   Search Bar
   =========================== */

.faqs-search-wrapper {
    max-width: 900px;
    margin: 0 auto 50px;
}

.faqs-search-container {
    display: flex;
    align-items: stretch;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-black);
    background: var(--color-white);
}

.faqs-search-input {
    flex: 1;
    border: none;
    padding: 15px 25px;
    font-size: 16px;
    font-family: var(--font-primary);
    outline: none;
    background-color: var(--color-white);
}

.faqs-search-input::placeholder {
    color: var(--color-gray);
}

.faqs-search-btn {
    background-color: var(--color-secondary);
    color: var(--color-black);
    border: none;
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    margin: 4px;
}

.faqs-search-btn:hover {
    background-color: var(--color-secondary-dark);
}

.faqs-search-btn i {
    font-size: 16px;
}

/* ===========================
   Bootstrap Accordion (Custom Style)
   =========================== */

.faqs-accordion {
    max-width: 900px;
    margin: 0 auto;
}

.faqs-accordion-item {
    border: none;
    margin-bottom: 0;
    border-radius: 0;
    overflow: visible;
    background-color: transparent;
    border-top: 1px solid var(--color-secondary);
    border-bottom: 1px solid var(--color-secondary);
}

.faqs-accordion-item:not(:first-child) {
    border-top: none;
}

.faqs-accordion-button {
    background-color: transparent;
    color: var(--color-black);
    font-size: 18px;
    font-weight: 600;
    padding: 20px 25px 20px 60px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    text-align: left;
    transition: all 0.3s ease;
}


.faqs-accordion-button:focus {
    box-shadow: none;
    border-color: var(--color-secondary);
}

.faqs-accordion-button::after {
    display: none;
}

/* Custom +/- Icons */
.faqs-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Accordion Body */
.faqs-accordion-body {
    background-color: transparent;
    /* Transparent */
    padding: 25px 25px 25px 60px;
    border: none;
}

.faqs-body-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 15px;
    font-family: var(--font-primary);
}

.faqs-body-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-gray-dark);
    margin: 0;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .faqs-main-section {
        padding: 60px 0;
    }

    .faqs-main-title {
        font-size: 40px;
        margin-bottom: 35px;
    }

    .faqs-search-wrapper {
        margin-bottom: 40px;
    }

    .faqs-search-input {
        padding: 13px 20px;
        font-size: 15px;
    }

    .faqs-search-btn {
        padding: 13px 25px;
        font-size: 13px;
    }

    .faqs-accordion-button {
        font-size: 17px;
        padding: 18px 20px 18px 55px;
    }

    .faqs-icon {
        left: 18px;
        font-size: 26px;
    }

    .faqs-accordion-body {
        padding: 20px 20px 20px 55px;
    }

    .faqs-body-title {
        font-size: 15px;
    }

    .faqs-body-text {
        font-size: 14px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .faqs-main-section {
        padding: 50px 0;
    }

    .faqs-main-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .faqs-search-wrapper {
        margin-bottom: 35px;
        padding: 0 15px;
    }

    .faqs-search-container {
        border-radius: 10px;
    }

    .faqs-search-input {
        padding: 12px 18px;
        font-size: 14px;
    }

    .faqs-search-btn {
        padding: 12px 20px;
        font-size: 12px;
    }

    .faqs-accordion {
        padding: 0 15px;
    }

    .faqs-accordion-item {
        margin-bottom: 0;
        /* No spacing */
    }

    .faqs-accordion-button {
        font-size: 15px;
        padding: 15px 15px 15px 50px;
    }

    .faqs-icon {
        left: 15px;
        font-size: 24px;
        width: 25px;
        height: 25px;
    }

    .faqs-accordion-body {
        padding: 18px 15px 18px 50px;
    }

    .faqs-body-title {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .faqs-body-text {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .faqs-main-title {
        font-size: 28px;
    }

    .faqs-search-input {
        padding: 10px 15px;
        font-size: 13px;
    }

    .faqs-search-btn {
        padding: 10px 18px;
        font-size: 11px;
    }

    .faqs-accordion-button {
        font-size: 14px;
        padding: 14px 12px 14px 45px;
    }

    .faqs-icon {
        left: 0;
        font-size: 22px;
    }

    .faqs-accordion-body {
        padding: 15px 12px 15px 45px;
    }

    .faqs-body-title {
        font-size: 13px;
    }

    .faqs-body-text {
        font-size: 12px;
    }
}

/* ===========================
   School Calendar Section
   =========================== */

.school-calendar-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* Title */
.school-calendar-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 30px;
}

/* Calendar Container */
.school-calendar-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--color-white);
    border-radius: 5px;
    padding: 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Calendar Header (Month Navigation) */
.school-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.school-calendar-month {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
}

.school-calendar-nav-btn {
    width: 45px;
    height: 45px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 20px;
}
 
.school-calendar-nav-btn:hover {
    background-color: #9A1F1F;
}

/* Calendar Grid */
.school-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    border: 1px solid var(--color-gray-lightest);
    border-radius: 6px;
}

/* Day Headers */
.school-calendar-day-header {
    padding: 15px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--color-black);
    border: 1px solid var(--color-gray-lightest);
    border-top: none;
}

.school-calendar-day-header:first-child {
    border-left: none;
}

.school-calendar-day-header:last-child {
    border-right: none;
}

/* Calendar Days */
.school-calendar-day {
    min-height: 120px;
    padding: 10px;
    border: 1px solid var(--color-gray-lightest);
    border-top: none;
    border-left: none;
    position: relative;
    background-color: var(--color-white);
}

.school-calendar-day:nth-child(7n+8) {
    border-left: none;
}


.school-calendar-day-number {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 5px;
    text-align: right;
}

/* Other Month Days (grayed out) */
.school-calendar-other-month {
    background-color: #FAFAFA;
}

.school-calendar-day {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.school-calendar-day:hover {
    background-color: #E2EDF9;
    /* Light blue */
}

.school-calendar-other-month .school-calendar-day-number {
    color: #CCC;
}

/* Event Badge */
.school-calendar-event {
    background-color: var(--color-secondary);
    color: var(--color-black);
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 5px;
    text-align: center;
}

.school-calendar-has-event {
    background-color: #F9F9F9;
}
/* Holiday / Day Off */
.school-calendar-holiday {
    background-color: #FFF3F3;
}
.school-calendar-holiday .school-calendar-day-number {
    color: #B92525;
    font-weight: 800;
}
.school-calendar-event-holiday {
    background-color: #B92525 !important;
    color: #fff !important;
}



.school-calendar-day:hover {
    background-color: #E2EDF9;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .school-calendar-section {
        padding: 60px 0;
    }

    .school-calendar-title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .school-calendar-container {
        padding: 30px 20px;
    }

    .school-calendar-month {
        font-size: 28px;
    }

    .school-calendar-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .school-calendar-day {
        min-height: 100px;
        padding: 8px;
    }

    .school-calendar-day-header {
        padding: 12px;
        font-size: 14px;
    }

    .school-calendar-day-number {
        font-size: 14px;
    }

    .school-calendar-event {
        font-size: 12px;
        padding: 5px 8px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {

    /* Calendar Grid - Change to List */
    .school-calendar-grid {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0;
        border: none;
    }

    .school-calendar-day:first-child {
        border-top: 1px solid var(--color-gray-lightest) !important;
    }

    /* Hide Day Headers (Sun, Mon, etc.) */
    .school-calendar-day-header {
        display: none !important;
    }

    /* Hide Other Month Days */
    .school-calendar-other-month {
        display: none !important;
    }

    /* Day Item - List Style */
    .school-calendar-day {
        display: flex;
        align-items: center;
        min-height: auto !important;
        padding: 15px 20px;
        border: none;
        border-bottom: 1px solid var(--color-gray-lightest);
        background-color: var(--color-white);
        position: relative;
    }

    .school-calendar-day:last-child {
        border-bottom: 1px solid var(--color-gray-lightest);
    }

    .school-calendar-grid {
        border-top: 1px solid var(--color-gray-lightest);
    }


    /* Day Number Container - Fixed Width */
    .school-calendar-day-number {
        display: flex;
        align-items: center;
        gap: 0;
        margin: 0;
        flex-shrink: 0;
    }

    /* Day Name Abbreviation - Fixed Width */
    .school-calendar-day-number::before {
        content: attr(data-day-abbr);
        font-size: 16px;
        font-weight: 600;
        color: var(--color-black);
        width: 60px;
        text-align: left;
        padding-right: 15px;
        margin-right: 15px;
        border-right: 2px solid var(--color-gray-lightest);
        flex-shrink: 0;
    }

    /* Day Number - Fixed Width */
    .school-calendar-day-number {
        font-size: 18px;
        font-weight: normal;
        color: var(--color-black);
        width: 40px;
        text-align: left;
        flex-shrink: 0;
    }

    .school-calendar-event {
        margin-left: auto;
        margin-top: 0;
        padding: 8px 15px;
        font-size: 13px;
        width: 140px;
        white-space: nowrap;
    }

    /* Has Event - Highlight */
    .school-calendar-has-event {
        background-color: #FFFBF5;
    }



}

/* ===========================
   Small Mobile (< 576px)
   =========================== */

@media (max-width: 575px) {

    .school-calendar-day {
        padding: 12px 15px;
    }

    .school-calendar-day-number::before {
        width: 50px;
        font-size: 14px;
        padding-right: 12px;
        margin-right: 12px;
    }

    .school-calendar-day-number {
        width: 35px;
        font-size: 16px;
    }

    .school-calendar-event {
        padding: 6px 12px;
        font-size: 12px;
    }

}

/* ===========================
   Contact Section
   =========================== */

.contact-main-section {
    background-color: #f4f4f4;
    padding: 80px 0;
}

/* Image */
.contact-image-wrapper {
    border-radius: 10px;
    overflow: hidden;
}

.contact-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Form */
.contact-form-wrapper {
    max-width: 650px;
}

.contact-form-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 30px;
}

/* Form Inputs */
.contact-form-input,
.contact-form-select,
.contact-form-textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid var(--color-white);
    border-radius: 10px;
    font-size: 16px;
    font-family: var(--font-primary);
    outline: none;
    transition: border-color 0.3s ease;
    background-color: var(--color-white);
    margin-bottom: 20px;
}

.contact-form-input:focus,
.contact-form-select:focus,
.contact-form-textarea:focus {
    border-color: var(--color-secondary);
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
    color: var(--color-gray);
}

/* Select Dropdown */
.contact-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px;
    cursor: pointer;
    color: var(--color-gray-darkest);
}

/* Textarea */
.contact-form-textarea {
    border-radius: 10px;
    resize: vertical;
    min-height: 130px;
}

/* Submit Button */
.contact-submit-btn {
    background-color: var(--color-secondary);
    color: var(--color-black);
    border: none;
    padding: 10px 26px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.contact-submit-btn:hover {
    background-color: var(--color-secondary-dark);
    transform: translateY(-2px);
}

.contact-submit-btn i {
    font-size: 20px;
}

.contact-form-input,
.contact-form-select,
.contact-form-textarea {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===========================
   Join Our Team Banner
   =========================== */

.join-team-banner {
    background-color: var(--color-secondary);
    padding: 60px 0;
}

.join-team-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin: 0;
}

.join-team-content {
    padding-left: 40px;
}

.join-team-text {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-black);
    margin-bottom: 10px;
}

.join-team-email {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
}

.join-team-link {
    color: var(--color-black);
    text-decoration: underline;
    font-weight: 700;
}

.join-team-link:hover {
    color: var(--color-primary);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .contact-main-section {
        padding: 60px 0;
    }

    .contact-form-title {
        font-size: 40px;
        margin-bottom: 25px;
    }

    .contact-form-input,
    .contact-form-select,
    .contact-form-textarea {
        padding: 13px 18px;
        font-size: 15px;
    }

    .contact-submit-btn {
        padding: 13px 35px;
        font-size: 16px;
    }

    .join-team-banner {
        padding: 50px 0;
    }

    .join-team-title {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .join-team-content {
        padding-left: 0;
    }

    .join-team-text {
        font-size: 18px;
    }

    .join-team-email {
        font-size: 16px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .contact-main-section {
        padding: 50px 0;
    }

    .contact-image-wrapper {
        border-radius: 10px;
        margin-bottom: 30px;
    }

    .contact-form-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .contact-form-input,
    .contact-form-select,
    .contact-form-textarea {
        padding: 12px 16px;
        font-size: 14px;
    }

    .contact-form-textarea {
        min-height: 100px;
    }

    .contact-submit-btn {
        padding: 12px 30px;
        font-size: 15px;
        width: 100%;
        justify-content: center;
    }

    .join-team-banner {
        padding: 40px 0;
        text-align: center;
    }

    .join-team-title {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .join-team-text {
        font-size: 16px;
    }

    .join-team-email {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .contact-form-title {
        font-size: 28px;
    }

    .contact-form-input,
    .contact-form-select,
    .contact-form-textarea {
        padding: 10px 15px;
        font-size: 13px;
    }

    .contact-submit-btn {
        font-size: 14px;
    }

    .join-team-title {
        font-size: 32px;
    }

    .join-team-text {
        font-size: 15px;
    }

    .join-team-email {
        font-size: 14px;
    }
}

/* ===========================
   Parents' Council Top Section
   =========================== */

.parents-council-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* Image */
.parents-council-image-wrapper {
    border-radius: 0px 0px 0px 10px;
    overflow: hidden;
}

.parents-council-image {
    width: 100%;
    height: auto;
    display: block;
      border-radius: 0 10px 10px 0;
}

/* Content */
.parents-council-content {
    max-width: 650px;
}

.parents-council-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 10px;
    line-height: 1.2;
}

.parents-council-subtitle {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 5px;
    font-family: var(--font-primary);
}

.parents-council-description {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-black);
    margin-bottom: 15px;
}

.parents-council-subheading {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 15px;
    font-family: var(--font-primary);
}

/* Bullet List */
.parents-council-list {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
}

.parents-council-list li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-black);
    padding-left: 25px;
    margin-bottom: 5px;
    position: relative;
}

.parents-council-list li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-size: 18px;
}

.parents-council-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-black);
    margin: 0;
}

/* ===========================
   Members Table Section
   =========================== */

.parents-council-members {
    background-color: var(--color-bg-light);
    padding: 0 0 80px;
}

.parents-council-members-intro {
    font-size: 25px;
    font-weight: 700;
    color: var(--color-black);
    text-align: center;
    margin-bottom: 40px;
    font-family: var(--font-primary);
    line-height: 1.4;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Table */
.parents-council-table-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.parents-council-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-white);
}

.parents-council-table thead {
    background-color: var(--color-bg-light);
}

.parents-council-table thead th {
    padding: 20px;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
}


.parents-council-table tbody tr:nth-child(even) {
    background-color: var(--color-bg-light);
}

.parents-council-table tbody td {
    padding: 20px;
    font-size: 15px;
    color: var(--color-black);
    line-height: 1.6;
}

.parents-council-table tbody td:first-child {
    font-weight: 700;
    color: var(--color-black);
    width: 25%;
}

.parents-council-table tbody td:last-child {
    width: 75%;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .parents-council-section {
        padding: 60px 0;
    }

    .parents-council-title {
        font-size: 40px;
    }

    .parents-council-subtitle {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .parents-council-description,
    .parents-council-text,
    .parents-council-list li {
        font-size: 15px;
    }

    .parents-council-subheading {
        font-size: 17px;
    }

    .parents-council-members {
        padding: 50px 0 60px;
    }

    .parents-council-members-intro {
        font-size: 24px;
        margin-bottom: 35px;
    }

    .parents-council-table thead th {
        font-size: 14px;
        padding: 18px;
    }

    .parents-council-table tbody td {
        padding: 18px;
        font-size: 14px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .parents-council-section {
        padding: 50px 0;
    }

    .parents-council-image-wrapper {
        border-radius: 10px;
        margin-bottom: 30px;
    }

    .parents-council-title {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .parents-council-subtitle {
        font-size: 20px;
        margin-bottom: 18px;
    }

    .parents-council-description,
    .parents-council-text,
    .parents-council-list li {
        font-size: 14px;
    }

    .parents-council-subheading {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .parents-council-list li {
        padding-left: 20px;
        margin-bottom: 8px;
    }

    .parents-council-members {
        padding: 40px 0 50px;
    }

    .parents-council-members-intro {
        font-size: 20px;
        margin-bottom: 30px;
        padding: 0 15px;
    }

    .parents-council-table-wrapper {
        padding: 0 15px;
    }

    .parents-council-table {
        display: block;
        overflow-x: auto;
    }

    .parents-council-table thead th {
        font-size: 13px;
        padding: 15px;
    }

    .parents-council-table tbody td {
        padding: 15px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .parents-council-title {
        font-size: 28px;
    }

    .parents-council-subtitle {
        font-size: 18px;
    }

    .parents-council-description,
    .parents-council-text,
    .parents-council-list li {
        font-size: 13px;
    }

    .parents-council-subheading {
        font-size: 15px;
    }

    .parents-council-members-intro {
        font-size: 18px;
    }

    .parents-council-table thead th {
        font-size: 12px;
        padding: 12px;
    }

    .parents-council-table tbody td {
        padding: 12px;
        font-size: 12px;
    }
}

/* ===========================
   Alumni Application Form Section
   =========================== */

.alumni-form-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Left Side - Content & Image
   =========================== */

.alumni-form-left-content {
    max-width: 500px;
}

.alumni-form-heading {
    font-size: 25px;
    font-weight: 700;
    color: var(--color-black);
    font-family: var(--font-primary);
    margin-bottom: 15px;
    line-height: 1.3;
}

.alumni-form-description {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-dark);
    margin-bottom: 20px;
}

.alumni-form-email-link {
    color: var(--color-black);
    text-decoration: none;
    font-weight: 600;
}

.alumni-form-email-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.alumni-form-image-wrapper {
    margin-top: 40px;
    border-radius: 15px;
    overflow: hidden;
}

.alumni-form-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ===========================
   Right Side - Application Form
   =========================== */

.alumni-form-wrapper {
    border-radius: 15px;
    padding: 40px;
    padding-top: 0;
}

.alumni-form-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 20px;
}

/* Form Groups */
.alumni-form-group {
    margin-bottom: 20px;
}

/* Form Inputs */
.alumni-form-input {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid var(--color-black);
    border-radius: 10px;
    font-size: 16px;
    font-family: var(--font-primary);
    outline: none;
    transition: border-color 0.3s ease;
    background-color: var(--color-bg-light);
}

.alumni-form-input:focus {
    border-color: var(--color-primary);
}

.alumni-form-input::placeholder {
    color: var(--color-gray);
}

/* File Upload */
.alumni-form-file-upload {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 20px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    position: relative;
}

.alumni-form-file-upload:hover {
    border-color: var(--color-primary);
}

.alumni-form-file-icon {
    font-size: 30px;
    color: var(--color-primary);
    transform: rotate(-45deg);
}

.alumni-form-file-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.alumni-form-file-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
}

.alumni-form-file-info {
    font-size: 13px;
    color: var(--color-gray);
}

.alumni-form-file-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    left: 0;
    top: 0;
}

/* Submit Button */
.alumni-form-submit-btn {
    width: 50%;
    background-color: var(--color-secondary);
    color: var(--color-black);
    border: none;
    padding: 13px 25px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.alumni-form-submit-btn:hover {
    background-color: var(--color-secondary-dark);
    transform: translateY(-2px);
}

.alumni-form-submit-btn i {
    font-size: 20px;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .alumni-form-section {
        padding: 60px 0;
    }

    .alumni-form-heading {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .alumni-form-description {
        font-size: 15px;
    }

    .alumni-form-image-wrapper {
        margin-top: 30px;
    }

    .alumni-form-wrapper {
        padding: 35px;
        margin-top: 40px;
    }

    .alumni-form-title {
        font-size: 40px;
        margin-bottom: 25px;
    }

    .alumni-form-input {
        padding: 13px 18px;
        font-size: 15px;
    }

    .alumni-form-file-upload {
        padding: 13px 18px;
    }

    .alumni-form-file-label {
        font-size: 15px;
    }

    .alumni-form-submit-btn {
        padding: 16px 35px;
        font-size: 16px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .alumni-form-section {
        padding: 50px 0;
    }

    .alumni-form-heading {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .alumni-form-description {
        font-size: 14px;
    }

    .alumni-form-image-wrapper {
        margin-top: 25px;
        border-radius: 10px;
    }

    .alumni-form-wrapper {
        padding: 0 !important;
        margin-top: 0 !important;
        border-radius: 10px;
    }

    .alumni-form-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .alumni-form-group {
        margin-bottom: 15px;
    }

    .alumni-form-input {
        padding: 12px 16px;
        font-size: 14px;
    }

    .alumni-form-file-upload {
        padding: 12px 16px;
    }

    .alumni-form-file-icon {
        font-size: 20px;
    }

    .alumni-form-file-label {
        font-size: 14px;
    }

    .alumni-form-file-info {
        font-size: 12px;
    }

    .alumni-form-submit-btn {
        padding: 15px 30px;
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .alumni-form-heading {
        font-size: 24px;
    }

    .alumni-form-description {
        font-size: 13px;
    }

    .mt-sm-4 {
        margin-top: 0;
    }

    .alumni-form-title {
        font-size: 35px;
    }

    .alumni-form-input {
        padding: 10px 15px;
        font-size: 13px;
    }

    .alumni-form-file-upload {
        padding: 10px 15px;
        gap: 10px;
    }

    .alumni-form-file-label {
        font-size: 13px;
    }

    .alumni-form-submit-btn {
        font-size: 14px;
        width: 100% !important;
    }
}

/* ===========================
   Top Graduates Section
   =========================== */


.top-graduates-section {
    background-color: var(--color-bg-light);
    padding-bottom: 80px;
}

/* Title */
.top-graduates-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 40px;
}

/* ===========================
   Graduate Cards
   =========================== */

.top-graduates-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 353px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Image */
.top-graduates-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.top-graduates-card:hover .top-graduates-image {
    transform: scale(1.05);
}

/* Overlay */
.top-graduates-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    padding: 25px 20px;
    color: var(--color-white);
}

.top-graduates-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 8px;
    font-family: var(--font-primary);
}

.top-graduates-title-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-white);
    margin: 0;
    font-weight: 400;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .top-graduates-section {
        padding: 60px 0;
    }

    .top-graduates-title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .top-graduates-card {
        height: 350px;
    }

    .top-graduates-name {
        font-size: 20px;
        margin-bottom: 7px;
    }

    .top-graduates-title-text {
        font-size: 13px;
    }

    .top-graduates-overlay {
        padding: 22px 18px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .top-graduates-section {
        padding: 50px 0;
    }

    .top-graduates-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .top-graduates-card {
        height: 320px;
    }

    .top-graduates-name {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .top-graduates-title-text {
        font-size: 12px;
    }

    .top-graduates-overlay {
        padding: 20px 16px;
    }
}

@media (max-width: 576px) {
    .top-graduates-title {
        font-size: 28px;
    }

    .top-graduates-card {
        height: 300px;
    }

    .top-graduates-name {
        font-size: 17px;
    }

    .top-graduates-title-text {
        font-size: 11px;
    }

    .top-graduates-overlay {
        padding: 18px 15px;
    }
}

/* ========================================
   SECTION 1: Teachers with Tabs
   ======================================== */

.teachers-main-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* Horizontal Tabs */
.teachers-tabs-wrapper {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--color-gray-lightest);
    width: fit-content;
    margin: 0 auto;
}

.teachers-tab {
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 18px 30px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: -3px;
}

.teachers-tab:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-secondary);
}

.teachers-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-secondary);
}

/* Tab Content */
.teachers-tab-content-wrapper {
    background-color: var(--color-bg-light);
    border-radius: 10px;
    padding: 40px;
}

.teachers-tab-content {
    display: none;
}

.teachers-tab-content.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Content Header */
.teachers-content-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.teachers-content-title {
    font-size: 25px;
    font-weight: 700;
    color: var(--color-black);
    font-family: var(--font-primary);
    margin-bottom: 20px;
    line-height: 1.3;
}

.teachers-content-description {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-dark);
    margin-bottom: 15px;
}

.teachers-content-description:last-child {
    margin-bottom: 0;
}

/* ========================================
   SECTION 2: Draggable Carousel
   ======================================== */

.teachers-carousel-section {
    background-color: var(--color-bg-light);
    padding: 20px 0;
    overflow: hidden;
}

/* Draggable Carousel Container */
.teachers-carousel-container {
    width: 100%;
    overflow: hidden;
    cursor: grab;
    position: relative;
}

.teachers-carousel-container:active {
    cursor: grabbing;
}

.teachers-carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.teachers-carousel-track.dragging {
    transition: none;
}

/* Teacher Cards */
.teachers-carousel-card {
    flex: 0 0 240px;
    height: 380px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.teachers-carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    pointer-events: none;
}

.teachers-carousel-card:hover {
    transform: scale(1.05);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Overlay */
.teachers-carousel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    padding: 25px 20px;
    color: var(--color-white);
    pointer-events: none;
}

.teachers-carousel-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 5px;
    font-family: var(--font-primary);
}

.teachers-carousel-title {
    font-size: 14px;
    color: var(--color-white);
    margin: 0;
    font-weight: 400;
}

/* Progress Bar */
.teachers-carousel-progress-wrapper {
    width: 100%;
    margin: 40px 0 0;
    padding: 0;
}

.teachers-carousel-progress-bar {
    width: 100%;
    height: 3px;
    background-color: var(--color-gray-lightest);
    position: relative;
    cursor: pointer;
    border-radius: 10px;
}

.teachers-carousel-progress-fill {
    height: 100%;
    background-color: var(--color-primary);
    width: 180px;
    min-width: 180px;
    width: 0%;
    transition: width 0.2s ease-out;
    pointer-events: none;
    border-radius: 10px;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {

    /* Section 1 - Tabs */
    .teachers-main-section {
        padding: 60px 0;
    }

    .teachers-tab {
        padding: 16px 25px;
        font-size: 13px;
    }

    .teachers-tab-content-wrapper {
        padding: 35px 30px;
    }

    .teachers-content-title {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .teachers-content-description {
        font-size: 15px;
    }

    /* Section 2 - Carousel */
    .teachers-carousel-section {
        padding: 60px 0;
    }

    .teachers-carousel-card {
        flex: 0 0 280px;
        height: 340px;
    }

    .teachers-carousel-track {
        gap: 15px;
    }

    .teachers-carousel-name {
        font-size: 18px;
    }

    .teachers-carousel-title {
        font-size: 13px;
    }

    .teachers-carousel-progress-wrapper {
        margin-top: 35px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {

    /* Section 1 - Tabs */
    .teachers-main-section {
        padding: 50px 0;
    }

    .teachers-tabs-wrapper {
        border-bottom: none;
        margin-bottom: 30px;
    }

    .teachers-tab {
        padding: 15px 20px;
        font-size: 12px;
        border-bottom: 2px solid var(--color-gray-lightest);
        margin-bottom: 0;
    }

    .teachers-tab.active {
        border-bottom-color: var(--color-primary);
    }

    .teachers-tab-content-wrapper {
        padding: 30px 20px;
    }

    .teachers-content-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .teachers-content-description {
        font-size: 14px;
    }

    /* Section 2 - Carousel */
    .teachers-carousel-section {
        padding: 50px 0;
    }

    .teachers-carousel-card {
        flex: 0 0 250px;
        height: 320px;
    }

    .teachers-carousel-track {
        gap: 12px;
    }

    .teachers-carousel-name {
        font-size: 17px;
    }

    .teachers-carousel-title {
        font-size: 12px;
    }

    .teachers-carousel-overlay {
        padding: 20px 18px;
    }

    .teachers-carousel-progress-wrapper {
        margin-top: 30px;
    }

    .teachers-carousel-progress-bar {
        height: 3px;
    }
}

@media (max-width: 576px) {

    /* Section 1 - Tabs */
    .teachers-tab {
        padding: 12px 15px;
        font-size: 11px;
    }

    .teachers-content-title {
        font-size: 22px;
    }

    .teachers-content-description {
        font-size: 13px;
    }

    /* Section 2 - Carousel */
    .teachers-carousel-card {
        flex: 0 0 220px;
        height: 300px;
    }

    .teachers-carousel-track {
        gap: 10px;
    }
}

/* ===========================
   School Doctor & Psychologist Section
   =========================== */
.school-staff-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Staff Row
   =========================== */

.school-staff-row {
    margin-bottom: 80px;
}

.school-staff-row:last-child {
    margin-bottom: 0;
}

/* Reverse layout for second row */
.school-staff-row-reverse {
    flex-direction: row-reverse;
}

/* ===========================
   Image Section
   =========================== */

.school-staff-image-wrapper {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 400px;
}

.school-staff-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.school-staff-image-wrapper:hover .school-staff-image {
    transform: scale(1.05);
}

/* Image Overlay */
.school-staff-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    padding: 30px 25px;
    color: var(--color-white);
}

.school-staff-image-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 5px;
    font-family: var(--font-primary);
}

.school-staff-image-title {
    font-size: 16px;
    color: var(--color-white);
    margin: 0;
    font-weight: 400;
}

/* ===========================
   Content Section
   =========================== */

@media (min-width: 768px) {
    .teachers-tabs-wrapper {
        display: flex;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {

    /* Tabs Container - Horizontal Scroll */
    .teachers-tabs-wrapper {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        /* ← Horizontal scroll */
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        /* ← Smooth scroll iOS */
        padding: 10px 15px;
        margin: 0 -15px;
        /* Extend to edges */

        /* Hide scrollbar but keep functionality */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    /* Hide scrollbar WebKit (Chrome, Safari) */
    .teachers-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* Tab Button - Don't Shrink */
    .teachers-tab {
        flex-shrink: 0;
        white-space: nowrap;
        min-width: fit-content;
        padding: 12px 20px;
        font-size: 14px;
    }

}

/* ===========================
   Small Mobile (< 576px)
   =========================== */

@media (max-width: 575px) {

    .teachers-tabs-wrapper {
        padding: 8px 12px;
        gap: 8px;
    }

    .teachers-tab {
        padding: 10px 16px;
        font-size: 13px;
    }

}


.school-staff-content {
    padding: 0;
}

.school-staff-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin-bottom: 25px;
    line-height: 1.2;
}

.school-staff-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-black);
    margin-bottom: 20px;
}

.school-staff-text:last-child {
    margin-bottom: 0;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .school-staff-section {
        padding: 60px 0;
    }

    .school-staff-row {
        margin-bottom: 60px;
    }

    .school-staff-row-reverse {
        flex-direction: column;
    }

    .school-staff-image-wrapper {
        height: 450px;
        margin-bottom: 30px;
    }

    .school-staff-title {
        font-size: 40px;
        margin-bottom: 20px;
    }

    .school-staff-text {
        font-size: 15px;
    }

    .school-staff-image-name {
        font-size: 22px;
    }

    .school-staff-image-title {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .school-staff-section {
        padding: 50px 0;
    }

    .school-staff-row {
        margin-bottom: 50px;
    }

    .school-staff-image-wrapper {
        height: 400px;
        border-radius: 10px;
        margin-bottom: 30px;
    }

    .school-staff-title {
        font-size: 32px;
        margin-bottom: 18px;
    }

    .school-staff-text {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .school-staff-image-overlay {
        padding: 25px 20px;
    }

    .school-staff-image-name {
        font-size: 20px;
    }

    .school-staff-image-title {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .school-staff-image-wrapper {
        height: 350px;
    }

    .school-staff-title {
        font-size: 28px;
    }

    .school-staff-text {
        font-size: 13px;
    }

    .school-staff-image-name {
        font-size: 18px;
    }

    .school-staff-image-title {
        font-size: 13px;
    }
}

/* ========================================
   PART 1: Sisters Photo Grid
   ======================================== */

.sisters-grid-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

.sisters-grid-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 350px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sisters-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.sisters-grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.sisters-grid-card:hover .sisters-grid-image {
    transform: scale(1.05);
}

.sisters-grid-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    padding: 25px 20px;
    color: var(--color-white);
}

.sisters-grid-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 5px;
    font-family: var(--font-primary);
}

.sisters-grid-title {
    font-size: 14px;
    color: var(--color-white);
    margin: 0;
    font-weight: 400;
}

/* ========================================
   PART 2: Congregation Info
   Prefix: sisters-congregation-
   ======================================== */

.sisters-congregation-section {
    background-color: #f4f4f4;
    padding: 40px 0;
}

.sisters-grid-section .row {
    justify-content: center;
}

.sisters-congregation-image-wrapper {
    border-radius: 10px;
    position: relative;
    z-index: 111;
}

.sisters-congregation-image {
    width: 100%;
    height: auto;
    display: block;
      border-radius: 0 10px 10px 0;
}

.sisters-congregation-content {
    padding: 0px 80px 80px 0;
}

.sisters-congregation-intro {
    font-size: 18px;
    color: var(--color-black);
}

.sisters-congregation-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    font-family: var(--font-primary);
    margin-bottom: 10px;
    line-height: 1;
}

.sisters-congregation-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-black);
    margin-bottom: 10px;
}

.sisters-congregation-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.sisters-congregation-list li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-black);
    padding-left: 25px;
    margin-bottom: 4px;
    position: relative;
}

.sisters-congregation-list li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-size: 18px;
}

/* ========================================
   PART 3: History with Vertical Tabs
   Prefix: sisters-history-
   ======================================== */

.sisters-history-section {
    background-color: var(--color-white);
    padding: 80px 0;
}

/* Vertical Tabs */
.sisters-history-tabs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sisters-history-tab {
    width: 100%;
    background-color: var(--color-bg-light);
    border: none;
    border-left: 4px solid transparent;
    padding: 20px 25px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--color-gray-lightest);
}

.sisters-history-tab:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.sisters-history-tab:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom: none;
}

.sisters-history-tab:hover {
    background-color: #FFF8E8;
    border-left-color: var(--color-secondary);
}

.sisters-history-tab.active {
    background-color: #FFF8E8;
    border-left-color: var(--color-primary);
}

.sisters-history-tab-icon {
    font-size: 12px;
    color: var(--color-secondary);
    flex-shrink: 0;
}

.sisters-history-tab.active .sisters-history-tab-icon {
    color: var(--color-primary);
}

.sisters-history-tab-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.4;
    text-align: left;
}

.sisters-history-tab.active .sisters-history-tab-text {
    color: var(--color-primary);
    font-weight: 700;
}

/* History Content */
.sisters-history-content {
    display: none;
}

.sisters-history-content.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sisters-history-image-wrapper {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
}

.sisters-history-image {
    width: 100%;
    height: auto;
    display: block;
}

.sisters-history-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-black);
    font-family: var(--font-primary);
    margin-bottom: 20px;
}

.sisters-history-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-dark);
    margin-bottom: 20px;
}

.sisters-history-text:last-child {
    margin-bottom: 0;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {

    /* Photo Grid */
    .sisters-grid-section {
        padding: 60px 0;
    }

    .sisters-grid-card {
        height: 320px;
    }

    /* Congregation */
    .sisters-congregation-section {
        padding: 60px 0;
    }

    .sisters-congregation-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .sisters-congregation-text,
    .sisters-congregation-list li {
        font-size: 15px;
    }

    /* History */
    .sisters-history-section {
        padding: 60px 0;
    }

    .sisters-history-tab {
        padding: 18px 20px;
    }

    .sisters-history-tab-text {
        font-size: 15px;
    }

    .sisters-history-title {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .sisters-history-text {
        font-size: 15px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {

    .sisters-congregation-content {
        padding: 0px 4px 0 10px !important;
    }

    /* Photo Grid */
    .sisters-grid-section {
        padding: 50px 0;
    }

    .sisters-grid-card {
        height: 300px;
    }

    .sisters-grid-name {
        font-size: 18px;
    }

    .sisters-grid-title {
        font-size: 13px;
    }

    /* Congregation */
    .sisters-congregation-section {
        padding: 60px 0;
    }

    .sisters-congregation-image-wrapper {
        margin-bottom: 30px;
    }

    .sisters-congregation-title {
        font-size: 35px;
        margin-bottom: 18px;
    }

    .sisters-congregation-text,
    .sisters-congregation-list li {
        font-size: 14px;
    }

    /* History */
    .sisters-history-section {
        padding: 50px 0;
    }

    .sisters-history-tabs-wrapper {
        margin-bottom: 30px;
    }

    .sisters-history-tab {
        padding: 16px 18px;
    }

    .sisters-history-tab-text {
        font-size: 14px;
    }

    .sisters-history-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .sisters-history-text {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .sisters-grid-card {
        height: 280px;
    }

    .sisters-congregation-title {
        font-size: 35px;
    }

    .sisters-history-title {
        font-size: 22px;
    }
}

/* ===========================
   Music Updates Carousel
   =========================== */

.music-updates-section {
    background-color: var(--color-bg-light);
    padding-bottom: 80px;
    overflow: hidden;
}

/* Title */
.music-updates-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 50px;
}

/* ===========================
   Draggable Carousel Container
   =========================== */

.music-updates-container {
    width: 100%;
    cursor: grab;
    position: relative;
}

.music-updates-container:active {
    cursor: grabbing;
}

.music-updates-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.music-updates-track.dragging {
    transition: none;
}

/* ===========================
   Music Update Cards
   New Dimensions from Image
   =========================== */

.music-updates-card {
    flex: 0 0 409px;
    /* Width matching the image */
    height: 409px;
    /* Height matching the image */
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    text-decoration: none;
    color: inherit;
}

.music-updates-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.music-updates-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    pointer-events: none;
}

.music-updates-card:hover .music-updates-image {
    transform: scale(1.05);
}

/* Overlay */
.music-updates-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    padding: 25px 20px;
    color: var(--color-white);
    pointer-events: none;
}

/* Badge */
.music-updates-badge {
    background-color: var(--color-secondary);
    color: var(--color-black);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Date */
.music-updates-date {
    font-size: 13px;
    color: var(--color-white);
    margin-bottom: 8px;
    font-weight: 400;
}

/* Card Title */
.music-updates-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    line-height: 1.4;
    font-family: var(--font-primary);
}

/* ===========================
   Progress Bar
   =========================== */

.music-updates-progress-wrapper {
    width: 100%;
    margin: 40px 0 0;
    padding: 0;
}

.music-updates-progress-bar {
    width: 100%;
    height: 3px;
    background-color: var(--color-gray-lightest);
    position: relative;
    cursor: pointer;
    border-radius: 10px;
}

.music-updates-progress-fill {
    height: 100%;
    background-color: var(--color-primary);
    width: 120px;
    min-width: 120px;
    transition: width 0.2s ease-out;
    pointer-events: none;
    border-radius: 10px;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .music-updates-section {
        padding: 60px 0;
    }

    .music-updates-title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .music-updates-card {
        flex: 0 0 280px;
        height: 310px;
    }

    .music-updates-track {
        gap: 15px;
    }

    .music-updates-card-title {
        font-size: 15px;
    }

    .music-updates-progress-wrapper {
        margin-top: 35px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .music-updates-section {
        padding: 50px 0;
    }

    .music-updates-title {
        font-size: 32px;
        margin-bottom: 30px;
        text-align: left;
    }

    .music-updates-card {
        flex: 0 0 250px;
        height: 290px;
    }

    .music-updates-track {
        gap: 12px;
    }

    .music-updates-card-title {
        font-size: 14px;
    }

    .music-updates-overlay {
        padding: 20px 18px;
    }

    .music-updates-badge {
        font-size: 11px;
        padding: 5px 10px;
    }

    .music-updates-date {
        font-size: 12px;
    }

    .music-updates-progress-wrapper {
        margin-top: 30px;
    }

    .music-updates-progress-bar {
        height: 3px;
    }
}

@media (max-width: 576px) {
    .music-updates-card {
        flex: 0 0 220px;
        height: 270px;
    }

    .music-updates-track {
        gap: 10px;
    }

    .music-updates-card-title {
        font-size: 13px;
    }
}

/* ===========================
   Music Updates Carousel
   =========================== */

.music-updates-section {
    background-color: var(--color-bg-light);
    padding-bottom: 80px;
    overflow: hidden;
}

/* Title */
.music-updates-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 50px;
}

/* ===========================
   Draggable Carousel Container
   =========================== */

.music-updates-container {
    width: 100%;
    cursor: grab;
    position: relative;
}

.music-updates-container:active {
    cursor: grabbing;
}

.music-updates-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.music-updates-track.dragging {
    transition: none;
}

/* ===========================
   Music Update Cards
   New Dimensions from Image
   =========================== */

.music-updates-card {
    flex: 0 0 409px;
    height: 409px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.music-updates-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.music-updates-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    pointer-events: none;
}

.music-updates-card:hover .music-updates-image {
    transform: scale(1.05);
}

/* Overlay */
.music-updates-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    padding: 25px 20px;
    color: var(--color-white);
    pointer-events: none;
}


/* ===========================
   Desktop & All Screens
   =========================== */

.music-updates-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    padding: 25px 20px;
    color: var(--color-white);
    pointer-events: none;
}

.music-updates-badge {
    position: absolute;
    top: 18px;
    left: 20px;
    display: inline-block;
    background-color: var(--color-secondary);
    color: var(--color-black);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 30px;
    text-transform: uppercase;
    z-index: 10;
    pointer-events: none;
}

.music-updates-date {
    font-size: 13px;
    color: var(--color-white);
    margin-bottom: 8px;
    font-weight: 400;
}

.music-updates-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    line-height: 1.4;
    font-family: var(--font-primary);
}

/* ===========================
   Tablet (< 992px)
   =========================== */

@media (max-width: 991px) {

    .music-updates-badge {
        top: 18px;
        left: 18px;
        font-size: 11px;
        padding: 5px 11px;
    }

}

@media (max-width: 991px) {
    .music-updates-section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .music-updates-card {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .music-updates-image {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .collage-item img {
        max-width: 100% !important;
    }
}

/* ===========================
   Mobile (< 768px)
   =========================== */

@media (max-width: 767px) {

    .music-updates-badge {
        top: 15px;
        left: 15px;
        font-size: 11px;
        padding: 5px 10px;
    }

    .music-updates-overlay {
        padding: 20px 15px;
    }

}

/* ===========================
   Small Mobile (< 576px)
   =========================== */

@media (max-width: 575px) {

    .music-updates-badge {
        top: 12px;
        left: 12px;
        font-size: 10px;
        padding: 4px 9px;
    }

}

.music-updates-date {
    font-size: 13px;
    color: var(--color-white);
    margin-bottom: 8px;
    font-weight: 400;
}

.music-updates-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    line-height: 1.4;
    font-family: var(--font-primary);
}

/* ===========================
   Progress Bar
   =========================== */

.music-updates-progress-wrapper {
    width: 100%;
    margin: 40px 0 0;
    padding: 0;
}

.music-updates-progress-bar {
    width: 100%;
    height: 3px;
    border-radius: 10px;
    background-color: var(--color-gray-lightest);
    position: relative;
    cursor: pointer;
}

.music-updates-progress-fill {
    height: 100%;
    background-color: var(--color-primary);
    width: 120px;
    min-width: 120px;
    transition: width 0.2s ease-out;
    pointer-events: none;
    border-radius: 10px;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .music-updates-section {
        padding: 60px 0;
    }

    .music-updates-title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .music-updates-card {
        flex: 0 0 280px;
        height: 310px;
    }

    .music-updates-track {
        gap: 15px;
    }

    .music-updates-card-title {
        font-size: 15px;
    }

    .music-updates-progress-wrapper {
        margin-top: 35px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .music-updates-section {
        padding: 50px 0;
    }

    .music-updates-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .music-updates-card {
        flex: 0 0 250px;
        height: 290px;
    }

    .music-updates-track {
        gap: 12px;
    }

    .music-updates-card-title {
        font-size: 14px;
    }

    .music-updates-overlay {
        padding: 20px 18px;
    }

    .music-updates-badge {
        font-size: 11px;
        padding: 5px 10px;
    }

    .music-updates-date {
        font-size: 12px;
    }

    .music-updates-progress-wrapper {
        margin-top: 30px;
    }

    .music-updates-progress-bar {
        height: 3px;
    }
}

@media (max-width: 576px) {
    .music-updates-card {
        flex: 0 0 220px;
        height: 270px;
    }

    .music-updates-track {
        gap: 10px;
    }

    .music-updates-card-title {
        font-size: 13px;
    }
}

/* ===========================
   Theater Leaders Section
   =========================== */

.theater-leaders-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Theater Leader Cards
   =========================== */

.theater-leader-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 450px;
}

.theater-leader-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Image */
.theater-leader-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

.theater-leader-card:hover .theater-leader-image img {
    transform: scale(1.08);
}

/* Content Overlay */
.theater-leader-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 70%, transparent 100%);
    padding: 30px 25px;
    color: var(--color-white);
}

/* Category */
.theater-leader-category {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-white);
    margin-bottom: 8px;
    opacity: 0.9;
}

/* Title */
.theater-leader-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--color-white);
    margin: 0;
    line-height: 1.3;
    font-family: var(--font-primary);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .theater-leaders-section {
        padding: 60px 0;
    }

    .theater-leader-card {
        height: 320px;
    }

    .theater-leader-title {
        font-size: 20px;
    }

    .theater-leader-content {
        padding: 25px 20px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .theater-leaders-section {
        padding: 0;
    }

    .theater-leader-card {
        height: 300px;
        margin-bottom: 20px;
    }

    .theater-leader-title {
        font-size: 18px;
    }

    .theater-leader-category {
        font-size: 13px;
    }

    .theater-leader-content {
        padding: 20px 18px;
    }
}

@media (max-width: 576px) {
    .theater-leader-card {
        height: 280px;
    }

    .theater-leader-title {
        font-size: 16px;
    }
}

/* ===========================
   2025 Performances Carousel
   =========================== */

.performances-carousel-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
    overflow: hidden;
}

/* Title */
.performances-carousel-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 50px;
}

/* ===========================
   Draggable Carousel Container
   =========================== */

.performances-carousel-container {
    width: 100%;
    overflow: hidden;
    cursor: grab;
    position: relative;
}

.performances-carousel-container:active {
    cursor: grabbing;
}

.performances-carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.performances-carousel-track.dragging {
    transition: none;
}

/* ===========================
   Performance Cards
   Wider cards from image (approximately 300px x 230px)
   =========================== */

.performances-carousel-card {
    flex: 0 0 300px;
    /* Width from image */
    height: 230px;
    /* Height from image */
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.performances-carousel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.performances-carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    pointer-events: none;
}

.performances-carousel-card:hover .performances-carousel-image {
    transform: scale(1.05);
}

/* ===========================
   Progress Bar
   =========================== */

.performances-carousel-progress-wrapper {
    width: 100%;
    margin: 40px 0 0;
    padding: 0;
}

.performances-carousel-progress-bar {
    width: 100%;
    height: 3px;
    border-radius: 10px;
    background-color: var(--color-gray-lightest);
    position: relative;
    cursor: pointer;
}

.performances-carousel-progress-fill {
    height: 100%;
    background-color: var(--color-primary);
    width: 120px;
    min-width: 120px;
    border-radius: 10px;
    transition: width 0.2s ease-out;
    pointer-events: none;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .performances-carousel-section {
        padding: 60px 0;
    }

    .performances-carousel-title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .performances-carousel-card {
        flex: 0 0 280px;
        height: 210px;
    }

    .performances-carousel-track {
        gap: 15px;
    }

    .performances-carousel-progress-wrapper {
        margin-top: 35px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .performances-carousel-section {
        padding: 50px 0;
    }

    .performances-carousel-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .performances-carousel-card {
        flex: 0 0 250px;
        height: 190px;
    }

    .performances-carousel-track {
        gap: 12px;
    }

    .performances-carousel-progress-wrapper {
        margin-top: 30px;
    }

    .performances-carousel-progress-bar {
        height: 3px;
    }
}

@media (max-width: 576px) {
    .performances-carousel-card {
        flex: 0 0 220px;
        height: 170px;
    }

    .performances-carousel-track {
        gap: 10px;
    }
}

/* ===========================
   Study Main Content Section
   =========================== */
.study-main-content-section {
    background-color: #f4f4f4;
    padding: 80px 0;
}

/* Images */
.study-main-image-wrapper {
    position: relative;
    overflow: hidden;
}

.img-fluid.study-main-image.conduct-image {
  border-radius: 0 10px 10px 0 !important;
}

.img-fluid.study-main-image.ipad-image {
  border-radius: 0 10px 10px 0 !important;
}

.study-main-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}


/* Content */
.study-main-content {
    padding: 0 60px;
}

.study-main-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    line-height: 1.2;
    margin-bottom: 20px;
}

.study-main-subtitle {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 20px;
    line-height: 1.4;
}

.study-main-text {
    font-size: 16px;
    color: var(--color-gray-dark);
    line-height: 1.8;
    margin-bottom: 20px;
}

.study-main-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.study-main-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--color-gray-dark);
    line-height: 1.8;
}

.study-main-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-black);
    font-weight: 700;
    font-size: 20px;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .study-main-content-section {
        padding: 60px 0;
    }

    .study-main-title {
        font-size: 32px;
    }

    .study-main-subtitle {
        font-size: 18px;
    }

    .study-main-text {
        font-size: 15px;
    }

    .study-main-content {
        padding: 0 10px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .study-main-content-section {
        padding-bottom: 50px;
    }

    .study-main-title {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .study-main-subtitle {
        font-size: 17px;
    }

    .study-main-text {
        font-size: 14px;
        line-height: 1.6;
    }

    .study-main-content {
        padding: 11px;
    }

    .study-main-list li {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .study-main-title {
        font-size: 24px;
    }

    .study-main-subtitle {
        font-size: 16px;
    }
}


/* ===========================
   Study Links Section
   =========================== */

.study-links-section {
    background-color: #f4f4f4;
    padding-bottom: 80px;
}

.study-links-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 30px;
}

.study-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    margin-bottom: 10px;
    background-color: var(--color-white);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.study-link-card:hover {
    background-color: var(--color-bg-light);
    border-color: var(--color-primary);
    transform: translateX(5px);
}

.study-link-text {
    font-size: 14px;
    color: var(--color-primary);
    font-weight: 600;
}

.study-link-arrow {
    color: var(--color-primary);
    font-size: 16px;
    transition: transform 0.3s ease;
}

.study-link-card:hover .study-link-arrow {
    transform: translateX(5px);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .study-links-section {
        padding-bottom: 60px;
    }

    .study-links-title {
        font-size: 22px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .mt-sm-3 {
        margin-top: 0 !important;
    }

    .study-links-section {
        padding-bottom: 50px;
    }

    .study-links-title {
        font-size: 20px;
    }

    .study-link-card {
        padding: 10px 12px;
    }

    .study-link-text {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .study-link-text {
        font-size: 12px;
    }
}


/* ===========================
   Internship Cards Section
   =========================== */

.internship-cards-section {
    background-color: #f4f4f4;
    padding-bottom: 80px;
}

.internship-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 478px;
}

.internship-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.internship-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

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

.internship-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 70%, transparent 100%);
    padding: 30px 25px;
    color: var(--color-white);
}

.internship-card-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--color-white);
    margin-bottom: 15px;
    line-height: 1.2;
}

.internship-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-white);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: gap 0.3s ease;
}

.internship-card-link:hover {
    gap: 12px;
    color: var(--color-secondary);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .internship-cards-section {
        padding-bottom: 60px;
    }

    .internship-card {
        height: 320px;
    }

    .internship-card-title {
        font-size: 24px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .internship-cards-section {
        padding-bottom: 50px;
    }

    .internship-card {
        height: 400px;
        margin-bottom: 20px;
    }

    .internship-card-title {
        font-size: 22px;
    }

    .internship-card-content {
        padding: 25px 20px;
    }
}

@media (max-width: 576px) {
    .internship-card {
        height: 400px;
    }

    .internship-card-title {
        font-size: 20px;
    }
}



/* ===========================
   Upcoming Events Carousel
   =========================== */

.upcoming-events-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
    overflow: hidden;
}

/* Container - Show 6 cards */
.upcoming-events-section .container-fluid {
    max-width: 1260px;
    /* Width for 6 cards: (190 × 6) + (20 × 5) = 1240px + padding */
    margin: 0 auto;
    padding: 0 10px;
}

/* Title */
.upcoming-events-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 40px;
    text-align: left;
}

/* ===========================
   Draggable Carousel Container
   =========================== */

.upcoming-events-container {
    width: 100%;
    cursor: grab;
    position: relative;
}

.upcoming-events-container:active {
    cursor: grabbing;
}

.upcoming-events-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.upcoming-events-track.dragging {
    transition: none;
}

/* ===========================
   Event Cards
   Dimensions: 190px × 380px
   =========================== */

.upcoming-events-card {
    flex: 0 0 190px;
    /* Changed to 190px */
    height: 380px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--color-white);
    cursor: pointer;
}

.upcoming-events-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Border Colors */
.upcoming-events-card-red {
    border: 2px solid var(--color-primary);
}

.upcoming-events-card-yellow {
    border: 2px solid var(--color-secondary);
}

.upcoming-events-card-gray {
    border: 2px solid #5F5F5F;
}

/* Automatic Border Colors - Repeating Pattern (Red, Yellow, Gray) */
.upcoming-events-card:nth-child(3n+1) {
    border: 2px solid var(--color-primary); /* Red */
}

.upcoming-events-card:nth-child(3n+2) {
    border: 2px solid var(--color-secondary); /* Yellow */
}

.upcoming-events-card:nth-child(3n+3) {
    border: 2px solid #5F5F5F; /* Gray */
}

/* Date Badge */
.upcoming-events-date-badge {
    position: absolute;
    background-color: var(--color-secondary);
    border-radius: 10px 0px 10px 0px;
    padding: 8px 12px;
    text-align: center;
    z-index: 10;
    min-width: 60px;
}

.upcoming-events-day-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    line-height: 1;
}

.upcoming-events-day {
    font-size: 28px;
    font-weight: 900;
    color: var(--color-black);
    line-height: 1;
    margin: 5px 0;
}

.upcoming-events-month {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    line-height: 1;
}

/* Image */
.upcoming-events-image {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    object-fit: cover;
    transition: transform 0.4s ease;
    pointer-events: none;
}

/* Content */
.upcoming-events-content {
    padding: 20px 18px;
}

.upcoming-events-card-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 10px;
    line-height: 1.3;
    font-family: var(--font-primary);
}

.upcoming-events-description {
    font-size: 13px;
    color: var(--color-gray-medium);
    line-height: 1.5;
    margin: 0;
}

.quick-links-card-yellow .quick-link-title {
    color: var(--color-black);
}

/* ===========================
   Progress Bar
   =========================== */

.upcoming-events-progress-wrapper {
    width: 100%;
    margin: 40px 0 0;
    padding: 0;
}

.upcoming-events-progress-bar {
    width: 100%;
    height: 3px;
    background-color: var(--color-gray-lightest);
    position: relative;
    cursor: pointer;
    border-radius: 10px;
}

.upcoming-events-progress-fill {
    height: 100%;
    border-radius: 10px;
    background-color: var(--color-primary);
    width: 120px;
    min-width: 120px;
    transition: width 0.2s ease-out;
    pointer-events: none;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .upcoming-events-section {
        padding: 60px 0;
    }

    /* Show 4 cards on tablet */
    .upcoming-events-section .container-fluid {
        max-width: 860px;
        /* (190 × 4) + (20 × 3) = 820px + padding */
    }

    .upcoming-events-title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .upcoming-events-card {
        flex: 0 0 190px;
        height: 360px;
    }

    .upcoming-events-image {
        height: 180px;
    }

    .upcoming-events-track {
        gap: 15px;
    }

    .upcoming-events-card-title {
        font-size: 17px;
    }

    .upcoming-events-description {
        font-size: 12px;
    }

    .upcoming-events-progress-wrapper {
        margin-top: 35px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .upcoming-events-section {
        padding: 50px 0;
    }

    /* Full width on mobile */
    .upcoming-events-section .container-fluid {
        max-width: 100%;
        padding: 0 20px;
    }

    .upcoming-events-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .upcoming-events-card {
        flex: 0 0 170px;
        height: 340px;
    }

    .upcoming-events-image {
        height: 160px;
    }

    .upcoming-events-track {
        gap: 12px;
    }

    .upcoming-events-content {
        padding: 18px 15px;
    }

    .upcoming-events-card-title {
        font-size: 16px;
    }

    .upcoming-events-description {
        font-size: 12px;
    }

    .upcoming-events-date-badge {
        top: 0;
        left: 0;
        padding: 6px 10px;
        min-width: 55px;
    }

    .upcoming-events-day {
        font-size: 24px;
    }

    .upcoming-events-day-name,
    .upcoming-events-month {
        font-size: 10px;
    }

    .upcoming-events-progress-wrapper {
        margin-top: 30px;
    }

    .upcoming-events-progress-bar {
        height: 3px;
    }
}

@media (max-width: 576px) {
    .upcoming-events-card {
        flex: 0 0 160px;
        height: 320px;
    }

    .upcoming-events-image {
        height: 150px;
    }

    .upcoming-events-track {
        gap: 10px;
    }

    .upcoming-events-card-title {
        font-size: 15px;
    }

    .upcoming-events-description {
        font-size: 11px;
    }
}

/* ===========================
   Quick Links Section
   =========================== */
.quick-links-section {
    background-color: var(--color-bg-light);
    padding: 40px 0;
}

.quick-links-section .container {
    max-width: 1320px;
}

/* Title */
.quick-links-section-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    margin-bottom: 50px;
}

/* ===========================
   Grid Layout
   Uses CSS Grid (not Bootstrap cols)
   =========================== */

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 165px);
    gap: 23px;
    justify-content: center;
    width: 100%;
}

/* ===========================
   Quick Links Cards
   Fixed Dimensions: 155px × 260px
   =========================== */

.quick-links-card {
    width: 170px;
    height: 260px;
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quick-links-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Card Background Colors */
.quick-links-card-red {
    background-color: var(--color-primary);
}

.quick-links-card-yellow {
    background-color: var(--color-secondary);
}

.quick-links-card-gray {
    background-color: #6B6B6B;
}

/* ===========================
   Icon - Base Style
   Varied positions per card
   =========================== */

.quick-links-icon {
    width: 150px;
    height: 150px;
    margin-bottom: 15px;
    position: relative;
}

.quick-links-icon-img {
    object-fit: contain;
    opacity: 0.3;
}

/* ===========================
   Card 1 - ILLNESS (Red)
   =========================== */

.quick-links-card:nth-child(1) .quick-links-icon {
    align-items: flex-start;
    justify-content: flex-end;
}

.quick-links-card:nth-child(1) .quick-links-icon-img {
    width: 85%;
    height: 85%;
}

/* ===========================
   Card 2 - DOWNLOAD YEARBOOK (Yellow)
   =========================== */

.quick-links-card:nth-child(2) .quick-links-icon {
    align-items: flex-start;
    justify-content: center;
}

.quick-links-card:nth-child(2) .quick-links-icon-img {
    width: 90%;
    height: 90%;
}

/* ===========================
   Card 3 - OFFERS (Gray)
   =========================== */

.quick-links-card:nth-child(3) .quick-links-icon {
    align-items: center;
    justify-content: center;
}

.quick-links-card:nth-child(3) .quick-links-icon-img {
    width: 80%;
    height: 80%;
}

/* ===========================
   Card 4 - LIBRARY (Red)
   =========================== */

.quick-links-card:nth-child(4) .quick-links-icon {
    align-items: flex-end;
    justify-content: flex-end;
}

.quick-links-card:nth-child(4) .quick-links-icon-img {
    width: 95%;
    height: 95%;
    transform: translateY(-10px);
}

/* ===========================
   Card 5 - WEBUNTIS (Yellow)
   =========================== */

.quick-links-card:nth-child(5) .quick-links-icon {
    align-items: flex-start;
    justify-content: flex-start;
}

.quick-links-card:nth-child(5) .quick-links-icon-img {
    width: 88%;
    height: 88%;
}

/* ===========================
   Card 6 - ISERV (Gray)
   =========================== */

.quick-links-card:nth-child(6) .quick-links-icon {
    align-items: flex-end;
    justify-content: center;
}

.quick-links-card:nth-child(6) .quick-links-icon-img {
    width: 85%;
    height: 85%;
}

/* ===========================
   Card 7 - DOWNLOADS (Red)
   =========================== */

.quick-links-card:nth-child(7) .quick-links-icon {
    align-items: center;
    justify-content: flex-start;
}

.quick-links-card:nth-child(7) .quick-links-icon-img {
    width: 92%;
    height: 92%;
}

/* ===========================
   Card Content
   =========================== */

.quick-links-card-yellow .quick-link-content {
    color: var(--color-black);
}

.quick-links-card-yellow .quick-links-arrow {
    color: var(--color-black);
}

.quick-link-content {
    color: var(--color-white);
}

/* Title */
.quick-link-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--color-white);
    text-align: left;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    display: block;
}

/* Arrow */
.quick-links-arrow {
    font-size: 24px;
    color: var(--color-white);
    font-weight: 700;
    margin-top: 10px;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .quick-links-section {
        padding: 60px 0;
    }

    .quick-links-section-title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .quick-links-grid {
        grid-template-columns: repeat(auto-fit, 155px);
        gap: 18px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .quick-links-section {
        padding: 50px 0;
    }

    .quick-links-section-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .quick-links-grid {
        grid-template-columns: repeat(auto-fit, 160px);
        gap: 15px;
    }

    .quick-links-card {
        width: 160px;
        height: 240px;
        padding: 20px 15px;
    }

    .quick-links-icon {
        width: 70px;
        height: 70px;
    }

    .quick-link-title {
        font-size: 15px;
    }

    .quick-links-arrow {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .quick-links-grid {
        grid-template-columns: repeat(auto-fit, 160px);
        gap: 12px;
    }

    .quick-links-card {
        width: 160px;
        height: 230px;
        padding: 18px 12px;
    }

    .quick-links-icon {
        width: 60px;
        height: 60px;
    }

    .quick-link-title {
        font-size: 17px;
    }

    .quick-links-arrow {
        font-size: 20px;
    }
}

/* ===========================
   FAQs Bootstrap Accordion Section
   =========================== */
.faqs-bootstrap-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

/* ===========================
   Header
   =========================== */

.faqs-bootstrap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.faqs-bootstrap-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font-primary);
    margin: 0;
}

.faqs-bootstrap-view-all {
    display: inline-flex;
    width: 200px;
    align-items: center;
    gap: 8px;
    background-color: var(--color-secondary);
    color: var(--color-black);
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
    text-align: center;
}

.faqs-bootstrap-view-all:hover {
    background-color: #E0A020;
    color: var(--color-black);
    gap: 12px;
}

.faqs-bootstrap-arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* ===========================
   Bootstrap Accordion Customization
   =========================== */

.faqs-accordion {
    border: none;
}

.faqs-accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-secondary);
    border-radius: 0 !important;
    margin-bottom: 0;
}

.faqs-accordion-item:first-child {
    border-top: 1px solid var(--color-secondary);
}

.faqs-accordion-item:last-child {
    border-bottom: 1px solid var(--color-secondary);
}

/* Accordion Button */
.faqs-accordion-button {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 20px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.faqs-accordion-button:focus {
    box-shadow: none;
    border: none;
}

.faqs-accordion-button:hover {
    background-color: transparent;
    opacity: 0.8;
}

/* Hide default Bootstrap arrow */
.faqs-accordion-button::after {
    display: none;
}

/* Custom Icon (Plus/Minus) */
.faqs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-top: 2px;
}

/* Accordion Body */
.faqs-accordion-body {
    padding: 0 0 20px 39px;
    background-color: transparent;
}

.faqs-body-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 10px;
}

.faqs-body-text {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.7;
    margin: 0;
}

/* ===========================
   Image
   =========================== */

.faqs-bootstrap-image-wrapper {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

.faqs-bootstrap-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .faqs-bootstrap-section {
        padding: 60px 0;
    }

    .faqs-bootstrap-title {
        font-size: 40px;
    }

    .faqs-bootstrap-view-all {
        padding: 10px 20px;
        font-size: 15px;
    }

    .faqs-accordion-button {
        font-size: 17px;
        padding: 18px 0;
    }

    .faqs-body-text {
        font-size: 14px;
    }

    .faqs-bootstrap-image {
        min-height: 350px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .faqs-bootstrap-section {
        padding: 50px 0;
    }

    .faqs-bootstrap-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .faqs-bootstrap-title {
        font-size: 32px;
    }

    .faqs-bootstrap-view-all {
        padding: 10px 18px;
        font-size: 19px;
    }

    .faqs-accordion-button {
        font-size: 16px;
        padding: 15px 0;
        gap: 12px;
    }

    .faqs-icon {
        width: 20px;
        height: 20px;
        font-size: 20px;
    }

    .faqs-accordion-body {
        padding: 0 0 15px 32px;
    }

    .faqs-body-title {
        font-size: 15px;
    }

    .faqs-body-text {
        font-size: 14px;
    }

    .faqs-bootstrap-image {
        min-height: 300px;
    }
}

@media (max-width: 576px) {
    .faqs-bootstrap-title {
        font-size: 28px;
    }

    .faqs-accordion-button {
        font-size: 15px;
    }

    .faqs-body-text {
        font-size: 13px;
    }
}

/* ===========================
   Navigation with Hover Submenus
   =========================== */

/* Navigation Container */
.nav-container {
    background-color: var(--color-secondary);
    border-radius: 10px 0 0 10px;
    padding: 0;
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 5px;
}

.nav {
    display: flex;
    gap: 0;
    align-items: center;
    padding: 0 5px;
    width: 100%;
    justify-content: space-evenly;
}

.nav-link {
    color: var(--color-black);
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    transition: color 0.3s;
    white-space: nowrap;
    padding: 19px 10px;
}

.nav-link:hover {
    color: var(--color-primary-hover);
}

.nav-icon {
    font-size: 22px;
    text-decoration: none;
    color: var(--color-gray-darkest);
    display: flex;
    align-items: center;
    padding: 19px 12px;
    transition: color 0.3s;
}

.nav-icon:hover {
    color: var(--color-primary-hover);
}

/* ===========================
   Dropdown Container (Hover Based)
   =========================== */

.nav-dropdown {
    position: relative;
}

/* Hide submenu by default */
.nav-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-bg-cream);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    margin-top: 10px;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateX(-50%) translateY(-10px);
    z-index: 1000;
}

/* Show submenu on hover */
.nav-dropdown:hover .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Keep submenu open when hovering over it */
.nav-submenu:hover {
    opacity: 1;
    visibility: visible;
}

/* ===========================
   Submenu Type 1: Single Column
   =========================== */

.nav-submenu-single {
    min-width: 350px;
}

.nav-submenu-single .nav-submenu-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ===========================
   Submenu Type 2: Two Columns
   =========================== */

.nav-submenu-two-cols {
    min-width: 800px;
}

.nav-submenu-two-cols .nav-submenu-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.nav-submenu-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-right: 20px;
    border-right: 0;
}

.nav-submenu-button-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
}

/* ===========================
   Submenu Type 3: Three Columns
   =========================== */

.nav-submenu-three-cols {
    min-width: 800px;
}

.nav-submenu-three-cols .nav-submenu-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
}

.nav-submenu-three-cols .nav-submenu-col {
    padding: 0 15px;
    border-right: 0;
}

.nav-submenu-three-cols .nav-submenu-col:last-child {
    border-right: none;
    padding-right: 0;
}

/* ===========================
   Submenu Items (Common)
   =========================== */

.nav-submenu-item {
    color: var(--color-black);
    font-size: 16px;
    font-weight: 600;
    padding: 12px 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    display: block;
}

.nav-submenu-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
}

.nav-submenu-divider {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 0;
}

/* Hide last divider in each column */
.nav-submenu-col > .nav-submenu-divider:last-child {
    display: none;
}

/* ===========================
   Download Button (Two Columns)
   =========================== */

.nav-download-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--color-secondary);
    color: var(--color-black);
    padding: 20px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.3s ease;
    width: 100%;
}

.nav-download-btn:hover {
    background-color: #E0A020;
    color: var(--color-black);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(248, 181, 49, 0.4);
}

.nav-download-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-download-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
}

.nav-download-arrow {
    font-size: 24px;
    font-weight: 700;
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 1200px) {
    .nav-submenu-three-cols {
        min-width: 650px;
    }

    .nav-submenu-item {
        font-size: 16px;
        padding: 10px 12px;
    }
}

@media (max-width: 991px) {
    .nav-container {
        display: none;
    }
}


/* Recreated exact collage layout with precise measurements from screenshot */
.collage-container {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    aspect-ratio: 1440 / 840;
    background-color: #f4f4f4;
}

.collage-item {
    position: absolute;
    overflow: hidden;
}

.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Top Left - Woman with dark hair */
.photo-1 {
    left: 0;
    top: 11.2%;
    width: 17.3%;
    height: 34.5%;
}

/* Bottom Left - Woman in grey vest with blonde hair */
.photo-2 {
    left: 5.1%;
    top: 45.8%;
    width: 12.2%;
    height: 26.7%;
}

/* Red GRADUATES Banner */
.graduates-banner {
    left: 17.3%;
    top: 11.2%;
    width: 26.4%;
    height: 18%;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.graduates-banner h1 {
    color: white;
    font-size: 40px;
    font-weight: 900;
    text-align: center;
    padding: 1rem;
}

/* Woman in grey vest full body */
.photo-3 {
    left: 17.3%;
    top: 29.2%;
    width: 13.2%;
    height: 29.8%;
}

/* Woman in pink with trophy */
.photo-4 {
    left: 30.5%;
    top: 29.2%;
    width: 13.2%;
    height: 40.5%;
}

/* Gold Box - 4935 Graduates */
.stat-4935 {
    left: 17.3%;
    top: 59%;
    width: 13.2%;
    height: 21.7%;
    background-color: var(--color-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.stat-4935 .number {
    color: var(--color-black);
    font-size: clamp(2.5rem, 3.5vw, 4.2rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-4935 .label {
    color: var(--color-black);
    font-size: clamp(0.9rem, 1.3vw, 1.4rem);
    font-weight: 500;
}

/* Black Box - 141 Years */
.stat-141 {
    left: 30.5%;
    top: 69.7%;
    width: 13.2%;
    height: 25.3%;
    background-color: var(--color-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.stat-141 .number {
    color: var(--color-white);
    font-size: clamp(2.5rem, 3.5vw, 4.2rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-141 .label {
    color: var(--color-white);
    font-size: clamp(0.9rem, 1.3vw, 1.4rem);
    font-weight: 500;
}

/* Woman in gold dress with cape */
.photo-5 {
    left: 43.7%;
    top: 11.2%;
    width: 17.3%;
    height: 47.6%;
}

/* Woman in blue top */
.photo-6 {
    left: 43.7%;
    top: 58.8%;
    width: 17.3%;
    height: 27.4%;
}

/* Black and white portrait of woman */
.photo-7 {
    left: 61%;
    top: 11.2%;
    width: 24.8%;
    height: 53.6%;
}

/* Woman singing in black dress */
.photo-8 {
    left: 61%;
    top: 64.8%;
    width: 13.2%;
    height: 27.4%;
}

/* Maroon Box - 136 Universities */
.stat-136 {
    left: 74.2%;
    top: 64.8%;
    width: 11.5%;
    height: 27.4%;
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.stat-136 .number {
    color: var(--color-white);
    font-size: clamp(2.5rem, 3.5vw, 4.2rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-136 .label {
    color: var(--color-white);
    font-size: clamp(0.9rem, 1.3vw, 1.4rem);
    font-weight: 500;
}

/* Woman with curly hair in sparkly dress */
.photo-9 {
    left: 85.7%;
    top: 11.2%;
    width: 14.6%;
    height: 35.5%;
}

/* Woman smiling in pink dress */
.photo-10 { 
    left: 85.7%; 
    top: 46.4%; 
    width: 13.3%; 
    height: 36.7%;
}

/* Responsive adjustments for tablet and mobile */
@media (max-width: 1024px) {
    .collage-container {
        aspect-ratio: auto;
        min-height: 100vh;
    }

    .collage-item { 
        position: relative;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 300px !important;
    }

    .graduates-banner,
    .stat-4935,
    .stat-141,
    .stat-136 {
        height: 200px !important;
    }
}

@media (max-width: 640px) {
    .collage-item {
        height: 250px !important;
    }

    .graduates-banner,
    .stat-4935,
    .stat-141,
    .stat-136 {
        height: 180px !important;
    }
}

/* Download button styling */
.download-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #c94540;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 1000;
}

.download-btn:hover {
    background-color: #b04540;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.download-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 640px) {
    .download-btn {
        padding: 10px 18px;
        font-size: 14px;
        top: 10px;
        right: 10px;
    }
}

/* Hover Text Content */
.collage-item::after {
    content: attr(data-name) '\A' attr(data-title);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 100%;
    max-width: 100%;
    padding: 15px 10px;
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    white-space: pre-line;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

.collage-item:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
}

/* Photos don't get hover (only images, not stat boxes) */
.graduates-banner,
.stat-4935,
.stat-141,
.stat-136 {
    cursor: default;
}

.graduates-banner::before,
.graduates-banner::after,
.stat-4935::before,
.stat-4935::after,
.stat-141::before,
.stat-141::after,
.stat-136::before,
.stat-136::after {
    display: none !important;
}


/* ===========================
   Desktop - Hide Dropdown (≥768px)
   =========================== */

@media (min-width: 768px) {
    .mobile-tab-dropdown {
        display: none !important;
    }
}

/* ===========================
   Mobile - Show Dropdown (< 768px)
   =========================== */

@media (max-width: 767px) {

    /* Hide Desktop Tabs */
    .desktop-tabs {
        display: none !important;
    }

    /* Show Mobile Dropdown */
    .mobile-tab-dropdown {
        display: block !important;
        position: relative;
        width: 100%;
        margin-bottom: 30px;
    }

    /* ===========================
       Dropdown Select Styles
       =========================== */

    .mobile-dropdown-select {
        width: 100%;
        padding: 18px 70px 18px 35px;
        font-size: 19px;
        font-weight: 700;
        font-family: var(--font-primary);
        background-color: transparent;
        border: none;
        border-top: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        border-radius: 0;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        transition: all 0.3s ease;
    }

    .mobile-dropdown-select:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    }

    /* Options in Dropdown List */
    .mobile-dropdown-select option {
        font-size: 17px;
        font-weight: 600;
        padding: 15px;
        background-color: var(--color-white);
        color: var(--color-black);
    }

    /* ===========================
       Dot Indicator (Left Side)
       =========================== */

    .mobile-dropdown-select {
        background-image: radial-gradient(circle, var(--color-secondary) 5px, transparent 5px);
        background-repeat: no-repeat;
        background-position: 15px center;
        background-size: 12px 12px;
    }

    /* ===========================
       Arrow Box (Right Side)
       =========================== */

    .mobile-dropdown-arrow {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        transition: background-color 0.3s ease;
    }

    .mobile-dropdown-arrow i {
        font-size: 18px;
        font-weight: bold;
    }

}

/* ===========================
   Small Mobile (< 576px)
   =========================== */

@media (max-width: 575px) {

    .mobile-dropdown-select {
        font-size: 18px;
        padding: 16px 65px 16px 32px;
        background-position: 12px center;
    }

    .mobile-dropdown-select option {
        font-size: 16px;
    }

    .mobile-dropdown-arrow {
        width: 36px;
        height: 36px;
        right: 12px;
    }

    .mobile-dropdown-arrow i {
        font-size: 16px;
    }

}


/* ===========================
   Theme: Black (New)
   Class: mobile-dropdown-theme-black
   =========================== */

.mobile-dropdown-theme-black .mobile-dropdown-select {
    color: var(--color-black);
    border-color: #C79228;
    background-image: radial-gradient(circle, var(--color-primary) 5px, transparent 5px);
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 12px 12px;
}

.mobile-dropdown-theme-black .mobile-dropdown-select:hover,
.mobile-dropdown-theme-black .mobile-dropdown-select:focus {
    border-color: var(--color-primary);
}

/* Options in Dropdown List */
.mobile-dropdown-theme-black .mobile-dropdown-select option {
    font-size: 17px;
    font-weight: 600;
    padding: 15px;
    background-color: var(--color-white);
    color: var(--color-black);
}

.mobile-dropdown-theme-black .mobile-dropdown-arrow {
    background-color: var(--color-black);
}

.mobile-dropdown-theme-black .mobile-dropdown-arrow i {
    color: var(--color-white);
}

/* Hover - Dark Gray */
.mobile-dropdown-theme-black .mobile-dropdown-select:hover+.mobile-dropdown-arrow {
    background-color: var(--color-black);
}


/* ===========================
   COLOR THEMES
   =========================== */

/* Theme 1: Red (Default) - School Profile */
.mobile-dropdown-theme-red .mobile-dropdown-select {
    color: var(--color-primary);
    border-color: var(--color-gray-lighter);
}

.mobile-dropdown-theme-red .mobile-dropdown-select:hover,
.mobile-dropdown-theme-red .mobile-dropdown-select:focus {
    border-color: var(--color-primary);
}

.mobile-dropdown-theme-red .mobile-dropdown-arrow {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.mobile-dropdown-theme-red .mobile-dropdown-arrow i {
    color: var(--color-white);
}

.mobile-dropdown-theme-red .mobile-dropdown-select:hover+.mobile-dropdown-arrow {
    background-color: var(--color-primary-dark);
}

/* Theme 2: White - School Program */
.mobile-dropdown-theme-white .mobile-dropdown-select {
    color: var(--color-white);
    border-color: var(--color-white);
}

.mobile-dropdown-theme-white .mobile-dropdown-select:hover,
.mobile-dropdown-theme-white .mobile-dropdown-select:focus {
    border-color: var(--color-secondary);
}

.mobile-dropdown-theme-white .mobile-dropdown-arrow {
    background-color: var(--color-white);
}

.mobile-dropdown-theme-white .mobile-dropdown-arrow i {
    color: var(--color-primary);
}

.mobile-dropdown-theme-white .mobile-dropdown-select:hover+.mobile-dropdown-arrow {
    background-color: var(--color-secondary);
}

.mobile-dropdown-theme-white .mobile-dropdown-select:hover+.mobile-dropdown-arrow i {
    color: var(--color-white);
}


.btn-slide-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease;
}

.btn-slide-right:hover {
    transform: translateX(4px);
}

.btn-slide-right i,
.btn-slide-right svg {
    display: inline-block;
    transition: transform 0.3s ease;
}

.btn-slide-right span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.btn-slide-right:hover span {
    transform: translateX(3px);
}


.btn-slide-right:hover i,
.btn-slide-right:hover svg {
    transform: translateX(3px);
}


.button-all-update {
    display: inline-flex;
    width: 200px;
    align-items: center;
    gap: 8px;
    background-color: var(--color-secondary);
    color: var(--color-black);
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
    text-align: center;
}


.faqs-bootstrap-view-all:hover {
    transform: translateX(4px);
}

.faqs-bootstrap-view-all-text {
    display: inline-block;
    transition: transform 0.3s ease;
}

.faqs-bootstrap-view-all:hover .faqs-bootstrap-view-all-text {
    transform: translateX(3px);
}

.faqs-bootstrap-view-all i {
    display: inline-block;
    transition: transform 0.3s ease;
}

.faqs-bootstrap-view-all:hover i {
    transform: translateX(3px);
}


/* ===========================
   The ONLY thing we need to fix:
   Prevent carousel overflow from affecting the ENTIRE page
   =========================== */

/* 1. Prevent page-wide horizontal scroll */
html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
}

/* 2. Contain carousel overflow within sections */
.music-updates-section,
.upcoming-events-section {
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* 3. Allow carousel to scroll within container */
.music-updates-container,
.upcoming-events-container {
    -webkit-overflow-scrolling: touch;
    
    /* Hide scrollbar (optional) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.music-updates-container::-webkit-scrollbar,
.upcoming-events-container::-webkit-scrollbar {
    display: none;
}

/* ========================================
   SINGLE BLOG POST SECTION
   Based on updates-1.html
   ======================================== */

.single-blog-section {
    padding: 80px 0;
    background: #ffffff;
}

.single-blog-featured {
    margin-bottom: 40px;
}

.single-blog-featured-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.single-blog-header {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.single-blog-category {
    display: inline-block;
    background: #F4BE4F;
    color: #2c2c2c;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.875rem;
    font-weight: 700;
    margin-right: 15px;
    text-transform: capitalize;
}

.single-blog-date {
    color: #666;
    font-size: 0.95rem;
    font-weight: 600;
}

.single-blog-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #2c2c2c;
    margin: 20px 0;
    line-height: 1.3;
}

.single-blog-share {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
}


.single-blog-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 50px;
}

.single-blog-content p {
    margin-bottom: 1.5rem;
}

.single-blog-content h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c2c2c;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.single-blog-content h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c2c2c;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}

.single-blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2rem 0;
}

.single-blog-share-bottom {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}

/* More Posts Section */
.more-posts-section {
    padding: 80px 0;
    background: #f4f4f4 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .single-blog-section {
        padding: 50px 0;
    }
    
    .single-blog-title {
        font-size: 1.75rem;
    }
    
    .single-blog-content {
        font-size: 1rem;
    }
    
    .single-blog-share,
    .single-blog-share-bottom {
        flex-wrap: wrap;
    }
    
    .more-posts-section {
        padding: 50px 0;
    }
    
    .more-posts-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .single-blog-category {
        display: block;
        margin-bottom: 10px;
    }
    
    .single-blog-title {
        font-size: 1.5rem;
    }
}



.inner-hero {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header Image */
.inner-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* Gradients */
.inner-hero-gradient-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 280px;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            transparent 100%);
    z-index: 1;
}

.inner-hero-gradient-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 280px;
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.7) 50%,
            transparent 100%);
    z-index: 1;
}

/* ===========================
   Hero Content (Breadcrumbs + Title)
   =========================== */

.inner-hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    padding-bottom: 105px;
    flex: 1;
}

/* Breadcrumbs */
.inner-breadcrumb {
    margin-bottom: 15px;
}

.inner-breadcrumb .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    font-size: 22px;
    font-weight: 400;
}

.inner-breadcrumb .breadcrumb-item {
    color: var(--color-white);
}

.inner-breadcrumb .breadcrumb-item a {
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.inner-breadcrumb .breadcrumb-item a:hover {
    color: var(--color-secondary);
}

.inner-breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.8);
}

.inner-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "|";
    color: var(--color-white);
    padding: 0 8px;
}

/* Page Title */
.inner-hero-title {
    font-size: 35px;
    font-weight: 900;
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
}

/* ===========================
   Brush Stroke Bottom
   =========================== */

.inner-hero-brush-bottom {
    position: absolute;
    bottom: -93px;
    left: 0;
    width: 100%;
    z-index: 15;
    pointer-events: none;
    transform: scaleX(1.1);
}

.inner-hero-brush-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ===========================
   Logo Badge
   =========================== */

.inner-hero-logo-badge {
    position: absolute;
    bottom: 0;
    right: 80px;
    z-index: 20;
    width: 220px;
    height: auto;
}

.inner-badge-logo {
    width: auto;
    height: auto;
    max-height: 110px;
}

/* ===========================
   Social Media Links
   =========================== */

.inner-hero-social {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 20;
}

.inner-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: var(--color-white);
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.inner-social-link:hover {
    background-color: var(--color-secondary);
    color: var(--color-gray-darkest);
    transform: scale(1.1);
}

/* ===========================
   Responsive - Tablet
   =========================== */

@media (max-width: 991px) {
    .inner-hero {
        height: 350px;
    }

    .inner-hero-title {
        font-size: 35px;
    }

    .inner-hero-logo-badge {
        width: 180px;
        bottom: 30px;
        right: 60px;
    }

    .inner-hero-social {
        right: 30px;
        gap: 15px;
    }

    .inner-social-link {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
}

/* ===========================
   Responsive - Mobile
   =========================== */

@media (max-width: 767px) {
    .inner-hero {
        height: 300px;
    }

    .inner-hero-content {
        padding-bottom: 40px;
    }

    .inner-breadcrumb .breadcrumb {
        font-size: 12px;
    }

    .inner-hero-title {
        font-size: 35px;
    }

    .inner-hero-logo-badge {
        width: 140px;
        bottom: 20px;
        right: 40px;
    }

    .inner-hero-social {
        display: none;
    }
}

@media (max-width: 576px) {
    .inner-hero {
        height: 330px;
        overflow: visible;
    }

.mobile-menu-icon-img {
  width: 26px;
  margin-top: -5px;
}

    .inner-hero-content {
        padding-bottom: 90px;
    }

    .inner-hero-title {
        font-size: 32px;
    }

    .inner-hero-logo-badge {
        width: 145px;
        bottom: -30px;
        right: 20px;
            z-index: 1111;
    }

    .inner-hero-brush-bottom {
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: none;
    }

    .inner-hero-brush-image {
        display: block;
        width: auto;
        max-width: none;
        height: auto;
        transform: scaleX(1);
    }


}

/* ===========================
   MENU VIDEO POPUP
   =========================== */

/* Video Column Styling */
.nav-video-col {
    flex: 0 0 auto;
    width: 300px;
    min-width: 300px;
}

.nav-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 150px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.nav-video-wrapper:hover {
    transform: scale(1.02);
}

.nav-video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nav-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000ab;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.nav-video-wrapper:hover .nav-video-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
}

.nav-video-play-icon {
    font-size: 60px;
    color: white;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.nav-video-wrapper:hover .nav-video-play-icon {
    transform: scale(1.1);
}

.nav-video-text {
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    padding: 0 20px;
}

/* Video Popup Modal */
.video-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: none;
}

.video-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
}

.video-popup-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.video-popup-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16/9;
}

.video-popup-container video {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: #000;
}

.video-popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;
}

.video-popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

body.video-popup-open {
    overflow: hidden;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-video-col {
        width: 100%;
        min-width: 100%;
    }
    
    .video-popup-content {
        padding: 20px 10px;
    }
    
    .video-popup-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}


/* Wide Layout - 4 or more columns (with video/download) */
.nav-submenu-wide .nav-submenu-content {
    display: flex !important;
    gap: 20px;
    min-width: 1000px;
}

.nav-submenu-wide .nav-submenu-col {
    flex: 1;
    min-width: 200px;
}

.nav-submenu-wide .nav-video-col {
    flex: 0 0 280px;
    min-width: 280px;
}

.nav-submenu-wide .nav-submenu-button-col {
    flex: 0 0 250px;
    min-width: 250px;
}


/* Hide empty columns */
.nav-submenu-col:empty {
    display: none;
}


/* Inner Hero Description for Category Pages */
.inner-hero-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-top: 15px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


/* Hero Logo Badge - Fixed Position (Always On Top) */
.hero-logo-badge {
    position: fixed;
    bottom: 20px;
    right: 80px;
    z-index: 9999 !important;
    width: 220px;
    height: auto;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hero-logo-badge img {
    pointer-events: auto;
}

.badge-logo {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive - Fixed Position */
@media (max-width: 991px) {
    .hero-logo-badge {
        width: 180px;
        bottom: 20px;
        right: 60px;
    }
}

@media (max-width: 767px) {
    .hero-logo-badge {
        width: 150px;
        right: 30px;
        bottom: 20px;
    }
}

@media (max-width: 575px) {
    .hero-logo-badge {
        width: 120px;
        right: 20px;
        bottom: 20px;
    }
}


/* Main Content - Lower Z-Index than Hero */
#main-content,
.site-main {
    position: relative;
    z-index: 1;
}

.admission-cta-btn {
  width: 215px;
}
/* =====================================
   WPML LANGUAGE SWITCHER - HOVER MENU
   ===================================== */

/* Desktop Language Switcher */
.lang-selector.wpml-ls-hover {
    position: relative;
    cursor: pointer;
}

.lang-selector.wpml-ls-hover:hover .lang-current {
    opacity: 0.8;
}

.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    min-width: 80px;
    padding: 5px 0;
    background: var(--color-bg-cream);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.lang-selector.wpml-ls-hover:hover .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-menu-item {
    display: block;
    padding: 10px 20px;
    color: #2c2c2c;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.lang-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
}

/* Mobile Language Switcher */
.mobile-menu-lang.wpml-mobile-hover {
    position: relative;
    cursor: pointer;
}

.mobile-lang-current {
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.mobile-lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    min-width: 80px;
    padding: 5px 0;
    background: #2c2c2c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.mobile-menu-lang.wpml-mobile-hover:hover .mobile-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-lang-item {
    display: block;
    padding: 10px 20px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.mobile-lang-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color, #B92525);
}

/* Login Button Styles */
.login-btn,
.mobile-menu-login-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-btn:disabled,
.mobile-menu-login-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.staff-banner-section {
  background: #f4f4f4;
}

.staff-banner-title {
text-align: center;
  font-size: 40px;
  font-weight: 800;
  color: var(--color-primary);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  padding-bottom: 55px;
  }
  
  .teachers-carousel-group-title {
text-align: center;
  font-size: 40px;
  font-weight: 800;
  color: var(--color-primary);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  }
  
.teachers-carousel-progress-wrapper:last-of-type {
    margin-bottom: 70px;
}

.teachers-carousel-track {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.teachers-carousel-progress-wrapper {
  padding: 8px 2rem 0;
}

.org-chart-section {
  background: #f5f5f5;
}

.careers-jobs-section {
  background: #f4f4f4;
    padding: 10px 0 70px;
}
.teachers-cv-btn {
  background-color: var(--color-secondary);
  color: var(--color-black);
  border: none;
  padding: 10px 26px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.join-team-banner {
  margin-bottom: 20px;
}


/* ── Collage: extended to 1440/1100 + 4 extra photos ─────────────────── */

.collage-container {
    aspect-ratio: 1440 / 1100;
}

.photo-1 {
    top: 8.55%;
    height: 26.35%;
}

.photo-2 {
    left: 30.5%;
    top: 72.55%;
    width: 13.2%;
    height: 22%;
}

.photo-3 {
    top: 22.3%;
    height: 22.76%;
}

.photo-4 {
    top: 22.3%;
    height: 30.93%;
}

.photo-5 {
    top: 8.55%;
    height: 36.35%;
}

.photo-6 {
    top: 44.9%;
    height: 20.92%;
}

.photo-7 {
    top: 8.55%;
    height: 40.93%;
}

.photo-8 {
    top: 49.48%;
    height: 20.92%;
}

.photo-9 {
    top: 8.55%;
    height: 27.11%;
}

.photo-10 {
    top: 35.43%;
    height: 28.03%;
}

.graduates-banner {
    top: 8.55%;
    height: 13.75%;
}

.stat-4935 {
    top: 45.05%;
    height: 16.57%;
}

.stat-141 {
    top: 53.23%;
    height: 19.32%;
}

.stat-136 {
    top: 49.48%;
    height: 20.92%;
}

.photo-11 {
    left: 17.3%;
    top: 45.05%;
    width: 13.2%;
    height: 22.76%;
}

.photo-12 {
    left: 61.0%;
    top: 70.41%;
    width: 13.2%;
    height: 20.92%;
}

.photo-13 {
    left: 85.7%;
    top: 63.46%;
    width: 13.3%;
    height: 28.03%;
}

.photo-14 {
    left: 0%;
    top: 34.9%;
    width: 17.3%;
    height: 26.35%;
}

@media (max-width: 991px) {
    .collage-container {
        aspect-ratio: auto;
    }
}

.collage-item img {
    object-position: top center;
}

.photo-11 {
    top: 61.62%;
}

.blank-page-content {
  background: #f5f5f5;
}

.staff-home {
  background: #f5f5f5;
}