/* ===== Base ===== */
html,
body {
  height: 100%;
  width: 100%;
}
body {
  font-family: "Montserrat", Arial;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

/* ===== Variáveis ===== */
:root {
  --branco: #fefefe;
  --branco-opaco: #f2f9da;
  --azul-escuro: #000b21;
  --azul-claro: #29d1f9;
  --azul: #117cd9;
  --branco-azulado: #f8f9ff;
  --cinza: #6d69698c;
  --preto-transp: rgba(0, 0, 0, 0.8);
  --montserrat: "Montserrat", Arial;

  /* CTA global */
  --btn-bg: #600e9b;
  --btn-radius: 50px;
  --btn-pad-y: 12px;
  --btn-pad-x: 28px;
  --btn-font-size: 20px;
  --btn-font-weight: 800;
}

/* ===== Header ===== */
header {
  width: 100%;
  background-image: url(../img/DRM_partners2_desktop.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 50px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1920 / 742;
}
#containerHeader {
  width: 680px;
  height: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  padding-bottom: 15%;
}
#containerHeader h1 {
  color: #fff;
  font-size: 55px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -4px;
  padding-bottom: 2.5vw;
}
.headerSubtitle {
  color: #fff;
  font-size: 40px;
  font-weight: 300;
  text-align: center;
  margin: 0;
  letter-spacing: -1px;
}
.headerTitle {
  color: #fff;
  font-size: 55px;
  font-weight: 700;
  text-align: center;
  margin: 0;
  letter-spacing: -2px;
}

/* ===== Sessão Ferramentas ===== */
#sessaoFerramentas {
  width: 100%;
  padding: 40px 0 80px 0;
}
.containerFerramentasVestibular {
  max-width: 980px;
  width: 92%;
  margin: -30px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.features-logo {
  width: clamp(180px, 30vw, 500px);
  height: auto;
  margin-bottom: 25px;
}
.features-desc {
  max-width: 720px;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  color: #1b1b1b;
  margin: 0 0 28px 0;
}
.features-title {
  font-size: 28px;
  font-weight: 800;
  color: #1b1b1b;
  text-align: center;
  margin: 10px 0 20px 0;
}
.features-grid {
  width: 100%;
  max-width: 920px;
  margin: 0 auto 22px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 22px 120px;
  margin-right: -50px;
}
.feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.feature__icon {
  width: 24px;
  height: 24px;
  margin-top: 3px;
}
.feature__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: #1b1b1b;
}
.callToAction {
  margin-top: 12px;
}

/* ===== Vantagens ===== */
.vantagens {
  width: 100%;
  padding: 64px 0 80px;
  background: #6666cc;
}
.section-vantagens {
  width: min(1100px, 92%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 36px;
}
.section-vantagens strong {
  color: #fff;
  font-size: clamp(26px, 3.2vw, 36px);
  text-align: center;
  font-weight: 800;
}
.container-vantagens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 48px;
  width: 100%;
}
.box-vantagens {
  display: grid;
  justify-items: center;
  text-align: center;
  row-gap: 14px;
  color: #fff;
}
.box-vantagens img {
  width: 72px;
  height: auto;
}
.box-vantagens b {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.box-vantagens p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.95;
}

/* ===== Níveis (faixa) ===== */
.levels-container {
  width: min(1200px, 92%);
  margin: 139px auto;
  text-align: center;
  color: #fff;
}
.sete-porque {
  width: 100%;
  aspect-ratio: 1920 / 2580;
  background: url(../img/BackgroundNIVEIS.png) center / cover no-repeat;
  position: relative;
  margin-top: -145px;
  padding: clamp(42px, 8vw, 125px) 0 clamp(54px, 10vw, 140px) !important;
  z-index: 2;
  /* overflow: hidden; */
}
.level-row__title {
  font-size: 65px;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -5px;
  font-family: "Trebuchet MS";
}
.levels-title {
  margin: -10px 0 clamp(90px, 2vw, 48px) !important;
  font-weight: 800;
  color: #fff !important;
  font-size: clamp(22px, 3.2vw, 32px) !important;
}

