/*
Theme Name: DDM Public School Theme
Theme URI: https://ddmgroup.in/
Author: DDM Group
Author URI: https://ddmgroup.in/
Description: Premium Custom WordPress Theme for D.D.M. Public School Korba with Hero Slider, Photo Gallery Manager, CBSE Disclosure, and School Administration Panel.
Version: 1.2.0
Text Domain: ddm-theme
*/

/* ============================================
       CSS VARIABLES & RESET
    ============================================ */
    :root {
      --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-heading: 'Outfit', 'Playfair Display', serif;
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-accent: 'Montserrat', sans-serif;
      --navy: #0B114A;
      --navy-light: #1a2268;
      --navy-dark: #060c34;
      --red: #E41B17;
      --red-light: #ff3330;
      --gold: #C9A84C;
      --gold-light: #f0c96e;
      --white: #ffffff;
      --off-white: #f8f9fc;
      --light-gray: #f0f2f8;
      --gray: #6b7280;
      --dark: #1a1a2e;
      --gradient-primary: linear-gradient(135deg, #0B114A 0%, #1a2268 50%, #0B114A 100%);
      --gradient-red: linear-gradient(135deg, #E41B17, #ff6b35);
      --gradient-gold: linear-gradient(135deg, #C9A84C, #f0c96e);
      --shadow-sm: 0 2px 15px rgba(11, 17, 74, 0.08);
      --shadow-md: 0 8px 30px rgba(11, 17, 74, 0.15);
      --shadow-lg: 0 20px 60px rgba(11, 17, 74, 0.2);
      --shadow-xl: 0 30px 80px rgba(11, 17, 74, 0.3);
      --border-radius: 16px;
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
      --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-size: 16.5px;
    }

    body {
      font-family: var(--font-main);
      color: var(--dark);
      background: var(--white);
      overflow-x: hidden;
      font-size: 16px;
      line-height: 1.7;
      letter-spacing: -0.01em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-heading);
      letter-spacing: -0.02em;
    }

    p {
      font-family: var(--font-main);
      line-height: 1.75;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition);
    }

    img {
      max-width: 100%;
      height: auto;
    }

    ul {
      list-style: none;
    }

    /* ============================================
       TYPOGRAPHY
    ============================================ */
    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-main);
      font-size: 13.5px;
      font-weight: 800;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 16px;
    }

    .section-label::before {
      content: '';
      width: 30px;
      height: 2px;
      background: var(--gradient-red);
      border-radius: 2px;
    }

    .section-title {
      font-family: var(--font-heading);
      font-size: clamp(2.2rem, 4.2vw, 3.2rem);
      font-weight: 800;
      color: var(--navy);
      line-height: 1.25;
      margin-bottom: 20px;
      letter-spacing: -0.02em;
    }

    .section-title span {
      color: var(--red);
    }

    .section-subtitle {
      font-family: var(--font-main);
      font-size: 1.12rem;
      color: #4b5563;
      max-width: 640px;
      line-height: 1.85;
    }

    /* ============================================
       BUTTONS
    ============================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 30px;
      border-radius: 50px;
      font-family: var(--font-main);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.2px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 100%; height: 100%;
      background: rgba(255,255,255,0.15);
      transition: left 0.4s ease;
    }

    .btn:hover::before {
      left: 100%;
    }

    .btn-primary {
      background: var(--gradient-red);
      color: var(--white);
      box-shadow: 0 8px 25px rgba(228, 27, 23, 0.35);
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 35px rgba(228, 27, 23, 0.45);
      color: var(--white);
    }

    .btn-outline {
      background: transparent;
      color: var(--white);
      border-color: rgba(255,255,255,0.6);
      backdrop-filter: blur(10px);
    }

    .btn-outline:hover {
      background: var(--white);
      color: var(--navy);
      border-color: var(--white);
      transform: translateY(-3px);
    }

    .btn-navy {
      background: var(--gradient-primary);
      color: var(--white);
      box-shadow: 0 8px 25px rgba(11, 17, 74, 0.35);
    }

    .btn-navy:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 35px rgba(11, 17, 74, 0.45);
      color: var(--white);
    }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--light-gray); }
    ::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; }

    /* ============================================
       TOP BAR
    ============================================ */
    .top-bar {
      background: var(--navy-dark);
      padding: 9px 0;
      font-size: 13.5px;
      border-bottom: 1px solid rgba(201, 168, 76, 0.3);
    }

    .top-bar-inner {
      max-width: 100%;
      margin: 0 auto;
      padding: 0 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .top-bar-left {
      display: flex;
      gap: 24px;
      align-items: center;
    }

    .top-bar-left a {
      color: rgba(255,255,255,0.85);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13.5px;
      font-weight: 500;
      transition: color 0.3s;
    }

    .top-bar-left a:hover { color: var(--gold-light); }
    .top-bar-left i { color: var(--gold); font-size: 13px; }

    .top-bar-right {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .top-bar-right a {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      transition: var(--transition);
    }

    .top-bar-right a:hover {
      background: var(--gold);
      color: var(--navy);
      transform: translateY(-2px);
    }

    /* ============================================
       NAVBAR (STICKY, ULTRA-PREMIUM WITH WHITE GLASS LOGO)
    ============================================ */
    .navbar {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      transition: var(--transition);
      padding: 0;
      background: rgba(11, 17, 74, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 4px 30px rgba(11, 17, 74, 0.35);
      border-bottom: 1px solid rgba(201, 168, 76, 0.25);
    }

    .navbar.scrolled {
      background: rgba(6, 12, 52, 0.99);
      box-shadow: 0 6px 35px rgba(6, 12, 52, 0.5);
    }

    body.admin-bar .navbar {
      top: 32px;
    }

    @media screen and (max-width: 782px) {
      body.admin-bar .navbar {
        top: 46px;
      }
    }

    .nav-inner {
      max-width: 100%;
      margin: 0 auto;
      padding: 0 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      height: 86px;
      width: 100%;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 13px;
      flex: 1 1 0%;
      min-width: 0;
      justify-content: flex-start;
      text-decoration: none;
    }

    /* White Glass Effect Badge for Logo - Animated Glowing Aura */
    .logo-glass {
      position: relative;
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: #ffffff;
      border: 2.5px solid #f0c96e;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 3px;
      flex-shrink: 0;
      transition: all 0.35s ease;
      animation: logoGlowPulse 2.8s infinite ease-in-out;
    }

    .logo-glass::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(240, 201, 110, 0.6) 0%, rgba(240, 201, 110, 0.25) 45%, transparent 72%);
      z-index: -1;
      animation: logoAuraBreathe 2.8s infinite ease-in-out;
      pointer-events: none;
    }

    .nav-logo:hover .logo-glass {
      transform: scale(1.08);
      border-color: #ffffff;
      box-shadow: 0 0 32px rgba(240, 201, 110, 1), 0 0 55px rgba(255, 225, 120, 0.8), 0 0 75px rgba(240, 201, 110, 0.45);
    }

    @keyframes logoGlowPulse {
      0%, 100% {
        box-shadow: 0 0 14px rgba(240, 201, 110, 0.5),
                    0 0 26px rgba(240, 201, 110, 0.28),
                    0 4px 18px rgba(0, 0, 0, 0.35),
                    inset 0 1px 2px rgba(255, 255, 255, 1);
        border-color: #f0c96e;
      }
      50% {
        box-shadow: 0 0 26px rgba(240, 201, 110, 0.95),
                    0 0 45px rgba(255, 225, 120, 0.65),
                    0 0 60px rgba(228, 27, 23, 0.25),
                    0 6px 24px rgba(0, 0, 0, 0.45),
                    inset 0 1px 4px rgba(255, 255, 255, 1);
        border-color: #fff4bf;
      }
    }

    @keyframes logoAuraBreathe {
      0%, 100% {
        transform: scale(0.92);
        opacity: 0.45;
      }
      50% {
        transform: scale(1.22);
        opacity: 0.95;
      }
    }

    .logo-glass img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      border-radius: 50%;
    }

    .nav-logo-text {
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }

    .nav-logo-text h1 {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 800;
      color: var(--white);
      line-height: 1.2;
      margin: 0;
      letter-spacing: 0.3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .nav-logo-text p {
      font-size: 11.5px;
      color: var(--gold-light);
      letter-spacing: 1.6px;
      text-transform: uppercase;
      font-family: var(--font-main);
      margin: 3px 0 0 0;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    }

    /* Centered Navigation Menu Strip */
    .nav-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      list-style: none;
      margin: 0 auto;
      padding: 0;
      flex: 0 0 auto;
    }

    .nav-menu > li {
      position: relative;
      list-style: none;
    }

    .nav-menu > li > a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 12px;
      color: rgba(255, 255, 255, 0.95);
      font-family: var(--font-main);
      font-size: 15px;
      font-weight: 600;
      border-radius: 8px;
      letter-spacing: -0.01em;
      white-space: nowrap;
      transition: var(--transition);
      position: relative;
      text-decoration: none;
    }

    .nav-menu > li > a::after {
      content: '';
      position: absolute;
      bottom: 2px; left: 50%;
      width: 0; height: 2.5px;
      background: var(--gold);
      border-radius: 2px;
      transform: translateX(-50%);
      transition: width 0.3s ease;
    }

    .nav-menu > li > a:hover::after { width: 65%; }
    .nav-menu > li > a:hover {
      color: var(--white);
      background: rgba(255, 255, 255, 0.1);
    }

    .has-dropdown {
      position: relative;
    }

    .has-dropdown > a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .dropdown-menu-custom {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 230px;
      background: var(--white);
      border-radius: 12px;
      box-shadow: var(--shadow-lg);
      padding: 8px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: all 0.3s ease;
      border-top: 3px solid var(--red);
      list-style: none;
      z-index: 1001;
    }

    .has-dropdown:hover .dropdown-menu-custom {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .dropdown-menu-custom li {
      list-style: none;
    }

    .dropdown-menu-custom a {
      display: block;
      padding: 10px 18px;
      color: var(--dark) !important;
      font-family: var(--font-main);
      font-size: 14.5px;
      font-weight: 600;
      border-radius: 8px;
      transition: var(--transition);
      text-decoration: none;
      white-space: nowrap;
    }

    .dropdown-menu-custom a::after { display: none !important; }
    .dropdown-menu-custom a:hover {
      background: var(--light-gray);
      color: var(--navy) !important;
      padding-left: 22px;
    }

    .nav-cta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      flex: 1 1 0%;
      min-width: 0;
    }

    .nav-cta .btn {
      white-space: nowrap;
      font-family: var(--font-main);
      font-size: 14px;
      font-weight: 700;
      padding: 9px 18px;
      letter-spacing: 0.1px;
    }

    .nav-btn-portal {
      border: 1.5px solid rgba(255,255,255,0.7) !important;
      color: #fff !important;
    }

    .nav-btn-portal:hover {
      background: #fff !important;
      color: var(--navy) !important;
    }

    .nav-btn-apply {
      box-shadow: 0 4px 18px rgba(228, 27, 23, 0.45);
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
    }

    .hamburger span {
      width: 24px;
      height: 2px;
      background: var(--white);
      border-radius: 2px;
      transition: var(--transition);
    }

    /* ============================================
       HERO SECTION
    ============================================ */
    .hero {
      min-height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--gradient-primary);
    }

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

    .hero-bg-image {
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0.18;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
        rgba(11, 17, 74, 0.92) 0%,
        rgba(11, 17, 74, 0.75) 50%,
        rgba(228, 27, 23, 0.3) 100%
      );
    }

    .particles {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .particle {
      position: absolute;
      border-radius: 50%;
      background: rgba(201, 168, 76, 0.15);
      animation: float-particle 8s ease-in-out infinite;
    }

    @keyframes float-particle {
      0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
      50% { transform: translateY(-30px) rotate(180deg); opacity: 1; }
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      max-width: 1360px;
      margin: 0 auto;
      padding: 120px 24px 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      width: 100%;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(201, 168, 76, 0.15);
      border: 1px solid rgba(201, 168, 76, 0.4);
      color: var(--gold-light);
      padding: 8px 22px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 24px;
      font-family: var(--font-accent);
      animation: fadeInDown 0.8s ease forwards;
    }

    .hero-badge i { color: var(--gold); animation: spin 3s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .hero-title {
      font-family: var(--font-serif);
      font-size: clamp(2.6rem, 5.2vw, 4.2rem);
      font-weight: 800;
      color: var(--white);
      line-height: 1.15;
      margin-bottom: 24px;
      animation: fadeInLeft 0.9s ease forwards;
    }

    .hero-title .highlight {
      color: var(--gold-light);
      position: relative;
    }

    .hero-title .highlight::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0; right: 0;
      height: 3px;
      background: var(--gradient-gold);
      border-radius: 2px;
    }

    .hero-title .line-red { color: var(--red-light); }

    .hero-desc {
      color: rgba(255,255,255,0.88);
      font-size: 1.1rem;
      line-height: 1.9;
      margin-bottom: 36px;
      animation: fadeInLeft 1s ease forwards;
    }

    .hero-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      animation: fadeInUp 1.1s ease forwards;
    }

    .hero-stats {
      display: flex;
      gap: 32px;
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid rgba(255,255,255,0.15);
      animation: fadeInUp 1.2s ease forwards;
    }

    .hero-stat-item {
      text-align: center;
    }

    .hero-stat-num {
      font-family: var(--font-heading);
      font-size: 2.3rem;
      font-weight: 800;
      color: var(--gold-light);
      display: block;
      line-height: 1;
    }

    .hero-stat-label {
      font-size: 12.5px;
      color: rgba(255,255,255,0.75);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-family: var(--font-accent);
      margin-top: 6px;
      display: block;
      font-weight: 600;
    }

    .hero-right {
      display: flex;
      flex-direction: column;
      gap: 20px;
      animation: fadeInRight 1s ease forwards;
    }

    .hero-card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      backdrop-filter: blur(20px);
      border-radius: 20px;
      padding: 24px 28px;
      display: flex;
      align-items: center;
      gap: 20px;
      transition: var(--transition);
    }

    .hero-card:hover {
      background: rgba(255,255,255,0.12);
      transform: translateX(-8px);
    }

    .hero-card-icon {
      width: 56px; height: 56px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }

    .hero-card-icon.red { background: rgba(228, 27, 23, 0.2); color: #ff6b6b; }
    .hero-card-icon.gold { background: rgba(201, 168, 76, 0.2); color: var(--gold-light); }
    .hero-card-icon.green { background: rgba(34, 197, 94, 0.2); color: #4ade80; }

    .hero-card-content h3 {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 4px;
    }

    .hero-card-content p {
      font-size: 14px;
      color: rgba(255,255,255,0.72);
      line-height: 1.6;
    }

    /* ============================================
       TICKER / NOTICE MARQUEE (SINGLE & ISOLATED)
    ============================================ */
    .ticker-bar {
      background: linear-gradient(90deg, #c41512 0%, #E41B17 40%, #ea2622 100%);
      padding: 0;
      overflow: hidden;
      height: 48px;
      display: flex;
      align-items: center;
      position: relative;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 3px 12px rgba(228, 27, 23, 0.25);
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }

    .ticker-inner {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .ticker-label {
      background: #0B114A;
      color: #f0c96e;
      font-family: var(--font-accent);
      font-size: 13.5px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 0 26px 0 20px;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      flex-shrink: 0;
      z-index: 10;
      position: relative;
      box-shadow: 6px 0 16px rgba(0, 0, 0, 0.35);
      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    }

    .ticker-label i {
      color: #E41B17;
      font-size: 14px;
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.18); opacity: 0.85; }
    }

    .ticker-track-wrap {
      flex: 1;
      overflow: hidden;
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      mask-image: linear-gradient(to right, transparent 0px, black 25px, black calc(100% - 30px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0px, black 25px, black calc(100% - 30px), transparent 100%);
    }

    .ticker-content {
      display: flex;
      align-items: center;
      white-space: nowrap;
      animation: ticker-scroll 35s linear infinite;
      will-change: transform;
    }

    .ticker-content:hover {
      animation-play-state: paused;
      cursor: pointer;
    }

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

    .ticker-item {
      color: #ffffff;
      font-family: var(--font-main);
      font-size: 15px;
      font-weight: 600;
      padding-right: 65px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .ticker-item::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #f0c96e;
      display: inline-block;
    }

    /* ============================================
       ABOUT SECTION
    ============================================ */
    .about {
      padding: 100px 0;
      background: var(--white);
    }

    .container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .about-image-wrap {
      position: relative;
    }

    .about-main-img {
      width: 100%;
      border-radius: 24px;
      box-shadow: var(--shadow-xl);
      object-fit: cover;
      height: 520px;
    }

    .about-badge-card {
      position: absolute;
      bottom: -24px; right: -24px;
      background: var(--gradient-primary);
      color: var(--white);
      padding: 24px 28px;
      border-radius: 20px;
      text-align: center;
      box-shadow: var(--shadow-lg);
    }

    .about-badge-card .num {
      font-family: var(--font-heading);
      font-size: 2.6rem;
      font-weight: 800;
      color: var(--gold-light);
      display: block;
    }

    .about-badge-card .label {
      font-size: 13.5px;
      font-family: var(--font-accent);
      font-weight: 700;
      color: rgba(255,255,255,0.9);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .about-corner-shape {
      position: absolute;
      top: -24px; left: -24px;
      width: 100px; height: 100px;
      border: 4px solid var(--gold);
      border-radius: 16px;
      z-index: -1;
      opacity: 0.5;
    }

    .about-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 32px;
    }

    .about-feature {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px;
      border-radius: 12px;
      background: var(--off-white);
      transition: var(--transition);
    }

    .about-feature:hover {
      background: var(--light-gray);
      transform: translateY(-2px);
    }

    .about-feature i {
      color: var(--red);
      font-size: 19px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .about-feature p {
      font-family: var(--font-main);
      font-size: 15px;
      font-weight: 600;
      color: var(--dark);
      line-height: 1.55;
    }

    /* ============================================
       STATS SECTION
    ============================================ */
    .stats {
      background: var(--gradient-primary);
      padding: 70px 0;
      position: relative;
      overflow: hidden;
    }

    .stats::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: var(--gradient-gold);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }

    .stat-item {
      text-align: center;
      padding: 40px 24px;
      position: relative;
      transition: var(--transition);
    }

    .stat-item::after {
      content: '';
      position: absolute;
      right: 0; top: 20%; bottom: 20%;
      width: 1px;
      background: rgba(255,255,255,0.1);
    }

    .stat-item:last-child::after { display: none; }

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

    .stat-icon {
      width: 60px; height: 60px;
      border-radius: 16px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: var(--gold-light);
      margin: 0 auto 20px;
    }

    .stat-num {
      font-family: var(--font-heading);
      font-size: 3.2rem;
      font-weight: 800;
      color: var(--white);
      display: block;
      line-height: 1;
    }

    .stat-suffix {
      color: var(--gold-light);
    }

    .stat-label {
      font-family: var(--font-accent);
      font-size: 13.5px;
      font-weight: 700;
      color: rgba(255,255,255,0.78);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-top: 10px;
      display: block;
    }

    /* ============================================
       PROGRAMS SECTION
    ============================================ */
    .programs {
      padding: 100px 0;
      background: var(--off-white);
    }

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

    .section-header .section-label {
      justify-content: center;
    }

    .section-header .section-label::before { display: none; }
    .section-header .section-label::after {
      content: '';
      width: 30px; height: 2px;
      background: var(--gradient-red);
      border-radius: 2px;
    }

    .section-header .section-subtitle {
      margin: 0 auto;
    }

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

    .program-card {
      background: var(--white);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      position: relative;
    }

    .program-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--shadow-xl);
    }

    .program-card-image {
      height: 200px;
      background: var(--gradient-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 60px;
      position: relative;
      overflow: hidden;
    }

    .program-card-image::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 60px;
      background: linear-gradient(to top, var(--white), transparent);
    }

    .program-card-body {
      padding: 28px;
    }

    .program-tag {
      display: inline-block;
      background: rgba(228, 27, 23, 0.1);
      color: var(--red);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 50px;
      margin-bottom: 12px;
      font-family: var(--font-accent);
    }

    .program-card-body h3 {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 12px;
    }

    .program-card-body p {
      font-family: var(--font-main);
      font-size: 15px;
      color: #4b5563;
      line-height: 1.8;
      margin-bottom: 20px;
    }

    .program-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0 0;
      border-top: 1px solid var(--light-gray);
    }

    .program-detail {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13.5px;
      color: #64748b;
      font-family: var(--font-main);
      font-weight: 600;
    }

    .program-detail i { color: var(--red); }

    .program-link {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--navy);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: var(--transition);
    }

    .program-link:hover {
      background: var(--red);
      transform: rotate(45deg) scale(1.1);
    }

    /* ============================================
       WHY CHOOSE US
    ============================================ */
    .why-us {
      padding: 100px 0;
      background: var(--white);
    }

    .why-us-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .why-us-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .why-feature-card {
      background: var(--off-white);
      border-radius: 20px;
      padding: 28px 24px;
      transition: var(--transition);
      border: 2px solid transparent;
      cursor: pointer;
    }

    .why-feature-card:hover,
    .why-feature-card.active {
      background: var(--white);
      border-color: var(--navy);
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
    }

    .why-feature-icon {
      width: 52px; height: 52px;
      border-radius: 14px;
      background: var(--gradient-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: var(--white);
      margin-bottom: 16px;
    }

    .why-feature-card:nth-child(2) .why-feature-icon { background: var(--gradient-red); }
    .why-feature-card:nth-child(3) .why-feature-icon { background: linear-gradient(135deg, #C9A84C, #f0c96e); }
    .why-feature-card:nth-child(4) .why-feature-icon { background: linear-gradient(135deg, #22c55e, #16a34a); }

    .why-feature-card h3 {
      font-family: var(--font-heading);
      font-size: 16.5px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 8px;
    }

    .why-feature-card p {
      font-family: var(--font-main);
      font-size: 14.5px;
      color: #4b5563;
      line-height: 1.7;
    }

    /* ============================================
       GALLERY SECTION
    ============================================ */
    .gallery {
      padding: 100px 0;
      background: var(--off-white);
    }

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

    .gallery-item {
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      aspect-ratio: 1;
      background: var(--light-gray);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

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

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

    .gallery-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(11, 17, 74, 0.8), transparent);
      opacity: 0;
      transition: var(--transition);
      display: flex;
      align-items: flex-end;
      padding: 24px;
    }

    .gallery-item:hover .gallery-overlay { opacity: 1; }

    .gallery-overlay span {
      color: var(--white);
      font-family: var(--font-main);
      font-size: 14.5px;
      font-weight: 600;
    }

    .gallery-placeholder {
      font-size: 40px;
      color: var(--light-gray);
      filter: grayscale(1) opacity(0.4);
    }

    /* ============================================
       TESTIMONIALS
    ============================================ */
    .testimonials {
      padding: 100px 0;
      background: var(--gradient-primary);
      position: relative;
      overflow: hidden;
    }

    .testimonials::before {
      content: '"';
      position: absolute;
      top: -40px; left: 5%;
      font-size: 300px;
      font-family: 'Playfair Display', serif;
      color: rgba(255,255,255,0.03);
      line-height: 1;
      user-select: none;
    }

    .testimonials .section-title { color: var(--white); }
    .testimonials .section-subtitle { color: rgba(255,255,255,0.65); }

    .testimonials-slider {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 50px;
    }

    .testimonial-card {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(20px);
      border-radius: 24px;
      padding: 36px 32px;
      transition: var(--transition);
    }

    .testimonial-card:hover {
      background: rgba(255,255,255,0.12);
      transform: translateY(-8px);
    }

    .testimonial-stars {
      color: var(--gold-light);
      font-size: 14px;
      margin-bottom: 20px;
      letter-spacing: 2px;
    }

    .testimonial-text {
      color: rgba(255,255,255,0.92);
      font-family: var(--font-main);
      font-size: 15.5px;
      line-height: 1.85;
      margin-bottom: 28px;
      font-style: italic;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .testimonial-avatar {
      width: 54px; height: 54px;
      border-radius: 50%;
      border: 2px solid var(--gold);
      object-fit: cover;
      background: var(--navy-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: var(--gold-light);
      flex-shrink: 0;
    }

    .testimonial-author-info h4 {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 700;
      color: var(--white);
    }

    .testimonial-author-info p {
      font-family: var(--font-main);
      font-size: 13.5px;
      color: rgba(255,255,255,0.65);
      margin-top: 2px;
    }

    /* ============================================
       ADMISSION CTA SECTION
    ============================================ */
    .admission-cta {
      padding: 80px 0;
      background: var(--white);
      position: relative;
      overflow: hidden;
    }

    .cta-card {
      background: var(--gradient-primary);
      border-radius: 32px;
      padding: 70px 60px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 40px;
      position: relative;
      overflow: hidden;
    }

    .cta-card::before {
      content: '';
      position: absolute;
      top: -50%; right: -10%;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: rgba(228, 27, 23, 0.2);
    }

    .cta-card::after {
      content: '';
      position: absolute;
      bottom: -30%; left: 30%;
      width: 200px; height: 200px;
      border-radius: 50%;
      background: rgba(201, 168, 76, 0.15);
    }

    .cta-label {
      font-family: var(--font-accent);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 16px;
    }

    .cta-title {
      font-family: var(--font-serif);
      font-size: clamp(2rem, 3.4vw, 3rem);
      font-weight: 800;
      color: var(--white);
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .cta-desc {
      color: rgba(255,255,255,0.85);
      font-family: var(--font-main);
      font-size: 16px;
      line-height: 1.85;
    }

    .cta-actions {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-end;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    .cta-phone {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--white);
      font-family: var(--font-main);
      font-size: 15.5px;
      font-weight: 600;
    }

    .cta-phone i {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    /* ============================================
       CONTACT SECTION
    ============================================ */
    .contact {
      padding: 100px 0;
      background: var(--off-white);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 60px;
      align-items: start;
    }

    .contact-info h3 {
      font-family: var(--font-serif);
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 20px;
    }

    .contact-info p {
      font-family: var(--font-main);
      color: #4b5563;
      font-size: 15.5px;
      line-height: 1.85;
      margin-bottom: 32px;
    }

    .contact-detail {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 24px;
    }

    .contact-icon {
      width: 48px; height: 48px;
      border-radius: 12px;
      background: var(--gradient-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 20px;
      flex-shrink: 0;
    }

    .contact-detail-text h4 {
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 4px;
    }

    .contact-detail-text p,
    .contact-detail-text a {
      font-family: var(--font-main);
      font-size: 14.5px;
      color: #4b5563;
    }

    .contact-detail-text a:hover { color: var(--red); }

    .contact-form-card {
      background: var(--white);
      border-radius: 24px;
      padding: 44px 40px;
      box-shadow: var(--shadow-md);
    }

    .contact-form-card h3 {
      font-family: var(--font-serif);
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 28px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 8px;
      font-family: var(--font-accent);
    }

    .form-control {
      width: 100%;
      padding: 13px 18px;
      border: 2px solid var(--light-gray);
      border-radius: 12px;
      font-size: 15px;
      font-family: var(--font-main);
      color: var(--dark);
      background: var(--off-white);
      transition: var(--transition);
      outline: none;
    }

    .form-control:focus {
      border-color: var(--navy);
      background: var(--white);
      box-shadow: 0 0 0 4px rgba(11, 17, 74, 0.06);
    }

    textarea.form-control {
      resize: vertical;
      min-height: 120px;
    }

    /* ============================================
       FOOTER
    ============================================ */
    .footer {
      background: var(--navy-dark);
      padding: 80px 0 0;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
      gap: 50px;
      padding-bottom: 60px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
    }

    .footer-brand h3 {
      font-family: var(--font-serif);
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 12px;
    }

    .footer-brand p {
      font-family: var(--font-main);
      font-size: 14.5px;
      color: rgba(255,255,255,0.65);
      line-height: 1.85;
      margin-bottom: 24px;
    }

    .footer-socials {
      display: flex;
      gap: 10px;
    }

    .footer-social-link {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      transition: var(--transition);
    }

    .footer-social-link:hover {
      background: var(--red);
      color: var(--white);
      transform: translateY(-3px);
    }

    .footer-col h4 {
      font-family: var(--font-accent);
      font-size: 14px;
      font-weight: 800;
      color: var(--white);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--red);
      display: inline-block;
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .footer-links a {
      color: rgba(255,255,255,0.65);
      font-family: var(--font-main);
      font-size: 14.5px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: var(--transition);
    }

    .footer-links a::before {
      content: '›';
      color: var(--red);
      font-size: 17px;
      transition: transform 0.3s ease;
    }

    .footer-links a:hover {
      color: var(--white);
      padding-left: 5px;
    }

    .footer-contact-item {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
      align-items: flex-start;
    }

    .footer-contact-item i {
      color: var(--gold);
      font-size: 15px;
      margin-top: 3px;
      flex-shrink: 0;
    }

    .footer-contact-item span {
      color: rgba(255,255,255,0.65);
      font-family: var(--font-main);
      font-size: 14.5px;
      line-height: 1.7;
    }

    .footer-bottom {
      padding: 24px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    .footer-bottom p {
      font-family: var(--font-main);
      font-size: 13.5px;
      color: rgba(255,255,255,0.5);
    }

    .footer-bottom a { color: var(--gold-light); }

    .footer-bottom-links {
      display: flex;
      gap: 24px;
    }

    .footer-bottom-links a {
      font-family: var(--font-main);
      font-size: 13.5px;
      color: rgba(255,255,255,0.5);
      transition: color 0.3s;
    }

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

    /* ============================================
       BACK TO TOP
    ============================================ */
    .back-to-top {
      position: fixed;
      bottom: 30px; right: 30px;
      width: 48px; height: 48px;
      border-radius: 14px;
      background: var(--gradient-primary);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      box-shadow: var(--shadow-md);
      cursor: pointer;
      transition: var(--transition);
      opacity: 0;
      pointer-events: none;
      z-index: 999;
      border: none;
    }

    .back-to-top.visible {
      opacity: 1;
      pointer-events: all;
    }

    .back-to-top:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }

    /* ============================================
       MOBILE NAV OVERLAY
    ============================================ */
    .mobile-nav {
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: var(--navy-dark);
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      overflow-y: auto;
      padding: 0;
    }

    .mobile-nav.open { transform: translateX(0); }

    .mobile-nav-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .mobile-nav-close {
      width: 42px; height: 42px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
      border: none;
      transition: var(--transition);
    }

    .mobile-nav-close:hover { background: var(--red); }

    .mobile-nav-links {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .mobile-nav-link {
      color: rgba(255,255,255,0.85) !important;
      font-family: 'Montserrat', sans-serif;
      font-size: 15px;
      font-weight: 500;
      padding: 12px 18px;
      border-radius: 12px;
      transition: var(--transition);
      display: block;
      text-decoration: none;
    }

    .mobile-nav-link:hover {
      background: rgba(255,255,255,0.08);
      color: var(--white) !important;
    }

    .mobile-nav-dropdown {
      position: relative;
      border-radius: 12px;
      transition: background 0.3s ease;
    }

    .mobile-nav-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 12px;
      transition: background 0.3s ease;
    }

    .mobile-nav-header-row .mobile-nav-link {
      flex: 1;
      padding: 12px 18px;
    }

    .mobile-toggle-btn {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold-light, #f0c96e);
      cursor: pointer;
      font-size: 12px;
      transition: transform 0.3s ease;
      margin-right: 6px;
      border-radius: 8px;
    }

    .mobile-toggle-btn:hover {
      background: rgba(255,255,255,0.1);
    }

    /* Submenu default state: hidden */
    .mobile-sub-menu {
      display: none;
      flex-direction: column;
      gap: 4px;
      padding: 6px 14px 10px 22px;
      margin: 2px 8px 8px 8px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 12px;
      border-left: 2.5px solid var(--gold-light, #f0c96e);
    }

    .mobile-sub-menu a {
      color: rgba(255,255,255,0.75) !important;
      font-family: 'Montserrat', sans-serif;
      font-size: 13.5px;
      font-weight: 500;
      padding: 9px 12px;
      border-radius: 8px;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.25s ease;
    }

    .mobile-sub-menu a i {
      color: var(--gold-light, #f0c96e);
      font-size: 10px;
    }

    .mobile-sub-menu a:hover {
      color: #ffffff !important;
      background: rgba(255,255,255,0.08);
      padding-left: 18px;
    }

    /* MOUSE OVER / HOVER effect to open submenus */
    .mobile-nav-dropdown:hover .mobile-sub-menu,
    .mobile-nav-dropdown.is-open .mobile-sub-menu {
      display: flex;
    }

    .mobile-nav-dropdown:hover .mobile-toggle-btn i,
    .mobile-nav-dropdown.is-open .mobile-toggle-btn i {
      transform: rotate(180deg);
      color: #ffffff;
    }

    .mobile-nav-dropdown:hover .mobile-nav-header-row,
    .mobile-nav-dropdown.is-open .mobile-nav-header-row {
      background: rgba(255,255,255,0.06);
    }


    /* ============================================
       ANIMATIONS
    ============================================ */
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ============================================
       COMPREHENSIVE RESPONSIVE ARCHITECTURE
    ============================================ */
    /* Universal Mobile Scroll & Overflow Lock */
    html, body {
      max-width: 100% !important;
      overflow-x: hidden !important;
      position: relative;
    }

    img, video, iframe {
      max-width: 100%;
    }

    .table-responsive, table {
      max-width: 100%;
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 1340px) {
      .nav-inner { padding: 0 20px; gap: 10px; }
      .nav-menu > li > a { padding: 7px 8px; font-size: 13px; }
      .nav-cta { gap: 6px; }
      .nav-cta .btn { padding: 8px 12px; font-size: 12px; }
      .logo-glass { width: 62px; height: 62px; }
      .nav-logo-text h1 { font-size: 18px; }
      .nav-logo-text p { font-size: 10px; }
    }

    @media (max-width: 1180px) {
      .top-bar-inner { padding: 0 20px; }
      .top-bar-left a:not([href^="tel:"]) { display: none; }
      .top-bar-left a[href^="tel:"] { font-size: 12px; color: var(--gold-light); }
      .nav-menu, .nav-cta { display: none !important; }
      .hamburger { display: flex !important; }
      .nav-inner { height: 74px; padding: 0 20px; }
      .logo-glass { width: 56px; height: 56px; }
      .nav-logo-text h1 { font-size: 17px; }
      .nav-logo-text p { font-size: 9.5px; }
    }

    @media (max-width: 991px) {
      /* Sections Padding */
      .about, .programs, .why-us, .gallery, .testimonials, .contact { padding: 60px 0; }
      .stats { padding: 50px 0; }
      .admission-cta { padding: 50px 0; }
      
      /* Main Grids Stacking */
      .about-grid, .why-us-grid, .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
      .programs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
      .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 35px !important; }
      .testimonials-slider { grid-template-columns: 1fr !important; gap: 20px !important; }
      .hero-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
      .hero-right { display: none !important; }

      /* Inner Pages Grid Overrides */
      .about-page-wrap section > .container > div[style*="grid-template-columns"],
      .kidzee-page-wrap section > .container > div[style*="grid-template-columns"],
      .admissions-page-wrap section > .container > div[style*="grid-template-columns"],
      .single-post-wrap section > .container > div[style*="grid-template-columns"],
      .contact-page-wrap section > .container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }

      .about-page-wrap div[style*="grid-template-columns:1fr 1fr"],
      .about-page-wrap div[style*="grid-template-columns: 1fr 1fr"],
      .kidzee-page-wrap div[style*="grid-template-columns:repeat(2, 1fr)"],
      .admissions-page-wrap ul[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }

      .about-page-wrap img[style*="height:480px"],
      .about-page-wrap img[style*="height: 480px"] {
        height: 260px !important;
      }
    }

    @media (max-width: 768px) {
      /* Header & Navigation */
      .navbar {
        position: sticky;
      }
      .nav-inner {
        height: 66px;
        padding: 0 16px;
      }
      .nav-logo {
        gap: 10px;
      }
      .logo-glass {
        width: 48px;
        height: 48px;
        padding: 2px;
      }
      .logo-glass::after {
        inset: -4px;
      }
      .nav-logo-text h1 {
        font-size: 15px;
        white-space: nowrap;
      }
      .nav-logo-text p {
        font-size: 9px;
        letter-spacing: 0.8px;
        white-space: nowrap;
      }
      .hamburger {
        padding: 8px 4px;
      }
      .hamburger span {
        width: 22px;
      }

      /* Top Bar */
      .top-bar {
        padding: 6px 0;
      }
      .top-bar-inner {
        padding: 0 16px;
        justify-content: space-between;
      }
      .top-bar-left {
        display: flex;
      }
      .top-bar-left a:not([href^="tel:"]) {
        display: none !important;
      }
      .top-bar-left a[href^="tel:"] {
        font-size: 11.5px;
        color: var(--gold-light);
        font-weight: 600;
        gap: 5px;
      }
      .top-bar-right {
        gap: 8px;
      }
      .top-bar-right a {
        width: 24px;
        height: 24px;
        font-size: 10.5px;
      }

      /* Page Banner Headers */
      .page-header-banner {
        padding: 100px 0 36px !important;
      }
      .page-header-banner h1 {
        font-size: 1.85rem !important;
      }

      /* Sections General */
      .about, .programs, .why-us, .gallery, .testimonials, .contact {
        padding: 44px 0 !important;
      }
      .stats {
        padding: 36px 0 !important;
      }
      .admission-cta {
        padding: 34px 0 !important;
      }
      .container {
        padding: 0 16px;
      }
      .section-header {
        margin-bottom: 28px;
      }
      .section-title {
        font-size: 1.7rem;
        line-height: 1.25;
        margin-bottom: 12px;
      }
      .section-subtitle {
        font-size: 0.92rem;
        line-height: 1.6;
      }

      /* Notice Ticker */
      .ticker-bar {
        height: 40px;
      }
      .ticker-label {
        padding: 0 14px 0 10px;
        font-size: 11px;
        letter-spacing: 1px;
      }
      .ticker-item {
        font-size: 13px;
        padding-right: 36px;
      }

      /* About Section */
      .about-grid {
        gap: 28px !important;
      }
      .about-main-img {
        height: 240px;
        border-radius: 16px;
      }
      .about-badge-card {
        position: static;
        display: inline-flex;
        margin-top: 14px;
        padding: 10px 18px;
        border-radius: 12px;
      }
      .about-badge-card .num {
        font-size: 1.8rem;
      }
      .about-badge-card .label {
        font-size: 11px;
      }
      .about-corner-shape {
        display: none;
      }
      .about-features {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .about-feature {
        padding: 10px 12px;
      }

      /* Programs Section */
      .programs-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      .program-card {
        border-radius: 18px;
      }
      .program-card-image {
        height: 160px;
      }
      .program-card-body {
        padding: 20px 16px;
      }
      .program-card-body h3 {
        font-size: 1.25rem;
      }

      /* Stats Section */
      .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
      }
      .stat-item {
        padding: 20px 10px;
      }
      .stat-item::after {
        display: none;
      }
      .stat-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
        margin-bottom: 10px;
      }
      .stat-num {
        font-size: 2rem;
      }
      .stat-label {
        font-size: 11px;
        letter-spacing: 0.8px;
      }

      /* Why Us Section */
      .why-us-grid {
        gap: 28px !important;
      }
      .why-us-features {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }
      .why-feature-card {
        padding: 18px 16px;
        border-radius: 16px;
      }

      /* Gallery Section */
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
      }
      .gallery-item:nth-child(1) {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        aspect-ratio: 1 !important;
      }
      .gallery-item {
        border-radius: 12px;
      }
      .gallery-overlay {
        padding: 12px;
      }

      /* Testimonials */
      .testimonials-slider {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 20px;
      }
      .testimonial-card {
        padding: 22px 18px;
        border-radius: 16px;
      }
      .testimonials::before {
        display: none;
      }

      /* CTA Admission */
      .cta-card {
        grid-template-columns: 1fr !important;
        text-align: center;
        padding: 30px 18px;
        border-radius: 20px;
        gap: 20px;
      }
      .cta-title {
        font-size: 1.5rem;
      }
      .cta-desc {
        font-size: 14px;
      }
      .cta-actions {
        width: 100%;
        align-items: stretch;
      }
      .cta-actions .btn {
        width: 100%;
        justify-content: center;
      }
      .cta-phone {
        justify-content: center;
      }

      /* Contact Section */
      .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
      }
      .form-row {
        grid-template-columns: 1fr !important;
      }
      .contact-form-card {
        padding: 24px 18px !important;
        border-radius: 20px !important;
      }

      /* Disclosure Page iFrames & Cards */
      .disclosure-page-wrap iframe {
        height: 340px !important;
      }
      .disclosure-page-wrap div[style*="grid-template-columns:repeat(auto-fit, minmax(320px, 1fr))"] {
        grid-template-columns: 1fr !important;
      }
      .disclosure-page-wrap div[style*="grid-template-columns:repeat(auto-fit, minmax(360px, 1fr))"] {
        grid-template-columns: 1fr !important;
      }

      /* Footer */
      .footer {
        padding: 46px 0 16px;
      }
      .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
      }
      .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 18px 0;
      }
      .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
      }

      /* Back To Top */
      .back-to-top {
        bottom: 18px;
        right: 18px;
        width: 44px;
        height: 44px;
        font-size: 16px;
      }
    }

    @media (max-width: 480px) {
      /* Mobile Phones */
      .nav-inner {
        height: 60px;
        padding: 0 12px;
      }
      .logo-glass {
        width: 42px;
        height: 42px;
      }
      .nav-logo-text h1 {
        font-size: 13.8px;
      }
      .nav-logo-text p {
        font-size: 8px;
        letter-spacing: 0.6px;
      }
      .section-title {
        font-size: 1.45rem;
      }
      .btn {
        padding: 11px 20px;
        font-size: 13.5px;
      }
      .stats-grid {
        gap: 6px !important;
      }
      .stat-item {
        padding: 16px 8px;
      }
      .stat-num {
        font-size: 1.7rem;
      }
      .contact-card-box {
        padding: 20px 16px !important;
      }
    }

    @media (max-width: 360px) {
      /* Smallest Phone Screens */
      .nav-inner {
        height: 56px;
        padding: 0 8px;
      }
      .logo-glass {
        width: 36px;
        height: 36px;
      }
      .nav-logo-text h1 {
        font-size: 12px;
      }
      .nav-logo-text p {
        font-size: 7px;
        letter-spacing: 0.3px;
      }
      .hamburger {
        padding: 6px 2px;
      }
      .hamburger span {
        width: 20px;
      }
    }


/* ============================================
   HERO SLIDER (BELOW MENU STRIP)
============================================ */
.hero-slider-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--navy-dark);
  padding-top: 0;
}

@media (max-width: 1100px) {
  .hero-slider-section {
    padding-top: 0;
  }
}

.hero-slider-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* When Smart Slider 3 is active */
.hero-slider-wrap .n2-section-smartslider,
.hero-slider-wrap .n2-ss-slider {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Built-in Responsive Banner Slider */
.ddm-banner-slider {
  position: relative;
  width: 100%;
  height: clamp(230px, 48vw, 700px);
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
}

@media (min-width: 1200px) {
  .ddm-banner-slider {
    height: 700px;
  }
}

@media (min-width: 1600px) {
  .ddm-banner-slider {
    height: 750px;
  }
}

.ddm-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s cubic-bezier(0.25, 1, 0.5, 1), visibility 1.1s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: #0B114A;
  will-change: opacity, visibility;
}

.ddm-slide.active {
  opacity: 1;
  visibility: visible;
}

/* Enhanced High-Contrast Ken Burns Image Layer */
.ddm-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  filter: contrast(1.12) brightness(0.96) saturate(1.12);
  transform: scale(1);
  transform-origin: center top;
  transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.ddm-slide.active .ddm-slide-bg {
  transform: scale(1.05);
}

/* Refined Gradient Overlay */
.ddm-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 17, 74, 0.84) 0%, rgba(11, 17, 74, 0.52) 42%, rgba(11, 17, 74, 0.16) 72%, rgba(0, 0, 0, 0.06) 100%),
              linear-gradient(0deg, rgba(11, 17, 74, 0.40) 0%, transparent 35%);
  pointer-events: none;
}

