/* Gerais */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #FF9A02;
    padding-top: 0;
    margin: 0;
  }
  
  .pages {
    background-color: rgba(255, 196, 0, 0.849);
  }

  
  /*
  main {
    margin-top: 60px;
  }*/
  
  .row {
    margin: 0;
  }
  
  .container {
    padding: 70px 0;
  }
  
  p, li {
    color: #444;
    font-size: 14px;
  }

  /* paginas por fora - Contato */

  #secform {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: start;
    background-size: cover; /* Cobre toda a área, sem distorcer */
    background-position: center;
    background-repeat: no-repeat;
    color: white; 
  }

  .logocon {
    height: 200px;
    margin-left: 60px;
  }

  .form {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #FFF;
    border-radius: 10px;
    height: 500px;
    width: 680px;
    color: #FF9A02;
    font-family: 'Roboto', sans-serif;
    margin-right: 120px;
    margin-top: 50px;
  }

  #name {
    width: 500px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid #FF9A02;
    padding-left: 10px;
  }

  #email {
    width: 500px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid #FF9A02;
    padding-left: 10px;
  }

  #mensagem {
    width: 500px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid #FF9A02;
    padding-left: 10px;
  }

  .enviar {
    align-items: center; /* Alinha a imagem verticalmente no centro do botão */
    justify-content: center; /* Alinha a imagem horizontalmente no centro do botão */
    width: 110px; /* Ajuste o tamanho do botão */
    height: 40px; /* Ajuste o tamanho do botão */
    padding: 0; /* Remove o padding padrão do botão */
    color: #FF9A02;
    margin-top: 10px;
    border-radius: 20px;
    border: 1px solid #FF9A02;
    background-color: transparent;
  }

  .enviar:hover {
    background-color: #FF9A02;
    color: #FFF;
  }

  .enviar:focus {
    outline: none; /* Remove o contorno */
  }

  label {
    font-size: 24px;
    display: flex;
    align-items: center;
  }

  form, input, textarea, button {
    font-family: 'Roboto', sans-serif;
  }

  .feedback-message {
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

  .feedback-success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
  }

  .feedback-error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
  }

  /* paginas por fora - API */

  #secapi1 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover; /* Cobre toda a área, sem distorcer */
    background-position: center;
    background-repeat: no-repeat;
    color: white;
  }

  /* paginas por fora - Boletos */

  #secbol1 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover; /* Cobre toda a área, sem distorcer */
    background-position: center;
    background-repeat: no-repeat;
    color: white;
  }

  /* paginas por fora - Links de pagamento */

  #seclin1 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover; /* Cobre toda a área, sem distorcer */
    background-position: center;
    background-repeat: no-repeat;
    color: white;
  }

  /* paginas por fora - Maquininhas */

  #secmaq1 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover; /* Cobre toda a área, sem distorcer */
    background-position: center;
    background-repeat: no-repeat;
    color: white;
  }

  /* paginas por fora - Pix */

  #secpix1 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover; /* Cobre toda a área, sem distorcer */
    background-position: center;
    background-repeat: no-repeat;
    color: white;
  }

  /* paginas por fora - Split de pagamento */

  #secspli1 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover; /* Cobre toda a área, sem distorcer */
    background-position: center;
    background-repeat: no-repeat;
    color: white;
  }

  /* paginas por fora - Sobre nós */

  #secsob1 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover; /* Cobre toda a área, sem distorcer */
    background-position: center;
    background-repeat: no-repeat;
    color: white;
  }





  
  /* Estilos dos links do menu*/
  .nav-item {
    color: white; /* Cor dos links, altere conforme necessário */ 
  }
  .nav-item:hover {
    color: #ffa500; /* Cor do texto do link ao passar o mouse, altere conforme necessário */
  }
  .nav-item:focus {
    color: #ffa500; /* Cor do texto do link quando está em foco, altere conforme necessário */
  }
  .dropdown-toggle {
    color: white; /* Cor dos links, altere conforme necessário */ 
  }
  .dropdown-toggle:hover {
    color: #ffa500; /* Cor do texto do link ao passar o mouse, altere conforme necessário */
  }
  .dropdown-toggle:focus {
    color: #ffa500; /* Cor do texto do link quando está em foco, altere conforme necessário */
  }
  .dropdown-item {
    color: white; /* Cor dos links, altere conforme necessário */ 
  }
  .dropdown-item:hover {
    color: #ffa500; /* Cor do texto do link ao passar o mouse, altere conforme necessário */
  }
  .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.5); /* Cor de fundo preta com 50% de opacidade */
    border: none; /* Remove a borda padrão, opcional */
  }
  .dropdown-item {
    background-color: transparent; /* Remove o fundo azul */
  }
  .dropdown-item:focus {
    color: #ffa500;
  }
  .dropdown-item:hover,
  .dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.1); /* Adiciona um fundo sutil ao passar o mouse, opcional */
  }
  .dropdown-menu {
    display: none; /* Inicialmente escondido */
  }
  .dropdown:hover .dropdown-menu {
    display: block; /* Mostra ao passar o mouse */
  }
  /* Remove o fundo azul e o contorno quando o link do dropdown está ativo ou em foco */
  .nav-link.dropdown-toggle:focus,
  .nav-link.dropdown-toggle:active {
    background-color: transparent !important; /* Torna o fundo transparente */
    outline: none; /* Remove o contorno */
  }

  


  
  /* Estilos dos links do corpo*/
  .solinks {
    color: #ffa500;
  }
  .solinks:hover {
    color:#ffa500;
  }
  .teamlinks {
    color: #ffa500;
  }
  .teamlinks:hover {
    color: #ffa500;
  }
  
  
  /* Barra de navegação */
  #nav-container {
    padding: 0; /* Remove o padding do container */
    padding-top: 0;
    padding-bottom: 0;
    transition: top 0.3s; /* Adiciona uma transição suave para o movimento do cabeçalho, ver depois */
  }
  .navbar {
    padding: 0; /* Remove o padding da navbar */
    font-size: 14px; /* Reduz o tamanho da fonte */
    height: 60px; /* Define a altura da navbar */
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s; /* Suaviza a transição */
    transition: top 0.3s;
    z-index: 1000;
  }
  
  .hidden {
    top: -100px; /* Ajuste conforme necessário */
  }
  
  .navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.8); /* Cor de fundo ao rolar */
  }
  
  #nav-container {
    position: fixed; /* Certifique-se de que o nav-container é fixo */
    top: 0;
    width: 100%;
    transition: top 0.3s; /* Transição suave */
    z-index: 999; /* Certifique-se de que está acima de outros elementos */
  }
  
  .navbar-nav .nav-item {
    margin-left: 10px; /* Espaço entre os itens da navbar */
    margin-right: 10px;
  }
  .navbar-nav .nav-link {
    padding: 0 10px; /* Ajusta o padding dos links */
    display: flex; /* Alinha o texto e a imagem verticalmente */
    align-items: center;
  }
  .logo {
    height: 60px; /* Ajusta a altura do logo */
    width: auto; /* Mantém a proporção do logo */
  }
  #logon, #user {
    padding: 5px 10px; /* Ajusta o padding dos botões */
  }
  .navbar-toggler {
    border: none; /* Remove a borda do botão do menu */
  }
  
  header {
    background-color: rgba(255, 255, 255, 0);
  }
  
  .navbar-brand {
    padding: 0;
    color: #FFF;
  }
  
  .navbar-brand:hover {
    color: #FFF;
  }
  
  #navbar-links a {
    color: #FFF;
  }
  
  .navbar-expand-lg {
    padding: 1rem .8rem;
  }
  
  .navbar-nav {
    display: flex;
    align-items: center; /* Alinha os botões verticalmente */
  }
  
  .navbar-nav a {
    margin-right: 10px; /* Espaço entre os botões */
    margin-left: 10px; /* Espaço entre os itens da navbar */
  }
  
  #user {
    align-items: center; /* Alinha a imagem verticalmente no centro do botão */
    justify-content: center; /* Alinha a imagem horizontalmente no centro do botão */
    width: 110px; /* Ajuste o tamanho do botão */
    height: 40px; /* Ajuste o tamanho do botão */
    padding: 0; /* Remove o padding padrão do botão */
    color: white;
    border: 1px solid #FFF;
    border-radius: 7px;
  }
  
  #user:hover{
    background-color: white;
    color: #ffa500;
  }

  .white-section .navbar,
  .white-section .nav-item,
  .white-section .nav-link,
  .white-section #user {
    color:#ffa500;
  }

  .white-section #user {
    border: 1px solid #ffa500;
  }

  .white-section #user:hover {
    background-color: #ffa500;
    color: #FFF;
  }


  
  .navbar-nav a:last-child {
    margin-right: 0; /* Remove o espaço do último botão, se necessário */
  }
  
  .nav-item.active {
    border-bottom: 3px solid #FFF;
  }
  
  #logon {
    width: 110px;
    height: 40px;
    font-size: 100%;
  }
  
