/*
 * Styles for the P. Oz Medical Center website.
 *
 * This stylesheet defines a modern, responsive design that
 * echoes the look and feel of the reference site.  The colour
 * palette centres around deep blues with bright accent hues and
 * generous white space.  Sections are separated using soft
 * rounded containers and subtle shadows to give depth without
 * overwhelming the content.  Typography uses the Assistant
 * typeface for a clean, friendly reading experience in both
 * Hebrew and English.  RTL layout is fully supported.
 */

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

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Override hero background on home page with higher specificity
 * This rule appears at the end of the stylesheet to ensure it
 * overrides the generic .hero background definition declared later
 * in the file.  It combines both the .hero and .home-hero
 * selectors to increase specificity. */
/* The home hero uses a simple dark gradient overlay on top of the
 * background image. The subtle diagonal pattern has been removed to
 * improve contrast and reduce visual noise. Two layers are kept:
 * a semi‑transparent gradient and the underlying image. */
.hero.home-hero {
  background-image:
    linear-gradient(180deg, rgba(0, 22, 117, 0.6) 0%, rgba(0, 42, 109, 0.6) 100%),
    url('../images/doctor-team.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------
 * Custom styles for the home page and thank you page heroes
 * These styles override the default hero to use a background image
 * with a dark overlay and to present a lead capture form within the
 * hero on the home page.  They also provide a simplified dark
 * gradient for the thank you page hero.  Responsive rules ensure
 * readability and usability on mobile devices.
 */

/* Home hero with form
 * The home page hero uses a full‑bleed background image with a dark overlay.
 * A two‑column layout displays a headline and description on the left and
 * a lead capture form on the right.  The form card has a translucent
 * background and rounded corners for a modern look.  On smaller screens
 * the columns stack vertically to ensure readability.
 */
/* Simplified home hero background: dark gradient and photo without
 * additional repeating patterns.  This improves readability and
 * contrast for the headline and description. */
.home-hero {
  background-image:
    linear-gradient(180deg, rgba(0, 22, 117, 0.6) 0%, rgba(0, 42, 109, 0.6) 100%),
    url('../images/doctor-team.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: right;
}

.home-hero .hero-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.home-hero .hero-text {
  flex: 1 1 450px;
}

.home-hero .hero-text h1 {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 20px;
}

.home-hero .hero-text p {
  font-size: 22px;
  margin-bottom: 30px;
}

.home-hero .hero-form {
  flex: 1 1 400px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.home-hero .hero-form h3 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
}

.home-hero .hero-form .form-group {
  margin-bottom: 15px;
}

.home-hero .hero-form input,
.home-hero .hero-form textarea {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  color: #001675;
}

.home-hero .hero-form textarea {
  resize: vertical;
  min-height: 80px;
}

.home-hero .hero-form button {
  width: 100%;
  background: #00b4d8;
  color: #ffffff;
  padding: 12px;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease;
}

.home-hero .hero-form button:hover {
  opacity: 0.9;
}

/* Generic service hero
 * This base class applies a full‑width background with a dark gradient overlay and
 * sets up a two‑column layout identical to the home hero.  Each specific
 * service page adds a second class (e.g. .neurological-hero) to override the
 * background image.  The form appears on the right (or bottom on mobile)
 * and shares the same translucent card styling as the home hero. */
.service-hero {
  /* Use a darker overlay to enhance the contrast between the text and
   * the background image.  Increasing the opacity improves readability. */
  background-image:
    linear-gradient(180deg, rgba(0, 22, 117, 0.85) 0%, rgba(0, 42, 109, 0.85) 100%),
    url('../images/doctor-team.png');
  /* Ensure the image always covers the entire hero area */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: right;
  /* Align the hero directly under the header and reduce top padding so
   * all content (image, heading, text and form) fits comfortably on
   * the first screen. */
  margin-top: 0;
  padding: 120px 20px 80px;
}
.service-hero .hero-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Reduce gap between hero columns to prevent wrapping on medium screens */
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.service-hero .hero-text {
  flex: 1 1 450px;
}
.service-hero .hero-text h1 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #ffffff;
}
.service-hero .hero-text p {
  font-size: 20px;
  margin-bottom: 30px;
  color: #f0f4ff;
}
.service-hero .hero-form {
  flex: 1 1 400px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.service-hero .hero-form h3 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
}

/* Labels within the hero form should be high‑contrast for readability on
 * dark backgrounds.  We set them to white and slightly bolder weight. */
.service-hero .hero-form label {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 4px;
}
.service-hero .hero-form .form-group {
  margin-bottom: 15px;
}
.service-hero .hero-form input,
.service-hero .hero-form textarea {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  color: #001675;
}
.service-hero .hero-form textarea {
  resize: vertical;
  min-height: 80px;
}
.service-hero .hero-form button {
  width: 100%;
  background: #00b4d8;
  color: #ffffff;
  padding: 12px;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease;
}
.service-hero .hero-form button:hover {
  opacity: 0.9;
}

/* Group hero text and form into a single flex column so that
 * the content and form align together on the left of the hero. */
.service-hero .hero-info {
  /* Give the text and form container half of the available width on large screens */
  /* Allocate around sixty percent of the hero width for the text and form.
   * This extra space ensures the heading, description and contact form
   * remain readable and balanced alongside the doctor image. */
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 768px) {
  .service-hero .hero-info {
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------------------------
 * Hero image styling for neurological evaluation page.
 * This container holds a large portrait of the doctor in the hero section,
 * complementing the hero text and contact form.  The image scales
 * responsively and aligns to the right on wider screens.
 */
.service-hero .hero-image {
  /* Allocate the left side of the hero for the doctor image.  Giving
   * roughly 40% width allows room for the hero text and form on
   * the right while keeping the image prominent. */
  flex: 1 1 40%;
  text-align: center;
}

/* For the neurological hero, ensure the hero image appears before the hero info
 * within the flex container.  Using order:-1 brings the image to the start of
 * the row without altering the HTML structure. */
.neurological-hero .hero-image {
  order: -1;
}
.service-hero .hero-image img {
  width: 100%;
  max-width: 450px;
  height: auto;
  border-radius: 16px;
  border: 4px solid #00b4d8;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

/* Overlay tags on top of the hero doctor image.  The hero image is
 * positioned relative so that the absolute tags can be placed at
 * a consistent location (bottom right on large screens).  On
 * smaller screens the tags remain centred. */
.service-hero .hero-image {
  position: relative;
}
.service-hero .hero-image .image-tags {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-hero .hero-image .image-tags .tag {
  background: rgba(0, 22, 117, 0.85);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  /* Allow text to wrap within the tag so long messages don't overflow */
  white-space: normal;
}
/* Differentiated colours for name and recommendation tags */
.service-hero .hero-image .image-tags .doctor-name {
  background: rgba(0, 180, 216, 0.9);
  color: #002054;
}
.service-hero .hero-image .image-tags .doctor-recommended {
  background: rgba(0, 22, 117, 0.85);
  color: #ffffff;
}
@media (max-width: 768px) {
  .service-hero .hero-image .image-tags {
    bottom: 10px;
    right: 50%;
    transform: translateX(50%);
    align-items: center;
  }
  .service-hero .hero-image .image-tags .tag {
    font-size: 13px;
    padding: 4px 10px;
  }
}
@media (max-width: 768px) {
  .service-hero .hero-image {
    flex: 1 1 100%;
    order: 3;
    margin-top: 20px;
  }
  .service-hero .hero-image img {
    max-width: 80%;
  }
}

/* ------------------------------------------------------------
 * Doctor card styling for service hero
 * Displays the neurological specialist as a flexible card within
 * the hero section.  The card uses a semi‑transparent backdrop
 * and blur effect to stand out against the dark hero gradient
 * without overwhelming the background image.  On mobile the
 * layout stacks vertically for readability.
 */
.service-hero .hero-doctor-card {
  flex: 1 1 100%;
  max-width: 900px;
  margin: 40px auto 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 20px;
  /* Use a subtle translucent panel with border and blur to lift the doctor card
   * from the dark hero background while retaining a cohesive look. */
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  color: #f0f4ff;

  /* Ensure the card respects RTL layout */
  direction: rtl;
}
.service-hero .hero-doctor-card img {
  flex: 0 0 140px;
  width: 140px;
  height: auto;
  border-radius: 12px;
}
.service-hero .hero-doctor-card .doctor-details {
  flex: 1 1 auto;
}
.service-hero .hero-doctor-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #00b4d8;
}
.service-hero .hero-doctor-card p {
  margin: 0 0 8px 0;
  font-size: 16px;
  line-height: 1.5;
  color: #f0f4ff;
}
.service-hero .hero-doctor-card ul.doctor-specialties {
  margin: 0;
  padding-inline-start: 20px;
  list-style: disc;
}
.service-hero .hero-doctor-card ul.doctor-specialties li {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 4px;
  color: #f0f4ff;
}

/* Colour the list markers in the doctor card with the brand turquoise */
.service-hero .hero-doctor-card ul.doctor-specialties li::marker {
  color: #00b4d8;
}

/* ---------------------------------------------------------------------
 * Professional doctor card styling for the neurological hero.
 * This specialised variant refines the base doctor card to convey a
 * premium, authoritative appearance: a circular photo with an accent
 * border, clear hierarchy of headings, a subtle divider, custom
 * bullet markers and a small call‑to‑action button.  The card adapts
 * gracefully to mobile screens via a stacked layout.
 */
.service-hero .hero-doctor-card.professional {
  max-width: 900px;
  margin: 40px auto 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 24px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  direction: rtl;
}
.service-hero .hero-doctor-card.professional .doctor-photo img {
  width: 180px;
  height: auto;
  /* Display the doctor's photo as a rounded rectangle rather than a circle.
   * A modest radius gives a more refined, professional look while the
   * accent border ties it into the brand palette. */
  border-radius: 12px;
  border: 4px solid #00b4d8;
}
.service-hero .hero-doctor-card.professional .doctor-info {
  flex: 1 1 auto;
}
.service-hero .hero-doctor-card.professional .doctor-info h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
}
.service-hero .hero-doctor-card.professional .doctor-info h4 {
  margin: 6px 0 18px 0;
  font-size: 18px;
  font-weight: 600;
  color: #00b4d8;
}
/* Highlight styling within the professional doctor card.  Certain key phrases
 * in the biography are wrapped in <span class="highlight"> tags to call
 * attention to expertise and credentials.  Use the brand colour and
 * increased weight to differentiate these highlights from normal text. */
.service-hero .hero-doctor-card.professional .doctor-info .highlight {
  color: #00b4d8;
  font-weight: 600;
}

/* Tags row for professional doctor card.  Present a series of badges
 * representing key credentials or accolades.  The tags use the brand
 * colour and a subtle translucent fill to draw attention without
 * overpowering the design. */
.service-hero .hero-doctor-card.professional .doctor-tags {
  margin: 8px 0 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-hero .hero-doctor-card.professional .doctor-tags .tag {
  background: rgba(0, 180, 216, 0.15);
  border: 1px solid #00b4d8;
  color: #00b4d8;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* Recommendations list for the professional doctor card.  Use custom
 * bullet styling to align with the card's visual language. */
.service-hero .hero-doctor-card.professional ul.recommendations {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}
.service-hero .hero-doctor-card.professional ul.recommendations li {
  position: relative;
  padding-right: 18px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #f0f4ff;
}
.service-hero .hero-doctor-card.professional ul.recommendations li::before {
  content: '\2022'; /* bullet dot */
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  line-height: 1;
  color: #00b4d8;
}
.service-hero .hero-doctor-card.professional .doctor-info p {
  margin: 0 0 14px 0;
  font-size: 16px;
  line-height: 1.5;
  color: #f0f4ff;
}
.service-hero .hero-doctor-card.professional .divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 10px 0 16px 0;
}
.service-hero .hero-doctor-card.professional ul.specialties {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}
.service-hero .hero-doctor-card.professional ul.specialties li {
  position: relative;
  padding-right: 18px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: #f0f4ff;
}
.service-hero .hero-doctor-card.professional ul.specialties li::before {
  content: '';
  position: absolute;
  right: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background: #00b4d8;
  border-radius: 50%;
}
.service-hero .hero-doctor-card.professional .button.small {
  display: inline-block;
  background: #00b4d8;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease;
}
.service-hero .hero-doctor-card.professional .button.small:hover {
  opacity: 0.9;
}
@media (max-width: 768px) {
  .service-hero .hero-doctor-card.professional {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .service-hero .hero-doctor-card.professional .doctor-info {
    margin-top: 16px;
  }
  .service-hero .hero-doctor-card.professional .doctor-info h3 {
    font-size: 24px;
  }
  .service-hero .hero-doctor-card.professional .doctor-info h4 {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .service-hero .hero-doctor-card {
    flex: 1 1 100%;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .service-hero .hero-doctor-card img {
    margin-bottom: 10px;
  }
  .service-hero .hero-doctor-card .doctor-details {
    flex: 0 1 auto;
  }
}

/* Specific backgrounds for each service hero.  These classes override only the
 * background image while inheriting the gradient overlay defined on
 * .service-hero.  The images depict different doctors relevant to the
 * service. */
.neurological-hero {
  /* Display the same background image as home page for consistency */
  background-image:
    linear-gradient(180deg, rgba(0, 22, 117, 0.85) 0%, rgba(0, 42, 109, 0.85) 100%),
    url('../images/doctor-team.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.orthopedic-hero {
  background-image:
    linear-gradient(180deg, rgba(0, 22, 117, 0.85) 0%, rgba(0, 42, 109, 0.85) 100%),
    url('../images/doctor-team.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.occupational-hero {
  background-image:
    linear-gradient(180deg, rgba(0, 22, 117, 0.85) 0%, rgba(0, 42, 109, 0.85) 100%),
    url('../images/doctor-team.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.emg-hero {
  /* Use a specific EMG procedure photograph as the background with a diagonal code pattern overlay */
  /* Remove the repeating diagonal pattern from the EMG hero. A darker
   * gradient overlay ensures sufficient contrast against the image. */
  background-image:
    linear-gradient(180deg, rgba(0, 22, 117, 0.85) 0%, rgba(0, 42, 109, 0.85) 100%),
    url('../images/hero-emg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Desktop-specific backgrounds for service heroes
 * On larger screens the neurological, orthopedic and occupational heroes
 * display their respective images beneath the dark gradient and subtle
 * pattern. On mobile the simpler gradient defined in .service-hero
 * remains in place. */
@media (min-width: 769px) {
  .neurological-hero {
    /* On desktop we overlay a dark gradient directly on top of the hero image.
     * Using the same background image as home page for consistency. */
    background-image:
      linear-gradient(180deg, rgba(0, 22, 117, 0.75) 0%, rgba(0, 42, 109, 0.75) 100%),
      url('../images/doctor-team.png');
    background-size: cover;
    background-position: center center, center center;
    background-repeat: no-repeat;

    /* Reduce the vertical padding on desktop for the neurological hero.
       This shortens the hero section height so it doesn't occupy the entire
       viewport on large screens.  The default .service-hero padding is
       generous to accommodate long headings and forms, but for this
       specific service page a more compact hero improves readability. */
    padding: 80px 20px 60px;
  }
  .orthopedic-hero {
    /* Use only a dark gradient overlay and the background image on desktop
     * to simplify the hero and enhance contrast. */
    background-image:
      linear-gradient(180deg, rgba(0, 22, 117, 0.85) 0%, rgba(0, 42, 109, 0.85) 100%),
      url('../images/doctor-team.png');
    background-size: cover;
    background-position: center center, center center;
    background-repeat: no-repeat;
  }
  .occupational-hero {
    /* Simplified background for occupational hero: remove pattern and
     * increase overlay opacity for better contrast. */
    background-image:
      linear-gradient(180deg, rgba(0, 22, 117, 0.85) 0%, rgba(0, 42, 109, 0.85) 100%),
      url('../images/doctor-team.png');
    background-size: cover;
    background-position: center center, center center;
    background-repeat: no-repeat;
  }
}

/* Responsive adjustments for service hero */
@media (max-width: 768px) {
  .service-hero .hero-content {
    flex-direction: column;
    text-align: center;
  }
  .service-hero .hero-form {
    width: 100%;
    margin-top: 30px;
  }
  .service-hero .hero-text {
    flex: 1 1 auto;
  }
}

/* Thank you hero styling
 * The thank you page hero uses a dark gradient background similar to other
 * sections, without an image.  The content is centred and uses generous
 * padding for emphasis.
 */
.thank-you-hero {
  background: linear-gradient(180deg, #001675 0%, #002a6d 100%);
  text-align: center;
}

/* ------------------------------------------------------------------
 * WhatsApp Lead Popup
 * This overlay appears after the user scrolls and 25 seconds have passed.
 * It uses a semi‑transparent dark background to dim the page and
 * centres a white card containing a message input and a button to
 * initiate a WhatsApp conversation.  The popup is responsive and
 * accessible: on mobile it occupies most of the screen width and
 * provides large tap targets.  The popup is hidden by default and
 * displayed via JavaScript when appropriate.
 */
/* Hide any legacy WhatsApp widget anchors that still exist in the markup. */
.whatsapp-widget-old {
  display: none !important;
}

.thank-you-hero .hero-content {
  max-width: 900px;
  margin: 0 auto;
}

.thank-you-hero .hero-text h1 {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 20px;
}

.thank-you-hero .hero-text p {
  font-size: 24px;
  margin-bottom: 30px;
}

/* Responsive adjustments for home hero */
@media (max-width: 768px) {
  .home-hero .hero-content {
    flex-direction: column;
    text-align: center;
  }
  .home-hero .hero-form {
    width: 100%;
    margin-top: 30px;
  }
  .home-hero .hero-text {
    flex: 1 1 auto;
  }
}

body {
  font-family: 'Assistant', sans-serif;
  direction: rtl;
  background-color: #f4f7ff;
  color: #001675;
  line-height: 1.6;
  /* Prevent horizontal scrolling on all devices */
  overflow-x: hidden;
}

/* Cookie consent banner
 * This fixed bar appears at the bottom of the screen on the first visit
 * to ask users to accept the use of cookies.  The banner uses a dark
 * background to stand out against the page content while remaining
 * subtle.  A button invites the visitor to accept cookies, after
 * which the banner will disappear.  The banner supports RTL and
 * scales down on mobile devices. */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #001675;
  color: #ffffff;
  padding: 15px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  z-index: 10000;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
  font-size: 14px;
}
#cookie-banner p {
  margin: 0;
  flex: 1 1 auto;
  line-height: 1.4;
}
#cookie-banner a {
  color: #00b4d8;
  text-decoration: underline;
}
#cookie-banner button {
  margin-top: 10px;
  background: #00b4d8;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 700;
  transition: 0.3s ease;
}
#cookie-banner button:hover {
  opacity: 0.85;
}
@media (max-width: 600px) {
  #cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 15px;
  }
  #cookie-banner button {
    width: 100%;
    margin-top: 10px;
  }
}

/*
 * Scroll reveal animations
 * Elements with the class `.scroll-animate` will fade and slide
 * into view as they enter the viewport.  This subtle movement
 * helps draw the visitor's eye down the page without being
 * distracting.  Use the `animate` class to trigger the final
 * state via JavaScript.
 */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.scroll-animate.animate {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------
 * Emphasis styling for success stories
 * Success stories highlight important words or numbers by wrapping
 * them in <strong> tags.  The following rule sets an accent colour
 * and heavier weight for those highlighted words to draw the
 * reader's eye without overpowering the surrounding text.
 */
.success-stories .success-card p strong {
  color: #0077b6;
  font-weight: 700;
}

/* ------------------------------------------------
 * Emphasis styling for mini testimonials
 * Highlight important words or numbers within mini
 * testimonial paragraphs by wrapping them in <strong>
 * tags. This rule matches the accent colour used in
 * the success stories section, drawing attention
 * without overwhelming the overall design.
 */
.mini-testimonials .testimonial-card p strong {
  color: #0077b6;
  font-weight: 700;
}

/* ------------------------------------------------
 * WhatsApp testimonials section
 * A responsive gallery showcasing screenshots of WhatsApp conversations
 * with patients. The gallery is arranged in a flexible grid with even
 * spacing and subtle shadows for visual separation. The heading is
 * consistent with other section titles.
 */
.whatsapp-section {
  margin-top: 60px;
  padding: 40px 20px;
  background: #f5f7ff;
}
.whatsapp-section h2 {
  text-align: center;
  font-size: 40px;
  color: #001675;
  margin-bottom: 30px;
  font-weight: 700;
}
.whatsapp-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.whatsapp-item {
  /* Ensure items remain a consistent width so the chat screenshots don’t
     expand to fill the entire row on large screens.  The flex-basis
     defines the preferred width, while flex-grow is zero to prevent
     stretching beyond that. */
  max-width: 280px;
  flex: 0 1 280px;
}
.whatsapp-item img {
  width: 100%;
  height: auto;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

/* Fibromyalgia page lists
 * Tighter list styling for the fibromyalgia process and why choose us sections.
 * Uses custom bullet points with reduced spacing to create a more compact and
 * organized appearance, while keeping RTL alignment consistent.
 */
.fibro-process ul,
.fibro-why ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fibro-process li,
.fibro-why li {
  margin-bottom: 10px;
  font-size: 18px;
  display: flex;
  align-items: flex-start;
}
.fibro-process li::before,
.fibro-why li::before {
  content: '\2022';
  color: #00b4d8;
  margin-left: 8px;
  font-size: 22px;
  line-height: 1;
}

/* ---------------------------------------------------------------------
 * Expert section styling (diabetes page)
 *
 * Create a distinct look for the “Meet the Expert” section on the diabetes
 * page. The section uses a soft background, subtle box shadow and rounded
 * corners to stand apart from the rest of the content. The expert content
 * is arranged with the portrait on the right (in RTL) and descriptive text
 * on the left. Review cards beneath provide visual social proof with star
 * ratings and testimonials.
 */
.expert-section {
  background: #f5f8ff;
  padding: 60px 20px;
  margin: 40px 0;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.expert-section .expert-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.expert-section .expert-image {
  flex: 0 1 300px;
  text-align: center;
}

.expert-section .expert-image img {
  width: 250px;
  max-width: 100%;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.expert-section .expert-text {
  flex: 1 1 500px;
  font-size: 18px;
  line-height: 1.7;
  color: #333;
  text-align: right;
}

.expert-section .expert-text p {
  margin-bottom: 15px;
}

.expert-reviews {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.review-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  padding: 20px;
  flex: 1 1 250px;
  max-width: 320px;
  text-align: right;
}

.review-card .review-stars {
  color: #ffc107;
  font-size: 20px;
  margin-bottom: 10px;
}

.review-card p {
  margin: 0 0 10px;
  color: #333;
  font-size: 16px;
  direction: rtl;
}

.review-card .review-author {
  font-weight: 600;
  color: #001675;
}

@media (max-width: 767px) {
  .expert-section {
    padding: 40px 15px;
  }
  .expert-section .expert-content {
    flex-direction: column;
    align-items: center;
  }
  .expert-section .expert-image {
    margin-bottom: 20px;
  }
  .expert-section .expert-text {
    text-align: center;
  }
  .review-card {
    max-width: 100%;
  }
}

/* Ensure images never break the layout on smaller screens */
img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------
 * Fibromyalgia process and why lists overrides
 *
 * The generic .service-section list styling defined later in this file
 * applies flex layout with a large turquoise bullet and generous
 * spacing. For the fibromyalgia page we want a more compact,
 * understated list with smaller bullets and tighter spacing. To achieve
 * this, override the default rules with more specific selectors
 * targeting .service-section elements that also carry the .fibro-process
 * or .fibro-why classes. Placing this block after the generic rules
 * ensures it takes precedence in the cascade without using !important.
 */
.service-section.fibro-process li,
.service-section.fibro-why li {
  margin-bottom: 10px;
  font-size: 18px;
}

.service-section.fibro-process li::before,
.service-section.fibro-why li::before {
  content: '\2022';
  color: #00b4d8;
  margin-left: 6px;
  font-size: 20px;
  line-height: 1;
}

/* Field indicators and error messages for forms */
.form-error {
  color: #e63946; /* red error color consistent with site palette */
  margin-bottom: 10px;
  font-weight: bold;
  text-align: right;
}

.field-required {
  color: #e63946;
  font-size: 0.8em;
  margin-left: 4px;
}

.field-optional {
  color: #6c757d;
  font-size: 0.8em;
  margin-left: 4px;
}

/* ---------------------------------------------------------------------
 * Diabetes page overrides
 *
 * The diabetes service page uses a custom body class (`diabetes-page`) to
 * apply page‑specific styling. Headings within service sections and other
 * major areas are centred to create a clean, balanced layout. Lists under
 * the overview section use native list markers (disc) and right alignment
 * to improve readability and avoid flex spacing issues. These rules apply
 * only to elements nested within `.diabetes-page` and do not affect other
 * pages.
 */
.diabetes-page .service-section h2,
.diabetes-page .expert-section h2,
.diabetes-page .why-us-section h2,
.diabetes-page .section-title {
  text-align: center;
}

.diabetes-page .diabetes-services {
  list-style: disc;
  list-style-position: inside;
  padding-right: 0;
  margin-right: 0;
}

.diabetes-page .diabetes-services li {
  display: list-item;
  margin-bottom: 15px;
  line-height: 1.6;
  text-align: right;
}

/* ---------------------------------------------------------------------
 * Disability assessment table
 *
 * The evaluation of diabetic disability percentages is presented in a table
 * for clarity. The wrapper enables horizontal scrolling on narrow screens.
 */
.disability-table-wrapper {
  overflow-x: auto;
  margin-top: 10px;
}

.disability-table {
  width: 100%;
  border-collapse: collapse;
  direction: rtl;
  font-size: 16px;
}

.disability-table th,
.disability-table td {
  border: 1px solid #e0e6f0;
  padding: 8px 12px;
  text-align: right;
}

.disability-table thead {
  background-color: #e7f0ff;
  font-weight: 700;
  color: #001675;
}

.disability-table tbody tr:nth-child(even) {
  background-color: #f8faff;
}

/* ---------------------------------------------------------------------
 * Diabetes page heading styling
 *
 * Enhance the visual impact of section headings on the diabetes page by
 * increasing font size, adding a coloured accent line beneath each
 * heading and ensuring proper responsive scaling. These rules apply
 * only to h2 elements within service sections and to the generic
 * `.section-title` class on the diabetes page so that other pages
 * remain unaffected.
 */
.diabetes-page .service-section h2,
.diabetes-page .section-title,
.diabetes-page .expert-section h2,
.diabetes-page .why-us-section h2 {
  position: relative;
  font-size: 2.2rem;
  color: #001675;
  margin-bottom: 30px;
  line-height: 1.3;
}
.diabetes-page .service-section h2::after,
.diabetes-page .section-title::after,
.diabetes-page .expert-section h2::after,
.diabetes-page .why-us-section h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #00b4d8;
  border-radius: 2px;
}

@media (max-width: 767px) {
  .diabetes-page .service-section h2,
  .diabetes-page .section-title,
  .diabetes-page .expert-section h2,
  .diabetes-page .why-us-section h2 {
    font-size: 1.6rem;
  }
}

/* ---------------------------------------------------------------------
 * Sticky promotional banner
 *
 * This banner appears fixed on the right side of specific pages to
 * promote the EMG service with a shimmering effect.  The banner has
 * a collapsed state showing a short tagline and an expanded state
 * revealing more details and a call‑to‑action link.  It is hidden
 * by default on pages that do not include the `.sticky-banner` element.
 */
.sticky-banner {
  position: fixed;
  /* Dock the banner flush against the right edge */
  right: 0;
  /* Centre the banner vertically on the screen for a prominent placement */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  font-family: inherit;
}
.sticky-banner .banner-wrapper {
  display: flex;
  align-items: center;
  background-color: #001675;
  color: #ffffff;
  /* Increase the border radius to soften the edges and separate the
     banner from the page content. */
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Shimmer effect overlay */
.sticky-banner .banner-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 100%);
  /* Slow down the shimmer for a smoother effect */
  animation: banner-shimmer 3s infinite;
  pointer-events: none;
}
@keyframes banner-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.sticky-banner .banner-toggle {
  padding: 16px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  z-index: 2;
}
.sticky-banner .banner-content {
  display: none;
  flex-direction: column;
  padding: 16px;
  max-width: 320px;
  z-index: 1;
}
.sticky-banner.open .banner-content {
  display: flex;
}
.sticky-banner .banner-content h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}
.sticky-banner .banner-content ul {
  margin: 0 0 12px 0;
  padding: 0 0 0 20px;
  list-style: disc;
}
.sticky-banner .banner-content ul li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.4;
}
.sticky-banner .banner-content ul li strong {
  font-weight: 700;
}
.sticky-banner .banner-content ul.banner-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}
.sticky-banner .banner-content ul.banner-benefits li {
  position: relative;
  padding-right: 28px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
}
.sticky-banner .banner-content ul.banner-benefits li::before {
  content: '\2714';
  position: absolute;
  right: 0;
  top: 0;
  color: #00b4d8;
  font-size: 16px;
  line-height: 1.4;
}
.sticky-banner .banner-cta {
  display: inline-block;
  background-color: #00b4d8;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.3s;
}
.sticky-banner .banner-cta:hover {
  opacity: 0.9;
}

/*
 * Close button styling for the sticky banner.  The button appears
 * inside the banner wrapper and allows visitors to dismiss the
 * promotion.  It is positioned in the top left corner (RTL
 * orientation), with sufficient size and contrast to be easily
 * discoverable.  Hover feedback improves accessibility.
 */
.sticky-banner .banner-close {
  position: absolute;
  top: 6px;
  left: 6px;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  z-index: 3;
  transition: opacity 0.2s;
}
.sticky-banner .banner-close:hover {
  opacity: 1;
}

/* Highlight the check icons in the benefits list with a vivid
 * turquoise colour.  This improves contrast against the dark
 * background and draws attention to each benefit. */
.sticky-banner .banner-content ul.banner-benefits li::before {
  color: #00e5c5;
}

/* Ensure the tagline text remains legible on dark backgrounds by
 * using a white colour.  The tagline is collapsed by default and
 * becomes the primary call‑out when the banner is closed. */
.sticky-banner .banner-toggle {
  color: #ffffff;
}
@media (max-width: 767px) {
  .sticky-banner {
    top: auto;
    bottom: 10%;
    right: 10px;
    transform: none;
  }
  .sticky-banner .banner-wrapper {
    flex-direction: column;
    /* Match the radius of the desktop banner for design consistency */
    border-radius: 12px;
  }
  .sticky-banner .banner-content {
    max-width: 260px;
  }
}

/* ---------------------------------------------------------------------
 * Diabetes expert metrics styles
 *
 * The metrics row under the expert section presents key achievements in a
 * clean, modern layout. Each item contains a large number and a
 * descriptive label. Flexbox is used to evenly distribute the items
 * across the container, with wrap behaviour on small screens. Box
 * shadows and a light background colour provide subtle depth.
 */
.expert-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.expert-metrics .metric-item {
  flex: 1 1 calc(33.333% - 20px);
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}
.expert-metrics .metric-number {
  font-size: 2.5rem;
  color: #001675;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1;
}
.expert-metrics .metric-label {
  font-size: 1rem;
  color: #555;
}
@media (max-width: 767px) {
  .expert-metrics .metric-item {
    flex: 1 1 100%;
  }
}


/* ---------------------------------------------------------------------
 * Fibromyalgia custom list layout
 *
 * Replace unordered lists with flexible containers for process and why
 * sections on the fibromyalgia page. The .fibro-list wraps individual
 * .fibro-item rows. Each item displays a small coloured circle and a
 * paragraph of text. This design reduces whitespace and ensures
 * consistent alignment in RTL layouts. The CSS is defined here at the
 * end of the file for maximum specificity.
 */
.fibro-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
  padding: 0;
}

.fibro-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  direction: rtl;
}

.fibro-item .bullet {
  width: 8px;
  height: 8px;
  margin-top: 8px;
  background-color: #00b4d8;
  border-radius: 50%;
  flex-shrink: 0;
}

.fibro-item p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: #333333;
}

a {
  text-decoration: none;
}

/* Phone link styling
 * Hide raw numbers from the interface by replacing them with call‑to‑action
 * text.  The .phone-link class is used for telephone anchors in the
 * footer and other informational sections.  It uses a prominent
 * accent colour and underline on hover to indicate interactivity.
 */
.phone-link {
  color: #00b4d8;
  font-weight: 700;
  text-decoration: underline;
}
.phone-link:hover {
  opacity: 0.85;
}

/* Header and navigation */
header {
  background: #001675;
  color: #ffffff;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

header .logo img {
  height: 50px;
}

header nav {
  /* Keep the navigation as a fixed‑width element so it sits directly next
     to the logo rather than expanding across the header.  We remove the
     automatic left margin so the menu categories appear immediately
     adjacent to the logo on the right (RTL layout). */
  flex: 0 1 auto;
  /* Without a left margin the nav aligns right after the logo */

  /* Add spacing between the logo and the navigation. In RTL layouts
     margin-right creates space on the right side of the nav (adjacent
     to the logo), preventing the menu items from appearing flush
     against the logo. */
  /* Increase the space between the logo and the menu to create a clearer separation */
  margin-right: 40px;
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  justify-content: flex-end;
}

header nav ul li a {
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  transition: color 0.3s ease;
}

/* Highlight the active menu item.  The class ``active`` should be set on
 * the anchor element corresponding to the current page.  It changes
 * the colour and adds an underline for clear navigation context. */
header nav ul li a.active {
  color: #00b4d8;
  border-bottom: 2px solid #00b4d8;
}

header nav ul li a:hover {
  color: #00b4d8;
}

/* Dropdown menu styling for grouped services
 * The navigation now includes a "services" item with a nested list of
 * service pages.  We position the dropdown absolutely below its parent
 * and hide it until the user hovers over the parent.  The arrow icon
 * (added via a pseudo‑element) hints that more options are available.
 */
header nav ul li.dropdown {
  position: relative;
}
header nav ul li.dropdown > a::after {
  content: '\25BC'; /* downwards triangle indicator */
  display: inline-block;
  margin-right: 4px;
  font-size: 10px;
}
header nav ul li.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #001675;
  list-style: none;
  padding: 10px 0;
  min-width: 200px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
header nav ul li.dropdown .dropdown-menu li a {
  display: block;
  padding: 8px 20px;
  color: #ffffff;
  white-space: nowrap;
  font-weight: 600;
}
header nav ul li.dropdown .dropdown-menu li a:hover {
  background: #002a6d;
  color: #00b4d8;
}
header nav ul li.dropdown:hover .dropdown-menu {
  display: block;
}

/* On mobile (when the nav becomes vertical), show dropdown items
 * as part of the list rather than as an absolute overlay.  We reset
 * positioning and styling and indent the subitems for clarity. */
@media (max-width: 992px) {
  header nav ul li.dropdown {
    position: static;
  }
  header nav ul li.dropdown > a::after {
    display: none;
  }
  header nav ul li.dropdown .dropdown-menu {
    position: static;
    display: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  header nav ul li.dropdown.open .dropdown-menu {
    display: block;
  }
  header nav ul li.dropdown .dropdown-menu li a {
    padding: 12px 40px;
    color: #ffffff;
  }
  header nav ul li.dropdown .dropdown-menu li a:hover {
    background: rgba(0, 180, 216, 0.2);
    color: #00b4d8;
  }
}

/* Single article hero padding
 * Article pages use a separate hero class that did not account for
 * the fixed header.  Provide generous top padding so the hero text
 * does not sit underneath the navigation bar. */
/* The single article hero appears on article pages.  Combine both
 * classes (.articles-hero.single-article-hero) to raise the
 * specificity above the base .articles-hero rule and ensure the
 * custom padding takes effect.  Without the combined selector
 * .articles-hero would override these values because it appears
 * later in the stylesheet. */
.articles-hero.single-article-hero {
  /* Add extra top padding and margin to ensure the hero appears
   * fully below the fixed header on article pages.  The margin
   * separates the hero from the header, while the padding ensures
   * internal spacing for the content. */
  margin-top: 80px;
  padding: 120px 20px 60px;
}

/* Position the articles listing hero below the fixed header
 * When viewing the blog overview page, the hero banner sits
 * underneath the persistent navigation bar.  Adding both a margin
 * and extra padding ensures the headline and description are fully
 * visible and not obscured by the menu. */
.articles-hero:not(.single-article-hero) {
  /* Provide additional offset below the fixed header.  The combined
     height of the header and call‑to‑action buttons on desktop can
     exceed 80px, so a larger top margin and padding ensure the
     hero image is not obscured. */
  margin-top: 120px;
  padding-top: 160px;
}

/* ------------------------------------------------------------------
 * Article page improvements
 *
 * Give individual article content a comfortable maximum width, center
 * it on the page and improve line spacing for readability.  Add a
 * utility class for images inside articles that ensures they scale
 * responsively, sit nicely within the column and have a subtle
 * rounding on the corners.  Finally, style a contact section at
 * the bottom of each article with a dark gradient background and
 * custom form elements, following the colour palette of the site.
 */
main article {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
  line-height: 1.8;
}

main article .article-image {
  max-width: 100%;
  height: auto;
  margin: 0 auto 30px;
  display: block;
  border-radius: 12px;
}

.article-contact-section {
  background: linear-gradient(180deg, #001675 0%, #002a6d 100%);
  color: #ffffff;
  padding: 60px 20px;
  text-align: right;
  margin: 60px 0;
}

.article-contact-section h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 20px;
}

.article-contact-section p {
  font-size: 18px;
  margin-bottom: 30px;
}

.article-contact-section .contact-form {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.article-contact-section .contact-form label {
  display: none;
}

.article-contact-section .contact-form input,
.article-contact-section .contact-form select,
.article-contact-section .contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  color: #001675;
}

.article-contact-section .contact-form textarea {
  min-height: 100px;
  resize: vertical;
}

.article-contact-section .contact-form button {
  background: #00b4d8;
  color: #ffffff;
  padding: 14px;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease;
}

.article-contact-section .contact-form button:hover {
  opacity: 0.9;
}

header .cta-buttons {
  display: flex;
  gap: 10px;
  /* Push the call‑to‑action buttons to the opposite side of the header so
     the navigation remains adjacent to the logo.  In RTL layouts this
     property creates a flexible space between the nav and CTA buttons. */
  margin-left: auto;
  margin-right: 20px;
}

header .cta-buttons a {
  display: inline-block;
  background: #00b4d8;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 700;
  transition: 0.3s ease;
}

header .cta-buttons a.secondary {
  background: transparent;
  border: 2px solid #00b4d8;
  color: #00b4d8;
}

header .cta-buttons a:hover {
  opacity: 0.85;
}

/* Burger menu for mobile */
.menu-toggle {
  display: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
}

.menu-toggle span {
  display: block;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
}

/* Hero section */
/* Generic hero section base styles */
.hero {
  color: #ffffff;
  padding: 200px 20px 100px;
  margin-top: 80px; /* accommodate fixed header */
  position: relative;
  overflow: hidden;
}

/* Default gradient background for heroes. This may be overridden
 * for specific pages (e.g., home-hero, thank-you-hero) with
 * background images.
 */
.hero {
  background: linear-gradient(180deg, #001675 0%, #002a6d 100%);
  text-align: center;
}

.hero h1 {
  font-size: 60px;
  font-weight: 800;
  margin-bottom: 20px;
}

.hero p {
  font-size: 24px;
  margin-bottom: 30px;
}

.hero .buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hero .buttons a {
  background: #00b4d8;
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 30px;
  font-weight: 700;
  transition: 0.3s ease;
}

.hero .buttons a.secondary {
  background: transparent;
  border: 2px solid #00b4d8;
  color: #00b4d8;
}

.hero .buttons a:hover {
  opacity: 0.85;
}

/* Generic section container */
.section {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 48px;
  margin-bottom: 40px;
  font-weight: 700;
  color: #001675;
}

/* Services overview */
.services {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.service-card {
  background: #ffffff;
  border-radius: 40px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  flex: 1 1 280px;
  max-width: 380px;
  padding: 40px 30px;
  text-align: center;
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-card img {
  height: 60px;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #001675;
  font-weight: 700;
}

.service-card p {
  font-size: 18px;
  color: #333333;
  margin-bottom: 20px;
}

.service-card a {
  display: inline-block;
  background: #00b4d8;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 600;
  transition: 0.3s ease;
}

.service-card a:hover {
  opacity: 0.9;
}

/* Why us section */
.why-us {
  background: #001675;
  color: #ffffff;
  border-radius: 60px;
  padding: 60px 40px;
  margin-top: 40px;
}

.why-us h2 {
  font-size: 42px;
  margin-bottom: 30px;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
}

.why-us p {
  font-size: 20px;
  margin-bottom: 20px;
}

.why-us .points {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.why-us .point {
  flex: 1 1 300px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.why-us .point img {
  width: 40px;
  height: 40px;
}

.why-us .point h4 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: 700;
}

.why-us .point p {
  /*
   * Improve contrast for explanatory text within the dark “why‑us” cards.
   * Previously this text was a light grey on a deep blue background which
   * some users found difficult to read.  Use a lighter blue‑white shade
   * instead for better legibility while maintaining the overall colour
   * palette.  This ensures compliance with accessibility guidelines for
   * colour contrast.
   */
  font-size: 18px;
  color: #f0f4ff;
}

/* Testimonials */
.testimonials {
  background: #f9fbff;
  border-radius: 60px;
  padding: 60px 40px;
  margin-top: 40px;
}

/*
 * EMG Information Section
 * Provides a balanced split layout between descriptive text and an
 * illustrative image explaining what EMG is.  The section uses a
 * light background to maintain readability and generous spacing to
 * separate it from adjacent sections.
 */
.info-section {
  background: #ffffff;
  padding: 60px 20px;
}

.info-section .info-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.info-section .info-text {
  flex: 1 1 500px;
  color: #001675;
}

.info-section .info-text h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #001675;
}

.info-section .info-text p {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333333;
}

.info-section .info-image {
  flex: 1 1 400px;
  text-align: center;
}

.info-section .info-image img {
  max-width: 100%;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/*
 * Video Section
 * Embeds YouTube videos side by side on desktop and stacks them on
 * mobile.  Each iframe maintains the 16:9 aspect ratio and is
 * enclosed in a card-like container with rounded corners.
 */
.video-section {
  background: #f9fbff;
  padding: 60px 20px;
  text-align: center;
}

.video-section h2 {
  font-size: 40px;
  margin-bottom: 30px;
  color: #001675;
  font-weight: 700;
}

.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.video-item {
  flex: 1 1 400px;
  max-width: 600px;
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.video-item iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 30px;
}

/*
 * Process Section
 * Highlights the simple steps involved in scheduling and performing an
 * EMG test.  Each step is presented in a card with an icon and short
 * description.  On mobile the cards stack vertically.
 */
.process {
  background: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

.process h2 {
  font-size: 40px;
  margin-bottom: 30px;
  color: #001675;
  font-weight: 700;
}

.process-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.process-steps .step {
  flex: 1 1 250px;
  max-width: 300px;
  background: #f9fbff;
  border-radius: 30px;
  padding: 30px 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.process-steps .step img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.process-steps .step h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #001675;
  font-weight: 700;
}

.process-steps .step p {
  font-size: 16px;
  color: #333333;
}

/*
 * Why Choose Us Section
 * Provides compelling reasons to use the centre for EMG testing.
 * It uses the dark blue background and light text consistent with
 * other call‑out sections on the site.
 */
.why-center {
  background: #001675;
  color: #ffffff;
  padding: 60px 20px;
  border-radius: 60px;
  margin: 40px auto;
  max-width: 1000px;
  text-align: center;
}

.why-center h2 {
  font-size: 40px;
  margin-bottom: 20px;
  font-weight: 700;
  color: #ffffff;
}

.why-center ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-center ul li {
  font-size: 18px;
  margin-bottom: 15px;
  position: relative;
  padding-right: 24px;
}

.why-center ul li::before {
  /* Use a Unicode check mark instead of relying on external fonts */
  content: '\2714';
  position: absolute;
  right: 0;
  top: 0;
  color: #00b4d8;
}

.testimonials h2 {
  color: #001675;
  margin-bottom: 40px;
  font-size: 42px;
  text-align: center;
  font-weight: 700;
}

.testimonials .testimonial-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/*
  Testimonial card styling

  The testimonials throughout the site share a unified design. Each card now contains
  a circular avatar of a satisfied customer with a small blue check mark to
  indicate authenticity, a row of five gold stars, a grey quotation box for the
  review text, and a footer with the reviewer's name and the specific service
  they received. The card uses right‑to‑left directionality to better support
  Hebrew content, and the elements are laid out vertically to make the cards
  easy to scan on both desktop and mobile devices.
*/
.testimonial-card {
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  flex: 1 1 280px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  direction: rtl;
}

/* Header holds the avatar and star rating */
.testimonial-card .testimonial-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 10px;
}

/* Wrapper for the circular avatar */
.testimonial-card .avatar-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 8px;
}

.testimonial-card .avatar-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Small check mark badge on the avatar */
.testimonial-card .avatar-wrapper .check-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(25%, 25%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00b4d8;
  color: #ffffff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Star rating styling */
.testimonial-card .stars {
  display: flex;
  justify-content: center;
  gap: 2px;
  color: #ffcc00;
  font-size: 18px;
  margin-bottom: 10px;
}

.testimonial-card .stars span {
  display: inline-block;
}

/* Quotation container with grey background */
.testimonial-card .testimonial-text {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 15px;
  width: 100%;
  margin-bottom: 12px;
}

.testimonial-card .testimonial-text p {
  margin: 0;
  font-size: 16px;
  color: #333333;
  line-height: 1.5;
  position: relative;
}

/* Opening and closing quotation marks */
.testimonial-card .testimonial-text p::before {
  content: '\201C'; /* left double quotation mark */
  font-size: 24px;
  color: #a0a0a0;
  margin-left: 4px;
  margin-right: 4px;
}

.testimonial-card .testimonial-text p::after {
  content: '\201D'; /* right double quotation mark */
  font-size: 24px;
  color: #a0a0a0;
  margin-left: 4px;
  margin-right: 4px;
}

/* Footer with name and service */
.testimonial-card .testimonial-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  font-size: 14px;
  color: #333333;
}

.testimonial-card .name {
  font-weight: 700;
  color: #001675;
  font-size: 16px;
}

.testimonial-card .service {
  font-weight: 500;
  color: #555555;
  font-size: 14px;
}

/* Contact section */
.contact-section {
  background: #001675;
  color: #ffffff;
  border-radius: 60px;
  padding: 60px 40px;
  margin-top: 40px;
  text-align: center;
}

.contact-section h2 {
  font-size: 42px;
  margin-bottom: 20px;
  font-weight: 700;
}

.contact-section p {
  font-size: 20px;
  margin-bottom: 30px;
}

.contact-section a {
  background: #00b4d8;
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 30px;
  font-weight: 700;
  transition: 0.3s ease;
}

.contact-section a:hover {
  opacity: 0.9;
}

/* --------------------------------------------------
 * Additional sections for enhanced homepage
 *
 * The following rules introduce new components for the
 * process timeline, team presentation, FAQ accordion
 * and a high-impact guarantee banner.  These styles
 * maintain the existing colour palette and rounded
 * aesthetic while providing fresh visual variation.
 */

/* Process section */
.process .steps {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.process .step {
  background: #ffffff;
  border-radius: 40px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
  flex: 1 1 250px;
  max-width: 350px;
}

.process .step img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 15px;
}

.process .step h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #001675;
  font-weight: 700;
}

.process .step p {
  font-size: 16px;
  color: #333333;
}

/* Team section */
.team .team-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.team .team-text {
  flex: 1 1 500px;
}

.team .team-text p {
  font-size: 18px;
  color: #333333;
  margin-bottom: 15px;
}

.team .team-image {
  flex: 1 1 400px;
  text-align: center;
}

.team .team-image img {
  width: 100%;
  border-radius: 40px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* FAQ section */
.faq .faq-list details {
  margin-bottom: 15px;
  background: #ffffff;
  border-radius: 30px;
  padding: 20px 25px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------------------------------
 * Statistics Section
 * Displays key numbers highlighting the clinic’s expertise and success.
 */
.stats .stats-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.stats .stat-card {
  background: #ffffff;
  border-radius: 40px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  flex: 1 1 280px;
  max-width: 360px;
  padding: 40px 30px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stats .stat-card img {
  width: 80px;
  height: auto;
  margin-bottom: 20px;
}

.stats .stat-card h3 {
  font-size: 28px;
  color: #001675;
  margin-bottom: 10px;
}

.stats .stat-card p {
  font-size: 16px;
  color: #333333;
}

.stats .stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------------------------------
 * Comparison Section
 * Highlights the differences between the P. Oz medical centre and a private doctor.
 */
.compare .compare-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

.compare .compare-item {
  background: #ffffff;
  border-radius: 40px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  flex: 1 1 300px;
  max-width: 480px;
  padding: 40px 30px;
}

.compare .compare-item h3 {
  font-size: 28px;
  color: #001675;
  margin-bottom: 15px;
  text-align: center;
}

.compare .compare-item ul {
  list-style: none;
  padding: 0 20px;
}

.compare .compare-item ul li {
  position: relative;
  padding-right: 25px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333333;
}

.compare .compare-item ul li::before {
  content: "✔";
  position: absolute;
  right: 0;
  top: 0;
  color: #00b4d8;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Sticky WhatsApp Widget
 * A floating action button that stays fixed to the page corner and opens
 * a WhatsApp conversation with a pre‑filled message when clicked.  The
 * colour and sizing follow WhatsApp brand guidelines and include a
 * subtle shadow and scaling on hover for a tactile feel.
 */
.whatsapp-widget {
  position: fixed;
  bottom: 20px;
  /* Position on the left for RTL sites so it's easy to reach with the thumb. */
  left: 20px;
  /* Increase size of the WhatsApp button for better visibility */
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Raise z-index above the cookie banner (z-index 10000) so the
     WhatsApp button is always visible. */
  z-index: 10001;
  /* Slightly heavier shadow complements the larger size */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.whatsapp-widget:hover {
  /* Make the hover effect more pronounced */
  transform: scale(1.15);
}

.whatsapp-widget svg {
  width: 32px;
  height: 32px;
  fill: #ffffff;
}

/* Hide legacy WhatsApp anchors that still use target="_blank" */
.whatsapp-widget[target="_blank"] {
  display: none !important;
}

/* Highlight class to emphasize important words in hero sections */
.highlight {
  /* Default highlight colour uses a dark navy for light backgrounds and white outline for readability. */
  color: #001675;
  font-weight: 700;
  /* White outline around the letters improves readability on pale backgrounds */
  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

/* Override highlight colour in hero sections with dark backgrounds for better contrast. */
.service-hero .highlight {
  color: #00b4d8;
  /* Remove white outline; the bright turquoise provides sufficient contrast on dark gradients */
  text-shadow: none;
}

/* ---------------------------------------------------------------------
 * WhatsApp Icon in Header (Mobile)
 * A compact circular button displayed only on small screens. It links to
 * WhatsApp with a pre‑defined message and lives next to the hamburger
 * toggle in the header. Hidden on desktop to avoid clutter.
 */
.whatsapp-icon {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #25D366;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.whatsapp-icon svg {
  width: 20px;
  height: 20px;
  fill: #ffffff;
}

@media (max-width: 768px) {
  .whatsapp-icon {
    display: flex;
  }
  /* Hide the larger CTA buttons on mobile to avoid clutter; the WhatsApp
     icon acts as the quick contact method in the header. */
  header .cta-buttons {
    display: none;
  }
}

.faq .faq-list summary {
  font-weight: 700;
  font-size: 20px;
  color: #001675;
  cursor: pointer;
  position: relative;
}

.faq .faq-list summary::-webkit-details-marker {
  display: none;
}

.faq .faq-list summary::after {
  content: '\25BC';
  position: absolute;
  left: 0;
  font-size: 18px;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.faq .faq-list details[open] summary::after {
  transform: rotate(180deg);
}

.faq .faq-list p {
  font-size: 16px;
  color: #333333;
  margin-top: 10px;
}

/* Guarantee section */
.guarantee {
  /* Guarantee/consultation call‑to‑action banner */
  /* Use a slightly lighter blue and a softer border radius to improve readability */
  background: #002054;
  color: #f0f4ff;
  border-radius: 30px;
  padding: 60px 40px;
  text-align: center;
  /* centre the banner within the page width */
  margin: 40px auto;
  max-width: 1200px;
}

/* Mission section */
.mission .mission-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.mission .mission-image {
  flex: 1 1 400px;
  text-align: center;
}

.mission .mission-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 40px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.mission .mission-text {
  flex: 1 1 500px;
}

.mission .mission-text p {
  font-size: 18px;
  color: #333333;
  margin-bottom: 15px;
}

/* Gallery section */
.gallery .gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.gallery .gallery-item {
  flex: 1 1 300px;
  max-width: 350px;
  text-align: center;
}

.gallery .gallery-item img {
  width: 100%;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.gallery .gallery-item p {
  margin-top: 10px;
  font-size: 16px;
  color: #333333;
}

.guarantee h2 {
  font-size: 36px;
  margin-bottom: 20px;
  font-weight: 700;
  color: #ffffff;
}

.guarantee p {
  font-size: 18px;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: #f0f4ff;
}

.guarantee .button {
  background: #00b4d8;
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 30px;
  font-weight: 700;
  transition: 0.3s ease;
  font-size: 18px;
}

.guarantee .button:hover {
  opacity: 0.9;
}

/* Mini testimonials for service pages */
.mini-testimonials {
  margin-top: 40px;
}
.mini-testimonials h2 {
  text-align: center;
  font-size: 40px;
  margin-bottom: 30px;
  color: #001675;
  font-weight: 700;
}
.mini-testimonials .testimonial-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.mini-testimonials .testimonial-card {
  /*
    Inherit most styling from the generic testimonial card. Override only the
    layout properties specific to mini testimonials. We want the same avatar,
    star row, grey quote box and footer as in the main testimonial cards. The
    direction is right‑to‑left and the text should align to the right.
  */
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  flex: 1 1 280px;
  max-width: 330px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  direction: rtl;
}
/* Remove the old mini testimonial overrides for stars, text and name. The
   generic testimonial styles now handle these elements uniformly. */

/* Urgency sections */
.urgency {
  background: #ffffff;
  border-radius: 40px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  padding: 40px 30px;
  margin-top: 40px;
}
.urgency h2 {
  text-align: center;
  font-size: 40px;
  margin-bottom: 25px;
  color: #001675;
  font-weight: 700;
}
.urgency ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.urgency ul li {
  margin-bottom: 12px;
  position: relative;
  padding-right: 24px;
  font-size: 18px;
  color: #001675;
}
.urgency ul li strong {
  color: #00b4d8;
}
.urgency ul li::before {
  content: '✔';
  position: absolute;
  right: 0;
  top: 0;
  color: #00b4d8;
  font-weight: bold;
}
.urgency .button {
  background: #00b4d8;
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 30px;
  font-weight: 700;
  display: inline-block;
  transition: 0.3s ease;
}
.urgency .button:hover {
  opacity: 0.9;
}

/* Footer */
footer {
  background: #001675;
  color: #ffffff;
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

footer h3 {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 700;
}

footer ul {
  list-style: none;
}

footer ul li {
  margin-bottom: 10px;
  font-size: 16px;
}

footer ul li a {
  color: #e5e5e5;
  text-decoration: none;
  transition: color 0.3s ease;
}

footer ul li a:hover {
  color: #00b4d8;
}

footer .contact p {
  margin-bottom: 10px;
  font-size: 16px;
}


.service-section {
  padding: 60px 20px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Risk sections emphasise urgency */
.service-section.risks {
  /*
   * Risk call‑out blocks use a very light pink background and a deep red accent.
   * Previously the text and headings had poor contrast (dark red on pale pink)
   * which did not meet WCAG 2.1 AA contrast requirements.  The colours below
   * lighten the background and darken the text to improve readability while
   * still conveying urgency.  The border is softened to blend with the new
   * background.
   */
  background-color: #fff5f5;
  border: 1px solid #fbd5d5;
  border-radius: 20px;
  padding: 40px 20px;
  margin: 40px auto;
}
/*
 * Headings and emphasised text inside risk sections are rendered in a deep
 * maroon colour to maximise contrast against the pale pink background.  Regular
 * list items and paragraphs adopt the site’s base dark blue so that the
 * emphasised phrases stand out clearly.
 */
/*
 * Use a deep burgundy accent (#b91c1c) for risk headings and emphasised phrases.
 * This colour provides a contrast ratio of over 6:1 against the pale pink
 * background, satisfying WCAG 2.1 AA for normal text.  Regular list items
 * and paragraphs retain the dark blue used throughout the site.
 */
.service-section.risks h2 {
  color: #b91c1c;
}
.service-section.risks ul li strong {
  color: #b91c1c;
}
.service-section.risks ul li,
.service-section.risks p {
  color: #002054;
}
.service-section.risks a.button {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

/* Additional sections on thank‑you page */
.next-steps, .more-info {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 60px 20px;
  max-width: 1000px;
  margin: 40px auto;
}
.next-steps ul, .more-info ul {
  list-style: disc inside;
  margin: 20px 0;
  padding: 0;
}
.next-steps .buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.next-steps .buttons .button {
  background: #00b4d8;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 700;
  text-align: center;
}

.service-section h2 {
  font-size: 36px;
  color: #001675;
  margin-bottom: 20px;
  font-weight: 700;
}

.service-section p {
  font-size: 18px;
  color: #333333;
  margin-bottom: 20px;
}

/*
 * Override the general service-section colour rules for the guarantee banners.
 * These call-to‑action banners live on a dark blue background (#002054), so
 * inheriting the default dark heading (#001675) and paragraph (#333333)
 * colours made the text illegible. To improve contrast and meet WCAG
 * guidelines, ensure that all headings and paragraphs inside guarantee
 * sections use a light colour. Using a more specific selector
 * (.service-section.guarantee) gives this rule higher specificity than
 * the generic .service-section rules defined above without relying on
 * !important.
 */
.service-section.guarantee h2,
.service-section.guarantee p {
  color: #f0f4ff;
}

.service-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-section li {
  margin-bottom: 15px;
  font-size: 18px;
  display: flex;
  align-items: flex-start;
}

.service-section li::before {
  content: '\2022';
  color: #00b4d8;
  margin-left: 8px;
  font-size: 28px;
  line-height: 1;
}

/*
 * Ensure all text within generic service sections aligns to the right.  While
 * the entire document is already RTL, explicitly aligning paragraphs and
 * list items improves consistency across browsers and makes long
 * descriptions easier to read.  This rule applies only to service
 * sections and does not affect centred sections like success stories.
 */
.service-section {
  text-align: right;
}
.service-section li {
  text-align: right;
}

/*
 * Override default list styling for treatment expanded sections.
 * The general .service-section list styling uses flex and a custom bullet
 * marker; however this layout can cause awkward line breaks for long
 * descriptive bullet points (as seen in the neurological treatment area).
 * For sections marked with .treatment-expanded, revert to a standard
 * list layout with disk bullets and proper indentation.
 */
.service-section.treatment-expanded ul {
  list-style: disc inside;
  padding: 0;
  margin: 0 0 0 1.5em;
}
.service-section.treatment-expanded li {
  display: list-item;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.6;
  color: #002054;
}
.service-section.treatment-expanded li::before {
  content: none;
}

/* CTA form */
.cta-form {
  background: #001675;
  color: #ffffff;
  border-radius: 60px;
  padding: 40px 30px;
  margin: 40px auto;
  max-width: 600px;
  text-align: center;
}

.cta-form h2 {
  margin-bottom: 20px;
  font-size: 32px;
  font-weight: 700;
}

.cta-form form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cta-form input,
.cta-form textarea,
.cta-form select {
  padding: 12px 15px;
  border-radius: 30px;
  border: 2px solid #00b4d8;
  background: #ffffff;
  color: #001675;
  font-size: 16px;
}

.cta-form input::placeholder,
.cta-form textarea::placeholder {
  /* Ensure placeholder text matches the design language: use the same font
     as the rest of the site, align it to the right for RTL languages and
     choose a subtle grey colour.  This style applies to call‑to‑action forms */
  color: #888888;
  font-family: 'Assistant', sans-serif;
  font-size: 16px;
  text-align: right;
}

/* Consistent placeholder styling across all contact forms (hero forms,
   generic contact forms and CTA forms).  Align text to the right for
   Hebrew placeholders, apply the site typeface and size, and choose
   a neutral grey for accessibility.  Grouping these selectors
   increases specificity so these rules override any previous
   definitions. */
.hero-form input::placeholder,
.hero-form textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  font-family: 'Assistant', sans-serif;
  font-size: 16px;
  color: #888888;
  text-align: right;
}

.cta-form button {
  background: #00b4d8;
  color: #ffffff;
  padding: 15px;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease;
}

.cta-form button:hover {
  opacity: 0.9;
}

/* Responsive design */
@media (max-width: 768px) {
  /* On small screens keep the header elements on a single row so the
     logo, burger toggle and WhatsApp icon align neatly.  The nav menu
     is hidden by default and appears as an overlay below the header
     when opened. */
  header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  /* Hide the navigation list by default on mobile.  It will be
     positioned absolutely below the header and revealed when the
     `open` class is applied via JavaScript. */
  header nav {
    /* Position the mobile menu fixed below the header so it overlays
       the page content when opened.  Using a fixed position avoids
       the menu pushing down the header and ensures consistent
       placement regardless of scroll position. */
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    width: 100%;
    background: #001675;
    display: none;
    z-index: 999;
  }
  header nav ul {
    flex-direction: column;
    width: 100%;
    padding: 10px 0;
  }
  /* Each navigation item spans the full width and has generous padding
     for easy tapping. */
  header nav ul li {
    width: 100%;
  }
  header nav ul li a {
    display: block;
    padding: 12px 20px;
  }
  /* Show the nav overlay when the menu is toggled open.  Limit the
     maximum height to prevent the menu from covering the entire
     viewport; allow vertical scrolling if the list is long. */
  header nav.open {
    display: block;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  /* Adjust CTA buttons on mobile: hide them to avoid clutter (the
     WhatsApp icon serves as the quick contact method). */
  header .cta-buttons {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
  /* Reduce hero paddings and font sizes on mobile for better fit */
  .hero {
    padding: 150px 20px 80px;
  }
  .hero h1 {
    font-size: 40px;
  }
  .hero p {
    font-size: 18px;
  }
  .section-title {
    font-size: 36px;
  }
  .why-us h2, .testimonials h2, .contact-section h2 {
    font-size: 32px;
  }
  .why-us .points {
    flex-direction: column;
  }
  footer {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Responsive adjustments for new sections */
  .process .steps {
    flex-direction: column;
  }
  .team .team-content {
    flex-direction: column-reverse;
  }
  .team .team-image img {
    max-width: 80%;
  }
  .faq .faq-list details {
    padding: 15px 20px;
  }
  .guarantee h2 {
    font-size: 28px;
    color: #ffffff;
  }
  .guarantee p {
    font-size: 16px;
    color: #f0f4ff;
  }

  /* Responsive adjustments for new sections */
  .stats .stats-cards {
    flex-direction: column;
    align-items: center;
  }
  .compare .compare-grid {
    flex-direction: column;
    align-items: stretch;
  }

  /* Mission and gallery responsive adjustments */
  .mission .mission-content {
    flex-direction: column;
    align-items: center;
  }
  .mission .mission-image img {
    max-width: 80%;
  }
  .gallery .gallery-grid {
    flex-direction: column;
    align-items: center;
  }
  .gallery .gallery-item {
    max-width: 80%;
  }

  /* Responsive adjustments for mini testimonials */
  .mini-testimonials .testimonial-list {
    flex-direction: column;
    align-items: center;
  }

  /* Responsive adjustments for urgency sections */
  .urgency {
    padding: 30px 20px;
  }
  .urgency h2 {
    font-size: 32px;
  }
  .urgency ul li {
    font-size: 16px;
    padding-right: 20px;
  }
}

/* Ensure all form fields across hero, contact and CTA sections
   use RTL directionality and align text to the right.  Apply the
   Assistant typeface and consistent sizing so that both user input
   and placeholder text appear uniform.  Without this rule some
   placeholders defaulted to left alignment and a generic font. */
.hero-form input,
.hero-form textarea,
.contact-form input,
.contact-form textarea,
.cta-form input,
.cta-form textarea {
  direction: rtl;
  text-align: right;
  font-family: 'Assistant', sans-serif;
  font-size: 16px;
  color: #001675;
}

/*
  Risk section styling (Fibromyalgia page)

  The risk items on the fibromyalgia page were previously displayed in a single
  column without any styling. To create a more engaging and consistent
  experience, each risk item is now presented as its own card within a
  responsive grid. The cards feature a white background, rounded corners,
  subtle border and drop shadow, and centered Hebrew text. Headings use the
  site’s accent colour to draw attention, and the layout wraps gracefully on
  smaller screens. This styling applies specifically to the `.risks-list`
  container and its `.risk-item` children.
*/
.risks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

.risk-item {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 20px;
  flex: 1 1 280px;
  max-width: 350px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* Right-align Hebrew text and ensure RTL direction */
  text-align: right;
  direction: rtl;
}

.risk-item h3 {
  color: #0077b6;
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 700;
}

.risk-item p {
  font-size: 18px;
  line-height: 1.4;
}

/* Highlight key phrases within risk descriptions */
.risk-item p strong {
  color: #0077b6;
  font-weight: 700;
}
/* === WhatsApp sticky widget and popup === */

/* Sticky WhatsApp button in the bottom left corner with flashing animation */
.whatsapp-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #25D366;
  /* Slightly faster flash animation to draw attention */
  animation: wa-flash 1.5s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  cursor: pointer;
}

/* Load the WhatsApp icon inside the button */
.whatsapp-widget::before {
  content: '';
  /* Correct relative path to the WhatsApp icon; ascend one level from css/ to images/ */
  background: url('../images/whatsapp-icon.svg') center/60% no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  /* Invert the icon colours so the WhatsApp logo appears white on
     the green background without editing the SVG itself. */
  filter: invert(1);
}

/* Notification badge for the WhatsApp widget.  Shows a red circle with the
 * number 1 in the top right corner to indicate a new message.  Uses
 * absolute positioning relative to the button (which is positioned via
 * fixed).  Pointer events are disabled so the badge does not block
 * clicks on the widget itself. */
.whatsapp-widget::after {
  content: '1';
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #e63946;
  color: #ffffff;
  /* Enlarged badge for better visibility */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

@keyframes wa-flash {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 0 10px 10px rgba(37, 211, 102, 0);
  }
}

/* WhatsApp popup container covering the full viewport */
.wa-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  justify-content: center;
  align-items: center;
  direction: rtl;
}

/* When the popup has the class 'open' it becomes visible */
.wa-popup.open {
  display: flex;
}

/* Dark overlay behind the modal */
.wa-popup .wa-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

/* The modal itself */
.wa-popup .wa-modal {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Close button in the top-left (because of RTL) */
.wa-popup .wa-close {
  position: absolute;
  top: 10px;
  left: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

/* Chat message box styling */
.wa-popup .wa-chat .wa-message {
  background: #f0f0f8;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333333;
}

/* Typing indicator with animated dots */
.typing-indicator {
  display: flex;
  gap: 5px;
  margin-bottom: 15px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #999999;
  border-radius: 50%;
  animation: typing 1.2s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
}

/* Form fields styling */
.wa-form .wa-field {
  margin-bottom: 12px;
}

.wa-form label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.wa-form input,
.wa-form select,
.wa-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.wa-form textarea {
  min-height: 80px;
  resize: vertical;
}

.wa-form button {
  background: #25D366;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
}

/* Responsive tweaks for the WhatsApp modal */
@media (max-width: 480px) {
  .wa-popup .wa-modal {
    padding: 15px;
  }
  .wa-form button {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------
 * Improved WhatsApp chat UI
 * Adjust modal layout to mimic a WhatsApp conversation and use a
 * patterned background similar to the real app. The chat window scrolls
 * independently and the form sits at the bottom with its own styling.
 */

/* Intensify the blinking animation on the floating button */
.whatsapp-widget {
  animation: wa-flash 1.5s infinite;
}

@keyframes wa-flash {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  50% {
    box-shadow: 0 0 20px 20px rgba(37, 211, 102, 0);
  }
}

/* Adjust the modal to remove padding and stack children vertically */
.wa-popup .wa-modal {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The chat window uses the WhatsApp‑like doodle background and scrolls */
.wa-chat-window {
  flex-grow: 1;
  /* Use WebP version for lighter doodle background */
  /* Correct relative path: CSS is in the css/ directory, so go up one level to access images. */
  background: url('../images/whatsapp-bg.webp') repeat;
  padding: 20px;
  overflow-y: auto;
}

/* Incoming message bubble styling */
.wa-chat-window .wa-message.incoming {
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 16px;
  color: #333333;
  /* Align messages to the right for RTL */
  align-self: flex-end;
  max-width: 80%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Container for the form at the bottom of the chat */
.wa-chat-form {
  background: #f9f9f9;
  border-top: 1px solid #e0e0e0;
  padding: 15px 20px;
}

/* Ensure the form fields fill the width inside chat form */
.wa-chat-form .wa-form input,
.wa-chat-form .wa-form select,
.wa-chat-form .wa-form textarea {
  width: 100%;
}

/* Override the button spacing inside the chat form */
.wa-chat-form .wa-form button {
  margin-top: 10px;
}

/* Responsive tweaks for the chat UI on very small screens */
@media (max-width: 480px) {
  .wa-chat-window {
    padding: 15px;
  }
  .wa-chat-form {
    padding: 12px 15px;
  }
}

/* ============================
   Related Services Section
   This section appears on service pages to cross‑link between different services. It uses
   a neutral background and flexible list layout so it looks good on both desktop and mobile.
==============================*/
.related-services {
  background-color: #f8f9fa;
  padding: 40px 20px;
  text-align: center;
}
.related-services h2 {
  margin-bottom: 20px;
  font-size: 28px;
  color: #003d5b;
}
.related-services ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.related-services li {
  margin: 5px 0;
}
.related-services a {
  color: #0077b6;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s ease;
}
.related-services a:hover {
  color: #0096c7;
}
/* Articles page styles */
.articles-hero {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);
  color: #fff;
}
.articles-hero h1 {
  font-size: 40px;
  margin-bottom: 15px;
}
.articles-hero p {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto;
}
.article-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 40px 20px;
}
.article-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: right;
}
.article-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.article-card h2 {
  font-size: 20px;
  margin: 15px;
  color: #023e8a;
}
.article-card p {
  font-size: 16px;
  margin: 0 15px 15px;
  color: #555;
  line-height: 1.5;
  flex-grow: 1;
}
.article-card .read-more {
  display: block;
  margin: 0 15px 15px;
  padding: 8px 0;
  text-align: center;
  background-color: #00b4d8;
  color: #fff;
  border-radius: 5px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.article-card .read-more:hover {
  background-color: #0096c7;
}
@media (max-width: 768px) {
  .article-card {
    width: 90%;
  }
}
@media (max-width: 600px) {
  .related-services h2 {
    font-size: 24px;
  }
  .related-services ul {
    flex-direction: column;
    align-items: center;
  }
  .related-services li {
    margin-bottom: 8px;
  }
}

/* Social media links styling */
.social-links {
  margin-top: 2rem;
}
.social-links h3 {
  margin-bottom: 0.5rem;
  font-size: 20px;
  color: #ffffff; /* maintain contrast against dark footers */
}
.social-icons {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
.social-icons li a svg {
  fill: #00b4d8;
  width: 28px;
  height: 28px;
  transition: fill 0.2s ease;
}
.social-icons li a:hover svg {
  fill: #0096c7;
}
@media (max-width: 600px) {
  .social-links {
    text-align: center;
    margin-top: 1.5rem;
  }
  .social-icons {
    justify-content: center;
  }
}

/* Share buttons styling */
/*
 * The share-buttons section provides a consistent layout for social
 * sharing icons across the site. Each page can include a share
 * section to encourage visitors to promote the current page on
 * various networks. Icons are sized similarly to the social links
 * and coloured to align with the site palette. Responsive rules
 * ensure proper alignment on smaller screens.
 */
.share-buttons {
  margin-top: 3rem;
}
.share-buttons h3 {
  margin-bottom: 0.5rem;
  font-size: 20px;
  color: #ffffff; /* ensure contrast when placed on dark backgrounds */
}
.share-icons {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.share-icons li a svg {
  fill: #00b4d8;
  width: 28px;
  height: 28px;
  transition: fill 0.2s ease;
}
.share-icons li a:hover svg {
  fill: #0096c7;
}
@media (max-width: 600px) {
  .share-buttons {
    text-align: center;
    margin-top: 2rem;
  }
  .share-icons {
    justify-content: center;
  }
}

/* -------------------------------------------------------------------
   Doctor gallery section (neurological page)
   This section showcases additional photos of Dr. Yeromin at work
   and complements the professional doctor card. It follows the
   existing color palette and responsive design conventions.  */
.doctor-gallery {
  background-color: #f8f9fc;
  padding: 4rem 0;
  text-align: center;
}

.doctor-gallery h2 {
  margin-bottom: 1rem;
  font-size: 28px;
  color: #002054;
}

.doctor-gallery p {
  max-width: 800px;
  margin: 0 auto 2rem;
  color: #334e72;
  line-height: 1.6;
}

.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.gallery-item {
  flex: 1 1 30%;
  max-width: 350px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .gallery-item {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .gallery-item {
    flex: 1 1 100%;
  }
}

/*
 * Extended doctor information section (neurological page)
 * Presents an image of the doctor alongside additional biographical text.
 */
.doctor-more-info .doctor-more-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.doctor-more-info .doctor-more-image {
  flex: 1 1 35%;
  max-width: 300px;
}
.doctor-more-info .doctor-more-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.doctor-more-info .doctor-more-text {
  flex: 1 1 60%;
  max-width: 600px;
}
.doctor-more-info .doctor-more-text h2 {
  font-size: 28px;
  color: #002054;
  margin-bottom: 1rem;
}
.doctor-more-info .doctor-more-text p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #334e72;
}

/* Ensure highlighted words within the doctor biography stand out with the brand turquoise colour */
.doctor-more-info .doctor-more-text .highlight {
  color: #00b4d8;
  font-weight: 700;
  text-shadow: none;
}

/* Style the list of doctor treatments/operations */
.doctor-more-info .doctor-list {
  list-style-type: disc;
  padding-right: 1.5rem;
  margin: 1rem 0;
  color: #334e72;
}
.doctor-more-info .doctor-list li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Small portrait image within the doctor more info section.
 * This portrait provides an additional personal touch and uses
 * the brand colours for consistency. */
.doctor-more-info .doctor-portrait {
  margin-top: 20px;
  width: 200px;
  border-radius: 12px;
  border: 4px solid #00b4d8;
  display: block;
}
@media (max-width: 768px) {
  .doctor-more-info .doctor-portrait {
    width: 150px;
    margin: 20px auto 0;
  }
}
@media (max-width: 768px) {
  .doctor-more-info .doctor-more-wrap {
    flex-direction: column;
    text-align: center;
  }
  .doctor-more-info .doctor-more-image,
  .doctor-more-info .doctor-more-text {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* --------------------------------------------------------------
 * Neurological hero tag positioning
 *
 * On the neurological evaluation page the hero displays a large portrait of
 * the doctor along with small badges indicating the doctor's name and
 * recommendation count.  To visually associate these badges with the
 * portrait, we centre them horizontally underneath the image on desktop
 * screens.  Without this override the badges default to the bottom‑right
 * corner, which can feel detached on wide layouts.
 */
.neurological-hero .hero-image .image-tags {
  right: auto;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

/* --------------------------------------------------------------
 * Home hero spacing
 *
 * On the home page the hero sits directly beneath a fixed header.  To
 * prevent the header from overlapping the top of the hero image and to
 * create a comfortable visual separation, we add a top margin and
 * additional padding.  These values are tuned for desktop screens; on
 * smaller devices the existing responsive styles ensure the hero stacks
 * appropriately.
 */
/*
 * Adjust spacing of the home hero so that it sits neatly beneath the fixed header
 * without leaving an overly large gap.  A modest top margin accounts for the
 * header height, while a slightly reduced padding ensures the internal content
 * (headline, description and form) remains comfortably spaced.  The background
 * image remains anchored to the top so the most relevant part of the photo is
 * visible behind the text.
 */
/* ==================== Success stories page styles ==================== */
.success-stories .success-grid {
  display: flex;
  flex-wrap: wrap;
  /* Increase spacing between cards to allow each story to stand on its own */
  gap: 30px;
  /* Center the grid items so that leftover space is distributed evenly on both sides */
  justify-content: center;
}

.success-stories .success-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
  padding: 20px;
  /* Allow cards to shrink and grow based on available space.  On wide
   * screens they will occupy roughly one third of the container
   * width (less the gap).  These values are overridden by media
   * queries below. */
  flex: 1 1 calc(33.333% - 40px);
  max-width: calc(33.333% - 40px);
  /* Align text to the right by default (for RTL languages) but allow
   * individual elements like headings to override this alignment. */
  text-align: right;
  direction: rtl;
}

.success-stories .success-card h3 {
  margin-top: 0;
  font-size: 20px;
  color: #0077b6;
  /* Center the story titles inside the card to create a balanced,
   * harmonious layout across all devices. */
  text-align: center;
  /* Add spacing below the title to separate it from the body text */
  margin-bottom: 10px;
}

.success-stories .success-card p {
  font-size: 16px;
  color: #333333;
  line-height: 1.6;
}

/* -----------------------------------------------------------------
 * Custom styling for the fibromyalgia service hero.
 * Instead of a doctor cutout image, this hero uses a dark gradient
 * overlay on top of a photograph of a group of doctors. This creates
 * a professional yet inviting background similar to the EMG hero. The
 * gradient ensures sufficient contrast for white text and buttons.
 */
.fibromyalgia-hero {
  background-image:
    linear-gradient(180deg, rgba(0, 22, 117, 0.75) 0%, rgba(0, 42, 109, 0.75) 100%),
    url('../images/doctor-team.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
 * Diabetes service hero
 *
 * The diabetes page uses the same base `.service-hero` styling with an
 * additional class to override the background image. A dark blue gradient
 * overlay sits on top of the photo to ensure the white text and form
 * remain readable. We reuse the “mission-doctors” image which depicts a
 * team of healthcare providers working together, symbolising the
 * multidisciplinary approach required to balance blood sugar levels.
 */
.diabetes-hero {
  background-image:
    linear-gradient(180deg, rgba(0, 22, 117, 0.80) 0%, rgba(0, 42, 109, 0.80) 100%),
    url('../images/mission-doctors.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------
 * Success stories enhancements
 *
 * Center the section titles for success stories across all pages and
 * improve responsiveness on smaller screens. On narrow viewports the
 * cards stack vertically to ensure legible, easy‑to‑read content with
 * appropriate spacing. Typography scales down slightly to maintain
 * readability without overwhelming the layout.
 */
.success-stories .section-title,
.service-section.success-stories .section-title {
  text-align: center;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  /* Stack success stories cards on mobile for better flow */
  .success-stories .success-grid {
    flex-direction: column;
    gap: 20px;
    /* Center the cards horizontally when stacking so they don't hug the right edge */
    align-items: center;
  }

  /* When success stories are wrapped in a service-section (e.g. on service pages),
   * apply the same mobile stacking behaviour.  Without this, the cards may
   * remain side‑by‑side on smaller viewports. */
  .service-section.success-stories .success-grid {
    flex-direction: column;
    gap: 20px;
    /* Center items to avoid awkward right‑aligned cards on mobile */
    align-items: center;
  }

/* ---------------------------------------------------------------------
 * Layout fix for success stories in service-section
 *
 * Some pages use a combination of the `.service-section` and
 * `.success-stories` classes instead of the base `.section` class for
 * their success stories. The generic `.section` rule sets a maximum
 * width and centres the content, but `.service-section` does not.  To
 * ensure the success stories section is aligned consistently across
 * all pages, we explicitly apply the same container styling when
 * `.service-section.success-stories` is used. This centres the grid
 * within the page and provides even padding on both sides.
 */
.service-section.success-stories {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
}
  .success-stories .success-card {
    max-width: 100%;
    flex: 1 1 100%;
    padding: 25px 20px;
    /* Ensure the card spans the full available width on mobile */
    width: 100%;
  }

  /* Adjust the success card appearance on small screens.  Reducing the
   * border radius and internal padding creates a more compact card that
   * still feels inviting. */
  .success-stories .success-card {
    border-radius: 15px;
    padding: 20px 15px;
  }

  /* When success stories are nested in a .service-section, ensure cards
   * occupy the full width and adopt the same padding and border radius. */
  .service-section.success-stories .success-card {
    max-width: 100%;
    flex: 1 1 100%;
    border-radius: 15px;
    padding: 20px 15px;
    /* Stretch card to fill container width on mobile */
    width: 100%;
  }
  .success-stories .success-card h3 {
    font-size: 18px;
  }
  .success-stories .success-card p {
    font-size: 15px;
  }

  /* Reduce the size of the icons within success stories on mobile to
   * balance the limited horizontal space. */
  .success-stories .success-card .success-icon {
    width: 50px;
    height: 50px;
    /* Center the icon horizontally within the card */
    margin: 0 auto 15px;
  }
}

/* Custom responsive layout for success stories cards
 * On medium screens (tablets and small desktops) the cards should
 * display in two columns.  We use calc() to account for the gap
 * between cards so they align neatly.  On very wide screens the
 * default one‑third width remains defined via the base rule above. */
@media (min-width: 768px) and (max-width: 1024px) {
  .success-stories .success-card {
    flex: 1 1 calc(50% - 40px);
    max-width: calc(50% - 40px);
  }
}

/*
 * Align success stories used with service-section outside of the mobile
 * media query.  Some pages wrap success stories within a
 * `.service-section` instead of the base `.section`.  The generic
 * `.section` class centers content and constrains the width.  Apply
 * similar rules here so that the success stories section remains
 * centered and has a consistent maximum width on wider screens.
 */
.service-section.success-stories {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
}

/* Adjust the neurological hero layout on larger screens.  Align the
 * hero content to the top of the container so the text and form
 * appear closer to the top of the hero section.  Reduce padding on
 * the neurological hero to shorten its height. */
@media (min-width: 769px) {
  .neurological-hero .hero-content {
    align-items: flex-start;
  }
  .neurological-hero {
    padding: 60px 20px 40px;
  }
}

/* ---------------------------------------------------------------------
 * Neurological hero layout improvements for desktop
 *
 * On larger screens we lay out the doctor portrait and the hero text/form
 * side‑by‑side rather than stacking them.  We also adjust the relative
 * sizes of the columns so that the portrait occupies roughly forty‑five
 * percent of the width while the text and form occupy the remainder.
 * Increasing the gap between the columns prevents the content from feeling
 * cramped.  These overrides are placed toward the end of the stylesheet to
 * ensure they take precedence over earlier definitions.
 */
@media (min-width: 992px) {
  /* On large screens, display the neurological hero content in a single row with generous spacing.
   * Align items centrally so the image and text/form are vertically aligned.  A slightly
   * wider gap prevents the layout from feeling cramped on wide viewports. */
  .neurological-hero .hero-content {
    flex-wrap: nowrap;
    align-items: center;
    gap: 50px;
  }
  /* Position the doctor portrait on the visual left side in RTL layouts by assigning
   * a higher order value.  Allocate slightly less width to the image so the text
   * and form have more room to breathe. */
  .neurological-hero .hero-image {
    order: 1;
    flex: 0 0 38%;
    text-align: center;
    margin: 0;
  }
  /* Position the hero text and contact form to the right of the portrait (in RTL
   * this appears visually on the left).  Allocate slightly more space than the
   * portrait and ensure the text and form stack vertically with comfortable
   * spacing. */
  .neurological-hero .hero-info {
    order: 0;
    flex: 0 0 62%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    min-height: auto;
  }
  /* Allow the contact form to expand across the hero info while capping its maximum
   * width to maintain readability.  A slightly larger cap gives the form more
   * presence on wide screens without overwhelming the layout. */
  .neurological-hero .hero-form {
    width: 100%;
    max-width: 600px;
    margin-top: 0;
  }

  /* In the vertical hero info layout the text and form should size naturally
   * without forced flex-basis values.  Remove the top margin from the hero
   * text here because sufficient padding is already applied on the section.
   */
  .neurological-hero .hero-text {
    flex: 0 0 auto;
    margin-top: 0;
  }
  .neurological-hero .hero-form {
    flex: 0 0 auto;
  }

  /* Reduce heading and paragraph sizes in the neurological hero to create a
   * more compact layout.  Smaller font sizes and tighter margins allow
   * the entire hero content to fit comfortably within the first screen on
   * desktop without overwhelming the viewer. */
  .neurological-hero .hero-text h1 {
    font-size: 36px;
    margin-bottom: 12px;
  }
  .neurological-hero .hero-text p {
    font-size: 18px;
    margin-bottom: 16px;
  }

  /* Ensure the doctor portrait maintains its aspect ratio and fills its container
   * without distortion.  Use contain to avoid cropping while allowing the
   * image to scale down gracefully within its flex box. */
  .neurological-hero .hero-image img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* Compress the neurological hero on large screens.  The top padding ensures
   * the headline clears the sticky navigation bar, while the bottom padding
   * balances the white space. */
  .neurological-hero {
    padding-top: 160px;
    padding-bottom: 40px;
  }
}

/* ================================================================
 * Success stories card overrides
 *
 * These styles refine the appearance of the success stories section
 * across all pages. Cards feature a light, reassuring background,
 * rounded corners and a soft shadow. An icon appears above each
 * heading to enhance visual interest. These definitions are placed
 * after the base styles to override them via the cascade.
 */
/*
 * Base styling for success story cards.  A light background, gentle
 * shadow and rounded corners provide a friendly appearance.  Use
 * relative sizing so the cards adapt gracefully across breakpoints.
 */
.success-stories .success-card {
  position: relative;
  background: #f7fbff;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 30px 25px;
  /* Default to roughly one‑third width minus gap on large screens.  The
   * responsive media queries below override this for tablets and mobile.
   */
  flex: 1 1 calc(33.333% - 40px);
  max-width: calc(33.333% - 40px);
  text-align: right;
  direction: rtl;
}

/* Style for the icon container in success cards.  Center the icon
 * horizontally and provide spacing below. */
.success-stories .success-card .success-icon {
  width: 60px;
  height: 60px;
  /* Center the icon within its parent */
  margin: 0 auto 20px;
}

.success-stories .success-card .success-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.success-stories .success-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #0077b6;
  /* Center the titles inside the success cards for a balanced look */
  text-align: center;
}

.success-stories .success-card p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

/* -----------------------------------------------------------------
 * Responsive layout for success stories on mobile
 *
 * On screens narrower than 768px we stack the success cards vertically
 * and ensure each card occupies the full available width.  The grid
 * itself centers its children and applies reduced spacing between them.
 */
@media (max-width: 767px) {
  .success-stories .success-grid,
  .service-section.success-stories .success-grid {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  .success-stories .success-card,
  .service-section.success-stories .success-card {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }
  /* Tweak spacing and font sizes on mobile for improved legibility */
  .success-stories .success-card {
    padding: 25px 20px;
  }
  .service-section.success-stories .success-card {
    padding: 20px 15px;
  }
  .success-stories .success-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .success-stories .success-card p {
    font-size: 15px;
  }
  .success-stories .success-card .success-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
  }
}

/* ---------------------------------------------------------------------
 * Overrides for fibromyalgia process and why lists
 *
 * These selectors are placed here, near the end of the stylesheet, to
 * override both the generic .service-section list styling and the
 * earlier fibromyalgia list definitions. They reduce the spacing
 * between items and use a smaller turquoise bullet to create a more
 * balanced look for the fibromyalgia process and why sections. The
 * selectors target .service-section elements that also carry the
 * .fibro-process or .fibro-why class to increase specificity.
 */
.service-section.fibro-process li,
.service-section.fibro-why li {
  margin-bottom: 10px;
  font-size: 18px;
}

.service-section.fibro-process li::before,
.service-section.fibro-why li::before {
  content: '\2022';
  color: #00b4d8;
  margin-left: 6px;
  font-size: 20px;
  line-height: 1;
}