  
    :root {
      --navy: #0b1e3c;
      --navy2: #102b50;
      --gold: #c9a45c;
            /* --gold: #ff751f; */
      --cream: #f7f8fa;
      --text: #18253a;
      --muted: #6b7789;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body {
      font-family: 'DM Sans', sans-serif;
      color: var(--text);
      overflow-x: hidden;
    }
    h1,h2,h3,h4,h5,.navbar-brand {
      font-family: 'Manrope', sans-serif;
    }
    a { text-decoration: none; }
    .section-pad { padding: 100px 0; }
    .section-tag {
      color: #a77e35;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      display: inline-block;
      margin-bottom: 15px;
    }
    .section-title {
      color: var(--navy);
      font-weight: 800;
      letter-spacing: -1.5px;
      line-height: 1.2;
    }
    .text-muted-custom { color: var(--muted); }

    /* Top information bar */
    .topbar {
      background: var(--navy);
      color: #e8edf5;
      font-size: 12px;
      padding: 10px 0;
    }
    .topbar a { color: #e8edf5; }

    
    .btn-gold {
      background: var(--gold);
      color: var(--navy);
      font-weight: 800;
      border: 0;
      border-radius: 6px;
      padding: 13px 23px;
      transition: .3s;
    }
    .btn-gold:hover {
      background: #dfbd7d;
      color: var(--navy);
      transform: translateY(-2px);
    }
    .btn-outline-light-custom {
      color: #fff;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 6px;
      padding: 13px 23px;
      font-weight: 700;
    }
    .btn-outline-light-custom:hover { background: #fff; color: var(--navy); }

    /* Hero carousel */
    .hero-slide {
      min-height: 650px;
      height: min(78vh, 800px);
      position: relative;
      display: flex;
      align-items: center;
      background-size: cover;
      background-position: center;
    }
    .hero-slide::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(5,19,42,.94) 0%, rgba(5,19,42,.76) 48%, rgba(5,19,42,.15) 100%);
    }
    .hero-content {
      position: relative;
      z-index: 1;
      color: white;
      max-width: 750px;
      padding: 70px 0;
    }
    .hero-kicker {
      color: #e5c47f;
      letter-spacing: 3px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      margin-bottom: 25px;
    }
    .hero-content h1 {
      font-size: clamp(40px, 5.4vw, 76px);
      font-weight: 800;
      letter-spacing: -3px;
      line-height: 1.08;
      margin-bottom: 24px;
    }
    .hero-content h1 span { color: #e4c17c; }
    .hero-content p {
      color: #dce3ed;
      font-size: 17px;
      line-height: 1.9;
      max-width: 590px;
      margin-bottom: 32px;
    }
    .carousel-indicators [data-bs-target] {
      width: 30px;
      height: 4px;
      border: 0;
      border-radius: 10px;
    }
    .carousel-control-prev, .carousel-control-next { width: 7%; }

    /* Quick highlights */
    .highlights {
      background: #fff;
      position: relative;
      margin-top: -1px;
      z-index: 3;
      border-bottom: 1px solid #edf0f4;
    }
    .highlight-item {
      padding: 30px 20px;
      border-right: 1px solid #e9edf2;
      height: 100%;
    }
    .highlight-item:last-child { border: 0; }
    .highlight-icon {
      color: #b18b49;
      font-size: 27px;
      margin-bottom: 12px;
    }
    .highlight-item h6 {
      font-size: 14px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 7px;
    }
    .highlight-item p {
      color: var(--muted);
      font-size: 12px;
      margin: 0;
    }

    /* About */
    .about-image-wrap { position: relative; padding: 0 25px 25px 0; }
    .about-image {
      width: 100%;
      height: 510px;
      object-fit: cover;
      border-radius: 12px;
    }
    .about-image-wrap::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 65%;
      height: 65%;
      border: 3px solid var(--gold);
      border-radius: 12px;
      z-index: -1;
    }
    .about-badge {
      position: absolute;
      bottom: 45px;
      left: -15px;
      background: var(--navy);
      color: white;
      padding: 22px 26px;
      border-radius: 10px;
      box-shadow: 0 12px 35px #0b1e3c33;
    }
    .about-badge strong { font-size: 16px; display: block; }
    .about-badge small { color: #d5deea; font-size: 12px; }
    .about-points { list-style: none; padding: 0; margin: 25px 0; }
    .about-points li {
      display: flex;
      gap: 12px;
      margin-bottom: 14px;
      font-size: 14px;
      color: #536176;
    }
    .about-points i { color: #b18b49; font-size: 18px; }

    /* Programs */
    .programs-section { background: var(--cream); }
    .program-card {
      background: #fff;
      border: 1px solid #edf0f4;
      border-radius: 12px;
      overflow: hidden;
      height: 100%;
      transition: .35s;
    }
    .program-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 45px rgba(11,30,60,.10);
    }
    .program-img {
      height: 225px;
      width: 100%;
      object-fit: cover;
    }
    .program-body { padding: 26px; }
    .program-label {
      display: inline-block;
      color: #9a742f;
      background: #fbf5e9;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1px;
      padding: 7px 11px;
      border-radius: 4px;
      margin-bottom: 15px;
    }
    .program-body h4 {
      color: var(--navy);
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 12px;
    }
    .program-body p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.8;
      min-height: 70px;
    }
    .learn-link {
      color: var(--navy);
      font-weight: 800;
      font-size: 13px;
    }
    .learn-link i { color: #b18b49; margin-left: 5px; }

    /* Facilities */
    .facility-card {
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      height: 330px;
      background: #ddd;
    }
    .facility-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s;
    }
    .facility-card:hover img { transform: scale(1.08); }
    .facility-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(5,19,42,.92), transparent 75%);
    }
    .facility-info {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      color: #fff;
      padding: 26px;
    }
    .facility-info h4 { font-weight: 800; font-size: 20px; }
    .facility-info p { font-size: 13px; color: #dce3ed; margin: 0; }

    /* Feature band */
    .feature-band {
      background: var(--navy);
      color: #fff;
      overflow: hidden;
      position: relative;
    }
    .feature-band::before {
      content: "";
      position: absolute;
      width: 450px;
      height: 450px;
      border: 1px solid #ffffff12;
      border-radius: 50%;
      right: -100px;
      top: -180px;
      box-shadow: 0 0 0 55px #ffffff05, 0 0 0 110px #ffffff03;
    }
    .feature-box {
      padding: 25px 0;
      border-bottom: 1px solid #ffffff20;
    }
    .feature-box i { font-size: 28px; color: var(--gold); }
    .feature-box h5 { font-size: 16px; font-weight: 800; margin: 15px 0 10px; }
    .feature-box p { color: #bfcada; font-size: 13px; line-height: 1.8; margin: 0; }

    /* Admissions */
    .admission-box {
      background: #f6f2e9;
      border-radius: 15px;
      padding: 55px;
      position: relative;
      overflow: hidden;
    }
    .admission-box h2 { color: var(--navy); font-weight: 800; }
    .admission-box p { color: #667286; line-height: 1.9; }
    .admission-icon {
      font-size: 180px;
      color: #c9a45c22;
            /* color: #ff751f22; */
      position: absolute;
      right: 40px;
      bottom: -45px;
    }

    /* Gallery */
    .gallery-img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      border-radius: 10px;
      transition: .3s;
    }
    .gallery-img:hover { filter: brightness(.88); }

    /* Contact */
    .contact-section { background: var(--cream); }
    .contact-card {
      background: #fff;
      border-radius: 12px;
      padding: 30px;
      height: 100%;
      border: 1px solid #edf0f4;
    }
    .contact-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      background: #f6f0e3;
      color: #a77e35;
      border-radius: 10px;
      font-size: 21px;
      margin-bottom: 20px;
    }
    .contact-card h5 { color: var(--navy); font-weight: 800; font-size: 16px; }
    .contact-card p, .contact-card a { color: var(--muted); font-size: 13px; line-height: 1.8; }

    /* Footer */
    footer { background: #07162d; color: #c3cddd; }
    .footer-title { color: #fff; font-weight: 800; font-size: 16px; margin-bottom: 22px; }
    .footer-link {
      display: block;
      color: #c3cddd;
      font-size: 13px;
      margin-bottom: 13px;
      transition: .2s;
    }
    .footer-link:hover { color: var(--gold); }
    .footer-bottom {
      border-top: 1px solid #ffffff18;
      padding: 22px 0;
      color: #94a3b8;
      font-size: 12px;
    }

    @media (max-width: 991px) {
      .navbar-collapse {
        padding: 20px 0;
        background: #fff;
      }
      .hero-slide { min-height: 580px; height: auto; }
      .hero-content { padding: 85px 0; }
      .section-pad { padding: 75px 0; }
      .about-image { height: 400px; }
      .admission-box { padding: 35px; }
    }
    @media (max-width: 575px) {
      .topbar { font-size: 10px; }
      .brand-name { font-size: 12px; }
      .brand-mark { width: 42px; height: 42px; }
      .hero-slide { min-height: 590px; }
      .hero-content h1 { letter-spacing: -1.5px; }
      .hero-content p { font-size: 15px; }
      .section-pad { padding: 60px 0; }
      .about-image { height: 330px; }
      .about-badge { left: 0; bottom: 35px; }
      .facility-card { height: 280px; }
      .admission-box { padding: 28px 22px; }
      .admission-icon { right: 0; font-size: 120px; }
      .highlight-item { border-right: 0; border-bottom: 1px solid #e9edf2; }
    }
    