/*
  Custom overrides and enhancements for Huenic Care.

  This stylesheet supplements the base style.css with
  refinements requested by the client. It enlarges the logo for better
  visibility, adds slider and detail layouts for the Services page,
  highlights the active service selection, and introduces icons for
  feature boxes. Media queries ensure the design remains responsive.
*/

/* Increase the logo size across the site. Use a higher specificity
   selector so this rule overrides the base style.css definition. */
header .navbar .logo img {
  height: 80px;
  margin-right: 0.5rem;
}
@media (max-width: 600px) {
  header .navbar .logo img {
    height: 60px;
  }
}

/* ------------------------------------------------------------------
   Typography and buttons modernisation
   ------------------------------------------------------------------
   Import a contemporary sans‑serif font (Poppins) and apply it site‑wide.
   Also refine the appearance of buttons to make them feel cohesive and
   tactile across all pages. The button styles here override any
   defaults defined in the base stylesheet. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

.btn {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border-radius: 6px;
  background-color: var(--secondary-color);
  color: var(--light-text);
  font-weight: 500;
  transition: background var(--transition-fast);
  text-align: center;
}

.btn:hover {
  background-color: var(--accent-color);
  color: var(--light-text);
}

/* Hide the slider navigation arrows and dots on the home page hero slider.
   The client requested a cleaner look without navigation controls. */
/* Show slider navigation controls on the home page slider.  The previous
   rule hid these elements, but the client now requests visible arrows
   and dots for manual navigation. */
/* .slider-controls { display: none !important; } */

/* ------------------------------------------------------------------
   Who We Are slider styles
   ------------------------------------------------------------------ */
.who-slider {
  position: relative;
  overflow: hidden;
}
.who-slide {
  display: none;
  position: relative;
}
.who-slide.active {
  display: block;
}
.who-slide img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}
.who-slide .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 62, 113, 0.5);
  border-radius: var(--border-radius);
}
.who-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--light-text);
  text-align: center;
  padding: 1rem;
}
.who-buttons .btn {
  margin: 0.3rem;
}
.who-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}
.who-controls .arrow {
  cursor: pointer;
  padding: 0.5rem;
  color: var(--primary-color);
}

/* Footer logo styling */
.footer-logo {
  height: 60px;
  margin-bottom: 0.5rem;
}

/* Reduce the size of the Apply Business Unit button in the footer on
   smaller screens to achieve a balanced appearance next to the logo. */
.footer-top .apply-business-wrapper .btn {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
}

/* Ensure footer text is neatly aligned and constrained to a reasonable
   width so that long addresses and contact details wrap gracefully
   without stretching across the entire viewport. */
footer p {
  text-align: center;
  margin: 0.2rem auto;
  max-width: 90%;
}

/* Round the corners of the off‑canvas mobile menu for a softer look */
/* Override the off‑canvas mobile menu to adopt the new background and curved edges
   on all four corners. */
.mobile-menu {
  background-color: #F0F5F5 !important;
  border-radius: 1rem;
}

/* Ensure hero header images scale proportionally without cropping on any device */
.hero {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain !important;
}

/* Reduce the vertical padding around the navigation bar to remove
   excessive whitespace above and below the header across all pages. */
header .navbar {
  padding: 0.5rem 1rem;
}
@media (max-width: 600px) {
  header .navbar {
    padding: 0.5rem 0.75rem;
  }
}

/* Horizontal slider container for navigating services on the Services page */
.services-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 1rem 0;
  margin-bottom: 2rem;
}
.services-slider::-webkit-scrollbar {
  height: 6px;
}
.services-slider::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}
.services-slider .service-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: var(--secondary-color);
  color: var(--light-text);
  padding: 0.6rem 1rem;
  border-radius: var(--border-radius);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.services-slider .service-item a {
  color: var(--light-text);
  text-decoration: none;
}
.services-slider .service-item:hover {
  background: var(--accent-color);
}
/* Style for the currently active service name */
.services-slider .service-item.active {
  background: var(--primary-color);
  color: var(--light-text);
}

/* Service detail sections */
.service-detail {
  /* Apply padding on all sides and remove the bottom border.  The
     background colour and rounded corners create a card‑like panel
     reminiscent of the provided design. */
  padding: 2rem;
  border-bottom: none;
  background: #F5FBFF;
  border-radius: 1rem;
  margin-bottom: 2rem;
}
.service-detail:last-of-type {
  border-bottom: none;
}
.service-detail h3 {
  /* Adjust spacing below the heading to allow the tagline to sit
     closer.  Increase the font weight slightly for emphasis. */
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--primary-color);
}

/* Tagline text positioned below service headings.  A smaller font and
   secondary colour differentiate it from the heading while calling
   out the essence of each service. */
.service-detail .service-tagline {
  /* Hide the tagline text to match the reference design.  Keeping the
     element in the DOM allows easy reintroduction in the future. */
  display: none;
}
.service-detail .service-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  /* Insert a prominent dividing line above the content area to separate
     the introductory text from the feature boxes.  This reflects
     the horizontal rule in the reference design without requiring
     additional markup. */
  border-top: 3px solid var(--primary-color);
  padding-top: 1.5rem;
}
.service-detail .text {
  flex: 1 1 60%;
}
.service-detail .text .features {
  display: grid;
  /* Force a two‑column grid on larger screens. On small screens the grid
     naturally collapses into one or two columns via the media query below. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .service-detail .text .features {
    grid-template-columns: 1fr;
  }
}
.service-detail .text .feature-box {
  position: relative;
  background: #ffffff;
  border-radius: var(--border-radius);
  /* Add a light border to delineate each feature card similar to the
     provided design. */
  border: 1px solid #e0e9ff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  padding: 1.2rem 1.2rem 1.2rem 3.5rem;
}
.service-detail .text .feature-box h4 {
  margin-bottom: 0.5rem;
  color: var(--primary-color);
  font-size: 1.05rem;
}
.service-detail .text .feature-box ul {
  list-style: disc;
  margin-left: 1rem;
  font-size: 0.95rem;
}
/* Insert icons before each feature box. Font Awesome icons are used via
   Unicode. If your deployment uses a different icon set, adjust the
   codes accordingly. */
.service-detail .text .feature-box::before {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.3rem;
  /* Use the primary colour for the circle background and white for the icon to
     mirror the provided icons. */
  background: var(--primary-color);
  color: #ffffff;
}
.service-detail .text .feature-box:nth-of-type(1)::before { content: "\f5a4"; }
.service-detail .text .feature-box:nth-of-type(2)::before { content: "\f21e"; }
.service-detail .text .feature-box:nth-of-type(3)::before { content: "\f487"; }
.service-detail .text .feature-box:nth-of-type(4)::before { content: "\f70c"; }

