/* ===================== HOME PAGE EXTRA STYLES ===================== */

    /* === Hero Slideshow === */
    .hero-slideshow {
      position: absolute; inset: 0; z-index: 0; overflow: hidden;
    }
    .hero-slide {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      opacity: 0; transition: opacity 1.2s ease;
    }
    .hero-slide.active { opacity: 1; }
    .hero-slide-1 { background: linear-gradient(135deg, #0a1628 0%, #0c1836 30%, #1034a8 60%, #1e52a0 100%); }
    .hero-slide-2 { background: linear-gradient(135deg, #0f1923 0%, #162035 30%, #1a4a7a 60%, #233dff 100%); }
    .hero-slide-3 { background: linear-gradient(135deg, #060d1f 0%, #0a1628 30%, #1034a8 60%, #1034a8 100%); }
    .hero-overlay {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to bottom, rgba(10,22,40,0.3) 0%, rgba(10,22,40,0.5) 50%, rgba(10,22,40,0.85) 100%);
    }
    .hero-overlay-pattern {
      position: absolute; inset: 0; z-index: 1;
      background-image: radial-gradient(circle at 20% 50%, rgba(30,82,160,0.15) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(37,99,235,0.1) 0%, transparent 40%);
    }

    /* Floating shapes in hero */
    .hero-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
    .hero-shape {
      position: absolute; border-radius: 50%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      animation: floatShape 8s ease-in-out infinite;
    }
    .hero-shape-1 { width: 300px; height: 300px; top: -100px; right: -80px; animation-delay: 0s; }
    .hero-shape-2 { width: 200px; height: 200px; bottom: 20%; left: -60px; animation-delay: -3s; }
    .hero-shape-3 { width: 150px; height: 150px; top: 30%; right: 15%; animation-delay: -5s; border-radius: 30%; }
    .hero-shape-4 { width: 80px; height: 80px; top: 15%; left: 20%; animation-delay: -2s; }
    @keyframes floatShape {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(5deg); }
    }

    /* === Language Mutual Exclusion === */
    html[lang="ar"] .lang-en,
    html[dir="rtl"] .lang-en,
    body:not(.lang-english) .lang-en {
      display: none !important;
    }
    html[lang="en"] .lang-ar,
    html[dir="ltr"] .lang-ar,
    body.lang-english .lang-ar {
      display: none !important;
    }

    /* === Hero Container === */
    .hero {
      min-height: 100svh;
      height: auto;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      padding-top: calc(env(safe-area-inset-top, 0px) + clamp(72px, 8.5vh, 96px));
      padding-bottom: clamp(28px, 4.5vh, 52px);
      padding-inline: clamp(1rem, 3vw, 2.5rem);
      box-sizing: border-box;
    }

    /* Hero content layout - Single-Column Centered Stack */
    .hero-inner {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin: auto 0;
      justify-content: center;
      gap: clamp(0.7rem, 1.8vh, 1.35rem);
      width: 100%;
      max-width: 900px;
      box-sizing: border-box;
    }

    /* 1) Emblem / Logo */
    .hero-logo-wrap {
      position: relative;
      width: clamp(140px, 16vw, 190px) !important;
      height: clamp(140px, 16vw, 190px) !important;
      margin: 0 auto !important;
      margin-bottom: 2.75rem !important;
      display: flex;
      align-items: center;
      justify-content: center;
      filter: drop-shadow(0 0 35px rgba(35, 61, 255, 0.65));
      transition: transform 0.3s ease, filter 0.3s ease;
    }
    .hero-logo-wrap:hover {
      transform: scale(1.05);
      filter: drop-shadow(0 0 45px rgba(56, 189, 248, 0.85));
    }
    .hero-logo-ring {
      position: absolute;
      inset: -8px !important;
      border-radius: 50%;
      border: 2.5px solid rgba(56, 189, 248, 0.7) !important;
      box-shadow: 0 0 25px rgba(56, 189, 248, 0.45), inset 0 0 20px rgba(37, 99, 235, 0.3) !important;
      animation: spin-slow 22s linear infinite;
    }
    .hero-logo-ring::before {
      content: '';
      position: absolute;
      top: -7px;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #38bdf8;
      box-shadow: 0 0 14px #38bdf8, 0 0 26px #38bdf8;
    }
    .hero-logo-wrap .hero-logo-img,
    .hero-logo-img {
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important;
      border-radius: 50% !important;
      border: 2.5px solid rgba(255, 255, 255, 0.35) !important;
      background: rgba(10, 22, 40, 0.85) !important;
      padding: 4px !important;
      box-sizing: border-box !important;
    }
    @keyframes spin-slow { to { transform: rotate(360deg); } }

    /* 2) Official Accreditation Badge (رقم الإشهار) */
    .hero-reg-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(13, 26, 58, 0.9);
      border: 1.5px solid rgba(56, 189, 248, 0.45);
      padding: 7px 26px;
      border-radius: 9999px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 4px 20px rgba(6, 182, 212, 0.22);
      margin: 0 auto !important;
      margin-bottom: 0.65rem !important;
      transition: all 0.3s ease;
    }
    .hero-reg-tag:hover {
      background: rgba(20, 38, 80, 0.95);
      border-color: rgba(56, 189, 248, 0.7);
      transform: translateY(-2px);
      box-shadow: 0 6px 28px rgba(6, 182, 212, 0.35);
    }
    .hero-reg-tag .lang-ar,
    .hero-reg-tag .lang-en {
      color: #f1f5f9;
      font-size: clamp(0.95rem, 1.1vw, 1.15rem);
      font-weight: 700;
      letter-spacing: 0.4px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .hero-reg-num {
      color: #38bdf8;
      font-weight: 900;
      background: rgba(56, 189, 248, 0.22);
      padding: 2px 10px;
      border-radius: 6px;
      border: 1px solid rgba(56, 189, 248, 0.35);
    }

    /* 2.5) Ministry Line */
    .hero-ministry-title {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin: 0 auto 8px auto !important;
      font-size: clamp(1.25rem, 2.2vw, 1.85rem);
      font-weight: 700;
      line-height: 1.18;
      color: rgba(224, 242, 254, 0.95);
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
      white-space: nowrap;
      letter-spacing: -0.2px;
      transition: color 0.3s ease;
    }
    body.theme-light .hero-ministry-title,
    html.theme-light .hero-ministry-title,
    [data-theme="light"] .hero-ministry-title {
      color: var(--text-title, #0a1b3f) !important;
      text-shadow: none !important;
    }

    /* 3) Main Title */
    .hero-title-new {
      font-size: clamp(2.5rem, 5.2vw, 4.25rem) !important;
      font-weight: 900 !important;
      line-height: 1.22 !important;
      color: #ffffff !important;
      text-shadow: 0 4px 32px rgba(0, 0, 0, 0.6) !important;
      letter-spacing: -0.5px !important;
      margin: 0 auto !important;
      margin-bottom: 1.8rem !important;
    }
    .hero-title-phrase {
      display: inline-block;
    }
    @media (min-width: 768px) {
      .hero-title-phrase {
        white-space: nowrap;
      }
    }
    .hero-yly-word {
      display: inline-block;
      font-weight: 900;
      letter-spacing: 0.5px;
      background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 2px 12px rgba(56, 189, 248, 0.4));
      margin-inline-start: 0.4rem;
    }

    /* 4) Mission Tagline / Subtitle */
    .hero-subtitle-new {
      font-size: clamp(1.1rem, 1.4vw, 1.4rem) !important;
      color: rgba(255, 255, 255, 0.92) !important;
      max-width: clamp(600px, 70vw, 950px) !important;
      line-height: 1.8 !important;
      margin: 0 auto !important;
      margin-bottom: 2.2rem !important;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }

    /* 5) CTA Buttons Group */
    .hero-btns {
      display: flex;
      gap: 1.1rem;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin-top: 0.35rem;
    }
    .hero-btn-join {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 clamp(26px, 2.4vw, 36px);
      border-radius: 9999px;
      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
      color: #ffffff;
      font-weight: 700;
      font-size: clamp(0.98rem, 1.05vw, 1.08rem);
      border: 1px solid rgba(255, 255, 255, 0.22);
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 4px 20px rgba(37, 99, 235, 0.5);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }
    .hero-btn-join:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(37, 99, 235, 0.7);
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }
    .hero-btn-explore {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 clamp(26px, 2.4vw, 36px);
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      color: #ffffff;
      font-weight: 700;
      font-size: clamp(0.98rem, 1.05vw, 1.08rem);
      border: 1px solid rgba(255, 255, 255, 0.25);
      cursor: pointer;
      text-decoration: none;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }
    .hero-btn-explore:hover {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.45);
      transform: translateY(-2px);
    }

    /* Slide indicators */
    .hero-dots {
      display: none !important;
    }
    .hero-dot {
      display: none !important;
    }

    /* Scroll indicator */
    .hero-scroll-cue {
      position: absolute;
      bottom: clamp(12px, 2.4vh, 24px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      color: rgba(255, 255, 255, 0.75);
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      user-select: none;
      transition: opacity 0.3s ease, color 0.2s ease;
      background: transparent;
      border: none;
      padding: 4px 12px;
    }
    .hero-scroll-cue:hover {
      color: #ffffff;
    }
    .scroll-cue-arrow {
      animation: subtleBounce 2s ease-in-out infinite;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @keyframes subtleBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(5px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .scroll-cue-arrow {
        animation: none !important;
      }
    }

    /* Compact laptop viewports (e.g. 1366x768 with browser bars = ~650px height) */
    @media (min-width: 768px) and (max-height: 760px) {
      .hero {
        padding-top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
        padding-bottom: 14px !important;
      }
      .hero-inner {
        gap: 0.55rem !important;
        max-width: 820px !important;
      }
      .hero-logo-wrap {
        width: 140px !important;
        height: 140px !important;
        margin-bottom: 1.8rem !important;
      }
      .hero-logo-wrap .hero-logo-img,
      .hero-logo-img {
        width: 100% !important;
        height: 100% !important;
      }
      .hero-reg-tag {
        margin-bottom: 1.5rem !important;
      }
      .hero-title-new {
        font-size: clamp(2.1rem, 3.6vw, 3rem) !important;
        margin-bottom: 1.4rem !important;
      }
      .hero-subtitle-new {
        font-size: 0.98rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.6rem !important;
      }
      .hero-btn-join,
      .hero-btn-explore {
        min-height: 46px !important;
        padding: 0 22px !important;
        font-size: 0.94rem !important;
      }
      .hero-scroll-cue {
        bottom: 8px !important;
      }
    }

    /* === Stats section === */
    .stats-bar {
      background: rgba(10,22,40,0.95);
      backdrop-filter: blur(20px);
      border-top: 1px solid rgba(255,255,255,0.07);
      border-bottom: 1px solid rgba(255,255,255,0.07);
      padding: 2rem 0;
      position: relative;
    }
    .stats-bar::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, #233dff, #233dff, transparent);
    }
    .stats-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    }
    .stat-item {
      display: flex; flex-direction: column; align-items: center;
      padding: 1.5rem 1rem;
      border-left: 1px solid rgba(255,255,255,0.08);
      position: relative;
      transition: background 0.3s ease;
    }
    .stat-item:last-child { border-left: none; }
    html[dir="ltr"] .stat-item { border-left: none; border-right: 1px solid rgba(255,255,255,0.08); }
    html[dir="ltr"] .stat-item:last-child { border-right: none; }
    .stat-item:hover { background: rgba(255,255,255,0.03); }
    .stat-icon-wrap {
      width: 48px; height: 48px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 0.75rem;
    }
    .stat-number-new {
      font-size: 2.4rem; font-weight: 900; color: #fff;
      line-height: 1; font-variant-numeric: tabular-nums;
    }
    .stat-label-new {
      font-size: 0.85rem; color: rgba(255,255,255,0.55);
      margin-top: 4px; text-align: center;
    }

    /* === About Section === */
    .about-section-new {
      padding: 7rem 0;
      background: linear-gradient(180deg, #060d1f 0%, #0a1628 50%, #060d1f 100%);
    }
    .about-inner {
      display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
    }
    .about-badge-new {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(37,99,235,0.15);
      border: 1px solid rgba(37,99,235,0.35);
      border-radius: 50px; padding: 6px 16px;
      color: #233dff; font-size: 0.85rem; font-weight: 600;
      margin-bottom: 1.5rem;
    }
    .about-heading {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 900; color: #fff; margin-bottom: 1.2rem;
      line-height: 1.2;
    }
    .about-desc {
      color: rgba(255,255,255,0.65); line-height: 1.8;
      font-size: 1.05rem; margin-bottom: 1.5rem;
    }
    .about-vision-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px; padding: 1.5rem;
      margin-bottom: 1rem;
      transition: border-color 0.3s ease, background 0.3s ease;
    }
    .about-vision-card:hover {
      border-color: rgba(59,130,246,0.4);
      background: rgba(59,130,246,0.05);
    }
    .about-vision-icon {
      width: 40px; height: 40px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 0.75rem;
    }
    .about-vision-title {
      font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem;
    }
    .about-vision-text {
      font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.6;
    }
    /* About right panel */
    .about-visual-panel {
      position: relative;
    }
    .about-photo-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .about-photo-card {
      border-radius: 16px; overflow: hidden;
      aspect-ratio: 4/3;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      position: relative;
      transition: transform 0.3s ease;
    }
    .about-photo-card:hover { transform: scale(1.02); }
    .about-photo-card:first-child {
      grid-column: span 2; aspect-ratio: 16/7;
    }
    .about-photo-placeholder {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      color: rgba(255,255,255,0.3);
    }
    .about-photo-placeholder svg { opacity: 0.4; }
    .about-photo-placeholder span { font-size: 0.8rem; }
    .about-photo-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .about-photo-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(10,22,40,0.7), transparent);
    }
    .about-photo-label {
      position: absolute; bottom: 12px; right: 12px;
      background: rgba(10,22,40,0.8);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px; padding: 4px 10px;
      font-size: 0.75rem; color: rgba(255,255,255,0.8);
    }
    html[dir="ltr"] .about-photo-label { right: auto; left: 12px; }

    /* Floating stat badges on about photo */
    .about-badge-float {
      position: absolute; z-index: 2;
      background: rgba(10,22,40,0.9);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 12px; padding: 10px 16px;
      display: flex; align-items: center; gap: 10px;
    }
    .about-badge-float-num { font-size: 1.3rem; font-weight: 900; color: #fff; }
    .about-badge-float-label { font-size: 0.75rem; color: rgba(255,255,255,0.6); }

    /* === Timeline === */
    .timeline-section {
      padding: 6rem 0;
      background: #0a1628;
      position: relative; overflow: hidden;
    }
    .timeline-section::before {
      content: ''; position: absolute;
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, rgba(37,99,235,0.06) 0%, transparent 70%);
      top: 50%; right: -200px; transform: translateY(-50%);
    }
    /* Hide scrollbar completely */
    ::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }
    html, body {
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }

    .timeline-wrapper {
      position: relative; max-width: 800px; margin: 0 auto;
    }
    .timeline-line {
      display: none; /* الخط الرأسي مخفي */
    }
    html[dir="ltr"] .timeline-line { right: auto; left: 50%; }
    .timeline-item {
      display: flex; gap: 2rem; margin-bottom: 3rem;
      position: relative;
      transition: all 0.6s ease;
    }
    .timeline-item::before {
      display: none !important;
    }
    .timeline-item.visible { opacity: 1; transform: translateY(0); }
    .timeline-item:nth-child(odd) { flex-direction: row-reverse; text-align: right; }
    .timeline-item:nth-child(even) { text-align: left; }
    html[dir="ltr"] .timeline-item:nth-child(odd) { flex-direction: row; text-align: left; }
    html[dir="ltr"] .timeline-item:nth-child(even) { flex-direction: row-reverse; text-align: right; }
    .timeline-dot-wrap {
      display: none; /* الأيقونات الملونة مخفية */
    }
    .timeline-dot {
      width: 48px; height: 48px; border-radius: 50%;
      background: linear-gradient(135deg, #1034a8, #233dff);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 6px rgba(59,130,246,0.15), 0 4px 20px rgba(59,130,246,0.3);
      font-weight: 900; color: #fff; font-size: 0.8rem;
      flex-shrink: 0; z-index: 2;
    }
    .timeline-content-wrap {
      flex: 1;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      padding: 1.8rem 2.2rem;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .timeline-content-wrap:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(35, 61, 255, 0.5);
      box-shadow: 0 15px 35px rgba(35, 61, 255, 0.2);
    }
    .timeline-year-tag {
      display: inline-flex; align-items: center;
      background: rgba(35, 61, 255, 0.15);
      border: 1px solid rgba(35, 61, 255, 0.35);
      border-radius: 50px; padding: 4px 14px;
      color: #233dff; font-size: 0.85rem; font-weight: 700;
      margin-bottom: 0.8rem;
    }
    .timeline-title {
      font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 0.6rem;
    }
    .timeline-desc {
      font-size: 0.95rem; color: rgba(255,255,255,0.75); line-height: 1.8;
    }

    /* === Achievements === */
    .achievements-section {
      padding: 6rem 0;
      background: linear-gradient(180deg, #0a1628, #060d1f);
    }
    .achievements-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.5rem; margin-top: 3rem;
    }
    .achievement-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px; padding: 2rem;
      transition: all 0.3s ease; position: relative; overflow: hidden;
    }
    .achievement-card::before {
      content: ''; position: absolute;
      top: 0; right: 0; left: 0; height: 3px;
      background: var(--card-accent, linear-gradient(90deg, #233dff, #233dff));
    }
    .achievement-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255,255,255,0.18);
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }
    .achievement-icon {
      font-size: 2.5rem; margin-bottom: 1rem;
    }
    .achievement-num {
      font-size: 2.5rem; font-weight: 900; color: #fff; line-height: 1;
      margin-bottom: 0.4rem;
    }
    .achievement-label {
      font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.8);
      margin-bottom: 0.5rem;
    }
    .achievement-sub {
      font-size: 0.82rem; color: rgba(255,255,255,0.45); line-height: 1.5;
    }

    /* === Videos Section === */
    .videos-section {
      padding: 6rem 0;
      background: #0a1628;
    }
    .videos-grid {
      display: grid; grid-template-columns: 1.4fr 1fr;
      gap: 1.5rem; margin-top: 3rem;
    }
    .video-card-main, .video-card-side {
      border-radius: 16px; overflow: hidden;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      position: relative; cursor: pointer;
      transition: all 0.3s ease;
    }
    .video-card-main { grid-row: span 2; }
    .video-card-main:hover, .video-card-side:hover {
      border-color: rgba(59,130,246,0.4);
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(0,0,0,0.3);
    }
    .video-thumb {
      width: 100%; aspect-ratio: 16/9;
      background: linear-gradient(135deg, #0a1628, #1e3a5f);
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .video-card-main .video-thumb { aspect-ratio: 16/10; }
    .video-play-btn {
      width: 64px; height: 64px; border-radius: 50%;
      background: rgba(37,99,235,0.9);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 12px rgba(37,99,235,0.2);
      transition: all 0.3s ease;
    }
    .video-card-main .video-play-btn { width: 80px; height: 80px; }
    .video-card-main:hover .video-play-btn,
    .video-card-side:hover .video-play-btn {
      transform: scale(1.1);
      box-shadow: 0 0 0 20px rgba(37,99,235,0.15);
    }
    .video-play-btn svg { margin-right: -3px; }
    .video-duration {
      position: absolute; bottom: 10px; right: 10px;
      background: rgba(0,0,0,0.75);
      border-radius: 6px; padding: 3px 8px;
      font-size: 0.78rem; color: #fff;
    }
    html[dir="ltr"] .video-duration { right: auto; left: 10px; }
    .video-card-info {
      padding: 1rem 1.2rem;
    }
    .video-tag {
      display: inline-block;
      background: rgba(59,130,246,0.15);
      border-radius: 50px; padding: 2px 10px;
      font-size: 0.75rem; color: #233dff;
      margin-bottom: 0.5rem;
    }
    .video-title {
      font-size: 0.95rem; font-weight: 700; color: #fff; line-height: 1.4;
    }
    .video-card-main .video-title { font-size: 1.1rem; }

    /* === Alumni Stories === */
    .alumni-section {
      padding: 7rem 0;
      background: linear-gradient(180deg, #0a1628, #060d1f);
    }
    .alumni-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem; margin-top: 3rem;
    }
    .alumni-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px; padding: 2rem;
      transition: all 0.4s ease; position: relative; overflow: hidden;
    }
    .alumni-card::after {
      content: '"'; position: absolute;
      top: -10px; right: 20px; font-size: 8rem;
      color: rgba(59,130,246,0.08); font-family: serif;
      line-height: 1;
    }
    html[dir="ltr"] .alumni-card::after { right: auto; left: 20px; }
    .alumni-card:hover {
      border-color: rgba(59,130,246,0.3);
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    }
    .alumni-avatar-row {
      display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem;
    }
    .alumni-avatar {
      width: 64px; height: 64px; border-radius: 50%;
      background: linear-gradient(135deg, var(--a-color1, #1034a8), var(--a-color2, #233dff));
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; font-weight: 900; color: #fff;
      flex-shrink: 0; border: 2px solid rgba(255,255,255,0.15);
    }
    .alumni-name { font-size: 1rem; font-weight: 700; color: #fff; }
    .alumni-role {
      font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-top: 2px;
    }
    .alumni-now {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(34,197,94,0.1);
      border: 1px solid rgba(34,197,94,0.25);
      border-radius: 50px; padding: 3px 10px;
      font-size: 0.78rem; color: #4ade80; margin-bottom: 1rem;
    }
    .alumni-now svg { opacity: 0.7; }
    .alumni-quote {
      font-size: 0.92rem; color: rgba(255,255,255,0.65);
      line-height: 1.7; font-style: italic;
    }
    .alumni-year-tag {
      display: inline-block; margin-top: 1rem;
      background: rgba(255,255,255,0.06);
      border-radius: 50px; padding: 3px 12px;
      font-size: 0.78rem; color: rgba(255,255,255,0.4);
    }

    /* === Partners Section === */
    .partners-section {
      padding: 5rem 0;
      background: #0a1628;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .partners-label {
      text-align: center; color: rgba(255,255,255,0.4);
      font-size: 0.85rem; font-weight: 600; letter-spacing: 2px;
      text-transform: uppercase; margin-bottom: 2.5rem;
    }
    .partners-scroll {
      display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center;
    }
    .partner-logo {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px; padding: 1.2rem 2rem;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.3s ease; min-width: 140px;
      cursor: default;
    }
    .partner-logo:hover {
      background: rgba(255,255,255,0.09);
      border-color: rgba(255,255,255,0.18);
      transform: translateY(-3px);
    }
    .partner-logo-text {
      font-size: 1.1rem; font-weight: 800; color: rgba(255,255,255,0.55);
      letter-spacing: 1px; transition: color 0.3s ease;
    }
    .partner-logo:hover .partner-logo-text { color: rgba(255,255,255,0.9); }

    /* === Join Modal === */
    .join-modal-overlay {
      position: fixed; inset: 0; z-index: 10000;
      background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden; transition: all 0.3s ease;
      padding: 1rem;
    }
    .join-modal-overlay.open { opacity: 1; visibility: visible; }
    .join-modal {
      background: linear-gradient(135deg, #0a1628, #060d1f);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 24px; padding: 2.5rem;
      max-width: 480px; width: 100%;
      transform: scale(0.9) translateY(20px);
      transition: all 0.3s ease;
      position: relative; overflow: hidden;
    }
    .join-modal-overlay.open .join-modal {
      transform: scale(1) translateY(0);
    }
    .join-modal::before {
      content: ''; position: absolute;
      top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, #233dff, #233dff, #233dff);
    }
    .join-modal-close {
      position: absolute; top: 1.2rem; left: 1.2rem;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px; width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: rgba(255,255,255,0.7);
      transition: all 0.2s ease;
    }
    html[dir="ltr"] .join-modal-close { left: auto; right: 1.2rem; }
    .join-modal-close:hover { background: rgba(255,0,0,0.15); color: #fff; }
    .join-modal-logo {
      display: flex; justify-content: center; margin-bottom: 1.5rem;
    }
    .join-modal-title {
      font-size: 1.6rem; font-weight: 900; color: #fff;
      text-align: center; margin-bottom: 0.5rem;
    }
    .join-modal-subtitle {
      font-size: 0.9rem; color: rgba(255,255,255,0.55);
      text-align: center; margin-bottom: 2rem;
    }
    .join-form-group {
      margin-bottom: 1rem;
    }
    .join-form-label {
      display: block; font-size: 0.85rem; font-weight: 600;
      color: rgba(255,255,255,0.7); margin-bottom: 0.4rem;
    }
    .join-form-input, .join-form-select {
      width: 100%; padding: 12px 16px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px; color: #fff;
      font-size: 0.95rem; font-family: inherit;
      transition: border-color 0.3s ease;
      box-sizing: border-box;
    }
    .join-form-input:focus, .join-form-select:focus {
      outline: none; border-color: #233dff;
      background: rgba(59,130,246,0.08);
    }
    .join-form-input::placeholder { color: rgba(255,255,255,0.3); }
    .join-form-select option { background: #0a1628; color: #fff; }
    .join-submit-btn {
      width: 100%; padding: 14px;
      background: linear-gradient(135deg, #233dff, #1034a8);
      color: #fff; font-weight: 800; font-size: 1rem;
      border: none; border-radius: 12px; cursor: pointer;
      font-family: inherit;
      box-shadow: 0 4px 20px rgba(37,99,235,0.4);
      transition: all 0.3s ease; margin-top: 0.5rem;
    }
    .join-submit-btn:hover {
      background: linear-gradient(135deg, #233dff, #233dff);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(37,99,235,0.5);
    }
    .join-modal-note {
      text-align: center; font-size: 0.8rem;
      color: rgba(255,255,255,0.35); margin-top: 1rem;
    }
    .join-success {
      text-align: center; padding: 2rem 0; display: none;
    }
    .join-success-icon {
      font-size: 4rem; margin-bottom: 1rem;
    }
    .join-success-title {
      font-size: 1.4rem; font-weight: 900; color: #fff; margin-bottom: 0.5rem;
    }
    .join-success-text {
      color: rgba(255,255,255,0.6); font-size: 0.95rem;
    }

    /* News preview redesigned */
    .news-section-new {
      padding: 6rem 0;
      background: linear-gradient(180deg, #0a1628, #060d1f);
    }

    /* Responsive */
    @media (max-width: 900px) {
      .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .stat-item:nth-child(2) { border-left: none; }
      html[dir="ltr"] .stat-item:nth-child(2) { border-right: none; }
      .timeline-item { flex-direction: column !important; text-align: right !important; }
      html[dir="ltr"] .timeline-item { text-align: left !important; }
      .timeline-line { display: none; }
      .videos-grid { grid-template-columns: 1fr; }
      .video-card-main { grid-row: span 1; }
    }
    @media (max-width: 600px) {
      .hero-btns { flex-direction: column; align-items: center; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .stat-item { padding: 1rem 0.5rem; }
      .stat-number-new { font-size: 1.8rem; }
      .about-photo-grid { grid-template-columns: 1fr; }
      .about-photo-card:first-child { grid-column: span 1; }
    }

    /* ====== INTRO - style.css Original ====== */

    #intro-screen {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: radial-gradient(circle at center, #1034a8 0%, #030508 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1200px;
      z-index: 99999;
      pointer-events: all;
      overflow: hidden;
      animation: fadeOutIntro 0.5s ease-out 4.8s forwards;
    }
    .intro-stage {
      position: relative;
      width: clamp(200px, 34vw, 320px);
      height: clamp(200px, 34vw, 320px);
      transform-style: preserve-3d;
      will-change: transform, opacity;
      animation: superDynamicMotion 4.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
    }
    .fx-glow {
      position: absolute;
      top: 50%; left: 50%;
      width: 135%; height: 135%;
      background: radial-gradient(circle, rgba(234,179,8,0.5) 0%, rgba(255,255,255,0.25) 35%, rgba(37,99,235,0.5) 65%, transparent 85%);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      z-index: -1;
      animation: glowPulse 4.7s ease-in-out forwards;
    }
    .logo-box {
      position: relative;
      width: 100%; height: 100%;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 20px 45px rgba(0,0,0,0.85);
    }
    .logo-box::after {
      content: '';
      position: absolute;
      top: -50%; left: -150%;
      width: 70%; height: 200%;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.15) 75%, transparent 100%);
      transform: rotate(25deg);
      animation: lightSweep 4.7s ease-in-out forwards;
      z-index: 10;
      pointer-events: none;
    }
    .logo-card {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: contain;
      border-radius: 50%;
      backface-visibility: hidden;
      filter: drop-shadow(0 10px 25px rgba(0,0,0,0.7));
    }
    .gold-logo  { animation: goldFade  4.7s ease forwards; }
    .white-logo { opacity: 0; animation: whiteFade 4.7s ease forwards; }
    .blue-logo  { opacity: 0; animation: blueFade  4.7s ease forwards; }

    @keyframes lightSweep {
      0%,15% { left:-150%; opacity:0; }
      30%    { opacity:1; }
      50%    { left:180%; opacity:1; }
      51%,68%{ left:-150%; opacity:0; }
      78%    { opacity:1; }
      92%    { left:180%; opacity:1; }
      100%   { opacity:0; }
    }
    @keyframes goldFade  { 0%,22%  { opacity:1; } 32%,100%{ opacity:0; } }
    @keyframes whiteFade { 0%,24%  { opacity:0; } 34%,55% { opacity:1; } 65%,100%{ opacity:0; } }
    @keyframes blueFade  { 0%,58%  { opacity:0; } 68%,100%{ opacity:1; } }
    @keyframes glowPulse {
      0%   { opacity:0; transform:translate(-50%,-50%) scale(0.4); }
      78%  { opacity:1; background:radial-gradient(circle,rgba(37,99,235,0.8) 0%,rgba(147,51,234,0.4) 50%,transparent 80%); transform:translate(-50%,-50%) scale(1.2); }
      88%  { opacity:0.9; transform:translate(-50%,-50%) scale(1); }
      100% { opacity:0; transform:translate(-50%,-50%) scale(2.6); }
    }
    @keyframes fadeOutIntro { to { opacity:0; visibility:hidden; pointer-events:none; } }
    #intro-skip {
      position: absolute;
      bottom: 2rem;
      right: 2rem;
      z-index: 100001;
      display: flex;
      align-items: center;
      gap: 8px;
      pointer-events: all;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.3);
      color: #fff;
      padding: 0.6rem 1.4rem;
      border-radius: 50px;
      font-family: 'Cairo', sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
    #intro-skip:hover { background:rgba(255,255,255,0.25); transform: scale(1.05); }

    /* ==========================================================================
       MODERN LIGHT / PEARL THEME OVERRIDES FOR INDEX.CSS (الوضع النهاري الفاخر)
       ========================================================================== */

    /* 1. Global Sections Transparency in Light Mode */
    body.theme-light .news-section-new,
    html.theme-light .news-section-new,
    [data-theme="light"] .news-section-new,
    body.theme-light #news-preview,
    html.theme-light #news-preview,
    [data-theme="light"] #news-preview,
    body.theme-light .about-section-new,
    html.theme-light .about-section-new,
    [data-theme="light"] .about-section-new,
    body.theme-light .achievements-section,
    html.theme-light .achievements-section,
    [data-theme="light"] .achievements-section,
    body.theme-light .videos-section,
    html.theme-light .videos-section,
    [data-theme="light"] .videos-section,
    body.theme-light #videos,
    html.theme-light #videos,
    [data-theme="light"] #videos,
    body.theme-light .alumni-section,
    html.theme-light .alumni-section,
    [data-theme="light"] .alumni-section,
    body.theme-light .join-section,
    html.theme-light .join-section,
    [data-theme="light"] .join-section,
    body.theme-light .timeline-section,
    html.theme-light .timeline-section,
    [data-theme="light"] .timeline-section {
      background: transparent !important;
    }

    /* 2. Section Headers, Badges, Titles & Subtitles */
    body.theme-light .section-tag,
    html.theme-light .section-tag,
    [data-theme="light"] .section-tag {
      background: rgba(37, 99, 235, 0.08) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      border: 1px solid rgba(37, 99, 235, 0.25) !important;
      color: #1d4ed8 !important;
      font-weight: 700 !important;
      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.06) !important;
    }

    body.theme-light .section-title,
    html.theme-light .section-title,
    [data-theme="light"] .section-title {
      color: #0f172a !important;
      text-shadow: none !important;
    }

    body.theme-light .section-subtitle,
    html.theme-light .section-subtitle,
    [data-theme="light"] .section-subtitle {
      color: #475569 !important;
    }

    /* 3. Standard Cards (Light Mode): News, Videos, Join, Achievements, Alumni, Timeline */
    body.theme-light .news-card,
    body.theme-light .news-card-normal,
    body.theme-light .news-card-featured,
    html.theme-light .news-card,
    html.theme-light .news-card-normal,
    html.theme-light .news-card-featured,
    [data-theme="light"] .news-card,
    [data-theme="light"] .news-card-normal,
    [data-theme="light"] .news-card-featured {
      background: var(--surface, #ffffff) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      box-shadow: var(--shadow-card, 0 8px 16px rgba(30, 64, 175, 0.22)) !important;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    }

    body.theme-light .news-card:hover,
    body.theme-light .news-card-normal:hover,
    body.theme-light .news-card-featured:hover,
    html.theme-light .news-card:hover,
    html.theme-light .news-card-normal:hover,
    html.theme-light .news-card-featured:hover,
    [data-theme="light"] .news-card:hover,
    [data-theme="light"] .news-card-normal:hover,
    [data-theme="light"] .news-card-featured:hover {
      border-color: var(--border-strong, #b9d0ff) !important;
      box-shadow: 0 14px 28px rgba(30, 64, 175, 0.26) !important;
      transform: translateY(-4px) !important;
    }

    body.theme-light .news-card-title,
    body.theme-light .news-card-title a,
    body.theme-light .news-card .card-title,
    body.theme-light .news-card .featured-title,
    html.theme-light .news-card-title,
    html.theme-light .news-card-title a,
    html.theme-light .news-card .card-title,
    html.theme-light .news-card .featured-title,
    [data-theme="light"] .news-card-title,
    [data-theme="light"] .news-card-title a,
    [data-theme="light"] .news-card .card-title,
    [data-theme="light"] .news-card .featured-title {
      color: var(--text-title, #0f2557) !important;
    }

    body.theme-light .news-card-excerpt,
    body.theme-light .news-card-excerpt span,
    body.theme-light .news-card .card-excerpt,
    body.theme-light .news-card .featured-excerpt,
    html.theme-light .news-card-excerpt,
    html.theme-light .news-card-excerpt span,
    html.theme-light .news-card .card-excerpt,
    html.theme-light .news-card .featured-excerpt,
    [data-theme="light"] .news-card-excerpt,
    [data-theme="light"] .news-card-excerpt span,
    [data-theme="light"] .news-card .card-excerpt,
    [data-theme="light"] .news-card .featured-excerpt {
      color: var(--text-secondary, #4a5d88) !important;
    }

    /* === Partners Section (Light Mode) === */
    body.theme-light .partners-section,
    html.theme-light .partners-section,
    [data-theme="light"] .partners-section {
      background:
        radial-gradient(1000px 450px at 50% 50%, rgba(37, 99, 235, 0.08) 0%, rgba(56, 189, 248, 0.04) 45%, transparent 75%),
        linear-gradient(180deg, #f0f6ff 0%, #e6f1fe 50%, #f0f6ff 100%) !important;
      border-top: 1px solid rgba(37, 99, 235, 0.12) !important;
      border-bottom: 1px solid rgba(37, 99, 235, 0.12) !important;
      position: relative !important;
    }
    body.theme-light .partners-label,
    html.theme-light .partners-label,
    [data-theme="light"] .partners-label {
      color: #1d4ed8 !important;
      font-weight: 800 !important;
      font-size: 0.95rem !important;
      letter-spacing: 2px !important;
      text-transform: uppercase !important;
      opacity: 1 !important;
    }
    body.theme-light .partner-logo,
    html.theme-light .partner-logo,
    [data-theme="light"] .partner-logo {
      background: var(--card-mesh, radial-gradient(circle at 12% 15%, rgba(184, 208, 255, 0.82) 0%, transparent 45%), radial-gradient(circle at 88% 85%, rgba(203, 220, 255, 0.85) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(191, 227, 255, 0.75) 0%, transparent 50%), radial-gradient(circle at 92% 10%, rgba(211, 216, 255, 0.65) 0%, transparent 35%), #EAF1FF) !important;
      border: 1px solid rgba(37, 99, 235, 0.25) !important;
      box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18) !important;
      border-radius: 16px !important;
      padding: 1.25rem 2.2rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: default !important;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    }
    body.theme-light .partner-logo:nth-child(2n),
    html.theme-light .partner-logo:nth-child(2n),
    [data-theme="light"] .partner-logo:nth-child(2n) {
      background: var(--card-mesh-alt) !important;
    }
    body.theme-light .partner-logo:nth-child(3n),
    html.theme-light .partner-logo:nth-child(3n),
    [data-theme="light"] .partner-logo:nth-child(3n) {
      background: var(--card-mesh-alt2) !important;
    }
    body.theme-light .partner-logo:hover,
    html.theme-light .partner-logo:hover,
    [data-theme="light"] .partner-logo:hover {
      border-color: rgba(37, 99, 235, 0.38) !important;
      box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16) !important;
      transform: translateY(-3px) !important;
    }
    body.theme-light .partner-logo-text,
    html.theme-light .partner-logo-text,
    [data-theme="light"] .partner-logo-text {
      color: #0f2557 !important;
      font-weight: 800 !important;
      font-size: 1.05rem !important;
      letter-spacing: 0.5px !important;
      text-shadow: none !important;
      transition: color 0.25s ease !important;
    }
    body.theme-light .partner-logo:hover .partner-logo-text,
    html.theme-light .partner-logo:hover .partner-logo-text,
    [data-theme="light"] .partner-logo:hover .partner-logo-text {
      color: #1d4ed8 !important;
      text-shadow: 0 0 12px rgba(37, 99, 235, 0.2) !important;
    }

    body.theme-light .news-card-meta,
    body.theme-light .news-card .meta-date,
    body.theme-light .news-card .meta-gov,
    html.theme-light .news-card-meta,
    html.theme-light .news-card .meta-date,
    html.theme-light .news-card .meta-gov,
    [data-theme="light"] .news-card-meta,
    [data-theme="light"] .news-card .meta-date,
    [data-theme="light"] .news-card .meta-gov {
      color: var(--text-muted, #5b6c93) !important;
    }

    /* 4. News Section CTA Button */
    body.theme-light .news-section-new .section-cta a,
    html.theme-light .news-section-new .section-cta a,
    [data-theme="light"] .news-section-new .section-cta a {
      background: var(--surface, #ffffff) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      color: var(--text-link, #1d4ed8) !important;
      box-shadow: 0 4px 15px rgba(30, 64, 175, 0.08) !important;
    }

    body.theme-light .news-section-new .section-cta a:hover,
    html.theme-light .news-section-new .section-cta a:hover,
    [data-theme="light"] .news-section-new .section-cta a:hover {
      background: var(--btn-gradient, linear-gradient(135deg, #2563eb, #1e40af)) !important;
      border-color: var(--accent-strong, #1e40af) !important;
      color: #ffffff !important;
      box-shadow: var(--shadow-btn, 0 8px 16px rgba(37, 99, 235, 0.35)) !important;
    }

    /* 5. Video Cards in Light Mode */
    body.theme-light .video-card-main,
    body.theme-light .video-card-side,
    html.theme-light .video-card-main,
    html.theme-light .video-card-side,
    [data-theme="light"] .video-card-main,
    [data-theme="light"] .video-card-side {
      background: var(--surface, #ffffff) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      box-shadow: var(--shadow-card, 0 8px 16px rgba(30, 64, 175, 0.22)) !important;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    }

    body.theme-light .video-card-main:hover,
    body.theme-light .video-card-side:hover,
    html.theme-light .video-card-main:hover,
    html.theme-light .video-card-side:hover,
    [data-theme="light"] .video-card-main:hover,
    [data-theme="light"] .video-card-side:hover {
      border-color: var(--border-strong, #b9d0ff) !important;
      box-shadow: 0 14px 28px rgba(30, 64, 175, 0.26) !important;
      transform: translateY(-4px) !important;
    }

    body.theme-light .video-title,
    body.theme-light .video-card-info .video-title,
    html.theme-light .video-title,
    html.theme-light .video-card-info .video-title,
    [data-theme="light"] .video-title,
    [data-theme="light"] .video-card-info .video-title {
      color: var(--text-title, #0f2557) !important;
    }

    body.theme-light .video-tag,
    html.theme-light .video-tag,
    [data-theme="light"] .video-tag {
      background: var(--surface-soft, #eef4ff) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      color: var(--text-link, #1d4ed8) !important;
    }

    /* 6. Join CTA Card in Light Mode */
    body.theme-light .join-card,
    html.theme-light .join-card,
    [data-theme="light"] .join-card {
      background: var(--surface, #ffffff) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      box-shadow: var(--shadow-card, 0 8px 16px rgba(30, 64, 175, 0.22)) !important;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    }
    body.theme-light .join-card:hover,
    html.theme-light .join-card:hover,
    [data-theme="light"] .join-card:hover {
      border-color: var(--border-strong, #b9d0ff) !important;
      box-shadow: 0 14px 28px rgba(30, 64, 175, 0.26) !important;
      transform: translateY(-4px) !important;
    }
    body.theme-light .join-title,
    html.theme-light .join-title,
    [data-theme="light"] .join-title {
      color: var(--text-title, #0f2557) !important;
    }
    body.theme-light .join-subtitle,
    html.theme-light .join-subtitle,
    [data-theme="light"] .join-subtitle {
      color: var(--text-secondary, #4a5d88) !important;
    }
    body.theme-light .join-badge,
    html.theme-light .join-badge,
    [data-theme="light"] .join-badge {
      background: var(--surface-soft, #eef4ff) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      color: var(--text-link, #1d4ed8) !important;
    }
    body.theme-light .join-badge svg,
    html.theme-light .join-badge svg,
    [data-theme="light"] .join-badge svg {
      stroke: var(--text-link, #1d4ed8) !important;
    }
    body.theme-light .join-stat,
    html.theme-light .join-stat,
    [data-theme="light"] .join-stat {
      background: var(--surface-soft, #eef4ff) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
    }
    body.theme-light .join-stat-num,
    html.theme-light .join-stat-num,
    [data-theme="light"] .join-stat-num {
      color: var(--accent, #2563eb) !important;
    }
    body.theme-light .join-stat-label,
    html.theme-light .join-stat-label,
    [data-theme="light"] .join-stat-label {
      color: var(--text-secondary, #4a5d88) !important;
    }
    body.theme-light .join-card .btn-secondary,
    html.theme-light .join-card .btn-secondary,
    [data-theme="light"] .join-card .btn-secondary {
      background: var(--surface, #ffffff) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      color: var(--text-body, #1e2f5c) !important;
    }
    body.theme-light .join-card .btn-secondary:hover,
    html.theme-light .join-card .btn-secondary:hover,
    [data-theme="light"] .join-card .btn-secondary:hover {
      background: var(--surface-soft, #eef4ff) !important;
      border-color: var(--border-strong, #b9d0ff) !important;
      color: var(--text-link, #1d4ed8) !important;
    }

    /* 7. Achievements in Light Mode */
    body.theme-light .achievement-card,
    html.theme-light .achievement-card,
    [data-theme="light"] .achievement-card {
      background: var(--surface, #ffffff) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      box-shadow: var(--shadow-card, 0 8px 16px rgba(30, 64, 175, 0.22)) !important;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    }
    body.theme-light .achievement-card:hover,
    html.theme-light .achievement-card:hover,
    [data-theme="light"] .achievement-card:hover {
      border-color: var(--border-strong, #b9d0ff) !important;
      box-shadow: 0 14px 28px rgba(30, 64, 175, 0.26) !important;
      transform: translateY(-4px) !important;
    }
    body.theme-light .achievement-icon,
    html.theme-light .achievement-icon,
    [data-theme="light"] .achievement-icon {
      background: var(--surface-soft, #eef4ff) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      color: var(--accent, #2563eb) !important;
    }
    body.theme-light .achievement-icon svg,
    html.theme-light .achievement-icon svg,
    [data-theme="light"] .achievement-icon svg {
      stroke: var(--accent, #2563eb) !important;
    }
    body.theme-light .achievement-num,
    html.theme-light .achievement-num,
    [data-theme="light"] .achievement-num {
      color: var(--accent, #2563eb) !important;
    }
    body.theme-light .achievement-label,
    html.theme-light .achievement-label,
    [data-theme="light"] .achievement-label {
      color: var(--text-title, #0f2557) !important;
    }
    body.theme-light .achievement-sub,
    html.theme-light .achievement-sub,
    [data-theme="light"] .achievement-sub {
      color: var(--text-secondary, #4a5d88) !important;
    }

    /* 8. Alumni Stories in Light Mode */
    body.theme-light .alumni-card,
    html.theme-light .alumni-card,
    [data-theme="light"] .alumni-card {
      background: var(--surface, #ffffff) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      box-shadow: var(--shadow-card, 0 8px 16px rgba(30, 64, 175, 0.22)) !important;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    }
    body.theme-light .alumni-card:hover,
    html.theme-light .alumni-card:hover,
    [data-theme="light"] .alumni-card:hover {
      border-color: var(--border-strong, #b9d0ff) !important;
      box-shadow: 0 14px 28px rgba(30, 64, 175, 0.26) !important;
      transform: translateY(-4px) !important;
    }
    body.theme-light .alumni-name,
    html.theme-light .alumni-name,
    [data-theme="light"] .alumni-name {
      color: var(--text-title, #0f2557) !important;
    }
    body.theme-light .alumni-role,
    html.theme-light .alumni-role,
    [data-theme="light"] .alumni-role {
      color: var(--text-secondary, #4a5d88) !important;
    }
    body.theme-light .alumni-now,
    html.theme-light .alumni-now,
    [data-theme="light"] .alumni-now {
      background: #f0fdf4 !important;
      color: #15803d !important;
      border: 1px solid #bbf7d0 !important;
    }
    body.theme-light .alumni-now svg,
    html.theme-light .alumni-now svg,
    [data-theme="light"] .alumni-now svg {
      stroke: #15803d !important;
    }
    body.theme-light .alumni-quote,
    html.theme-light .alumni-quote,
    [data-theme="light"] .alumni-quote {
      color: var(--text-body, #1e2f5c) !important;
    }
    body.theme-light .alumni-year-tag,
    html.theme-light .alumni-year-tag,
    [data-theme="light"] .alumni-year-tag {
      background: var(--surface-soft, #eef4ff) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      color: var(--text-link, #1d4ed8) !important;
    }

    /* 9. Timeline in Light Mode */
    body.theme-light .timeline-content-wrap,
    html.theme-light .timeline-content-wrap,
    [data-theme="light"] .timeline-content-wrap {
      background: var(--surface, #ffffff) !important;
      border: 1px solid var(--border, #d6e4ff) !important;
      box-shadow: var(--shadow-card, 0 8px 16px rgba(30, 64, 175, 0.22)) !important;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    }
    body.theme-light .timeline-content-wrap:hover,
    body.theme-light .timeline-item.tl-expanded .timeline-content-wrap,
    html.theme-light .timeline-content-wrap:hover,
    html.theme-light .timeline-item.tl-expanded .timeline-content-wrap,
    [data-theme="light"] .timeline-content-wrap:hover,
    [data-theme="light"] .timeline-item.tl-expanded .timeline-content-wrap {
      border-color: var(--border-strong, #b9d0ff) !important;
      box-shadow: 0 14px 28px rgba(30, 64, 175, 0.26) !important;
    }
    body.theme-light .timeline-title,
    body.theme-light .timeline-content-wrap .timeline-title,
    html.theme-light .timeline-title,
    html.theme-light .timeline-content-wrap .timeline-title,
    [data-theme="light"] .timeline-title,
    [data-theme="light"] .timeline-content-wrap .timeline-title {
      color: var(--text-title, #0f2557) !important;
    }
    body.theme-light .timeline-desc,
    body.theme-light .timeline-content-wrap .timeline-desc,
    html.theme-light .timeline-desc,
    html.theme-light .timeline-content-wrap .timeline-desc,
    [data-theme="light"] .timeline-desc,
    [data-theme="light"] .timeline-content-wrap .timeline-desc {
      color: var(--text-secondary, #4a5d88) !important;
    }