@import url('font.css');
@import url('menu.css');
@import url('rodape.css');
@import url('selecaodecadastro.css');

html {
  height: 100%;
  /*deixa a altura do html em 100%*/
  width: 100%;
  /*deixa a largura do html em 100%*/
}

body {
  /*configura o corpo da pagina*/
  margin: 0;
  /*deixa a margem da pagina em zero*/
  background: #F5F5CC;
  /*muda a cor de fundo da pagina */
}

header {
  position: relative;
  /*posiciona o header*/
  width: 100%;
  /*deixa a largura do header na tela toda*/
}

/* Barra superior */
.cabecalho {
  background-color: #ACEB64;
  /*muda a cor de fundo do cabeçalho*/
  border-radius: 0 0 40px 40px;
  /*arredonda as bordas de baixo do cabeçalho*/
  display: flex;
  /*deixa o cabeçalho em display flex para posicionar corretamente os itens*/
  justify-content: space-between;
  /*coloca um espaço entre os itens do cabeçalho*/
  align-items: center;
  /*centraliza os itens do cabeçalho*/
  padding: 10px 20px;
  /*adiciona espaçamento interno no cabeçalho*/
  position: relative;
  /*posiciona o cabeçalho*/
  height: 76px;
  /*define a altura do cabeçalho*/
}

.cabecalho .logo {
  width: 90px;
  /*define a largura do item do meio*/
  height: 90px;
  /* define a altura do item do meio*/
  filter: grayscale(100%) brightness(200%) contrast(200%);
  /* deixa a imagem logo com a cor branca */
}

.cadastro {
  width: 56px;
  /* define a largura do item da direita */
  height: 56px;
  /* define a altura do item da direita */
  margin-right: 15px;
  /* coloca um pouco mais pra esquerda o item da direita */
}

.menu {
  width: 35.795px;
  /* define a largura do item da esquerda */
  height: 39px;
  /* define a altura do item da esquerda */
  margin-left: 15px;
  /* coloca um pouco mais pra direita o item da esquerda */
}


.titulo {
  color: #5DE77B;
  text-align: center;
  text-shadow: 0 4px 0 #000;
  -webkit-text-stroke-width: 1px;
  /*largura do contorno no texto */
  -webkit-text-stroke-color: black;
  /*cor do contorno no texto */
  font-family: poppinsBold;
  /*muda a fonte da letra*/
  font-size: 70px;
  /*muda o tamanho da letra */
  margin-top: 60px;
  /*coloca uma margem sobre o topo de 60 pixels*/
}

.subtitulo {
  color: #348145;
  /*muda a cor do texto*/
  text-align: center;
  /*alinha o texto no centro*/
  font-family: poppinsLight;
  /*muda a fonte da letra*/
  font-size: 30px;
  /*muda o tamanho da letra*/
}

.fileira1 {
  display: flex;
  /*forma de organizar os itens*/
  flex-direction: row;
  /*deixa os itens um do lado do outro na horizontal*/
}

.fileira1 .caixa1 {
  width: 407px;
  /*deixa a caixa com a largura de 407 pixels*/
  height: 410px;
  /*deixa a caixa com a altura de 410 pixels*/
  background-color: #FCFFFB;
  /*muda a cor de fundo da caixa*/
  border-radius: 13px;
  /*arredonda os cantos da caixa*/
  margin: auto;
  /*centraliza a caixa de acordo com a tela do usuario*/
  margin-top: 140px;
  /*adiciona uma margem do topo de 140 pixels*/
  padding: 20px;
  /*adiciona 20px de espaçamento interno*/
  text-decoration: none;
  /*tira a decoração do texto por causa do link <a>*/
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  /*adiciona um sombreamento em volta da caixa*/
}

.titulos {
  color: #000;
  /*deixa a cor do texto em preto */
  text-align: left;
  /*alinha o texto na esquerda*/
  font-family: poppinsExtraBold;
  /*muda a fonte do texto*/
  font-size: 19px;
  /*muda o tamanho da fonte para 19 pixels*/
}

.textos {
  color: #000;
  /*muda a cor da fonte para preto*/
  font-family: poppinslight;
  /*muda a fonte do texto*/
  font-size: 15px;
  /*muda o tamanho da fonte para 15 pixels*/
  line-height: 170%;
  /*muda a altura da linha do texto para 170%*/
}


.imagens {
  width: 407px;
  /*muda a largura da imagem para preencher as caixas*/
  height: 212px;
  /*define a altura da imagem em 212 pixels*/
  border-radius: 20px;
  /*arredonda os cantos da imagem*/
}

.caixa1:hover {
  border-radius: 13px;
  /*arredonda os cantos a da caixa porem agora quando o mouse é posto sobre a caixa */
  outline: 5px dashed #348145;
  /*deixa um verde pontilhado em volta da caixa quando o mouse é posto sobre a caixa*/

}

