:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-6555af0 *//* DESKTOP – keep big gap so hero sits under menu */
.fth-hero-header {
  margin-top: 150px !important;
}

/* TABLET – slightly smaller gap than desktop */
@media (max-width: 1024px) {
  .fth-hero-header {
    margin-top: 110px !important;
  }
}

/* MOBILE – tighter gap */
@media (max-width: 768px) {
  .fth-hero-header {
    margin-top: 60px !important;
  }
}

/* Keep the badge as a small pill */
.fth-hero-badge {
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  padding: 6px 14px !important;
  white-space: nowrap !important;
}

/* Center hero image on tablet + mobile when stacked */
@media (max-width: 900px) {
  .fth-hero-inner {
    flex-direction: column !important;
    align-items: center !important;
  }

  .fth-hero-image {
    align-self: center !important;
    max-width: 360px;
  }
}

/* Default (desktop + mobile): small, normal margin */
.fth-hero-header {
  margin-top: 30px;
}

/* TABLET ONLY: big gap so header looks normal */
@media (min-width: 768px) and (max-width: 1024px) {
  .fth-hero-header {
    margin-top: 160px !important;  /* tweak 140 → 120 / 160 to taste */
  }
}

/* Keep badge as small pill */
.fth-hero-badge {
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  padding: 6px 14px !important;
  white-space: nowrap !important;
}

/* MOBILE ONLY – push hero down so it clears the header */
@media (max-width: 767px) {
  .fth-hero-header {
    margin-top: 210px !important;  /* tweak 120–150px to taste */
    padding: 28px 20px !important; /* keeps padding nice on small screens */
  }

  .fth-hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .fth-hero-image {
    align-self: center !important;
    max-width: 100%;
    margin-top: 24px;
  }

  .fth-hero h1 {
    font-size: 1.8rem;  /* slightly smaller so it doesn’t feel cramped */
  }
}


/* MOBILE ONLY – fix title size + spacing + image gap */
@media (max-width: 767px) {

  /* Space the card away from the header nicely */
  .fth-hero-header {
    margin-top: 210px !important;
    padding: 24px 18px !important;
  }

  /* Stack content and align to left */
  .fth-hero-inner {
    display: block !important;
  }

  /* Badge spacing */
  .fth-hero-badge {
    margin-bottom: 10px !important;
  }

  /* SMALLER TITLE + BETTER LINE WRAP */
  .fth-hero-header h1 {
    font-size: 1.7rem !important;   /* ↓ from desktop size */
    line-height: 1.25 !important;
    margin: 0 0 10px !important;
  }

  /* Intro text under the title */
  .fth-hero-subtext {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }

  /* IMAGE: centred and with a sensible gap below the text */
  .fth-hero-image {
    max-width: 340px !important;
    width: 100% !important;
    margin: 20px auto 0 !important;   /* top gap + centred */
  }
}


/* MOBILE ONLY — centre all key titles + badge */
@media (max-width: 767px) {

  /* CENTRE badge + main title + subtext */
  .fth-hero-header {
    text-align: center !important;
  }

  .fth-hero-badge {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  .fth-hero-header h1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .fth-hero-subtext {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CENTRE the two card titles */
  .fth-card h2 {
    text-align: center !important;
    width: 100% !important;
  }

  /* Optionally centre the paragraph text in cards too */
  .fth-card p {
    text-align: center !important;
  }

  /* Centre the icon+title row in the 'Stay in the Loop' card */
  .fth-card-header {
    justify-content: center !important;
  }

}/* End custom CSS */