.ddm-slide-content {
  position: relative;
  z-index: 2;
  max-width: 660px;
  padding: 0 24px;
  color: #fff;
}

.ddm-slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201, 168, 76, 0.22);
  border: 1px solid rgba(201, 168, 76, 0.55);
  color: var(--gold-light);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-family: var(--font-accent);
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}

.ddm-slide-title {
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.18;
  margin-bottom: 14px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.ddm-slide-title span {
  color: var(--gold-light);
}

.ddm-slide-desc {
  font-family: var(--font-main);
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.7;
  margin-bottom: 24px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  max-width: 560px;
}

/* Slider Nav Arrows */
.ddm-slider-btn-prev,
.ddm-slider-btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(11, 17, 74, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.ddm-slider-btn-prev:hover,
.ddm-slider-btn-next:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 8px 25px rgba(228, 27, 23, 0.45);
}

.ddm-slider-btn-prev { left: 24px; }
.ddm-slider-btn-next { right: 24px; }

/* Modern Orca-Style Progress & Counter Controls */
.ddm-slider-controls-wrap {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10;
  background: rgba(11, 17, 74, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 18px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.ddm-slider-progress-track {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-progress-bar {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

.slider-progress-bar:hover {
  background: rgba(255, 255, 255, 0.45);
}

.slider-progress-bar.active {
  width: 56px;
  background: rgba(255, 255, 255, 0.25);
}

.slider-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold-light);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(240, 201, 110, 0.7);
}

.slider-progress-bar.active .slider-progress-fill {
  animation: progressFill 3.2s linear forwards;
}

.slider-progress-bar.completed .slider-progress-fill {
  width: 100%;
  background: rgba(240, 201, 110, 0.6);
}

@keyframes progressFill {
  from { width: 0%; }
  to { width: 100%; }
}

.slider-counter-display {
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.slider-counter-display #sliderCurrentIndex {
  color: var(--gold-light);
  font-weight: 800;
}

@media (max-width: 768px) {
  .ddm-slider-btn-prev,
  .ddm-slider-btn-next {
    display: none; /* Mobile touch swipe enabled */
  }
  .ddm-slider-controls-wrap {
    bottom: 12px;
    padding: 5px 12px;
    gap: 8px;
    max-width: 90%;
  }
  .slider-progress-bar {
    width: 18px;
    height: 3px;
  }
  .slider-progress-bar.active {
    width: 30px;
  }
  .slider-counter-display {
    font-size: 11px;
    padding-left: 4px;
  }
}

@media (max-width: 480px) {
  .ddm-slider-controls-wrap {
    bottom: 10px;
    padding: 4px 10px;
    gap: 6px;
    max-width: 92%;
  }
  .slider-progress-bar {
    width: 14px;
    height: 3px;
  }
  .slider-progress-bar.active {
    width: 22px;
  }
  .slider-counter-display {
    font-size: 10px;
    padding-left: 3px;
  }
}

/* ============================================
   INNER PAGE STYLING & BREADCRUMBS
============================================ */
.page-header-banner {
  background: var(--gradient-primary);
  padding: 130px 0 50px;
  color: #fff;
  position: relative;
  border-bottom: 3px solid var(--red);
}

.page-header-banner h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
}

.page-header-banner .breadcrumbs {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Montserrat', sans-serif;
}

.page-header-banner .breadcrumbs a {
  color: var(--gold-light);
}

.site-section {
  padding: 60px 0 80px;
}

.main-page-article {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 40px;
  line-height: 1.8;
}

.main-page-article h2, .main-page-article h3 {
  font-family: 'Playfair Display', serif;
  color: var(--navy);
  margin-top: 24px;
  margin-bottom: 12px;
}

/* WordPress Navigation Submenu support */
.nav-menu li {
  position: relative;
}

.nav-dropdown-arrow {
  font-size: 9px;
  margin-left: 5px;
  color: var(--gold-light, #f0c96e);
  opacity: 0.9;
  transition: transform 0.3s ease;
  display: inline-block;
  vertical-align: middle;
}

.nav-menu li.menu-item-has-children:hover > a .nav-dropdown-arrow {
  transform: rotate(180deg);
  color: var(--gold-light, #f0c96e);
}


.nav-menu ul.sub-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 230px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11,17,74,0.15);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease;
  border-top: 3px solid var(--red);
  list-style: none;
  z-index: 1001;
}

.nav-menu li:hover > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


.nav-menu ul.sub-menu li {
  list-style: none;
}

.nav-menu ul.sub-menu a {
  display: block;
  padding: 10px 18px;
  color: var(--dark) !important;
  font-family: var(--font-main);
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 8px;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.nav-menu ul.sub-menu a::after {
  display: none !important;
}

.nav-menu ul.sub-menu a:hover {
  background: var(--light-gray);
  color: var(--navy) !important;
  padding-left: 22px;
}

/* ============================================
   i News Ticker Plugin Integration (By Amit Choubey)
============================================ */
.ddm-ticker-wrapper {
  position: relative;
  z-index: 50;
  width: 100%;
}

.ddm-ticker-wrapper .i-ticker-wrap {
  height: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 2px solid rgba(201, 168, 76, 0.35);
  box-shadow: 0 4px 18px rgba(11, 17, 74, 0.2);
}

.ddm-ticker-wrapper .i-ticker-label {
  font-family: var(--font-accent);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 24px 0 20px;
  position: relative;
  z-index: 10;
  box-shadow: 6px 0 16px rgba(0, 0, 0, 0.25);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.ddm-ticker-wrapper .i-ticker-content {
  mask-image: linear-gradient(to right, transparent 0px, black 25px, black calc(100% - 30px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0px, black 25px, black calc(100% - 30px), transparent 100%);
}

.ddm-ticker-wrapper .i-ticker-item {
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 500;
  padding-right: 50px;
}

.ddm-ticker-wrapper .i-ticker-item a {
  transition: color 0.25s ease;
}

.ddm-ticker-wrapper .i-ticker-item a:hover {
  text-decoration: none;
}

.ddm-ticker-wrapper .i-badge-new {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 4px;
}

/* ============================================
   PREMIUM CONTACT US PAGE STYLES
   ============================================ */
.contact-card-box {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-card-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(11, 17, 74, 0.12) !important;
}

@media (max-width: 991px) {
  .contact-page-wrap section > .container > div[style*="grid-template-columns: 1.35fr 1fr"],
  .contact-page-wrap section > .container > div[style*="grid-template-columns:1.35fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   CAMPUS INFRASTRUCTURE & FACILITIES STYLES
   ============================================ */
.facilities-page-wrap .facility-section {
  padding: 80px 0;
  border-bottom: 1px solid #E2E8F0;
  scroll-margin-top: 155px;
}

.facilities-page-wrap .facility-section:nth-of-type(even) {
  background: #F8FAFC;
}

.facilities-page-wrap .facility-section:nth-of-type(odd) {
  background: #FFFFFF;
}

.facility-subnav-sticky {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #E2E8F0;
  position: sticky;
  top: 86px;
  z-index: 95;
  box-shadow: 0 4px 18px rgba(11, 17, 74, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.facility-subnav-inner {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 14px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.facility-subnav-inner::-webkit-scrollbar {
  display: none;
}

.facility-subnav-link {
  padding: 10px 22px;
  border-radius: 50px;
  background: #F1F5F9;
  color: #0B114A;
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  border: 1.5px solid transparent;
}

.facility-subnav-link i {
  color: #E41B17;
  font-size: 12px;
  transition: transform 0.25s ease;
}

.facility-subnav-link:hover {
  background: #E2E8F0;
  color: #0B114A;
  transform: translateY(-1px);
}

.facility-subnav-link.active {
  background: #0B114A !important;
  color: #ffffff !important;
  border-color: #f0c96e !important;
  box-shadow: 0 4px 14px rgba(11, 17, 74, 0.25);
}

.facility-subnav-link.active i {
  color: #f0c96e !important;
}

.facility-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 55px;
  align-items: center;
}

.facility-grid.reverse {
  grid-template-columns: 0.85fr 1.15fr;
}

.facility-content {
  display: flex;
  flex-direction: column;
}

.facility-badge {
  font-family: var(--font-accent);
  font-size: 13px;
  font-weight: 800;
  color: #E41B17;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.facility-badge::before {
  content: '';
  width: 24px;
  height: 2px;
  background: #E41B17;
  border-radius: 2px;
}

.facility-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 700;
  color: #0B114A;
  line-height: 1.25;
  margin-bottom: 18px;
}

.facility-desc {
  font-family: var(--font-main);
  font-size: 15.5px;
  color: #4A5568;
  line-height: 1.85;
  margin-bottom: 24px;
  text-align: left;
}

.facility-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.facility-feature-item {
  font-family: var(--font-main);
  font-size: 15px;
  color: #1E293B;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(241, 245, 249, 0.65);
  padding: 12px 18px;
  border-radius: 10px;
  border-left: 3.5px solid #10B981;
  transition: all 0.2s ease;
}

.facility-feature-item:hover {
  background: #F1F5F9;
  transform: translateX(4px);
}

.facility-feature-item i {
  color: #10B981;
  font-size: 16px;
  flex-shrink: 0;
}

.facility-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(11, 17, 74, 0.12);
  border: 2.5px solid #E2E8F0;
  background: #0B114A;
}

.facility-media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.facility-media:hover img {
  transform: scale(1.04);
}

.facility-media-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(6, 12, 52, 0.92) 0%, rgba(6, 12, 52, 0.45) 70%, transparent 100%);
  padding: 24px 20px 16px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.facility-media-caption i {
  color: #f0c96e;
  font-size: 15px;
}

/* RESPONSIVE MOBILE BREAKPOINT FOR FACILITIES */
@media (max-width: 991px) {
  .facility-subnav-sticky {
    top: 76px !important;
  }
  .facilities-page-wrap .facility-section {
    padding: 42px 0 !important;
    scroll-margin-top: 130px !important;
  }
  .facility-grid,
  .facility-grid.reverse {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .facility-grid.reverse .facility-content {
    order: 1 !important;
  }
  .facility-grid.reverse .facility-media {
    order: 2 !important;
  }
  .facility-media img {
    height: 230px !important;
  }
  .facility-title {
    font-size: 1.65rem !important;
    margin-bottom: 12px !important;
  }
  .facility-desc {
    font-size: 14px !important;
    line-height: 1.75 !important;
    margin-bottom: 18px !important;
  }
  .facility-feature-item {
    font-size: 13px !important;
    padding: 9px 12px !important;
  }
}

/* GENERAL RESPONSIVE FIXES FOR ABOUT, ADMISSIONS, KIDZEE & SINGLE */
@media (max-width: 991px) {
  .about-page-wrap section > .container > div[style*="grid-template-columns:1.1fr 0.9fr"],
  .about-page-wrap section > .container > div[style*="grid-template-columns: 1.1fr 0.9fr"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .about-page-wrap div[style*="grid-template-columns:1fr 1fr"],
  .about-page-wrap div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .kidzee-page-wrap section > .container > div[style*="grid-template-columns:1.1fr 0.9fr"],
  .kidzee-page-wrap section > .container > div[style*="grid-template-columns: 1.1fr 0.9fr"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .admissions-page-wrap section > .container > div[style*="grid-template-columns:1.2fr 0.8fr"],
  .admissions-page-wrap section > .container > div[style*="grid-template-columns: 1.2fr 0.8fr"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .single-post-wrap section > .container > div[style*="grid-template-columns:1.8fr 1fr"],
  .single-post-wrap section > .container > div[style*="grid-template-columns: 1.8fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 35px !important;
  }
  .kidzee-page-wrap div[style*="grid-template-columns:repeat(2, 1fr)"],
  .kidzee-page-wrap div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .admissions-page-wrap ul[style*="grid-template-columns:1fr 1fr"],
  .admissions-page-wrap ul[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .about-page-wrap img[style*="height:480px"],
  .about-page-wrap img[style*="height: 480px"] {
    height: 250px !important;
  }
  .entry-content,
  .about-page-wrap p,
  .kidzee-page-wrap p,
  .facilities-page-wrap p {
    text-align: left !important;
  }
}