/* ===== header.css ===== */
    /* ISNM Color Scheme Variables */
    :root {
      --isnm-yellow: #FFD700;
      --isnm-cream: #FFF8DC;
      --isnm-chocolate: #3E2723;
      --isnm-dark-blue: #1A237E;
      --isnm-light-blue: #3949AB;
      --isnm-gold: #FFA000;
      --isnm-beige: #F5F5DC;
    }
    
    /* Perfect Mobile Base Styles */
    * {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
    
    html {
      font-size: 16px;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      scroll-behavior: smooth;
    }
    
    body {
      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      line-height: 1.6;
      color: #333;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /* Perfect Mobile Images */
    img {
      max-width: 100%;
      height: auto;
      border: 0;
      -webkit-touch-callout: none;
    }
    
    /* Touch-friendly buttons */
    button, input, select, textarea {
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      margin: 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    
    button, .btn {
      cursor: pointer;
      touch-action: manipulation;
      min-height: 44px;
      min-width: 44px;
      padding: 12px 24px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }
    
    /* ===== 3D Glassmorphic Navigation ===== */
    :root {
      --nav-glass-bg: rgba(30, 18, 14, 0.75);
      --nav-glass-border: rgba(255, 215, 0, 0.15);
      --nav-glass-shadow: 0 8px 32px rgba(0,0,0,0.35);
      --nav-link-glow: rgba(255, 215, 0, 0.15);
      --nav-gold: var(--isnm-yellow);
      --nav-cream: var(--isnm-cream);
    }
    
    .navbar {
      background: transparent !important;
      padding: 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      width: 100%;
      height: 0;
      pointer-events: none;
    }
    .isnm-navbar {
      background: var(--nav-glass-bg) !important;
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border-bottom: 1px solid var(--nav-glass-border);
      box-shadow: var(--nav-glass-shadow), inset 0 1px 0 rgba(255,255,255,0.05);
      pointer-events: auto;
      position: relative;
      top: 0;
      min-height: 64px;
      transform-style: preserve-3d;
      perspective: 1200px;
      transition: background 0.4s, box-shadow 0.4s;
    }
    .isnm-navbar.scrolled {
      background: rgba(30, 18, 14, 0.92) !important;
      box-shadow: 0 4px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,215,0,0.08);
    }
    /* Shine overlay */
    .isnm-navbar::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,215,0,0.04), transparent);
      transform: skewX(-25deg);
      animation: navShine 8s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes navShine {
      0%, 100% { left: -100%; }
      50% { left: 200%; }
    }
    
    /* Glass edge glow */
    .isnm-navbar::after {
      content: '';
      position: absolute;
      bottom: -1px; left: 10%; right: 10%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--isnm-yellow), transparent);
      opacity: 0.4;
      filter: blur(1px);
    }
    
    .navbar-brand {
      display: flex;
      align-items: center;
      padding: 8px 15px;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--isnm-yellow) !important;
      text-shadow: 0 0 20px rgba(255,215,0,0.2);
      letter-spacing: 0.5px;
    }
    .navbar-brand:hover {
      text-shadow: 0 0 30px rgba(255,215,0,0.4);
    }
    .navbar-brand img {
      height: 36px;
      width: auto;
      margin-right: 10px;
      border-radius: 50%;
      border: 2px solid rgba(255,215,0,0.3);
      box-shadow: 0 0 15px rgba(255,215,0,0.15);
      transition: all 0.4s;
    }
    .navbar-brand:hover img {
      border-color: var(--isnm-yellow);
      box-shadow: 0 0 25px rgba(255,215,0,0.3);
      transform: rotate(-5deg) scale(1.05);
    }
    
    /* ── Toggler (hamburger) ── */
    .navbar-toggler {
      border: none;
      padding: 8px 12px;
      font-size: 1.5rem;
      color: var(--isnm-yellow);
      background: rgba(255,215,0,0.1);
      border-radius: 10px;
      backdrop-filter: blur(10px);
      box-shadow: 0 0 15px rgba(255,215,0,0.05);
      transition: all 0.3s;
    }
    .navbar-toggler:hover {
      background: rgba(255,215,0,0.2);
      box-shadow: 0 0 25px rgba(255,215,0,0.15);
      transform: scale(1.05);
    }
    .navbar-toggler-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      background: transparent;
      background-image: none;
      position: relative;
      color: var(--isnm-yellow);
    }
    .navbar-toggler-icon::before {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f0c9";
      font-size: 1.2rem;
      color: var(--isnm-yellow);
      transition: transform 0.4s;
    }
    .navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
      content: "\f00d";
      transform: rotate(90deg);
    }
    .navbar-toggler:focus {
      box-shadow: 0 0 0 3px rgba(255,215,0,0.3);
      outline: none;
    }
    
    /* ── Nav List ── */
    .navbar-nav {
      padding: 0;
      gap: 2px;
      align-items: center;
    }
    
    /* ── 3D Nav Link ── */
    .nav-link {
      color: rgba(255,255,255,0.85) !important;
      padding: 8px 16px !important;
      font-weight: 500;
      font-size: 0.85rem;
      border-radius: 10px;
      margin: 4px 2px;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      text-align: center;
      position: relative;
      transform-style: preserve-3d;
      transform: translateZ(0);
      letter-spacing: 0.3px;
      background: transparent;
      border: 1px solid transparent;
    }
    /* 3D floating card beneath */
    .nav-link::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(255,215,0,0.08), transparent);
      opacity: 0;
      transform: translateZ(-4px) scale(0.96);
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      pointer-events: none;
    }
    /* Glow underline */
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 2px; left: 50%;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--isnm-yellow), transparent);
      border-radius: 2px;
      transform: translateX(-50%) translateZ(2px);
      transition: width 0.4s cubic-bezier(0.34,1.56,0.64,1);
      filter: blur(1px);
      box-shadow: 0 0 8px var(--isnm-yellow);
    }
    
    .nav-link:hover, .nav-link:focus {
      color: var(--isnm-yellow) !important;
      background: rgba(255,215,0,0.06);
      border-color: rgba(255,215,0,0.12);
      transform: translateY(-2px) translateZ(6px) scale(1.04);
      box-shadow: 0 8px 25px rgba(255,215,0,0.08), 0 0 0 1px rgba(255,215,0,0.05);
    }
    .nav-link:hover::before {
      opacity: 1;
      transform: translateZ(-4px) scale(1);
      background: linear-gradient(135deg, rgba(255,215,0,0.12), transparent);
    }
    .nav-link:hover::after {
      width: 60%;
    }
    .nav-link:active {
      transform: translateY(0px) translateZ(2px) scale(0.98);
      transition-duration: 0.1s;
    }
    
    .nav-link.active {
      background: rgba(255,215,0,0.12);
      color: var(--isnm-yellow) !important;
      border-color: rgba(255,215,0,0.2);
      box-shadow: 0 0 20px rgba(255,215,0,0.06), inset 0 1px 0 rgba(255,215,0,0.1);
      transform: translateZ(2px);
    }
    .nav-link.active::after {
      width: 70%;
    }
    .nav-link i {
      margin-right: 4px;
      font-size: 0.8rem;
      transition: transform 0.3s;
    }
    .nav-link:hover i {
      transform: scale(1.2);
    }
    
    /* ── 3D Dropdown ── */
    .dropdown-menu {
      background: rgba(30, 18, 14, 0.88) !important;
      backdrop-filter: blur(25px) saturate(1.5);
      -webkit-backdrop-filter: blur(25px) saturate(1.5);
      border: 1px solid rgba(255,215,0,0.12);
      border-radius: 14px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,215,0,0.05), inset 0 1px 0 rgba(255,255,255,0.03);
      padding: 8px;
      margin-top: 8px;
      transform-style: preserve-3d;
      transform-origin: top center;
      animation: dropIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    @keyframes dropIn {
      0% { opacity: 0; transform: translateY(-8px) rotateX(-4deg) scale(0.96); }
      100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
    }
    .dropdown-item {
      color: rgba(255,255,255,0.8);
      padding: 10px 18px;
      border-radius: 8px;
      margin: 2px 0;
      font-size: 0.85rem;
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
      position: relative;
      transform-style: preserve-3d;
    }
    .dropdown-item i {
      width: 20px;
      text-align: center;
      margin-right: 10px;
      color: var(--isnm-yellow);
      transition: transform 0.3s;
    }
    .dropdown-item:hover {
      background: rgba(255,215,0,0.1);
      color: var(--isnm-yellow) !important;
      transform: translateX(4px) translateZ(4px);
    }
    .dropdown-item:hover i {
      transform: scale(1.3);
    }
    .dropdown-item:active {
      transform: translateX(2px) translateZ(1px) scale(0.98);
    }
    .dropdown-divider {
      border-top: 1px solid rgba(255,215,0,0.1);
      margin: 4px 0;
    }
    .dropdown-header {
      color: var(--isnm-yellow);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 6px 18px;
    }
    
    /* ── Mobile ── */
    @media (max-width: 991px) {
      .isnm-navbar .container {
        max-width: 100%;
        padding: 0 12px;
      }
      .navbar-brand {
        font-size: 1rem;
        padding: 8px 10px;
      }
      .navbar-brand img {
        height: 32px;
      }
      .navbar-nav {
        background: rgba(20, 12, 10, 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 12px;
        margin: 8px -12px -8px;
        border-radius: 16px;
        border: 1px solid rgba(255,215,0,0.08);
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        max-height: 80vh;
        overflow-y: auto;
      }
      .nav-link {
        margin: 3px 0;
        padding: 14px 18px !important;
        font-size: 0.95rem;
        border-radius: 12px;
        text-align: left;
      }
      .nav-link::after { display: none; }
      .nav-link:hover {
        transform: translateX(6px);
      }
      .dropdown-menu {
        background: rgba(15, 10, 8, 0.95) !important;
        border: 1px solid rgba(255,215,0,0.08);
        border-radius: 12px;
        margin: 4px 0 4px 16px;
        padding: 6px;
        animation: none;
        box-shadow: none;
      }
      .dropdown-item {
        padding: 12px 16px;
        font-size: 0.9rem;
      }
      .navbar-toggler {
        margin: 6px 0;
      }
    }
    
    @media (max-width: 480px) {
      .isnm-navbar {
        min-height: 56px;
      }
      .navbar-brand {
        font-size: 0.9rem;
        padding: 6px 8px;
      }
      .navbar-brand img {
        height: 28px;
      }
      .nav-link {
        padding: 12px 14px !important;
        font-size: 0.9rem;
      }
      .navbar-nav {
        padding: 10px;
        margin: 6px -10px -6px;
        border-radius: 12px;
      }
      .navbar-toggler {
        padding: 6px 10px;
        font-size: 1.3rem;
      }
      .dropdown-menu {
        margin-left: 12px;
        border-radius: 10px;
      }
    }
    
    /* Landscape Mobile */
    @media (max-height: 500px) and (orientation: landscape) {
      .isnm-navbar {
        min-height: 48px;
      }
      .navbar-brand img {
        height: 22px;
      }
      .nav-link {
        padding: 6px 12px !important;
        font-size: 0.8rem;
      }
      .navbar-nav {
        max-height: 60vh;
        padding: 8px;
      }
    }
    
    /* iOS glass support */
    @supports (-webkit-backdrop-filter: blur(20px)) {
      .isnm-navbar {
        background: rgba(30, 18, 14, 0.65) !important;
      }
    }
    
    /* Perfectly Aligned ISNM Header */
    .isnm-header {
      background: linear-gradient(135deg, var(--isnm-chocolate), var(--isnm-dark-blue));
      padding: 20px 30px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      position: relative;
      z-index: 1000;
      border-bottom: 3px solid var(--isnm-yellow);
    }
    
    .isnm-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: repeating-linear-gradient(
        90deg,
        var(--isnm-yellow) 0px,
        var(--isnm-yellow) 15px,
        var(--isnm-cream) 15px,
        var(--isnm-cream) 30px,
        var(--isnm-gold) 30px,
        var(--isnm-gold) 45px
      );
      animation: stripeMove 4s linear infinite;
    }
    
    @keyframes stripeMove {
      0% { transform: translateX(0); }
      100% { transform: translateX(45px); }
    }
    
    /* ===== Animated Red Stripe Under Cards (3D Moving Effect) ===== */
    .card-3d-stripe,
    .donation-card,
    .project-card,
    .opportunity-card,
    .benefit-card,
    .vmv-card,
    .member-card,
    .program-item,
    .impact-item,
    .timeline-content-card {
      position: relative;
      overflow: visible;
    }
    .card-3d-stripe::after,
    .donation-card::after,
    .project-card::after,
    .opportunity-card::after,
    .benefit-card::after,
    .vmv-card::after,
    .member-card::after,
    .program-item::after,
    .impact-item::after,
    .timeline-content-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -10%;
      right: -10%;
      height: 5px;
      background: repeating-linear-gradient(
        90deg,
        #DC2626 0px,
        #DC2626 12px,
        transparent 12px,
        transparent 16px,
        #EF4444 16px,
        #EF4444 28px,
        transparent 28px,
        transparent 32px
      );
      background-size: 64px 5px;
      animation: redStripeMove 2s linear infinite;
      z-index: 10;
      border-radius: 0 0 12px 12px;
      pointer-events: none;
    }
    @keyframes redStripeMove {
      0% { background-position: 0 0; }
      100% { background-position: 64px 0; }
    }
    
    /* Thicker, more vibrant red stripe for featured cards */
    .stripe-featured::after {
      height: 6px !important;
      background: repeating-linear-gradient(
        90deg,
        #B91C1C 0px,
        #B91C1C 10px,
        #FCA5A5 10px,
        #FCA5A5 20px,
        #DC2626 20px,
        #DC2626 30px,
        #FCA5A5 30px,
        #FCA5A5 40px
      ) !important;
      background-size: 80px 6px !important;
      animation: redStripeMoveVivid 1.5s linear infinite !important;
      filter: drop-shadow(0 2px 4px rgba(220,38,38,0.3));
    }
    @keyframes redStripeMoveVivid {
      0% { background-position: 0 0; }
      100% { background-position: 80px 0; }
    }
    
    /* ===== Decorative floating shapes ===== */
    .decor-shape {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0.06;
      z-index: 0;
    }
    .decor-shape-1 {
      width: 300px; height: 300px;
      background: var(--isnm-yellow, #FFD700);
      top: -80px; right: -60px;
      animation: floatDecor 8s ease-in-out infinite;
    }
    .decor-shape-2 {
      width: 200px; height: 200px;
      background: #EF4444;
      bottom: -50px; left: -40px;
      animation: floatDecor 6s ease-in-out infinite reverse;
    }
    .decor-shape-3 {
      width: 150px; height: 150px;
      background: #3949AB;
      top: 30%; left: 60%;
      animation: floatDecor 10s ease-in-out infinite;
    }
    @keyframes floatDecor {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-15px) scale(1.05); }
    }
    
    .header-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1400px;
      margin: 0 auto;
      height: 80px;
      position: relative;
    }
    
    .header-logo {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
    }
    
    .logo-img {
      height: 60px;
      width: auto;
      border-radius: 50%;
      border: 3px solid var(--isnm-yellow);
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
      transition: all 0.3s ease;
      background: var(--isnm-cream);
      padding: 3px;
    }
    
    .logo-img:hover {
      transform: scale(1.08) rotate(2deg);
      box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
      border-color: var(--isnm-gold);
    }
    
    .header-logo-right {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
    }
    
    .logo-img-right {
      height: 60px;
      width: auto;
      border-radius: 50%;
      border: 3px solid var(--isnm-yellow);
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
      transition: all 0.3s ease;
      background: var(--isnm-cream);
      padding: 3px;
    }
    
    .logo-img-right:hover {
      transform: scale(1.08) rotate(-2deg);
      box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
      border-color: var(--isnm-gold);
    }
    
    .logo-link {
      display: block;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    .logo-link:hover {
      transform: scale(1.05);
    }
    
    .logo-link:hover .logo-img,
    .logo-link:hover .logo-img-right {
      transform: scale(1.08) rotate(2deg);
      box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
      border-color: var(--isnm-gold);
    }
    
    .header-title {
      flex: 1;
      text-align: center;
      padding: 0 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 0;
      max-width: calc(100% - 160px);
    }
    
    .title-wrapper {
      overflow: hidden;
      position: relative;
      width: 100%;
      margin-bottom: 8px;
      height: 50px;
      display: flex;
      align-items: center;
    }
    
    .ticker-wrapper {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
    }
    
    .ticker-track {
      display: flex;
      white-space: nowrap;
      animation: tickerScroll 20s linear infinite;
      will-change: transform;
    }
    
    .school-title {
      font-family: 'Rockwell Extra Bold', 'Rockwell', serif;
      font-weight: 900;
      font-size: 2.2rem;
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 3px;
      white-space: nowrap;
      display: inline-block;
      padding-right: 80px;
      
      /* Clean 3D Text Effect - Embossed Look */
      text-shadow: 
        /* Main depth shadows */
        0px 1px 0px rgba(0, 0, 0, 0.8),
        0px 2px 0px rgba(0, 0, 0, 0.7),
        0px 3px 0px rgba(0, 0, 0, 0.6),
        0px 4px 0px rgba(0, 0, 0, 0.5),
        0px 5px 0px rgba(0, 0, 0, 0.4),
        /* Subtle highlight */
        0px -1px 0px rgba(255, 255, 255, 0.1),
        0px -2px 0px rgba(255, 255, 255, 0.05);
      
      /* Color Cycling Animation - 5 Second Intervals */
      animation: 
        tickerScroll 20s linear infinite,
        colorCycle 25s ease-in-out infinite;
      
      /* Initial color */
      color: var(--isnm-yellow);
      
      filter: contrast(1.1) brightness(1.1);
    }
    
    /* Color Cycling Keyframes - 5 seconds each color */
    @keyframes colorCycle {
      0%, 20% {
        color: var(--isnm-yellow);
        text-shadow: 
          0px 1px 0px rgba(0, 0, 0, 0.8),
          0px 2px 0px rgba(0, 0, 0, 0.7),
          0px 3px 0px rgba(0, 0, 0, 0.6),
          0px 4px 0px rgba(0, 0, 0, 0.5),
          0px 5px 0px rgba(0, 0, 0, 0.4),
          0px -1px 0px rgba(255, 255, 255, 0.1),
          0px -2px 0px rgba(255, 255, 255, 0.05);
      }
      25%, 45% {
        color: var(--isnm-cream);
        text-shadow: 
          0px 1px 0px rgba(0, 0, 0, 0.8),
          0px 2px 0px rgba(0, 0, 0, 0.7),
          0px 3px 0px rgba(0, 0, 0, 0.6),
          0px 4px 0px rgba(0, 0, 0, 0.5),
          0px 5px 0px rgba(0, 0, 0, 0.4),
          0px -1px 0px rgba(0, 0, 0, 0.1),
          0px -2px 0px rgba(0, 0, 0, 0.05);
      }
      50%, 70% {
        color: #90EE90; /* Light Green */
        text-shadow: 
          0px 1px 0px rgba(0, 0, 0, 0.8),
          0px 2px 0px rgba(0, 0, 0, 0.7),
          0px 3px 0px rgba(0, 0, 0, 0.6),
          0px 4px 0px rgba(0, 0, 0, 0.5),
          0px 5px 0px rgba(0, 0, 0, 0.4),
          0px -1px 0px rgba(255, 255, 255, 0.15),
          0px -2px 0px rgba(255, 255, 255, 0.08);
      }
      75%, 95% {
        color: var(--isnm-light-blue);
        text-shadow: 
          0px 1px 0px rgba(0, 0, 0, 0.8),
          0px 2px 0px rgba(0, 0, 0, 0.7),
          0px 3px 0px rgba(0, 0, 0, 0.6),
          0px 4px 0px rgba(0, 0, 0, 0.5),
          0px 5px 0px rgba(0, 0, 0, 0.4),
          0px -1px 0px rgba(255, 255, 255, 0.12),
          0px -2px 0px rgba(255, 255, 255, 0.06);
      }
      100% {
        color: var(--isnm-chocolate);
        text-shadow: 
          0px 1px 0px rgba(0, 0, 0, 0.8),
          0px 2px 0px rgba(0, 0, 0, 0.7),
          0px 3px 0px rgba(0, 0, 0, 0.6),
          0px 4px 0px rgba(0, 0, 0, 0.5),
          0px 5px 0px rgba(0, 0, 0, 0.4),
          0px -1px 0px rgba(255, 255, 255, 0.08),
          0px -2px 0px rgba(255, 255, 255, 0.04);
      }
    }
    
    @keyframes tickerScroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    
    .school-motto {
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      font-size: 0.95rem;
      color: var(--isnm-cream);
      margin: 0;
      font-style: italic;
      opacity: 0.95;
      text-shadow: 0 2px 4px rgba(0,0,0,0.4);
      letter-spacing: 0.5px;
    }
    
    /* Cinematic Hero Section */
    .hero-section {
      position: relative;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 500px;
    }
    
    .hero-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    
    .hero-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 2s ease-in-out;
      transform: scale(1.1);
    }
    
    .hero-slide.active {
      opacity: 1;
      transform: scale(1);
    }
    
    .hero-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      image-rendering: pixelated;
      backface-visibility: hidden;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      -webkit-font-smoothing: antialiased;
    }
    
    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.8) 100%
      );
      z-index: 2;
    }
    
    .hero-content {
      position: relative;
      z-index: 3;
      text-align: center;
      width: 100%;
      max-width: 1200px;
      padding: 0 20px;
    }
    
    .cinematic-title-wrapper {
      position: relative;
      overflow: hidden;
      width: 100%;
      margin-bottom: 40px;
    }
    
    .cinematic-title-track {
      display: flex;
      white-space: nowrap;
      animation: cinematicTitleScroll 25s linear infinite;
      will-change: transform;
    }
    
    .cinematic-title {
      font-family: 'Playfair Display', serif;
      font-weight: 900;
      font-size: 4.2rem;
      line-height: 1.1;
      color: #ffffff;
      text-shadow: 
        2px 2px 8px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(0, 0, 0, 0.5);
      display: inline-block;
      padding-right: 120px;
      letter-spacing: 4px;
      text-transform: uppercase;
      opacity: 1;
      filter: contrast(1.1) brightness(1.1);
    }
    
    @keyframes cinematicTitleScroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    
    .hero-subtitle {
      margin-bottom: 40px;
    }
    
    .hero-subtitle p {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.3rem;
      font-style: italic;
      color: #ffffff;
      text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
      opacity: 1;
    }
    
    .hero-stats {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-bottom: 50px;
      flex-wrap: wrap;
    }
    
    .stat-item {
      text-align: center;
      position: relative;
      padding: 25px 30px;
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      min-width: 150px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .stat-green {
      background: linear-gradient(135deg, rgba(5, 150, 105, 0.9) 0%, rgba(16, 185, 129, 0.85) 100%);
      box-shadow: 
        0 8px 32px rgba(5, 150, 105, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    .stat-green .stat-number { color: #ffffff; }
    .stat-green .stat-label { color: rgba(255, 255, 255, 0.95); }
    .stat-green::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    
    .stat-blue {
      background: linear-gradient(135deg, rgba(26, 35, 126, 0.9) 0%, rgba(57, 73, 171, 0.85) 100%);
      box-shadow: 
        0 8px 32px rgba(26, 35, 126, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    .stat-blue .stat-number { color: #ffffff; }
    .stat-blue .stat-label { color: rgba(255, 255, 255, 0.95); }
    .stat-blue::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    
    .stat-chocolate {
      background: linear-gradient(135deg, rgba(121, 85, 72, 0.9) 0%, rgba(161, 119, 103, 0.85) 100%);
      box-shadow: 
        0 8px 32px rgba(121, 85, 72, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    .stat-chocolate .stat-number { color: #ffffff; }
    .stat-chocolate .stat-label { color: rgba(255, 255, 255, 0.95); }
    .stat-chocolate::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    
    .stat-item:hover {
      transform: translateY(-6px) scale(1.05);
    }
    
    .stat-green:hover {
      box-shadow: 0 12px 40px rgba(5, 150, 105, 0.5), 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .stat-blue:hover {
      box-shadow: 0 12px 40px rgba(26, 35, 126, 0.5), 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .stat-chocolate:hover {
      box-shadow: 0 12px 40px rgba(121, 85, 72, 0.5), 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .stat-item::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: rgba(255, 255, 255, 0.5);
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
    }
    
    @keyframes floatButton {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-3px); }
    }
    
    .stat-number {
      display: block;
      font-family: 'Playfair Display', serif;
      font-size: 2.8rem;
      font-weight: 900;
      color: #ffffff;
      line-height: 1;
      position: relative;
      z-index: 3;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .stat-label {
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.95);
      position: relative;
      z-index: 3;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 8px;
    }
    
    .cta-buttons {
      display: flex;
      justify-content: center;
      gap: 25px;
      flex-wrap: wrap;
    }
    
    .btn-cinematic {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 18px 35px;
      border-radius: 50px;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 1.1rem;
      text-decoration: none;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      position: relative;
      overflow: hidden;
    }
    
    .btn-cinematic.btn-primary {
      background: linear-gradient(135deg, #FFD700, #FFA500);
      color: #1A237E;
      border: none;
      box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
    }
    
    .btn-cinematic.btn-secondary {
      background: transparent;
      color: #ffffff;
      border: 2px solid #FFD700;
      box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
    }
    
    .btn-cinematic.btn-outline {
      background: transparent;
      color: #ffffff;
      border: 2px solid #ffffff;
      box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
    }
    
    .btn-cinematic:hover {
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    }
    
    .btn-cinematic.btn-primary:hover {
      box-shadow: 0 15px 40px rgba(255, 215, 0, 0.5);
    }
    
    .btn-cinematic::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      transition: left 0.6s ease;
    }
    
    .btn-cinematic:hover::before {
      left: 100%;
    }
    
    /* Mobile Responsive - Hero Section */
    @media (max-width: 768px) {
      .hero-section {
        height: 100vh;
        height: 100dvh;
        min-height: 450px;
      }

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

      .cinematic-title {
        font-size: 2.2rem;
        padding-right: 60px;
        letter-spacing: 2px;
      }
      
      .hero-subtitle {
        margin-bottom: 20px;
      }

      .hero-subtitle p {
        font-size: 1rem;
        padding: 0 10px;
      }
      
      .hero-stats {
        gap: 15px;
        margin-bottom: 25px;
        flex-wrap: wrap;
      }
      
      .stat-number {
        font-size: 1.8rem;
      }
      
      .stat-label {
        font-size: 0.8rem;
      }
      
      .stat-item {
        padding: 12px 10px;
        min-width: 80px;
      }

      .cta-buttons {
        gap: 10px;
        flex-direction: column;
        align-items: center;
      }
      
      .btn-cinematic {
        padding: 14px 28px;
        font-size: 0.9rem;
        width: auto;
        min-width: 200px;
        justify-content: center;
      }
      
      .about-image {
        transform: scale(1.02);
      }
      
      .about-image img {
        min-height: 250px;
      }
    }

    @media (max-width: 480px) {
      .hero-section {
        min-height: 400px;
      }

      .cinematic-title {
        font-size: 1.6rem;
        padding-right: 40px;
        letter-spacing: 1px;
      }

      .hero-subtitle p {
        font-size: 0.9rem;
      }

      .hero-stats {
        gap: 10px;
      }

      .stat-number {
        font-size: 1.5rem;
      }

      .stat-label {
        font-size: 0.75rem;
      }

      .stat-item {
        padding: 10px 8px;
        min-width: 70px;
      }

      .btn-cinematic {
        padding: 12px 24px;
        font-size: 0.85rem;
        min-width: 180px;
      }
    }
    
    .hero-content-container {
      position: relative;
      z-index: 3;
      height: 100%;
    }
    
    .hero-text {
      animation: slideInLeft 1s ease-out;
    }
    
    @keyframes slideInLeft {
      0% {
        transform: translateX(-100px);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }
    
    .hero-badge {
      display: inline-block;
      background: linear-gradient(135deg, var(--isnm-yellow), var(--isnm-gold));
      color: var(--isnm-chocolate);
      padding: 8px 20px;
      border-radius: 50px;
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 20px;
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    
    .hero-title {
      font-family: 'Playfair Display', serif;
      font-weight: 900;
      font-size: 3.5rem;
      line-height: 1.2;
      margin-bottom: 20px;
      color: var(--isnm-cream);
    }
    
    .title-line {
      display: block;
    }
    
    .title-line.highlight {
      background: linear-gradient(45deg, var(--isnm-yellow), var(--isnm-gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
    }
    
    .hero-subtitle {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.2rem;
      font-style: italic;
      color: var(--isnm-cream);
      margin-bottom: 25px;
      opacity: 0.9;
    }
    
    .hero-description {
      font-family: 'Poppins', sans-serif;
      font-size: 1.1rem;
      line-height: 1.6;
      color: var(--isnm-cream);
      margin-bottom: 30px;
      opacity: 0.95;
    }
    
    .hero-stats {
      display: flex;
      gap: 40px;
      margin-bottom: 40px;
    }
    
    .stat-item {
      text-align: center;
    }
    
    .stat-number {
      display: block;
      font-family: 'Playfair Display', serif;
      font-size: 2.5rem;
      font-weight: 900;
      color: var(--isnm-yellow);
      line-height: 1;
    }
    
    .stat-label {
      font-family: 'Poppins', sans-serif;
      font-size: 0.9rem;
      color: var(--isnm-cream);
      opacity: 0.8;
    }
    
    .cta-buttons {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    
    .btn-hero {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 30px;
      border-radius: 50px;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    .btn-hero.btn-primary {
      background: linear-gradient(135deg, var(--isnm-yellow), var(--isnm-gold));
      color: var(--isnm-chocolate);
      border: none;
    }
    
    .btn-hero.btn-secondary {
      background: transparent;
      color: var(--isnm-cream);
      border: 2px solid var(--isnm-yellow);
    }
    
    .btn-hero.btn-outline {
      background: transparent;
      color: var(--isnm-cream);
      border: 2px solid var(--isnm-cream);
    }
    
    .btn-hero:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    
    .btn-shine {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: left 0.5s ease;
    }
    
    .btn-hero:hover .btn-shine {
      left: 100%;
    }
    
    .hero-features {
      animation: slideInRight 1s ease-out;
    }
    
    @keyframes slideInRight {
      0% {
        transform: translateX(100px);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }
    
    .feature-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 215, 0, 0.2);
      border-radius: 20px;
      padding: 25px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 20px;
      transition: all 0.3s ease;
    }
    
    .feature-card:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.15);
      border-color: var(--isnm-yellow);
    }
    
    .feature-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--isnm-yellow), var(--isnm-gold));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--isnm-chocolate);
      font-size: 1.5rem;
      flex-shrink: 0;
    }
    
    .feature-content h4 {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      color: var(--isnm-cream);
      margin-bottom: 8px;
    }
    
    .feature-content p {
      font-family: 'Poppins', sans-serif;
      color: var(--isnm-cream);
      opacity: 0.8;
      font-size: 0.9rem;
      margin: 0;
    }
    
    .hero-indicators {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 15px;
      z-index: 4;
    }
    
    .indicator {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid var(--isnm-yellow);
      background: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .indicator.active {
      background: var(--isnm-yellow);
    }
    
    .hero-scroll {
      position: absolute;
      bottom: 30px;
      left: 30px;
      z-index: 4;
      animation: bounce 2s infinite;
    }
    
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-10px); }
      60% { transform: translateY(-5px); }
    }
    
    .scroll-text {
      font-family: 'Poppins', sans-serif;
      font-size: 0.8rem;
      color: var(--isnm-cream);
      opacity: 0.7;
      margin-bottom: 5px;
    }
    
    .scroll-arrow {
      color: var(--isnm-yellow);
      font-size: 1.2rem;
    }
    
    /* About Section Enhanced Image */
    .about-image {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
      transform: scale(1.05);
      animation: slideInRight 1s ease-out;
    }
    
    .about-image img {
      width: 100%;
      height: auto;
      min-height: 450px;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    
    .about-image:hover img {
      transform: scale(1.08);
    }
    
    .about-image::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.1) 0%, 
        transparent 50%, 
        rgba(255, 215, 0, 0.05) 100%);
      border-radius: 20px;
      pointer-events: none;
    }
    
    .about-image::after {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, var(--isnm-yellow), transparent, var(--isnm-gold));
      border-radius: 20px;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .about-image:hover::after {
      opacity: 0.6;
    }
    
    
      100% {
        transform: translateX(0) scale(1.05);
        opacity: 1;
      }
    }
    
    /* Hero Section Mobile Responsive */
    @media (max-width: 768px) {
      .hero-title {
        font-size: 2.2rem;
      }
      
      .hero-subtitle {
        font-size: 1rem;
      }
      
      .hero-description {
        font-size: 1rem;
      }
      
      .hero-stats {
        gap: 20px;
        margin-bottom: 30px;
      }
      
      .stat-number {
        font-size: 2rem;
      }
      
      .stat-label {
        font-size: 0.8rem;
      }
      
      .cta-buttons {
        gap: 15px;
      }
      
      .btn-hero {
        padding: 12px 20px;
        font-size: 0.9rem;
      }
      
      .feature-card {
        padding: 20px;
        margin-bottom: 15px;
      }
      
      .feature-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
      }
      
      .hero-indicators {
        bottom: 20px;
        gap: 10px;
      }
      
      .indicator {
        width: 10px;
        height: 10px;
      }
      
      .hero-scroll {
        bottom: 20px;
        left: 20px;
      }
    }
    
    /* Clean Bootstrap 5 Navbar with Perfect Alignment */
    .isnm-navbar {
      background: linear-gradient(135deg, var(--isnm-cream), #fafafa);
      border-bottom: 3px solid var(--isnm-chocolate);
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
      padding: 0;
      position: sticky;
      top: 0;
      z-index: 999;
      min-height: 70px;
    }
    
    .isnm-navbar .navbar-brand {
      display: flex;
      align-items: center;
      color: var(--isnm-chocolate) !important;
      font-weight: 700;
      font-size: 1.3rem;
      font-family: 'Rockwell Extra Bold', 'Rockwell', serif;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      height: 70px;
    }
    
    .isnm-navbar .navbar-brand:hover {
      color: var(--isnm-dark-blue) !important;
      transform: scale(1.02);
    }
    
    .brand-logo {
      height: 40px;
      width: auto;
      margin-right: 12px;
      border-radius: 50%;
      border: 3px solid var(--isnm-yellow);
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    .brand-name {
      font-family: 'Rockwell Extra Bold', 'Rockwell', serif;
      text-transform: uppercase;
      letter-spacing: 1px;
      background: linear-gradient(45deg, var(--isnm-chocolate), var(--isnm-dark-blue));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .isnm-navbar .navbar-toggler {
      border: 3px solid var(--isnm-chocolate);
      background: linear-gradient(135deg, var(--isnm-yellow), var(--isnm-gold));
      color: var(--isnm-chocolate);
      padding: 10px 14px;
      border-radius: 8px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      height: 45px;
      width: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .isnm-navbar .navbar-toggler:hover {
      background: linear-gradient(135deg, var(--isnm-gold), var(--isnm-yellow));
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    }
    
    .isnm-navbar .navbar-toggler:focus {
      box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.3);
    }
    
    .isnm-navbar .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233E2723' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      width: 24px;
      height: 24px;
    }
    
    /* Desktop Navigation - Perfect Alignment */
    @media (min-width: 992px) {
      .isnm-navbar .navbar-collapse {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70px;
      }
      
      .isnm-navbar .navbar-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 4px;
        height: 100%;
      }
      
      .isnm-navbar .nav-item {
        display: flex;
        align-items: center;
        height: 100%;
      }
      
      .isnm-navbar .nav-link {
        color: var(--isnm-chocolate) !important;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        padding: 18px 20px !important;
        margin: 0 2px;
        border-radius: 10px;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        background: transparent;
        border: 2px solid transparent;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.85rem;
        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
      
      .isnm-navbar .nav-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
        transition: left 0.5s ease;
      }
      
      .isnm-navbar .nav-link:hover::before {
        left: 100%;
      }
      
      .isnm-navbar .nav-link:hover,
      .isnm-navbar .nav-link:focus {
        background: linear-gradient(135deg, var(--isnm-yellow), var(--isnm-gold));
        color: var(--isnm-chocolate) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
        border: 2px solid var(--isnm-chocolate);
      }
      
      .isnm-navbar .nav-link.active {
        background: linear-gradient(135deg, var(--isnm-yellow), var(--isnm-gold));
        color: var(--isnm-chocolate) !important;
        box-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
        border: 2px solid var(--isnm-chocolate);
      }
    }
    
    /* Mobile Navigation - Clean Collapse */
    @media (max-width: 991px) {
      .isnm-navbar .navbar-collapse {
        background: linear-gradient(135deg, var(--isnm-cream), #fafafa);
        border: 3px solid var(--isnm-chocolate);
        border-radius: 12px;
        padding: 20px;
        margin-top: 15px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15);
        max-height: 80vh;
        overflow-y: auto;
      }
      
      .isnm-navbar .navbar-nav {
        text-align: center;
        gap: 6px;
        width: 100%;
      }
      
      .isnm-navbar .nav-item {
        width: 100%;
      }
      
      .isnm-navbar .nav-link {
        color: var(--isnm-chocolate) !important;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        padding: 16px 20px !important;
        margin: 2px 0;
        border-radius: 10px;
        transition: all 0.3s ease;
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
        border: 2px solid var(--isnm-chocolate);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.9rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        width: 100%;
        text-align: center;
      }
      
      .isnm-navbar .nav-link:hover,
      .isnm-navbar .nav-link:focus {
        background: linear-gradient(135deg, var(--isnm-yellow), var(--isnm-gold));
        color: var(--isnm-chocolate) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
      }
    }
    
    /* Dropdown Menu - Perfect Alignment */
    .isnm-navbar .dropdown-menu {
      background: linear-gradient(135deg, var(--isnm-cream), #fafafa);
      border: 2px solid var(--isnm-chocolate);
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.15);
      margin-top: 8px;
      padding: 8px;
      min-width: 220px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .isnm-navbar .dropdown-item {
      color: var(--isnm-chocolate);
      font-weight: 600;
      font-family: 'Poppins', sans-serif;
      padding: 12px 16px;
      transition: all 0.3s ease;
      border-radius: 8px;
      margin: 2px 0;
      background: transparent;
      border: 1px solid transparent;
      display: flex;
      align-items: center;
    }
    
    .isnm-navbar .dropdown-item:hover {
      background: linear-gradient(135deg, var(--isnm-yellow), var(--isnm-gold));
      color: var(--isnm-chocolate) !important;
      transform: translateX(3px);
      box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
    }
    
    .isnm-navbar .dropdown-item i {
      width: 20px;
      text-align: center;
      margin-right: 10px;
      font-size: 1rem;
      flex-shrink: 0;
    }
    
    .isnm-navbar .dropdown-toggle::after {
      border-top-color: var(--isnm-chocolate);
      border-width: 6px 6px 0;
      margin-left: 8px;
    }
    
    /* Enhanced Mobile Responsiveness - Perfect Stack */
    @media (max-width: 991px) {
      /* Mobile Header - Clean Stack Layout */
      .isnm-header {
        padding: 15px 20px;
        min-height: auto;
        position: relative;
      }
      
      .header-container {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: auto;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
      }
      
      .header-logo {
        order: 1;
        width: auto;
        height: auto;
      }
      
      .header-title {
        order: 2;
        padding: 0 10px;
        width: 100%;
        max-width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      
      .header-logo-right {
        order: 3;
        width: auto;
        height: auto;
      }
      
      .logo-img,
      .logo-img-right {
        height: 45px;
        width: auto;
        max-width: 45px;
      }
      
      .title-wrapper {
        overflow: hidden;
        position: relative;
        width: 100%;
        margin-bottom: 8px;
        max-width: 100%;
      }
      
      .ticker-wrapper {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        max-width: 100%;
      }
      
      .school-title {
        font-size: 1.5rem;
        letter-spacing: 1px;
        padding-right: 60px;
        /* Adjusted 3D effect for mobile */
        text-shadow: 
          0px 1px 0px rgba(0, 0, 0, 0.8),
          0px 2px 0px rgba(0, 0, 0, 0.6),
          0px 3px 0px rgba(0, 0, 0, 0.4),
          0px 0px 15px rgba(255, 215, 0, 0.2);
        /* Color cycling continues on mobile */
        animation: 
          tickerScrollMobile 15s linear infinite,
          colorCycle 25s ease-in-out infinite;
      }
      
      .school-motto {
        font-size: 0.85rem;
        padding: 0 5px;
        text-align: center;
        line-height: 1.3;
        max-width: 100%;
        word-wrap: break-word;
      }
      
      /* Prevent horizontal overflow */
      .ticker-track {
        animation: tickerScrollMobile 15s linear infinite;
        will-change: transform;
      }
      
      @keyframes tickerScrollMobile {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
    }
    
    @media (max-width: 768px) {
      .isnm-header {
        padding: 12px 15px;
      }
      
      .header-container {
        gap: 12px;
      }
      
      .logo-img,
      .logo-img-right {
        height: 40px;
        max-width: 40px;
      }
      
      .school-title {
        font-size: 1.3rem;
        letter-spacing: 0.8px;
        padding-right: 50px;
      }
      
      .school-motto {
        font-size: 0.8rem;
      }
      
      .ticker-wrapper {
        height: 35px;
      }
      
      .ticker-track {
        animation: tickerScrollTablet 13s linear infinite;
      }
      
      @keyframes tickerScrollTablet {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
    }
    
    @media (max-width: 480px) {
      .isnm-header {
        padding: 10px 12px;
      }
      
      .header-container {
        gap: 10px;
        padding: 0 5px;
      }
      
      .logo-img,
      .logo-img-right {
        height: 35px;
        max-width: 35px;
      }
      
      .school-title {
        font-size: 1.1rem;
        letter-spacing: 0.5px;
        padding-right: 40px;
        /* Simplified 3D for very small screens */
        text-shadow: 
          0px 1px 0px rgba(0, 0, 0, 0.7),
          0px 2px 0px rgba(0, 0, 0, 0.5),
          0px 0px 10px rgba(255, 215, 0, 0.15);
        /* Color cycling continues */
        animation: 
          tickerScrollSmall 12s linear infinite,
          colorCycle 25s ease-in-out infinite;
      }
      
      .school-motto {
        font-size: 0.75rem;
        padding: 0 3px;
        line-height: 1.2;
      }
      
      .ticker-wrapper {
        height: 30px;
      }
      
      .ticker-track {
        animation: tickerScrollSmall 12s linear infinite;
      }
      
      @keyframes tickerScrollSmall {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
    }
    
    /* Prevent horizontal scroll on all devices */
    body {
      overflow-x: hidden;
      width: 100%;
      max-width: 100vw;
    }
    
    .isnm-header,
    .isnm-navbar {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      position: relative;
    }
    
    .header-container {
      max-width: 100%;
      overflow-x: hidden;
      position: relative;
    }
    
    .ticker-wrapper {
      overflow: hidden;
      width: 100%;
      position: relative;
    }
    
    /* Final Visual Polish and Performance Optimizations */
    
    /* Smooth scrolling for entire page */
    html {
      scroll-behavior: smooth;
    }
    
    /* Prevent horizontal scroll on all devices */
    body {
      overflow-x: hidden;
      width: 100%;
      max-width: 100vw;
    }
    
    .isnm-header,
    .isnm-navbar {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      position: relative;
    }
    
    .header-container {
      max-width: 100%;
      overflow-x: hidden;
      position: relative;
    }
    
    .ticker-wrapper {
      overflow: hidden;
      width: 100%;
      position: relative;
    }
    
    /* Enhanced visual depth and premium feel */
    .isnm-header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        var(--isnm-yellow) 25%, 
        var(--isnm-gold) 50%, 
        var(--isnm-yellow) 75%, 
        transparent 100%);
      animation: shimmer 3s ease-in-out infinite;
    }
    
    @keyframes shimmer {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 0.8; }
    }
    
    /* Premium navbar enhancements */
    .isnm-navbar {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    /* Enhanced logo effects */
    .logo-img::before,
    .logo-img-right::before {
      content: '';
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      background: linear-gradient(45deg, 
        var(--isnm-yellow), 
        var(--isnm-gold), 
        var(--isnm-yellow));
      border-radius: 50%;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .logo-img:hover::before,
    .logo-img-right:hover::before {
      opacity: 1;
      animation: logoGlow 2s ease-in-out infinite;
    }
    
    @keyframes logoGlow {
      0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
      }
      50% { 
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
      }
    }
    
    /* Enhanced ticker text performance */
    .ticker-track {
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      perspective: 1000px;
      -webkit-perspective: 1000px;
    }
    
    .school-title {
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      will-change: transform;
    }
    
    /* Enhanced navigation interactions */
    .isnm-navbar .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--isnm-chocolate);
      transition: all 0.3s ease;
      transform: translateX(-50%);
      z-index: -1;
    }
    
    .isnm-navbar .nav-link:hover::after {
      width: 80%;
    }
    
    /* Enhanced dropdown animations */
    .isnm-navbar .dropdown-menu {
      transform-origin: top;
      animation: dropdownSlide 0.3s ease-out;
    }
    
    @keyframes dropdownSlide {
      0% {
        opacity: 0;
        transform: translateY(-10px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* Performance optimizations */
    .isnm-header,
    .isnm-navbar,
    .logo-img,
    .logo-img-right,
    .school-title {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /* Enhanced focus states for accessibility */
    .isnm-navbar .nav-link:focus,
    .isnm-navbar .navbar-toggler:focus,
    .isnm-navbar .dropdown-item:focus {
      outline: 3px solid rgba(255, 215, 0, 0.5);
      outline-offset: 2px;
    }
    
    /* Smooth transitions for all interactive elements */
    .logo-img,
    .logo-img-right,
    .isnm-navbar .nav-link,
    .isnm-navbar .dropdown-item,
    .isnm-navbar .navbar-toggler {
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
  </style>

/* ===== isnm-style.css ===== */
/* Iganga School of Nursing and Midwifery Custom Styles */

/* General Styles */
:root {
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
  --success-color: #198754;
  --info-color: #0dcaf0;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  --isnm-blue: #1a237e;
  --isnm-light-blue: #3949ab;
  --isnm-navy: #0d1442;
  --isnm-teal: #0d9488;
  --isnm-green: #059669;
  --isnm-gold: #d97706;
  --isnm-dark-green: #0f4c3a;
  --isnm-cream: #fdf6ec;
  --isnm-light-bg: #fdf6ec;
  --isnm-yellow-bg: #fef9e7;
  --gradient-primary: linear-gradient(135deg, var(--isnm-navy) 0%, var(--isnm-blue) 50%, var(--isnm-light-blue) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--isnm-green) 0%, var(--isnm-teal) 100%);
  --gradient-accent: linear-gradient(135deg, #ffd700, #f59e0b);
  --section-bg: #fef9e7;

  /* Card Color System */
  --card-green: #eaf7e8;
  --card-green-accent: #81c784;
  --card-green-shadow: rgba(129, 199, 132, 0.25);
  --card-yellow: #fef9e7;
  --card-yellow-accent: #ffe082;
  --card-yellow-shadow: rgba(255, 224, 130, 0.25);
  --card-chocolate: #f0dcc8;
  --card-chocolate-accent: #d7ccc8;
  --card-chocolate-shadow: rgba(183, 149, 128, 0.2);
  --card-radius: 18px;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03), 0 12px 30px rgba(0,0,0,0.02);
  --card-shadow-hover: 0 4px 8px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.04), 0 30px 60px rgba(0,0,0,0.03);
}

body {
  font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.7;
  color: #1a1a1a;
  position: relative;
  z-index: 10;
  background: #fef9e7;
  background-attachment: fixed;
}

body > main,
body > section:not(.hero-section):not([class*="hero"]):not([class*="banner"]):not([class*="page-header"]):not([class*="header"]) {
  background: transparent;
}

body, p, .about-text, .intro-text {
  font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.7;
  color: #1a1a1a;
  position: relative;
  z-index: 10;
}

/* Hero Section */
.hero-section {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--isnm-cream) 70%, #f5e6c8 30%);
  display: flex;
  align-items: center;
  color: white;
}

.hero-overlay {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.school-logo img {
  max-height: 120px;
  filter: brightness(0) invert(1);
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 1.5rem;
  font-style: italic;
  color: var(--isnm-gold);
}

.hero-description {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.hero-buttons .btn {
  padding: 12px 30px;
  font-weight: 500;
  margin: 5px;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.hero-buttons .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Cinematic Title Styles - Perfect 3D Design */
.cinematic-title-wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  perspective: 1000px;
}

.cinematic-title-track {
  display: flex;
  animation: cinematicScroll 20s linear infinite;
  transform-style: preserve-3d;
}

.cinematic-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 900;
  color: #ffffff;
  background: transparent !important;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: 
    2px 2px 0px rgba(0, 0, 0, 0.8),
    4px 4px 0px rgba(0, 0, 0, 0.6),
    6px 6px 0px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  margin: 0 1rem;
  flex-shrink: 0;
  letter-spacing: 0.6px;
  line-height: 1.3;
  transform: none;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
  border: none;
}

.cinematic-title:hover {
  transform: translateY(-2px);
  text-shadow: 
    2px 2px 0px rgba(0, 0, 0, 0.9),
    4px 4px 0px rgba(0, 0, 0, 0.7),
    6px 6px 0px rgba(0, 0, 0, 0.5);
}

@keyframes cinematicScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Stats Section */
.stats-section {
  background: var(--light-color);
}

/* Global Typography System - Professional Medical Scale */
h1 { font-size: 2.25rem; font-weight: 800; }
h2 { font-size: 1.75rem; font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 600; }

.section-title,
.page-title,
.cta-section h2,
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  color: #0f172a;
  position: relative;
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 768px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.15rem; }
  .section-title, .page-title { font-size: 1.5rem; }
}

.section-subtitle,
.cta-section .lead,
.lead, .page-subtitle {
  font-size: 1.1rem;
  color: #475569;
  position: relative;
}

.section-header:hover {
  transform: perspective(1000px) translateY(-4px) translateZ(8px);
  border-color: var(--isnm-blue);
  box-shadow: 0 12px 40px rgba(26,35,126,0.15);
}

.program-icon {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.program-icon i {
  font-size: 2rem;
  color: white;
}

.program-card h3,
.program-title h3,
h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: #0a3d2e;
  font-weight: 600;
  margin-bottom: 1rem;
  z-index: 10;
}

.program-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.program-features li,
.requirements-list li,
.course-content li {
  padding: 0.5rem 0;
  color: #1a1a1a;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 10;
}

.program-features li:before {
  content: "✓";
  color: #059669;
  font-weight: bold;
  margin-right: 0.5rem;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

/* === Clean Light Yellow Section Backgrounds === */
.stats-section { background: var(--isnm-yellow-bg, #fef9e7); }
.programs-section { background: var(--isnm-yellow-bg, #fef9e7); }
.about-section { background: var(--isnm-yellow-bg, #fef9e7); }
.facilities-section { background: var(--isnm-yellow-bg, #fef9e7); }
.news-section { background: var(--isnm-yellow-bg, #fef9e7); }
.vmv-section { background: var(--isnm-yellow-bg, #fef9e7); }
.contact-info-section { background: var(--isnm-yellow-bg, #fef9e7); }
.py-5, .py-4, .py-3 { background: transparent !important; }
.cta-section { background: var(--gradient-primary) !important; }

.btn-isnm {
  background: linear-gradient(135deg, #1A237E, #3949AB);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(26,35,126,0.25);
}
.btn-isnm:hover {
  background: linear-gradient(135deg, #3949AB, #5C6BC0);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26,35,126,0.35);
}

.btn-outline-isnm {
  border: 2px solid #1A237E;
  color: #1A237E;
  background: transparent;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-outline-isnm:hover {
  background: #1A237E;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26,35,126,0.25);
}

.btn-outline-isnm-light {
  border: 2px solid rgba(255,255,255,0.6);
  color: #fff;
  background: transparent;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-outline-isnm-light:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}

.programs-overview h2,
.programs-overview p {
  color: #1a1a1a !important;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8) !important;
  position: relative;
  z-index: 15;
}

.about-text,
.intro-text,
.program-content p,
.facility-card p,
.vm-item p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  color: #1a1a1a;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 10;
}

.vision-mission {
  margin-bottom: 2rem;
}

.vmv-section {
  margin-bottom: 1.5rem;
}

.vm-item {
  text-align: center;
  padding: 2rem 1.5rem;
}

.vm-item h4 {
  font-family: 'Playfair Display', Georgia, serif;
  color: #0a3d2e;
  margin-bottom: 0.75rem;
  z-index: 10;
  font-weight: 800;
  font-size: 1.3rem;
}

.vm-item p {
  margin: 0;
  font-style: italic;
  color: #1a1a1a;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 10;
  line-height: 1.6;
}

.vm-icon-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  position: relative;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vm-icon-circle i {
  font-size: 1.8rem;
  color: white;
}

.vm-icon-circle.bg-warning {
  background: linear-gradient(135deg, #FFD700, #FFA000);
}

.vm-icon-circle.bg-success {
  background: linear-gradient(135deg, #28a745, #20c997);
}

.vm-item:hover .vm-icon-circle {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* === Compact VM Cards === */
.vm-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}
.vm-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--isnm-navy), var(--isnm-teal));
  opacity: 0.6;
}
.vm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
.vm-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.85rem;
  font-size: 1.3rem;
  color: #fff;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vm-card-icon.bg-warning {
  background: linear-gradient(135deg, #FFD700, #FFA000);
}
.vm-card-icon.bg-success {
  background: linear-gradient(135deg, #28a745, #20c997);
}
.vm-card:hover .vm-card-icon {
  transform: scale(1.1) rotate(-3deg);
  border-radius: 50%;
}
.vm-card h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0a3d2e;
  margin-bottom: 0.5rem;
}
.vm-card p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #555;
  font-style: italic;
  margin: 0;
}
.btn-volunteer {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  border: none;
  padding: 0.7rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-volunteer:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(231, 76, 60, 0.45);
  color: #fff;
}
.btn-volunteer i {
  font-size: 1.1rem;
}

/* Facilities Section */
.facility-card,
.program-header,
.program-content {
  text-align: center;
}

.facility-card h4,
.hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: #0a3d2e;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  z-index: 10;
}

/* CTA Section */
.cta-section {
  background: var(--gradient-primary);
  color: #fff;
  padding: 4rem 0;
}

.cta-section h2,
.cta-section p,
.cta-section .lead {
  color: #fff;
  position: relative;
  z-index: 10;
}

.cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
}
}

.cta-buttons .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  background: #2563eb !important;
  border-color: #2563eb;
}

/* Map Section */
.map-container {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.map-container iframe {
  border: none;
}

.directions-btn .btn {
  padding: 12px 30px;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.directions-btn .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Navigation */
.navbar {
  background: white !important;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
  padding: 1rem 0;
}

.navbar-brand {
  font-weight: 700;
  color: var(--isnm-blue) !important;
  display: flex;
  align-items: center;
}

.navbar-brand img {
  height: 40px;
  margin-right: 10px;
}

.navbar-nav .nav-link {
  color: var(--dark-color) !important;
  font-weight: 500;
  margin: 0 0.5rem;
  transition: color 0.3s ease;
}

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

/* Footer */
.footer {
  background: var(--dark-color);
  color: white;
  padding: 3rem 0 1rem;
}

.footer-widget h4 {
  color: var(--isnm-gold);
  margin-bottom: 1rem;
}

.footer-widget ul {
  list-style: none;
  padding: 0;
}

.footer-widget ul li {
  margin-bottom: 0.5rem;
}

.footer-widget ul li a {
  color: #adb5bd;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-widget ul li a:hover {
  color: white;
}

.footer-bottom {
  border-top: 1px solid #495057;
  margin-top: 2rem;
  padding-top: 1rem;
  text-align: center;
}

.designer-info {
  color: var(--isnm-gold);
  font-weight: 500;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* === Card Entrance Animation === */
@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: perspective(1200px) translateY(40px) translateZ(-20px) rotateX(2deg);
  }
  to {
    opacity: 1;
    transform: perspective(1200px) translateY(0) translateZ(0) rotateX(0);
  }
}

/* === Unified Card Base === */
.program-card,
.facility-card,
.vm-item,
.vmv-card,
.success-card,
.opportunity-card,
.project-card,
.news-card,
.stat-card,
.report-card,
.benefit-card,
.achievement-card,
.contact-card,
.announcement-card,
.action-card,
.stats-card,
.payment-method-card,
.intro-content,
.contact-grid,
.requirements-card,
.interview-card,
.form-container,
.content-section,
.section-card,
.donation-card,
.hours-card,
.member-card,
.welcome-card,
.quick-action-card,
.upload-card {
  position: relative;
  border-radius: var(--card-radius);
  padding: 2rem;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
  perspective: 1200px;
  overflow: hidden;
  z-index: 1;
  animation: cardEntrance 0.7s ease-out both;
  box-shadow: var(--card-shadow);
}

/* Colored top accent strip using background gradient */
.program-card, .facility-card, .vm-item, .vmv-card, .success-card, .opportunity-card, .project-card {
  background: linear-gradient(to bottom, var(--card-green-accent) 0%, var(--card-green-accent) 5px, var(--card-green) 5px, var(--card-green) 100%);
}
.news-card, .stat-card, .report-card, .benefit-card, .achievement-card, .contact-card, .announcement-card, .action-card, .stats-card, .payment-method-card {
  background: linear-gradient(to bottom, var(--card-yellow-accent) 0%, var(--card-yellow-accent) 5px, var(--card-yellow) 5px, var(--card-yellow) 100%);
}
.intro-content, .contact-grid, .requirements-card, .interview-card, .form-container, .content-section, .section-card,
.donation-card, .hours-card, .member-card, .welcome-card, .quick-action-card, .upload-card {
  background: linear-gradient(to bottom, var(--card-chocolate-accent) 0%, var(--card-chocolate-accent) 5px, var(--card-chocolate) 5px, var(--card-chocolate) 100%);
}

/* Card hover: lift + deepen shadow */
@media (hover: hover) {
  .program-card:hover, .facility-card:hover, .vm-item:hover,
  .vmv-card:hover, .success-card:hover, .opportunity-card:hover, .project-card:hover,
  .news-card:hover, .stat-card:hover, .report-card:hover,
  .benefit-card:hover, .achievement-card:hover, .contact-card:hover,
  .announcement-card:hover, .action-card:hover, .stats-card:hover, .payment-method-card:hover,
  .intro-content:hover, .contact-grid:hover, .requirements-card:hover,
  .interview-card:hover, .form-container:hover, .content-section:hover, .section-card:hover,
  .donation-card:hover, .hours-card:hover, .member-card:hover,
  .welcome-card:hover, .quick-action-card:hover, .upload-card:hover {
    transform: perspective(1200px) translateY(-6px) translateZ(16px) rotateX(1.5deg);
    box-shadow: var(--card-shadow-hover);
  }
}

/* Card color-specific hover accent glow */
.program-card:hover, .facility-card:hover, .vm-item:hover,
.vmv-card:hover, .success-card:hover, .opportunity-card:hover, .project-card:hover {
  box-shadow: var(--card-shadow-hover), 0 0 30px var(--card-green-shadow);
}
.news-card:hover, .stat-card:hover, .report-card:hover,
.benefit-card:hover, .achievement-card:hover, .contact-card:hover,
.announcement-card:hover, .action-card:hover, .stats-card:hover, .payment-method-card:hover {
  box-shadow: var(--card-shadow-hover), 0 0 30px var(--card-yellow-shadow);
}
.intro-content:hover, .contact-grid:hover, .requirements-card:hover,
.interview-card:hover, .form-container:hover, .content-section:hover, .section-card:hover,
.donation-card:hover, .hours-card:hover, .member-card:hover,
.welcome-card:hover, .quick-action-card:hover, .upload-card:hover {
  box-shadow: var(--card-shadow-hover), 0 0 30px var(--card-chocolate-shadow);
}

/* Card stagger entrance delays */
.program-card:nth-child(1), .facility-card:nth-child(1), .news-card:nth-child(1),
.opportunity-card:nth-child(1), .benefit-card:nth-child(1), .achievement-card:nth-child(1),
.contact-card:nth-child(1), .vmv-card:nth-child(1), .member-card:nth-child(1),
.project-card:nth-child(1), .donation-card:nth-child(1), .stats-card:nth-child(1) { animation-delay: 0s; }
.program-card:nth-child(2), .facility-card:nth-child(2), .news-card:nth-child(2),
.opportunity-card:nth-child(2), .benefit-card:nth-child(2), .achievement-card:nth-child(2),
.contact-card:nth-child(2), .vmv-card:nth-child(2), .member-card:nth-child(2),
.project-card:nth-child(2), .donation-card:nth-child(2), .stats-card:nth-child(2) { animation-delay: 0.1s; }
.program-card:nth-child(3), .facility-card:nth-child(3), .news-card:nth-child(3),
.opportunity-card:nth-child(3), .benefit-card:nth-child(3), .achievement-card:nth-child(3),
.contact-card:nth-child(3), .vmv-card:nth-child(3), .member-card:nth-child(3),
.project-card:nth-child(3), .donation-card:nth-child(3), .stats-card:nth-child(3) { animation-delay: 0.2s; }
.program-card:nth-child(4), .news-card:nth-child(4),
.opportunity-card:nth-child(4), .achievement-card:nth-child(4),
.contact-card:nth-child(4), .member-card:nth-child(4),
.project-card:nth-child(4), .stats-card:nth-child(4) { animation-delay: 0.3s; }
.program-card:nth-child(5), .news-card:nth-child(5),
.opportunity-card:nth-child(5), .achievement-card:nth-child(5),
.project-card:nth-child(5), .stats-card:nth-child(5) { animation-delay: 0.4s; }
.program-card:nth-child(6), .news-card:nth-child(6),
.opportunity-card:nth-child(6), .stats-card:nth-child(6) { animation-delay: 0.5s; }

/* Gold card buttons */
.program-card .btn-primary, .facility-card .btn-primary,
.vm-item .btn-primary, .vmv-card .btn-primary,
.opportunity-card .btn-primary, .project-card .btn-primary,
.success-card .btn-primary,
.news-card .btn-primary, .stat-card .btn-primary,
.report-card .btn-primary, .benefit-card .btn-primary,
.achievement-card .btn-primary, .contact-card .btn-primary,
.announcement-card .btn-primary, .action-card .btn-primary,
.stats-card .btn-primary,
.intro-content .btn-primary, .contact-grid .btn-primary,
.requirements-card .btn-primary, .interview-card .btn-primary,
.form-container .btn-primary, .content-section .btn-primary,
.section-card .btn-primary, .donation-card .btn-primary,
.hours-card .btn-primary, .member-card .btn-primary,
.welcome-card .btn-primary, .quick-action-card .btn-primary,
.upload-card .btn-primary,
.program-card .btn-outline-primary, .facility-card .btn-outline-primary,
.vm-item .btn-outline-primary, .vmv-card .btn-outline-primary,
.opportunity-card .btn-outline-primary, .project-card .btn-outline-primary,
.success-card .btn-outline-primary,
.news-card .btn-outline-primary, .stat-card .btn-outline-primary,
.report-card .btn-outline-primary, .benefit-card .btn-outline-primary,
.achievement-card .btn-outline-primary, .contact-card .btn-outline-primary,
.announcement-card .btn-outline-primary, .action-card .btn-outline-primary,
.stats-card .btn-outline-primary,
.intro-content .btn-outline-primary, .contact-grid .btn-outline-primary,
.requirements-card .btn-outline-primary, .interview-card .btn-outline-primary,
.form-container .btn-outline-primary, .content-section .btn-outline-primary,
.section-card .btn-outline-primary, .donation-card .btn-outline-primary,
.hours-card .btn-outline-primary, .member-card .btn-outline-primary,
.welcome-card .btn-outline-primary, .quick-action-card .btn-outline-primary,
.upload-card .btn-outline-primary {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%) !important;
  border: 1px solid #E6A100 !important;
  color: #0d1442 !important;
  font-weight: 700 !important;
  padding: 0.75rem 2rem !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 15px rgba(255, 165, 0, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.program-card .btn-primary:hover, .facility-card .btn-primary:hover,
.vm-item .btn-primary:hover, .vmv-card .btn-primary:hover,
.opportunity-card .btn-primary:hover, .project-card .btn-primary:hover,
.success-card .btn-primary:hover,
.news-card .btn-primary:hover, .stat-card .btn-primary:hover,
.report-card .btn-primary:hover, .benefit-card .btn-primary:hover,
.achievement-card .btn-primary:hover, .contact-card .btn-primary:hover,
.announcement-card .btn-primary:hover, .action-card .btn-primary:hover,
.stats-card .btn-primary:hover,
.intro-content .btn-primary:hover, .contact-grid .btn-primary:hover,
.requirements-card .btn-primary:hover, .interview-card .btn-primary:hover,
.form-container .btn-primary:hover, .content-section .btn-primary:hover,
.section-card .btn-primary:hover, .donation-card .btn-primary:hover,
.hours-card .btn-primary:hover, .member-card .btn-primary:hover,
.welcome-card .btn-primary:hover, .quick-action-card .btn-primary:hover,
.upload-card .btn-primary:hover,
.program-card .btn-outline-primary:hover, .facility-card .btn-outline-primary:hover,
.vm-item .btn-outline-primary:hover, .vmv-card .btn-outline-primary:hover,
.opportunity-card .btn-outline-primary:hover, .project-card .btn-outline-primary:hover,
.success-card .btn-outline-primary:hover,
.news-card .btn-outline-primary:hover, .stat-card .btn-outline-primary:hover,
.report-card .btn-outline-primary:hover, .benefit-card .btn-outline-primary:hover,
.achievement-card .btn-outline-primary:hover, .contact-card .btn-outline-primary:hover,
.announcement-card .btn-outline-primary:hover, .action-card .btn-outline-primary:hover,
.stats-card .btn-outline-primary:hover,
.intro-content .btn-outline-primary:hover, .contact-grid .btn-outline-primary:hover,
.requirements-card .btn-outline-primary:hover, .interview-card .btn-outline-primary:hover,
.form-container .btn-outline-primary:hover, .content-section .btn-outline-primary:hover,
.section-card .btn-outline-primary:hover, .donation-card .btn-outline-primary:hover,
.hours-card .btn-outline-primary:hover, .member-card .btn-outline-primary:hover,
.welcome-card .btn-outline-primary:hover, .quick-action-card .btn-outline-primary:hover,
.upload-card .btn-outline-primary:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 25px rgba(255, 165, 0, 0.5) !important;
}

/* === End Unified Card Base === */

/* Organizational Structure Styles */
.org-chart {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.org-position {
  background: var(--gradient-primary);
  color: white;
  padding: 1.5rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.org-position:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.org-position.executive {
  background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
}

.org-position.management {
  background: linear-gradient(135deg, var(--isnm-green) 0%, #10b981 100%);
}

.org-position.academic {
  background: linear-gradient(135deg, var(--isnm-light-blue) 0%, #60a5fa 100%);
}

.org-position.support {
  background: linear-gradient(135deg, var(--isnm-gold) 0%, #f59e0b 100%);
}

.org-position.student {
  background: linear-gradient(135deg, var(--secondary-color) 0%, #6c757d 100%);
}

.org-position h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.org-position p {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Login Form Styles */
.login-container {
  min-height: 100vh;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.login-form {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  max-width: 500px;
  width: 100%;
}

.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo img {
  height: 80px;
  margin-bottom: 1rem;
}

.login-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--isnm-blue);
  text-align: center;
  margin-bottom: 0.5rem;
}

.login-subtitle {
  text-align: center;
  color: var(--secondary-color);
  margin-bottom: 2rem;
}

.form-control {
  border: 2px solid #e9ecef;
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.btn-login {
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-weight: 600;
  width: 100%;
  transition: all 0.3s ease;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Dashboard Styles */
.dashboard-sidebar {
  background: var(--dark-color);
  min-height: 100vh;
  color: white;
}

.sidebar-header {
  padding: 2rem;
  text-align: center;
  border-bottom: 1px solid #495057;
}

.sidebar-header img {
  height: 60px;
  margin-bottom: 1rem;
}

.sidebar-menu {
  padding: 1rem 0;
}

.sidebar-menu .nav-link {
  color: #adb5bd !important;
  padding: 1rem 2rem;
  border-radius: 0;
  transition: all 0.3s ease;
}

.sidebar-menu .nav-link:hover,
.sidebar-menu .nav-link.active {
  background: var(--primary-color);
  color: white !important;
}

.sidebar-menu .nav-link i {
  margin-right: 0.5rem;
  width: 20px;
}

.dashboard-main {
  background: var(--light-color);
  min-height: 100vh;
}

.dashboard-header {
  background: white;
  padding: 1rem 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-content {
  padding: 2rem;
}

.stats-widget {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  margin-bottom: 2rem;
}

.stats-widget h3 {
  color: var(--isnm-blue);
  margin-bottom: 1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: var(--light-color);
  border-radius: 10px;
}

.stat-item .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
}

.stat-item .stat-label {
  color: var(--secondary-color);
  font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .hero-buttons .btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
  
  .dashboard-header {
    flex-direction: column;
    gap: 1rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-content {
    text-align: center;
  }
  
  .program-card,
  .facility-card,
  .stat-card {
    margin-bottom: 1.5rem;
  }
  
  .login-form {
    padding: 2rem;
  }
}

/* === News Section === */
.news-section {
  background: #f8fafc;
}
.news-card-img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform 0.4s;
}
.news-card:hover .news-card-img { transform: scale(1.03); }
.news-card-img-placeholder {
  width: 100%;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
  color: #94a3b8;
  font-size: 2.5rem;
}
.news-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.news-card-body .date {
  font-size: .78rem;
  color: #94a3b8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.news-card-body h5 {
  font-weight: 700;
  margin: 8px 0 6px;
  line-height: 1.35;
}
.news-card-body h5 a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.2s;
}
.news-card-body h5 a:hover { color: #1a237e; }
.news-card-body .excerpt { color: #64748b; font-size: .88rem; line-height: 1.6; }

/* === Hero Override — reduced cinematic title === */
.hero-section .hero-content .cinematic-title-wrapper .cinematic-title-track .cinematic-title {
  font-size: 2.6rem !important;
}
@media (max-width: 768px) {
  .hero-section .hero-content .cinematic-title-wrapper .cinematic-title-track .cinematic-title {
    font-size: 2rem !important;
  }
}
@media (max-width: 480px) {
  .hero-section .hero-content .cinematic-title-wrapper .cinematic-title-track .cinematic-title {
    font-size: 1.5rem !important;
  }
}

/* === Enhanced Apply Now Button === */
.hero-content .cta-buttons .btn-cinematic.btn-primary {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%) !important;
  color: #0d1442 !important;
  font-size: 1.25rem !important;
  padding: 20px 42px !important;
  box-shadow: 0 8px 30px rgba(255, 165, 0, 0.5) !important;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.hero-content .cta-buttons .btn-cinematic.btn-primary i {
  font-size: 1.5rem;
}
.hero-content .cta-buttons .btn-cinematic.btn-primary::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 53px;
  background: linear-gradient(135deg, #FFD700, #FF8C00, #FFD700);
  z-index: -1;
  opacity: 0.6;
  animation: btnBorderPulse 2s ease-in-out infinite;
}
@keyframes btnBorderPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.03); }
}
.hero-content .cta-buttons .btn-cinematic.btn-primary:hover {
  transform: perspective(1000px) translateY(-4px) translateZ(12px) scale(1.05) !important;
  box-shadow: 0 15px 45px rgba(255, 165, 0, 0.6) !important;
}

/* === Hero Stats Enhancement === */
.hero-content .hero-stats .stat-item {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-content .hero-stats .stat-item:hover {
  transform: perspective(1000px) translateY(-4px) translateZ(8px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.2);
}

/* === Modern Polish === */
.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  color: #0f172a;
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #ffd700, #f59e0b);
  border-radius: 2px;
  margin: 12px auto 0;
}
.section-subtitle {
  font-family: 'Inter', 'Poppins', sans-serif;
  font-size: 1.05rem;
  color: #64748b;
}
.btn-primary {
  background: linear-gradient(135deg, #1a237e, #3949ab) !important;
  border: none !important;
  padding: 10px 28px;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.25s;
  box-shadow: 0 2px 8px rgba(26,35,126,0.2);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0d1442, #1a237e) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,35,126,0.3);
}
.btn-outline-primary {
  border: 2px solid #1a237e;
  color: #1a237e;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.25s;
}
.btn-outline-primary:hover {
  background: #1a237e;
  color: #fff;
  transform: translateY(-1px);
}
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #94a3b8;
}
.empty-state i { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }
.empty-state h4 { font-weight: 700; color: #64748b; }

/* ============================================================
   PHASE 2: UNIFIED PUBLIC PAGE STYLES
   Consolidating inline <style> blocks from donation, programs,
   about, volunteer, contact, history, application, news
   ============================================================ */

/* ----- Shared Page Header — Premium 3D with Background Images ----- */
.page-header {
  background: linear-gradient(160deg, #0D1642 0%, #1A237E 40%, #283593 70%, #1A237E 100%);
  color: white;
  padding: 5rem 0 4rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.page-header.page-header-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-header.page-header-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,22,66,0.82) 0%, rgba(26,35,126,0.75) 50%, rgba(13,22,66,0.88) 100%);
  z-index: 0;
}
.page-header.page-header-bg > .container,
.page-header.page-header-bg > .container > .row {
  position: relative;
  z-index: 1;
}
.page-header.page-header-bg .page-title {
  color: #FFD700;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 30px rgba(255,215,0,0.15);
}
.page-header.page-header-bg .page-subtitle {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.page-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,215,0,0.07) 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(92,107,192,0.1) 0%, transparent 50%);
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FFD700, #FFA000, #FFD700);
}
.page-header .page-title {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  animation: fadeInDown 0.8s ease-out;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
}
.page-header .page-subtitle {
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  animation: fadeInUp 1s ease-out;
  position: relative;
  z-index: 1;
  letter-spacing: 0.3px;
}

/* ----- Hero Header (contact, history, application) with Background Image ----- */
.hero-header {
  position: relative;
  background: var(--gradient-primary);
  color: white;
  padding: 5rem 0;
  overflow: hidden;
}
.hero-header.hero-header-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-header.hero-header-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,22,66,0.85) 0%, rgba(26,35,126,0.72) 50%, rgba(13,22,66,0.85) 100%);
  z-index: 0;
}
.hero-header.hero-header-bg > .container,
.hero-header.hero-header-bg > .hero-content,
.hero-header.hero-header-bg > .hero-particles {
  position: relative;
  z-index: 1;
}
.hero-header.hero-header-bg .hero-title {
  color: #FFD700;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 30px rgba(255,215,0,0.15);
}
.hero-header.hero-header-bg .hero-subtitle {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.hero-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,215,0,0.08) 0%, transparent 50%);
}
.hero-particles { display: none; }
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero-content .hero-title {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}
.hero-content .hero-subtitle {
  font-size: 1.05rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}
.hero-decoration {
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #ffd700, #ffed4e);
  margin: 0 auto;
  border-radius: 2px;
}

/* ----- Shared Section Header (contact, history, application) ----- */
.section-header { margin-bottom: 3rem; }
.section-header.text-center { text-align: center; }
.header-icon {
  width: 80px; height: 80px;
  background: var(--gradient-primary);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 10px 30px rgba(26,35,126,0.3);
  position: relative;
}
.header-icon::before {
  content: '';
  position: absolute;
  top: -5px; left: -5px; right: -5px; bottom: -5px;
  background: var(--gradient-primary);
  border-radius: 25px;
  z-index: -1;
  opacity: 0.3;
  animation: pulse 2s ease-in-out infinite;
}
.header-icon i { font-size: 2.5rem; color: white; }

/* ----- Shared Animations (deduplicated from inline blocks) ----- */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-15px); }
  to { opacity: 1; transform: translateY(0); }
}

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

  50% { transform: scale(1.05); opacity: 0.5; }
}

  100% { background-position: 200% 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

  100% { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

.animate-fade-in { animation: fadeIn 0.8s ease-out; }
.animate-slide-up { animation: slideUp 0.8s ease-out; }
.animate-scale-in { animation: scaleIn 0.8s ease-out; }

/* ----- Responsive Header Breakpoints ----- */
@media (max-width: 768px) {
  .hero-header { padding: 3.5rem 0; }
  .hero-title { font-size: 2rem !important; }
  .hero-subtitle { font-size: 1rem !important; }
  .hero-decoration { width: 70px; }
  .page-header { padding: 3.5rem 0; }
  .page-title { font-size: 2rem; }
  .page-subtitle { font-size: 1rem; }
  .page-header.page-header-bg { background-position: center 30%; }
  .hero-header.hero-header-bg { background-position: center 30%; }
  .card-3d-stripe::after,
  .donation-card::after,
  .project-card::after,
  .opportunity-card::after,
  .benefit-card::after,
  .vmv-card::after,
  .member-card::after,
  .program-item::after,
  .impact-item::after,
  .timeline-content-card::after { height: 4px; }
}
@media (max-width: 576px) {
  .hero-title { font-size: 1.75rem !important; }
  .page-title { font-size: 1.75rem; }
  .page-header.page-header-bg { padding: 3rem 0 2.5rem; }
  .hero-header.hero-header-bg { padding: 3rem 0 2.5rem; }
}
@media (max-width: 480px) {
  .hero-header { padding: 2.5rem 0; }
  .hero-title { font-size: 1.5rem !important; }
  .hero-subtitle { font-size: 0.9rem; }
  .page-title { font-size: 1.5rem; }
  .page-header.page-header-bg { padding: 2.5rem 0 2rem; }
  .hero-header.hero-header-bg { padding: 2.5rem 0 2rem; }
}

/* ============ Donation Page ============ */
.donation-overview { position: relative; }
.donation-content { padding: 3rem; }
.donation-image {
  position: relative; border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(26,35,126,0.18);
  transition: all 0.5s ease; height: auto; min-height: 400px;
}
.donation-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.donation-image:hover img { transform: scale(1.03); }
.donation-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(26,35,126,0.08));
  pointer-events: none;
}

/* Impact List */
.impact-list { list-style: none; padding: 0; margin: 2rem 0 0; }
.impact-item {
  display: flex; align-items: center; margin-bottom: 1rem;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border-radius: 14px; border: 1px solid #f1f5f9;
  transition: all 0.3s ease; position: relative;
}
.impact-item:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-color: rgba(26,35,126,0.1); }
.impact-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, #1a237e, #3949ab); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 1.2rem; flex-shrink: 0;
  box-shadow: 0 5px 15px rgba(26,35,126,0.2);
}
.impact-icon i { font-size: 1.3rem; color: white; }
.impact-text h4 { margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 600; color: #0f172a; }
.impact-text p { margin: 0; line-height: 1.5; color: #475569; font-size: 0.9rem; }

/* Donation Cards */
.donation-card {
  text-align: center; position: relative; overflow: hidden;
  background: white; border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 3rem 2rem 2rem; height: 100%;
  display: flex; flex-direction: column;
}
.donation-card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(26,35,126,0.1); }
.donation-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #1a237e, #3949ab, #ffd700);
}
.donation-card[data-card="monthly"]::before { background: linear-gradient(90deg, #10b981, #059669, #ffd700); }
.donation-card[data-card="scholarship"]::before { background: linear-gradient(90deg, #8b5cf6, #7c3aed, #ffd700); }
.donation-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 10px 25px rgba(26,35,126,0.25);
  transition: all 0.3s ease;
}
.donation-card[data-card="monthly"] .donation-icon { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 10px 25px rgba(16,185,129,0.25); }
.donation-card[data-card="scholarship"] .donation-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 10px 25px rgba(139,92,246,0.25); }
.donation-card:hover .donation-icon { transform: scale(1.1) rotate(-5deg); }
.donation-icon i { font-size: 2rem; color: white; }
.donation-card h3 { font-size: 1.4rem; font-weight: 800; color: #0f172a; margin-bottom: 0.8rem; }
.donation-card > p { color: #64748b; margin-bottom: 1.5rem; line-height: 1.6; font-size: 0.95rem; }

/* Donation Amount Tiers */
.donation-amounts { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.donation-amounts li {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; margin-bottom: 0.4rem;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border-radius: 12px; border: 1px solid #f1f5f9;
  transition: all 0.25s ease;
}
.donation-amounts li::before {
  content: '\2713';
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 0.65rem; font-weight: bold; flex-shrink: 0;
  line-height: 22px; text-align: center;
}
.donation-card[data-card="monthly"] .donation-amounts li::before { background: linear-gradient(135deg, #10b981, #059669); }
.donation-card[data-card="scholarship"] .donation-amounts li::before { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.donation-amounts li:hover { transform: translateX(4px); border-color: rgba(26,35,126,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.donation-amounts .amount {
  font-weight: 800; font-size: 1rem; color: #0f172a; white-space: nowrap;
  display: flex; align-items: baseline; gap: 0.15rem;
}
.donation-amounts .period { font-weight: 500; font-size: 0.75rem; color: #64748b; }
.donation-amounts .amount-desc { font-size: 0.85rem; color: #475569; line-height: 1.3; }
.donation-amounts .amount.highlight {
  color: #8b5cf6; position: relative;
}
.donation-amounts .amount.highlight::after {
  content: 'Best Value'; position: absolute; top: -18px; left: 0;
  font-size: 0.6rem; font-weight: 700; color: #8b5cf6;
  background: rgba(139,92,246,0.1); padding: 0.1rem 0.4rem;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* Project Cards */
.project-image {
  height: 260px; overflow: hidden; position: relative;
}
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block; }
.project-card:hover .project-image img { transform: scale(1.05); }
.project-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.25));
  pointer-events: none;
}
.project-content { padding: 1.8rem; flex: 1; display: flex; flex-direction: column; }
.project-content h3 { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin-bottom: 0.8rem; }
.project-content p { color: #475569; margin-bottom: 1.2rem; line-height: 1.6; font-size: 0.9rem; flex: 1; }
.project-progress {
  margin-bottom: 1.2rem; padding: 0.8rem 1rem;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border-radius: 10px; border: 1px solid #f1f5f9;
}
.progress-info { display: flex; justify-content: space-between; margin-bottom: 0.6rem; font-size: 0.85rem; }
.progress-info span:first-child { font-weight: 500; color: #475569; }
.progress-info span:last-child { font-weight: 700; color: #0f172a; }
.progress { height: 8px; background-color: #e2e8f0; border-radius: 4px; overflow: hidden; }
.progress-bar {
  background: linear-gradient(90deg, #1a237e, #3949ab);
  transition: width 0.8s ease; border-radius: 4px;
}
.progress-percentage { font-size: 0.8rem; color: #64748b; font-weight: 600; margin-top: 0.4rem; display: block; }
.project-card .btn-outline-primary { margin-top: auto; }

/* Equal-height row fix for donation cards & project cards */
.row.g-4 > [class*="col-"] { display: flex; }

/* Payment Methods */
.payment-methods {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.payment-method-card { text-align: center; cursor: pointer; }
.payment-method-card i { font-size: 2rem; margin-bottom: 0.5rem; display: block; }
.payment-method-card span { font-size: 0.9rem; font-weight: 600; color: #333; }
.payment-method-card .visa { color: #1a1f71; }
.payment-method-card .mastercard { color: #eb001b; }
.payment-method-card .mobile-money { color: #28a745; }
.payment-method-card .mtn { color: #ff6600; }
.payment-method-card .airtel { color: #ed1c24; }
.modal { z-index: 9999 !important; }
.modal-content {
  border-radius: 20px; border: none;
  box-shadow: 0 25px 80px rgba(0,0,0,0.4);
  animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(0.9) translateY(-20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  background: var(--gradient-primary); color: white;
  border-radius: 20px 20px 0 0; border: none;
  padding: 2rem 2.5rem;
}
.modal-backdrop { background: rgba(0,0,0,0.7) !important; backdrop-filter: blur(5px); }

/* ============ Programs Page ============ */
.programs-overview .program-card {
  padding: 0;
  border: none;
}
.program-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: white; padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.program-header .program-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.15); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.program-header .program-icon i { font-size: 1.3rem; color: white; }
.program-title h3 {
  margin: 0; font-size: 1.1rem; font-weight: 700;
  font-family: 'Playfair Display', Georgia, serif;
  color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.program-duration {
  display: inline-block; background: rgba(255,255,255,0.2);
  padding: 0.25rem 0.6rem; border-radius: 15px; font-size: 0.8rem;
  margin-top: 0.35rem;
}
.program-content { padding: 1.5rem; }
.program-content h4 { color: #1e3a8a; margin: 0.8rem 0 0.5rem; font-size: 1rem; font-weight: 700; }
.program-content p { color: #1e293b; line-height: 1.7; margin-bottom: 1rem; font-size: 0.95rem; }
.requirements-list, .course-content { list-style: none; padding: 0; margin: 1rem 0; }
.requirements-list li, .course-content li {
  padding: 0.5rem 0.75rem; color: #1e293b;
  position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 8px; border: 2px solid rgba(26,35,126,0.1);
  font-size: 0.9rem;
}
.requirements-list li:before, .course-content li:before {
  content: "\2713"; color: #1e3a8a;
  position: absolute; left: 0; font-weight: bold;
}
.program-actions { display: flex; gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; }
.hospitals-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem; margin: 1.5rem 0;
}
.hospital-card {
  display: flex; align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f8fff8 100%);
  padding: 1.2rem; border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border: 1px solid rgba(144,238,144,0.4);
}
.hospital-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.12); }
.hospital-icon {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-right: 1rem; flex-shrink: 0;
}
.hospital-icon i { font-size: 1.5rem; color: white; }
.hospital-info h4 { color: #1e3a8a; margin: 0 0 0.4rem; font-size: 1rem; font-weight: 700; }
.hospital-info p { color: #475569; margin: 0; font-size: 0.85rem; }
.process-timeline { max-width: 800px; margin: 0 auto; position: relative; }
.process-timeline::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: 3px; height: 100%;
  background: linear-gradient(180deg, #ffd700 0%, #1a237e 50%, #ffd700 100%);
}
.timeline-item {
  display: flex; align-items: flex-start; margin-bottom: 2rem;
  position: relative;
}
.timeline-item:nth-child(even) { flex-direction: row-reverse; }
.timeline-marker {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-weight: bold; font-size: 1.1rem;
  flex-shrink: 0; margin-right: 1.5rem;
  box-shadow: 0 4px 12px rgba(30,58,138,0.3);
}
.timeline-content {
  background: linear-gradient(135deg, #ffffff 0%, #f8fff8 100%);
  padding: 1.5rem; border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06); flex: 1;
  border: 1px solid rgba(144,238,144,0.4);
}
.timeline-item:hover .timeline-content { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.timeline-content h4 { color: #1e3a8a; margin: 0 0 0.6rem; font-size: 1.1rem; font-weight: 700; }
.timeline-content p { color: #475569; margin: 0; line-height: 1.6; font-size: 0.9rem; }

/* ============ About Page ============ */

/* Introduction */
.intro-content { max-width: 800px; }
.intro-text { font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem; color: #334155; }
.intro-image-wrapper { position: relative; display: inline-block; width: 100%; }
.intro-image {
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(26,35,126,0.15);
}
.intro-image img { width: 100%; display: block; transition: transform 0.6s ease; }
.intro-image:hover img { transform: scale(1.05); }
.intro-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,35,126,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.intro-image-badge {
  position: absolute; bottom: -12px; right: -12px;
  background: linear-gradient(135deg, #ffd700, #f59e0b);
  color: #0d1442; padding: 0.8rem 1.3rem; border-radius: 12px;
  font-weight: 700; font-size: 0.85rem; box-shadow: 0 10px 30px rgba(255,215,0,0.4);
  z-index: 3; display: flex; align-items: center; gap: 0.5rem;
  border: 2px solid white;
}

/* First slide image - show faces, not cropped at top */
.slide:first-child img { object-position: center 20%; }

/* Equal-height cards */
.vmv-card, .member-card, .program-item, .objective-item { height: 100%; }

/* Decorative card graphics */
.vmv-card::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle at 100% 100%, rgba(26,35,126,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.member-card::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 100px; height: 100px;
  background: radial-gradient(circle at 100% 100%, rgba(255,215,0,0.06) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 0 0 20px 0;
}

/* VMV Header Image */
.vmv-header-image {
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
  position: relative; margin-bottom: 2rem;
}
.vmv-header-image img { width: 100%; transition: transform 0.6s ease; }
.vmv-header-image:hover img { transform: scale(1.03); }
.vmv-header-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,35,126,0.1), transparent);
  pointer-events: none;
}
.vmv-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(13, 27, 62, 0.82), rgba(26, 35, 126, 0.72));
  border-radius: 20px; z-index: 2;
  opacity: 0; transition: opacity 0.5s ease;
}
.vmv-header-image:hover .vmv-overlay { opacity: 1; }
.vmv-overlay-content { text-align: center; color: #fff; padding: 2rem; max-width: 700px; }
.vmv-overlay-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 18px;
  background: rgba(255,215,0,0.15); border: 1px solid rgba(255,215,0,0.35);
  border-radius: 50px; color: #FFD700; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 1rem;
}
.vmv-overlay-title {
  font-size: 2rem; font-weight: 800; line-height: 1.25; margin-bottom: 0.75rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.vmv-overlay-divider {
  width: 60px; height: 3px; margin: 0 auto 1rem;
  background: linear-gradient(90deg, #FFD700, #fff); border-radius: 2px;
}
.vmv-overlay-text {
  font-size: 1.05rem; line-height: 1.7; opacity: 0.92; margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
  .vmv-overlay { opacity: 1; }
  .vmv-overlay-title { font-size: 1.4rem; }
  .vmv-overlay-text { font-size: 0.92rem; }
}

/* VMV Cards */
.vmv-card {
  text-align: center; padding: 2.5rem 2rem; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  border-radius: 24px; border: 1px solid rgba(26,35,126,0.06);
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vmv-card:hover { transform: translateY(-10px); box-shadow: 0 25px 60px rgba(26,35,126,0.12); border-color: rgba(26,35,126,0.1); }
.vmv-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #1a237e, #3949ab, #ffd700);
}
.vmv-card::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 140px; height: 140px;
  background: radial-gradient(circle at 100% 100%, rgba(26,35,126,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.vmv-card-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(180deg, rgba(26,35,126,0.03) 0%, transparent 100%);
  pointer-events: none;
}
.vmv-icon {
  width: 90px; height: 90px;
  background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem; position: relative; z-index: 1;
  box-shadow: 0 8px 25px rgba(26,35,126,0.3);
  transition: all 0.4s ease;
}
.vmv-card:hover .vmv-icon { transform: scale(1.08); box-shadow: 0 12px 35px rgba(26,35,126,0.35); }
.vmv-icon::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid rgba(255,215,0,0.25);
  animation: vmvRingPulse 3s ease-in-out infinite;
}
@keyframes vmvRingPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.06); opacity: 1; } }
.vmv-icon i { font-size: 2.2rem; color: white; }
.vmv-card h3 { color: #0f172a; margin-bottom: 1rem; font-size: 1.4rem; font-weight: 800; position: relative; z-index: 1; }
.vmv-card p { color: #475569; font-style: italic; margin: 0; line-height: 1.7; position: relative; z-index: 1; }

/* Values */
.values-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.value-item {
  text-align: center; padding: 2.5rem 1.5rem;
  background: white; border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease; border: 1px solid #f1f5f9;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 180px;
}
.value-item:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(26,35,126,0.1); border-color: #1a237e; }
.value-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #1a237e, #3949ab);
  opacity: 0; transition: opacity 0.3s ease;
}
.value-item:hover::before { opacity: 1; }
.value-item::after {
  content: ''; position: absolute; bottom: -30px; right: -30px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(26,35,126,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.value-item i {
  width: 60px; height: 60px; line-height: 60px; text-align: center;
  background: linear-gradient(135deg, rgba(26,35,126,0.08), rgba(57,73,171,0.08));
  border-radius: 16px; font-size: 1.5rem; color: #1a237e; margin-bottom: 1rem;
  display: inline-block; transition: all 0.3s ease;
}
.value-item:hover i { background: linear-gradient(135deg, #1a237e, #3949ab); color: white; transform: scale(1.15) rotate(-5deg); }
.value-item h4 { color: #0f172a; font-size: 1rem; margin: 0; font-weight: 600; }

/* Governance */
.governance-level { margin-bottom: 3rem; }
.governance-level > h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem; font-weight: 700; color: #1a237e;
  position: relative; padding-bottom: 0.75rem; margin-bottom: 1.5rem;
}
.governance-level > h3::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px;
  background: linear-gradient(90deg, #ffd700, #f59e0b); border-radius: 2px;
}
.governance-functions, .governance-members {
  list-style: none; padding: 0; margin: 1.5rem 0;
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
  border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(26,35,126,0.06);
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.governance-functions li, .governance-members li {
  padding: 0.65rem 0 0.65rem 2.2rem; position: relative;
  color: #334155; line-height: 1.6; font-size: 0.92rem;
  border-bottom: 1px solid rgba(26,35,126,0.04);
  transition: all 0.2s ease;
}
.governance-functions li:last-child, .governance-members li:last-child { border-bottom: none; }
.governance-functions li:hover, .governance-members li:hover {
  background: rgba(26,35,126,0.02); padding-left: 2.5rem; border-radius: 8px;
}
.governance-functions li::before { content: '\2713'; position: absolute; left: 0; color: #1a237e; font-weight: bold; font-size: 0.85rem; }
.governance-members li::before { content: '\2022'; position: absolute; left: 0.5rem; color: #ffd700; font-weight: bold; font-size: 1.2rem; }

/* Board Members */
.board-members {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; margin-top: 2rem;
}
.member-card {
  padding: 2.5rem 2rem 2rem; text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  border-radius: 24px; border: 1px solid rgba(26,35,126,0.06);
  box-shadow: 0 10px 40px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.member-card:hover { transform: translateY(-10px); box-shadow: 0 25px 60px rgba(26,35,126,0.15); border-color: rgba(26,35,126,0.12); }
.member-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #1a237e, #3949ab, #ffd700);
}
.member-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(180deg, transparent 0%, rgba(26,35,126,0.02) 100%);
  pointer-events: none; border-radius: 0 0 24px 24px;
}
.member-image {
  width: 160px; height: 160px; margin: 0 auto 1.2rem;
  border-radius: 50%; overflow: hidden; position: relative; z-index: 1;
  box-shadow: 0 12px 35px rgba(26,35,126,0.2), 0 0 0 4px white, 0 0 0 6px rgba(26,35,126,0.08);
  transition: all 0.4s ease;
}
.member-card:hover .member-image {
  box-shadow: 0 16px 45px rgba(26,35,126,0.25), 0 0 0 4px white, 0 0 0 7px rgba(255,215,0,0.3);
}
.member-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.member-card:hover .member-image img { transform: scale(1.12); }
.member-role-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px;
  background: linear-gradient(135deg, rgba(26,35,126,0.08), rgba(57,73,171,0.06));
  border: 1px solid rgba(26,35,126,0.1); border-radius: 50px;
  font-size: 0.72rem; font-weight: 600; color: #1a237e;
  letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 0.8rem;
  position: relative; z-index: 1;
}
.member-role-badge i { font-size: 0.65rem; color: #ffd700; }
.member-info { position: relative; z-index: 1; }
.member-info h4 { color: #0f172a; margin-bottom: 0.35rem; font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.member-info p { color: #475569; margin: 0; font-size: 0.85rem; font-weight: 500; }
.member-deco-circle {
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(26,35,126,0.03) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.member-deco-circle:nth-child(1) { top: -60px; right: -60px; }
.member-deco-circle:nth-child(2) { bottom: -40px; left: -40px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(255,215,0,0.04) 0%, transparent 70%); }
@media (max-width: 991px) { .board-members { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .board-members { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; } }

/* Governance Chair */
.governance-chair {
  background: linear-gradient(135deg, #0d1442 0%, #1a237e 40%, #2d3a8a 100%);
  color: white; padding: 3rem 2.5rem; border-radius: 24px; text-align: center;
  margin-bottom: 2rem; position: relative; overflow: hidden;
  box-shadow: 0 20px 60px rgba(13,20,66,0.35), 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid rgba(255,215,0,0.08);
}
.governance-chair::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255,215,0,0.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(57,73,171,0.15) 0%, transparent 40%);
  pointer-events: none;
}
.governance-chair::after {
  content: ''; position: absolute; top: -50%; right: -30%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.chairman-image {
  width: 150px; height: 150px; margin: 0 auto 1.5rem;
  border-radius: 50%; overflow: hidden; position: relative; z-index: 1;
  box-shadow: 0 15px 45px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,215,0,0.15);
  border: 4px solid rgba(255,215,0,0.25);
  transition: all 0.4s ease;
}
.governance-chair:hover .chairman-image {
  box-shadow: 0 20px 55px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,215,0,0.25);
  transform: translateY(-4px);
}
.chairman-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.governance-chair:hover .chairman-image img { transform: scale(1.08); }
.chairman-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px;
  background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.25);
  border-radius: 50px; color: #FFD700; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 1rem;
  position: relative; z-index: 1;
}
.chairman-badge i { font-size: 0.7rem; }
.chairman-info { position: relative; z-index: 1; }
.chairman-info h4 { font-size: 1.4rem; margin-bottom: 0.4rem; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.chairman-info p { margin: 0; font-size: 1rem; opacity: 0.9; font-weight: 400; }
.chairman-deco {
  position: absolute; width: 120px; height: 120px; border-radius: 50%;
  border: 1px solid rgba(255,215,0,0.06); pointer-events: none; z-index: 0;
}
.chairman-deco:nth-child(1) { top: 20px; left: 20px; }
.chairman-deco:nth-child(2) { bottom: 30px; right: 30px; width: 80px; height: 80px; }

/* School Management */
.management-section { margin-top: 2rem; }
.management-leader {
  display: flex; align-items: center; gap: 1.5rem;
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border-radius: 20px; padding: 2rem; margin-bottom: 1.5rem;
  border: 1px solid rgba(26,35,126,0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
  position: relative; overflow: hidden;
}
.management-leader::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #1a237e, #3949ab, #ffd700);
}
.management-leader::after {
  content: ''; position: absolute; bottom: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(26,35,126,0.03) 0%, transparent 70%);
  pointer-events: none;
}
.leader-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px;
  background: linear-gradient(135deg, rgba(26,35,126,0.1), rgba(57,73,171,0.08));
  border: 1px solid rgba(26,35,126,0.12); border-radius: 50px;
  font-size: 0.7rem; font-weight: 600; color: #1a237e;
  letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 0.6rem;
}
.leader-badge i { font-size: 0.6rem; color: #ffd700; }
.leader-info h4 { font-size: 1.3rem; font-weight: 700; color: #0f172a; margin-bottom: 0.25rem; }
.leader-info p { margin: 0; color: #475569; font-size: 0.9rem; }
.principal-image {
  border-radius: 20px; overflow: hidden; position: relative;
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
  border: 3px solid rgba(26,35,126,0.08);
  transition: all 0.4s ease;
}
.principal-image:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  transform: translateY(-4px);
}
.principal-image img { width: 100%; display: block; transition: transform 0.5s ease; }
.principal-image:hover img { transform: scale(1.05); }
.principal-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,35,126,0.1), transparent 60%);
  pointer-events: none;
}
.principal-image-badge {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; background: rgba(13,20,66,0.85);
  backdrop-filter: blur(8px); border-radius: 50px;
  color: #FFD700; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.3px; text-transform: uppercase;
}
.principal-image-badge i { font-size: 0.6rem; }

/* Programs */
.programs-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.program-item {
  display: flex; align-items: flex-start; padding: 2rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.05);
  transition: all 0.3s ease; border: 1px solid rgba(26,35,126,0.06); gap: 1.2rem;
  position: relative; overflow: hidden;
}
.program-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #1a237e, #3949ab, #ffd700);
  opacity: 0; transition: opacity 0.3s ease;
}
.program-item:hover::before { opacity: 1; }
.program-item:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(26,35,126,0.1); border-color: rgba(26,35,126,0.12); }
.program-item .program-icon {
  width: 65px; height: 65px; flex-shrink: 0;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  border-radius: 18px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(26,35,126,0.25);
  transition: all 0.3s ease; position: relative; z-index: 1;
}
.program-item:hover .program-icon { transform: scale(1.08) rotate(-3deg); box-shadow: 0 12px 30px rgba(26,35,126,0.3); }
.program-item .program-icon i { font-size: 1.6rem; color: white; }
.program-details { flex: 1; position: relative; z-index: 1; }
.program-details h3 { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin-bottom: 0.3rem; }
.program-details .program-duration {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  background: rgba(26,35,126,0.06); border-radius: 50px;
  font-size: 0.72rem; font-weight: 600; color: #1a237e;
  margin-bottom: 0.5rem;
}
.program-details .program-duration i { font-size: 0.6rem; color: #ffd700; }
.program-details p { color: #475569; margin: 0; line-height: 1.5; font-size: 0.9rem; }
@media (max-width: 768px) { .programs-list { grid-template-columns: 1fr; } }

/* Strategic Objectives */
.objectives-grid { display: grid; gap: 1.5rem; }
.objective-item {
  display: flex; align-items: flex-start; padding: 2rem;
  background: white; border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease; border: 1px solid #f1f5f9; gap: 1.5rem;
}
.objective-item:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(26,35,126,0.1); border-color: rgba(26,35,126,0.15); }
.objective-number {
  width: 52px; height: 52px; flex-shrink: 0;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  color: white; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800;
  box-shadow: 0 8px 20px rgba(26,35,126,0.2);
  transition: all 0.3s ease;
}
.objective-item:hover .objective-number { transform: scale(1.1) rotate(-5deg); }
.objective-content h3 { color: #0f172a; margin-bottom: 0.5rem; font-size: 1.15rem; font-weight: 700; }
.objective-content p { color: #475569; margin: 0; line-height: 1.6; }

/* Campus Slider */
.campus-slider {
  position: relative; max-width: 100%; margin: 2rem auto;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.slider-wrapper { position: relative; width: 100%; height: 500px; overflow: hidden; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-caption {
  position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  background: linear-gradient(180deg, rgba(13,20,66,0.75) 0%, rgba(26,35,126,0.95) 100%);
  color: #ffffff; padding: 1.6rem 2rem; text-align: center;
  border-radius: 16px;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.slide.active .slide-caption { transform: translateY(0); }
.slide-caption h4 {
  margin: 0 0 0.5rem; font-size: 1.6rem; font-weight: 700;
  color: #FFD700; text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.3);
  letter-spacing: 0.5px;
}
.slide-caption p {
  margin: 0; font-size: 1.05rem; opacity: 1;
  color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  line-height: 1.5;
  font-weight: 500;
}
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.15); backdrop-filter: blur(10px);
  color: white; border: 2px solid rgba(255,255,255,0.2);
  width: 50px; height: 50px; border-radius: 50%;
  cursor: pointer; z-index: 10; font-size: 1.2rem;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.slider-btn:hover { background: rgba(255,255,255,0.3); transform: translateY(-50%) scale(1.1); }
.prev-btn { left: 20px; }
.next-btn { right: 20px; }
.slider-indicators {
  position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 10;
}
.indicator {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.4); cursor: pointer; border: none;
  transition: all 0.3s ease;
}
.indicator.active { background: #ffd700; transform: scale(1.4); box-shadow: 0 0 10px rgba(255,215,0,0.5); }

/* ============ Contact Page ============ */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 2.5rem; }
.contact-card { text-align: center; padding: 2.5rem; }
.contact-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem; box-shadow: 0 10px 30px rgba(26,35,126,0.3);
}
.contact-icon i { font-size: 2.5rem; color: white; }
.contact-card h4 { font-size: 1.4rem; font-weight: 700; color: #1e3c72; margin-bottom: 1.5rem; }
.contact-form-container {
  background: white; border-radius: 30px; padding: 4rem;
  box-shadow: 0 25px 80px rgba(0,0,0,0.12);
  border: 2px solid #e9ecef; position: relative; overflow: hidden;
  max-width: 900px; margin: 0 auto;
}
.contact-form-container::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #1a237e, #3949ab, #ffd700, #10b981, #1a237e);
  background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite;
}
.form-section {
  margin-bottom: 2.5rem; padding: 2rem;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 20px; border: 1px solid #dee2e6;
  transition: all 0.3s ease;
}
.form-section:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.submit-btn {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
  color: #0d1442; border: 2px solid #E6A100;
  padding: 1rem 3rem; border-radius: 50px; font-size: 1.1rem; font-weight: 700;
  cursor: pointer; transition: all 0.3s ease;
  display: inline-flex; align-items: center; gap: 0.8rem;
  box-shadow: 0 10px 30px rgba(255,165,0,0.3);
}
.submit-btn:hover {
  transform: perspective(1000px) translateY(-4px) translateZ(6px);
  box-shadow: 0 15px 40px rgba(255,165,0,0.45);
}
.hours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px,1fr)); gap: 2rem; }
.hours-card { padding: 2.5rem; }
.hours-list { list-style: none; padding: 0; margin: 0; }
.hour-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid #e9ecef;
  transition: all 0.3s ease;
}
.hour-item:hover {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  margin: 0 -1rem; padding: 1rem; border-radius: 10px;
}
.day { font-weight: 600; color: #495057; }
.time { color: #10b981; font-weight: 700; font-size: 1.1rem; }
.hour-item.closed .time { color: #dc3545; }
.map-content { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: start; margin-top: 2rem; }
.map-container { border-radius: 25px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.15); border: 2px solid #e9ecef; }
.map-container iframe { border: none; width: 100%; height: 500px; }
.map-info { border-radius: 30px; padding: 3rem; border: 2px solid #dee2e6; box-shadow: 0 25px 70px rgba(0,0,0,0.12); }
.notification { position: fixed; top: 20px; right: 20px; z-index: 9999; transform: translateX(400px); transition: transform 0.3s ease; }
.notification.show { transform: translateX(0); }
.notification-content { background: white; padding: 1rem 1.5rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 1rem; border-left: 4px solid #1a237e; }

/* ============ Application Page ============ */
.school-banner {
  background: linear-gradient(135deg, #f0dcc8 0%, #e8d0b8 100%);
  border-radius: 20px; padding: 3rem; text-align: center;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  border: 1px solid #dee2e6; position: relative; overflow: hidden;
}
.school-title { font-size: 1.75rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.school-details p { margin: 0.8rem 0; font-size: 1.1rem; color: #495057; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.announcement-card { text-align: center; padding: 2.5rem; }
.announcement-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #ffc107, #ff6b6b);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.announcement-icon i { font-size: 2rem; color: white; }
.announcement-title { font-size: 1.8rem; font-weight: 700; color: #856404; margin-bottom: 1rem; }
.announcement-text { font-size: 1.1rem; color: #856404; line-height: 1.6; max-width: 800px; margin: 0 auto; }
.requirements-card { background: #f0dcc8; border-radius: 20px; padding: 2.5rem; border: 1px solid #e9ecef; height: 100%; }
.interview-card { background: #f0dcc8; border-radius: 20px; padding: 2.5rem; border: 1px solid #e9ecef; height: 100%; }
.card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #f8f9fa; }
.card-header i {
  font-size: 2rem; color: #1a237e;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  width: 60px; height: 60px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
}
.card-header h4 { font-size: 1.5rem; font-weight: 700; color: #1e3c72; margin: 0; }
.detail-item { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background: #f8f9fa; border-radius: 15px; }
.detail-icon {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.detail-icon i { font-size: 1.2rem; color: white; }
.form-container {
  background: #f0dcc8; border-radius: 25px; padding: 3rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  border: 1px solid #e9ecef; position: relative; overflow: hidden;
}
.form-container::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #1a237e, #3949ab, #5c6bc0, #3949ab, #1a237e);
  background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite;
}
.form-header { text-align: center; margin-bottom: 3rem; }
.form-logo {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.form-logo i { font-size: 2.5rem; color: white; }
.form-title { font-size: 1.75rem; font-weight: 800; color: #0f172a; margin: 0; }
.application-form-section { margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, #f0dcc8, #e8d0b8); border-radius: 20px; border: 1px solid #e8dcc8; }
.application-form-section h4 { font-size: 1.3rem; font-weight: 700; color: #1e3c72; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
.is-invalid { border-color: #dc3545 !important; background-color: #fff5f5; }

/* ============ Volunteer Page ============ */
.volunteer-content h3 { color: var(--isnm-blue); margin-bottom: 1.5rem; font-size: 1.8rem; }
.volunteer-content p { color: var(--secondary-color); line-height: 1.8; margin-bottom: 2rem; }
.benefit-item {
  display: flex; align-items: flex-start; margin-bottom: 1.5rem;
  padding: 1rem; background: var(--light-color); border-radius: 10px;
  transition: all 0.3s ease;
}
.benefit-item:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.benefit-icon {
  width: 50px; height: 50px; background: var(--gradient-primary);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-right: 1rem; flex-shrink: 0;
}
.benefit-icon i { font-size: 1.2rem; color: white; }
.benefit-text h4 { color: var(--isnm-blue); margin: 0 0 0.5rem; font-size: 1.1rem; }
.benefit-text p { margin: 0; color: var(--secondary-color); line-height: 1.5; }
.opportunity-card { overflow: hidden; height: 100%; }
.opportunity-header {
  background: var(--gradient-primary); color: white;
  padding: 1.5rem; display: flex; align-items: center; gap: 1rem;
}
.opportunity-icon {
  width: 60px; height: 60px; background: rgba(255,255,255,0.2);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.opportunity-icon i { font-size: 1.5rem; color: white; }
.opportunity-title h3 { margin: 0; font-size: 1.3rem; font-weight: 600; }
.opportunity-content { padding: 2rem; }
.opportunity-content h4 { color: var(--isnm-blue); margin: 1.5rem 0 1rem; font-size: 1.1rem; }
.opportunity-content p { color: var(--secondary-color); line-height: 1.6; margin-bottom: 1rem; }
.benefit-card { text-align: center; }
.benefit-card-icon {
  width: 80px; height: 80px; background: var(--gradient-primary);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.benefit-card-icon i { font-size: 2rem; color: white; }
.benefit-card h4 { color: var(--isnm-blue); margin-bottom: 1rem; }
.benefit-card p { color: var(--secondary-color); line-height: 1.6; margin: 0; }
.application-form-container {
  background: white; border-radius: 20px; padding: 3rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ============ History Page ============ */
.history-intro { position: relative; overflow: hidden; }
.history-intro::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;
  background: radial-gradient(circle at 10% 20%, rgba(26,35,126,0.03) 0%, transparent 50%);
  pointer-events: none;
}
.intro-content-modern {
  background: #ffffff; border-radius: 24px; padding: 4rem 3rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.06);
  border: 1px solid rgba(226,232,240,0.8);
  max-width: 1000px; margin: 0 auto; position: relative;
}
.intro-content-modern::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #1a237e, #3949ab, #ffd700, #10b981, #1a237e);
  background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite;
}
.intro-text-big { font-size: 1.2rem; color: #2d3748; line-height: 1.8; margin-bottom: 3.5rem; text-align: center; max-width: 850px; margin-left: auto; margin-right: auto; }
.key-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 2rem; margin-top: 1rem; }
.highlight-item {
  background: #ffffff; border-radius: 20px; padding: 2.5rem 1.5rem;
  text-align: center; border: 1px solid #edf2f7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 200px; transition: all 0.3s ease;
}
.highlight-item:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(26,35,126,0.08); border-color: #1a237e; }
.highlight-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; box-shadow: 0 6px 20px rgba(26,35,126,0.25);
}
.highlight-icon i { font-size: 1.6rem; color: white; }
.highlight-item h4 { font-size: 1.15rem; font-weight: 700; color: #1e3c72; margin-bottom: 0.4rem; }
.highlight-item p { color: #6c757d; margin: 0; font-size: 0.95rem; }
.timeline-section { background: #fef9e7; }
.timeline-classic { position: relative; max-width: 800px; margin: 0 auto; }
.timeline-classic::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 4px; background: linear-gradient(180deg, #1a237e, #3949ab, #ffd700, #10b981);
  transform: translateX(-50%);
}
.timeline-entry { position: relative; margin-bottom: 4rem; display: flex; align-items: center; }
.timeline-entry:nth-child(odd) { flex-direction: row-reverse; }
.timeline-year-badge {
  width: 130px; height: 130px;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 1.2rem; text-align: center;
  box-shadow: 0 10px 40px rgba(26,35,126,0.5); margin: 0 2.5rem; flex-shrink: 0;
  border: 4px solid #ffd700; position: relative; z-index: 2;
  transition: all 0.3s ease;
}
.timeline-entry:hover .timeline-year-badge {
  transform: scale(1.1);
  box-shadow: 0 15px 50px rgba(26,35,126,0.6);
  border-color: #fff;
}
.timeline-content-card {
  background: white; border-radius: 20px; padding: 2rem;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  border: 1px solid #e9ecef; flex: 1; transition: all 0.3s ease;
  position: relative; overflow: hidden;
}
.timeline-content-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, #1a237e, #3949ab, #ffd700);
}
.timeline-content-card:hover { transform: translateY(-5px) translateX(3px); box-shadow: 0 25px 50px rgba(0,0,0,0.18); }
.timeline-content-card h3 { font-size: 1.4rem; font-weight: 700; color: #1e3c72; margin-bottom: 1rem; }
.timeline-content-card p { color: #495057; line-height: 1.7; margin: 0; }
.timeline-content-card .badge { font-size: 0.75rem; padding: 0.4rem 0.8rem; border-radius: 50px; font-weight: 600; letter-spacing: 0.3px; }
.timeline-content-card .mt-3 { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.achievements-section { background: #fef9e7; }
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 2rem; }
.achievement-card { text-align: center; padding: 2.5rem; }
.achievement-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem; box-shadow: 0 10px 30px rgba(16,185,129,0.3);
}
.achievement-icon i { font-size: 2.5rem; color: white; }
.achievement-card h3 { font-size: 1.4rem; font-weight: 700; color: #1e3c72; margin-bottom: 1rem; }
.achievement-card p { color: #6c757d; line-height: 1.6; margin: 0; }
.impact-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 2rem; }
.history-stat-item { background: white; border-radius: 25px; padding: 2.5rem; text-align: center; transition: all 0.3s ease; box-shadow: 0 15px 35px rgba(0,0,0,0.08); border: 1px solid #e9ecef; }
.history-stat-item:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
.stat-number-big { font-size: 3rem; font-weight: 700; color: #1e3c72; margin-bottom: 0.5rem; }
.stat-label { color: #6c757d; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.leadership-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.future-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.future-plans { background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 25px; padding: 2.5rem; border: 1px solid #dee2e6; transition: all 0.3s ease; }
.future-plans:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.plans-list { list-style: none; padding: 0; margin: 0; }
.plans-list li { padding: 1rem 0; border-bottom: 1px solid #dee2e6; color: #495057; padding-left: 2rem; position: relative; }
.plans-list li::before { content: '\2713'; position: absolute; left: 0; color: #1a237e; font-weight: bold; }

/* ============ News Page (merged from news.css) ============ */
.hero-section-news {
  background: linear-gradient(135deg, #0d1442 0%, #1a237e 50%, #3949ab 100%);
  color: #fff; padding: 60px 0 50px; text-align: center;
  position: relative; overflow: hidden;
}
.hero-section-news::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(255,215,0,0.06) 0%, transparent 50%);
  animation: heroGlow 8s ease-in-out infinite;
}
@keyframes heroGlow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-5%, 5%); }
}
.hero-section-news h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 2.25rem; font-weight: 900; }
.hero-section-news h1 i { color: #ffd700; }
.hero-section-news p { color: rgba(255,255,255,0.85); font-size: 1.05rem; max-width: 600px; margin: 8px auto 0; }
.single-article {
  background: #fff; border-radius: 16px; padding: 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  max-width: 900px; margin: 0 auto;
}
.single-article h1 { font-weight: 900; font-size: 2rem; line-height: 1.25; color: #0f172a; }
.single-article .meta { color: #94a3b8; font-size: .9rem; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
.single-article .featured-img { width: 100%; max-height: 450px; object-fit: cover; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.single-article .content { line-height: 1.85; font-size: 1.05rem; color: #334155; }
.admin-bar {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff; padding: 12px 0; font-size: .85rem;
  position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.admin-bar a { color: #ffd700; text-decoration: none; font-weight: 500; }
.badge-status { font-weight: 600; padding: 4px 12px; border-radius: 20px; font-size: .72rem; letter-spacing: 0.3px; text-transform: uppercase; }

/* ============ Page-specific Responsive ============ */
@media (max-width: 768px) {
  .donation-content { padding: 2rem; }
  .donation-image { height: 350px; }
  .impact-item { flex-direction: column; text-align: center; padding: 1rem; }
  .impact-icon { margin-right: 0; margin-bottom: 1rem; }
  .donation-amounts li { flex-wrap: wrap; gap: 0.25rem 0.5rem; }
  .payment-methods { grid-template-columns: repeat(2, 1fr); }
  .program-header { flex-direction: column; text-align: center; padding: 1.5rem; }
  .program-actions { flex-direction: column; gap: 0.75rem; }
  .hospital-card { flex-direction: column; text-align: center; padding: 1rem; }
  .hospital-icon { margin-right: 0; margin-bottom: 1rem; }
  .timeline-item { flex-direction: column; align-items: center; text-align: center; }
  .timeline-item:nth-child(even) { flex-direction: column; }
  .timeline-marker { margin-right: 0; margin-bottom: 1rem; }
  .process-timeline::before { left: 25px; }
  .slider-wrapper { height: 400px; }
  .slider-btn { width: 40px; height: 40px; font-size: 1rem; }
  .prev-btn { left: 10px; }
  .next-btn { right: 10px; }
  .slide-caption { padding: 1.2rem; }
  .slide-caption h4 { font-size: 1.3rem; }
  .program-item { flex-direction: column; text-align: center; }
  .objective-item { flex-direction: column; text-align: center; }
  .objective-number { margin-right: 0; margin-bottom: 1rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hours-grid { grid-template-columns: 1fr; gap: 2rem; }
  .map-content { grid-template-columns: 1fr; gap: 2rem; }
  .contact-form-container { padding: 2.5rem; }
  .form-section { padding: 2rem; }
  .map-container iframe { height: 400px; }
  .hero-section-news h1 { font-size: 1.6rem; }
  .hero-section-news { padding: 40px 0 30px; }
  .single-article { padding: 20px; }
  .intro-content-modern { padding: 3rem 1.5rem; border-radius: 20px; }
  .key-highlights { grid-template-columns: 1fr; gap: 1.2rem; }
  .highlight-item { padding: 1.5rem 1rem; min-height: 160px; }
  .achievements-grid { grid-template-columns: 1fr; }
  .leadership-content { grid-template-columns: 1fr; gap: 2rem; }
  .future-content { grid-template-columns: 1fr; gap: 2rem; }
  .impact-stats { grid-template-columns: repeat(2, 1fr); }
  .timeline-classic::before { left: 30px; }
  .timeline-entry { flex-direction: column !important; align-items: flex-start !important; }
  .timeline-year-badge { margin: 0 0 2rem 0; width: 80px; height: 80px; font-size: 0.9rem; }
  .benefit-item { flex-direction: column; text-align: center; }
  .benefit-icon { margin-right: 0; margin-bottom: 1rem; }
  .opportunity-header { flex-direction: column; text-align: center; }
  .application-form-container { padding: 2rem; }
  .form-container { padding: 2rem; }
  .application-form-section { padding: 1.5rem; }
  .school-title { font-size: 2rem; }
  .detail-item { flex-direction: column; text-align: center; gap: 0.5rem; }
  .card-header { flex-direction: column; text-align: center; gap: 0.5rem; }
  .section-header { margin-bottom: 2.5rem; }
  .board-members { grid-template-columns: 1fr; gap: 2rem; max-width: 400px; margin-left: auto; margin-right: auto; }
  .member-image { width: 140px; height: 140px; }
  .intro-image-badge { position: static; margin-top: 1rem; display: inline-flex; }
  .governance-chair::after { display: none; }
  .management-leader { flex-direction: column; text-align: center; }
  .slider-indicators { bottom: 70px; }
  .programs-list { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
  .donation-image { height: 280px; }
  .page-title { font-size: 1.8rem; }
  .program-content { padding: 1rem; }
  .vmv-card { padding: 1.5rem; }
  .value-item { padding: 1rem; }
  .intro-image { border-radius: 16px; }
  .values-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
  .governance-chair { padding: 2rem; }
  .member-card { padding: 2rem 1.5rem; }
}
@media (max-width: 480px) {
  .hero-section-news h1 { font-size: 1.3rem; }
  .hero-section-news { padding: 30px 0 20px; }
  .single-article { padding: 15px; }
  .news-card-img, .news-card-img-placeholder { height: 140px; }
  .intro-content-modern { padding: 2.5rem 1.2rem; }
  .highlight-item { padding: 1.2rem 0.8rem; min-height: 140px; }
  .leader-avatar { width: 100px; height: 100px; }
  .slider-wrapper { height: 300px; }
  .indicator { width: 10px; height: 10px; }
  .map-container iframe { height: 350px; }
  .contact-card, .hours-card, .map-info { padding: 2rem; }
  .contact-form-container { padding: 2rem; }
  .hours-grid { grid-template-columns: 1fr; }
}

/* ============ Responsive for about page small screens ============ */
@media (max-width: 400px) {
  .slider-wrapper { height: 260px; }
  .slider-btn { width: 30px; height: 30px; font-size: 0.8rem; }
  .indicator { width: 8px; height: 8px; }
}


/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE BUTTON & TITLE FIXES — All Public Pages
   Ensures NO white-on-white, NO invisible buttons/titles
   ═══════════════════════════════════════════════════════════════ */

/* ── Section Titles — Always Dark & Visible ── */
.section-title,
.section-header h2,
.page-title {
  color: #0f172a !important;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #FFD700, #F59E0B);
  border-radius: 2px;
  margin: 12px auto 0;
}

/* ── Subtitles — Always Visible Dark Gray ── */
.section-subtitle,
.section-header p,
.page-subtitle,
.section-header .lead {
  color: #475569 !important;
}

/* ── CTA Section — White Text on Dark Blue ── */
.cta-section h2,
.cta-section h3,
.cta-section p,
.cta-section .lead {
  color: #fff !important;
}

/* ── Hero Titles — White on Dark Overlay (skip bg-image headers) ── */
.hero-title,
.hero-section .cinematic-title,
.hero-section-news h1,
.hero-header:not(.hero-header-bg) .hero-title {
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.hero-subtitle,
.hero-section .hero-subtitle p,
.hero-header:not(.hero-header-bg) .hero-subtitle {
  color: rgba(255,255,255,0.9) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}

/* ── Page Header Titles (about, programs, donation, volunteer) ── */
.page-header:not(.page-header-bg) .page-title {
  color: #fff !important;
  text-shadow: 0 2px 15px rgba(0,0,0,0.3);
}

.page-header:not(.page-header-bg) .page-subtitle {
  color: rgba(255,255,255,0.85) !important;
}

/* ── All h2/h3/h4 in sections — Dark Text ── */
.programs-section h3,
.programs-section h4,
.about-section h3,
.about-section h4,
.facilities-section h3,
.facilities-section h4,
.testimonials-section h3,
.testimonials-section h5,
.news-section h3,
.news-section h5,
.donation-overview h3,
.donation-overview h4,
.donation-options h3,
.projects-section h3,
.volunteer-overview h3,
.volunteer-overview h4,
.volunteer-benefits h3,
.volunteer-benefits h4,
.contact-info-section h3,
.contact-info-section h4,
.office-hours-section h3,
.timeline-content-card h3,
.achievement-card h3,
.leader-profile h4,
.highlight-item h4,
.facility-card h4,
.program-card h3,
.program-card h4,
.hospital-card h4,
.vm-card h3,
.vm-card h4,
.value-item h4,
.opportunity-card h3,
.benefit-card h4,
.benefit-item h4,
.donation-card h3,
.project-content h3,
.contact-card h4,
.hours-card h3,
.map-info h3 {
  color: #0f172a !important;
}

/* ── Button Visibility Fixes ── */

/* btn-yellow — Dark text on yellow/gold (always visible) */
.btn-3d.btn-yellow {
  color: #1a1a2e !important;
  text-shadow: none !important;
}

/* btn-blue — White text on blue (always visible) */
.btn-3d.btn-blue {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* btn-green — White text on green (always visible) */
.btn-3d.btn-green {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* btn-red — White text on red (always visible) */
.btn-3d.btn-red {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* btn-chocolate — White text on brown (always visible) */
.btn-3d.btn-chocolate {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* btn-glass on dark backgrounds — white text (visible on dark) */
.cta-section .btn-glass,
.hero-section .btn-glass,
.hero-header .btn-glass,
.page-header .btn-glass {
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* btn-glass on light backgrounds — use dark variant */
.about-section .btn-glass,
.programs-section .btn-glass,
.news-section .btn-glass,
.donation-overview .btn-glass,
.volunteer-overview .btn-glass,
.contact-info-section .btn-glass {
  color: #1A237E !important;
  border-color: rgba(26,35,126,0.3) !important;
  background: rgba(26,35,126,0.08) !important;
}

/* btn-isnm — White text on navy (always visible) */
.btn-isnm {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* btn-outline-isnm — Dark text, always visible */
.btn-outline-isnm {
  color: #1A237E !important;
  border-color: #1A237E !important;
  background: transparent !important;
}

.btn-outline-isnm:hover {
  color: #fff !important;
  background: #1A237E !important;
}

/* ── Card Text Visibility ── */
.program-card h3,
.program-card h4,
.program-card p,
.donation-card h3,
.donation-card p,
.opportunity-card h3,
.opportunity-card p,
.benefit-card h4,
.benefit-card p,
.news-card-body h5 a,
.news-card-body p,
.facility-card h4,
.facility-card p,
.vm-card h3,
.vm-card h4,
.vm-card p,
.value-item h4,
.value-item p,
.contact-card h4,
.contact-card p,
.hours-card h3,
.hours-card p {
  color: #0f172a !important;
}

/* ── Stats Section — Ensure numbers are visible ── */
.stat-number {
  color: #0f172a !important;
  text-shadow: none !important;
}

.stat-label {
  color: #475569 !important;
}

/* ── Timeline Content — Visible on white backgrounds ── */
.timeline-content-card h3,
.timeline-content-card p,
.timeline-content h4,
.timeline-content p {
  color: #0f172a !important;
}

/* ── Achievement Cards ── */
.achievement-card h3,
.achievement-card p {
  color: #0f172a !important;
}

/* ── Form Labels — Always Dark ── */
.form-label {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* ── Table Headers ── */
.table thead th {
  color: #0f172a !important;
}

/* ── Dropdown Menus ── */
.dropdown-item {
  color: #1e293b !important;
}

.dropdown-item:hover {
  background: rgba(26,35,126,0.08) !important;
  color: #1A237E !important;
}

/* ── Alert/Info Boxes in Forms ── */
.alert-info {
  color: #0c5460 !important;
  background: #d1ecf1 !important;
  border-color: #bee5eb !important;
}

/* ── CTA Buttons Container ── */
.cta-section .cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-section .btn-3d {
  position: relative;
  z-index: 10;
}

/* ── Program Card Buttons — Consistent Styling ── */
.program-card .btn-3d {
  margin-top: 8px;
}

/* ── Donation Card Buttons ── */
.donation-card .btn-3d {
  margin-top: 12px;
  width: 100%;
}

/* ── Opportunity Card Buttons ── */
.opportunity-card .btn-3d {
  margin-top: 12px;
  width: 100%;
}

/* ── News Card Read More ── */
.news-card-body .btn-3d {
  margin-top: 8px;
}

/* ── Contact Form Submit Button ── */
.contact-form-container .btn-3d-block {
  width: 100%;
  margin-top: 16px;
}

/* ── Volunteer Form Submit ── */
.volunteer-application .btn-3d-block {
  width: 100%;
  margin-top: 16px;
}

/* ── Map Section Buttons ── */
.map-info .btn-3d {
  margin-top: 12px;
}

/* ── Slider Navigation Buttons ── */
.slider-btn {
  background: rgba(26,35,126,0.8) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.slider-btn:hover {
  background: #FFD700 !important;
  color: #1A237E !important;
  border-color: #FFD700 !important;
  transform: scale(1.1);
}

/* ── Gallery Captions — White text with dark overlay ── */
.slide-caption {
  background: linear-gradient(transparent, rgba(0,0,0,0.7)) !important;
  color: #fff !important;
}

.slide-caption h4 {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5) !important;
}

/* ═══════════════════════════════════════════════════════
   COLOR VISIBILITY FIXES — Master Rules
   Ensure all text is readable on every section
   ═══════════════════════════════════════════════════════ */

/* ── Dark gradient sections: dark background, white text ── */
.hero-header:not(.hero-header-bg),
.hero-section,
.page-header:not(.page-header-bg) {
  background: var(--gradient-primary) !important;
  background-image: var(--gradient-primary) !important;
}

/* Text inside dark hero/page-header sections → white (non-bg variants) */
.hero-header:not(.hero-header-bg) h1, .hero-header:not(.hero-header-bg) h2, .hero-header:not(.hero-header-bg) h3, .hero-header:not(.hero-header-bg) h4, .hero-header:not(.hero-header-bg) h5,
.hero-header:not(.hero-header-bg) p, .hero-header:not(.hero-header-bg) span, .hero-header:not(.hero-header-bg) a,
.hero-section h1, .hero-section h2, .hero-section h3,
.hero-section p, .hero-section span, .hero-section a,
.page-header:not(.page-header-bg) h1, .page-header:not(.page-header-bg) h2, .page-header:not(.page-header-bg) h3, .page-header:not(.page-header-bg) h4, .page-header:not(.page-header-bg) h5,
.page-header:not(.page-header-bg) p, .page-header:not(.page-header-bg) span, .page-header:not(.page-header-bg) a {
  color: #fff !important;
}

/* Background image headers: gold title, white subtitle */
.page-header-bg .page-title,
.hero-header-bg .hero-title {
  color: #FFD700 !important;
}
.page-header-bg .page-subtitle,
.hero-header-bg .hero-subtitle {
  color: rgba(255,255,255,0.95) !important;
}

/* ── CTA section: dark gradient bg + readable text + visible buttons ── */
.cta-section {
  background: linear-gradient(135deg, #0d1442 0%, #1a237e 50%, #3949ab 100%) !important;
  color: #fff !important;
}
.cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4,
.cta-section p, .cta-section span, .cta-section .lead {
  color: #fff !important;
}
.cta-section .tag {
  color: #fff !important;
  background: rgba(255,215,0,0.2) !important;
  border: 1px solid rgba(255,215,0,0.4) !important;
}

/* CTA buttons: keep their own 3D styling intact — do NOT override btn-3d colors */

/* ── Hero stats: white text on colored stat items ── */
.hero-stats .stat-number,
.hero-stats .stat-label,
.hero-stats .stat-item {
  color: #fff !important;
}
.stat-green, .stat-blue, .stat-chocolate, .stat-red, .stat-orange {
  color: #fff !important;
}
.stat-green .stat-number, .stat-green .stat-label,
.stat-blue .stat-number, .stat-blue .stat-label,
.stat-chocolate .stat-number, .stat-chocolate .stat-label,
.stat-red .stat-number, .stat-red .stat-label,
.stat-orange .stat-number, .stat-orange .stat-label {
  color: #fff !important;
}

/* ── Quick stats cards section: dark text on white card bg ── */
.stats-section {
  background: #f8fafc !important;
}
.stats-section .stat-card {
  background: #fff !important;
  color: #1e293b !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
.stats-section .stat-card .stat-number {
  color: #1a237e !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
}
.stats-section .stat-card .stat-label {
  color: #64748b !important;
}
.stats-section .stat-card .stat-card-icon {
  color: #fff !important;
  background: #1a237e !important;
}
.stats-section .stat-card .stat-card-icon.icon-green {
  background: #059669 !important;
}
.stats-section .stat-card .stat-card-icon.icon-blue {
  background: #1E88E5 !important;
}
.stats-section .stat-card .stat-card-icon.icon-gold {
  background: #FFA000 !important;
}

/* ── Light sections: dark text (NO inherited white) ── */
.programs-section, .about-section,
.facilities-section, .testimonials-section, .news-section,
.contact-info-section, .mission-section, .services-section,
.section-light, .bg-white, .bg-light {
  color: #1e293b !important;
}
.programs-section h1, .programs-section h2, .programs-section h3, .programs-section h4,
.programs-section p, .programs-section span, .programs-section li, .programs-section a,
.programs-section .section-title, .programs-section .section-subtitle,
.about-section h1, .about-section h2, .about-section h3, .about-section h4,
.about-section p, .about-section span, .about-section li,
.about-section .section-title, .about-section .about-text,
.facilities-section h1, .facilities-section h2, .facilities-section h3, .facilities-section h4,
.facilities-section p, .facilities-section span,
.testimonials-section h1, .testimonials-section h2, .testimonials-section h3,
.testimonials-section p, .testimonials-section span,
.news-section h1, .news-section h2, .news-section h3, .news-section p, .news-section a {
  color: #1e293b !important;
}

/* ── Buttons: let 3D button system control its own colors ── */
/* Do NOT override .btn-3d color — each variant sets its own */

/* Tags/badges on light backgrounds */
.tag {
  color: #1a237e !important;
}
.tag-primary {
  background: rgba(26,35,126,0.1) !important;
  color: #1a237e !important;
}
.tag-gold {
  background: rgba(255,160,0,0.12) !important;
  color: #B8860B !important;
}

/* ── Navigation & header links inside hero sections ── */
.hero-header .navbar a,
.hero-header .nav-link,
.hero-section .navbar a,
.hero-section .nav-link,
.page-header .navbar a,
.page-header .nav-link {
  color: #fff !important;
}
.hero-header .navbar a:hover,
.hero-header .nav-link:hover,
.hero-section .navbar a:hover,
.hero-section .nav-link:hover,
.page-header .navbar a:hover,
.page-header .nav-link:hover {
  color: #FFD700 !important;
}

/* ── Footer: white text on dark background ── */
.footer, .footer p, .footer span, .footer a, .footer h3, .footer h4, .footer h5,
.footer-links a, .footer-contact p, .footer-contact a {
  color: #fff !important;
}
.footer-links a:hover, .footer-contact a:hover {
  color: #FFD700 !important;
}

/* ── Animate-on-scroll: ensure visibility when JS triggers ── */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.animate-on-scroll.visible {
  opacity: 1 !important;
}
.animate-on-scroll.visible * {
  color: inherit !important;
}

/* ── Staff Login button in navbar ── */
.navbar .btn-staff-login,
.navbar .btn-outline-light {
  color: #FFD700 !important;
  border-color: #FFD700 !important;
}
.navbar .btn-staff-login:hover,
.navbar .btn-outline-light:hover {
  color: #1A237E !important;
  background: #FFD700 !important;
}

/* ===== Enhanced Card Hover & Graphic Effects ===== */
.donation-card,
.project-card,
.opportunity-card,
.benefit-card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.donation-card:hover,
.project-card:hover,
.opportunity-card:hover,
.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(26,35,126,0.12), 0 0 0 1px rgba(255,215,0,0.08);
}

/* Decorative diagonal stripe on cards on hover */
.donation-card::before,
.project-card::before,
.opportunity-card::before {
  transition: height 0.3s ease;
}
.donation-card:hover::before,
.project-card:hover::before,
.opportunity-card:hover::before {
  height: 5px;
}

/* Section decorative corner accents */
.section-decor {
  position: relative;
}
.section-decor::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 80px; height: 80px;
  background: linear-gradient(135deg, rgba(255,215,0,0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Animated gradient border on focus cards */
@keyframes gradientBorder {
  0% { border-color: rgba(26,35,126,0.1); }
  50% { border-color: rgba(255,215,0,0.3); }
  100% { border-color: rgba(26,35,126,0.1); }
}

/* Pulse glow on donation icon */
@keyframes iconPulse {
  0%, 100% { box-shadow: 0 10px 25px rgba(26,35,126,0.25); }
  50% { box-shadow: 0 10px 35px rgba(255,215,0,0.3); }
}
.donation-card:hover .donation-icon {
  animation: iconPulse 1.5s ease-in-out infinite;
}

/* Enhanced volunteer opportunity card stripe */
.opportunity-card .opportunity-header {
  position: relative;
  overflow: hidden;
}

/* Red stripe glow effect for featured cards */
.stripe-featured::after {
  box-shadow: 0 0 8px rgba(220,38,38,0.2), 0 4px 12px rgba(220,38,38,0.1);
}

/* Image zoom on project cards */
.project-image {
  position: relative;
}
.project-image img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.project-card:hover .project-image img {
  transform: scale(1.05);
}

/* Floating label on donation cards */
.donation-card .donation-icon::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 23px;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}
.donation-card:hover .donation-icon::after {
  border-color: rgba(255,215,0,0.3);
}

/* Enhanced progress bar animation */
.progress-bar {
  position: relative;
  overflow: hidden;
}
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 0; bottom: 0;
  width: 200%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  animation: progressShine 2s ease-in-out infinite;
}
@keyframes progressShine {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(50%); }
}

/* Decorative dot pattern for bg-light sections */
.bg-light::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26,35,126,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.bg-light {
  position: relative;
}

/* Mobile adjustments for red stripes */
@media (max-width: 768px) {
  .donation-card::after,
  .project-card::after,
  .opportunity-card::after,
  .benefit-card::after,
  .vmv-card::after,
  .member-card::after,
  .program-item::after,
  .impact-item::after,
  .timeline-content-card::after {
    height: 4px;
  }
  .stripe-featured::after {
    height: 5px !important;
  }
}