.caixa2:hover {
  border-radius: 13px;
  /*arredonda os cantos a da caixa porem agora quando o mouse é posto sobre a caixa */
  outline: 5px dashed #348145;
  /*deixa um verde pontilhado em volta da caixa quando o mouse é posto sobre a caixa*/
}

.caixa3:hover {
  border-radius: 13px;
  /*arredonda os cantos a da caixa porem agora quando o mouse é posto sobre a caixa */
  outline: 5px dashed #348145;
  /*deixa um verde pontilhado em volta da caixa quando o mouse é posto sobre a caixa*/
}

.fileira1 .caixa2 {
  width: 407px;
  /*define a largura da segunda caixa da primeira fileira*/
  height: 410px;
  /*define a altura da segunda caixa da primeira fileira*/
  background-color: #FCFFFB;
  /*define a cor da caixa*/
  border-radius: 13px;
  /*arredonda os cantos da caixa*/
  margin: auto;
  /*centraliza a caixa automaticamente de acordo com a tela do usuario*/
  margin-top: 140px;
  /*deixa uma margem de 140 pixels sobre o topo*/
  padding: 20px;
  /*deixa um espaçamento interno de 20 pixels dentro da caixa*/
  text-decoration: none;
  /*tira a decoração do texto por causa do link <a>*/
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  /*coloca um sombreamento em volta da caixa*/
}

.fileira1 .caixa3 {
  width: 407px;
  /*define a largura da terceira caixa da primeira fileira*/
  height: 410px;
  /*define a altura da terceira caixa da primeira fileira*/
  background-color: #FCFFFB;
  /*define a cor da caixa*/
  text-decoration: none;
  /*tira a decoração do texto por causa do link <a>*/
  border-radius: 13px;
  /*arredonda os cantos da caixa*/
  margin: auto;
  /*centraliza a caixa automaticamente de acordo com a tela do usuario*/
  margin-top: 140px;
  /*deixa uma margem de 140 pixels sobre o topo*/
  padding: 20px;
  /*deixa um espaçamento interno de 20 pixels dentro da caixa*/
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  /*coloca um sombreamento em volta da caixa*/
}

.fileira2 {
  display: flex;
  /*define a forma de organização como flex*/
  flex-direction: row;
  /*deixa os itens em fileira horizontal um do lado do outro*/
}

.fileira2 .caixa1 {
  width: 407px;
  /* Define a largura da caixa1 como 407px */
  height: 410px;
  /* Define a altura da caixa1 como 410px */
  background-color: #FCFFFB;
  /* Define a cor de fundo da caixa1 como um tom bem claro de verde-bege */
  border-radius: 13px;
  /* Arredonda os cantos da caixa1 com um raio de 13px */
  margin: auto;
  /* Centraliza a caixa horizontalmente */
  margin-top: 70px;
  /* Adiciona uma margem de 70px no topo da caixa1 */
  padding: 20px;
  /* Adiciona 20px de espaço interno (padding) em todos os lados da caixa1 */
  text-decoration: none;
  /* Remove qualquer decoração de texto (como sublinhado) */
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  /* Aplica uma sombra sutil abaixo da caixa1, com um desfoque de 4px */
}

.fileira2 .caixa2 {
  width: 407px;
  /* Define a largura da caixa2 como 407px */
  height: 410px;
  /* Define a altura da caixa2 como 410px */
  background-color: #FCFFFB;
  /* Define a cor de fundo da caixa2 como um tom claro de verde-bege */
  border-radius: 13px;
  /* Arredonda os cantos da caixa2 com um raio de 13px */
  margin: auto;
  /* Centraliza a caixa2 horizontalmente */
  margin-top: 70px;
  /* Adiciona uma margem de 70px no topo da caixa2 */
  text-decoration: none;
  /* Remove qualquer decoração de texto da caixa2 */
  padding: 20px;
  /* Adiciona 20px de espaço interno (padding) em todos os lados da caixa2 */
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  /* Aplica uma sombra sutil abaixo da caixa2, com um desfoque de 4px */
}


.fileira2 .caixa3 {
  width: 407px;
  /* Define a largura da caixa3 como 407px */
  height: 410px;
  /* Define a altura da caixa3 como 410px */
  background-color: #FCFFFB;
  /* Define a cor de fundo da caixa3 como um tom bem claro de verde-bege */
  border-radius: 13px;
  /* Arredonda os cantos da caixa3 com um raio de 13px */
  text-decoration: none;
  /* Remove qualquer decoração de texto (como sublinhado) */
  margin: auto;
  /* Centraliza a caixa3 horizontalmente */
  margin-top: 70px;
  /* Adiciona uma margem de 70px no topo da caixa3 */
  padding: 20px;
  /* Adiciona 20px de espaço interno (padding) em todos os lados da caixa3 */
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  /* Aplica uma sombra sutil abaixo da caixa3, com um desfoque de 4px */
}

