/* Global Styles */
@font-face {
  font-family: 'Gotham Book';
  src: url('./font/GothamBook.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'Gotham Bold';
  src: url('./font/GothamBold.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: 'Kanit';
  src: url('./font/Kanit-ExtraBold.ttf') format('truetype');
  font-weight: 800; /* 800 para ExtraBold */
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Evita rolagem horizontal caso existam elementos ultrapassando as bordas */
  background-color: #1E1E1E;
}


/* Hero Section Responsiva */
.hero-section {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background-color: #171717;
  background-size: cover;
  background-position: center;
  height: 1220px;
  padding: 20px 5%;
  box-sizing: border-box;
}

.hero-logo {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 250px;
}

.hero-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hero-image img {
  max-width: 100%;
  margin-left: 10px;
  margin-bottom: -80px;
  height: auto;
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 40px;
  box-sizing: border-box;
}

.hero-form iframe {
  width: 100%;
  height: 626px;
  border: none;
  border-radius: 20px;
  margin-top: -100px;
}

@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    text-align: center;
    align-items: center;
    height: 1800px;
  }

  .hero-logo {
    position: relative;
    top: 0;
    left: 0;
    width: 250px;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  .hero-content {
    width: 100%;
    padding-left: 0;
    order: 2; /* Formulário vem após o logo */
  }

  .hero-form {
    margin-top: 100px;
    width: 100%;
  }

  .hero-image {
    width: 100%;
    justify-content: center;
    order: 3; /* Imagem abaixo do formulário */
    margin: 0 auto;
    margin-top: -740px;
  }

  .hero-image img {
    width: 100%;
    height: auto;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 20px;
  }
}

.hero-form-wrapper {
  background-color: #121212;
  padding: 60px 50px;
  border-radius: 36px;
  max-width: 400px;
  color: #fff;
  font-family: 'Gotham Book', sans-serif;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  margin-top: -80px;
}

.hero-form-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 36px;
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.0;
}

.hero-form-subtitle {
  font-size: 16px;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.6;
}

.hero-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-form a {
  color: #0BE5FF;
  text-decoration: underline;
}

.hero-form label {
  font-size: 16px;
  margin-bottom: 4px;
}

.hero-form input[type="text"],
.hero-form input[type="email"],
.hero-form input[type="tel"] {
  width: 100%;
  padding: 12px 10px;
  border: none;
  border-radius: 24px;
  background-color: #2c2c2c;
  color: #fff;
  font-family: 'Gotham Book', sans-serif;
  font-size: 16px;
}

.hero-form input::placeholder {
  color: #bbb;
}

.checkbox-wrapper {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
}

.checkbox-wrapper input[type="checkbox"] {
  margin-top: 4px;
}

.hero-form button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(90deg, #6C38FF, #0BE5FF);
  border: none;
  border-radius: 32px;
  font-family: 'Gotham Bold', sans-serif;
  font-size: 16px;
  color: #161616;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.hero-form button:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .hero-form-wrapper {
    width: 100%;
    padding: 24px;
    margin: 0 auto;
    margin-top: -260px;
    margin-bottom: 100px;
  }

  .hero-form-subtitle {
    margin-bottom: -100px;
  }

  .hero-form input,
  .hero-form button {
    font-size: 15px;
  }

  .checkbox-wrapper {
    flex-direction: column;
    gap: 8px;
  }
}


/* Sessão 2 */
.s2-section {
  position: relative; /* Mantém a seção no fluxo normal */
  background-color: #1C41ED;
  background-size: cover;
  width: 100%;
  padding: 120px 0;
  text-align: center;
  margin-top: -180px; /* Invade a sessão 1 */
  z-index: 3;
}

.s2-content {
  position: relative; /* Permite que os elementos sejam manipulados com z-index */
  z-index: 3; /* Garante que o conteúdo textual fique acima de outros elementos */
  margin-left: 15%;
  max-width: 445px;

}

.s2-content h1 {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  color: #F9F9F9;
  margin-bottom: 20px;
  line-height: 1.2;
  margin-top: -40px;
}

.s2-content p {
  font-family: 'Gotham Book', sans-serif;
  font-size: 1.125rem;
  color: #F9F9F9;
  margin-bottom: 20px;
  line-height: 1.5;
}

.s2-content p span.highlight-tma {
  font-family: 'Gotham Bold', sans-serif;
  color: #D23DE0;
}

