.page-banner {
  display:flex;
  padding-top: 212px;
  padding-bottom: 83px;
  flex-direction: column;
  gap: 37px;
  padding-left: 75px;
}



.banner-texts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}

.banner-texts h1 {
max-width: 788px;
  width: 100%;
}

.banner-texts h5 {
max-width: 695px;
  width: 100%;
}

.contact-us-container {
display:flex;
gap: 45px;
justify-content: space-between;
flex-wrap: wrap;
}

.contact-us-map {
display: flex;
  gap:40px;
  flex-wrap: wrap;
}

.contact-us-map .c-map img {
max-width: 315px;
  width: 100%;
  max-height: 563px;
  height: 100%;
}

.contact-us-map .c-bases {
display: flex;
  flex-direction: column;
  gap: 47px;
  
}

.contact-us-map .c-bases .base {
color: #007BA3 !important;
}

.form {
width: 467px;
  padding: 24px;
  margin-top: -50px;
}

.form input, .form select {
border-radius: 8px !important;
background: rgba(249, 250, 251, 0.50) !important;
  height: 52px;
  padding-left: 21px !important;
  border: none !important;

box-shadow: 0 20px 29px 0 rgba(0, 0, 0, 0.07) !important;
}

.form input::placeholder {
color: #11223F !important;
  opacity: 0.5;
}

.hsfc-PhoneInput__FlagAndCaret {
  background: rgba(249, 250, 251, 0.50) !important;
  border:none !important;
  padding-left: 21px !important;
}

.form input[type="tel"] {
 
  box-shadow: none !important;
 
}

.hsfc-PhoneInput {
box-shadow: 0 20px 29px 0 rgba(0, 0, 0, 0.07);
}

.form button {
  background-color: #11223F !important;
  color: white;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: var(--fontFamily, Lato);
  font-size: var(--font-size-09375-rem, 15px);
  font-style: normal;
  font-weight: 400 !important;
  line-height: 26px; /* 173.333% */
  letter-spacing: 0.46px;
  border-radius: var(--4, 32px) !important;
  padding: 8px 18px !important;
  
}

.form button:hover {
  background-color: #11223F !important;
}

.form button::before {
  content: "";
  position: absolute;
  inset: -1px;                    /* ocupa TODA a caixa (sem folga) */
  border-radius: inherit;
  background: var(--grad);
  padding: var(--bw);          /* define a espessura do anel */

  /* recorta o meio para sobrar só a borda */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask-composite: exclude;

  z-index: -1;
  opacity: 0;                  /* escondido por padrão */

  pointer-events: none;
}

/* HOVER: mostra a borda gradient; o miolo continua #11223F */
.form button:hover::before {
  opacity: 1;
}

.form .hsfc-Row {
margin-bottom: 24px !important;
}



.form .hsfc-FieldLabel {
margin-bottom: 0px !important;
}



.form .hsfc-NavigationRow {
margin-top: 24px !important;
}