.fileira3 {
  display: flex;
  /* Torna a fileira3 um contêiner flexível */
  flex-direction: row;
  /* Organiza os itens na fileira3 horizontalmente (em linha) */
  padding-bottom: 90px;
  /* Adiciona um espaço de 90px na parte inferior da fileira3 */
}

.fileira3 .caixa1 {
  width: 407px;
  /* Define a largura da caixa1 na fileira3 como 407px */
  height: 410px;
  /* Define a altura da caixa1 na fileira3 como 410px */
  background-color: #FCFFFB;
  /* Define a cor de fundo da caixa1 na fileira3 como um tom bem claro de verde-bege */
  border-radius: 13px;
  /* Arredonda os cantos da caixa1 na fileira3 com um raio de 13px */
  margin: auto;
  /* Centraliza a caixa1 na fileira3 horizontalmente */
  margin-top: 70px;
  /* Adiciona uma margem de 70px no topo da caixa1 na fileira3 */
  padding: 20px;
  /* Adiciona 20px de espaço interno (padding) em todos os lados da caixa1 na fileira3 */
  text-decoration: none;
  /* Remove qualquer decoração de texto da caixa1 na fileira3 */
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  /* Aplica uma sombra sutil abaixo da caixa1 na fileira3, com um desfoque de 4px */
}

.fileira3 .caixa2 {
  width: 407px;
  /* Define a largura da caixa2 na fileira3 como 407px */
  height: 410px;
  /* Define a altura da caixa2 na fileira3 como 410px */
  background-color: #FCFFFB;
  /* Define a cor de fundo da caixa2 na fileira3 como um tom bem claro de verde-bege */
  border-radius: 13px;
  /* Arredonda os cantos da caixa2 na fileira3 com um raio de 13px */
  margin: auto;
  /* Centraliza a caixa2 na fileira3 horizontalmente */
  margin-top: 70px;
  /* Adiciona uma margem de 70px no topo da caixa2 na fileira3 */
  text-decoration: none;
  /* Remove qualquer decoração de texto da caixa2 na fileira3 */
  padding: 20px;
  /* Adiciona 20px de espaço interno (padding) em todos os lados da caixa2 na fileira3 */
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  /* Aplica uma sombra sutil abaixo da caixa2 na fileira3, com um desfoque de 4px */
}


.fileira3 .caixa3 {
  width: 407px;
  /* Define a largura da caixa3 na fileira3 como 407px */
  height: 410px;
  /* Define a altura da caixa3 na fileira3 como 410px */
  background-color: #FCFFFB;
  /* Define a cor de fundo da caixa3 como um tom bem claro de verde-bege */
  border-radius: 13px;
  /* Arredonda os cantos da caixa3 com um raio de 13px */
  text-decoration: none;
  /* Remove qualquer decoração de texto da caixa3 (como sublinhado) */
  margin: auto;
  /* Centraliza a caixa3 horizontalmente */
  margin-top: 70px;
  /* Adiciona uma margem de 70px no topo da caixa3 */
  padding: 20px;
  /* Adiciona 20px de espaço interno (padding) em todos os lados da caixa3 */
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  /* Aplica uma sombra sutil abaixo da caixa3, com um desfoque de 4px */
}


@media (max-width: 600px) {
  /* Define estilos para telas com largura máxima de 600px */

  .fileira1,
  .fileira2,
  .fileira3 {
    flex-direction: column;
    /*deixa os itens um do lado do outro na horizontal*/
  }

  .fileira1 .caixa1 {
    width: 370px;
    /* Define a largura da caixa1 dentro da fileira1 como 370px */
  }

  .fileira1 .caixa2 {
    width: 370px;
    /* Define a largura da caixa2 dentro da fileira1 como 370px */
  }

  .fileira1 .caixa3 {
    width: 370px;
    /* Define a largura da caixa3 dentro da fileira1 como 370px */
  }

  .fileira2 .caixa1 {
    width: 370px;
    /* Define a largura da caixa1 dentro da fileira2 como 370px */
  }

  .fileira2 .caixa2 {
    width: 370px;
    /* Define a largura da caixa2 dentro da fileira2 como 370px */
  }

  .fileira2 .caixa3 {
    width: 370px;
    /* Define a largura da caixa3 dentro da fileira2 como 370px */
  }

  .fileira3 .caixa1 {
    width: 370px;
    /* Define a largura da caixa1 dentro da fileira3 como 370px */
  }

  .fileira3 .caixa2 {
    width: 370px;
    /* Define a largura da caixa2 dentro da fileira3 como 370px */
  }

  .fileira3 .caixa3 {
    width: 370px;
    /* Define a largura da caixa3 dentro da fileira3 como 370px */
  }

  .imagens {
    width: 370px;
    /* Define a largura das imagens como 370px */
  }


}

@media (max-width: 1500px) {
  /* Define estilos para telas com largura máxima de 1500 pixels */

  html {
    height: 100%;
    /*deixa a altura do html em 100%*/
    width: 100%;
    /*deixa a largura do html em 100%*/
    zoom: 0.8;
  }

}