.s2-content p span.highlight-rechamada {
  font-family: 'Gotham Bold', sans-serif;
  color: #D23DE0;
}

.s2-content p span.highlight-nps {
  font-family: 'Gotham Bold', sans-serif;
  color: #1CEDBA;
}

.s2-content p span.highlight-operator {
  font-family: 'Gotham Bold', sans-serif;
  color: #F9F9F9;
}

.s2-content .cta-button {
  display: inline-block;
  background: linear-gradient(90deg, #27AAE0, #1CEDBA);
  color: #1C41ED;
  font-family: 'Kanit', sans-serif;
  font-size: 20px;
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  width: 100%;
  max-width: 425px;
  text-align: center;
  margin-top: 20px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease-in-out;
}

.s2-image {
  position: absolute; /* Faz a imagem "sair" do fluxo normal */
  bottom: 0; /* Coloca a imagem alinhada à parte inferior */
  right: 0; /* Cola a imagem na direita */
  z-index: 2; /* Faz com que a imagem fique abaixo do texto, mas acima da Sessão 1 */
  width: 100%; /* Ajusta o tamanho da imagem */
  max-width: 50%
}

.s2-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Sessão 3 */
.s3-section {
  position: relative; /* Mantém a seção no fluxo normal */
  background: url('./imagens/bgs3.svg') no-repeat center center;
  background-size: cover;
  width: 100%;
  padding: 60px 0;
  z-index: 3; /* Garante que a Sessão 3 esteja acima da Sessão 2 */
  margin-top: -5%; /* Sobrepõe ligeiramente a Sessão 2 */
  display: flex; /* Cria layout lado a lado */
  justify-content: space-between; /* Espaçamento entre imagem e texto */
  align-items: center; /* Centraliza verticalmente */
  gap: 20px; /* Espaço entre imagem e texto */
}

.s3-image {
  flex: 1; /* A imagem ocupará uma parte proporcional do espaço */
  max-width: 120%; /* Limita a largura máxima da imagem */
  display: flex;
  justify-content: center;
  align-items: center;
}

.s3-image img {
  width: 110%;
  height: auto;
  object-fit: cover;
}

.s3-content {
  flex: 1; /* O texto ocupará a outra parte proporcional do espaço */
  max-width: 475px;
  margin-right: 15%; /* Espaçamento à direita */
  text-align: right; /* Alinha todo o texto à direita */
}

.s3-content h1 {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 46px;
  color: #1C41ED;
  margin-bottom: 20px;
  line-height: 1.2;
}

.s3-content p {
  font-family: 'Gotham Book', sans-serif;
  font-size: 18px;
  color: #F9F9F9;
  margin-bottom: 20px;
  line-height: 1.5;
}

.s3-content p span {
  font-family: 'Gotham Bold', sans-serif;
  color: #F9F9F9;
}

/* Sessão 4 */
.s4-section {
  position: relative;
  background: url('./imagens/bgs4v3.svg') no-repeat center center;
  background-size: cover;
  width: 100%;
  padding: 60px 0;
  margin-top: -250px; /* Para sobrepor levemente a Sessão 3 */
  z-index: 4;
  text-align: center; /* Centraliza o conteúdo */
}

.s4-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 42px;
  line-height: 1.2;
  max-width: 930px;
  margin: 0 auto 20px;
  color: #F9F9F9;
  margin-top: 180px;
}

.s4-title span.gray {
  color: #676767; /* Palavras destacadas em cinza */
}

.s4-description {
  font-family: 'Gotham Book', sans-serif;
  font-size: 18px;
  color: #F9F9F9;
  line-height: 1.5;
  max-width: 930px;
  margin: 0 auto 40px;
}

.s4-boxes {
  display: flex;
  justify-content: center;
  gap: 20px; /* Espaço entre as caixas */
  margin-bottom: 40px;
  flex-wrap: wrap; /* Garante que as caixas fiquem organizadas no mobile */
}

.s4-box {
  width: 265px;
  height: 348px;
  background-color: #202020;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centraliza o conteúdo verticalmente */
  align-items: center; /* Centraliza o conteúdo horizontalmente */
  text-align: center; /* Centraliza o texto dentro das caixas */
  padding: 20px;
  gap: 10px; /* Espaço entre os elementos (título e texto) */
}