#levels .splide__slide {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center;
  align-items: center;
  gap: clamp(14px, 3vw, 28px) !important;
  text-align: center !important;
}
.level-img {
  width: clamp(0px, 30vw, 400px) !important;
  height: auto !important;
  margin: 45px auto !important;
  display: block !important;
}
.level-text {
  max-width: clamp(280px, 70vw, 1100px) !important;
  color: #e8eaf6 !important;
  font-size: clamp(14px, 1.6vw, 21px) !important;
  line-height: 2.1 !important;
  text-align: center !important;
  margin-top: clamp(8px, 2.4vw, 31px) !important;
}

/* ===== Final CTA ===== */
.final-cta {
  width: 100%;
  background: #fff url(../img/BackgroundFINAL.png) center / cover no-repeat;
  aspect-ratio: 1920 / 1073;
  display: grid;
  place-items: center;
  margin-top: calc(-1 * clamp(54px, 13vw, 207px));
  position: relative;
  z-index: 1;
}
.final-cta__content {
  width: min(1100px, 92%);
  text-align: left;
  color: #fff;
  padding: clamp(40px, 3vw, 80px) 70px 75px;
  margin-left: -80px;
}
.final-cta__title {
  margin: 80px 0 18px 0;
  font-weight: 800;
  font-size: clamp(30px, 2.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.5px;
}
.final-cta__text {
  max-width: 680px;
  margin: 0;
  font-size: clamp(18px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}
#carroussel .callToAction {
  display: block;
  width: fit-content;
  margin: 85px auto 0;
  margin-left: 425px;
}

/* ===== Form ===== */
/*#credencie{
  background-color:var(--branco-azulado); font-family:'Montserrat';
  padding:62vw 0; margin-top:-250px; background:url(../img/Mobile_Background_Image_Form.png) center / cover no-repeat;
  scroll-margin-top:120px;
}
@media (min-width: 992px){
  #credencie{ padding:160px 0 150px; background:url(../img/Desktop_Background_Image_Form.png) center / cover no-repeat; scroll-margin-top:160px; }
}

/* ===== CTA GLOBAL (vale para TODOS os botões) ===== */
button.callToAction {
  -webkit-appearance: none;
  appearance: none;
  display: flex !important;
  margin: auto !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  border-radius: var(--btn-radius) !important;
  border: 0 !important;
  background: var(--btn-bg) !important;
  color: #fff !important;
  font-family: var(--montserrat);
  font-weight: var(--btn-font-weight) !important;
  font-size: var(--btn-font-size) !important;
  line-height: 1 !important;
  width: fit-content !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
a.callToAction,
.levels-cta,
#btnEnviar {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  border-radius: var(--btn-radius) !important;
  border: 0 !important;
  background: var(--btn-bg) !important;
  color: #fff !important;
  font-family: var(--montserrat);
  font-weight: var(--btn-font-weight) !important;
  font-size: var(--btn-font-size) !important;
  line-height: 1 !important;
  width: fit-content !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
.callToAction p {
  margin: 0 !important;
}
.callToAction:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.callToAction:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* ===== Níveis desktop: imagem à esquerda, texto à direita ===== */
.levels-mobile {
  display: block;
}
.levels-desktop {
  display: none;
}

@media (min-width: 992px) {
  .levels-mobile {
    display: none;
  }
  .levels-desktop {
    display: block;
  }
  .levels-container {
    width: min(1120px, 92%);
    margin: 140px auto;
    text-align: left;
  }
  .levels-title {
    margin: 0 384px 100px 400px !important;
    text-align: left !important;
  }

  .levels-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  .level-row {
    /* display: grid;
    grid-template-columns: clamp(200px, 26vw, 280px) 1fr;
    align-items: flex-start;
    column-gap: clamp(24px, 3.5vw, 64px); */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .level-row__figure {
    width: 100%;
    text-align: center;
  }
  .level-row__figure img {
    width: 100%;
    height: auto;
    display: block;
    margin-left: 180px;
  }
  .level-row__copy {
    max-width: 820px;
    color: #e8eaf6;
    text-align: left;
  }
  .level-row__text {
    margin: 0 160px 116px 170px;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.7;
    text-align: center;
  }
  .level-row__cta {
    margin: 8px 0 0 170px !important;
  }
}

/* ===== Responsivo extra ===== */
@media (max-width: 992px) {
  .features-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    justify-items: center;
    gap: 14px 0;
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  header {
    height: auto;
    background-image: url(../img/DRM_partners2_mobile.jpg);
    aspect-ratio: 580 / 617;
  }
  #containerHeader {
    margin: 45vw 0 0 0;
    height: auto;
    width: 100%;
    padding-bottom: 30%;
  }
  #containerHeader h1 {
    font-size: 9vw;
    width: 95%;
  }
  .features-desc {
    font-size: 16px;
  }
  .features-title {
    font-size: 24px;
  }
  .callToAction {
    /* mantém largura natural */
  }
}
@media (max-width: 576px) {
  .sete-porque {
    padding: 12vw 0 16vw;
    aspect-ratio: 580 / 777;
    background: url(../img/BackgroundNIVEISmobile.png);
    margin-top: -75px;
  }
  .levels-title {
    margin-top: 4vw;
    font-size: clamp(22px, 6vw, 28px);
  }
  .level-img {
    width: clamp(220px, 60vw, 320px);
  }
  .level-text {
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.55;
    padding: 0 16px;
    max-width: 95%;
  }
  .final-cta {
    background-image: url(../img/BackgroundFINALmobile.png);
    aspect-ratio: 580 / 979;
    margin-top: -15vw;
    position: relative;
    background-position: center top;
  }
  .final-cta__content {
    position: absolute;
    left: 50%;
    bottom: 18vw;
    transform: translateX(-50%);
    width: min(92%, 340px);
    text-align: center;
    z-index: 1;
    padding: 0;
  }
  .final-cta .callToAction {
    padding: 10px 22px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    margin: 6px auto 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  }
}
/* FIX: botão de Vantagens acima da faixa "Níveis" */
.vantagens {
  position: relative;
} /* cria o stacking context */
.vantagens .callToAction {
  position: relative;
  z-index: 3; /* maior que o z-index:2 de .sete-porque */
  pointer-events: auto; /* garante que receba o clique */
}
/* ===== Header textos mobile vs desktop ===== */
.header-desktop {
  display: block;
}
.header-mobile {
  display: none;
}

@media (max-width: 768px) {
  .header-desktop {
    display: none;
  }
  .header-mobile {
    display: block;
    text-align: center;
  }
  .header-mobile .headerTitle {
    font-size: clamp(20px, 7vw, 34px);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
  }
  .header-mobile .headerTitle span {
    font-weight: 800;
  }
}
/* ===== Ajuste Vantagens ===== */

/* desktop/tablet mantém o grid */
@media (min-width: 769px) {
  .container-vantagens {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas */
    gap: 36px 48px;
  }
}

/* mobile ≤ 768px: vira lista */
@media (max-width: 768px) {
  .container-vantagens {
    display: flex !important;
    flex-direction: column !important;
    row-gap: 32px !important;
  }
  .box-vantagens {
    text-align: center;
    max-width: 100%;
  }
}
/* ============== FIX CARROSSEL (id correto) ============== */
#levels-splide .splide__slide {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center;
  align-items: center;
  gap: clamp(14px, 3vw, 28px) !important;
  text-align: center !important;
}

