/* =========================================================
   HEADER VISUAL EFFECTS (INDEX.HTML PARITY)
   ========================================================= */
.logo-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 40px !important;
}

.header-top {
  background: #8e09a8c2 !important;
}

header {
  box-shadow:
    0 6px 18px rgba(233, 30, 99, 0.25),
    0 3px 8px rgba(106, 27, 154, 0.35) !important;
}

header .text-sm {
  letter-spacing: 0.3px !important;
}

header h1 {
  color: #db2777 !important;
  font-size: 1.875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.025em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 6px rgba(233, 30, 99, 0.35) !important;
}


header nav {
  background-color: #59016b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

header nav>ul {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  list-style: none !important;
}

header nav>ul>li>a {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-decoration: none !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
}

header nav>ul>li>a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -6px !important;
  width: 0 !important;
  height: 2px !important;
  background: linear-gradient(to right, #f48fb1, #e91e63) !important;
  transition: width 0.3s ease !important;
}

header nav>ul>li>a:hover::after {
  width: 100% !important;
}

header img {
  transition: transform 0.3s ease !important;
}

header img:hover {
  transform: scale(1.05) !important;
}

nav ul li {
  position: relative;
}

/* hide dropdown */
nav ul li .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #59016b;
  min-width: 220px;
  display: none;
  padding: 8px 0;
  border-radius: 6px;
  z-index: 9999;
}

/* dropdown links */
nav ul li .dropdown li a {
  display: block;
  padding: 8px 16px;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}

/* hover effects */
nav ul li .dropdown li a:hover {
  background-color: #7a3db8;
  color: #ffd700;
}

/* show on hover */
nav ul li.has-dropdown:hover .dropdown {
  display: block;
}

/* smooth animation */
nav ul li .dropdown {
  animation: fadeDown 0.25s ease;
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   MOBILE NAV PANEL — LIGHT THEME
   ---------------------------------------------------------
   Light container, close button pinned to the right, and the
   dropdown "+" replaced by a chevron in a soft pill at the
   end of the row. Everything here is CSS-only so all pages
   pick it up from the shared markup without edits.
   ========================================================= */

:root {
  --posh-panel-bg: #ffffff;
  --posh-panel-tint: #faf5fd;
  --posh-ink: #3d0a4a;
  --posh-ink-soft: #6b4a76;
  --posh-accent: #a3129c;
  --posh-line: #efe4f4;
}

/* Backdrop */
#mobileMenu {
  background: rgba(43, 0, 47, 0.45) !important;
  backdrop-filter: blur(2px);
}

/* The panel itself */
#mobilePanel {
  width: 300px !important;
  max-width: 86vw;
  background: var(--posh-panel-bg) !important;
  color: var(--posh-ink) !important;
  padding: 0 !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 8px 0 32px rgba(43, 0, 47, 0.28);
  display: flex;
  flex-direction: column;
}

/* ---- Panel header: logo left, close button right ---- */
#mobilePanel > .flex:first-child {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 !important;
  padding: 14px 16px;
  background: var(--posh-panel-tint);
  border-bottom: 1px solid var(--posh-line);
  gap: 12px;
}

/* The logo must not stretch and push the close button off-centre */
#mobilePanel > .flex:first-child img {
  height: 40px;
  width: auto;
  flex: 0 0 auto;
}

/* Close button — a round tinted target at the far right.
   The generic full-width rule below must not touch it. */
#mobilePanel #closeMenu {
  width: 36px !important;
  height: 36px;
  flex: 0 0 auto;
  margin-left: auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  font-size: 22px !important;
  line-height: 1;
  color: var(--posh-accent) !important;
  background: #ffffff !important;
  border: 1px solid var(--posh-line) !important;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(43, 0, 47, 0.12);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#mobilePanel #closeMenu:hover,
#mobilePanel #closeMenu:focus-visible {
  background: var(--posh-accent) !important;
  color: #ffffff !important;
  transform: rotate(90deg);
}

/* ---- Nav list ---- */
#mobilePanel > ul {
  margin: 0 !important;
  padding: 6px 10px 24px !important;
  list-style: none;
}

#mobilePanel > ul > li {
  border-bottom: 1px solid var(--posh-line) !important;
}

#mobilePanel > ul > li:last-child {
  border-bottom: 0 !important;
}