.service-detail .image {
  flex: 1 1 35%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.service-detail .image img {
  width: 100%;
  max-width: 380px;
  border-radius: var(--border-radius);
}
.service-detail .service-footer {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.service-detail .service-footer select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
}
.service-detail .service-footer button {
  padding: 0.6rem 1rem;
  background: var(--secondary-color);
  color: var(--light-text);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.service-detail .service-footer button:hover {
  background: var(--accent-color);
}

/* Breadcrumb navigation for secondary pages */
.page-nav {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: var(--primary-color);
}
.page-nav a {
  color: var(--primary-color);
  text-decoration: none;
}
.page-nav span {
  color: var(--secondary-color);
}
@media (max-width: 768px) {
  .service-detail .service-content {
    flex-direction: column;
  }
  .service-detail .image {
    order: -1;
  }
}

/* --------------------------------------------------------------
   Specialities slider for the home page
   --------------------------------------------------------------
   The "Our Specialities" section on the home page is rendered
   as a horizontally scrollable slider. Each speciality item
   occupies a fixed width on larger screens and will stack on
   narrow devices. Scroll snapping is enabled to create a smooth
   swiping experience on touch devices. Customize the width
   values below to adjust how many cards appear at once.  */

.specialities-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-top: 1rem;
}

/* ----------------------------------------------------------------
   Home slider control positioning
   ----------------------------------------------------------------
   Align the navigation arrows to the left and right centre of the
   hero slider and position the dots along the bottom. This override
   supersedes the base slider-control styles defined in style.css.
*/
.slider-controls {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.slider-controls .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.2rem;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
}
.slider-controls .arrow.prev {
  left: 1rem;
}
.slider-controls .arrow.next {
  right: 1rem;
}
.slider-controls .dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  pointer-events: auto;
}

.specialities-slider::-webkit-scrollbar {
  height: 6px;
}

.specialities-slider::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

.speciality-item {
  flex: 0 0 320px;
  background: #ffffff;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
}

.speciality-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.speciality-item .speciality-content {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.speciality-item .speciality-content h3 {
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
  font-size: 1.1rem;
}

.speciality-item .speciality-content p {
  font-size: 0.9rem;
  line-height: 1.4;
  flex-grow: 1;
  margin-bottom: 1rem;
}

.speciality-item .speciality-content a {
  align-self: flex-start;
}

@media (max-width: 600px) {
  .speciality-item {
    flex: 0 0 260px;
  }
  .speciality-item img {
    height: 160px;
  }
}

/* ----------------------------------------------------------------
   Conditions slider for the About page
   ----------------------------------------------------------------
   The conditions section on the about page has been converted into a
   horizontally scrollable slider with arrows. These styles control
   the layout and appearance of the condition cards and navigation.
*/
.conditions-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-top: 1rem;
}
.conditions-slider::-webkit-scrollbar {
  height: 6px;
}
.conditions-slider::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}
.condition-card {
  flex: 0 0 280px;
  background: #ffffff;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
}
.condition-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.condition-card .card-content {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.condition-card .card-content h3 {
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}
.condition-card .card-content p {
  font-size: 0.9rem;
  line-height: 1.4;
}
.conditions-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}
.conditions-controls .arrow {
  cursor: pointer;
  padding: 0.5rem;
  color: var(--primary-color);
}

/* -----------------------------------------------------------------
   Sticky CTA overrides
   -----------------------------------------------------------------
   Transform the sticky call‑to‑action bar into individually sliding
   buttons. Each CTA item slides left when hovered or focused,
   revealing its label. The old toggle arrow is hidden because
   expansion is now controlled at the item level. The sidebar
   background colour has been updated to the requested sky blue (#89CFF0).
*/
.cta-sidebar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  overflow: visible;
  z-index: 999;
}

.cta-toggle {
  display: none;
}


/* -----------------------------------------------------------------
   Call‑center footer layout
   -----------------------------------------------------------------
   Use flexbox to align the logo and Apply Business Unit button on a
   single line. On small screens the button appears above the logo.
*/
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.footer-top .footer-logo-wrapper,
.footer-top .apply-business-wrapper {
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  /* In mobile view keep the logo on the left and the business unit
     button on the right. Prevent stacking to maintain a clean,
     professional footer layout. */
  .footer-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .footer-top .footer-logo-wrapper {
    order: 1;
  }
  .footer-top .apply-business-wrapper {
    order: 2;
  }
}

/* -----------------------------------------------------------------
   Specialities slider controls
   -----------------------------------------------------------------
   Position the navigation arrows on either side of the specialities
   slider, vertically centred. Provide subtle styling to ensure
   they are obvious but not intrusive. */
.specialities-wrapper {
  position: relative;
}

.specialities-controls {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  pointer-events: none;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
}

.specialities-controls .arrow {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #ffffff;
  color: var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.specialities-controls .arrow:hover {
  background: var(--primary-color);
  color: #ffffff;
}

/* ------------------------------------------------------------------
   Two‑column layout for Business Unit forms
   ------------------------------------------------------------------ */
/* Apply a responsive two‑column grid to the business unit form so
   fields are arranged side‑by‑side on larger screens, but stack on
   mobile devices. Elements that should span the full width (like
   textarea or submit button) occupy two columns using the
   grid‑column property. */
.business-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.business-form-grid input,
.business-form-grid select,
.business-form-grid textarea,
.business-form-grid button {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
.business-form-grid textarea,
.business-form-grid button,
.business-form-grid .full-width {
  grid-column: span 2;
}
@media (max-width: 600px) {
  .business-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   Who We Are section (two columns with image and text)
   ------------------------------------------------------------------ */
 .who-we-are-container {
  /* Use a responsive two‑column grid for the Who We Are section. On
     wider screens the image and text sit side by side; on narrow
     screens they stack vertically. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
 }
 .who-we-are-container .who-image {
  /* Ensure the image spans its grid cell fully */
  width: 100%;
 }
 .who-we-are-container .who-image img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  display: block;
 }
 .who-we-are-container .who-text {
  color: var(--dark-text);
 }
.who-we-are-container .who-text h3 {
  margin-top: 0;
  font-size: 1.75rem;
  color: var(--primary-color);
}
.who-we-are-container .who-text p {
  line-height: 1.6;
  margin-bottom: 1rem;
}
.who-we-are-container .who-text ul {
  margin: 0 0 1rem 1.2rem;
  padding: 0;
  list-style: disc;
}
.who-we-are-container .who-buttons .btn {
  margin-right: 0.5rem;
}
@media (max-width: 768px) {
  .who-we-are-container {
    /* On small screens the two columns stack into a single column */
    grid-template-columns: 1fr;
  }
}

/* Hide the old Who We Are slider on the home page. The legacy
   .who-slider and .who-controls elements remain in the markup for
   backwards compatibility but are visually removed to make room for
   the new two‑column layout. */
#about-overview .who-slider,
#about-overview .who-controls {
  display: none !important;
}

/* --------------------------------------------------------------
   Global image handling
   --------------------------------------------------------------
   Ensure that all standard images scale proportionally without
   cropping on any device. This prevents parts of photographs from
   being clipped on narrow screens. Logos and icons (Font Awesome)
   are vector graphics and are unaffected by this rule. */
img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ------------------------------------------------------------------
   Modern hero slider layout
   ------------------------------------------------------------------ */
/* Make the slider fill most of the viewport height without cropping. */
.slider {
  position: relative;
  overflow: hidden;
  height: 75vh;
}
/* Hide default overlays from the old layout */
.slide .overlay {
  display: none;
}
/* Hide the original absolute positioned slide-content to avoid conflicts */
.slide .slide-content {
  display: none;
}
/* New slide container splits image and text into two columns. */
.slide-inner {
  display: flex;
  height: 100%;
}
/* On larger screens, allocate equal width to the image and content panels */
.slide-image-wrapper,
.slide-text {
  flex: 0 0 50%;
}
/* Ensure images are fully visible across devices without cropping. */
.slide-image-wrapper img {
  width: 100%;
  /* Let images fill the available height on large screens so they balance
     with the text panel. We'll override the height on small screens
     to auto so the image doesn't become overly tall and push the text
     below the viewport. */
  height: 100%;
  object-fit: contain;
}
/* Style the textual panel with a dark overlay for contrast. */
.slide-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  /* Use a light neutral background to contrast with the image. This
     matches the requested #F0F5F5 colour and improves legibility. */
  background: #F0F5F5;
  color: var(--dark-text);
}