/* (opcional, reforça as medidas dos elementos já usados) */
#levels-splide .level-img {
  width: clamp(220px, 60vw, 320px);
  height: auto;
  margin: 24px auto 8px;
  display: block;
}
#levels-splide .level-text {
  max-width: 95%;
  margin: 0 auto;
}

.testimonyTitle {
  text-align: center;
  font-size: 35px;
  line-height: 35px;
  margin-bottom: 80px;
}
.boldText {
  font-weight: bold;
}

/* ============== MOBILE: arte de fundo completa ============== */
@media (max-width: 576px) {
  .sete-porque {
    /* mantém sua arte mobile mas garante que apareça inteira */
    background-image: url(../img/BackgroundNIVEISmobile.png) !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important; /* mostra a arte inteira */
    padding: 12vw 0 16vw !important;
    min-height: calc(777 / 580 * 100vw); /* altura proporcional à arte */
    margin-top: -5vh; /* mantém seu offset atual */
    z-index: 2;
  }
}
/* ===== esconder botões no MOBILE apenas ===== */
@media (max-width: 768px) {
  /* botão roxo que fica abaixo do carrossel (7 porquê) */
  .levels-cta {
    display: none !important;
  }

  /* botão roxo da seção Vantagens */
  .vantagens .callToAction {
    display: none !important;
  }
}
/* ===== Ajustes fortes do carrossel NÍVEIS (MOBILE) ===== */
@media (max-width: 768px) {
  /* puxa o carrossel pra cima dentro da faixa */
  .sete-porque .levels-container .levels-mobile {
    margin-top: -10vw !important;
  }

  /* aumenta a imagem do slide */
  .sete-porque .levels-container #levels-splide .level-img {
    width: clamp(280px, 72vw, 400px) !important;
    margin: 10px auto 12px !important;
    display: block !important;
  }

  /* deixa o texto mais legível e mais estreito */
  .sete-porque .levels-container #levels-splide .level-text {
    font-size: clamp(15px, 4.3vw, 18px) !important;
    line-height: 1.6 !important;
    max-width: 92% !important;
    margin: 0 auto !important;
    color: #e8eaf6 !important;
  }

  /* posiciona as setas verticalmente */
  .sete-porque .levels-container #levels-splide .splide__arrows {
    top: 38% !important;
  }

  .levels-container {
    width: 100%;
    margin: 139px auto;
    text-align: center;
    margin-top: 26px;
  }

  .levels-title {
    margin-top: 4px;
    margin: 4px;
    font-size: 15px;
  }

  #levels-splide .splide__slide {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center;
    align-items: center;
    gap: clamp(14px, 3vw, 28px) !important;
    text-align: center !important;
  }

  /* ===== estilo das setas do Splide ===== */
  #levels-splide .splide__arrow {
    background: none !important; /* tira o círculo cinza */
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
  }

  #levels-splide .splide__arrow svg {
    fill: #fff !important; /* seta branca */
    width: 28px !important;
    height: 28px !important;
  }
}
/* ===== esconder APENAS o botão do carrossel no MOBILE ===== */
@media (max-width: 768px) {
  .sete-porque .levels-container .levels-mobile .levels-cta {
    display: none !important;
  }
}

