/* ============================================================
   GKM Machines - Mobile fixes
   Selectors are intentionally specific so they override the
   !important rules in header.php's inline <style> block.
   ============================================================ */

/* ---------- Tablet & Mobile (up to 767px): hero banner ---------- */
@media (max-width: 767px) {

  /* Let the hero size itself to its content */
  html body .banner-slider.banner-slider-two {
    aspect-ratio: auto !important;
    min-height: 440px !important;
    max-height: none !important;
  }

  /* Show the machine image centred behind the text */
  html body .banner-slider.banner-slider-two .slider-img {
    background-position: center center !important;
  }

  /* Content area */
  html body .banner-slider.banner-slider-two .banner-content {
    align-items: center !important;
    padding: 16px 14px !important;
  }

  /* Text card: full width, lighter so the image stays visible */
  html body .banner-slider.banner-slider-two .banner-content .banner-text {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.82) 100%) !important;
  }

  /* Small label above the heading */
  html body .banner-slider.banner-slider-two h6 {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    padding: 4px 10px 4px 4px !important;
    margin-bottom: 12px !important;
  }

  html body .banner-slider.banner-slider-two .banner-content h6 span {
    padding: 2px 8px !important;
    margin-right: 8px !important;
  }

  /* Heading */
  html body .banner-slider.banner-slider-two h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }

  /* Paragraph: keep it short (3 lines) */
  html body .banner-slider.banner-slider-two .banner-content p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Buttons: smaller, side by side where they fit */
  html body .banner-slider.banner-slider-two .btn-box {
    margin-top: 16px !important;
    gap: 10px !important;
    flex-direction: row !important;
  }

  html body .banner-slider.banner-slider-two .btn-box .themeht-btn {
    zoom: 0.82;
  }
}

/* ---------- Phones (up to 575px) ---------- */
@media (max-width: 575px) {

  /* Logo tagline was too small to read */
  html body .gkm-tagline {
    font-size: 7px !important;
    letter-spacing: 0.8px !important;
  }

  /* Floating buttons: smaller, kept in the bottom corners */
  html body .float-btn {
    width: 46px !important;
    height: 46px !important;
    font-size: 22px !important;
  }

  html body .float-whatsapp {
    left: 12px !important;
    right: auto !important;
    bottom: 82px !important;
  }

  html body .float-call {
    right: 12px !important;
    left: auto !important;
    bottom: 82px !important;
  }
}