/* Top-level links & dropdown buttons */
#mobilePanel a,
#mobilePanel button {
  width: 100%;
  display: block;
  padding: 13px 10px;
  color: var(--posh-ink) !important;
  background: none;
  border: none;
  border-radius: 8px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow: none;
  filter: none;
  animation: none;
  transition: background 0.2s ease, color 0.2s ease;
}

#mobilePanel a:hover,
#mobilePanel button:hover,
#mobilePanel a:focus-visible {
  background: var(--posh-panel-tint);
  color: var(--posh-accent) !important;
}

/* ---- Dropdown toggle: chevron in a soft pill at the end ---- */
.dropdown-toggle {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}

/* The markup ships a literal "+" inside the span. Hide the glyph
   and draw a chevron instead, so no page markup has to change. */
.dropdown-toggle span {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  border-radius: 50%;
  background: var(--posh-panel-tint);
  border: 1px solid var(--posh-line);
  transition: transform 0.3s ease, background 0.2s ease, border-color 0.2s ease;
}

.dropdown-toggle span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--posh-accent);
  border-bottom: 2px solid var(--posh-accent);
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Open state: chevron points up */
.dropdown-toggle.active span {
  transform: rotate(180deg);
  background: var(--posh-accent);
  border-color: var(--posh-accent);
}

.dropdown-toggle.active span::before {
  border-color: #ffffff;
}

.dropdown-toggle.active {
  color: var(--posh-accent) !important;
}

/* ---- Sub-menu: its own light container ---- */
.mobile-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  margin: 0 0 0 6px;
  padding-left: 0;
  border-left: 0;
  list-style: none;
}

.mobile-dropdown.open {
  max-height: 1400px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.mobile-dropdown li {
  border-bottom: 0 !important;
}

.mobile-dropdown li a {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 9px 12px !important;
  text-transform: none;
  color: var(--posh-ink-soft) !important;
  border-radius: 6px;
}

.mobile-dropdown li a:hover {
  background: #ffffff !important;
  color: var(--posh-accent) !important;
}

/* Give the open sub-list a tinted container of its own */
.mobile-dropdown.open {
  background: var(--posh-panel-tint);
  border: 1px solid var(--posh-line);
  border-radius: 10px;
  padding: 6px;
}


/* From Uiverse.io by StealthWorm */

/* From Uiverse.io by MuhammadHasann */
button {
  position: relative;
  padding: 10px 25px;
  background: #fdfdfd;
  font-size: 13px;
  font-weight: 500;
  color: #96034c;
  cursor: pointer;
  border: 1px solid #7a3300;
  border-radius: 50px;
  filter: drop-shadow(2px 2px 3px rgba(233, 0, 0, 0.2));

  animation: wind 1s linear infinite;

}

button:hover {
  border: 1px solid #ff6c04;
  background: #b90b76;
  color: white;
  animation: wind 2s ease-in-out infinite;
}

@keyframes wind {
  0% {
    background-position: 0% 50%;
  }

  0% {
    background-position: 50% 100%;
  }

  0% {
    background-position: 0% 50%;
  }
}

.icon-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  transform-origin: 0 0;
  transform: rotate(10deg);
  transition: all 0.5s ease-in-out;
  filter: drop-shadow(2px 2px 3px rgba(255, 255, 255, 0.3));
}

button:hover .icon-1 {
  animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite;
  transform: rotate(10deg);
}

@keyframes slay-1 {
  0% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(10deg);
  }
}

.icon-2 {
  position: absolute;
  top: 0;
  left: 25px;
  width: 12px;
  transform-origin: 50% 0;
  transform: rotate(10deg);
  transition: all 1s ease-in-out;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
}

button:hover .icon-2 {
  animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
  transform: rotate(0);
}

@keyframes slay-2 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(0);
  }
}

.icon-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  transform-origin: 50% 0;
  transform: rotate(-5deg);
  transition: all 1s ease-in-out;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
}

button:hover .icon-3 {
  animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
  transform: rotate(0);
}

@keyframes slay-3 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0);
  }
}

.appt-button {
  --primary: #ff5569;
  --neutral-1: #f7f8f7;
  --neutral-2: #e7e7e7;
  --radius: 14px;
  cursor: pointer;
  border-radius: var(--radius);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border: none;
  box-shadow: 0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2), 0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 5px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  min-width: 130px;
  padding: 12px;
  height: 38px;
  font-family: var(--posh-font);
  font-size: 13px;
  font-weight: 600;
  background: var(--neutral-1);
}

