hey, this is the liquid code of my shopify section, it looks good on dekstop but not on mobile, can you check ? the text box and the email form should be aligned (text on top, form bottom) and appear over video background: <style>
    body.template-index .main-content .videoBackground {
        margin-top: -55px;
    }

    .videoBackground {
        position: relative;
    }

    .videoBackground .fullscreen-video-wrap {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .videoBackground .fullscreen-video-wrap .video-js {
        position: absolute;
        top: 0;
        left: 0;
        min-height: 100%;
        min-width: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .videoBackground .fullscreen-video-wrap video {
        min-height: 100%;
        min-width: 100%;
        object-fit: cover;
    }

.videoBackground .videoBox {
  position: relative;
}

    .videoBackground .imageBox {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        padding: 100px 20px 80px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        min-height: calc(100vh - 165px);
        height: auto;
    }

    .videoBackground .videoBoxInfo,
    .videoBackground .imageBoxInfo {
        z-index: 2;
        text-align: center;
    }

    .videoBackground .overlay {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
    left: 0;
    background: #000;
    z-index: 1;
    opacity: 0; /* Added for overlay */
  }

  .videoBackground .videoBoxInfoBtn,
  .videoBackground .imageBoxInfoBtn {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: auto;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 8px 15px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: normal;
    font-size: 14px;
    margin-top: 20px;
  }

  .videoBackground .videoBoxInfoTitle,
  .videoBackground .imageBoxInfoTitle {
    color: #FFF;
    font-size: 30px;
    line-height: 40px;
  }

  .videoBackground .videoBoxInfoDescription,
  .videoBackground .imageBoxInfoDescription {
    max-width: 500px;
    margin: 0 auto;
  }

  .videoBackground .videoBoxInfoDescription p,
  .videoBackground .imageBoxInfoDescription p {
    font-size: 18px;
    line-height: 28px;
    color: #FFF; /* Added text color */
  }


  .videoBackground .newsletter__subheading {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .videoBackground .newsletter-form__field-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .videoBackground .field {
    margin: 0 10px;
  }


  @media screen and (max-width: 767px) {
    body.template-index .main-content .videoBackground {
      margin-top: -35px;
    }

    .videoBackground .fullscreen-video-wrap {
      z-index: 3;
    }

    .videoBackground .videoBox {
      min-height: 500px;
      height: 100%;
      position: relative;
      padding: 0;
    }

    .videoBackground .fullscreen-video-wrap {
      position: relative;
      min-height: 300px;
    }

    .videoBackground .videoBoxInfo {
      padding: 40px 20px;
      background: #000;
      width: 100%;
    }

  }
.videoBackground {
  display: flex;
  flex-direction: column;
  background-color: transparent;

  @media (max-width: 768px) {
    flex-direction: row;
  }
}
.videoBackground .videoBox {
  background-color: transparent;
  width: 100%;
  margin: 0 auto;

  .videoBoxInfo {
    position: relative;
    text-align: center;

    @media (max-width: 990px) {
      position: absolute;
      top: 10px;
      left: 10px;
    }
  }
}

.videoBackground .videoBoxInfo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
}

@media (max-width: 990px) {
  .videoBackground .videoBoxInfo {
    top: 10px;
    left: 10px;
  }
}

.videoBackground .overlay {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  z-index: 1;
  opacity: 0.5;
}

.videoBackground .videoBoxInfoBtn,
.videoBackground .imageBoxInfoBtn {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 8px 15px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: normal;
  font-size: 14px;
  margin-top: 20px;
}

.videoBackground .videoBoxInfoTitle,
.videoBackground .imageBoxInfoTitle {
  color: #FFF;
  font-size: 30px;
  line-height: 40px;
}

.videoBackground .videoBoxInfoDescription,
.videoBackground .imageBoxInfoDescription {
  max-width: 500px;
  margin: 0 auto;
}

.videoBackground .videoBoxInfoDescription p,
.videoBackground .imageBoxInfoDescription p {
  font-size: 18px;
  line-height: 28px;
  color: #FFF;
}

.videoBackground .emailBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  padding: 20px;
  z-index: 10;

  @media (max-width: 768px) {
    width: 100%;
    padding: 0 20px;
  }
}

.videoBackground .emailBoxForm {
  display: flex;
  justify-content: center;
  align-items: center;
}

.videoBackground .emailBoxForm input[type="email"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
}

.videoBackground .emailBoxForm button {
  margin-left: 10px;
  padding: 10px;
  border: none;
  background-color: #000;
  color: #fff;
}
</style>
{% schema %}
{
  "name": "Video Background",
  "tag": "section",
  "class": "videoBackground",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_video_controls",
      "default": true,
      "label": "Show Video Controls"
    },
    {
      "type": "select",
      "id": "video_alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center",
      "label": "Video Alignment"
    }
  ],
  "blocks": [
    {
      "type": "video",
      "name": "Video Block",
      "limit": 1,
      "settings": [
        {
          "type": "url",
          "id": "video_link",
          "label": "Video Link"
        },
        {
          "type": "image_picker",
          "id": "video_image",
          "label": "Video Image"
        },
        {
          "type": "range",
          "id": "overlay_opacity",
          "label": "Overlay Opacity",
          "min": 0,
          "max": 99,
          "step": 1,
          "unit": "%",
          "default": 0
        },
        {
          "type": "header",
          "content": "Text"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Video Slide"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text Description",
          "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
        },
        {
          "type": "color",
          "id": "color_text",
          "label": "Text Color",
          "default": "#ffffff"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button Label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        },
        {
          "type": "color",
          "id": "color_btn_bg",
          "label": "Button Background Color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "color_btn_text",
          "label": "Button Text Color",
          "default": "#ffffff"
        }
      ]
    },
    {
      "type": "email_form",
      "name": "Email Form Block",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_title",
          "default": true,
          "label": "Show Title"
        },
        {
          "type": "text",
          "id": "title",
          "default": "Subscribe to Our Newsletter",
          "label": "Title"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text Description"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button Label"
        },
        {
          "type": "color",
          "id": "color_text",
          "label": "Text Color"
        },
        {
          "type": "color",
          "id": "color_btn_text",
          "label": "Button Text Color"
        },
        {
          "type": "color",
          "id": "color_btn_bg",
          "label": "Button Background Color"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video Background",
      "category": "Main",
      "blocks": [
        { "type": "video" }
      ]
    }
  ]
}
{% endschema %}