/*teste fixed-top*/

.titleapi {
    margin-top: 55px;
    margin-left: 20px;
    margin-bottom: 20%;
  }

/* 1° pagina principal */

#section1 {
  height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover; /* Cobre toda a área, sem distorcer */
  background-position: center;
  background-repeat: no-repeat;
  color: white;
}

.mainslogan {
    display: flex;
    justify-content: start;
}

.slogan {
    color: #FFF;
    font-size: 77px;
    margin-top: 140px;
    margin-left: 120px;
    margin-bottom: -165px;
    font-weight: bold;
}

.mainimg {
    display: flex;
    justify-content: end;
    margin-right: 60px;
    margin-top: -581px;
}

#mainwoman {
    height: 585px;
    width: auto;
    margin-right: 50px;
}

.mainretangulo {
    display: flex;
    justify-content: end;
}

#retangulo1 {
    height: 400px;
    width: auto;
    margin-top: -109px;
    margin-right: 263px;
}

#retangulo2 {
    height: 290px;
    width: auto;
    margin-top: -230px;
    margin-right: 100px;
}

#opencont {
  margin-top: 100px;
  margin-left: -330px;
  margin-bottom: -800px;
  height: 50px;
  width: 180px;
  color: #FF9A02;
  font-weight: bolder;
  border-radius: 20px;
}

