@charset "utf-8";
/* CSS Document */


* { margin: 0; 	padding: 0; box-sizing: border-box;}

html { font-size: 16px /* Geralmente 16px */ }


body { font-family: Arial, Helvetica, sans-serif; text-align: center;  }

    
h1 {
  /* Tamanho varia entre 1.5rem e 2.5rem conforme a tela     font-size: 1.1rem;  font-size: clamp(0.95rem, 2vw, 1.3rem);*/
  font-size: clamp(1.3rem, 2vw, 2.4rem); /*1.5rem; clamp(1.1rem, 2vw, 1.8rem); 32pxpara 64px(ou 2rempara 4rem)	6vw 24pxpara 48px(ou 1.5rempara 3rem)	4vw*/
  color: #00007D; 
  text-shadow: #C0C0C0 2px 3px 2px; 
  padding: 1.5vh;
}

h2 {
  /* Tamanho varia entre 1.5rem e 2.5rem conforme a tela */
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  color: #00007D; 
  padding: 0 10px;
}

p {
  font-size: calc(0.80rem + 0.3vw);
}

/* p { font-size: clamp(1rem, 0.8rem + 0.5vw, 1.25rem); }*/

header {
    margin: 0 auto;
    text-align:left;
    background-color:#00007D; 
    width: 100%; 
    padding:3px;
    box-shadow: 0px 5px 15px #464646;
}

.headerlogo {
    width: 100%;
    max-width:950px;
    margin: 5px;
    padding-left:0px;
    display: block;
    text-align:center;
   /* background-color: pink;*/
}

.logofo { border: none;}

.logonav {
    text-align: left;
    border: none;
   }

main{
   max-width:1000px; 
   height:auto;
   margin: 0 auto;
   text-align:left; 
}   
   
container{
   width:100%; 
   padding: 10px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   /*  display: blocK; justify-content: flex-around; background-color: pink; */
}

.container0{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
   margin-top: calc(0.3rem + 0.2vw);
   margin-bottom: calc(0.3rem + 0.1vw);
}

.container1{   
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    margin: 8px 0;
}


footer {
    background-color: #00007D;
    height: 50px;
    padding: 10px;
    margin: 15px 0 8px;
    box-shadow: 0px 5px 10px #464646; 
    text-align: center;
}

a, a:visited, a:hover, a:focus { 
    text-decoration: none; 
    outline: none;
    color:#00007D; 
}
    
/*NavInfor*/

.navinfor{
 width: 100%; 
 height: auto;
 padding: 10px 10px 9px;
 border-bottom:1px solid lightgray;
 display: flex;
 justify-content: center; 
 align-items: center;   /* Centers vertically */
 gap:8px;
} 
 

/* Aviso */

.aviso{
    background:#FFF9D9;
    border-left:6px solid #B1A137;
    padding:18px;
    border-radius:6px;
    line-height: 1.5rem;
}

/* Textos */

.textoav{ color:#555; line-height:1.7; display:block;

    font-weight: 500; }

.obrigatorio{ color:red; }

.texto{
  padding: 2px 0;    
  font-size: 0.8rem ; 
  color:#ffffff; 
  line-height: 2rem; 
}

.textofa{
  padding: 0 10px 0 20px;
  font-size: 1rem; 
  color:#fff; 
  line-height: 2.4rem; 
  display: flex;
  align-items: center;
}

.textof{
  padding: 0 20px 0 10px;
  font-size: 1rem; 
  color:#fff; 
  line-height: 2.4rem; 
  display: flex;
  align-items: center;
}


.texto1 { 
    /*font-size: calc(1rem + 2vw);
    /*font-size:  min(0.85rem);
    font-size:  max(1.2rem); */ 
    font-weight: 500;
    color:#0D0D0D; 
    line-height: calc(1.1rem + 0.4vw); 
    text-align: justify;
}
    