/* Brand tagline on each hero slide */
.slide-text .brand-tagline {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--secondary-color);
  margin-bottom: 0.5rem;
}

/* Icons representing associated services within the hero slides */
.slide-text .service-icons {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  font-size: 1.4rem;
  color: var(--primary-color);
}
.slide-text h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.slide-text p {
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
  max-width: 500px;
}
/* Group CTAs on the same row and allow wrapping on smaller screens */
.slide-text .hero-cta-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  /* Stack image above text on small screens */
  .slide-inner {
    flex-direction: column;
  }
  /* Make both panels full width on small screens */
  .slide-image-wrapper,
  .slide-text {
    flex: 1 1 100%;
  }
  .slide-text {
    padding: 1.5rem;
    text-align: center;
  }
  .slide-text h1 {
    font-size: 1.8rem;
  }
  .slide-text p {
    font-size: 1rem;
  }
  /* On small screens allow images to size naturally to maintain aspect
     ratio and avoid excessive white space. */
  .slide-image-wrapper img {
    height: auto;
  }

  /* Allow the hero slider to adapt its height on small screens
     without collapsing completely.  The minimum height is set in
     a separate media query (see below) to preserve visibility.  We
     avoid specifying `!important` here so later rules can override
     these defaults. */
  /* Removed previous `height:auto !important` declarations here to
     prevent the slider from collapsing. */
}

/* ------------------------------------------------------------------
   Sticky CTA modern behaviour
   ------------------------------------------------------------------
   In idle state only the icons are visible. On hover or focus, each
   item expands leftwards to reveal its label. The width is kept
   compact by default for a sleek appearance.
*/
/*
  Override the width of the CTA sidebar to match the compact design.
*/
.cta-sidebar {
  width: 54px;
}
.cta-items {
  display: flex;
  flex-direction: column;
  /* Reduce the vertical gap between CTA buttons for a more compact
     appearance. */
  gap: 0.3rem;
}
.cta-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Reduce the height and width of CTA buttons for a sleeker look. */
  height: 44px;
  width: 54px;
  padding: 0 0.6rem;
  background: #89CFF0;
  color: var(--dark-text);
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  /* Allow overflow so that the sliding label remains visible outside the
     initial container. The transform property animates horizontal
     movement during hover. */
  overflow: visible;
  transition: transform 0.3s ease, width 0.3s ease;
}
.cta-item i {
  font-size: 1.3rem;
  flex-shrink: 0;
}
 /* Ensure labels can be revealed on hover by overriding the base style
    that hides them completely. We set the display to inline‑block so
    they occupy space next to the icon and use opacity to fade them
    in on hover. */
 .cta-item span {
  /* Force the span to be displayed inline so that it can be faded
     in/out on hover. Use !important to override the base CSS that
     hides it (display: none). */
  display: inline-block !important;
  margin-left: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
 }
.cta-item:hover,
.cta-item:focus {
  /* Adjust expanded width proportionally since the default width has
     decreased. */
  width: 165px;
}
/* On hover, enlarge the CTA and slide it left to reveal the label. */
.cta-item:hover,
.cta-item:focus {
  width: 165px;
  transform: translateX(-110px);
}
.cta-item:hover span,
.cta-item:focus span {
  opacity: 1;
}
@media (max-width: 600px) {
  .cta-item {
    height: 38px;
    width: 48px;
  }
  .cta-item:hover,
  .cta-item:focus {
    width: 150px;
    transform: translateX(-102px);
  }
}

/* ------------------------------------------------------------------
   Sticky CTA refinements
   ------------------------------------------------------------------
   Reduce the overall footprint of the CTA sidebar and update the
   background colours.  Earlier iterations used sky blue and pale
   green; however the latest requirements specify a two‑tone
   palette: the sidebar itself should be a soft azure (#90DCFC) and
   each CTA button should use a vibrant cyan (#05AFFF) for its
   background.  These rules override previous declarations via
   !important to ensure consistent colours throughout the site. */
.cta-sidebar {
  background: #90DCFC !important;
  width: 50px !important;
  overflow: visible !important;
}
.cta-items {
  /* reduce the space between CTA buttons for a more compact stack */
  gap: 0.25rem;
}
.cta-item {
  height: 40px;
  width: 50px;
  background: #05AFFF !important;
  color: #ffffff !important;
}
.cta-item i,
.cta-item span {
  color: #ffffff !important;
}

/* ------------------------------------------------------------------
   Hide obsolete Doctors navigation links
   ------------------------------------------------------------------
   Some legacy builds may still include a “Doctors” link in the main
   navigation or mobile menu.  Since the doctors page has been
   deprecated, hide these links entirely using attribute selectors.
*/
nav a[href="doctors.html"],
#mobileMenu a[href="doctors.html"] {
  display: none !important;
}
.cta-item:hover,
.cta-item:focus {
  width: 150px;
  transform: translateX(-100px);
}
@media (max-width: 600px) {
  .cta-item {
    height: 35px;
    width: 45px;
  }
  .cta-item:hover,
  .cta-item:focus {
    width: 135px;
    transform: translateX(-90px);
  }
}

/* ------------------------------------------------------------------
   Additional enhancements (February 2026 design update)
   ------------------------------------------------------------------
   The declarations below implement the latest requests from the
   design brief.  They ensure hero slider content is visible on
   mobile, unify the CTA palette to a darker azure, remove visual
   clutter in the Who We Are slider by replacing images with a solid
   backdrop, expand the Who We Are text container to full width when
   the image is removed, and adjust branch cards to work without
   background photos.  These rules are placed at the end of the
   stylesheet to override earlier definitions.
*/

/* Fix hero slider content visibility on small screens.  On mobile
   devices allow the slide contents to dictate height instead of
   stretching the container to a fixed value.  Provide a minimum
   height so that there is still ample space for text and buttons. */
@media (max-width: 768px) {
  .slide-inner {
    height: auto !important;
  }
  #heroSlider,
  #heroSlider .slide {
    min-height: 450px !important;
  }

  /* Stack the hero slide image and text vertically on small screens.  The
     default horizontal layout leaves insufficient space for the
     content, causing it to disappear.  By changing the flex
     direction to column and giving each section full width, the
     heading, description and buttons remain visible beneath the
     image. */
  .slide-inner {
    flex-direction: column !important;
  }
  .slide-image-wrapper,
  .slide-text {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .slide-text {
    padding: 1.5rem !important;
    text-align: left;
  }
  .slide-image-wrapper img {
    height: auto !important;
    width: 100% !important;
    object-fit: contain !important;
  }
}

/* Update CTA sidebar and items to use the dark azure colour (#0070A3).
   This override ensures the sidebar itself as well as each CTA
   button share the same palette and display white icons and text. */
.cta-sidebar {
  background: #0070A3 !important;
}
/* Use a more specific selector (.cta-sidebar .cta-item) to ensure
   our darker palette overrides previous declarations that also use
   !important on .cta-item. */
