/* Standalone responsive hero: loaded last to keep tablet and phone layouts predictable. */
#responsiveHero.responsive-hero {
  display: none;
}

@media (min-width: 1200px) {
  #responsiveHero.responsive-hero {
    display: none !important;
  }

  /* Keep both carousel slides visually distinct. Applying the first image to
     both slides made the Next control appear broken even when Bootstrap had
     advanced the carousel successfully. */
  #home.hero-v2,
  #home.hero-v2::before,
  #home.hero-v2::after {
    background-color: transparent !important;
  }

  #home.hero-v2::before,
  #home.hero-v2::after,
  #home.hero-v2 .hero-hospital-bg::before,
  #home.hero-v2 .hero-hospital-bg::after {
    display: none !important;
    content: none !important;
  }

  #desktopHeroCarousel .hero-hospital-bg.slide-1 {
    background-image: url('../assets/images/home-hero-original-face-hd.png') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #desktopHeroCarousel .hero-hospital-bg.slide-2 {
    background-image: url('../assets/images/cardiac-hospital-blue-strip.png') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Prevent a single fixed-width component from creating a horizontal scroll bar
   on narrow phones, tablets, or compact laptop windows. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* The footer belongs after the main content, not as a flex item inside it.
   Keep the original footer component visible at every viewport size. */
footer.footer-new {
  display: block !important;
  position: relative !important;
  z-index: 1;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 1199.98px) {
  #home.hero-v2 { display: none !important; }

  #responsiveHero.responsive-hero {
    --hero-navy: #082a4f;
    --hero-red: #e22a36;
    display: grid !important;
    position: relative !important;
    isolation: isolate;
    height: 620px !important;
    min-height: 620px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #fff;
    background: var(--hero-navy) !important;
  }

  #responsiveHero .responsive-hero__visual {
    position: absolute !important;
    z-index: -2;
    inset: 0 !important;
    background: url('../assets/images/home-hero-original-face-hd.png') center / cover no-repeat !important;
  }

  #responsiveHero .responsive-hero__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Preserve a clear, natural-colour portrait on the right while retaining
       enough contrast for the text on the left. Reduced fade per request. */
    background: linear-gradient(90deg, rgba(4, 28, 56, .16) 0%, rgba(5, 36, 70, .03) 35%, rgba(5, 36, 70, 0) 55%, rgba(5, 36, 70, 0) 100%);
  }

  #responsiveHero.responsive-hero > .responsive-hero__content {
    position: relative !important;
    z-index: 1 !important;
    width: min(100% - 64px, 680px) !important;
    align-self: center !important;
    margin: 0 0 0 clamp(32px, 7vw, 88px) !important;
    padding: 112px 0 64px !important;
  }

  #responsiveHero .responsive-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px !important;
    color: #ff737b;
    font: 700 .78rem/1.2 'Poppins', Arial, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  #responsiveHero .responsive-hero__eyebrow::before {
    content: '';
    width: 34px;
    height: 2px;
    background: currentColor;
  }

  #responsiveHero h1 {
    max-width: 620px !important;
    margin: 0 !important;
    color: #fff !important;
    font: 800 clamp(2.35rem, 5vw, 4.4rem)/1.06 'Poppins', Arial, sans-serif !important;
    letter-spacing: -.04em;
  }

  #responsiveHero h1 em {
    color: #ff727a;
    font-style: normal;
  }

  #responsiveHero .responsive-hero__copy {
    max-width: 560px;
    margin: 20px 0 0 !important;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(.98rem, 1.8vw, 1.16rem) !important;
    line-height: 1.6;
  }

  #responsiveHero .responsive-hero__doctor {
    display: block;
    margin: 18px 0 0 !important;
    color: #fff;
    font: 700 clamp(1.05rem, 2vw, 1.35rem)/1.35 'Poppins', Arial, sans-serif;
  }

  #responsiveHero .responsive-hero__qualification {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .75);
    font-size: .83rem;
    font-weight: 500;
  }

  #responsiveHero .responsive-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px !important;
  }

  #responsiveHero .responsive-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px !important;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 700 .94rem/1.25 'Poppins', Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease;
  }

  #responsiveHero .responsive-hero__button:hover { transform: translateY(-2px); }
  #responsiveHero .responsive-hero__button--primary { background: #fff; color: #082a4f; }
  #responsiveHero .responsive-hero__button--secondary { border-color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .1); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}