.s4-box-title {
  font-family: 'Gotham Bold', sans-serif;
  font-size: 18px;
  color: #676767;
}

.s4-box-text {
  font-family: 'Gotham Book', sans-serif;
  font-size: 18px;
  color: #F9F9F9;
  line-height: 1.5;
}
.s4-footer {
  font-family: 'Gotham Bold', sans-serif;
  font-size: 26px;
  color: #F9F9F9;
  margin-top: 40px;
}

.s4-video-container {
display: flex;
justify-content: center; /* Centraliza o vídeo horizontalmente */
margin-top: 20px; /* Espaçamento superior */
}

.s4-video {
  width: 80%; /* O iframe ocupa 80% da largura disponível */
  max-width: 800px; /* Limita a largura máxima */
  aspect-ratio: 16 / 9; /* Garante que o vídeo mantenha a proporção 16:9 */
  border-radius: 15px; /* Aplica bordas arredondadas */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Adiciona uma sombra ao redor */
  border: none; /* Remove bordas adicionais do iframe */
  overflow: hidden; /* Garante que o conteúdo se ajuste ao contêiner */
  padding: 40px;
}

/* Sessão 5 */
.s5-section {
  position: relative;
  background: url('./imagens/bgs5.svg') no-repeat center center;
  background-size: cover;
  background-color: #171717;
  width: 100%;
  padding: 60px 20px;
  text-align: center;
  z-index: 5;
}

.s5-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.4;
  color: #F9F9F9;
  max-width: 740px;
  margin: 0 auto 40px;
  margin-top: 80px;
}

.s5-image {
  margin: 20px auto;
}

.s5-subtitle {
  font-family: 'Gotham Bold', sans-serif;
  font-size: 26px;
  line-height: 1.5;
  color: #F9F9F9;
  margin: 30px 0;
}

.s5-subtitle .highlight {
  color: #27AAE0; /* Destaque para "TalkPilot.ai" */
}

.s5-description {
  font-family: 'Gotham Book', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #F9F9F9;
  max-width: 740px;
  margin: 20px auto;
}

.s5-boxes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Permite organizar as caixas no mobile */
  gap: 20px; /* Espaço entre as caixas */
  margin-top: 40px;
}

.s5-box {
  width: 200px;
  height: 340px;
  background: linear-gradient(180deg, #1c41ed, #27aae0);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.s5-box-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}

.s5-box-title {
  font-family: 'Gotham Bold', sans-serif;
  font-size: 20px;
  color: #F9F9F9;
  margin-bottom: 10px;
}

.s5-box-description {
  font-family: 'Gotham Book', sans-serif;
  font-size: 16px;
  color: #F9F9F9;
  line-height: 1.5;
}

.s5-footer {
  font-family: 'Gotham Bold', sans-serif;
  font-size: 22px;
  line-height: 1.4;
  color: #F9F9F9;
  margin-top: 40px;
  max-width: 740px;
  margin: 40px auto;
}

/* Sessão 6 */
.s6-section {
  position: relative;
  background: url('./imagens/bgs6.svg') no-repeat center center;
  background-size: cover;
  background-color: #1E1E1E;
  width:100%;
  padding:60px 20px;
  text-align:center;
  z-index:6;
  margin-top:-50px; /* Sobreposição para a Sessão 5 */
  height:443px;
}

.s6-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.4;
  color: #F9F9F9;
  margin-bottom: 30px;
  margin-top: 60px;
}

.s6-description {
  font-family: 'Gotham Book', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #c8c8c8;
  max-width: 800px;
  margin: 0 auto;
}

.s6-description .highlight {
  font-family: 'Gotham Bold', sans-serif;
  color: #F9F9F9; /* Destaque em branco */
}

/* Sessão 7 */
.s7-session {
  text-align: center;
  padding: 20px;
  background-color: #1E1E1E;
  color: #f9f9f9;
}

.s7-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #27AAE0;
}

.s7-title .s7-highlight {
  color: #F9F9F9;
}

.s7-subtitle {
  font-family: 'Gotham Book', sans-serif;
  font-size: 18px;
  margin-top: 10px;
}

.s7-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

.s7-box {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 40px;
}

.s7-text-1 {
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin-top: 40px;
}

.s7-text-2 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 42px;
  color: #27AAE0;
  margin-top: -15px;
}

.s7-text-3 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin-top: -40px;
}

.s7-footer {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-top: 80px;
}

