  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400;500&family=Playfair+Display:wght@700;800;900&display=swap"
    rel="stylesheet" />

  <!-- Font Awesome 6 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

  <!-- Our CSS -->
  <link rel="stylesheet" href="assets/css/design-system.css" />
  <link rel="stylesheet" href="assets/css/components.css" />

  <!-- Structured Data: MedicalOrganization -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "MedicalOrganization",
    "name": "Melvin Jones Lions Eye Hospital",
    "alternateName": "MJ Lions Eye Hospital",
    "url": "https://www.mjlionseyehospital.org",
    "logo": "https://www.mjlionseyehospital.org/assets/images/logo.png",
    "description": "Advanced eye care hospital providing cataract surgery, glaucoma treatment, retina surgery and community outreach in Cuttack, Odisha.",
    "medicalSpecialty": "Ophthalmology",
    "telephone": ["+91-(0671) 2303242", "+91-8895477994"],
    "email": "mjlehctc@gmail.com",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Khalasi Lane, Buxi Bazar",
      "addressLocality": "Cuttack",
      "addressRegion": "Odisha",
      "postalCode": "753001",
      "addressCountry": "IN"
    },
    "openingHours": ["Mo-Sa 09:00-17:00"],
    "hasMap": "https://www.google.com/maps/search/Melvin+Jones+Lions+Eye+Hospital+Cuttack"
  }
  </script>

  <style>
    /* ============================================================
       HERO SECTION — LIGHT CLINICAL REDESIGN
       ============================================================ */

    .hero-slide {
      background-color: #EEF4FB;
    }

    /* ---- HERO WRAPPER ---- */
    .hero {
      position: relative;
      height: calc(100vh - 130px);
      min-height: 640px;
      max-height: none !important;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #EEF4FB;
    }

    /* Hide dark overlay completely */
    .hero-overlay {
      display: none !important;
    }

    /* ---- HERO CONTENT LAYOUT ---- */
    .hero-content {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: stretch;
      z-index: 2;
      padding-top: 0;
    }

    .hero-split {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      align-items: center;
      gap: 0;
      width: 100%;
      height: 100%;
    }

    /* ---- LEFT COLUMN ---- */
    .hero-left {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 3rem 0 3rem 0;
      justify-content: center;
    }

    /* Animated tag chip — light theme */
    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(10, 61, 98, 0.07);
      border: 1.5px solid rgba(10, 61, 98, 0.22);
      color: var(--clr-primary);
      padding: 0.375rem 1rem;
      border-radius: var(--radius-pill);
      font-size: 0.7rem;
      font-weight: var(--fw-semibold);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 1.25rem;
      width: fit-content;
      animation: tagSlideIn 0.8s var(--ease-spring) both;
    }

    .hero-tag .tag-dot {
      width: 6px;
      height: 6px;
      background: var(--clr-primary);
      border-radius: 50%;
      animation: pulse-dot 1.8s ease-in-out infinite;
    }

    @keyframes tagSlideIn {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* ============================================================
       HERO TITLE — Typewriter cycling word
       ============================================================ */

    /* Wrapper: inline-block so it sizes to the hidden sizer */
    .hero-cycle-container {
      display: inline-block;
      position: relative;
      vertical-align: baseline;
    }

    /* Ghost sizer — always "Vision." (longest word), invisible */
    .hero-cycle-sizer {
      visibility: hidden;
      color: transparent;
      white-space: nowrap;
      font-weight: inherit;
      font-size: inherit;
      user-select: none;
      pointer-events: none;
    }

    /* Actual cycling word sits on top of the sizer */
    .hero-cycle-word {
      position: absolute;
      top: 0;
      left: 0;
      white-space: nowrap;
      color: #29B6CF;            /* default; JS overrides each word */
      min-width: 2px;
    }


    /* Hero title — dark on light bg */
    .hero-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.4rem, 4vw, 4rem);
      font-weight: 800;
      color: var(--clr-primary);
      line-height: 1.1;
      letter-spacing: -0.025em;
      margin-bottom: 1.25rem;
      -webkit-text-stroke: 0;
      text-shadow: none;
      animation: heroTitleIn 1s var(--ease-smooth) 0.2s both;
    }

    @keyframes heroTitleIn {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* "Vision," — teal gradient */
    .hero-title .line-accent {
      background: linear-gradient(90deg, #00838F, #00BCD4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
    }

    /* "Lives" — green */
    .hero-title .line-outline {
      -webkit-text-stroke: 0;
      -webkit-text-fill-color: #10B981;
      color: #10B981;
    }

    /* Subtitle */
    .hero-subtitle {
      font-size: clamp(0.92rem, 1.5vw, 1.05rem);
      color: var(--clr-text-secondary);
      line-height: 1.8;
      margin-bottom: 2rem;
      max-width: 440px;
      animation: heroTitleIn 1s var(--ease-smooth) 0.4s both;
    }

    /* CTA Buttons */
    .hero-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      animation: heroTitleIn 1s var(--ease-smooth) 0.55s both;
      margin-bottom: 2.25rem;
    }

    .btn-hero-primary {
      background: var(--clr-primary);
      color: #fff;
      font-family: var(--font-heading);
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      padding: 0.9rem 2rem;
      border-radius: var(--radius-pill);
      border: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s var(--ease-smooth);
      box-shadow: 0 6px 24px rgba(10, 61, 98, 0.35);
      position: relative;
      overflow: hidden;
    }

    .btn-hero-primary::before {
      display: none;
    }

    .btn-hero-primary:hover {
      background: var(--clr-primary-light);
      transform: translateY(-3px);
      box-shadow: 0 12px 36px rgba(10, 61, 98, 0.45);
    }

    .btn-hero-primary span,
    .btn-hero-primary i {
      position: relative;
      z-index: 1;
    }

    .btn-hero-ghost {
      background: transparent;
      color: var(--clr-primary);
      font-family: var(--font-heading);
      font-size: var(--fs-sm);
      font-weight: var(--fw-semibold);
      padding: 0.875rem 1.75rem;
      border-radius: var(--radius-pill);
      border: 2px solid rgba(10, 61, 98, 0.28);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s var(--ease-smooth);
    }

    .btn-hero-ghost:hover {
      background: rgba(10, 61, 98, 0.07);
      border-color: rgba(10, 61, 98, 0.5);
      transform: translateY(-3px);
    }

    /* Mini trust row */
    .hero-mini-trust {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
      animation: heroTitleIn 1s var(--ease-smooth) 0.7s both;
    }

    .hero-mini-trust-item {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      color: var(--clr-text-secondary);
      font-size: 0.78rem;
      font-weight: var(--fw-medium);
    }

    .hero-mini-trust-item i {
      color: var(--clr-primary);
      font-size: 0.95rem;
    }

    /* ---- RIGHT COLUMN — Photo ---- */
    .hero-right {
      position: static;
      height: 100%;
      display: flex;
      align-items: stretch;
    }

    @keyframes heroRightIn {
      from {
        opacity: 0;
        transform: translateX(60px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Hide unused elements */
    .hero-orb,
    .hero-visual-card,
    .hero-floating-badge,
    .hero-eye-wrap {
      display: none !important;
    }

    /* Container for photo, arcs, and stats */
    .hero-photo-frame {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 53vw;
      animation: heroRightIn 1.2s var(--ease-smooth) 0.3s both;
    }

    /* Shared Arc Properties to guarantee perfect concentricity */
    .hero-photo-frame::before,
    .hero-photo-frame::after {
      content: '';
      position: absolute;
      top: -24px;
      bottom: -24px;
      left: -24px;
      right: 0;
      border-radius: 800px 0 0 800px;
      border: 12px solid transparent;
      z-index: 1;
      pointer-events: none;
    }

    /* Blue Top Arc */
    .hero-photo-frame::before {
      border-left-color: #0047AB;
      border-top-color: #0047AB;
      clip-path: polygon(0 0, 30% 0, 30% 43%, 0 43%);
    }

    /* Green Bottom Arc */
    .hero-photo-frame::after {
      border-left-color: #10B981;
      border-bottom-color: #10B981;
      clip-path: polygon(0 57%, 30% 57%, 30% 100%, 0 100%);
    }

    /* Photo wrap with sweeping curve */
    .hero-photo-wrap {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: 800px 0 0 800px;
      z-index: 2;
    }

    .hero-photo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      position: absolute;
      inset: 0;
    }

    /* Multiple Image Crossfade Animation */
    .hero-img-1 {
      animation: heroFade1 12s infinite;
    }

    .hero-img-2 {
      opacity: 0;
      animation: heroFade2 12s infinite;
    }

    @keyframes heroFade1 {

      0%,
      40% {
        opacity: 1;
      }

      50%,
      90% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes heroFade2 {

      0%,
      40% {
        opacity: 0;
      }

      50%,
      90% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    /* Dotted decoration */
    .hero-dot-pattern {
      position: absolute;
      top: 2.5rem;
      left: 42%;
      display: grid;
      grid-template-columns: repeat(6, 6px);
      gap: 7px;
      opacity: 0.35;
      pointer-events: none;
      z-index: 1;
    }

    .hero-dot-pattern span {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--clr-primary);
      display: block;
    }

    /* Vertical slide progress */
    .hero-progress {
      display: none;
    }

    /* ============================================================
       DESKTOP ONLY: hide mobile-specific elements
       ============================================================ */
    .hero-mobile-badges { display: none; }
    .hero-actions-row2  { display: none; }
    .hero-btn-arrow     { display: none; }
    .hero-scroll-btn    { display: none; }
    .btn-hero-whatsapp  { /* same as ghost */ }
    .btn-hero-call      { /* same as ghost */ }

    /* ============================================================
       MOBILE HERO — Cinematic full-screen overlay design
       ============================================================ */
    @media (max-width: 1024px) {

      /* ---- Hero wrapper: full viewport height ---- */
      .hero {
        position: relative;
        height: 82svh !important;
        min-height: 480px !important;
        max-height: 680px !important;
        overflow: hidden;
        background: #071e3d;
        display: block;
      }

      .hero-overlay,
      .hero-dot-pattern {
        display: none !important;
      }

      /* ---- Image: absolute full-screen background ---- */
      .hero-right {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0;
        order: unset;
      }

      .hero-photo-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        animation: none;
      }

      .hero-photo-frame::before,
      .hero-photo-frame::after {
        display: none !important;
      }

      .hero-photo-wrap {
        border-radius: 0;
        position: absolute;
        inset: 0;
      }

      /* Gradient: clear at top, solid dark navy at bottom for text readability */
      .hero-photo-wrap::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          rgba(5, 20, 50, 0.18) 0%,
          rgba(5, 20, 50, 0.08) 35%,
          rgba(8, 28, 65, 0.70) 58%,
          rgba(7, 30, 61, 0.97) 78%,
          rgba(7, 30, 61, 1.00) 100%
        );
        z-index: 1;
      }

      /* ---- Mobile badge pills — absolutely positioned top-left ---- */
      .hero-mobile-badges {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        position: absolute;
        top: 5.5rem;   /* below fixed navbar */
        left: 1.1rem;
        z-index: 10;
      }

      /* NABH badge — dark navy pill with yellow icon */
      .hmb-nabh {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        background: #0A2E5A;
        color: #FFD54F;
        font-family: var(--font-heading);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        padding: 0.45rem 1rem;
        border-radius: 100px;
        text-transform: uppercase;
        box-shadow: 0 2px 12px rgba(0,0,0,0.35);
      }

      .hmb-nabh i {
        color: #FFD54F;
        font-size: 0.8rem;
      }

      /* Since 1987 badge — frosted white pill */
      .hmb-since {
        display: inline-flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1.5px solid rgba(255, 255, 255, 0.38);
        color: #fff;
        font-family: var(--font-heading);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        padding: 0.4rem 1rem;
        border-radius: 100px;
      }

      /* ---- hero-content: full screen overlay ---- */
      .hero-content {
        position: absolute !important;
        inset: 0;
        z-index: 5;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0;
      }

      .hero-content > .container {
        height: auto !important;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
      }

      .hero-split {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: auto;
        width: 100%;
      }

      /* ---- Text block: anchored at bottom ---- */
      .hero-left {
        position: relative;
        z-index: 2;
        order: 1;
        padding: 1.5rem 1.25rem 1.75rem;
        text-align: center;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
      }

      /* Hide desktop tag chip on mobile (replaced by hero-mobile-badges) */
      .hero-tag {
        display: none !important;
      }

      /* Title — white, centered, bold */
      .hero-title {
        color: #fff;
        font-size: clamp(1.9rem, 7.5vw, 2.6rem);
        line-height: 1.15;
        margin-bottom: 0.65rem;
        text-shadow: 0 2px 12px rgba(0,0,0,0.4);
      }

      .hero-title .line-accent {
        background: linear-gradient(90deg, #29B6CF, #00E5FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .hero-title .line-outline {
        -webkit-text-fill-color: #F7A800;
        color: #F7A800;
      }

      /* Subtitle — white, compact */
      .hero-subtitle {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.88rem;
        line-height: 1.6;
        max-width: 100%;
        margin-bottom: 1.4rem;
        display: block;  /* show all lines */
        overflow: visible;
        -webkit-line-clamp: unset;
      }

      /* CTA container */
      .hero-actions {
        flex-direction: column;
        gap: 0.6rem;
        margin-bottom: 0;
        align-items: stretch;
        align-self: stretch;   /* override align-items:center from hero-left */
        width: 100%;
      }

      /* ============================================================
         BOOK APPOINTMENT — Premium amber CTA
         ============================================================ */
      .hero-actions > .btn-hero-primary {
        width: 100% !important;
        max-width: 100%;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        justify-content: flex-start;
        padding: 0.6rem 0.9rem 0.6rem 1rem;
        font-size: 0.92rem;
        font-weight: 700;
        font-family: var(--font-heading);
        letter-spacing: 0.01em;
        background: linear-gradient(100deg, #F5A623 0%, #E8920E 55%, #D4820A 100%);
        color: #1C1400;
        border: none;
        border-radius: 14px;
        box-shadow:
          0 4px 18px rgba(245, 166, 35, 0.45),
          inset 0 1px 0 rgba(255,255,255,0.20);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        text-decoration: none;
        position: relative;
        overflow: hidden;
      }

      .hero-actions > .btn-hero-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
        pointer-events: none;
      }

      .hero-actions > .btn-hero-primary:hover {
        transform: translateY(-2px);
        box-shadow:
          0 8px 28px rgba(245, 166, 35, 0.55),
          inset 0 1px 0 rgba(255,255,255,0.25);
      }

      .hero-actions > .btn-hero-primary:active {
        transform: translateY(0);
      }

      /* Calendar icon */
      .hero-actions > .btn-hero-primary > i:first-child {
        font-size: 1rem;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
      }

      /* Text span */
      .hero-actions > .btn-hero-primary > span {
        flex: 1;
        text-align: center;
        position: relative;
        z-index: 1;
      }

      /* Arrow badge — circle on right */
      .hero-actions > .btn-hero-primary .hero-btn-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(28, 20, 0, 0.18);
        font-size: 0.75rem;
        flex-shrink: 0;
        margin-left: auto;
        position: relative;
        z-index: 1;
        transition: background 0.2s ease;
      }

      .hero-actions > .btn-hero-primary:hover .hero-btn-arrow {
        background: rgba(28, 20, 0, 0.28);
      }

      /* ============================================================
         ROW 2 — Call Now + Chat on WhatsApp
         ============================================================ */
      .hero-actions-row2 {
        display: flex;
        gap: 0.55rem;
        width: 100%;
      }

      .hero-actions-row2 .btn-hero-ghost {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.55rem 0.6rem;
        font-size: 0.8rem;
        font-weight: 600;
        font-family: var(--font-heading);
        letter-spacing: 0.01em;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #fff;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.22s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Call Now — white frosted */
      .btn-hero-call {
        border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
      }

      .btn-hero-call i {
        font-size: 0.85rem;
        flex-shrink: 0;
      }

      .btn-hero-call:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.60) !important;
        transform: translateY(-1px);
      }

      /* WhatsApp — green frosted */
      .btn-hero-whatsapp {
        border: 1.5px solid rgba(37, 211, 102, 0.45) !important;
      }

      .btn-hero-whatsapp i {
        color: #4CD964;
        font-size: 1rem;
        flex-shrink: 0;
      }

      .btn-hero-whatsapp:hover {
        background: rgba(37, 211, 102, 0.14) !important;
        border-color: rgba(37, 211, 102, 0.65) !important;
        transform: translateY(-1px);
      }

      /* Hide desktop-only elements on mobile */
      .hero-mini-trust {
        display: none !important;
      }

      /* ---- Scroll-down indicator ---- */
      .hero-scroll-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 1.5rem;
        right: 1.25rem;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1.5px solid rgba(255,255,255,0.30);
        color: #fff;
        font-size: 0.9rem;
        text-decoration: none;
        z-index: 20;
        animation: scrollBounce 2s ease-in-out infinite;
      }

      @keyframes scrollBounce {
        0%, 100% { transform: translateY(0); }
        50%       { transform: translateY(5px); }
      }
    }

    @media (max-width: 640px) {
      .hero-mobile-badges {
        top: 5rem;
      }

      .hero-left {
        padding: 1.25rem 1rem 1.5rem;
      }

      .hero-title {
        font-size: clamp(1.7rem, 7vw, 2.2rem);
      }

      .hero-subtitle {
        font-size: 0.83rem;
      }

      .hero-actions > .btn-hero-primary {
        font-size: 0.88rem;
        padding: 0.9rem 1.1rem;
      }

      .hero-actions-row2 .btn-hero-ghost {
        font-size: 0.78rem;
        padding: 0.75rem 0.6rem;
      }
    }

    /* ============================================================
       EVEN / ODD 2-COLOR ALTERNATING SECTION SYSTEM
       Only 2 colors used across all sections:
       Color 1 (Odd):  #EEF4FB (var(--clr-bg-surface))
       Color 2 (Even): #FFFFFF (var(--clr-bg-white))
       ============================================================ */
    section:nth-of-type(odd) {
      background-color: var(--clr-bg-surface) !important;
    }

    section:nth-of-type(even) {
      background-color: var(--clr-bg-white) !important;
    }

    /* Testimonials track */
    .testimonials-viewport {
      overflow: hidden;
    }

    #testimonials-track {
      display: flex;
      transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .testimonial-slide {
      flex: 0 0 calc(33.333% - 1rem);
      margin-right: 1.5rem;
      display: flex;
      flex-direction: column;
    }

    @media (max-width: 1024px) {
      .testimonial-slide {
        flex: 0 0 calc(50% - 0.75rem);
      }
    }

    @media (max-width: 640px) {
      .testimonial-slide {
        flex: 0 0 100%;
        margin-right: 0;
      }
    }



    /* Contact section */
    #contact .section-label.white::before {
      background: rgba(255, 255, 255, 0.4);
    }

    /* Services grid */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    @media (max-width: 1024px) {
      .services-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      .services-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Doctors slider styling */
    .doctors-slider-outer {
      position: relative;
      padding: 0;
    }

    .doctors-slider-track {
      overflow: hidden;
      width: 100%;
    }

    .doctors-grid {
      display: flex;
      align-items: stretch;
      gap: 1.5rem;
      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      padding: 0.75rem 0.25rem 1.5rem;
    }

    .doctors-grid .doctor-card {
      flex: 0 0 calc((100% - (3 * 1.5rem)) / 4);
      scroll-snap-align: start;
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
      height: auto;
      align-self: stretch;
    }

    /* Slider arrow buttons */
    .slider-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--clr-bg-white);
      border: 1px solid var(--clr-border);
      color: var(--clr-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: var(--shadow-md);
      transition: var(--transition);
      z-index: 10;
    }

    .slider-arrow:hover {
      background: var(--clr-primary);
      color: #fff;
      border-color: var(--clr-primary);
      transform: translateY(-50%) scale(1.05);
      box-shadow: var(--shadow-lg);
    }

    .slider-arrow:focus {
      outline: none;
      box-shadow: 0 0 0 3px var(--clr-primary-pale);
    }

    .slider-arrow.prev {
      left: -22px;
    }

    .slider-arrow.next {
      right: -22px;
    }

    @media (max-width: 1100px) {
      .doctors-slider-outer {
        padding: 0 3rem;
      }

      .slider-arrow.prev {
        left: 0.5rem;
      }

      .slider-arrow.next {
        right: 0.5rem;
      }
    }

    @media (max-width: 1024px) {
      .doctors-slider-outer {
        padding: 0 3rem;
      }

      .doctors-grid .doctor-card {
        flex: 0 0 calc((100% - 1.5rem) / 2);
      }
    }

    @media (max-width: 640px) {
      .doctors-slider-outer {
        padding: 0;
      }

      .slider-arrow {
        display: none !important;
      }

      .doctors-slider-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .doctors-slider-track::-webkit-scrollbar {
        display: none;
      }

      .doctors-grid {
        gap: 1rem;
      }

      .doctors-grid .doctor-card {
        flex: 0 0 calc(100% - 2rem);
        scroll-snap-align: center;
      }
    }

    /* Appointment two-col */
    .appt-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    @media (max-width: 768px) {
      .appt-grid {
        grid-template-columns: 1fr;
      }
    }

    /* About two-col */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }

    @media (max-width: 768px) {
      .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }

    /* Contact flat grid layout (Automatic equal heights row-by-row) */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 1.25rem 2.5rem;
      /* Row gap: 1.25rem, Col gap: 2.5rem */
      align-items: stretch;
    }

    @media (max-width: 768px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
      }

      .contact-info-card {
        order: 1;
      }

      .contact-hours-card {
        order: 2;
      }

      .contact-buttons {
        order: 3;
      }

      .map-container {
        order: 4;
      }

      .emergency-card {
        order: 5;
      }
    }

    /* Insurers strip */
    .insurers-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1rem;
    }

    @media (max-width: 768px) {
      .insurers-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 480px) {
      .insurers-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Slider nav buttons */
    .slider-nav-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--clr-primary);
      box-shadow: var(--shadow-md);
      transition: var(--transition);
      flex-shrink: 0;
    }

    .slider-nav-btn:hover {
      background: var(--clr-primary);
      color: #fff;
      transform: scale(1.08);
    }

    /* Testimonials dots */
    .testimonials-dots {
      display: flex;
      gap: 0.5rem;
      justify-content: center;
      margin-top: 2rem;
    }

    .testimonials-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--clr-border);
      cursor: pointer;
      transition: var(--transition);
    }

    .testimonials-dot.active {
      background: var(--clr-primary);
      width: 24px;
      border-radius: var(--radius-pill);
    }

    /* Feedback star rating */
    .star-rating {
      display: flex;
      gap: 0.375rem;
    }

    .star-btn {
      font-size: 2rem;
      color: var(--clr-border);
      cursor: pointer;
      transition: color var(--duration-fast);
      background: none;
      border: none;
      padding: 0;
      line-height: 1;
    }

    .star-btn.active,
    .star-btn:hover {
      color: var(--clr-accent);
    }

    /* Achievement strip */
    .achievement-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 1.5rem 1rem;
    }

    .achievement-icon {
      font-size: 2.5rem;
      margin-bottom: 0.75rem;
    }

    /* Section divider wave */
    .wave-top svg {
      transform: rotate(180deg);
    }

    /* Preloader */
    #preloader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: var(--clr-bg-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    #preloader.hidden {
      opacity: 0;
      visibility: hidden;
    }

    .preloader-inner {
      text-align: center;
    }

    .preloader-logo {
      width: 80px;
      margin: 0 auto 1.5rem;
      animation: float 2s ease-in-out infinite;
    }

    .preloader-bar {
      width: 180px;
      height: 3px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-pill);
      overflow: hidden;
      margin: 0 auto;
    }

    .preloader-bar-fill {
      height: 100%;
      width: 0;
      background: var(--grad-accent);
      border-radius: var(--radius-pill);
      animation: preload 1.5s ease-in-out forwards;
    }

    @keyframes preload {
      0% {
        width: 0;
      }

      60% {
        width: 80%;
      }

      100% {
        width: 100%;
      }
    }

    /* Visitors Views Homepage Section Styling */
    .visitor-card-home {
      background: var(--clr-bg-surface);
      border-radius: var(--radius-xl);
      padding: 2rem;
      border: 1px solid var(--clr-border-light);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      transition: var(--transition-slow);
    }

    .visitor-card-home:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: var(--clr-primary-pale);
      background: var(--clr-bg-white) !important;
    }

    .visitor-card-home::before {
      content: '"';
      position: absolute;
      top: -0.5rem;
      right: 1.25rem;
      font-size: 7rem;
      font-family: 'Outfit', sans-serif;
      font-weight: 800;
      color: rgba(10, 61, 98, 0.04);
      line-height: 1;
    }

    /* Ticker NEW Tag */
    .ticker-new-tag {
      display: inline-block;
      background: #E11D48;
      color: white;
      font-size: 0.6rem;
      font-weight: 800;
      padding: 0.15rem 0.4rem;
      border-radius: 4px;
      margin-left: 0.5rem;
      vertical-align: middle;
      animation: blinker 1.5s linear infinite;
    }

    @keyframes blinker {
      50% { opacity: 0.2; }
    }

    @media (max-width: 640px) {
      .visitors-controls {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 0.75rem;
      }
      .visitors-controls > div[style*="flex: 1"] {
        display: none; /* hide the separator line on mobile */
      }
    }
  </style>