.cta-sidebar .cta-item {
  background: #0070A3 !important;
  color: #ffffff !important;
}
.cta-sidebar .cta-item i,
.cta-sidebar .cta-item span {
  color: #ffffff !important;
}

/* Remove photographic backgrounds from the Who We Are slider.  The
   slides now display a soft neutral colour instead of images.
   Additionally, the overlay is made fully transparent so it does not
   darken the new background. */
.who-slide {
  background: #F0F5F5;
}
.who-slide .overlay {
  background: rgba(0, 0, 0, 0);
}

/* When the Who We Are image is removed, allow the text container to
   occupy the full available width instead of being constrained to
   half of the flex container. */
.who-we-are-container .who-text {
  /* Removed flex sizing to enable proper grid layout for the Who We Are
     section. Flex properties here previously caused the text to span
     the full width, preventing side‑by‑side alignment with the image. */
}

/* Branch cards no longer include photo backgrounds.  To preserve the
   classic card look used earlier on the site, revert the background
   to white.  Keep the position and overflow rules defined below so
   that the overlay logo tag remains correctly positioned. */
.branch-card {
  background: #ffffff !important;
}

/* Ensure CTA item background uses the dark azure even when other
   declarations specify a different colour.  Target anchor tags
   directly with the sidebar parent to increase specificity. */
.cta-sidebar a.cta-item {
  background: #0070A3 !important;
  color: #ffffff !important;
}
.cta-sidebar a.cta-item i,
.cta-sidebar a.cta-item span {
  color: #ffffff !important;
}

/*-----------------------------------------------------------------
  CTA colour fix (May 2026)
  ------------------------------------------------------------------
  Some earlier rules still applied a lighter cyan (#05AFFF) to the
  CTA buttons, despite the more specific selectors above.  To
  guarantee the requested dark azure (#0070A3) background for every
  CTA item across the site, we provide a general rule with
  !important.  This rule targets the base class (.cta-item) so that
  regardless of context—within or outside the sidebar—the CTA
  always uses the dark palette and white text/icons.  Place this
  rule at the very end of the stylesheet to override all prior
  declarations.
*/
.cta-item {
  background: #0070A3 !important;
  color: #ffffff !important;
}
.cta-item i,
.cta-item span {
  color: #ffffff !important;
}

/* Hide navigation arrows on the home hero slider for all devices. The
   dots remain visible for navigation, and touch swiping is still
   supported. */
/* Hide only the navigation arrows on the home hero slider. The
   selector targets the slider with id="heroSlider" to avoid
   interfering with other sliders that may use arrows. */
#heroSlider .slider-controls .arrow {
  display: none !important;
}

/* Highlight the currently active navigation link in both desktop and
   mobile menus. The colour and underline accentuate the selected
   page without overwhelming the overall design. */
.navbar ul li a.active,
#mobileMenu ul li a.active {
  color: var(--primary-color);
  font-weight: 600;
  border-bottom: 2px solid var(--primary-color);
}

/* Branch cards: overlay logo and branch name on top of the image. The
   container is set to relative to allow absolute positioning of the
   overlay. */
.branch-card {
  position: relative;
  overflow: hidden;
}
.branch-logo-tag {
  position: absolute;
  /* Place the badge slightly further in from the edges so it doesn't get
     cropped by the card's rounded corners. */
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  align-items: center;
  /* Use a solid white background with slight transparency to keep the
     badge legible against varied image tones */
  background: rgba(255, 255, 255, 0.9);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
  gap: 0.4rem;
  z-index: 3;
}
.branch-logo-tag img {
  /* Increase the logo height so it’s clearly visible and scales better
     next to the branch name */
  height: 28px;
  width: auto;
}

/* Style the branch name text within the badge. Use the primary colour
   defined in the root for consistency and slightly increase weight. */
.branch-logo-tag span {
  color: var(--primary-color);
  font-weight: 600;
}

/* Blog slider styling: allow horizontal scrolling and snap to each
   card. Scrollbar styling is consistent with the specialities
   component. */
.blog-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.blog-slider .card {
  flex: 0 0 320px;
  margin-right: 1rem;
  scroll-snap-align: start;
}
.blog-slider::-webkit-scrollbar {
  height: 6px;
}
.blog-slider::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}
.blog-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}
.blog-controls .arrow {
  cursor: pointer;
  font-size: 2rem;
  color: var(--secondary-color);
}

/* Navigation appointment button styling */
.navbar .nav-btn {
  background: var(--primary-color);
  color: #ffffff;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  margin-left: 1rem;
  white-space: nowrap;
  transition: background 0.2s ease, filter 0.2s ease;
}
.navbar .nav-btn:hover {
  filter: brightness(1.1);
}

/* Section animation classes for on‑scroll effects */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

/* Allow CTA labels to slide out of the sidebar. The default sidebar
   defined in style.css uses `overflow: hidden`, which prevents
   expanded labels from being visible. Overriding this property here
   ensures the labels appear when hovering over individual CTA items. */
.cta-sidebar {
  overflow: visible !important;
}

/* Recolour the hero slider arrows to use the secondary colour (a deep
   teal) so they remain visible on the light slide background. */
.slider-controls .arrow {
  color: var(--secondary-color);
}

/* On small screens allow the slider to grow with its content rather
   than locking it to a fixed viewport height. This prevents the
   subsequent section from overlaying the hero content when the text
   wraps on narrow devices. */
@media (max-width: 768px) {
  .slider {
    height: auto;
    min-height: 60vh;
  }
}

/* Global image handling: ensure images in most sections scale
   proportionally without cropping. Services images are excluded since
   they require a fixed aspect ratio for consistency. */

/* Make most images scale to fit within their containers without cropping.
   This rule excludes images used in the services preview and service
   detail sections, which rely on fixed aspect ratios for consistent
   presentation. */
section img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.services-slider img,
.service-detail img {
  /* Override the global rule for services images to maintain cover
     behaviour and fixed aspect ratios. */
  object-fit: cover;
}

/* ------------------------------------------------------------------
   Doctor modal styling
   ------------------------------------------------------------------
   Increase the width of doctor profile modals and add scrollability for
   long content. A close icon is positioned in the top right corner of
   each modal panel.
*/
.doctor-modal {
  max-width: 800px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
.close-modal {
  position: absolute;
  top: 0.5rem;
  right: 0.8rem;
  font-size: 1.5rem;
  color: var(--primary-color);
  cursor: pointer;
}

/* ------------------------------------------------------------------
   Additional tweaks (2026‑02‑07)
   ------------------------------------------------------------------
   The rules below override earlier styles to meet the latest design
   requirements specified by the client.  They are grouped here so
   future maintainers can easily locate them.  Changes include:
     • reducing and hiding the navigation appointment button on small
       screens
     • removing the blue underline on active navigation links
     • repositioning blog slider arrows to sit on either side of the
       slider (similar to the services slider)
     • ensuring images within hero slides inherit the global border
       radius and crop correctly on small screens
     • making modal content scrollable and adding support for a
       top‑right close icon via the `.modal-close` element
*/

/* Shrink the header appointment button and hide it on mobile */
.navbar .nav-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
}
@media (max-width: 768px) {
  .navbar .nav-btn {
    display: none;
  }
}

/* Remove the underline/border from active navigation links */
.navbar ul li a.active,
#mobileMenu ul li a.active {
  border-bottom: none !important;
}

/* Remove underline effect on active nav link by hiding the pseudo-element.
   The default style draws a coloured bar below the active nav link using
   the ::after pseudo-element. To remove the visible bar while still
   retaining text styling, set the pseudo-element's content to none. */