@media (max-width: 767.98px) {
  #responsiveHero.responsive-hero {
    height: 100dvh !important;
    min-height: 100dvh !important;
    align-items: flex-end !important;
    background: #0d2a4e !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #responsiveHero.responsive-hero > .responsive-hero__visual {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: url('../assets/images/ID mobile.png') !important;
    background-position: center top !important;
    background-size: cover !important;
    z-index: 0 !important;
  }

  /* Base gradient optimized for tall modern phones (19.5:9 to 20:9) */
  #responsiveHero .responsive-hero__visual::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(13, 42, 78, 0) 0%, rgba(13, 42, 78, 0) 45%, rgba(13, 42, 78, 0.9) 65%, #0d2a4e 85%, #0d2a4e 100%) !important;
    z-index: 1 !important;
  }

  /* Base layout optimized for tall modern phones */
  #responsiveHero.responsive-hero > .responsive-hero__content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 0 24px 40px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    height: 100% !important;
  }

  /* Specific fix for shorter legacy phones (e.g., iPhone SE with ~16:9 aspect ratio) 
     to prevent text overlapping the doctor */
  @media (min-aspect-ratio: 1/2) {
    #responsiveHero.responsive-hero {
      min-height: 100dvh !important;
      height: auto !important;
    }
    #responsiveHero .responsive-hero__visual::after {
      background: linear-gradient(180deg, rgba(13, 42, 78, 0) 0%, rgba(13, 42, 78, 0) calc(100vw * 0.9), rgba(13, 42, 78, 0.95) calc(100vw * 1.3), #0d2a4e calc(100vw * 1.45), #0d2a4e 100%) !important;
    }
    #responsiveHero.responsive-hero > .responsive-hero__content {
      height: auto !important;
      padding-top: calc(100vw * 1.35) !important;
    }
  }

  #responsiveHero .responsive-hero__eyebrow { 
    display: none !important; 
  }
  
  #responsiveHero h1 { 
    font-size: clamp(2rem, 9vw, 3rem) !important; 
    font-weight: 500 !important;
    line-height: 1.15 !important;
    margin: 0 0 16px !important;
    text-wrap: balance !important;
  }
  
  #responsiveHero .responsive-hero__copy { 
    margin: 0 auto 16px !important; 
    font-size: clamp(0.85rem, 3.5vw, 1rem) !important; 
    line-height: 1.4 !important; 
    max-width: 90% !important;
  }
  
  #responsiveHero .responsive-hero__doctor { 
    margin: 0 0 4px !important; 
    font-size: clamp(0.95rem, 4vw, 1.15rem) !important; 
    display: block !important;
  }
  
  #responsiveHero .responsive-hero__qualification { 
    font-size: clamp(0.7rem, 2.8vw, 0.8rem) !important; 
    display: block !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }
  
  #responsiveHero .responsive-hero__actions { 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important;
    margin: 24px auto 0 !important; 
    padding: 0 !important;
    gap: 14px !important; 
    width: 100% !important;
  }
  
  #responsiveHero .responsive-hero__button { 
    width: 100% !important; 
    max-width: 300px !important;
    min-height: 48px !important; 
    font-size: 0.95rem !important; 
    border-radius: 999px !important;
    margin: 0 auto !important;
    align-self: center !important;
  }
}

/* Tablet CTAs remain a balanced two-button row instead of inheriting the
   narrow mobile action wrapper from the legacy responsive stylesheet. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #responsiveHero.responsive-hero {
    /* Fill the top clearance with the same banner scene, while the foreground
       portrait remains lowered below the floating navigation. */
    background-image:
      linear-gradient(90deg, rgba(4, 28, 56, .16) 0%, rgba(5, 36, 70, .05) 48%, rgba(5, 36, 70, 0) 70%, rgba(5, 36, 70, 0) 100%),
      url('../assets/images/home-hero-original-face-hd.png') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  #responsiveHero.responsive-hero > .responsive-hero__visual {
    /* Prevent the portrait from visually touching the floating navigation. */
    top: 42px !important;
  }

  #responsiveHero.responsive-hero > .responsive-hero__content {
    /* Keep the copy clear of the doctor image at every tablet width. */
    width: min(calc(100% - 64px), clamp(430px, 56vw, 620px)) !important;
  }

  #responsiveHero.responsive-hero h1 {
    max-width: 100% !important;
    font-size: clamp(2.25rem, 4.3vw, 3.2rem) !important;
  }

  #responsiveHero.responsive-hero > .responsive-hero__content > .responsive-hero__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(520px, 100%) !important;
    max-width: 100% !important;
    justify-content: start !important;
    gap: 14px !important;
    /* Align the CTA pair with the left edge of the hero copy. */
    margin-top: calc(30px + 1cm) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #responsiveHero.responsive-hero > .responsive-hero__content > .responsive-hero__actions > .responsive-hero__button {
    width: 100% !important;
    min-height: 54px !important;
    padding: 12px 18px !important;
    white-space: normal !important;
  }

  /* Slogan banner: reserve a little more text room and scale down the portrait. */
  .slogan-layout-new {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 29%) !important;
    column-gap: 20px !important;
  }

  .slogan-layout-new .slogan-doctor-new {
    order: 0 !important;
  }

  .slogan-layout-new .slogan-content-new #sloganTypewriter {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(1.15rem, 2.35vw, 1.5rem) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  .slogan-layout-new .slogan-content-new .slogan-typed {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  .slogan-layout-new .slogan-doctor-new img {
    max-width: 88% !important;
    max-height: clamp(210px, 22vw, 280px) !important;
  }
}

