/* Responsive fixes for tablet and mobile. Loaded last in <head> on the Divi pages. */

img { max-width: 100%; }

/* Contact icons (phone, email, map pin) used in the header, footer and Contact page. */
.contact-ico { display: inline-block; width: 1.15em; margin-right: 6px; text-align: center; color: inherit; }
.et_pb_section_0_tb_footer .contact-ico { color: #afaeb0; }
.fa-location-dot.contact-ico { font-size: 1.1em; }

/* About page: small overlay photo is positioned absolutely; keep it inside its column. */
.page-id-11 .et_pb_image_1 { width: auto !important; }

@media only screen and (max-width: 980px) {
  /* Footer social icons: drop the desktop-only negative offset. */
  .et_pb_code_0_tb_footer { margin-top: 0 !important; margin-left: 0 !important; }

  /* About page overlay photo: anchor to the right edge of the main photo. */
  .page-id-11 .et_pb_image_1 { left: auto !important; right: 4% !important; top: 4% !important; }
  .page-id-11 .et_pb_image_1 .et_pb_image_wrap img { max-width: 30vw; }

  /* Home "What we do" cards: fill the column; card height follows the image. */
  .product-section { max-width: none; }
  .product-card { height: auto; }
  .images .main-img { height: 100%; object-fit: cover; }
}

@media only screen and (max-width: 767px) {
  /* Header: phone and email stack, so the separator is dangling. */
  .hdr-sep { display: none; }
  .et_pb_text_0_tb_header p { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }

  /* Footer contact row: full width and centered to match the social icons and button. */
  .et_pb_text_0_tb_footer, .et_pb_text_1_tb_footer {
    width: 100% !important; margin-left: 0 !important; padding-left: 16px !important; padding-right: 16px !important;
  }
  .et_pb_section_0_tb_footer .et_pb_text_inner { text-align: center; }
  .et_pb_section_0_tb_footer .et_pb_text_inner img { vertical-align: middle; }

  /* Contact form: 16px stops iOS zooming on focus; keep typed text clear of the Send button. */
  .form-input, .form-message { font-size: 16px; }
  .form-message { height: 160px; padding-bottom: 56px !important; }
}

@media only screen and (max-width: 600px) {
  /* Home "What we do" cards: stack text above image. */
  .product-section { flex-direction: column; }
  .product-card, .images { width: 100%; box-sizing: border-box; }
  .product-card { padding: 24px; }
  .images .main-img { height: auto; max-height: 260px; }
  .overlay-img { left: 15%; width: 80px; }
}

@media only screen and (max-width: 480px) {
  /* Home "Why choose us": original rule shrinks labels to 10px and pulls them up into the icons. */
  .value-bold { font-size: 12px; margin: 5px 0 0; }
}