@import url('font.css');
@import url('cabecalho.css');
@import url('rodape.css');
@import url('menu.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 */
}



.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;
  gap: 70px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*deixa os itens um do lado do outro na horizontal*/
}


/* Estilo para a caixa1 dentro de .fileira1 */
.fileira1 .caixa1 {
  width: 397px;
  /* Define a largura da caixa como 397px */
  height: 393px;
  /* Define a altura da caixa como 393px */
  border-radius: 50px;
  /* Aplica bordas arredondadas com raio de 50px, tornando a caixa com cantos mais suaves */
  border: 2px solid #000;
  /* Aplica uma borda preta de 2px ao redor da caixa */
  background: #FFF;
  /* Define o fundo da caixa como branco */
  margin-top: 140px;
  /* Aplica uma margem superior de 140px */
}

/* Estilo para o elemento de texto com a classe .textos */
.textos {
  width: 356px;
  /* Define a largura do bloco de texto como 356px */
  height: 211px;
  /* Define a altura do bloco de texto como 211px */
  color: #000;
  /* Define a cor do texto como preta */
  text-align: center;
  /* Alinha o texto ao centro */
  font-family: poppinsSemiBold;
  /* Define a fonte do texto como Poppins Semi-Bold */
  font-size: 15px;
  /* Define o tamanho da fonte como 15px */
  font-style: normal;
  /* Define o estilo da fonte como normal */
  line-height: normal;
  /* Define a altura da linha como normal */
  margin: auto;
  /* Centraliza o elemento horizontalmente */
}

/* Estilo para o elemento de texto com a classe .texto2 */
.texto2 {
  width: 367px;
  /* Define a largura do bloco de texto como 367px */
  height: 214px;
  /* Define a altura do bloco de texto como 214px */
  color: #000;
  /* Define a cor do texto como preta */
  text-align: center;
  /* Alinha o texto ao centro */
  font-family: poppinsSemiBold;
  /* Define a fonte do texto como Poppins Semi-Bold */
  font-size: 14px;
  /* Define o tamanho da fonte como 14px */
  font-style: normal;
  /* Define o estilo da fonte como normal */
  line-height: normal;
  /* Define a altura da linha como normal */
  margin: auto;
  /* Centraliza o elemento horizontalmente */
}

/* Estilo para a imagem com a classe .imageong1 */
.imageong1 {
  width: 396px;
  /* Define a largura da imagem como 396px */
  height: 102px;
  /* Define a altura da imagem como 102px */
  border-radius: 50px;
  /* Aplica bordas arredondadas com raio de 50px */
  border: 2px solid #000;
  /* Aplica uma borda preta de 2px ao redor da imagem */
  background-image: url("../imagens/greenpeace.png");
  /* Define a imagem de fundo como "greenpeace.png" */
  background-position: center;
  /* Centraliza a imagem de fundo dentro da área do elemento */
  background-size: 300px 76px;
  /* Define o tamanho da imagem de fundo para 300px de largura e 76px de altura */
  background-repeat: no-repeat;
  /* Impede que a imagem de fundo se repita */
}


/* Estilo para a imagem de fundo .imageong2 */
.imageong2 {
  width: 396px;
  /* Largura da imagem */
  height: 102px;
  /* Altura da imagem */
  border-radius: 50px;
  /* Bordas arredondadas com raio de 50px */
  border: 2px solid #000;
  /* Borda preta de 2px */
  background-image: url("../imagens/imaflora.png");
  /* Define a imagem de fundo */
  background-position: center;
  /* Centraliza a imagem dentro do elemento */
  background-size: 300px 76px;
  /* Ajusta o tamanho da imagem para 300x76px */
  background-repeat: no-repeat;
  /* Impede que a imagem se repita */
}

/* Estilo para a imagem de fundo .imageong3 */
.imageong3 {
  width: 396px;
  /* Largura da imagem */
  height: 102px;
  /* Altura da imagem */
  border-radius: 50px;
  /* Bordas arredondadas */
  border: 2px solid #000;
  /* Borda preta */
  background-image: url("../imagens/IPE.png");
  /* Imagem de fundo */
  background-position: center;
  /* Centraliza a imagem */
  background-size: 300px 76px;
  /* Tamanho da imagem */
  background-repeat: no-repeat;
  /* Impede repetição da imagem */
}