/* Sessão 8 */
.s8-session {
  position: relative;
  background: url('./imagens/bgs8v2.svg') no-repeat center center;
  background-size: cover;
  background-color: #1E1E1E;
  padding: 60px 0;
  margin-top: 20px; /* Sobrepõe a Sessão 7 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 4;
  height: 550px;
}

.s8-left {
  flex: 1;
  padding: 0 40px;
  margin-left: 15%;
  margin-top: 30px;
}

.s8-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: 1.2;
  color: #F9F9F9;
  margin-bottom: 20px;
}

.s8-title .highlight {
  color: #1C41ED;
}

.s8-text {
  font-family: 'Gotham Bold', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #F9F9F9;
  margin-bottom: 20px;
}

.s8-text span {
  font-family: 'Gotham Book', sans-serif;
  font-size: 18px;
}

.s8-cta {
  display: inline-block;
  background: linear-gradient(90deg, #27AAE0, #1CEDBA);
  color: #1C41ED;
  font-family: 'Kanit', sans-serif;
  font-size: 20px;
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  width: 100%;
  max-width: 425px;
  text-align: center;
  margin-top: 20px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease-in-out;
}

.s8-cta:hover {
  transform: scale(1.05);
}

.s8-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
  margin-top: 570px;
}

.s8-image {
  position: absolute;
  bottom: -50px; /* Ajuste para que ultrapasse a sessão 7 */
  right: 0;
  width: auto;
  max-width: 700px; /* Limite o tamanho máximo */
  height: auto;
  z-index: 5; /* Garante que a imagem esteja acima da sessão 7 */
}