/* Completely hide the underline bar on both hover and active states.
   The base stylesheet applies a ::after pseudo-element with a coloured
   bar below the link. We override its display to none so no bar
   appears at all. Using !important ensures this takes precedence over
   the base rules. */
.navbar a.active::after,
.navbar a:hover::after {
  display: none !important;
  content: '' !important;
}

/* Modernise the hero slider dots. Larger dots with a subtle border
   improve accessibility and visual clarity. On hover the dots scale up
   slightly, and the active dot uses the secondary colour for contrast. */
.slider-controls .dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid var(--secondary-color);
  border-radius: 50%;
  transition: background 0.3s ease, transform 0.3s ease;
}
.slider-controls .dot:hover {
  transform: scale(1.2);
}
.slider-controls .dot.active {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
}

/* Apply a gentle border radius to all images for a cohesive design.
   Exclude the logo so the branding remains crisp and square. */
img {
  border-radius: var(--border-radius);
}
.logo img {
  border-radius: 0;
}

/* Position blog controls like the services slider controls */
#home-blogs .blog-slider {
  position: relative;
}

/* Ensure the blog section provides a positioning context for its
   navigation controls. Without this the absolutely positioned
   .blog-controls would be anchored to the viewport rather than the
   blog section. */
#home-blogs {
  position: relative;
}
#home-blogs .blog-controls {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  pointer-events: none;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
}
#home-blogs .blog-controls .arrow {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #ffffff;
  color: var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
#home-blogs .blog-controls .arrow:hover {
  background: var(--primary-color);
  color: #ffffff;
}

/* Ensure slider images have rounded corners */
.slide-image-wrapper img {
  border-radius: var(--border-radius);
}

/* On small screens fill hero images to prevent empty space */
@media (max-width: 768px) {
  .slide-image-wrapper img {
    object-fit: cover;
  }
}

/* Scrollable modal content and optional close icon styling */
.modal-content {
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.modal-content .modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--primary-color);
  line-height: 1;
}

/* Improve the branch card presentation.  Ensure branch images fully
   occupy their container without distortion and that the overlay
   badge (logo plus branch name) remains legible. */
.branch-card {
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
}
.branch-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.branch-logo-tag img {
  height: 24px;
  width: auto;
}

/* ------------------------------------------------------------------
   2026‑02‑07 (v2) Enhancements
   ------------------------------------------------------------------
   The declarations below further refine the site according to the
   latest design brief.  They remove unnecessary icons from hero
   slides, ensure slide images always fill their containers without
   letterboxing, enforce automatic height for the hero slider on all
   devices and add curved edges to specific images.  Placing these
   rules at the end of the stylesheet guarantees they override
   earlier definitions.
*/

/* Hide decorative service icons within hero slides.  These icons
   previously appeared above the CTA buttons and cluttered the
   presentation. */
.slide-text .service-icons {
  display: none !important;
}

/* Always scale hero images to cover their container.  Using
   object‑fit: cover prevents blank space from appearing when slides
   transition on narrow screens. */
.slide-image-wrapper img {
  object-fit: cover !important;
  height: 100% !important;
  width: 100% !important;
}

/* Prevent slides from showing blank space by ensuring the slider
   container hides any overflow during transitions.  This is
   especially important on mobile screens where slides may shift
   quickly. */
#heroSlider {
  overflow: hidden;
}

/* Set a consistent height for the hero slider on larger screens to
   preserve the visibility of each slide.  Removing the previous
   `height:auto` assignment (which caused the slider to collapse to
   zero height) ensures that the hero area remains prominent and
   avoids the page jumping directly to the next section.  A minimum
   height safeguards against extremely short screens. */
#heroSlider,
#heroSlider .slide {
  height: 75vh;
  min-height: 450px;
}

/* On smaller devices allow the hero slider to size itself based on its
   content but still provide a reasonable minimum height to prevent
   collapse.  This combination maintains responsiveness while
   eliminating blank space between slides on mobile. */
@media (max-width: 768px) {
  #heroSlider,
  #heroSlider .slide {
    height: auto;
    min-height: 400px;
  }
}

/* Add border radius to images in the Integrated Healing section and
   Who We Are two‑column layout.  The global image rule already
   applies border‑radius to most images, but these selectors ensure
   the edges remain curved even if other rules override the generic
   behaviour. */
#healing-process .two-column img,
.who-we-are-container .who-image img {
  border-radius: var(--border-radius) !important;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/*
   Centre the hero slider dot indicators along the bottom of the hero
   section.  Without this override the dot container can end up
   aligned to the left or offset by the slider arrows.  By setting
   bottom, left and transform with !important we ensure the dots
   remain centred on all screen sizes.  A high z‑index keeps the
   dots above neighbouring content.
*/
.slider-controls .dots {
  position: absolute !important;
  bottom: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2;
}

/* ---------------------------------------------------------------
   Header and footer palette (2026‑02‑07)
   ---------------------------------------------------------------
   Use a uniform soft blue background (#E9F4FB) for the header and
   footer across the entire site. Adding this rule near the end
   ensures it overrides earlier definitions in the base stylesheet. */
header,
footer {
  background-color: #E9F4FB !important;
}

/* ------------------------------------------------------------------
   Hero slider dot positioning refinements
   ------------------------------------------------------------------
   Align the slider navigation dots differently on large screens.
   On mobile they remain centred at the bottom of the slider, but on
   tablet and desktop the dots should sit under the CTA buttons in
   the slide text area (typically on the right side when the image
   appears on the left).  We accomplish this by overriding the
   absolute positioning for wider viewports. */
@media (min-width: 768px) {
  #heroSlider .slider-controls .dots {
    /*
     * Centre the navigation dots along the horizontal axis on larger screens
     * as well.  Previously this rule removed the translation which caused
     * the dot container to drift away from the centre on desktop and
     * tablet widths.  By keeping the translateX(-50%) we ensure the
     * dot container remains perfectly centred relative to the slider.
     */
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 1.5rem !important;
  }
}

/* Adjust the dot placement on very small screens.  In the provided
   mobile mock‑up the navigation dots sit just below the image at the
   start of the text area rather than at the very bottom of the
   slider.  Set a top value and clear bottom positioning so the dot
   container anchors itself approximately halfway down the slider. */
