/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/hero-section/style.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.hero-section {
  border-radius: 1.25rem;
  width: 100%;
  overflow: hidden; /* initial fallback */
  position: relative; /* For proper stacking */
  height: 100px; /* initial fallback */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* This will be overridden by JavaScript on Android */
@supports (height: 100dvh) {
  .hero-section {
    height: calc(85dvh - var(--navbar-height, 80px));
  }
}
/* Fallback for very old browsers */
@supports not (height: 100dvh) {
  .hero-section {
    height: calc(85vh - var(--navbar-height, 80px));
  }
}
.hero-overlay {
  opacity: 0.6;
  width: 100%;
  height: 80%;
  position: absolute;
  inset: auto 0% 0%;
}

.ec-btn i {
  font-size: 1em; /* Match text size */
  line-height: 1; /* Prevent extra height */
  vertical-align: middle; /* Align baseline */
  position: relative;
  top: 0.05em; /* Fine-tune vertical alignment */
}

.value-prop {
  max-width: 720px; /* default large desktop */
  text-wrap: balance;
}

/* ✅ 1920x1080 @125% (≈1536px) & 1440px screens */
@media (max-width: 1600px) {
  .value-prop {
    max-width: 660px;
  }
}
/* ✅ Standard laptop range */
@media (max-width: 1440px) {
  .value-prop {
    max-width: 580px;
  }
}
/* ✅ Tablet */
@media (max-width: 1024px) {
  .value-prop {
    max-width: 500px;
  }
}
/* ✅ Mobile */
@media (max-width: 767px) {
  .value-prop {
    max-width: 100%;
  }
}
/*==============================================================================*/
.hero-section-wrapper {
  position: relative;
  margin-bottom: 5rem;
}
@media (max-width: 991.98px) {
  .hero-section-wrapper {
    margin-bottom: 0;
  }
}

.hero-section {
  border-radius: 1.25rem;
  width: 100%;
  overflow: visible !important; /* CRITICAL: Overrides fallback to allow form to break out safely */
  position: relative;
  height: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media (max-width: 991.98px) {
  .hero-section {
    height: auto !important;
    padding-top: 4rem !important;
  }
}

/* Maintain your dynamic viewport fallback architecture for desktops */
@supports (height: 100dvh) {
  @media (min-width: 992px) {
    .hero-section {
      height: calc(90dvh - var(--navbar-height, 80px)); /* Syncs cleanly with your JS engine */
    }
  }
}
.hero-overlay {
  opacity: 0.6;
  width: 100%;
  height: 100%; /* Changed from 80% to 100% to fully cover behind the form breakout */
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  z-index: 1;
}

.hero-form-column {
  position: relative;
  align-self: center;
}
@media (max-width: 991.98px) {
  .hero-form-column {
    margin-top: 3rem;
    margin-bottom: 0;
    width: 100%;
  }
}
.hero-form-column .overflow-form {
  position: relative;
  background: #ffffff;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 1rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /*
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.06),   
      0 8px 16px rgba(0, 0, 0, 0.04);
  */
  border-radius: 2rem !important;
  max-width: 520px;
}
@media (max-width: 575.98px) {
  .hero-form-column .overflow-form {
    padding: 2.5rem 1.5rem !important;
  }
}
.hero-form-column .overflow-form h2 {
  color: #0b133c;
  font-weight: 700;
}

.hero-content-left {
  position: relative;
  z-index: 3;
}

.value-prop {
  max-width: 720px;
  text-wrap: balance;
}

/* Keep your existing max-width query rules intact */
@media (max-width: 1600px) {
  .value-prop {
    max-width: 660px;
  }
}
@media (max-width: 1440px) {
  .value-prop {
    max-width: 580px;
  }
}
@media (max-width: 1024px) {
  .value-prop {
    max-width: 500px;
  }
}
@media (max-width: 767px) {
  .value-prop {
    max-width: 100%;
  }
}
.ec-btn i {
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: 0.05em;
}

/*==================================================================================*/
.fluentform .ff-el-group {
  margin-bottom: 0px !important;
}

.ff-el-section-break hr {
  background-color: #212529 !important;
}

/* ============================================
   GLOBAL RESET FOR FLUENTFORM
   ============================================ */
.fluentform_wrapper_7 * {
  box-sizing: border-box;
  font-family: inherit !important;
}

/* Apply to all */
.fluentform_wrapper_7 [data-name=ff_cn_id_1] .ff-el-group .ff-el-form-control {
  margin-bottom: 0.8rem !important;
}

/* Reset only if it's the last of its type */
.fluentform_wrapper_7 .ff-el-group .ff-el-form-control#ff_7_email {
  margin-bottom: 0 !important;
}

/* Remove fieldset, hr style */
.fluentform_wrapper_7 fieldset {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fluentform_wrapper_7 hr {
  margin: 1rem 1.5rem 0rem 0rem !important;
  opacity: 0.15;
}

.ff-default .ff-el-form-check label.ff-el-form-check-label {
  margin-bottom: 0 !important;
}

.fluentform .ff-t-column-1 .gender_input {
  margin-bottom: 1rem !important;
}

@media only screen and (min-width: 641px) {
  .fluentform .ff-el-group.ff_list_inline .ff-el-form-check {
    margin: 0 1rem 0 0 !important;
  }
}
.fluentform .ff-el-form-check {
  margin-bottom: 0 !important;
}

.fluentform_wrapper_7 [data-name=ff_cn_id_3] .question-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fluentform_wrapper_7 [data-name=ff_cn_id_3] .ff-el-group label {
  margin: 0 !important;
}

/* ============================================
   LABELS (Bootstrap style)
   ============================================ */
.fluentform_wrapper_7 label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: inline-block;
}