/* 2° pagina */



#about-area {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/img/slide2of\ \(2\).png');
  background-size: cover; /* Cobre toda a área, sem distorcer */
  background-position: center;
  background-repeat: no-repeat;
  color: white;
}

.slogan2 {
  color: #FFF;
  font-size: 70px;


}

.infmore {
  align-items: center; /* Alinha a imagem verticalmente no centro do botão */
  justify-content: center; /* Alinha a imagem horizontalmente no centro do botão */
  width: 110px; /* Ajuste o tamanho do botão */
  height: 40px; /* Ajuste o tamanho do botão */
  padding: 0; /* Remove o padding padrão do botão */
  color: white;
  margin-top: 10px;
  border-radius: 20px;
  border: 1px solid #FFF;
}

.infmore:hover {
    background-color: white;
    color: #FF9A02;
}


/* 3° pagina */

#lpay-area {
  height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover; /* Cobre toda a área, sem distorcer */
  background-position: center;
  background-repeat: no-repeat;
  color: white;
}

.slogan3 {
  color: #FFF;
  font-size: 73px;
  margin-left: -60px;
  margin-top: -470px;
}

.infolpay {
  display: flex;
  justify-content: end;
  text-align: end;
  align-items: center;
}

.imgwoman {
  display: flex;
  justify-content: start;
  margin-top: -534px;
  margin-left: -30px;
}

#womanimg {
  height: 580px;
  width: auto;
}

.mainretan {
  display: flex;
  justify-content: start;
}

#retan2 {
  height: 290px;
  width: auto;
  margin-top: 270px;
  margin-left: -70px;

}

/* 4° pagina */

#boletos-area {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/img/slide4.png');
  background-size: cover; /* Cobre toda a área, sem distorcer */
  background-position: center;
  background-repeat: no-repeat;
  color: white;
}

.slogan4 {
  color: #FFF;
  font-size: 73px;
}

/* 5° pagina */

#split-area {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/img/split.png');
  background-size: cover; /* Cobre toda a área, sem distorcer */
  background-position: center;
  background-repeat: no-repeat;
  color: #FFF;
}

.slogan5 {
  color: #FFF;
  font-size: 70px;
}

.slide5 {
  display: flex;
  justify-content: end;
  text-align: end;
}

#split-buttom {
  align-items: center; /* Alinha a imagem verticalmente no centro do botão */
  justify-content: center; /* Alinha a imagem horizontalmente no centro do botão */
  width: 110px; /* Ajuste o tamanho do botão */
  height: 40px; /* Ajuste o tamanho do botão */
  padding: 0; /* Remove o padding padrão do botão */
  color: white;
  margin-top: 10px;
  border-radius: 20px;
  border: 1px solid #FFF;
}

#split-buttom:hover {
  background-color: white;
  color: #FF9A02;
}

/* 6° pagina */

#pix-area {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/img/slide6.png');
  background-size: cover; /* Cobre toda a área, sem distorcer */
  background-position: center;
  background-repeat: no-repeat;
  color: white;
}

.slogan6 {
  color: #FFF;
  font-size: 73px;
}

/* 7° pagina */

#maquin-area {
  height: 100vh;
  display: flex;
  align-items: center;
  background-image: url('/img/FOTO.DA.DIREITA.COM.FORMA.BRANCA.VERSAO.2.\(1\).png'); 
  background-size: cover; /* Cobre toda a área, sem distorcer */
  background-position: center;
  background-repeat: no-repeat;
  color: white;

}


.slogan7 {
  color: #FFF;
  font-size: 73px;
}

.slide7 {
  display: flex;
  justify-content: end;
  text-align: end;
}