/* Versão Mobile */
  @media (max-width: 768px){

    /* Sessão 2 */
      .s2-section {
          display: flex;
          flex-direction: column; /* Alinha os elementos verticalmente */
          justify-content: flex-start; /* Posiciona os itens no início */
          align-items: center; /* Centraliza horizontalmente */
          padding: 0 24px; /* Respeita a margem lateral de 24px */
          width: 100%; /* Ocupa 100% da largura da tela */
          box-sizing: border-box;
          margin-top: -350px;
        }
      
        .s2-content {
          text-align: center;
          width: 100%; /* Garante que ocupa a largura disponível */
          max-width: 100%; /* Remove restrições de largura */
          padding: 0; /* Remove padding adicional */
          margin: 0; /* Remove margens extras */
        }
      
        .s2-content h1 {
          font-size: 1.4rem; /* Ajusta o tamanho para mobile */
          line-height: 1.4;
          margin-top: 40px;
          margin-bottom: 12px;
        }
      
        .s2-content p {
          font-size: 1rem;
          line-height: 1.6;
          margin-bottom: 12px;
        }
      
        .s2-content .cta-button {
          font-size: 1rem; /* Ajusta o tamanho do botão */
          padding: 12px 24px; /* Ajusta o espaçamento interno */
          width: calc(100% - 48px); /* Respeita a margem de 24px */
          max-width: 300px; /* Limita a largura máxima */
          margin: 20px auto 0; /* Centraliza o botão e adiciona espaçamento superior */
        }
      
        .s2-image {
          position: relative; /* Permite controle preciso de posição */
          width: 100%;
          max-width: 400px; /* Aumenta a largura máxima para 400px */
          margin-top: 10px; /* Adiciona mais espaço acima da imagem */
          margin-left: 50px;
          top: -35px; /* Move a imagem 20px para baixo */
        }
      
        .s2-image img {
          width: 100%; /* Garante que a imagem ocupe toda a largura disponível */
          height: auto; /* Mantém a proporção da imagem */
        }

        /* Sessão 3 */
        .s3-section {
          display: flex;
          flex-direction: column; /* Define a direção como coluna padrão */
          justify-content: flex-start; /* Alinha os itens no início */
          align-items: center; /* Centraliza horizontalmente */
          padding: 0 24px; /* Margem lateral de 24px */
          width: 100%;
          box-sizing: border-box;
          text-align: center;
          gap: 0; /* Remove o espaçamento extra entre os itens */
          margin-top: -150px; /* Ajuste menor para dispositivos móveis */
        }
        
        .s3-content {
          order: 1; /* Garante que o texto vem primeiro */
          text-align: center; /* Centraliza o texto */
          width: 100%; /* Garante que ocupe toda a largura */
          margin-bottom: 20px; /* Espaçamento entre texto e imagem */
          margin: 50px auto;
        }
        
        .s3-image {
          order: 2; /* Garante que a imagem vem depois */
          width: 100%;
          margin-top: 20px; /* Espaçamento entre o texto e a imagem */
          max-width: 100%; /* Ocupam toda a largura no mobile */
          margin: 0 auto; /* Centralizam os itens */
        }
        
        .s3-image img {
          width: 100%;
          height: auto; /* Mantém a proporção */
          margin-left: -50px;
        }

        /* Sessão 4 */
            
          /* Sessão 4 */
.s4-section {
  text-align: center; /* Centraliza o conteúdo */
  padding: 20px 24px; /* Ajusta o espaçamento interno */
  box-sizing: border-box; /* Inclui padding no cálculo de largura */
}

.s4-title {
  font-size: 1.8rem; /* Ajusta o tamanho da fonte para mobile */
  line-height: 1.4; /* Ajusta o espaçamento entre linhas */
  margin: 160px 0 20px; /* Adiciona espaço superior para descer o texto */
  margin-top: 250px;
  padding: 0 24px; /* Garante margens laterais consistentes */
}

.s4-description {
  font-size: 1rem; /* Ajusta o tamanho da descrição */
  line-height: 1.6;
  margin: 0 auto 20px; /* Centraliza e adiciona espaçamento inferior */
  padding: 0 24px; /* Garante que respeita margens laterais */
  box-sizing: border-box;
}

.s4-boxes {
  display: flex;
  flex-direction: column; /* Empilha as caixas verticalmente */
  gap: 20px; /* Espaçamento entre as caixas */
  margin: 20px 0; /* Margem para separar do conteúdo superior */
  padding: 0 24px; /* Garante que as caixas respeitem a margem lateral */
  box-sizing: border-box;
}

.s4-box {
  width: 100%; /* Ocupa toda a largura disponível */
  max-width: 100%; /* Remove restrições de largura */
  height: auto; /* Ajusta dinamicamente a altura ao conteúdo */
  padding: 20px; /* Adiciona espaçamento interno */
  box-sizing: border-box; /* Inclui padding no cálculo da largura */
  text-align: center; /* Centraliza o texto dentro da caixa */
}

.s4-box-title {
  font-size: 1.2rem; /* Ajusta o tamanho do título */
  margin-bottom: 10px; /* Espaçamento inferior para separar do texto */
}

.s4-box-text {
  font-size: 1rem; /* Ajusta o tamanho do texto */
  line-height: 1.5; /* Ajusta o espaçamento entre linhas */
  margin-bottom: 40px;
}

.s4-footer {
  font-size: 1rem; /* Ajusta o tamanho da fonte */
  line-height: 1.6; /* Ajusta o espaçamento entre linhas */
  margin-top: 80px;
  margin: 20px 24px 0; /* Garante espaçamento e respeita margens laterais */
  padding: 0 24px; /* Inclui padding lateral para alinhar corretamente */
  box-sizing: border-box;
}


/* Sessão 5 */
.s5-section {
  text-align: center;
  padding: 20px 24px; /* Margem interna com espaçamento lateral */
  box-sizing: border-box; /* Inclui padding no cálculo da largura */
}

.s5-title {
  font-size: 26px; /* Ajusta o tamanho do título */
  margin-bottom: 20px; /* Espaçamento inferior */
  line-height: 1.4;
}

.s5-description {
  font-size: 1rem; /* Ajusta o tamanho do texto */
  line-height: 1.6; /* Espaçamento entre linhas */
  margin: 0 auto 20px; /* Centraliza o texto e adiciona espaçamento inferior */
  padding: 0 24px; /* Respeita as margens laterais */
  box-sizing: border-box;
}

.s5-boxes {
  display: flex;
  flex-direction: column; /* Empilha as caixas */
  gap: 20px; /* Espaçamento entre as caixas */
  width: 100%;
  padding: 0 24px; /* Ajusta o espaçamento interno lateral */
  box-sizing: border-box; /* Inclui padding no cálculo da largura */
}

.s5-box {
  width: 100%; /* Ocupa 100% da largura disponível */
  max-width: calc(100% - 48px); /* Garante a margem de 24px de cada lado */
  height: auto; /* Altura ajustável ao conteúdo */
  padding: 20px; /* Espaçamento interno */
  box-sizing: border-box; /* Inclui padding no cálculo da largura */
  text-align: center; /* Centraliza o conteúdo */
  background: linear-gradient(180deg, #1c41ed, #27aae0); /* Restaura a cor original */
  border-radius: 8px; /* Bordas arredondadas para estilo */
  margin: 0 auto; /* Centraliza horizontalmente */
}

.s5-box-title {
  font-size: 1.2rem; /* Ajusta o tamanho do título */
  margin-bottom: 10px; /* Espaçamento inferior para separar do conteúdo */
}

.s5-box-description {
  font-size: 1rem; /* Ajusta o tamanho do texto */
  line-height: 1.5; /* Ajusta o espaçamento entre linhas */
}

.s5-footer {
  font-size: 1rem; /* Ajusta o tamanho do texto */
  line-height: 1.6; /* Ajusta o espaçamento entre linhas */
  margin: 20px 24px 0; /* Adiciona margens superiores e laterais */
  padding: 0 24px; /* Respeita as margens laterais */
  text-align: center; /* Centraliza o texto */
  box-sizing: border-box;
  margin-bottom: 40px;
}


  /* Sessão 6 */
  .s6-section {
      text-align: center; /* Centraliza os textos */
      padding: 20px 24px; /* Ajusta o espaçamento interno com margens laterais */
      box-sizing: border-box; /* Garante que padding esteja incluído na largura */
      background-size: cover; /* Faz o background cobrir todo o container */
      background-repeat: no-repeat; /* Evita repetição do background */
      background-position: center; /* Centraliza o background */
      background-color: #1E1E1E; /* Cor de fundo para áreas sem imagem */
      height: auto;
    }
  
    .s6-title {
      font-size: 1.8rem; /* Ajusta o tamanho do título */
      line-height: 1.4; /* Ajusta o espaçamento entre linhas */
      margin-bottom: 20px; /* Espaçamento inferior */
      padding: 0 24px; /* Respeita as margens laterais */
      box-sizing: border-box; /* Garante cálculo correto */
    }
  
    .s6-description {
      font-size: 1rem; /* Ajusta o tamanho do texto */
      line-height: 1.6; /* Ajusta o espaçamento entre linhas */
      margin: 0 auto 20px; /* Centraliza e adiciona espaçamento inferior */
      padding: 0 24px; /* Garante que respeita margens laterais */
      box-sizing: border-box; /* Inclui padding no cálculo de largura */
      margin-bottom: 80px;
    }
  
    .s6-section::after {
      content: ''; /* Garante que o container expanda com o conteúdo */
      display: block;
      clear: both; /* Remove elementos flutuantes se existirem */
    }
  
    /* Sessão 7 */
    .s7-grid-container {
      display: flex; /* Usa flexbox para organizar as caixas */
      flex-direction: column; /* Organiza as caixas verticalmente */
      gap: 10px; /* Reduz a distância entre as caixas */
      align-items: center; /* Centraliza as caixas horizontalmente */
      margin: 0 24px; /* Respeita as margens laterais */
      padding: 0; /* Remove qualquer padding extra */
      box-sizing: border-box; /* Inclui padding no cálculo de largura */
    }
  
    .s7-box {
      width: calc(100% - 48px); /* Respeita as margens laterais de 24px */
      margin: 0 auto; /* Centraliza cada caixa */
      padding: 20px; /* Espaçamento interno */
      text-align: center; /* Centraliza o conteúdo da caixa */
      background: #1E1E1E; /* Cor de fundo da caixa */
      color: #F9F9F9; /* Cor do texto */
      border-radius: 8px; /* Bordas arredondadas */
      box-sizing: border-box; /* Inclui padding no cálculo de largura */
    }
  
    .s7-title {
      font-family: 'Kanit', sans-serif;
      font-weight: 800;
      font-size: 36px;
      color: #27AAE0;
    }

    .s7-footer{
      height: 100px;
      margin-top: 20px;
    }

/* Sessão 8 */
.s8-session {
  display: flex;
  flex-direction: column; /* Alinha os elementos verticalmente */
  justify-content: flex-start; /* Garante que os elementos comecem do topo */
  align-items: center; /* Centraliza horizontalmente os elementos */
  text-align: center;
  padding: 20px 24px; /* Margens laterais consistentes */
  box-sizing: border-box; /* Inclui padding no cálculo da largura */
  height: auto; /* Permite que o container cresça com o conteúdo */
  position: relative; /* Garante que elementos internos respeitem o container */
  margin-top: -80px;
}

.s8-title {
  font-size: 32px; /* Diminui o tamanho do título */
  line-height: 1.4; /* Ajusta o espaçamento entre linhas */
  margin-bottom: 20px; /* Espaçamento inferior do título */
  margin-top: 100px;
}

.s8-left {
  order: 1; /* Primeiro os textos */
  margin: 0 0 20px; /* Garante espaçamento inferior */
  width: 100%; /* Ocupa toda a largura disponível */
  padding: 0 24px; /* Ajusta as margens laterais */
  box-sizing: border-box; /* Inclui padding no cálculo */
}

.s8-right {
  order: 2; /* Imagem depois dos textos */
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente dentro do container */
  margin-top: 10px; /* Ajusta o espaçamento superior */
  width: 100%; /* Ajusta para ocupar toda a largura */
  padding: 0; /* Remove qualquer padding adicional */
  box-sizing: border-box;
}

.s8-right img.s8-image {
  width: 100%; /* Ajusta o tamanho da imagem */
  height: auto; /* Mantém a proporção da imagem */
  object-fit: contain; /* Garante que a proporção seja mantida no container */
  margin: 0 auto; /* Centraliza horizontalmente a imagem */
  position: relative; /* Garante alinhamento correto dentro do container */
  margin-top: -80px;
}

.s8-cta {
  order: 3; /* Botão CTA aparece por último */
  margin-top: 20px; /* Espaçamento superior */
  padding: 12px 24px; /* Ajusta o espaçamento interno do botão */
  font-size: 1rem; /* Ajusta o tamanho da fonte */
  text-align: center; /* Centraliza o texto no botão */
  width: calc(100% - 48px); /* Respeita a margem de 24px */
  max-width: 300px; /* Limita o tamanho do botão */
}

.s4-video {
  width: 80%; /* O vídeo ocupa 80% da largura disponível */
  max-width: 800px; /* Limita a largura máxima do vídeo */
  border-radius: 15px; /* Aplica bordas arredondadas */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Adiciona uma sombra ao redor do vídeo */
  object-fit: cover; /* Garante que o vídeo mantenha proporção */
  margin-bottom: 20px;
}

}

/* Sessão 4-1 Ajustada 
.s4-1-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #171717;
  margin-top: -40px;
}

.s4-1-content {
  max-width: 600px;
  color: #ffffff;
  margin-bottom: 30px;
}

.s4-1-content h1 {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #27AAE0;
  margin-bottom: 10px;
}

.s4-1-content p {
  font-family: 'Gotham Book', sans-serif;
  font-size: 18px;
  color: #ffffff;
}

.s4-1-form {
  width: 100%;
  max-width: 600px;
  height: 885px;
  margin-bottom: 124px;
}*/

/* Responsivo */
@media (max-width: 768px) {
  .s4-1-section {
      padding: 40px 24px;
  }

  .s4-1-content {
      max-width: 100%;
  }

  .s4-1-form {
      max-width: 100%;
      height: auto;
  }
}

    /* Estilos do botão flutuante */
    #whatsapp-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 60px;
      height: 60px;
      background-color: #25D366;
      border-radius: 50%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1000;
    }

    #whatsapp-button img {
      width: 100%;
      height: 100%;
    }

    /* Estilos do popup */
    #whatsapp-popup {
      position: fixed;
      bottom: 90px;
      right: 20px;
      width: 650px;
      height: auto;
      background-color: white;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      display: none;
      flex-direction: column;
      overflow: hidden;
      z-index: 1001;
    }

    #whatsapp-popup iframe {
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 26px;
    }

    /* Botão de fechar */
    #close-popup {
      position: absolute;
      top: 8px;
      right: 12px;
      background: none;
      border: none;
      font-size: 20px;
      color: white;
      cursor: pointer;
      z-index: 1002;
    }

    /* Responsividade */
    @media (max-width: 480px){
      #whatsapp-popup {
        width: 90%;
        height: 570px;
        right: 5%;
      }

      #whatsapp-button {
        width: 50px;
        height: 50px;
      }

      #whatsapp-button img {
        width: 50px;
        height: 50px;
      }

      #close-popup {
          font-size: 40px;

    }

  }