.form-container{
  background-color: #5795ee;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    box-shadow: 1px 6px 20px 0 rgba(0, 78, 203, 0.3);
    border-radius: 16px;
}

.form-container .kl-card{
      box-shadow: 1px 1px 6px 0 rgba(0, 78, 203, 0.6);
    width: 100%;
    padding-top: 32px;
    padding-right: 32px;
    padding-bottom: 56px;
    padding-left: 32px;
    background-color: #ffffff;
    border: 1px solid #d0e4ff;
    border-radius: 12px;
}

.form-container .kl-card__content {
  margin-bottom: 12px;
}
.form-container .kl-card__content h2{
  font-size: 32px; 
}
form .hs-richtext, form .hs-richtext p{
 margin-bottom: 8px; 
}

.form-container .button, .form-container .button_cta a, .form-container button, .form-container form .hs-button, .form-container form input[type=submit]{
 width: 100%; 
}



/* floating labels */

/* ==========================================================
   Floating labels for HubSpot LEGACY forms
   Scope: only forms inside an element with .floating-labels
   ========================================================== */

.floating-labels {
  --fl-pad-x: 1rem;
  --fl-label-color: #4E5777;   /* 5.9:1 on white – keep >= 4.5:1 */
  --fl-focus-color: #1d4ed8;   /* swap for your brand color (check contrast) */
  --fl-border: #8a929e;        /* 3:1 on white for the field boundary */
  --fl-error: #b42318;
  --fl-height: 50px;
  --fl-label-bg: #fff;         /* match the form's background color */
}
.hs-form-required{
    color: var(--fl-label-color);
}
/* Field wrapper becomes the positioning context */
.floating-labels .fl-field {
  position: relative;
}

/* The real <label>, sitting inside the input at rest */
.floating-labels .fl-field > label {
  position: absolute;
  top: calc(var(--fl-height) / 2);  /* vertically centered in the field at rest */
  left: calc(var(--fl-pad-x) - 4px);
  z-index: 1;
  /*max-width: calc(100% - (var(--fl-pad-x) * 2));*/
  margin: 0;
  padding: 0 4px;                   /* gap around the text where it crosses the border */
  font-size: 16px;
  line-height: 1.2;
  color: var(--fl-label-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;            /* clicks pass through to the input */
  transform: translateY(-50%);
  transform-origin: left center;
  transition: top 0.15s ease, transform 0.15s ease, color 0.15s ease;
  max-width: unset;
  width: auto;
    text-wrap: wrap;
}

/* Fixed 50px fields; the floated label sits on the top border, so no extra top padding */
.floating-labels .fl-field .hs-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--fl-height);
  max-height: var(--fl-height);
  padding: 0 var(--fl-pad-x);
  font-size: 16px;                 /* 16px+ also prevents iOS zoom on focus */
  line-height: 1.25;
}

.floating-labels .fl-textarea .hs-input {
  height: auto;
  max-height: none;               /* textareas are exempt from the 50px cap */
  min-height: 7rem;
  padding: 0.9rem var(--fl-pad-x);
  resize: vertical;
}

/* ---------- Floated state: label overlaps the top border ---------- */
.floating-labels .fl-field:focus-within > label,
.floating-labels .fl-field.is-filled > label,
.floating-labels .fl-select > label {
  top: 0;
  transform: translateY(-50%) scale(0.8);   /* 16px -> 12.8px */
    background: background: #FBFBFD;
background: linear-gradient(0deg, rgba(251, 251, 253, 1) 50%, rgba(255, 255, 255, 1) 50%);
}

/* Browser autofill (kept separate so an unsupported selector can't break the rules above) */
.floating-labels .fl-field:has(.hs-input:-webkit-autofill) > label {
  top: 0;
  transform: translateY(-50%) scale(0.8);
}

/* ---------- Focus ---------- */
.floating-labels .fl-field:focus-within > label {
  color: var(--fl-focus-color);
}
.floating-labels .fl-field .hs-input:focus {
  outline: none;                  /* replaced by the 2px border below */
  border-color: var(--fl-focus-color);
  box-shadow: 0 0 0 1px var(--fl-focus-color);
}

/* Placeholders would collide with the resting label: hide until focus */
.floating-labels .fl-field .hs-input::placeholder {
  color: transparent;
}
.floating-labels .fl-field:focus-within .hs-input::placeholder {
  color: #6b7280;
}

/* ---------- Description (moved below the input by JS) ---------- */
.floating-labels .fl-field .hs-field-desc {
  display: block;
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--fl-label-color);
}

/* ---------- Errors ---------- */
.floating-labels .fl-field.is-invalid .hs-input {
  border-color: var(--fl-error);
}
.floating-labels .fl-field.is-invalid > label {
  color: var(--fl-error);
}
.floating-labels .fl-field .hs-error-msgs,
.floating-labels .fl-field .hs-error-msgs li,
.floating-labels .fl-field .hs-error-msgs label {
line-height: 1.3;
    color: var(--fl-error);
    margin: 0;
    font-size: 12px;
    font-weight: 500;
}
.floating-labels .fl-field .hs-error-msgs {
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
}
.floating-labels .fl-field .hs-error-msgs label {
  position: static;               /* HubSpot wraps error text in a <label> */
  top: auto;
  left: auto;
  padding: 0;
  background: none;
  transform: none;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .floating-labels .fl-field > label {
    transition: none;
  }
}