@media (max-width: 767px) {
  #heroSlider .slider-controls .dots {
    /* Centre the navigation dots at the bottom of the image on small
       screens.  Use a small bottom offset so the dots sit just
       beneath the photo and remain horizontally centred. */
    top: auto !important;
    bottom: 0.5rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* ------------------------------------------------------------------
   Hero slider mobile fixes and CTA updates
   ------------------------------------------------------------------ */
/* Ensure the hero slider text is visible on mobile.  Stack the image and text
   vertically and explicitly set the order so the image appears first and
   the text appears below.  Force the text panel to display and be
   fully opaque to override any default hiding behaviour. */
@media (max-width: 768px) {
  #heroSlider .slide-inner {
    flex-direction: column !important;
  }
  #heroSlider .slide-image-wrapper {
    order: 1;
  }
  #heroSlider .slide-text {
    order: 2;
    /*
      Force the hero slide text to be visible on mobile devices.
      Without these overrides the text container can inadvertently
      collapse or become hidden behind the image.  By explicitly
      setting display to flex and opacity to 1, and raising the
      z-index, we ensure the text appears below the image.  A solid
      background restores contrast against the image.
    */
    display: flex !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
    background: #F0F5F5;
  }

  /*
    On mobile screens, allow the hero slider and its slides to size
    themselves based on their content while enforcing a minimum height.
    This prevents blank space and ensures both the image and text
    remain visible without cropping.  Increasing the min-height to
    550px provides enough space for longer text lines and maintains
    proportions similar to the desktop layout.
  */
  #heroSlider,
  #heroSlider .slide,
  #heroSlider .slide-inner {
    height: auto !important;
    min-height: 550px !important;
  }
  #heroSlider .slide-image-wrapper img {
    height: auto !important;
    object-fit: cover;
  }

  /* On small screens, remove the absolute positioning of each hero slide. The base
     stylesheet positions slides absolutely and relies solely on opacity
     transitions to cycle through them. However, when the slides have
     varying heights and use height:auto, keeping them absolutely
     positioned causes the surrounding container to collapse between
     transitions, producing blank bands. By resetting the position to
     relative and explicitly controlling display on active/inactive
     slides, the hero slider will grow and shrink smoothly with its
     content. */
  #heroSlider .slide {
    position: relative !important;
    width: 100% !important;
    /* Hide inactive slides completely so they do not occupy vertical
       space. Without this override, inactive slides with opacity 0
       remain in the document flow, creating large gaps below the active
       slide. */
    display: none !important;
  }
  #heroSlider .slide.active {
    display: block !important;
  }
  /* Ensure the slide inner wrapper respects the natural height of
     its content. */
  #heroSlider .slide-inner {
    height: auto !important;
  }
}

/* Add a white border around each sticky CTA icon in its idle state.  The
   border creates visual separation against the blue sidebar. */
/*
  Enhance the sticky CTA buttons.  To create a distinct separation
  between each button and the blue sidebar, apply a 2px solid white
  border.  Use box-sizing to ensure the border does not affect the
  button's overall dimensions.  Important flags are used so that
  later colour overrides do not remove the border.
*/
.cta-item {
  border: 2px solid #ffffff !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------
   Branch doctor slider styles
   ------------------------------------------------------------------ */
/* Container for all branches.  Display cards in a horizontal row that
   can be scrolled on smaller screens.  Use scroll snapping for a
   smooth experience. */
.branches-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 0.5rem 0 1rem;
}
.branches-grid::-webkit-scrollbar {
  height: 6px;
}
.branches-grid::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

/* Individual branch card styling.  Cards have a fixed width to enable
   horizontal scrolling and contain both branch details and a doctor
   slider. */
.branches-grid .branch-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Place the Huenic Care logo and branch name side by side at the top of
   each card.  The logo remains small while the name uses a bold font. */
.branch-logo-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
}
.branch-logo-tag img {
  height: 28px;
  width: auto;
}

/* Doctor carousel within each branch card.  Displays doctor cards in a
   row and allows horizontal scrolling. */
.branch-doctors {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Remove horizontal gap so each doctor card occupies the full width without showing the next card prematurely */
  gap: 0 !important;
  padding-top: 0.5rem;
  /* Expand the doctor slider to fill the available horizontal space of its
     parent card. Without an explicit width, some browsers may shrink
     the flex container to the size of its content, leaving unused
     whitespace. */
  width: 100% !important;
}
.branch-doctors::-webkit-scrollbar {
  height: 4px;
}
.branch-doctors::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}
.branch-doctors .doctor-card {
  /* Make each doctor card occupy the full width of the container.  This
     allows a single profile to be visible at a time and the slider
     scrolls horizontally to reveal additional doctors when present. */
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  padding: 0.75rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.branch-doctors .doctor-card img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}
.branch-doctors .doctor-card h4 {
  margin: 0.3rem 0;
  font-size: 1rem;
  color: var(--primary-color);
}
.branch-doctors .doctor-card span {
  display: block;
  font-size: 0.8rem;
  color: var(--secondary-color);
  margin-bottom: 0.4rem;
}
.branch-doctors .doctor-card .read-more {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--accent-color);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}

/* ------------------------------------------------------------------
   Branch redesign styles
   ------------------------------------------------------------------ */
/* Hide the original branches-grid to avoid duplicate content when the
   new branch design is inserted. */
#branches .branches-grid {
  display: none !important;
}

/*
  Hide the branch-logo overlay across all branch cards.  The user
  requested removal of the logo and branch name badge that appears
  over the branch image.  Setting display: none ensures the
  overlay is not visible in either the legacy grid or the new
  redesign layouts.
*/
.branch-logo-tag,
.branches-redesign .branch-info .branch-logo-tag {
  display: none !important;
}

/* Container for the redesigned branches section.  Uses horizontal
   scrolling with snapping to present one branch card at a time on
   mobile devices. */
.branches-redesign {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 0.5rem 0 1rem;
}
.branches-redesign::-webkit-scrollbar {
  height: 6px;
}
.branches-redesign::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

/* Individual branch card in the redesigned layout */
.branches-redesign .branch-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

/* Top section containing branch image and doctor slider */
.branches-redesign .branch-top {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
}
.branches-redesign .branch-image {
  flex: 0 0 40%;
}
.branches-redesign .branch-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}
.branches-redesign .branch-doctors {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* No gap between doctor cards in redesign to ensure one card per view */
  gap: 0 !important;
}
.branches-redesign .branch-doctors .doctor-card {
  /* Occupy full width to display one doctor at a time */
  flex: 0 0 100%;
  background: #ffffff;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  padding: 0.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.branches-redesign .branch-doctors .doctor-card img {
  width: 100%;
  height: auto;
  border-radius: 0.4rem;
  margin-bottom: 0.5rem;
}
.branches-redesign .branch-doctors .doctor-card h4 {
  margin: 0.3rem 0;
  font-size: 1rem;
  color: var(--primary-color);
}
.branches-redesign .branch-doctors .doctor-card span {
  display: block;
  font-size: 0.75rem;
  color: var(--secondary-color);
  margin-bottom: 0.4rem;
}
.branches-redesign .branch-doctors .doctor-card .read-more {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--accent-color);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}

/* Info section below image and doctors */
.branches-redesign .branch-info {
  padding: 0.75rem;
  border-top: 1px solid #E0E0E0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.branches-redesign .branch-info .branch-logo-tag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 1rem;
}
.branches-redesign .branch-info .branch-logo-tag img {
  height: 28px;
  width: auto;
}
.branches-redesign .branch-info h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--primary-color);
}
.branches-redesign .branch-info p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--dark-text);
}
.branches-redesign .branch-info .branch-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.branches-redesign .branch-info .branch-book {
  margin-top: 0.5rem;
}
.branches-redesign .branch-info .branch-book .btn {
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
}

/* Responsive behaviour for branch redesign */
@media (max-width: 768px) {
  .branches-redesign .branch-card {
    flex: 0 0 90%;
  }
  .branches-redesign .branch-top {
    flex-direction: column;
  }
  .branches-redesign .branch-image,
  .branches-redesign .branch-doctors {
    flex: 1 1 100%;
  }
}

/*
  New two‑column layout for the Our Branches section.
  Each branch card displays the branch image on the left and key
  details on the right, arranged in three rows: branch info,
  doctors slider and call‑to‑action buttons.  This design
  improves readability and allows visitors to scroll horizontally
  through multiple doctors when available.  The old redesign
  layout is hidden via CSS to avoid duplicate content.
*/

