.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Proporção de 16:9 (9/16 = 0.5625 ou 56.25%) */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 30px;
}



#videoOverlay {
  display: none;
  position: fixed;
  inset: 0; /* top, right, bottom, left = 0 */
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

  /* Container do conteúdo dentro do overlay */
  #videoContainer {
    position: relative;
    width: 80%;
    max-width: 800px;
    margin: auto;
  }

  /* Botão de fechar (X) */
  #closeBtn {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
  }

  /* Responsividade do vídeo (16:9) */
  .video-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio */
    background-color: #000;
  }
  .video-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 0;
  }


  .playVideo {
    position: absolute;
    left: 50%;
  }



  .banner-section-five2 .content-column h1 {
    position: relative;
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1em;
    margin-top: -20px;
    font-family: Poppins, sans-serif;
    text-shadow: -2px 2px 2px #a51e36;
}


.banner-section-five2 {
    position: relative;
    background-color: #f5506e;
    padding-top: 100px;
    padding-bottom: 80px;
    overflow: hidden;
}
.banner-section-five2 .content-column h2{
    position: relative;
    color: #620717;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2em;
    margin: 10px 0 0px;
}


img.small {
  width: 30%;
}

.desafios {
margin-top: -20px !important;

}

.desafios span::before {
  font-family: "Font Awesome 5 Free"; /* ou "Font Awesome 6 Free" dependendo da versão que você incluiu */
  font-weight: 900; /* ícones sólidos */
  content: "\f071"; /* unicode do ícone fa-ban */
  margin-right: 8px;
  color: #e74c3c; /* vermelho para reforçar algo negativo */

}


.process-block-three .inner-box .content-column .text, .process-block-two .inner-box .content-column .text{
margin-top: 10px !important;
margin-bottom: 10px !important;
text-align: center !important;
width: 100%;
font-size: 22px !important;
}

.process-page-section2 {
  position: relative;
    margin-top: 0px;
    padding-top: 100px;
    padding-bottom: 40px;
    background: #e6e6e6;
}

.btn-style-six {
  font-size: 20px !important;
}
.btn-style-7 {
  font-size: 20px !important;
  background-color: #19a562 !important;
  color: #ffffff !important;
  padding: 13px 43px;
    border-radius: 50px;
        cursor: pointer !important;

}
  .btn-style-7:hover {
    font-size: 20px !important;
    background: #26714d !important;
    color: #ffffff !important;
  }


.caixa2 {
    position: relative;
    padding: 20px 40px;
    background-color: #19a562;
    border-radius: 15px;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    line-height: 26px;
    text-align: center;
    margin: -45px 0 70px 0px;
}

.process-block-two.v2 {
  margin-bottom: 0px !important;
  border-bottom: 0px solid #c4c4c4 !important;
}

