:root {
         --navy: #0d1b3e;
         --navy2: #132255;
         --sapphire: #1a3a8c;
         --blue-mid: #2254c8;
         --accent: #2f6bff;
         --accent-light: #4d84ff;
         --white: #ffffff;
         --off-white: #f4f6fb;
         --text-dark: #0d1b3e;
         --text-mid: #3a4a70;
         --text-light: #7a8aaa;
         --border: #dde3f0;
         --shadow: 0 8px 40px rgba(13, 27, 62, 0.15);
     }

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

     body {
         font-family: 'Barlow', sans-serif;
         color: var(--text-dark);
         background: var(--white);
         overflow-x: hidden;
     }

     /* ── NAVBAR ────────────────────────────────────────── */
     .navbar-custom {
         background: var(--white);
         border-bottom: 1.5px solid var(--border);
         padding: 0.65rem 0;
         position: sticky;
         top: 0;
         z-index: 1000;
     }

     .logo-circle {
         width: 64px;
         height: 64px;
         border: 2.5px solid var(--navy);
         border-radius: 50%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
     }

     .logo-circle .brand-text-top {
         font-family: 'Barlow Condensed', sans-serif;
         font-size: 7.5px;
         font-weight: 900;
         letter-spacing: 2.5px;
         color: var(--navy);
         text-transform: uppercase;
         line-height: 1;
     }

     .logo-circle .diamond-icon {
         font-size: 18px;
         color: var(--sapphire);
         line-height: 1;
     }

     .logo-circle .brand-text-bot {
         font-family: 'Barlow Condensed', sans-serif;
         font-size: 6px;
         font-weight: 700;
         letter-spacing: 1.8px;
         color: var(--navy);
         text-transform: uppercase;
         line-height: 1;
     }

     .brand-main {
         font-family: 'Barlow Condensed', sans-serif;
         font-size: 1.4rem;
         font-weight: 900;
         letter-spacing: 3px;
         color: var(--navy);
         text-transform: uppercase;
         line-height: 1;
     }

     .brand-sub {
         font-family: 'Barlow Condensed', sans-serif;
         font-size: 0.75rem;
         font-weight: 700;
         letter-spacing: 2.5px;
         color: var(--sapphire);
         text-transform: uppercase;
         line-height: 1.2;
     }

     .brand-tagline {
         font-family: 'Barlow Condensed', sans-serif;
         font-size: 0.56rem;
         font-weight: 600;
         letter-spacing: 1.8px;
         color: var(--text-mid);
         text-transform: uppercase;
         line-height: 1.3;
     }

     .btn-book {
         background: var(--navy);
         color: var(--white);
         border: none;
         border-radius: 6px;
         font-family: 'Barlow', sans-serif;
         font-weight: 700;
         font-size: 0.82rem;
         letter-spacing: 0.5px;
         padding: 0.6rem 1.1rem;
         display: flex;
         align-items: center;
         gap: 0.4rem;
         transition: background 0.2s;
         white-space: nowrap;
         cursor: pointer;
     }

     .btn-book:hover {
         background: var(--sapphire);
     }

     .btn-call {
         background: var(--white);
         color: var(--text-dark);
         border: 2px solid var(--border);
         border-radius: 6px;
         font-family: 'Barlow', sans-serif;
         font-weight: 700;
         font-size: 0.82rem;
         padding: 0.6rem 1.1rem;
         display: flex;
         align-items: center;
         gap: 0.4rem;
         transition: border-color 0.2s, color 0.2s;
         white-space: nowrap;
         cursor: pointer;
     }

     .btn-call:hover {
         border-color: var(--sapphire);
         color: var(--sapphire);
     }

     .hamburger-btn {
         border: 2px solid var(--border);
         border-radius: 6px;
         background: transparent;
         padding: 0.5rem 0.6rem;
         cursor: pointer;
         transition: border-color 0.2s;
     }

     .hamburger-btn:hover {
         border-color: var(--sapphire);
     }

     .hamburger-btn .bi {
         font-size: 1.1rem;
         color: var(--text-dark);
     }

     /* ── HERO ──────────────────────────────────────────── */
     .hero-section {
         position: relative;
         overflow: hidden;
         min-height: 600px;
         display: flex;
         align-items: stretch;
     }

     /* Full-bleed banner image on the right half */
     .hero-img-col {
         position: relative;
         overflow: hidden;
     }

     .hero-banner-img {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: center  70%;
     }

     /* dark gradient from left over the image for readability */
     .hero-img-col::before {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(to right, rgba(13, 27, 62, 0.55) 0%, rgba(13, 27, 62, 0.1) 60%, transparent 100%);
         z-index: 1;
     }

     /* text side */
     .hero-text-col {
         background: #fff;
         /* background: linear-gradient(135deg, #e6ecf7 0%, #f2f5fc 60%, #dde8f7 100%); */
         display: flex;
         align-items: center;
         position: relative;
         z-index: 2;
     }

     .hero-content {
         padding: 3.5rem 2.5rem 3rem 0;
     }

     .navbar-toggler {
         font-size: 21px !important;
         padding: 0 !important;
         border: none !important;
     }

     /* On mobile: stack vertically, image on top */
     @media (max-width: 991.98px) {
         .hero-section {
             flex-direction: column;
             min-height: auto;
         }

         .hero-text-col {
             padding: 0;
         }

         .hero-content {
             padding: 0.5rem 0.2rem 1rem !important;
         }

         .hero-img-col {
             min-height: 300px;
             width: 100%;
             position: relative;
             order: -1;
         }

         .hero-img-col::before {
             background: linear-gradient(to bottom, rgba(13, 27, 62, 0.15) 0%, rgba(13, 27, 62, 0.45) 100%);
         }

         .hero-banner-img {
             position: absolute;
         }
     }

     @media (max-width: 575.98px) {
         .hero-img-col {
             min-height: 240px;
         }

         .hero-banner-img {
             object-position: bottom;
         }

         .trust-item {
             font-size: 0.4rem !important;
         }
     }

     .hero-eyebrow {
         font-family: 'Barlow Condensed', sans-serif;
         font-size: 0.85rem;
         font-weight: 700;
         letter-spacing: 4px;
         text-transform: uppercase;
         color: var(--sapphire);
         display: flex;
         align-items: center;
         gap: 0.6rem;
         margin-bottom: 0.55rem;
     }

     .hero-eyebrow::after {
         content: '';
         display: inline-block;
         width: 36px;
         height: 2px;
         background: var(--sapphire);
     }

     .hero-heading {
         font-family: 'Barlow Condensed', sans-serif;
         font-size: clamp(2.5rem, 6vw, 5rem);
         font-weight: 800;
         line-height: 0.93;
         color: var(--navy);
         text-transform: uppercase;
         letter-spacing: -1px;
         margin-bottom: 0.15rem;
     }

     .hero-heading .gradient-word {
         background: linear-gradient(135deg, var(--sapphire) 0%, #19254B 60%, #19254B 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
     }

     .hero-diamond-divider {
         display: flex;
         align-items: center;
         gap: 0.7rem;
         margin: 1.1rem 0 1.3rem;
     }

     .hero-diamond-divider::before,
     .hero-diamond-divider::after {
         content: '';
         flex: 0 0 48px;
         height: 2px;
         background: linear-gradient(90deg, var(--sapphire), transparent);
     }

     .hero-diamond-divider::after {
         background: linear-gradient(270deg, var(--sapphire), transparent);
     }

     .hero-diamond-divider .bi {
         color: var(--sapphire);
         font-size: 1rem;
     }

     .hero-body {
         font-size: 0.97rem;
         color: var(--text-dark);
         line-height: 1.68;
         max-width: 370px;
     }

     .hero-body .hl {
         color: var(--sapphire);
         font-weight: 700;
     }

     .hero-body .hld {
         color: var(--navy);
         font-weight: 700;
     }

     /* ── STATS BAR ─────────────────────────────────────── */
     .stats-bar {
         background: var(--white);
         border-radius: 16px;
         box-shadow: var(--shadow);
         padding: 1.6rem 2rem;
         margin-top: -44px;
         position: relative;
         z-index: 5;
     }

     .stat-item {
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .stat-icon-wrap {
         width: 56px;
         height: 56px;
         border-radius: 50%;
         border: 2px solid var(--border);
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 0.7rem;
         transition: border-color 0.2s, background 0.2s;
     }

     .stat-item:hover .stat-icon-wrap {
         border-color: var(--sapphire);
         background: #edf1fb;
     }

     .stat-icon-wrap .bi {
         font-size: 1.4rem;
         color: var(--sapphire);
     }

     .stat-label {
         font-family: 'Barlow Condensed', sans-serif;
         font-size: 0.85rem;
         font-weight: 800;
         letter-spacing: 1px;
         text-transform: uppercase;
         color: var(--navy);
         line-height: 1.2;
     }

     .stat-desc {
         font-size: 0.77rem;
         color: var(--text-light);
         margin-top: 0.18rem;
         line-height: 1.3;
     }

     .stat-divider {
         width: 1px !important;
         background: var(--border);
         align-self: stretch;
         margin: 0 auto;
     }

     @media (max-width:991.98px) {
         .stats-bar {
             margin-top: 1.5rem;
             border-radius: 12px;
         }

         .stat-divider {
             display: none;
         }
     }

     @media (max-width:767.98px) {
         .stats-bar {
             padding: 1.2rem 1rem;
         }

         .stat-item {
             /* flex-direction: row; */
             flex-direction: column;
             text-align: left;
             gap: 0.75rem;
         }

         .stat-icon-wrap {
             margin-bottom: 0;
             flex-shrink: 0;
         }
     }

     /* ── CTA BANNER ────────────────────────────────────── */
     .cta-banner {
         background: var(--navy);
         border-radius: 14px;
         padding: 0.5rem 2rem;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 1rem;
         cursor: pointer;
         transition: background 0.25s;
         text-decoration: none;
     }

     .cta-banner:hover {
         background: var(--sapphire);
     }

     .cta-banner .cta-icon {
         color: var(--white);
         font-size: 1.3rem;
     }

     .cta-banner .cta-text {
         font-family: 'Barlow Condensed', sans-serif;
         font-size: 1.25rem;
         font-weight: 800;
         letter-spacing: 3px;
         text-transform: uppercase;
         color: var(--white);
     }

     @media (max-width:575.98px) {
         .cta-banner .cta-text {
             font-size: 0.70rem;
             letter-spacing: 2px;
         }

         .cta-banner .cta-icon {
             font-size: 1rem !important;
         }

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

         .stat-desc {
             font-size: 0.60rem;
         }
     }


     /* ── TRUST BAR ─────────────────────────────────────── */
     .trust-bar {
         background: var(--white);
         padding: 1rem 0;
         border-top: 1.5px solid var(--border);
     }

     .trust-item {
         display: flex;
         align-items: center;
         gap: 0.45rem;
         font-size: 0.77rem;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 1.5px;
         color: var(--text-mid);
     }

     .trust-item .bi {
         color: var(--sapphire);
         font-size: 0.9rem;
     }

     .trust-dot {
         width: 5px;
         height: 5px;
         border-radius: 50%;
         background: var(--border);
         flex-shrink: 0;
     }

     @media (max-width:991px) {
         .hero-text-col {
             background: #fff;
             /* background: rgba(255, 255, 255, 0.5); */
             width: 37%;
         }


         .hero-img-col {
             position: absolute;
         }

         .hero-content {
             padding: 0.5rem 0.2rem 1rem !important;
         }

         .hero-body {
             font-size: 0.8rem !important;
         }
     }

     .hero-section {
         margin-bottom: 0px !important;
     }



     @media (max-width: 450px) {
         .btn-book {
             /* font-size: 0.70em !important; */
             font-size: 0.60em !important;
             padding: 10px 16px !important;
         }

         .hero-body {
             font-size: 0.7rem !important;
         }

         .hero-diamond-divider {
             margin: 0.1rem 0 0.3rem;
         }

         .btn-call {
             /* font-size: 0.70em !important; */
             font-size: 0.60em !important;
             padding: 8px 16px !important;
         }

         .hero-eyebrow {
             font-size: 0.70rem;
             font-weight: 700;
             letter-spacing: 2px;

         }

         .navbar-brand img {
             width: 60px !important;
         }
     }
  @media (min-width: 992px) {
    .hero-section::after {
        left: 41.5% !important;
    }
  }
     .hero-section::after {
         content: '';
         position: absolute;
         top: 0;
         right: 0;
         left: 37% ;
         width: 29%;
         height: 100%;
         background: linear-gradient(to right,
                 #ffffff 0%,
                 rgba(255, 255, 255, 0.85) 15%,
                 rgba(255, 255, 255, 0.40) 35%,
                 rgba(255, 255, 255, 0.10) 60%,
                 rgba(255, 255, 255, 0.00) 100%);
         z-index: 1;
     }