/* ==========================================================================
   ISKAAN — Responsive fixes
   Added after the WordPress -> static migration.
   Overrides Avada's tablet/small-laptop and mobile behaviour where the
   original theme collapsed multi-column icon grids into one oversized column,
   and where the contact / careers form fields were cramped on phones.
   Loaded last so these rules win over the theme's inline CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Icon / feature-card grids
   The theme gives .._1_6 / .._1_5 / .._1_4 columns a 75% (or 100%) width in
   the "medium" range, so on tablets and small laptops (641–1024px) they drop
   to ONE huge column per row. Force them to 2 per row instead.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
  .fusion-builder-row > .fusion_builder_column_1_6,
  .fusion-builder-row > .fusion_builder_column_1_5,
  .fusion-builder-row > .fusion_builder_column_1_4 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 1 50% !important;
    -ms-flex: 0 1 50% !important;
    --awb-width-medium: 50% !important;
    /* keep even side spacing so two columns fit on one row */
    --awb-spacing-right-medium: 2% !important;
    --awb-spacing-left-medium: 2% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* --------------------------------------------------------------------------
   2) Contact & Careers forms — stack paired fields full width on phones
   (Name/Phone, First/Last name, etc. otherwise sit two-up and get cramped.)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  form.fusion-form .fusion_builder_column,
  form.fusion-form .fusion-layout-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    -ms-flex: 0 0 100% !important;
    --awb-width-medium: 100% !important;
    --awb-width-small: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* The form sits inside deeply-padded "card" column wrappers (40px + 27px each
   side) meant for desktop, which squeeze the fields into a narrow strip on
   phones. Trim the horizontal padding of shadowed card wrappers on small
   screens so content (form fields especially) gets usable width. */
@media (max-width: 782px) {
  .fusion-column-wrapper.fusion-column-has-shadow {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   3) reCAPTCHA widget (fixed 302px) — never let it overflow the form column
   -------------------------------------------------------------------------- */
.fusion-form-recaptcha-wrapper { max-width: 100%; }

@media (max-width: 480px) {
  .fusion-form-recaptcha-wrapper .g-recaptcha,
  .fusion-form-recaptcha-wrapper .awb-recaptcha-v2,
  .fusion-form-recaptcha-v2 {
    transform: scale(0.85);
    transform-origin: left top;
  }
}

@media (max-width: 360px) {
  .fusion-form-recaptcha-wrapper .g-recaptcha,
  .fusion-form-recaptcha-wrapper .awb-recaptcha-v2,
  .fusion-form-recaptcha-v2 {
    transform: scale(0.72);
    transform-origin: left top;
  }
}