/* ================================================
   Simply Tech — Mobile Responsiveness Fixes
   Breakpoints: phones (≤ 767px), small phones (≤ 480px / ≤ 543px)
   ================================================ */

/* ── Global ──────────────────────────────────────── */

body {
  overflow-x: hidden;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* ── Hero Slider ─────────────────────────────────── */
/* At ≤800px main.css sets padding-top: 100% (tall square ratio).
   Reduce further on very small phones to avoid excessive blank space. */
@media screen and (max-width: 480px) {
  .single_banner {
    padding-top: 110%;
  }

  .single_banner .oobsmarthome-button-solid {
    margin-top: 12px !important;
    width: 130px;
  }
}

/* ── Usecase / Smart Home Category Icons ─────────── */
@media screen and (max-width: 543px) {
  #usecase-icon-menu h1 {
    font-size: 20px;
    line-height: 1.3;
  }

  #usecase-icon-menu h2 {
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 8px;
  }
}

/* ── Numbers / Stats ─────────────────────────────── */
@media screen and (max-width: 543px) {
  #numbers h2 {
    font-size: 26px !important;
    line-height: 1.2;
  }

  #numbers span {
    font-size: 12px;
  }
}

/* ── Product Sections (Coral / Sapphire / Pearl) ─── */

/* main.css sets padding-right: 20% for .motion-sensor .content at ≤767px.
   That wastes 20% of width on an already narrow viewport — reduce it. */
@media screen and (max-width: 767px) {
  .motion-sensor .content {
    padding-right: 5% !important;
    padding-left: 5% !important;
  }
}

/* Sapphire/Pearl use col-sm-6 (50% wide at 576–767px) with a large right
   offset. Below 576px the offset doesn't reset, squeezing the column.
   Make it full-width on phones smaller than sm. */
@media screen and (max-width: 575px) {
  .sapphire-series-section .col-sm-6,
  .pearl-series-section .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    flex: 0 0 100% !important;
  }
}

/* ── Voice Assistant Section ─────────────────────── */

/* On mobile (≤767px) main.css removes the background image and shows the
   section as a plain grey card. The .content_img illustration is set to
   width: 170% in that same rule — that causes horizontal overflow. Fix it. */
@media screen and (max-width: 767px) {
  #voice_assictant .content_img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto 16px;
  }

  .voice_assistant_logo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .voiceicon {
    text-align: center;
  }

  #voice_assictant .header_content {
    padding: 0 16px;
  }
}

/* ── Mobile App Management Section ──────────────── */

/* Same 170% overflow fix as voice assistant section above. */
@media screen and (max-width: 767px) {
  #mobile_managment .content_img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto 16px;
  }

  .store_logo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .store_logo a img {
    width: 10rem !important;
  }

  #mobile_managment .header_content {
    padding: 0 16px;
  }
}

/* ── Contact Section ─────────────────────────────── */
@media screen and (max-width: 767px) {
  #contactparallax h2 {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }
}

@media screen and (max-width: 480px) {
  #contactparallax h2 {
    font-size: 18px !important;
  }
}

/* ── Footer ──────────────────────────────────────── */
@media screen and (max-width: 575px) {
  footer .custom-footer-menu .col-12 {
    margin-bottom: 16px;
  }

  /* Social icon row: allow wrapping so icons don't get cut off */
  footer .links.social ul {
    max-width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  footer .links.app {
    text-align: center;
  }
}

/* ── Sub-footer ───────────────────────────────────── */
@media screen and (max-width: 543px) {
  .sub-footer .copyright {
    text-align: center;
  }

  .sub-footer img {
    height: 60px !important;
  }
}