/* ===== Landing form styles (same as your on-demand) ===== */
      .form {
        width: 550px;
        padding: 0 24px;
        
      }
      
      .form h3 {
        margin-bottom: 20px;
        
      }
      
      .form .no-list {
        padding-left: 5px;
        margin: 0;
        
      }
      
      .form li {
      list-style: none;
      }
      
      .form .no-list li {
        list-style: none;
        line-height: 22px;
      }
      
      .form .no-list label {
        font-size: 11px;
        
      }
      
    
      
      .form .legal-consent-container .inputs-list  {
        margin: 0;
        padding: 0;
      }
      
      .form .legal-consent-container .inputs-list input {
        margin: 0;
        height: 25px;}
      
      .form .legal-consent-container .inputs-list span {
        line-height: 22px;}
      
        .form .legal-consent-container .inputs-list .hs-form-required {
        display: none}
        
      .hs_error_rollup {
      display: none;}

      .form .form-row { margin-bottom: 24px; }

      .form input, .form select {
        width: 100%;
        border-radius: 8px !important;
        background: rgba(249, 250, 251, 0.50) !important;
        height: 52px;
        padding-left: 21px !important;
        border: none !important;
        box-shadow: 0 20px 29px 0 rgba(0, 0, 0, 0.07) !important;
        outline: none;
            margin-right: 12px;
    margin-bottom: 12px;
        font-size: 16px;
      }

      .form input::placeholder {
        color: #11223F !important;
        opacity: 0.5;
      }

      .form input.is-error {
        outline: 2px solid rgba(220, 38, 38, .35);
      }
      
      .form .hs-error-msgs {
        color: red;
      }
      
   
      
      .form .input .hs-input {
        width: 100% !important;
      }
      
      .form .input .hs-input[type="checkbox"] {
        width: initial !important;
      }

      
      

      .form .form-error {
        margin-top: 10px;
        color: #b91c1c;
        font-size: 13px;
        display:none;
      }
      .form .form-error.is-visible { display:block; }
      
      .form input[type="submit"] {
        height: auto;
        width: max-content;
        margin:0;
      padding: 0 !important;
        background: transparent !important;
      }

      .hs_submit {
        /* texto */
        margin-top: -15px;
        color: #11223F !important;
        font-feature-settings: 'liga' off, 'clig' off !important;
        font-family: var(--fontFamily, Lato) !important;
        font-size: var(--font-size-09375-rem, 15px) !important;
        font-style: normal !important;
        font-weight: var(--fontWeightMedium, 500) !important;
        line-height: 26px !important;
        letter-spacing: 0.46px !important;
        height: inherit !important;
        /* layout/base */
        --bw: 2px; /* espessura da borda */
        --grad: linear-gradient(80deg, #4FAE8E 3.92%, #3AC899 25.73%, #4BADBB 45.35%, #4DB5DA 71.96%, #079 97.64%);
        position: relative;
        isolation: isolate;                 /* para z-index dos pseudos */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 6px 18px !important;
        width: max-content !important;
        cursor: pointer !important;
        box-sizing: border-box !important;

        /* raio + fundo sem cobrir a borda */
        border-radius: 40px !important;
        background-color: rgba(255,255,255) !important; /* branco 50% */
        background-clip: padding-box !important;           /* não pinta a área da borda */
        overflow: hidden !important;                       /* recorte perfeito no raio */

        /* sem borda real; a borda vem do ::before */
        border: 0 !important;
      }

      /* Borda em gradient (anel), recortada por máscara — FICA ATRÁS do conteúdo */
      .hs_submit::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 40px;
        background: var(--grad);
        padding: var(--bw);

        /* recorta o centro => sobra só a borda (suporte Safari e padrão) */
        -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
                mask-composite: exclude;

        z-index: -1;
        pointer-events: none;
      }

      /* Preenchimento do miolo no hover (anima só opacidade) */
      .hs_submit::after {
        content: "";
        position: absolute;
        inset: var(--bw);                       /* respeita a espessura da borda */
        border-radius: calc(40px - var(--bw));
        background: var(--grad);
        opacity: 0;                             /* estado normal: só o branco 50% */
        transition: opacity 220ms ease;
        z-index: -1;
        pointer-events: none;
      }

      .hs_submit:hover::after {
        opacity: 1;                             /* hover: fundo vira gradient total */
      }

      /* acessibilidade: menos animação para quem prefere */
      @media (prefers-reduced-motion: reduce) {
        .hs_submit::after { transition: none; }
      }


      .hs_submit:hover::before {
        mask-composite: initial;
      }

.form input[type=tel] {
    box-shadow: 0 20px 29px 0 rgba(0, 0, 0, .07) !important;
}


@media (max-width: 768px) {
  .page-banner {
    padding-left: 20px !important;
  }
  
  .form {
  
    width: 100% !important;
    margin-top: 50px; !important}
  
  .hs_submit .hs-button {
  color: #11223f !important;
}
  
  .hs_submit .hs-button {
  color: #11223f !important;
}

}