/* Hide the previous branches redesign layout entirely */
.branches-redesign {
  display: none !important;
}

/* Container for the new two‑column branch cards */
.branches-two-col {
  /* Arrange branch cards horizontally to create a slider. The
     container scrolls on the X axis and uses scroll snapping to
     align each card neatly. */
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Smooth scrolling behaviour for auto sliding */
  scroll-behavior: smooth;
}

/* Individual branch card */
.branches-two-col .branch-card-two {
  /* Each branch card spans the full width of the slider viewport to
     produce a carousel effect. The image sits on the left and the
     branch details on the right. */
  display: flex;
  flex-wrap: nowrap;
  background: #ffffff;
  border: 1px solid #E0E0E0;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: start;
  /* Provide bottom padding so the CTA row isn't obscured by the
     horizontal scrollbar on small screens. */
  padding-bottom: 2rem;
}

/* Spacer between cards */
.branches-two-col .branch-card-two + .branch-card-two {
  /* spacing handled by gap on the container; remove vertical margin */
  margin-top: 0;
}

/* Left column: branch image */
.branches-two-col .branch-card-two .branch-image {
  /* Allow the image to occupy slightly less than half of the card on
     larger screens. A padding ensures the full photo is visible
     without cropping. */
  flex: 0 0 45%;
  max-width: 45%;
  padding: 1rem;
}
.branches-two-col .branch-card-two .branch-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Right column: branch content */
.branches-two-col .branch-card-two .branch-content {
  /* The branch details occupy the remaining space.  A flexible column
     layout distributes the branch info, doctor slider and call‑to‑action
     evenly, with generous padding for readability. */
  flex: 1;
  max-width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  gap: 0.8rem;
}

/* Branch info styling */
.branches-two-col .branch-info h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--primary-color);
}
.branches-two-col .branch-info p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--dark-text);
  /* Justify text in the address line so it uses the full width of the content area on mobile and desktop */
  text-align: justify;
  text-justify: inter-word;
}

/* Doctors slider: horizontally scrollable list */
.branches-two-col .branch-doctors-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0.5rem;
}
.branches-two-col .branch-doctors-slider::-webkit-scrollbar {
  height: 6px;
}
.branches-two-col .branch-doctors-slider::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

/* Doctor card within the slider */
.branches-two-col .doctor-card {
  /* Show two doctor cards per view */
  flex: 0 0 calc(50% - 0.25rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  scroll-snap-align: start;
  /*
   * Use a white background and slightly larger border radius on doctor
   * cards to match the refreshed branch card aesthetic.  The neutral
   * background ensures the doctor's photo and details stand out, while
   * the consistent rounding (0.5rem) aligns with the parent card.
   */
  background: #ffffff;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  padding: 0.75rem;
}
.branches-two-col .doctor-card img {
  /* Larger square doctor image */
  /* Increase the size of doctor photos and keep them square. */
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 0;
}
.branches-two-col .doctor-details h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--primary-color);
}
.branches-two-col .doctor-details span {
  display: block;
  font-size: 0.75rem;
  color: var(--secondary-color);
}
.branches-two-col .doctor-details .read-more {
  display: inline-block;
  margin-top: 0.2rem;
  color: var(--accent-color);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.75rem;
}

/* CTA row for phone, WhatsApp, maps and appointment */
.branches-two-col .branch-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.branches-two-col .branch-cta .branch-actions a {
  /* Icons and labels are styled via separate rule to allow labels next to icons */
  /* Remove default right margin so spacing can be controlled by gap on the parent */
  margin-right: 0;
  /* Set icon size only on the <i> elements; labels use a smaller font */
  font-size: inherit;
  color: var(--primary-color);
}
.branches-two-col .branch-cta .btn {
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
}

/* Enhance branch actions to include icon labels and flexible layout */
.branches-two-col .branch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.branches-two-col .branch-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--primary-color);
  text-decoration: none;
}
.branches-two-col .branch-actions a i {
  /* Maintain larger icon size */
  font-size: 1.2rem;
}
.branches-two-col .branch-actions a .action-label {
  font-size: 0.85rem;
  display: inline;
  color: var(--primary-color);
}

/* Add a vertical border between the image and content on larger screens for a clean separation */
@media (min-width: 992px) {
  .branches-two-col .branch-card-two .branch-image {
    /* Use a brand colour for the vertical divider to tie the design into the
       overall colour palette. The secondary colour is a medium teal/blue
       that provides subtle contrast without overwhelming the layout. */
    border-right: 1px solid var(--secondary-color);
  }
}

/* Allow long address lines to break words if necessary */
.branches-two-col .branch-info p {
  word-break: break-word;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .branches-two-col .branch-card-two {
    flex-direction: column;
  }
  .branches-two-col .branch-card-two .branch-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding: 0;
    height: auto;
  }
  .branches-two-col .branch-card-two .branch-content {
    max-width: 100%;
    padding: 0.8rem;
  }
  .branches-two-col .doctor-card {
    /* Maintain two doctor cards per row on mobile */
    flex: 0 0 calc(50% - 0.25rem);
  }
}

/* Stack CTA elements on very small screens to prevent cropping and ensure all actions are accessible.
   On narrow devices the call/WhatsApp/map icons will appear above the appointment button. */
@media (max-width: 576px) {
  .branches-two-col .branch-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .branches-two-col .branch-cta .btn {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
  }
}

/* ------------------------------------------------------------------
   Branch slider adjustments (2026‑02‑17)
   ------------------------------------------------------------------
   Convert the branches section into a horizontal slider that scrolls
   smoothly.  Each branch card spans the full viewport width and
   snaps into place when scrolling.  The image column displays the
   branch photo without cropping.  On small screens, the slider
   collapses back into a vertical stack.
*/
.branches-two-col {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1rem;
}
.branches-two-col .branch-card-two {
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: start;
}
.branches-two-col .branch-card-two .branch-image {
  flex: 1 1 45%;
  max-width: 45%;
}
.branches-two-col .branch-card-two .branch-image img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 768px) {
  .branches-two-col {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------------
   Service detail enhancements (2026‑02‑17)
   ------------------------------------------------------------------
   Refine the layout of the services detail sections to more closely
   match the provided reference.  A thicker top border separates the
   introductory text from the features grid.  Feature boxes gain a
   light border, larger icons in solid coloured circles and
   increased padding for improved readability.  Headings and lists
   adopt consistent sizing and colour usage.
*/
.service-detail .text .features {
  gap: 1.5rem;
}
.service-detail .text .feature-box {
  padding: 1.2rem 1.2rem 1.2rem 3.5rem;
  border: 1px solid #e0e9ff;
  background: #ffffff;
  border-radius: var(--border-radius);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.service-detail .text .feature-box h4 {
  color: var(--primary-color);
  font-size: 1.05rem;
}
.service-detail .text .feature-box ul {
  list-style: disc;
  margin-left: 1rem;
  font-size: 0.95rem;
}
.service-detail .text .feature-box::before {
  left: 1rem;
  top: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.3rem;
  background: var(--primary-color);
  color: #fff;
}

/* ------------------------------------------------------------------
   Branch slider navigation controls
   ------------------------------------------------------------------ */
/* Controls for navigating between branch cards in the slider. The arrows
   are positioned below the slider and styled as circular buttons. */
.branch-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.branch-controls .arrow {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.branch-controls .arrow:hover {
  background: var(--secondary-color);
}
.branch-controls .arrow i {
  font-size: 1rem;
}

/* ------------------------------------------------------------------
   Hero slider mobile adjustments
   ------------------------------------------------------------------ */
/* On small screens adjust the hero slider height so both image and text
   are visible when stacked vertically.  Remove the fixed 60vh height
   applied in the base stylesheet and allow the content to dictate
   the height.  Provide a minimum height to avoid collapsing when
   content is short. */
@media (max-width: 768px) {
  #heroSlider {
    /* Allow the hero slider to size itself based purely on its
       content.  Removing the minimum height eliminates blank bands
       after each slide on mobile devices. */
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #heroSlider .slide {
    position: relative !important;
    height: auto !important;
  }
  #heroSlider .slide-text {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: #F0F5F5;
    color: var(--dark-text);
  }
  #heroSlider .slide-text h1 {
    font-size: 1.8rem;
  }
  #heroSlider .slide-text p {
    font-size: 1rem;
  }
}