/* Estilo para a imagem de fundo .imageong4 */
.imageong4 {
  width: 396px;
  /* Largura */
  height: 102px;
  /* Altura */
  border-radius: 50px;
  /* Bordas arredondadas */
  border: 2px solid #000;
  /* Borda preta */
  background-image: url("../imagens/sosmata.png");
  /* Imagem de fundo */
  background-position: center;
  /* Imagem centralizada */
  background-size: 300px 76px;
  /* Tamanho da imagem */
  background-repeat: no-repeat;
  /* Sem repetição */
}

/* Estilo para a imagem de fundo .imageong5 */
.imageong5 {
  height: 102px;
  /* Altura da imagem */
  border-radius: 50px;
  /* Bordas arredondadas */
  border: 2px solid #000;
  /* Borda preta */
  background-image: url("../imagens/boticario.png");
  /* Imagem de fundo */
  background-position: center;
  /* Centraliza a imagem */
  background-size: 300px 76px;
  /* Tamanho da imagem */
  background-repeat: no-repeat;
  /* Impede repetição da imagem */
}


/* Estilo do botão */
.botao {
  display: flex;
  /* Utiliza o modelo de layout flexbox */
  width: 110px;
  /* Largura do botão */
  height: 20px;
  /* Altura do botão */
  padding: 12px 24px 10px 24px;
  /* Espaciamento interno do botão */
  flex-direction: column;
  /* Organiza o conteúdo do botão em coluna */
  justify-content: center;
  /* Alinha o conteúdo verticalmente ao centro */
  align-items: center;
  /* Alinha o conteúdo horizontalmente ao centro */
  border-radius: 0 80px;
  /* Bordas arredondadas, com maior curvatura do lado direito */
  border: 1px solid #000;
  /* Borda preta de 1px ao redor do botão */
  color: #000;
  /* Cor do texto do botão */
  font-family: poppinsSemiBold;
  /* Fonte usada no botão */
  font-size: 15px;
  /* Tamanho da fonte */
  line-height: 148.553%;
  /* Espaçamento entre linhas (percentual em relação ao tamanho da fonte) */
  letter-spacing: 1.05px;
  /* Espaçamento entre as letras */
  text-decoration: none;
  /* Retira qualquer decoração de texto (underline, por exemplo) */
  margin: auto;
  /* Centraliza o botão */
}

/* Estilo do botão quando é passado o mouse sobre ele (hover) */
.botao:hover {
  border: 1px solid #FFF;
  /* Muda a cor da borda para branco */
  background: #348145;
  /* Muda o fundo para um verde escuro */
  color: white;
  /* Muda a cor do texto para branco */
}



/* Estilo para a caixa 2 dentro da fileira1 */
.fileira1 .caixa2 {
  width: 397px;
  /* Largura da caixa */
  height: 393px;
  /* Altura da caixa */
  border-radius: 50px;
  /* Bordas arredondadas */
  border: 2px solid #000;
  /* Borda preta */
  background: #FFF;
  /* Fundo branco */
  margin-top: 140px;
  /* Margem superior */
}

/* Estilo para a caixa 3 dentro da fileira1 */
.fileira1 .caixa3 {
  width: 397px;
  /* Largura da caixa */
  height: 393px;
  /* Altura da caixa */
  border-radius: 50px;
  /* Bordas arredondadas */
  border: 2px solid #000;
  /* Borda preta */
  background: #FFF;
  /* Fundo branco */
  margin-top: 140px;
  /* Margem superior */
}

/* Estilo para a fileira 2, que organiza as caixas em linha */
.fileira2 {
  display: flex;
  /* Flexbox para organizar os itens */
  flex-wrap: wrap;
  /* Permite quebra de linha quando necessário */
  align-items: center;
  /* Alinha os itens ao centro verticalmente */
  justify-content: center;
  /* Alinha os itens ao centro horizontalmente */
  gap: 80px;
  /* Espaço entre as caixas */
}