/* ===== reduzir espaço entre título e carrossel (MOBILE) ===== */
@media (max-width: 768px) {
  .sete-porque .levels-title {
    margin-bottom: 15vw !important; /* antes devia estar ~90px */
  }
}
/* ===== estilo das setas do Splide ===== */
#levels-splide .splide__arrow {
  background: none !important; /* tira o círculo cinza */
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
}

#levels-splide .splide__arrow svg {
  fill: #fff !important; /* seta branca */
  width: 28px !important;
  height: 28px !important;
}

/* wave image  */
.waveSection {
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.allWhiteWaveSection {
  background-image: url("../img/upWaveDesktopAllWhite.jpg");
  aspect-ratio: 1917/277;
  margin-bottom: 40px;
}
/* End of wave image  */

/* ===== Final CTA — MOBILE (ajustes finos) ===== */
@media (max-width: 576px) {
  /* garante que nada “vaze” para fora */
  #carroussel {
    overflow: hidden;
  }

  .final-cta {
    /* já usa a arte mobile; só asseguramos o enquadramento */
    background-position: center top;
  }

  .final-cta__content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4vw; /* sobe/abaixa o bloco de texto */
    width: min(92%, 360px); /* largura confortável no mobile */
    text-align: center; /* centraliza tudo */
    padding: -1 16px; /* respiro lateral */
    margin: 0;
  }

  .final-cta__title {
    margin: 0 0 10px 0;
    font-size: clamp(22px, 6.2vw, 28px);
    line-height: 1.15;
    letter-spacing: 0;
  }

  .final-cta__text {
    margin: 0 0 12px 0;
    font-size: clamp(12.5px, 3.5vw, 14px);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
  }

  /* Botão alinhado e contido no layout */
  .final-cta .callToAction {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 22px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    width: auto !important; /* nunca ocupa a largura toda */
    max-width: 240px; /* evita estourar */
    margin: 10px auto 0; /* centralizado */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  }
}
/* manter escondidos apenas os botões que você pediu no mobile */
@media (max-width: 768px) {
  .vantagens .callToAction {
    display: none !important;
  } /* só vantagens */
  .levels-mobile .levels-cta {
    display: none !important;
  } /* só carrossel */

  /* e garantir que o botão do FINAL apareça */
  .final-cta .callToAction {
    display: inline-flex !important;
    position: relative;
    z-index: 3; /* acima de qualquer overlay */
  }
  .final-cta__content {
    z-index: 2;
  }
}
/* ===== garantir que o botão do FINAL CTA apareça no mobile ===== */
@media (max-width: 768px) {
  #carroussel.final-cta .final-cta__content .callToAction {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* === Força o botão da section FINAL a aparecer no mobile === */
@media (max-width: 768px) {
  #carroussel.final-cta .final-cta__content .callToAction {
    display: inline-flex !important; /* ganha de qualquer regra anterior   */
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important; /* evita ficar fora da área visível  */
  }
}
/* ===== HEADER MOBILE: corrigir peso e alinhamento ===== */
@media (max-width: 768px) {
  .header-mobile .headerTitle {
    font-weight: 400 !important; /* menos grosso que 700/800 */
    font-size: clamp(22px, 9vw, 40px) !important;
    line-height: 1.25 !important; /* altura da linha equilibrada */
    letter-spacing: -0.5px; /* leve ajuste nas letras */
    text-align: center !important;
    margin: 0 auto 12px; /* respiro embaixo */
    width: 90%; /* controla largura */
  }

  .header-mobile .headerTitle span {
    display: block; /* força quebra organizada */
    font-weight: 700 !important; /* dá destaque só na segunda linha */
  }
}
@media (max-width: 768px) {
  .header-mobile .headerTitle span {
    display: inline !important; /* não quebra de linha */
    white-space: nowrap !important; /* garante uma linha só */
  }
}

