/*
=====================================================
Título Contato
=====================================================
*/

.contato{
  margin-top: 40px;
  padding-top: 100px;
  padding-bottom: 30px;
}

.contato-title{
  max-width: 1005px;
}

.contato-title h2{
  font-size: 36px;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: #2E5094;
  margin-bottom: 0;
}

.contato-title p{
  color: #838a91;
  margin-top: 16px;
  font-size: 19px;
}


#ajuda{
  margin-top: 40px;
  font-size: 32px;
  color: #2D5197;
}

#atender{
  font-size: 24px;
  margin-top: -5px;
  color: #2D5197;
}

/*
=====================================================
Icones contato
=====================================================
*/


.contato-icons{
 max-width: 1020px;
}

.border-external{
  border: 3px solid #294B8F;
  border-radius: 18px;
}

.card{
  border: 2px solid #FECE1B;
  border-radius: 15px;
  padding: 20px 20px 20px 20px;
}

.card img{
  margin-bottom: 15px;
  width: 100px;
  margin-left: auto; 
  margin-right: auto; 

}

.card h4{
  font-size: 20px;
  color: #2D5197;
  margin-bottom: 25px;
}

.card p{
  margin-bottom: 0;
}


#ouvidoria-icon{
  margin-bottom: 28px;
}

#assistencia24{
  margin-bottom: 20px;
}

/*
=====================================================
Forms
=====================================================
*/

.formulario{
  margin-top: 60px;
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #263E74;
  background: linear-gradient(to bottom, #263E74, #00133F);;

}

.formulario-container{
  max-width: 950px;
}

.formulario .form-control {
  background-color: #FFFFFF;
  border: none; /* Remove a borda padrão */
  border-radius: 8px; /* Cantos arredondados */
  padding: 16px 18px; /* Espaçamento interno maior */
  font-size: 15px;
  color: #535353;
}

.formulario .form-control::placeholder {
  color: #a0a0a0;
  opacity: 1; 
}

.formulario .form-check-input {
  border-color: rgba(255, 255, 255, 0.5); /* Borda do checkbox */
  background-color: transparent;
}

.formulario .form-check-input:checked {
  background-color: #94C83D; /* Verde do botão */
  border-color: #94C83D;
}

.formulario .form-check-label {
  font-size: 14px;
}

.btn-enviar {
  background-color: #94C83D; /* Cor verde da imagem */
  color: #FFFFFF;
  font-weight: bold;
  font-size: 18px;
  padding: 12px 60px; /* Espaçamento do botão */
  border-radius: 10px; /* Botão totalmente arredondado */
  border: none;
  transition: background-color 0.3s ease; /* Efeito suave ao passar o mouse */
}

.btn-enviar:hover {
  background-color: #82b036; /* Um tom de verde um pouco mais escuro */
  color: #FFFFFF;
}

.barra-degrade{
  height: 85px;
  background: linear-gradient(to right, #282828, #868686);
}



@media (max-width: 470px){

  /*
  ===============================================
  Titulo contato
  ===============================================
  */

  .contato{
    padding-top: 60px;
    padding-bottom: 40px;
  }

  .contato .contato-title{
    padding-left: 25px;
    padding-right: 25px;
  }

  .contato .contato-title h2{
    font-size: 32px;
  }

  .contato .contato-title p{
    font-size: 16px;
  }

  #ajuda{
    font-size: 26px;
  }

  #atender{
    font-size: 22px;
    margin-top: -5px;
  }

  /*
  ===============================================
  Icons Contato
  ===============================================
  */

    .card img{
    margin-bottom: 15px;
    width: 80px;
    margin-left: auto; 
    margin-right: auto; 
  }

  .card h4{
    margin-bottom: 15px;
  }

  .contato-icons{
    padding-left: 20px;
    padding-right: 20px;
  }

}