/* =============================================
   MOBILE HERO FIXES  (max-width: 768px)
   ============================================= */

@media (max-width: 768px) {

  /* --- Push page content below fixed navbar --- */
  /* The navbar is fixed-top (~80px tall on mobile).
     The outer hero wrapper starts at y=0 behind it,
     so we give it a top padding equal to navbar height. */
  section.hero.with-pattern {
    padding-top: 80px !important;
  }

  /* --- Hero section height & inner spacing ---- */
  .hero-home {
    height: auto !important;
    min-height: unset !important;
    padding: 16px 0 32px !important;
    overflow: visible !important;
  }

  .hero-home .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }

  /* Remove Bootstrap mb-5 on the text column */
  .hero-home .col-md-6.mb-5 {
    margin-bottom: 0 !important;
  }

  /* --- Heading -------------------------------- */
  .hero-home h1 {
    font-family: "Poppins", sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    margin-bottom: 10px !important;
  }

  /* --- Description text ---------------------- */
  .hero-home .hero-sub {
    font-size: 13px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-top: 8px !important;
  }

  /* --- Features list ------------------------- */
  .hero-home .features {
    padding-left: 0 !important;
    margin-top: 10px !important;
  }

  .hero-home .features li {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  /* --- Buttons ------------------------------- */
  /* Row 1: WhatsApp + Call Now side by side    */
  /* Row 2: Get a Call full-width centered      */
  .hero-btns-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  /* WhatsApp — first button, equal half width */
  .hero-btns-wrap .btn:nth-child(1) {
    flex: 1 1 0 !important;
    text-align: center !important;
    padding: 10px 6px !important;
    font-size: 14px !important;
  }

  /* Call Now — second button, equal half width */
  .hero-btns-wrap .btn:nth-child(2) {
    flex: 1 1 0 !important;
    text-align: center !important;
    padding: 10px 6px !important;
    font-size: 14px !important;
  }

  /* Get a Call — third button, full width below */
  .hero-btns-wrap .btn:nth-child(3) {
    flex: 0 0 100% !important;
    text-align: center !important;
    padding: 10px 6px !important;
    font-size: 14px !important;
  }
}