.img-fluid.force {
  width: 100%;
}
.argument-box {
  position: relative;
  border-radius: 12px;
  padding: 25px;
  height: 100%;
  color: #fff;
  background: rgb(23, 23, 23); /* fundo translúcido */
  backdrop-filter: blur(8px); /* efeito vidro */
  overflow: hidden; /* garante que a borda arredondada se aplique */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* camada da borda neon */
.argument-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px; /* espessura da borda */
  background: linear-gradient(135deg, #ff4fd8, #4fd0ff);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* recorta o centro */
          mask-composite: exclude;
  pointer-events: none;
}

.argument-box i {
  background: linear-gradient(135deg, #ff4fd8, #4fd0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.argument-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(255, 79, 216, 0.6),
              0 0 25px rgba(79, 208, 255, 0.6);
}



.container h1 b {
  font-size: 38px;
  font-weight: 800;
  text-transform: uppercase;

  /* Gradiente neon */
  background: linear-gradient(135deg, #ff7ce2, #d54183);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Substitui o underline comum por efeito neon */
  text-decoration: none;
  position: relative;
}


.btn-neon {
  display: inline-block;
  padding: 14px 28px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff4fd8, #4fd0ff);
  box-shadow: 0 0 5px rgba(255,79,216,0.6),
              0 0 10px rgba(79,208,255,0.6);
  transition: all 0.3s ease;
}

.btn-neon:hover {
  box-shadow: 0 0 15px rgba(255,79,216,0.9),
              0 0 25px rgba(79,208,255,0.9);
  transform: translateY(-3px);
  color: #fff;
  text-decoration: none;
}


 /* Wrapper responsivo 16:9 */
  .video-16x9 {
    position: relative;
    width: 100%;
    /* 16:9 = 9/16 = 56.25% */
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
  }
  .video-16x9 iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* OPCIONAL: em telas MUITO largas, deixar o player um pouco mais alto (ex.: 16:8) */
  @media (min-width: 1400px) {
    .video-16x9.video-tall {
      padding-top: 50%; /* ~16:8 */
    }
  }

  
  /* OPCIONAL: ocupar 100% da viewport horizontal (fora do container) */
  .edge-to-edge {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }

:root{
  --neon-pink: rgba(213, 65, 131, 1);     /* #d54183 */
  --neon-blue: rgba(79, 208, 255, 1);     /* #4fd0ff */
  --glass-bg: rgba(20, 20, 30, 0.60);
  --field-bg: rgba(255, 255, 255, 0.06);
  --field-bd: rgba(255, 255, 255, 0.12);
  --field-tx: #f1f3f7;
}

/* cartão com borda neon arredondada (sem “pintar o meio”) */
.form-neon {
  position: relative;
  border-radius: 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  padding: 28px;
  overflow: hidden;
}
.form-neon::before{
  content:"";
  position:absolute; inset:0;
  border-radius:14px;
  padding:2px;                          /* espessura da borda */
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.form-neon h3{ color:#fff; margin-bottom: 6px; }
.form-neon p{ color:#c9ced6; }

/* grid simples (pode manter Bootstrap junto) */
.form-neon .row-gap{ row-gap: 10px; }

/* inputs/selects com vidro + foco neon */
.form-neon input[type="text"],
.form-neon input[type="email"],
.form-neon input[type="tel"],
.form-neon select {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-bd);
  color: var(--field-tx);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s;
}
.form-neon input::placeholder,
.form-neon select:invalid { color:#9aa3ad; }

.form-neon input:focus,
.form-neon select:focus {
  border-color: transparent;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.08) inset,
    0 0 14px rgba(213,65,131,.45),
    0 0 14px rgba(79,208,255,.45);
}

/* botão neon: você pode manter suas classes e só adicionar .btn-neon */
.btn-neon {
  display:inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration:none;
  font-weight: 800;
  letter-spacing:.5px;
  color:#fff;
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-blue));
  border: 0;
  box-shadow:
    0 0 16px rgba(213,65,131,.55),
    0 0 16px rgba(79,208,255,.55);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-neon:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 22px rgba(213,65,131,.85),
    0 0 22px rgba(79,208,255,.85);
  filter: brightness(1.05);
}

/* ajuda a manter contraste dentro do cartão */
.form-neon .form-label,
.form-neon label { color:#e9edf2; }

/* 1) Diga ao navegador que seus controles usam tema escuro */
:root,
body,
.form-neon {
  color-scheme: dark; /* evita tema claro em selects/inputs nativos */
}

/* 2) Base dos campos */
.form-neon input[type="text"],
.form-neon input[type="email"],
.form-neon input[type="tel"],
.form-neon select,
.form-neon textarea {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #eef3f8 !important;
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
}

/* 3) Placeholder visível no dark */
.form-neon ::placeholder { color:#9aa3ad; opacity:1; }

/* 4) Estado de foco com glow neon */
.form-neon input:focus,
.form-neon select:focus,
.form-neon textarea:focus {
  border-color: transparent !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.08) inset,
    0 0 14px rgba(213,65,131,.45),
    0 0 14px rgba(79,208,255,.45);
}

/* 5) Select sem seta nativa (Safari/Chrome/Firefox) + seta custom */
.form-neon select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M7 10l5 5 5-5' stroke='%23cfe8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 42px; /* espaço para a seta */
}

/* 6) Cor do dropdown e opções (evita fundo branco do sistema) */
.form-neon select,
.form-neon select option {
  background-color: #1a1a20 !important;
  color: #eef3f8 !important;
}

/* Realça opção selecionada na lista */
.form-neon select option:checked {
  background-color: #1b2030 !important;
  color: #fff !important;
}

/* 7) Correção do autofill (Chrome/Safari) que amarela o campo */
.form-neon input:-webkit-autofill,
.form-neon input:-webkit-autofill:hover,
.form-neon input:-webkit-autofill:focus,
.form-neon textarea:-webkit-autofill,
.form-neon select:-webkit-autofill {
  -webkit-text-fill-color: #eef3f8 !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.06) inset !important;
  transition: background-color 9999s ease-out 0s; /* hack para manter a cor */
}

/* 8) Alto contraste/Windows (evita “inverter” cores) */
@media (forced-colors: active) {
  .form-neon input,
  .form-neon select,
  .form-neon textarea {
    forced-color-adjust: none;
    border-color: ButtonBorder;
    color: ButtonText;
    background: Canvas;
  }
}