.appt-button:hover {
  transform: scale(1.02);
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3), 0 15px 30px rgba(0, 0, 0, 0.3), 0 10px 3px -3px rgba(0, 0, 0, 0.04);
}

.appt-button:active {
  transform: scale(1);
}

.appt-button:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 2.5px solid transparent;
  background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box, linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45)) border-box;
  z-index: 0;
  transition: all 0.4s ease;
}

.appt-button:hover::after {
  transform: scale(1.05, 1.1);
  box-shadow: inset 0 -1px 3px 0 rgba(244, 143, 177, 1);
}

.appt-button::before {
  content: "";
  inset: 7px 6px 6px 6px;
  position: absolute;
  background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
  border-radius: 30px;
  filter: blur(0.5px);
  z-index: 2;
}

.appt-button .ab-outline {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  inset: -2px -3.5px;
}

.appt-button .ab-outline::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 180deg, transparent 60%, white 80%, transparent 100%);
  animation: ab-spin 2s linear infinite;
  animation-play-state: paused;
}

@keyframes ab-spin {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

.appt-button:hover .ab-outline {
  opacity: 1;
}

.appt-button:hover .ab-outline::before {
  animation-play-state: running;
}

.appt-button .ab-state {
  padding-left: 29px;
  z-index: 2;
  display: flex;
  position: relative;
}

.appt-button .ab-state p {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.appt-button .ab-state .ab-icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: scale(1.25);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.appt-button:hover .ab-state--default .ab-icon {
  transform: rotate(45deg) scale(1.25);
}

.appt-button .ab-state--sent {
  display: none;
}

.appt-button:focus .ab-state--default {
  position: absolute;
}

.appt-button:focus .ab-state--sent {
  display: flex;
}

.appt-button .ab-state p span {
  display: block;
  opacity: 0;
  color: #000;
  animation: ab-slideDown 0.8s ease forwards calc(var(--i)*0.03s);
}

.appt-button:hover .ab-state p span {
  opacity: 1;
  animation: ab-wave 0.5s ease forwards calc(var(--i)*0.02s);
}

@keyframes ab-wave {
  30% {
    opacity: 1;
    transform: translateY(4px);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px);
    color: var(--primary);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ab-slideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px) rotate(-90deg);
    color: var(--primary);
    filter: blur(5px);
  }

  30% {
    opacity: 1;
    transform: translateY(4px);
    filter: blur(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   HEADER SHELL — branding row, social icons, top info bar
   (moved out of the per-page inline <style> blocks so every
    page shares the exact same approved header appearance)
   ========================================================= */

header {
  box-shadow:
    0 6px 18px rgba(233, 30, 99, 0.25),
    0 3px 8px rgba(106, 27, 154, 0.35);
}

header .text-sm {
  letter-spacing: 0.3px;
}

/* Branding row: logo — hospital name — accreditation logo */
.logo-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.header-top {
  background: #8e09a8c2;
}

.top-row {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin: 0 auto;
  max-width: 1200px;
}

/* Scrollable departments dropdown */
.dept-dropdown {
  max-height: 320px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.dept-dropdown::-webkit-scrollbar {
  width: 4px;
}

.dept-dropdown::-webkit-scrollbar-track {
  background: #4b1d6b;
}

.dept-dropdown::-webkit-scrollbar-thumb {
  background: #f48fb1;
  border-radius: 4px;
}

/* Smooth fade mask so the ambulance gif blends into the header bg */
.header-ambulance-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
}

.header-ambulance-wrap .header-ambulance {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%, black 78%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 22%, black 78%, transparent 100%);
}

/* Social icon row (From Uiverse.io by jolprince_5263) */
.card:hover {
  animation: ease-out 5s;
}

.card ul {
  padding: 0px;
  display: flex;
  list-style: none;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: row;
}

.card ul li {
  cursor: pointer;
}

.social {
  height: 40px;
  width: 40px;
  display: block;
  margin: auto;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  color: #ffffff !important;
}

.social:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  color: #ffffff !important;
}

.facebook {
  background: #065397;
}

.instagram {
  background: radial-gradient(circle at 30% 107%, #af036d 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.youtube {
  background: red;
}

.whatsapp {
  background: #25D366;
}

.emergency-icon {
  height: 72px;
  width: auto;
}

/* Phone numbers in the top info bar. This was an inline style on the
   element, which made the responsive rules below impossible to apply
   without !important. Values are the approved ones. */
.header-call-now {
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
}

/* =========================================================
   HEADER RESPONSIVE BEHAVIOUR
   ========================================================= */
@media (max-width: 1024px) {

  /* ---- Shared below desktop: chrome that is the same on
     phone and tablet. The bar's *arrangement* differs, so it
     lives in the two range blocks further down. ---- */

  /* Social icons — compact row */
  .card ul {
    gap: 8px;
    margin-bottom: 2px;
  }

  .social {
    height: 30px;
    width: 30px;
    font-size: 15px;
    line-height: 30px;
  }

  /* Hamburger button */
  #menuBtn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 22px !important;
    padding: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    cursor: pointer;
    line-height: 1;
    width: 38px;
    height: 38px;
  }

  /* Ambulance gif — the "Ambulance Service" label is dropped */
  header img[alt="Ambulance Service"] {
    height: 30px !important;
  }

  header img[alt="Ambulance Service"] + span {
    display: none !important;
  }



  /* ---- BRANDING ROW ---- */
  header .bg-white {
    padding: 10px 16px !important;
  }

  .logo-header {
    gap: 12px !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .logo-header > a:first-child img,
  .logo-header > a:first-child {
    flex-shrink: 0;
  }

  .logo-header > a:first-child img {
    height: 45px !important;
    width: auto !important;
  }

  .logo-header h1 {
    line-height: 1.3 !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .logo-header > img:last-child {
    height: 40px !important;
    width: auto !important;
    flex-shrink: 0;
  }

  /* Hide desktop nav — both phone and tablet use the panel */
  header nav {
    display: none !important;
  }
}

/* =========================================================
   TABLET (768px - 1024px) — TWO COMPACT ROWS
   ---------------------------------------------------------
   A tablet has plenty of horizontal room, so the phone's
   four-row stack left a tall band of empty purple and pushed
   the page content below the fold. Pack the bar into two
   rows instead:

     row 1   24/7 badge | phone numbers | social icons
     row 2   hamburger  |               | ambulance + appointment

   One row would need roughly 900px, so it would break at the
   768px end of this range — two rows stay stable across it.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {

  header .max-w-7xl.mx-auto.px-4.py-3 {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "emerg phone  social"
      "menu  right  right";
    align-items: center;
    gap: 8px 16px;
    padding: 10px 20px;
  }

  header .max-w-7xl.mx-auto.px-4.py-3 > #menuBtn        { grid-area: menu; justify-self: start; }
  header .max-w-7xl.mx-auto.px-4.py-3 > .card           { grid-area: social; justify-self: end; }
  header .max-w-7xl.mx-auto.px-4.py-3 > div:nth-of-type(2) { grid-area: emerg; justify-self: start; }

  header .max-w-7xl.mx-auto.px-4.py-3 > .header-call-now {
    grid-area: phone;
    justify-self: center;
    text-align: center;
    font-size: clamp(12px, 1.45vw, 14px);
    line-height: 1.4;
  }

  header .max-w-7xl.mx-auto.px-4.py-3 > .flex:last-child {
    grid-area: right;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .emergency-icon {
    height: 44px;
    width: auto;
  }

  /* Branding row can afford real sizes at this width */
  header .bg-white {
    padding: 12px 24px !important;
  }

  .logo-header {
    gap: 20px !important;
  }

  .logo-header > a:first-child img { height: 58px !important; }
  .logo-header > img:last-child    { height: 52px !important; }
  .logo-header h1                  { font-size: 1.25rem !important; }
}

/* =========================================================
   PHONE (≤ 767px) — FOUR STACKED ROWS
   ---------------------------------------------------------
   Explicit grid so the rows land in the approved order and the
   hamburger sits on the bottom row beside the ambulance and the
   Appointment button, even though in the DOM it is the bar's
   first child. A column flex could not do this and also let the
   phone line wrap, because align-items:center sizes each child
   to fit-content, so the long number string overflowed.
   ========================================================= */
@media (max-width: 767px) {

  header .max-w-7xl.mx-auto.px-4.py-3 {
    display: grid !important;
    position: relative;
    grid-template-columns: max-content 1fr max-content;
    grid-template-areas:
      "social . ambulance"
      "phone  phone phone"
      "menu   .     appt";
    align-items: center;
    justify-items: center;
    gap: 8px;
    padding: 10px 12px;
    text-align: center;
  }

  header .max-w-7xl.mx-auto.px-4.py-3 > #menuBtn        { grid-area: menu; justify-self: start; }
  header .max-w-7xl.mx-auto.px-4.py-3 > .card           { grid-area: social; justify-self: start; }
  header .max-w-7xl.mx-auto.px-4.py-3 > .card ul        { flex-wrap: nowrap !important; gap: 6px !important; }
  header .max-w-7xl.mx-auto.px-4.py-3 > .card .social   { height: 26px !important; width: 26px !important; font-size: 13px !important; line-height: 26px !important; }
  header .max-w-7xl.mx-auto.px-4.py-3 > div:nth-of-type(2) { 
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Phone line */
  header .max-w-7xl.mx-auto.px-4.py-3 > .header-call-now {
    grid-area: phone;
    justify-self: stretch;
    width: 100%;
    overflow-wrap: break-word;
    font-size: 12px;
    line-height: 1.4;
  }

  /* Right div has both Ambulance and Appt Button.
     We use display:contents so they can act as separate grid items. */
  header .max-w-7xl.mx-auto.px-4.py-3 > .flex:last-child {
    display: contents;
  }
  
  header .max-w-7xl.mx-auto.px-4.py-3 > .flex:last-child > span {
    grid-area: ambulance;
    justify-self: end;
  }

  header .max-w-7xl.mx-auto.px-4.py-3 > .flex:last-child > a {
    grid-area: appt;
    justify-self: end;
  }

  .emergency-icon {
    height: 36px;
    width: auto;
  }

  .logo-header h1 { font-size: 0.8rem !important; }
}

/* ---- MOBILE (≤ 767px) ---- */
@media (max-width: 767px) {

  header .bg-white {
    padding: 8px 12px !important;
  }

  .logo-header {
    gap: 8px !important;
  }

  .logo-header > a:first-child img {
    height: 38px !important;
  }

  .logo-header h1 {
    font-size: clamp(0.7rem, 2.1vw, 1.05rem) !important;
    line-height: 1.2 !important;
  }

  .logo-header > img:last-child {
    height: 35px !important;
  }

  .social {
    height: 28px;
    width: 28px;
    font-size: 14px;
    line-height: 28px;
  }

  .header-call-now {
    font-size: 11px;
  }

  #menuBtn {
    width: 34px;
    height: 34px;
    font-size: 20px !important;
  }
}

/* ---- SMALL PHONES (≤ 480px) ---- */
@media (max-width: 480px) {

  .logo-header h1 {
    font-size: 0.6rem !important;
  }

  .logo-header > a:first-child img {
    height: 32px !important;
  }

  .logo-header > img:last-child {
    height: 30px !important;
  }

  .logo-header {
    gap: 6px !important;
  }

  .social {
    height: 26px;
    width: 26px;
    font-size: 13px;
    line-height: 26px;
  }

  .header-call-now {
    font-size: 10px;
  }

  #menuBtn {
    width: 32px;
    height: 32px;
    font-size: 18px !important;
  }

  .emergency-icon {
    height: 30px;
  }
}

/* =========================================================
   PAGE-LEVEL OVERFLOW GUARD
   ---------------------------------------------------------
   Entrance animations that slide content in from the right
   briefly push their element past the viewport edge, which
   flashes a horizontal scrollbar on load. The project already
   suppresses this below 1024px (assets/css/mobile-header.css);
   apply the same guard at every width. Nothing is repositioned.
   ========================================================= */
body {
  overflow-x: hidden;
  width: 100%;
}

/* =========================================================
   TOP INFO BAR — SINGLE ROW ON DESKTOP
   ---------------------------------------------------------
   Every page now uses the index.html header, whose social
   icons (40px) and 24/7 badge (72px) are larger than the ones
   the inner pages used to carry. With flex-wrap the row could
   spill onto a second line on those pages. Letting the phone
   line shrink instead keeps it on one row without changing
   the size of any element. Below 1024px the bar deliberately
   stacks into a column, so this only applies above that.
   ========================================================= */
@media (min-width: 1025px) {

  header .max-w-7xl.mx-auto.px-4.py-3 {
    flex-wrap: nowrap;
  }

  header .max-w-7xl.mx-auto.px-4.py-3>.card,
  header .max-w-7xl.mx-auto.px-4.py-3>.flex {
    flex-shrink: 0;
  }

  .header-call-now {
    min-width: 0;
  }
}

/* =========================================================
   APPOINTMENT BUTTON — IMMUNE TO PAGE-LEVEL TEXT RULES
   ---------------------------------------------------------
   Several inner pages set their own font-size on <p>, which
   leaked into the button's label and made it wider there than
   on index.html — squeezing the phone line onto two rows.
   Pin the label to the button's own font-size so the header
   renders identically on every page.
   ========================================================= */
.appt-button .ab-state p,
.appt-button .ab-state p span {
  font-size: inherit;
  line-height: normal;
  margin: 0;
}

/* =========================================================
   SMOOTH IN-PAGE NAVIGATION
   ---------------------------------------------------------
   The nav points at sections on the home page
   (index.html#departmentssection, index.html#clientsgrid).
   Without these the browser hard-jumps to the target, and
   below 1024px the sticky header covers the section heading.
   ========================================================= */
html {
  scroll-behavior: smooth;
}

/* Leave room for the sticky header so a jumped-to section is
   not hidden underneath it. */
:target {
  scroll-margin-top: 16px;
}

@media (max-width: 1024px) {
  :target {
    scroll-margin-top: 96px;
  }
}

/* Readers who ask the OS for less motion get the plain jump. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* =========================================================
   STICKY NAV ROW
   ---------------------------------------------------------
   The whole header sticks to the top of the window. Scrolling
   DOWN slides the top info bar and the branding row up out of
   the way, leaving just the nav row on screen; scrolling UP
   brings them straight back.

   The distance to slide is the combined height of rows 1 + 2,
   measured at runtime and written to --posh-header-shift by
   assets/javascript/site-header.js, so nothing here has to
   hard-code a pixel height.

   Below 1024px the nav row is hidden and the burger takes its
   place, so the collapse is desktop-only - otherwise there
   would be nothing left to see.
   ========================================================= */
@media (min-width: 1025px) {

  header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  /* Only animate once the script has taken over, so the header
     cannot slide about during the first paint. */
  header.posh-sticky-ready {
    transition: transform 0.35s ease;
    will-change: transform;
  }

  header.posh-collapsed {
    transform: translateY(calc(var(--posh-header-shift, 0px) * -1));
  }

  /* An anchored section must clear the nav row that stays behind. */
  :target {
    scroll-margin-top: calc(var(--posh-nav-height, 64px) + 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  header.posh-sticky-ready {
    transition: none;
  }
}

/* ---------------------------------------------------------
   The header needs an opaque base now that page content
   scrolls underneath it. Row 1's purple is rgba(...,0.76) and
   the branding row's bg-white utility is not in the compiled
   CSS, so both were being composited straight onto the white
   page canvas. Painting that same white on the header keeps
   the colours pixel-identical and stops the bleed-through.
   --------------------------------------------------------- */
header {
  background-color: #ffffff;
}

/* =========================================================
   GLOBAL LAYOUT STANDARDISATION (1200px max-width)
   Applied to ALL pages via site-header.css.
   Ensures every content section has uniform left/right
   margins matching the index.html reference layout.
   ========================================================= */

/* Standard container class — use on any wrapper that
   needs the site-wide 1200px centred column.              */
.posh-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* Override the Bootstrap / utility .container class that
   many pages define inline so it caps at 1200px too.      */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px !important;
  }
}

/* Contact page */
.contact-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Founder / Achievements page */
.founder-section {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Articles page */
.article-container,
.articles-page {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: auto;
  box-sizing: border-box;
}

/* Health tips page */
.ht-page,
.ht-grid-wrap {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Facilities page hero */
.hero-wrap {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Patient stories */
.patient-story {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: auto;
  box-sizing: border-box;
}

/* Gallery / Blog section */
.blog-section,
.clients-section {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Footer container */
.footer-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Facilities page */
.facilities-section,
.facilities-container,
.package-images {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Our Team page */
.our-team-section,
.team-container,
.leadership-section,
.dept-team-section {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Achievements page */
.awards-container,
.certificates-section,
.mv-award-section {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Department pages — emergency hero is full-bleed, 
   but the .container inside should already be 1200px
   via the @media rule above. */

/* Remove legacy container effect around the appointment button link */
header a[href*="appointment.html"] {
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  display: inline-block !important;
}
header a[href*="appointment.html"]:hover {
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
}

/* =========================================================
   GLOBAL BUTTON TWEAKS
   ========================================================= */

/* 1. Reduce button sizes globally */
.btn, .btn-primary, .btn-secondary, .btn-appoint, .appointment-btn, .whatsapp-btn, .ortho-appointment-btn {
  padding: 8px 18px !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px; /* space between text and existing icon */
}

/* 2. Animate existing icons (if any) on hover */
.btn i, .btn-primary i, .btn-secondary i, .btn-appoint i, .appointment-btn i, .whatsapp-btn i, .ortho-appointment-btn i {
  transition: transform 0.3s ease !important;
}

.btn:hover i, .btn-primary:hover i, .btn-secondary:hover i, .btn-appoint:hover i, .appointment-btn:hover i, .whatsapp-btn:hover i, .ortho-appointment-btn:hover i {
  transform: translateX(6px) !important;
}

/* 3. Add sliding arrow for buttons without an <i> icon */
.btn:not(:has(i))::after, 
.btn-primary:not(:has(i))::after, 
.btn-secondary:not(:has(i))::after, 
.btn-appoint:not(:has(i))::after, 
.whatsapp-btn:not(:has(i))::after, 
.ortho-appointment-btn:not(:has(i))::after {
  content: '\f061'; /* FontAwesome right arrow */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  display: inline-block;
  opacity: 0;
  max-width: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
}

.btn:not(:has(i)):hover::after, 
.btn-primary:not(:has(i)):hover::after, 
.btn-secondary:not(:has(i)):hover::after, 
.btn-appoint:not(:has(i)):hover::after, 
.whatsapp-btn:not(:has(i)):hover::after, 
.ortho-appointment-btn:not(:has(i)):hover::after {
  opacity: 1;
  max-width: 20px;
  margin-left: 6px;
  transform: translateX(0);
}

/* =========================================================
   USER FEEDBACK FIXES (Global)
   ========================================================= */

/* 1. Reduce .pa-btn (Explore More) size */
.pa-btn {
  padding: 8px 18px !important;
  font-size: 14px !important;
}

/* 2. Make department cards smaller on mobile */
@media (max-width: 768px) {
  .dept-item {
    padding: 12px 10px !important;
    gap: 10px !important;
  }
  .dept-item .icon-box {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
  .dept-item .icon-box img {
    width: 28px !important;
    height: 28px !important;
  }
  .dept-item .dept-name {
    font-size: 0.75rem !important;
    margin: 0 0 4px !important;
  }
  .dept-item p.dept-desc {
    font-size: 0.7rem !important;
    margin: 0 0 8px !important;
    line-height: 1.4 !important;
  }
  .dept-item .dept-explore {
    font-size: 0.7rem !important;
    padding: 4px 6px 4px 10px !important;
  }
  .dept-item .dept-explore-arr {
    width: 18px !important;
    height: 18px !important;
  }
}

/* 3. Make video background text white in Consultants section */
.consultants-section .section-header h2,
.consultants-section .section-header h2::after,
.consultants-section .section-header p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}

/* 4. Reduce APPOINTMENT button size on mobile */
@media (max-width: 768px) {
  .appt-button {
    min-width: 100px !important;
    padding: 6px 10px !important;
    height: 30px !important;
    font-size: 10px !important;
  }
  .appt-button .ab-state {
    padding-left: 20px !important;
  }
  .appt-button .ab-icon {
    transform: scale(1) !important;
  }
  .appt-button:hover .ab-state--default .ab-icon {
    transform: rotate(45deg) scale(1) !important;
  }
}

/* 5. Move profile image to top when stacked on mobile */
@media (max-width: 1200px) {
  .profile-card {
    display: flex !important;
    flex-direction: column !important;
  }
  .profile-card .profile-image-wrapper {
    order: -1 !important;
    margin-bottom: 20px;
  }
}