/* Estilo para a caixa 1 dentro da fileira2 */
.fileira2 .caixa1 {
  width: 397px;
  /* Largura da caixa */
  height: 393px;
  /* Altura da caixa */
  border-radius: 50px;
  /* Bordas arredondadas */
  border: 2px solid #000;
  /* Borda preta */
  background: #FFF;
  /* Fundo branco */
  margin-top: 140px;
  /* Margem superior */
}

/* Estilo para a caixa 2 dentro da fileira2 */
.fileira2 .caixa2 {
  width: 397px;
  /* Largura da caixa */
  height: 393px;
  /* Altura da caixa */
  border-radius: 50px;
  /* Bordas arredondadas */
  border: 2px solid #000;
  /* Borda preta */
  background: #FFF;
  /* Fundo branco */
  margin-top: 140px;
  /* Margem superior */
}

/* Estilo para o carrossel de imagens */
.carroselongs {
  display: flex;
  /* Flexbox para organizar os itens */
  width: 1295px;
  /* Largura do carrossel */
  height: 323px;
  /* Altura do carrossel */
  border-radius: 50px;
  /* Bordas arredondadas */
  border: 3px solid #000;
  /* Borda preta */
  background: #FFF;
  /* Fundo branco */
  margin: auto;
  /* Centraliza o carrossel na tela */
  justify-content: center;
  /* Alinha o conteúdo ao centro */
  background-image: url(../imagens/slideong1.png);
  /* Imagem de fundo do carrossel */
  background-repeat: no-repeat;
  /* Não repete a imagem */
  background-position: right;
  /* Alinha a imagem à direita */
}

/* Estilo para os botões do carrossel */
.botoescarrosel {
  display: flex;
  /* Flexbox para organizar os botões */
  flex-direction: row;
  /* Alinha os botões na horizontal */
  justify-content: center;
  /* Alinha os botões ao centro */
  align-items: flex-end;
  /* Alinha os botões na parte inferior */
  padding-bottom: 20px;
  /* Padding inferior */
  gap: 30px;
  /* Espaçamento entre os botões */
}


/* Estilo para o botão esquerdo (esquerdabt) */
.esquerdabt {
  width: 50px;
  /* Largura do botão */
  height: 20px;
  /* Altura do botão */
  border-radius: 50px;
  /* Bordas arredondadas, criando um formato oval */
  border: 3px solid #000;
  /* Borda preta de 3px */
  background: #5DE77B;
  /* Fundo verde */
  cursor: pointer;
  /* Aparece como um cursor de mão ao passar por cima */
}

/* Estilo para o botão do meio (meiobt) */
.meiobt {
  width: 50px;
  /* Largura do botão */
  height: 20px;
  /* Altura do botão */
  border-radius: 50px;
  /* Bordas arredondadas, criando um formato oval */
  border: 3px solid #000;
  /* Borda preta de 3px */
  background: white;
  /* Fundo branco */
  cursor: pointer;
  /* Aparece como um cursor de mão ao passar por cima */
}

/* Estilo para o botão direito (direitabt) */
.direitabt {
  width: 50px;
  /* Largura do botão */
  height: 20px;
  /* Altura do botão */
  border-radius: 50px;
  /* Bordas arredondadas, criando um formato oval */
  border: 3px solid #000;
  /* Borda preta de 3px */
  background: white;
  /* Fundo branco */
  cursor: pointer;
  /* Aparece como um cursor de mão ao passar por cima */
}


/* Media Query para telas com largura máxima de 1500px */
@media (max-width: 1500px) {
  footer {
    width: auto;
    /* Faz o rodapé ocupar a largura automática, ajustando-se ao conteúdo */
  }
}

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

  /* Altera a direção dos elementos na fileira1 e fileira2 para coluna */
  .fileira1,
  .fileira2 {
    flex-direction: column;
    /* Organiza os itens em coluna ao invés de linha */
    margin: auto;
    /* Centraliza os itens */
    gap: 0px;
    /* Remove o espaçamento entre os itens */
  }

  /* Esconde o elemento com a classe carroselongs em telas pequenas */
  .carroselongs {
    display: none;
    /* Torna o carrossel invisível em telas pequenas */
  }
}