#maq {
  display: flex;
  justify-content: start;
  height: 500px;
  width: auto;
  margin-right: 150px;
  margin-left: -500px;

}



/* 8° pagina */

#API-area {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/img/slide8.png');
  background-size: cover; /* Cobre toda a área, sem distorcer */
  background-position: center;
  background-repeat: no-repeat;
  color: white;
}

.slogan8 {
  color: #FFF;
  font-size: 73px;
}

/* 9° pagina */

#Sup-area {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/img/Design\ sem\ nome\ \(14\)\ \(1\).png');
  background-size: cover; /* Cobre toda a área, sem distorcer */
  background-position: center;
  background-repeat: no-repeat;
  color: #FFF;
}

.slogan9 {
  color: #FFF;
  font-size: 73px;
  /* margin-top: 130px;*/
}

#Sup-buttom {
  align-items: center; /* Alinha a imagem verticalmente no centro do botão */
  justify-content: center; /* Alinha a imagem horizontalmente no centro do botão */
  width: 110px; /* Ajuste o tamanho do botão */
  height: 40px; /* Ajuste o tamanho do botão */
  padding: 0; /* Remove o padding padrão do botão */
  color: white;
  margin-top: 10px;
  border-radius: 20px;
  border: 1px solid #FFF;
}

#Sup-buttom:hover {
  color: #FF9A02;
  background-color: #FFF;
}

.supwoman {
  display: flex;
  justify-content: end;
  margin-top: -400px;
  margin-right: -70px;
}

#womansup {
  height: 490px;
  width: auto;
}

/* 10° pagina */

#team-area {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/img/slide10.png');
  background-size: cover; /* Cobre toda a área, sem distorcer */
  background-position: center;
  background-repeat: no-repeat;
  color: white;
}

.teamlinks {
  color: #ffa500;
}
.teamlinks:hover {
  color: #ffa500;
}

.slogan10 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 70px;
  color: #FF9A02;
}

.card-body {
  text-align: center;
  padding: 20px; /* Ajusta o padding interno do card-body */
}

.card {
  border-radius: 10px; /* Bordas arredondadas */
  overflow: hidden; /* Garante que a borda arredondada não seja quebrada pelo conteúdo */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adiciona uma transição suave para efeitos de hover */
}
.card img {
  border-bottom: 1px solid #ddd; /* Adiciona uma borda fina abaixo da imagem */
}

.card-title {
  font-size: 1.25rem; /* Ajusta o tamanho do título */
  font-weight: bold; /* Define o peso da fonte como negrito */
}
.card-text {
  color: #ffa500; /* Cor do texto do card */
}
.card:hover {
  transform: translateY(-5px); /* Leve elevação no hover */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Adiciona uma sombra sutil ao card no hover */
}
.row {
  display: flex;
  justify-content: center; /* Centraliza os cartões horizontalmente */
  flex-wrap: wrap; /* Permite que os cartões se movam para a linha seguinte, se necessário */
}
.col-md-3 {
  margin-bottom: -10px; /* Espaço entre os cartões na linha */
}

/* 11° pagina */

#section11 {
  background-color: black;
  height: 60vh; /* Mantém a altura da seção */
  display: flex;
  flex-direction: column; /* Alinha itens em coluna */
  padding-top: 0;
  margin-top: 0;
  justify-content: flex-start; /* Alinha o conteúdo no topo */
}

#logo {
  height: 80px; /* Ajusta a altura do logo */
  width: auto; /* Mantém a proporção do logo */
}

#sloganf {
  color: #ddd;
}

.iconsteks {
  height: 40px; /* Ajusta a altura do ícone */
  width: auto; /* Mantém a proporção do ícone */
  margin-top: 22px;
  margin-right: 10px;
}

#ttx {
  border: solid 1px #ddd;
  border-radius: 35px;
}

.foot1 {
  margin-top: 0; /* Removido para evitar sobreposição */ 
  margin-top: 30px;
}

#icons {
  margin-top: 0; /* Removido para evitar sobreposição */
  margin-top: 30px;
}

.linksf {
  color: #ddd;
}

.linksf:hover {
  color: #ffa500;
  text-decoration: none; /* Mantém o sublinhado removido */
}

.titlef {
  color: #ddd;
  font-size: 17px;
  font-weight: bold;
}

.columf {
  margin-bottom: 20px; /* Aumenta o espaçamento entre as colunas */
  margin-right: 270px; /* Ajusta o espaçamento lateral */
  margin-top: -10px;
}

#thrcolum {
  margin-right: -22px;
  display: flex;
  align-items: end;
  text-align: end;
}


.paraf {
  color: #ddd;
}

/* Estilização das colunas */
.row > .col-md-4 {
  width: 100vh;

}