@media screen and (max-width: 767px) {

  /*
   * MOBILE HERO ROW
   */
  .sfwd-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding-left: 20px !important;
    padding-right: 20px !important;

    box-sizing: border-box !important;
  }


  /*
   * RESET THE ZOHO CONTAINER THAT HOLDS THE H1
   * This removes the desktop positioning/width being carried
   * into the mobile hero.
   */
  .sfwd-hero-copy :is(div, section):has(h1) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    padding-left: 0 !important;
    padding-right: 0 !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /*
   * MOBILE HERO H1
   *
   * IMPORTANT:
   * We target BOTH the H1 and everything Zoho places
   * inside the H1. Zoho may put the actual font size
   * on an inner span, which is why changing h1 alone
   * did not appear to work.
   */
  .sfwd-hero-copy h1,
  .sfwd-hero-copy h1 * {
    font-size: 35px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }


  /*
   * MAKE THE H1 CONTAINER USE ALL AVAILABLE WIDTH
   */
  .sfwd-hero-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    overflow: visible !important;
  }

}