/* =========================================================
   Yottamind Register Split Layout + Gravity Forms Styling
   Copy/paste this whole block
   ========================================================= */

/* Full-width template: remove theme padding */
.main-content-area.full-width-template {
  padding: 0 !important;
}

/* Gravity Forms: force one field per row (stack everything) */
.gform_wrapper.gravity-theme .ginput_complex {
  display: inline !important;
}

.gform_wrapper.one-field-per-row .gform_fields {
  display: block !important;
}

.gform_wrapper.one-field-per-row .gfield {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  clear: both !important;
  float: none !important;
  margin-right: 0 !important;
}

/* GF theme/grid width helpers */
.gform_wrapper.one-field-per-row .gform_fields .gfield--width-half,
.gform_wrapper.one-field-per-row .gform_fields .gfield--width-third,
.gform_wrapper.one-field-per-row .gform_fields .gfield--width-quarter {
  width: 100% !important;
  flex-basis: 100% !important;
}

/* Inputs fill the row */
.gform_wrapper.one-field-per-row input:not([type="checkbox"]):not([type="radio"]),
.gform_wrapper.one-field-per-row select,
.gform_wrapper.one-field-per-row textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Checkbox label sizing */
.gform_wrapper.gravity-theme .gfield_checkbox label {
  font-size: 13px;
}

/* =========================================================
   Split hero layout (desktop: 50/50 image + form)
   NOTE: This assumes your row has class "split-hero"
   and your right column has class "form-right"
   (recommended: add el_class="split-image" to the left column)
   ========================================================= */

/* Use a pseudo-element for the left 50% background image */
.split-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

/* Left half image (desktop) */
.split-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: url("https://yottamind.love/wp-content/uploads/2026/02/meditation-forest-scaled.jpeg")
    center center / cover no-repeat;
background-size: cover;
    background-position: top;
  z-index: 1;
}

/* Keep WPBakery content above the background */
.split-hero > .vc_column_container {
  position: relative;
  z-index: 2;
}
@media (min-width: 900px) {
/* Remove WPBakery gutters so the split edge is clean */
.split-hero.vc_row,
.split-hero .vc_column_container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
}

/* Right column (form) sizing + centering */
.form-right {
  background: #fff;
  max-width: 460px;
  margin: 0 auto;
  padding: 60px 22px; /* <-- this gives left/right padding + top/bottom */
  box-sizing: border-box;
}

/* Optional: nicer heading spacing if needed */
.form-right h1,
.form-right h2,
.form-right h3 {
  margin-top: 0;
}

/* =========================================================
   Mobile (Gene Keys style): image on top, form full width
   ========================================================= */
@media (max-width: 900px) {
  /* Stack the columns */
  .split-hero {
    flex-direction: column !important;
    min-height: auto !important;
  }

  /* Make the background image become a top banner */
  .split-hero::before {
    width: 100% !important;
    height: 38vh !important; /* tweak 30–45vh */
    min-height: 240px !important;
    max-height: 420px !important;
    left: 0 !important;
    top: 0 !important;
  }

  /* Make both columns full width */
  .split-hero > .vc_column_container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Form column: breathe + wider max */
  .form-right {
    max-width: 560px;         /* keeps it “card-like” but not cramped */
    margin: 0 auto;
    padding: 34px 18px;       /* mobile side padding */
    background: #fff;
  }
}

@media (max-width: 480px) {
  .form-right {
    padding-left: 45px;
    padding-right: 45px;
  }
}
/* =========================================================
   FIX: Mobile banner not visible (content is covering ::before)
   ========================================================= */
@media (max-width: 900px) {

  /* Banner height */
  .split-hero::before{
    height: 26vh !important;      /* was 38vh */
    min-height: 180px !important; /* prevents being too tiny */
    max-height: 260px !important; /* keeps it elegant */
  }

  /* Push content down exactly same amount */
  .split-hero{
    padding-top: 26vh !important;
  }

  /* Let the content start AFTER the banner */
  .split-hero > .vc_column_container{
    z-index: 2;
  }

  /* Remove extra top padding so the form doesn't sit too low */
  .form-right{
    padding-top: 28px !important;
  }
}
.full-color-bg {
    border: none !important;
}

  @media (max-width: 480px){
    .split-hero::before{
      height: 22vh !important;
      min-height: 160px !important;
      max-height: 220px !important;
    }
    .split-hero{
      padding-top: 22vh !important;
    }
  }