span{ color: #725603; font-weight: 600;}

/*Contato*/

.containerc1{   
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    margin: 15px 40px 0;
}

.containerc2{   
    width:100%;
    display:grid;
    place-content: center;
    height: auto; 
    padding: 15px 0; 
}

.form-container {
    width: 700px;
    margin:auto; 
    border:2px solid lightgray;
    border-radius:10px;
    border-collapse:separate;
    border-spacing:10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background: #F8F8F8; 
    padding:15px;
}

form{
    display: grid;
    gap: 20px;
    padding: 15px 0;
}

/* Campos responsivos */
.form-group {
    margin-bottom: 15px;
}

label{
    display:block;
    color: #0D0D0D; 
    font-weight: 600;
}

labelobrig{
    color: #FF0000; 
}

input,textarea{
    width: 100%; /* Ocupa toda a largura do contêiner */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.campo-pequeno{ width:250px; }

#nao_humano{
   display: none; 
}

.inputcaptcha{
    width: 100px; /* Ocupa toda a largura do contêiner */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;   
}

select{
    width:100%;
    padding:8px;
    font-size:16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-btn {
  display: flex;
  justify-content: center; 
  gap:20px;
} 

button {
    width: 80px;
    height:35px;
    padding: 8px 16px;
    background-color: #00007D;  /*#28a745;*/
    color: #fff;
    font-size:16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.form-contresp {
    width:100%;
    display:grid;
    place-content: center;
    text-align:center;
    font-size:0.98rem;
    line-height:1.5rem;
    gap:8px;
} 

/* Formulário de login */
.formlogin-container {
    width: 400px;  /*Largura máxima em desktop */
    padding:20px 30px 10px;
    margin: 30px auto;
    background-color: #E6E1D2; 
    border:solid 2px #000000; 
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.login{height:30px; border-radius:8px;  margin: 4px 0;}
.logins{width: 90%; height:30px; border-radius:8px;  margin: 4px 0;}
div i {
    cursor: pointer;
    text-align:right;
    padding: 6px;
}

/* Formulário de loginweb */
.formloginw-container {
    width: 350px;  /*Largura máxima em desktop */
    background-color:#cca85c; 
    border:solid 2px #000000; 
    border-radius: 8px;
    margin-bottom:20px
}
#formlogweb{width:100%; height:auto; margin:auto; 
  display: flex;
  flex-direction: row;
  justify-content: center; 
  align-items: center;
 
}

.btnwebm{
    width: 100%;
    height:40px;
    background-color: #000000;
    color: #ffffff;
    font-size:16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;  
    text-align:center;
    position:relative; 
    float:center;
    margin: 15px 0;
    }
    
.menul {
    display: grid;
    grid-columns: "1fr";
    top:2px;
    justify-content: center;
    text-align: center;
    background-color:#cca85c; 
}

.menul li{
    list-style: none;
    display: inline-block;
    max-width:200px;
    color:#000000; 
    font-weight:bold;
    color:#ffffff;
}

.menul a {
    display: block;
    color: #ffffff;
    padding: 10px 10px 6px;
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 4px solid transparent;
    border-radius: 6px;
}

.menul a:hover {
    background-color: #555;
    color: #ffffff;
    border-bottom: 4px solid #ffffff;
    border-radius: 6px;
}    



@media screen and (max-width: 859px) {
  h2 { padding: 10px 0 0; }
  container{padding: 0;}
}

@media screen and (max-width: 641px) {
  .form-container { width: 90vw; }  
  input,textarea{ padding: 6px; }
}

@media screen and (max-width: 578px) { 
  .container1{  margin: 10px 15px 0;  /* background-color: pink; */ }
  h2 {  padding: 15px 0 0; }
}

@media screen and (max-width: 467px) { 
 .logo{
   margin-top: 6px;
 }
 

.texto{
  font-size: 0.7rem ; 
  color:#ffffff; 
  line-height: 1.8rem; 
}

.textofa{
  padding: 0;
  font-size: 0.70rem; /*min(0.85rem 1rem); */
  color:#fff; 
  line-height: 2.4rem; 
  display: flex;
  align-items: center;
}

.textof{
  padding: 0;
  font-size: 0.71rem; 
  color:#fff; 
  line-height: 2.4rem; 
  display: flex;
  align-items: center;
}

.textof0{
    padding-top: 2px;
    line-height: 1.1rem; 
    font-size: 0.69rem;
    
}
.textof1{
    padding-top: 2px;
    line-height: 2.2rem; 
    font-size: 0.68rem;
}
}

@media screen and (max-width: 422px) {    
 
 header {
     height: 90px;
     padding-right: 10px
  }
  
 .logo{
   margin-top: 8px;
 }
 
 .hamburger-button{
    top: 1.2rem;
    right: 8px; /* Posiciona no canto superior direito */    
    font-size: 1.3rem;
    font-weight:300;
    padding: 2px 5px;
}

 .hamburger-button-js-enabled + .menu{
    top: 69%;
}
 
.hamburger-button .icon{
    display: inline-block;
    width: 20px;
    text-align: center;
} 
 
footer {
    /*padding: 0 10px;*/
}

}
@media screen and (max-width: 378px) { 
    
/*footer { padding: 0 10px;}*/
.texto{ font-size: 0.6rem ; }

}

@media screen and (max-width: 330px) { 
    
footer {
    padding: 0 5px;
}
}