body, * {
  margin: 0;
  font-size: 16px; /* Tamanho de fonte padrão */
  font-family: 'Inter', sans-serif;
  text-align: center;
}
h1 {  font-size: 4em; /* LOGO */ 
}

h2 {  font-size: 2em; /* TITULOS DAS PAGINAS */ 
  margin-top: 30px;
  margin-bottom: 40px;
}

h3 {  font-size: 1.75em; /* Cabeçalho 2 */ 
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 200;
}

h4 {  font-size: 2em; /* Cabeçalho  colorido e italico */ 
  margin-top: 10px;
  margin-bottom: 10px;
  /* font-style: italic; */
}
h5 {  font-size: 1.3em; /* tagline */
  font-weight: 200;


}
h6 {  font-size: 1em; /* Mesmo que o parágrafo */ }
p { font-size: 1em; /* 1em = ao tamanho da fonte do corpo, aqui 16px */}

@media only screen and  (max-width: 414px) {
  /* body { font-size: 5px;} */
  h1   { font-size: 4em;/* Ainda 2em proporcional ao novo tamanho de fonte do corpo */}
  h2   { font-size: 1.3em; /* 1.75em proporcional ao novo tamanho de fonte do corpo */}
  h3   { font-size: 1.4em; /* 1.5em proporcional ao novo tamanho de fonte do corpo */}
  h4   { font-size: 1.8em; /* 1.25em proporcional ao novo tamanho de fonte do corpo */}
  h5   { font-size: 1.25em; /* 1.125em proporcional ao novo tamanho de fonte do corpo */}
  h6   { font-size: 1em; /* Continua o mesmo em proporção */}
}
/* ###################################################################### */
header, section, footer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  padding: 10px;
}

footer {
  height: 10vh;
  
}
/* ###################################################################### */

.esconder{
  /* display: none; */
}


header {
  background-image: linear-gradient(rgba(255, 255, 255, 0.90), rgba(240, 240, 240, 0.97)), url('svg/img1.svg');
  background-repeat: repeat;
  background-size: auto;
}
header > * {
  text-align: center;
}
/* ###################################################################### */
section {
  justify-content: flex-start;
  background-repeat: repeat;
  background-size: auto;
}
section.white {
  background-image: linear-gradient(rgba(255, 255, 255, 0.94), rgba(240, 240, 240, 0.90)), url('svg/img1.svg');
}
section.black {
  background-image: linear-gradient(rgba(0, 0, 0, 0.99), rgba(0, 0, 0, 0.90)), url('svg/img1.svg');
  color: white;
}
section.blue {
  background-image: linear-gradient(rgba(105, 161, 230, 0.97), rgba(240, 240, 240, 0.97)), url('svg/img1.svg');
}
section.yellow {
  background-image: linear-gradient(rgba(223, 245, 123, 0.95), rgba(228, 228, 174, 0.90)), url('svg/img1.svg');
}



section.values {
  background-image: linear-gradient(rgba(255, 255, 255, 0.97), rgba(240, 240, 240, 0.90)), url('images/values.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  /* color: white; */
}



/* ###################################################################### */
.container {
  display: flex;
  flex-direction: column;
}

.containerText {
  max-width: 100%;
  text-align: justify;
  line-height: 1.8em;
  font-weight: 400px;
  letter-spacing: 0.08px;
  -webkit-font-smoothing: antialiased;
}

section.white > .container > .containerText > h4 {
  color: blue;
}
section.black > .container > .containerText > h4 {
  color: burlywood;
  font-weight: 200;
}


li {
  text-align: left;
  line-height: 1.7em;
}

/* ###################################################################### */

.figure1 {
    max-width: 100%;
    margin: 0 auto;
}
.img1 {
    width: 100%;
    height: auto;
    display: block;
}


/* ###################################################################### */
@media only screen and (min-width: 612px) {
  .container {
    width: 612px;
  }
  section {
    justify-content: center;
}
}



/* ###################################################################### */

form {
  width: 90%; /* Largura do formulário */
  margin: auto; /* Centraliza o formulário horizontalmente */
  /* background-color: #f3f3f3; Cor de fundo do formulário */
  padding: 20px; /* Espaçamento interno do formulário */
  border-radius: 8px; /* Bordas arredondadas do formulário */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra ao redor do formulário */
}

label {
  display: block; /* Faz com que cada label tenha sua própria linha */
  margin-top: 10px; /* Espaço acima de cada label */
  font-weight: bold; /* Deixa o texto do label em negrito */
  text-align: left;
}


input[type="text"],
input[type="email"],
textarea {
  width: 90%; /* Faz com que os campos ocupem 100% da largura do formulário */
  padding: 8px; /* Espaçamento interno nos campos */
  margin-top: 0px; /* Espaço acima de cada campo */
  border: 1px solid #ccc; /* Borda cinza clara */
  border-radius: 4px; /* Bordas arredondadas para os campos */
  text-align: left;
}

input[type="submit"] {
  background-color: #4CAF50; /* Cor de fundo do botão */
  color: white; /* Cor do texto do botão */
  padding: 10px 20px; /* Espaçamento interno do botão */
  border: none; /* Remove a borda do botão */
  border-radius: 4px; /* Bordas arredondadas do botão */
  cursor: pointer; /* Muda o cursor para indicar que é clicável */
  margin-top: 20px; /* Espaço acima do botão */
}

input[type="submit"]:hover {
  background-color: #45a049; /* Muda a cor de fundo quando passa o mouse */
}