/* ============================================
   INPUTS + TEXTAREA + SELECT
   (apply Bootstrap .form-control + .form-select)
   ============================================ */
.fluentform_wrapper_7 input.ff-el-form-control,
.fluentform_wrapper_7 textarea.ff-el-form-control,
.fluentform_wrapper_7 select.ff-el-form-control {
  width: 100%;
  display: block;
  padding: 0.6rem 0.9rem !important;
  font-size: 1rem;
  border-radius: 0.5rem !important;
  background-color: #fff;
  line-height: 1.4;
}

/* Large input like .input-group-lg */
.fluentform_wrapper_7 input.ff-el-form-control,
.fluentform_wrapper_7 select.ff-el-form-control {
  padding: 0.8rem 1rem !important;
  font-size: 1.1rem !important;
  height: auto !important;
}

/* Placeholder style */
.fluentform_wrapper_7 ::-moz-placeholder {
  color: #999 !important;
}
.fluentform_wrapper_7 ::placeholder {
  color: #999 !important;
}

/* Focus */
.fluentform_wrapper_7 input.ff-el-form-control:focus,
.fluentform_wrapper_7 textarea.ff-el-form-control:focus,
.fluentform_wrapper_7 select.ff-el-form-control:focus {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
  outline: none !important;
}

/* ============================================
   RADIO + CHECKBOX
   ============================================ */
.fluentform_wrapper_7 .ff-el-form-check-input {
  width: 1.2rem !important;
  height: 1.2rem !important;
  margin-right: 0.35rem !important;
}

.fluentform_wrapper_7 .ff-el-form-check {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
}

.fluentform_wrapper_7 .ff-el-form-check-label span {
  font-weight: normal;
  font-size: 1rem;
}

/* ============================================
   DROPDOWNS (to match Bootstrap form-select-lg)
   ============================================ */
.fluentform_wrapper_7 select.ff-el-form-control {
  -webkit-appearance: auto !important;
     -moz-appearance: auto !important;
          appearance: auto !important;
  padding: 0.9rem 1rem !important;
}

/* ============================================
   TEXTAREA (Bootstrap look)
   ============================================ */
.fluentform_wrapper_7 textarea.ff-el-form-control {
  resize: vertical;
  padding: 1rem !important;
  font-size: 1rem;
  border-radius: 0.5rem;
}

/* ============================================
   SUBMIT BUTTON (match your Bootstrap button)
   ============================================ */
.fluentform_wrapper_7 .ff-btn-submit {
  width: 100%;
  background-color: var(--bs-primary, #0d6efd) !important;
  border: none !important;
  padding: 0.9rem 1rem !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border-radius: 3.1rem !important;
  color: #fff !important;
  cursor: pointer;
  transition: 0.2s ease;
}

.fluentform_wrapper_7 .ff-btn-submit:hover {
  background-color: #0b5ed7 !important;
}

/* ============================================
   REMOVE EXTRA SPACING FROM FF STRUCTURE
   (to make it clean like your Bootstrap version)
   ============================================ */
.fluentform_wrapper_7 .ff-el-section-title {
  display: none;
}

.fluentform_wrapper_7 .ff-el-input--label {
  margin-bottom: 0.25rem !important;
}

.ff-default .ff-el-input--label label {
  font-size: 1.325rem;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

.fluentform_wrapper_7 input.ff-el-form-control, .fluentform_wrapper_7 textarea.ff-el-form-control, .fluentform_wrapper_7 select.ff-el-form-control {
  border-radius: 1rem !important;
}

.fluentform_wrapper_7 .ff_screen_reader_title {
  display: none !important;
}

/* ============================================
   OVERRIDING PLUG-IN INTERNAL CSS FOR DROPDOWN
   ============================================ */
#ff_7_dropdown.ff-el-form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  /* Layout & Sizing */
  width: 100% !important;
  padding: 0.8rem 2.5rem 0.8rem 1rem !important;
  font-size: 1.1rem !important;
  height: auto !important;
  line-height: 1.4 !important;
  border-radius: 1rem !important;
  /* Aesthetics */
  background-color: #ffffff !important;
  border: 1px solid #ced4da !important;
  color: #212529 !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  /* Custom Clean SVG Arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 16px 12px !important;
}

/* Ensure focus overrides plugin active states */
#ff_7_dropdown.ff-el-form-control:focus {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
  outline: none !important;
}

/* ============================================
   CLEAN OPTION LIST ELEMENTS (For Native Select)
   ============================================ */
#ff_7_dropdown.ff-el-form-control option {
  font-family: inherit;
  font-size: 1rem !important;
  color: #212529 !important;
  background-color: #ffffff !important;
  /* Adds breathing space to options on supported modern browsers */
  padding: 10px 15px !important;
}

/* Style the very first "placeholder" item separately */
#ff_7_dropdown.ff-el-form-control option[value=""] {
  color: #999999 !important;
}

/* ============================================
   SMART DROPDOWN POPUP LIST CONTAINER 
   ============================================ */
/* 1. The Main Dropdown Popup Box */
.fluentform_wrapper_7 .choices__list--dropdown,
.fluentform_wrapper_7 .choices__list[aria-expanded] {
  border-radius: 1.25rem !important; /* Matches your premium layout curvature */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; /* Smooth, soft breakout shadow */
  margin-top: 0.5rem !important; /* Creates a clean gap between input and list */
  overflow: hidden !important; /* CRITICAL: Clips the sharp corners of internal list items */
  z-index: 999 !important;
}

/*# sourceMappingURL=style-index.css.map*/