/* ============================================================
   Horizon Clinical Care — Responsive Fix
   Fixes banner shape overlap & layout issues across all screens
   ============================================================ */


/* ----------------------------------------------------------
   1. BANNER AREA — General layout fixes
   ---------------------------------------------------------- */

/* Ensure banner text always sits above shape images */
.banner-content {
  position: relative;
  z-index: 2;
}

/* Make banner section properly fill height on all screens */
.banner-area.banner-bg {
  padding-top: 130px;
  padding-bottom: 80px;
}

/* ----------------------------------------------------------
   2. BANNER SHAPE — Hide / reposition on smaller screens
      The zigzag wave (shape01) overlaps the heading on tablets
      and phones. We move it out of the way or hide it.
   ---------------------------------------------------------- */

/* Desktop 1200–1500px: nudge shape further right so it clears text */
@media (max-width: 1500px) {
  .banner-shape img:nth-child(1) {
    left: 55%;
    top: 35%;
  }
}

/* Tablet landscape 992–1199px: move completely behind the photo */
@media (max-width: 1199.98px) {
  .banner-shape img:nth-child(1) {
    left: 60%;
    top: 30%;
    opacity: 0.4;
  }
  .banner-shape img:nth-child(2) {
    display: none;
  }
}

/* Tablet portrait & mobile ≤ 991px: hide decorative shapes entirely */
@media (max-width: 991.98px) {
  .banner-shape {
    display: none;
  }
  /* Re-centre banner content properly on tablet/mobile */
  .banner-content {
    text-align: left;
    margin-bottom: 0;
  }
  /* Give banner section more breathing room */
  .banner-area.banner-bg {
    padding-top: 110px;
    padding-bottom: 60px;
    min-height: auto;
  }
}

/* Mobile ≤ 767px: full-width layout, smaller text */
@media (max-width: 767.98px) {
  .banner-area.banner-bg {
    padding-top: 100px;
    padding-bottom: 50px;
  }
  .banner-content .title {
    font-size: 36px !important;
  }
  .banner-content .sub-title {
    font-size: 13px;
  }
  .banner-content p {
    font-size: 14px;
    width: 100%;
  }
  /* Stack the column full-width */
  .banner-area .col-lg-6 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Small mobile ≤ 480px */
@media (max-width: 480px) {
  .banner-content .title {
    font-size: 30px !important;
  }
}


/* ----------------------------------------------------------
   3. BANNER SOCIAL (left sidebar "Follow Us" icons)
      Hides on tablet max 1199px (already in main.css), but
      on Nest Hub Max 1280×800 the icons bleed out — fix here.
   ---------------------------------------------------------- */
@media (max-width: 1280px) {
  .banner-social {
    display: none;
  }
}


/* ----------------------------------------------------------
   4. BANNER SCROLL ("Scroll Down" button)
      Hidden on smaller screens to avoid overflow
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  .banner-scroll {
    display: none;
  }
}


/* ----------------------------------------------------------
   5. HEADER / NAVIGATION — Tablet fixes
      On Nest Hub Max (1280×800) nav items get cut off
   ---------------------------------------------------------- */
@media (max-width: 1280px) {
  .tgmenu__main-menu .navigation > li > a {
    font-size: 13px;
    padding: 0 10px;
  }
}

@media (max-width: 1199.98px) {
  /* Hide desktop nav, show hamburger menu */
  .tgmenu__navbar-wrap.tgmenu__main-menu {
    display: none !important;
  }
  /* Keep Let's Talk button visible on tablet */
  .tgmenu__action {
    display: block !important;
  }
}


/* ----------------------------------------------------------
   6. GENERAL SECTION PADDING — Tighten on mobile
   ---------------------------------------------------------- */
@media (max-width: 767.98px) {
  .pt-120 { padding-top: 60px !important; }
  .pb-120 { padding-bottom: 60px !important; }
  .pt-100 { padding-top: 50px !important; }
  .pb-100 { padding-bottom: 50px !important; }
}


/* ----------------------------------------------------------
   7. SERVICES SECTION — Card grid on mobile
   ---------------------------------------------------------- */
@media (max-width: 767.98px) {
  .services-item {
    margin-bottom: 24px;
  }
}


/* ----------------------------------------------------------
   8. FOOTER — Stack columns on mobile
   ---------------------------------------------------------- */
@media (max-width: 767.98px) {
  .footer-widget {
    margin-bottom: 30px;
  }
  .footer-bottom .copyright-text {
    text-align: center;
  }
}


/* ----------------------------------------------------------
   9. CONTACT FORM — Fix on mobile
   ---------------------------------------------------------- */
@media (max-width: 767.98px) {
  .contact__form-wrap {
    margin-top: 30px;
  }
  .contact__content {
    margin-bottom: 0;
  }
}


/* ----------------------------------------------------------
   10. BREADCRUMB AREA — Text sizing on mobile
   ---------------------------------------------------------- */
@media (max-width: 767.98px) {
  .breadcrumb__content .title {
    font-size: 30px;
  }
}