/* ===== Ajuste de tamanho do logo ===== */
.navLogoImg {
  max-width: 260px; /* aumenta o limite no desktop */
  width: 100%;
  height: auto;
}

/* versão mobile: pode ser um pouco menor que desktop */
@media (max-width: 768px) {
  .navLogoImg {
    max-width: 200px; /* limite confortável no mobile */
  }
}

/* ===== Ajuste botão Níveis – DESKTOP ===== */
@media (min-width: 992px) {
  .level-row__cta {
    margin-top: 0 !important; /* antes estava 8px ou mais */
    margin-left: 170px !important; /* mantém alinhamento lateral */
  }
}
.navUpBarText {
  text-decoration: none !important;
}
/* ===== FORM LOCAL ===== */
:root {
  --backgroundColor: #571292;
  --defaultFontForm: "Montserrat", sans-serif;
  --colorWhite: white;
  --colorFont: #6d6d6d;
  --width: 90%;
  --maxWidth: 1200px;
}

* {
  margin: 0;
  padding: 0;
  font-family: var(--defaultFontForm);
  box-sizing: border-box;
}

.formSection {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.imageBackgroundForm {
  width: 100%;
  height: auto;
}

.imageBackgroundForm img {
  width: 100%;
}

.formImageDesktop {
  display: block;
}

.formImageMobile {
  display: none;
}

.formContainer {
  width: var(--width);
  max-width: var(--maxWidth);
  height: fit-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.formTitle {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 0.25rem;
  text-align: center;
  margin-bottom: 2.75rem;
}

.formTitle h1 {
  font-size: 42px;
  font-weight: 450;
}

.formTitle span {
  font-size: 36px;
}

.formTitle p {
  font-size: 16px;
}

.formBoxLead {
  width: 60%;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 2.5rem;
}

.simpleInputContainer {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
}

.doubleInputContainer {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 2rem;
  row-gap: 2.5rem;
  flex-wrap: wrap;
}

.doubleInputContainer.simpleInputContainer {
  width: 22.75rem;
}

.buttonSubmitForm {
  padding: 0.55rem 3.75rem;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.1rem;
  cursor: pointer;
  border: none;
  border-radius: 2rem;
  transition: 0.3s;
  color: var(--colorWhite);
  background-color: var(--backgroundColor);
}

.buttonSubmitForm:hover {
  opacity: 0.8;
}

.simpleInputContainer input {
  width: 100%;
}

.simpleInputContainer textarea {
  width: 100%;
  max-width: 90rem;
}

.simpleInputContainer select {
  width: 100%;
  cursor: pointer;
}

.simpleInputContainer input,
.simpleInputContainer select,
.simpleInputContainer textarea {
  height: 2.5rem;
  padding: 0.5rem;
  font-size: 15px;
  font-weight: 400;
  border-style: solid;
  border-color: #a9a9a9;
  border-width: 2px;
  border-left: none;
  border-right: none;
  border-top: none;
  background-color: #0000ff00;
  color: var(--colorFont);
}

.simpleInputContainer input:focus,
.simpleInputContainer select:focus,
.simpleInputContainer textarea:focus {
  outline: 0;
}

.simpleInputContainer label {
  color: red;
  position: absolute;
  top: 100%;
  opacity: 0;
}

.boldStyle {
  font-weight: 700;
}

#warningLabelContainer {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.simpleInputContainer option {
  width: 100%;
}

@media (max-width: 1412px) {
  .doubleInputContainer.simpleInputContainer {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .formTitle {
    row-gap: 0.25rem;
    margin-bottom: 1rem;
  }

  .formTitle h1 {
    font-size: 28px;
    font-weight: 450;
  }

  .formTitle span {
    font-size: 22px;
  }

  .formTitle p {
    font-size: 10px;
  }

  .formBoxLead {
    width: 80%;
    row-gap: 0.65rem;
  }

  .doubleInputContainer {
    width: 100%;
    row-gap: 0.65rem;
  }

  .buttonSubmitForm {
    padding: 0.35rem 3.05rem;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.1rem;
  }

  .simpleInputContainer input,
  .simpleInputContainer select,
  .simpleInputContainer textarea {
    height: 2rem;
    padding: 0.5rem;
    font-size: 13px;
    font-weight: 400;
    overflow: hidden;
  }

  .simpleInputContainer label {
    font-size: 11px;
  }

  .doubleInputContainer.simpleInputContainer {
    width: 100%;
  }
}

@media (max-width: 880px) {
  .buttonSubmitForm {
    padding: 0.35rem 3.05rem;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.1rem;
  }

  .simpleInputContainer input,
  .simpleInputContainer select,
  .simpleInputContainer textarea {
    height: 1.8rem;
    padding: 0.45rem;
    font-size: 11px;
    font-weight: 350;
  }

  .simpleInputContainer label {
    font-size: 9px;
  }

  .doubleInputContainer.simpleInputContainer {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .buttonSubmitForm {
    padding: 0.5rem 2.25rem;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1rem;
  }
}

@media (max-width: 750px) {
  .formImageDesktop {
    display: none;
  }

  .formImageMobile {
    display: block;
  }

  .formTitle h1 {
    font-size: 24px;
    font-weight: 450;
  }

  .formTitle span {
    font-size: 18px;
  }

  .formTitle p {
    font-size: 10px;
  }

  .buttonSubmitForm {
    padding: 0.35rem 2rem;
    font-weight: 700;
    font-size: 12px;
  }

  .simpleInputContainer input,
  .simpleInputContainer select,
  .simpleInputContainer textarea {
    height: 2rem;
    padding: 0.5rem;
    font-size: 12px;
    font-weight: 400;
  }

  .simpleInputContainer label {
    font-size: 10px;
  }
}

@media (max-width: 433px) {
  .buttonSubmitForm {
    padding: 0.45rem 1.75rem;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1rem;
  }

  .simpleInputContainer input,
  .simpleInputContainer select,
  .simpleInputContainer textarea {
    height: 1.8rem;
    padding: 0.45rem;
    font-size: 11px;
    font-weight: 350;
  }

  .simpleInputContainer label {
    font-size: 9px;
  }

  .doubleInputContainer.simpleInputContainer {
    width: 100%;
  }
}

@media (max-width: 393px) {
  .formTitle {
    margin-bottom: 0.5rem;
  }

  .formTitle h1 {
    font-size: 18px;
    font-weight: 450;
  }

  .formTitle span {
    font-size: 14px;
  }

  .formTitle p {
    font-size: 8px;
  }

  .buttonSubmitForm {
    padding: 0.35rem 1.75rem;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: normal;
  }

  .simpleInputContainer input,
  .simpleInputContainer select,
  .simpleInputContainer textarea {
    height: 1.65rem;
    padding: 0.4rem;
    font-size: 10px;
    font-weight: 350;
  }

  .simpleInputContainer label {
    font-size: 9px;
  }

  .doubleInputContainer.simpleInputContainer {
    width: 100%;
  }
}

@media (max-width: 350px) {
  .formTitle h1 {
    font-size: 18px;
    font-weight: 400;
  }

  .formTitle span {
    font-size: 13px;
  }

  .formTitle p {
    font-size: 7px;
  }

  .buttonSubmitForm {
    padding: 0.25rem 1rem;
    font-weight: 600;
    font-size: 8px;
  }

  .simpleInputContainer input,
  .simpleInputContainer select,
  .simpleInputContainer textarea {
    height: 1.5rem;
    padding: 0.25rem;
    font-size: 8px;
    font-weight: 250;
  }

  .simpleInputContainer label {
    font-size: 7px;
  }
}