/* Modal content styling for doctor profiles.  Ensure the modal is
   scrollable and headings are styled consistently. */
.modal-content.doctor-profile {
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  border-radius: 0.5rem;
}
.modal-content.doctor-profile h3 {
  margin-top: 0;
  color: var(--primary-color);
}
.modal-content.doctor-profile h4 {
  margin: 0.5rem 0 0.25rem;
  color: var(--primary-color);
}
.modal-content.doctor-profile ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

/*
 * Final override for hero slider navigation dots.  The dot container
 * is given full width and horizontally centred within the hero slider
 * on all screen sizes.  By setting left and right to 0 and using
 * flexbox to centre the items, the dots remain anchored to the
 * bottom centre of the slider even when arrows are hidden or
 * repositioned.  This rule is placed near the end of the stylesheet
 * to ensure it supersedes earlier positioning logic.
 */
#heroSlider .slider-controls .dots {
  /* Hide the original dot container.  The hero slider dots are now
     rendered in a separate container (.hero-dots) which can be
     centred without being affected by the slider controls wrapper.
     Hiding this container prevents duplicate dots from appearing. */
  display: none !important;
}

/* Centre the hero slider dots by converting the slider controls into
   a flex container.  With arrows hidden on the hero slider, we can
   rely on flexbox to centre the dot container horizontally along the
   full width of the slider.  The align-items property pushes the
   dots toward the bottom of the slider to approximate the previous
   bottom offset. */
#heroSlider .slider-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  padding-bottom: 1rem;
}

/* Style the external hero slider dot container.  This container sits
   immediately below the slider and centres the dots horizontally.
   Dot elements mirror the styling defined for the original
   .slider-controls .dot elements so the appearance remains
   consistent. */
.hero-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.hero-dots .dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.hero-dots .dot.active {
  background: #ffffff;
}

/* ------------------------------------------------------------------
   Additional customizations added 2026-02-17
   These styles refine spacing, layout and visual presentation based on
   the latest client requirements.
------------------------------------------------------------------ */

/* Provide top space for the home slider */
.slider {
  margin-top: 1rem;
}

/* Ensure hero slider images maintain recommended aspect ratios for desktop and mobile */
.slider .slide-image-wrapper {
  width: 100%;
  height: auto;
  position: relative;
}
.slider .slide-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .slider .slide-image-wrapper {
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 767px) {
  .slider .slide-image-wrapper {
    aspect-ratio: 16 / 9;
  }
}

/* Who We Are section enhancements */
.who-we-are-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}
.who-image {
  flex: 1 1 40%;
  text-align: center;
}
.who-image img {
  width: 100%;
  border-radius: var(--border-radius);
  object-fit: cover;
}
.who-text {
  flex: 1 1 55%;
}

/* Hide the arrow controls below the Who We Are slider */
#about-overview .who-controls {
  display: none !important;
}

/* Integrated Healing section image */
#healing-process .healing-image {
  flex: 1 1 45%;
  text-align: center;
}
#healing-process .healing-image img {
  width: 100%;
  border-radius: var(--border-radius);
  object-fit: cover;
}
/* When using our two-column layout for healing, allow equal width for image/text */
/* Ensure equal widths and horizontal alignment for image and text */
#healing-process .two-column {
  display: flex;
  flex-wrap: wrap;
}
#healing-process .two-column > div {
  flex: 1 1 50%;
}

/* Justify text in the Our Specialities cards */
.speciality-item .speciality-content p {
  text-align: justify;
}

/* Adjust video testimonials slider to show multiple videos on larger screens */
@media (min-width: 768px) {
  .testimonial-item {
    flex: 0 0 45%;
  }
}
@media (min-width: 1200px) {
  /* Show approximately two full videos plus a partial third on very large screens */
  .testimonial-item {
    flex: 0 0 40%;
  }
}

/* Remove hero banner sections across subpages */
.hero {
  display: none;
}

/* FAQ accordion styles */
#faq details {
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  background: #fafafa;
  transition: background var(--transition-fast);
}
#faq details[open] {
  background: #f0f8ff;
}
#faq summary {
  cursor: pointer;
  font-weight: 500;
  position: relative;
  padding-right: 1.5rem;
}
#faq summary::after {
  /* Show a plus sign when closed and switch to a minus sign when open.
     Using simple characters avoids rendering issues seen with escaped
     Unicode arrows in some browsers. */
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 700;
  transition: transform var(--transition-fast);
}
#faq details[open] summary::after {
  content: '–';
  transform: none;
}

/* Branch two-column card layout */
.branches-two-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.branch-card-two {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background: #ffffff;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  overflow: hidden;
}
.branch-card-two .branch-image {
  flex: 0 0 45%;
  max-width: 45%;
}
.branch-card-two .branch-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.branch-card-two .branch-content {
  flex: 1 1 55%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.branch-card-two .branch-info {
  margin-bottom: 1rem;
}
.branch-card-two .branch-doctors-slider {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  padding-bottom: 0.5rem;
}
.branch-card-two .branch-doctors-slider .doctor-card {
  flex: 0 0 160px;
  scroll-snap-align: start;
}
.branch-card-two .branch-doctors-slider::-webkit-scrollbar {
  height: 6px;
}
.branch-card-two .branch-doctors-slider::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}
.branch-card-two .branch-cta {
  /* Align CTA actions and appointment button on a single row by default.
     On small screens this will stack via media queries defined below. */
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}
.branch-card-two .branch-actions {
  display: flex;
  gap: 0.5rem;
}

/* Responsive adjustments for branch cards */
@media (max-width: 768px) {
  .branch-card-two .branch-image,
  .branch-card-two .branch-content {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .branch-card-two .branch-content {
    padding: 0.8rem;
  }
}

/* ------------------------------------------------------------------
   Additional UI tweaks (2026‑02‑17)
   ------------------------------------------------------------------
   Hide legacy components and refine layout spacing based on user
   feedback. These rules override earlier declarations to ensure a
   modern, cohesive design across all pages.
*/
/* Hide the legacy Who We Are slider now that a two‑column layout is used */
.who-slider {
  display: none !important;
}

/* Remove navigation arrows from the Our Specialities slider */
.specialities-controls {
  display: none !important;
}

/* Hide branch slider controls since the new branch section does not require manual navigation */
.branch-controls {
  display: none !important;
}

/* Standardise navigation link spacing across all pages */
.navbar ul {
  gap: 1.5rem !important;
}