@import url('font.css');
/*link do css das fontes*/
@import url('rodape.css');
/*link do css do rodape*/
@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 */
}

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 */
}

.fundotexto {
  /*configura o fundo do texto*/
  width: 1208px;
  /*configura a largura em 1208px*/
  background-color: #FCFFFB;
  /*configura a cor de fundo para o codigo #fcfffb*/
  border-radius: 13px;
  /*define o arredondamento da ponta para 13px*/
  margin: auto;
  /*centraliza no meio da tela*/
  margin-top: 100px;
  /*configura a distancia do topo para 100px*/
  margin-bottom: 100px;
  /*configura a dist+ancia do fundotexto para o fim da tela para 100px*/
  padding: 20px;
  /*configura o espaçamento interno para 20px*/
}

.texto {
  /*configura o div texto*/
  color: #000;
  /*deixa o texto no codigo de cores #000*/
  text-align: center;
  /*alinha o texto no centro*/
  font-family: poppinsExtraLight;
  /*configura a fonte do texto para poppinsExtraLight*/
  font-size: 23px;
  /*configura o tamanho do texto para 23px*/
}

.titulo {
  /*configura a div titulo*/
  color: #000;
  /*configura a cor do titulo para #000*/
  text-align: center;
  /*alinha o titulo no centro*/
  font-family: poppinsExtraBold;
  /*configura a fonte do titulo para poppinsExtraBold*/
  font-size: 60px;
  /*configura o tamanho do titulo para 60px*/
  font-weight: 800;
  /*configura a grossura do titulo*/
}

.titulopagina {
  /*configura a linha abaixo do titulo*/
  width: 730px;
  /*configura a largura da linha*/
  height: 3px;
  /*configura a altura da linha*/
  background: #000;
  /*configura a cor do fundo da linha*/
  margin: auto;
}


.imagens {
  /*configura a div imagens*/
  width: 1108px;
  /*configura a largura da pagina*/
  height: 300px;
  /*configura a altura da pagina*/
  border-radius: 30px;
  /*configura o arredondamento da borda da imagem*/
}

.links {
  /*configura a div links*/
  color: blue;
  /*configura a cor do texto para azul*/
  text-align: center;
  /*alinha o texto para o centro*/
  font-family: arial;
  /*configura a fonte do texto */
  font-size: 15px;
  /*configura o tamanho do texto*/

}

.voltar {
  /*configura o botão de voltar*/
  width: 78px;
  /*configura a largura da pagina*/
  height: 78px;
  /*configura a altura da pagina*/
  background-color: #FCFFFB;
  /*deixa o fundo do botão  com a cor #fcfffb*/
  border-radius: 80%;
  /*configura a borda do botao para deixar totalmente redondo*/
  top: 150px;
  /*configura a distancia do botão ate o top*/
  left: 20px;
  /*configura a distancia do botão ate a esquerda*/
  position: fixed;
  /*deixa a posição do botão fixo na tela para ele seguir a tela*/
  border: #5DE77B 2px solid;
  /*configura a cor da borda do botão*/
  object-fit: contain;
  /*deixa a imagem ajustada dentro do botão*/
  padding: 8px;
  /*configura o espaçamento interno da imagem para 8px*/
}

.imagens23 {
  height: 40%;
  /* Define a altura da imagem como 40% da altura do elemento pai */

  border-radius: 40px;
  /* Aplica bordas arredondadas à imagem com raio de 40px */
}


@media (max-width: 600px) {

  .titulo {
    font-size: 30px;
    /* Define o tamanho da fonte do título como 30px */
  }

  .fundotexto {
    width: 398px;
    /* Define a largura do fundo de texto como 398px */
    height: auto;
    /* A altura do fundo de texto é ajustada automaticamente conforme o conteúdo */
  }

  .titulopagina {
    width: 350px;
    /* Define a largura do título da página como 350px */
  }

  .imagens {
    width: 359px;
    /* Define a largura das imagens como 359px */
    height: 265px;
    /* Define a altura das imagens como 265px */
  }

  .voltar {
    width: 50px;
    /*configura a largura da pagina*/
    height: 50px;
    /*configura a altura da pagina*/

    bottom: 20px;
    /* cola no rodapé */
    left: 50%;
    /* centraliza */
    transform: translateX(-50%);
    /* ajusta pro meio certinho */
    top: auto;
    /* remove o top que você usou no desktop */
  }

  .imagens23 {
    width: 298px;
    height: 298px;
  }

}


@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;
  }

}