/* Short, landscape-oriented devices (including 1000 × 645) keep all hero
   content visible without relying on a desktop-height banner. */
@media (min-width: 768px) and (max-width: 1199.98px) and (max-height: 700px) {
  #responsiveHero.responsive-hero {
    height: min(620px, 100svh) !important;
    min-height: 0 !important;
  }

  #responsiveHero.responsive-hero > .responsive-hero__content {
    padding: 88px 0 30px !important;
  }

  #responsiveHero .responsive-hero__copy {
    margin-top: 14px !important;
    line-height: 1.45 !important;
  }

  #responsiveHero .responsive-hero__doctor {
    margin-top: 12px !important;
  }

  #responsiveHero.responsive-hero > .responsive-hero__content > .responsive-hero__actions {
    margin-top: calc(16px + 1cm) !important;
  }
}

@media (min-width: 768px) and (max-width: 880px) {
  #responsiveHero.responsive-hero > .responsive-hero__content {
    width: min(calc(100% - 48px), 56vw) !important;
  }

  #responsiveHero.responsive-hero > .responsive-hero__content > .responsive-hero__actions {
    gap: 10px !important;
  }

  #responsiveHero.responsive-hero > .responsive-hero__content > .responsive-hero__actions > .responsive-hero__button {
    min-height: 58px !important;
    padding-inline: 10px !important;
    font-size: .84rem !important;
  }
}

@media (max-width: 374px) {
  #responsiveHero.responsive-hero { min-height: 680px; }
  #responsiveHero .responsive-hero__content { padding-bottom: 24px; }
  #responsiveHero h1 { font-size: 1.86rem; }
  #responsiveHero .responsive-hero__copy { font-size: .84rem; }
}

/* Keep the homepage header icon unmistakably a three-line menu control.
   Earlier responsive rules collapse the spans in some tablet states. */
@media (max-width: 1199.98px) {
  body.homepage .main-nav .mobile-menu-toggle {
    display: inline-flex !important;
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-left: auto !important;
    padding: 0 !important;
  }

  body.homepage .main-nav .mobile-menu-toggle-line {
    position: static !important;
    display: block !important;
    width: 21px !important;
    height: 2px !important;
    min-height: 2px !important;
    margin: 0 !important;
    opacity: 1 !important;
    border-radius: 999px !important;
    background: #fff !important;
  }

  body.homepage .main-nav.nav-scrolled .mobile-menu-toggle-line {
    background: #0d2a4e !important;
  }

  body.homepage .main-nav .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  body.homepage .main-nav .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-line:nth-child(2) {
    opacity: 0 !important;
  }

  body.homepage .main-nav .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
}

/* Keep the About title centred despite the older, competing title rules. */
#about > .site-container > .section-heading {
  width: 100% !important;
  margin-inline: auto !important;
  text-align: center !important;
}

#about > .site-container > .section-heading > #mobile-about-title {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

#about > .site-container > .section-heading > .about-subtitle {
  max-width: 720px !important;
  margin: 8px auto 28px !important;
  color: var(--red) !important;
  font-size: clamp(.92rem, 1.55vw, 1.12rem) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

/* Mobile only: constrain video width */
@media (max-width: 767.98px) {
  #about .about-video-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto 0 !important;
    justify-self: center !important;
    align-self: start !important;
  }
}

#about .about-video {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 16px !important;
}

/* Tablet & desktop: video fills full column */
@media (min-width: 768px) {
  #about .about-video-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
    align-items: stretch !important;
    align-self: stretch !important;
  }
}

