/* Responsive fixes layered on top of css/styles.css */

/* 0) Global guard: prevent horizontal overflow */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Ensure media scale fluidly */
img, video, svg, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 1) Containers: keep inside viewport */
.z-hero,
.z-2,
.z-2-navbar,
.container-2 {
  width: min(1140px, 100% - 2rem);
  margin-inline: auto;
}

/* 2) Calculator width was forcing a wider viewport; make it fluid */
.calculator {
  width: 100% !important;
  max-width: 750px;          /* keeps a nice max on desktop */
  height: auto !important;
}
.calculator.mobile {
  border: 1px solid rgba(209, 44, 36, 0.5);
  border-radius: 8px;
  padding: 20px;
}

/* 3) Navbar/menu: keep touch target size and avoid zoom-out look */
.w-nav-button {
  padding: 12px 14px;
  font-size: 28px;           /* visible size independent of page zoom */
  line-height: 1;
}
.brand .logo-home {
  max-height: 65px;
  height: auto;
}

/* 4) Hero: remove rigid offsets that can push the layout wider */
.left, .right {
  left: auto !important;
  width: 100%;
  max-width: 100%;
  padding: 0;
}
.hero-section .grid {
  height: auto !important;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: clamp(16px, 3vw, 32px);
  align-items: center;
}
@media (max-width: 992px) {
  .hero-section .grid { grid-template-columns: 1fr; }
  .left { order: 2; }
  .right { order: 1; }
  .circle-hero, .circle-hero-2 { display: none !important; }
  .image-10.no-mobile { display: none !important; }
  .image-mobile { display: block !important; width: 85%; max-width: 420px; margin: 0 auto; }
  .h1 { text-align: center; }
}

/* 5) Forms: remove transparent text, ensure readability on dark bg */
.name1, .city, .phone, .age {
  width: 100% !important;
  max-width: 100% !important;
  background-color: transparent !important;
  border: 1px solid rgba(196,196,196,0.4) !important;
  border-radius: 6px !important;
  padding: 12px !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  box-shadow: none !important;
}
.name1:focus, .city:focus, .phone:focus, .age:focus {
  outline: none;
  border-color: #d12c24 !important;
}

/* 6) Footer/grid safety: collapse cleanly on mobile */
.footer-content {
  grid-column-gap: clamp(24px, 5vw, 160px);
  grid-row-gap: clamp(24px, 5vw, 160px);
}
@media (max-width: 767px) {
  .footer-content { grid-template-columns: 1fr !important; }
  .footer-brand, .footer-block, .footer-block-2 { align-items: center; text-align: center; }
  .footer-text { width: 100%; }
}

/* 7) Map: visible height on mobile (iframe uses height:100% originally) */
.section-9 iframe {
  min-height: 320px;
  border: 0;
}

/* 8) Decorative wide elements: neutralize width inflation */
.money { width: 100%; }
.image-19 { padding-left: 0 !important; height: auto !important; }

/* 9) Buttons: avoid large fixed margins that can cause overflow */
.btn_start,
.btn_start1,
.btn_start2,
.btn1 {
  margin-left: auto !important;
  margin-right: auto !important;
}

html, body { max-width: 100%; overflow-x: hidden; }

/* Calculator */
.calculator { width: 100% !important; height: auto !important; }

/* Hero offsets that can push width */
.left, .right { left: auto !important; width: 100%; max-width: 100%; }

/* Decorative image that adds extra width via padding */
.image-19 { padding-left: 0 !important; height: auto !important; }