/* =========================================================
   BE YOUR BEST™ — RESPONSIVE WEBSITE CSS
   ========================================================= */


/* ===== HOMEPAGE CONTENT — MOBILE ===== */

@media (max-width: 860px) {

  .byb-home-page,
  .byb-below {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .byb-home-shell,
  .byb-below-shell {
    width: 100% !important;
    max-width: 100% !important;
  }

  .byb-home-shell {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .byb-photo-col {
    display: none !important;
  }

  .section,
  .section-wide {
    padding: 18px 14px !important;
    margin: 10px auto !important;
    border-radius: 16px !important;
  }

  .hero h1 {
    font-size: 1.9rem !important;
    line-height: 1.15 !important;
    margin: 8px 0 10px !important;
  }

  .hero p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 18px !important;
    font-size: 1rem !important;
  }

  .benefits,
  .testimonials,
  .grid-2 {
    grid-template-columns: 1fr !important;
  }

  .benefits,
  .testimonials {
    gap: 10px !important;
  }

  .grid-2 {
    gap: 12px !important;
  }

  .trust-pill {
    display: block !important;
    width: 100% !important;
    padding: 10px 14px !important;
    line-height: 1.4 !important;
  }

  .spacer-bar {
    height: 12px !important;
    margin: 10px 0 !important;
  }

  .spacer-bar .straw-row {
    gap: 6px !important;
  }

  .spacer-bar .straw {
    width: 10px !important;
    height: 10px !important;
  }
}


/* =========================================================
   HOME BANNER ONLY
   WildApricot HTML ID: id_q7HNwqh
   ========================================================= */

/* Desktop */

#id_q7HNwqh {
  width: calc(100% - 32px) !important;
  max-width: 1240px !important;

  height: 550px !important;
  min-height: 550px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  overflow: hidden !important;
}


/* Tablet */

@media (max-width: 900px) {

  #id_q7HNwqh {
    width: calc(100% - 28px) !important;

    height: 380px !important;
    min-height: 380px !important;

    background-size: cover !important;
    background-position: center center !important;
  }

}


/* Phone */

@media (max-width: 600px) {

  #id_q7HNwqh {
    width: calc(100% - 24px) !important;

    height: 250px !important;
    min-height: 250px !important;

    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;

    background-color: #edf7f5 !important;
  }

}


/* =========================================================
   OTHER PAGE BANNERS
   Add "byb-site-banner" to CSS Class on each banner gadget.
   DO NOT add this class to the Home banner.
   ========================================================= */

.byb-site-banner {
  width: calc(100% - 32px) !important;
  max-width: 1240px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  overflow: hidden !important;
}


/* Other page banners — Tablet */

@media (max-width: 900px) {

  .byb-site-banner {
    width: calc(100% - 28px) !important;
  }

}


/* Other page banners — Phone */

@media (max-width: 600px) {

  .byb-site-banner {
    width: calc(100% - 24px) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 12px !important;

    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

}

/* ===== OTHER PAGE BANNERS — REMOVE HUGE MOBILE GAP ===== */

@media (max-width: 600px) {

  .byb-site-banner {
    height: 250px !important;
    min-height: 250px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
  }

  .byb-site-banner .gadgetStyleBody,
  .byb-site-banner .gadgetContentEditableArea,
  .byb-site-banner .WaGadgetContent,
  .byb-site-banner .content,
  .byb-site-banner > div {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;

    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
}
/* ===== REMOVE EXTRA SPACE BELOW OTHER PAGE BANNERS ===== */

@media (max-width: 600px) {

  .byb-site-banner {
    margin-bottom: -90px !important;
  }

}