/* Preserve the original two-column About composition on tablets and compact
   desktops; only phone widths collapse this content into one column. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #about .about-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    gap: 28px !important;
    align-items: stretch !important;
  }

  #about .about-paragraph {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #about .about-video-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
    align-items: stretch !important;
    align-self: stretch !important;
  }

  #about .vision-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #about .mission-card {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

@media (min-width: 768px) {
  #about > .site-container > .section-heading > #mobile-about-title {
    white-space: nowrap !important;
    font-size: clamp(1.35rem, 2.7vw, 2.1rem) !important;
  }
}

/* The tablet artwork already contains the approved natural blue hospital
   scene. Only retain a faint wash for white-text contrast at 1000px-class
   screens; desktop and phone treatments intentionally remain unchanged. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #responsiveHero.responsive-hero {
    background-image:
      linear-gradient(90deg, rgba(4, 28, 56, .06) 0%, rgba(5, 36, 70, .015) 48%, rgba(5, 36, 70, 0) 70%, rgba(5, 36, 70, 0) 100%) !important,
      url('../assets/images/home-hero-original-face-hd.png') !important;
  }

  #responsiveHero .responsive-hero__visual::after {
    background: linear-gradient(90deg, rgba(4, 28, 56, .06) 0%, rgba(5, 36, 70, .015) 48%, rgba(5, 36, 70, 0) 70%, rgba(5, 36, 70, 0) 100%) !important;
  }

  /* Let the slogan copy determine its own height.  The legacy 992px rule
     assigned short pixel heights to these lines, which cut off the author
     detail near the bottom of the strip. */
  .slogan-banner.slogan-strip {
    min-height: 350px !important;
    height: auto !important;
    padding-block: 20px !important;
  }

  .slogan-layout-new,
  .slogan-layout-new .slogan-content-new {
    min-height: 0 !important;
    height: auto !important;
  }

  .slogan-layout-new .slogan-content-new {
    padding-block: 26px !important;
    overflow: visible !important;
  }

  .slogan-strip .slogan-typed,
  .slogan-strip .slogan-content-new h2,
  .slogan-strip .slogan-author-new h3,
  .slogan-strip .slogan-subtitle,
  .slogan-strip .slogan-author-new p {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .slogan-layout-new .slogan-author-new {
    margin-top: 18px !important;
    padding-bottom: 4px !important;
  }
}

@media (max-width: 767.98px) {
  #about > .site-container > .section-heading > #mobile-about-title {
    white-space: normal !important;
    font-size: clamp(1.35rem, 6vw, 1.8rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #responsiveHero .responsive-hero__button { transition: none; }
}

@media (min-width: 900px) and (max-width: 1199.98px) {
  #responsive-hero-title {
    font-family: "Google Sans", sans-serif !important;
    font-weight: 500 !important;
  }
}

/* Shared compact-navigation treatment.  The floating white capsule is used
   throughout the responsive range so phones and tablets don't fall back to
   different, undersized headers. */
@media (max-width: 1269.98px) {
  #cadfNavbar,
  #cadfNavbar.cadf-scrolled {
    top: clamp(18px, 7.5vw, 34px) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid rgba(214, 224, 235, .86) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 9px 24px rgba(5, 37, 72, .17) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  #cadfNavbar .cadf-container {
    min-height: 64px !important;
    padding: 0 25px 0 29px !important;
    gap: 16px !important;
  }

  #cadfNavbar .cadf-brand {
    max-width: calc(100% - 64px) !important;
    padding: 0 !important;
  }

  #cadfNavbar .cadf-logo {
    width: auto !important;
    height: 48px !important;
    max-height: 48px !important;
    object-position: left center !important;
  }

  #cadfNavbar .cadf-toggle {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    gap: 5px !important;
    border-radius: 50% !important;
  }

  #cadfNavbar .cadf-line,
  #cadfNavbar.cadf-scrolled .cadf-line {
    width: 25px !important;
    height: 2.5px !important;
    flex-basis: 2.5px !important;
    background: #17212b !important;
  }

  #cadfNavbar .cadf-menu {
    top: calc(100% + 12px) !important;
  }
}

/* Match the reference's saturated blue, softly blended lower hero area on
   every responsive layout. The top of the hospital image remains clear. */
@media (max-width: 1199.98px) {
  #responsiveHero.responsive-hero {
    background: #07346e !important;
  }

  #responsiveHero .responsive-hero__visual::after {
    background: linear-gradient(
      to bottom,
      rgba(7, 52, 110, 0) 0%,
      rgba(8, 57, 116, 0) 55%,
      rgba(10, 62, 126, .15) 70%,
      rgba(8, 57, 118, .60) 85%,
      #07346e 100%
    ) !important;
  }
}

@media (max-width: 379.98px) {
  #cadfNavbar,
  #cadfNavbar.cadf-scrolled {
    left: 10px !important;
    right: 10px !important;
  }

  #cadfNavbar .cadf-container {
    padding-inline: 20px !important;
  }

  #cadfNavbar .cadf-logo {
    height: 44px !important;
    max-height: 44px !important;
  }
}