.elementor-777 .elementor-element.elementor-element-662cd23{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-777 .elementor-element.elementor-element-47d3848{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-777 .elementor-element.elementor-element-a45e50d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-777 .elementor-element.elementor-element-745b829.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-777 .elementor-element.elementor-element-745b829 .jet-form-builder__label{text-align:left;}.elementor-777 .elementor-element.elementor-element-745b829 .jet-form-builder__desc{text-align:left;}.elementor-777 .elementor-element.elementor-element-745b829 .jet-form-builder__fields-group{gap:0.7em 0.7em;}.elementor-777 .elementor-element.elementor-element-745b829 .jet-form-builder__field-wrap.checkradio-wrap span{gap:8px;}.elementor-777 .elementor-element.elementor-element-745b829 .jet-form-builder input{color-scheme:normal;}.elementor-777 .elementor-element.elementor-element-745b829 .jet-form-builder-repeater__row-remove{align-self:flex-start;}.elementor-777 .elementor-element.elementor-element-745b829 .jet-form-builder__action-button{transition:all 0.3s;}.elementor-777 .elementor-element.elementor-element-745b829 .jet-form-builder__next-page-wrap{text-align:left;}.elementor-777 .elementor-element.elementor-element-745b829 .jet-form-builder-message--success{text-align:center;}.elementor-777 .elementor-element.elementor-element-745b829 .jet-form-builder-message--error{text-align:center;}.elementor-777 .elementor-element.elementor-element-745b829 .jet-form-limit-message{text-align:left;}.elementor-777 .elementor-element.elementor-element-ccab326{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-777 .elementor-element.elementor-element-662cd23{--content-width:100%;}.elementor-777 .elementor-element.elementor-element-47d3848{--width:25%;}.elementor-777 .elementor-element.elementor-element-a45e50d{--width:50%;}.elementor-777 .elementor-element.elementor-element-ccab326{--width:25%;}}@media(max-width:1024px){.elementor-777 .elementor-element.elementor-element-662cd23{--min-height:100vh;}}@media(max-width:767px){.elementor-777 .elementor-element.elementor-element-662cd23{--min-height:100vh;}}/* Start custom CSS *//* ---------- GLOBAL TOKENS & MESH BACKGROUND ---------- */
:root {
  /* This creates the multi-color organic look of your image */
  --easl-bg-mesh: 
    radial-gradient(at 0% 0%, hsla(197, 85%, 45%, 1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsla(180, 80%, 40%, 1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, hsla(240, 50%, 20%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(230, 60%, 15%, 1) 0px, transparent 50%),
    radial-gradient(at 50% 50%, hsla(280, 40%, 45%, 0.6) 0px, transparent 50%),
    #000040; /* Base deep navy */

  --easl-card: #FFFFFF;
  --easl-text: #111827;
  --easl-muted: #6B7280;
  --easl-border: #D8DEE6;
  --easl-border-2: #C9D2DE;
  --easl-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);

  --easl-primary: #0FA958;
  --easl-primary-2: #0B7F43;
  --easl-radius: 14px;
  --easl-radius-field: 10px;
  --easl-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* 1. Apply Mesh Background to the whole site */
html, body {
  background: var(--easl-bg-mesh) !important;
  background-attachment: fixed !important;
  background-size: cover;
  min-height: 100vh;
}

/* 2. Clear out Header, Footer, and Shell backgrounds */
#page, 
.site-header, 
.site-footer, 
header, 
footer, 
.elementor-location-header, 
.elementor-location-footer,
.easl-upsl-shell {
  background: transparent !important;
  border: none !important;
}

/* 3. The White Form Card */
.easl-upsl-card {
  background: var(--easl-card) !important;
  border-radius: var(--easl-radius);
  box-shadow: var(--easl-shadow);
  padding: 52px;
  position: relative;
  z-index: 1;
}

/* 4. Responsive adjustments */
@media (max-width: 1024px){
  .easl-upsl-shell{ padding: 28px 16px; }
  .easl-upsl-card{ padding: 34px 22px; }
}

/* ---------- PERMANENT CENTERING & FOOTER LOCK ---------- */

/* 1. Ensure the page body doesn't collapse */
html, body {
  height: 100%;
  margin: 0;
}

/* 2. The Shell: Now acts as a viewport-sized flex container */
.easl-upsl-shell {
  display: flex !important;
  flex-direction: column !important; /* Stack header, card, footer vertically */
  justify-content: center !important; /* Vertical centering */
  align-items: center !important;     /* Horizontal centering */
  
  min-height: 100vh !important;       /* Forces the page to be at least screen height */
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 60px 20px !important;      /* Buffer for top/bottom */
  background: transparent !important;
}

/* 3. The Card: Naturally shrinks/grows, but stays centered */
.easl-upsl-card {
  background: var(--easl-card) !important;
  border-radius: var(--easl-radius);
  box-shadow: var(--easl-shadow);
  padding: 52px;
  
  /* Centering Logic */
  margin: auto !important; /* Pushes against the top/bottom/sides of the shell */
  
  /* Allowing natural shrink/grow without jumping position */
  width: 100% !important;
  max-width: 1000px !important; 
  
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-out; /* Smoothly animates the shrink/grow */
}

/* 4. Footer Lock: Forces footer to bottom if page content is short */
.site-footer, footer, .elementor-location-footer {
  margin-top: auto !important; 
  width: 100%;
}

/* 5. Header Fix: Prevents header from drifting */
.site-header, header, .elementor-location-header {
  margin-bottom: auto !important;
  width: 100%;
}
 
/* ---------- Base typography inside the form ---------- */
.easl-upsl-form,
.easl-upsl-form *{
  font-family: var(--easl-font) !important;
}

.easl-upsl-form{
  color: var(--easl-text);
}

/* ---------- Your requirement: ALL section headings are H4 + bold ---------- */
/* Use this on Elementor headings: class easl-form-h4 */
.easl-upsl-form .easl-form-h4 .elementor-heading-title{
  font-size: 20px !important;     /* H4-ish, matches UPSL feel */
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--easl-text) !important;
  margin: 0 0 16px 0 !important;
}

/* Catch common JetForm heading output (in case headings are inside JetForm) */
.easl-upsl-form h4,
.easl-upsl-form .jet-form-builder__heading,
.easl-upsl-form .jet-form-builder__field-heading{
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--easl-text) !important;
  margin: 18px 0 14px 0 !important;
}

/* ---------- Labels + helper text ---------- */
.easl-upsl-form label,
.easl-upsl-form .jet-form-builder__label{
  font-size: 13px !important;
  font-weight: 650 !important;
  color: #374151 !important;
  margin-bottom: 8px !important;
}

.easl-upsl-form .jet-form-builder__description,
.easl-upsl-form .jet-form-builder__field-description,
.easl-upsl-form small{
  color: var(--easl-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* ---------- Field spacing (UPSL clean spacing) ---------- */
.easl-upsl-form .jet-form-builder-row,
.easl-upsl-form .jet-form-builder__row{
  gap: var(--easl-gap) !important;
}

.easl-upsl-form .jet-form-builder__field-wrap{
  margin-bottom: 18px !important;
}

/* ---------- Inputs / Selects / Textareas ---------- */
.easl-upsl-form input[type="text"],
.easl-upsl-form input[type="email"],
.easl-upsl-form input[type="tel"],
.easl-upsl-form input[type="number"],
.easl-upsl-form input[type="password"],
.easl-upsl-form input[type="url"],
.easl-upsl-form select,
.easl-upsl-form textarea{
  width: 100% !important;
  height: var(--easl-field-h) !important;
  border: 1px solid var(--easl-border) !important;
  border-radius: var(--easl-radius-field) !important;
  background: #fff !important;
  color: var(--easl-text) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  outline: none !important;
  box-shadow: none !important;
}

.easl-upsl-form textarea{
  min-height: 120px !important;
  height: auto !important;
  padding-top: 12px !important;
}

/* Focus state: EASL green ring (modern, premium) */
.easl-upsl-form input:focus,
.easl-upsl-form select:focus,
.easl-upsl-form textarea:focus{
  border-color: rgba(15, 169, 88, 0.75) !important;
  box-shadow: 0 0 0 4px rgba(15, 169, 88, 0.16) !important;
}

/* Placeholder */
.easl-upsl-form ::placeholder{
  color: #9CA3AF !important;
}

/* ---------- Upload field: UPSL dashed box look ---------- */
/* Works for most JetForm media/file fields */
.easl-upsl-form input[type="file"]{
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  border: none !important;
}

/* Wrapper styling around file field (varies by JetForm markup, we target broadly) */
.easl-upsl-form .jet-form-builder-file-upload,
.easl-upsl-form .jet-form-builder__file-upload,
.easl-upsl-form .jet-form-builder-file-field,
.easl-upsl-form .jet-form-builder__field.file-field,
.easl-upsl-form .jet-form-builder__field.file-upload{
  border: 2px dashed var(--easl-border) !important;
  border-radius: 12px !important;
  background: #F8FAFC !important;
  padding: 18px !important;
}

/* If the file field has an inner drop area */
.easl-upsl-form .jet-form-builder-file-upload__dropzone,
.easl-upsl-form .jet-form-builder__file-upload-dropzone{
  min-height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
  color: var(--easl-muted) !important;
}

/* ---------- Step progress (circles) ---------- */
.easl-upsl-form .jet-form-builder-progress,
.easl-upsl-form .jet-form-builder__progress{
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
}

.easl-upsl-form .jet-form-builder-progress__item,
.easl-upsl-form .jet-form-builder__progress-item{
  font-size: 12px !important;
  color: #6B7280 !important;
}

/* Active step: EASL green */
.easl-upsl-form .jet-form-builder-progress__item.is-active .jet-form-builder-progress__marker,
.easl-upsl-form .jet-form-builder__progress-item.is-active .jet-form-builder__progress-marker{
  border-color: var(--easl-primary) !important;
  color: var(--easl-primary) !important;
}

/* Make markers clean + consistent */
.easl-upsl-form .jet-form-builder-progress__marker,
.easl-upsl-form .jet-form-builder__progress-marker{
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 2px solid #D1D5DB !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* ---------- Buttons (Next / Back) ---------- */
.easl-upsl-form button,
.easl-upsl-form .jet-form-builder__action-button,
.easl-upsl-form .jet-form-builder__submit{
  border-radius: 10px !important;
  padding: 12px 22px !important;
  font-weight: 750 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transition: all .18s ease !important;
}

/* Primary (Next/Submit) */
.easl-upsl-form .jet-form-builder__submit,
.easl-upsl-form button[type="submit"]{
  background: var(--easl-primary) !important;
  border: 1px solid var(--easl-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 169, 88, 0.20) !important;
}

/* Hover */
.easl-upsl-form .jet-form-builder__submit:hover,
.easl-upsl-form button[type="submit"]:hover{
  background: var(--easl-primary-2) !important;
  border-color: var(--easl-primary-2) !important;
  transform: translateY(-1px);
}

/* Secondary (Back) */
.easl-upsl-form .jet-form-builder__prev-page,
.easl-upsl-form button.jet-form-builder__prev-page{
  background: #fff !important;
  border: 1px solid var(--easl-border-2) !important;
  color: #111827 !important;
}

.easl-upsl-form .jet-form-builder__prev-page:hover{
  border-color: var(--easl-primary) !important;
  box-shadow: 0 0 0 4px rgba(15, 169, 88, 0.10) !important;
}

/* ---------- Validation / required message ---------- */
.easl-upsl-form .jet-form-builder__message,
.easl-upsl-form .jet-form-builder__error,
.easl-upsl-form .jet-form-builder__field-error{
  color: var(--easl-danger) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

/* Make invalid fields clearly marked */
.easl-upsl-form .is-invalid input,
.easl-upsl-form .is-invalid select,
.easl-upsl-form .is-invalid textarea{
  border-color: rgba(214, 69, 69, 0.7) !important;
  box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.12) !important;
}

/* ---------- Mobile tweaks (UPSL tight mobile) ---------- */
@media (max-width: 767px){
  .easl-upsl-card{ padding: 26px 18px; }
  .easl-upsl-form .jet-form-builder-progress__marker,
  .easl-upsl-form .jet-form-builder__progress-marker{
    width: 30px !important; height: 30px !important;
  }
}


/* ================================
   FIX: Back button missing (JetFormBuilder last step)
   ================================ */

/* 1) Force-show ALL possible "Back" body.elementor-page-777s + wrappers */
.easl-upsl-form .jet-form-builder__prev-page,
.easl-upsl-form .jet-form-builder__action-button--prev,
.easl-upsl-form .jet-form-builder__action-button.prev-page,
.easl-upsl-form .jet-form-builder__prev-page-wrap,
.easl-upsl-form .jet-form-builder__prev-page-wrap * {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 2) Make the actions row always show both buttons */
.easl-upsl-form .jet-form-builder__actions,
.easl-upsl-form .jet-form-builder__submit-wrap,
.easl-upsl-form .jet-form-builder__next-page-wrap,
.easl-upsl-form .jet-form-builder__prev-page-wrap {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* 3) Prevent last-page layout from pushing Back off-screen */
.easl-upsl-form .jet-form-builder__actions {
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

/* 4) If a container is clipping it on last page */
.easl-upsl-form .jet-form-builder__page,
.easl-upsl-form .jet-form-builder__page-wrap,
.easl-upsl-form .jet-form-builder__content-wrapper {
  overflow: visible !important;
}/* End custom CSS */