@import url('font.css');
/*link do css das fontes*/
@import url('rodape.css');
/*link do css do rodape*/
@import url('menu.css');
/*link do css do menu*/
@import url('selecaodecadastro.css');
/*link do css do selecao cadastro*/

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

body {
  /* Cor de fundo e rolagem da página */
  background-color: #F5F5CC;
  overflow-y: visible;
}

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

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

main {
  height: fit-content;
}

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

.carrosel {
  width: 100%;
  /* define a largura do item  */
  height: 600px;
  /* define a altura do item  */
  flex-shrink: 0;
  background: #5DE782;
  /* Área do carrossel verde e grande */

}


.quadrado {
  width: 220px;
  /* define a largura do item  */
  height: 220px;
  /* define a altura do item  */
  text-align: center;
  margin-left: 40px;
  /* 50px de margem acima, centralizado horizontalmente */
  border-radius: 50px;
  border: 1px solid #000;
  background: #FFF;
  box-shadow: 0 8px 0 0 #000;
  font-family: poppinsRegular;
  font-size: 14px;
  /* Quadrado branco arredondado com sombra */
}

.containers-qudrados {
  display: flex;
  justify-content: center;
  /* Centraliza os quadrados horizontalmente */
  align-items: center;
  /* Alinha verticalmente se necessário */
  gap: 150px;
  /* Espaço entre os quadrados */
  margin-top: 50px;
}

.titulo {
  /* Título grande com sombra e contorno */
  text-align: center;
  color: #5DE77B;
  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 */
}

hr {
  height: 4px;
  border-radius: 5px;
  width: 80%;
  /* define a largura do item  */
  background-color: #000;
}

footer {
  /* Estilo básico do rodapé */
  position: relative;
  bottom: 0;
  top: 1000px;
}

.rodapemobile {
  position: relative;
  bottom: 0;
  top: 1000px;
}

.textop {
  /* Texto grande e alinhado com espaço */
  padding-left: 40px;
  display: flex;
  /*deixa o cabeçalho em display flex para posicionar corretamente os itens*/
  font-family: poppinsRegular;
  color: #000;
  align-self: flex-start;
  font-size: 40px;
  /*muda o tamanho da letra */
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  align-items: center;
  gap: 100px;
}

.fileira {
  /* Caixa branca arredondada para itens */
  width: 302px;
  /* define a largura do item  */
  height: 329px;
  flex-shrink: 0;
  border-radius: 30px;
  background: #FFF;
}

.grupofileira {
  display: flex;
  /*deixa o cabeçalho em display flex para posicionar corretamente os itens*/
  justify-content: center;
  /* Centraliza os quadrados horizontalmente */
  align-items: center;
  /* Alinha verticalmente se necessário */
  gap: 150px;
  /* Espaço entre os quadrados */
  margin-top: 50px;
  flex-wrap: wrap;
  /* permite que os itens quebrem linha se necessário */
}

.botoes {
  /* Área dos botões espaçados */
  display: flex;
  /*deixa o cabeçalho em display flex para posicionar corretamente os itens*/
  flex-direction: row;
  justify-content: space-between;
  padding-top: 180px;
}

.partedabusca {
  display: flex;
  /*forma de organizar os itens*/
  flex-direction: row;
  /*deixa os itens um do lado do outro na horizontal*/
  gap: 10px;
  /*espaço entre os itens*/
  justify-content: flex-end;
  /*alinha os itens na direita*/
  margin-right: 22px;
  align-items: flex-end;
}

.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: absolute;
  /*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*/
  cursor: pointer;
}

.avancar {
  width: 93px;
  /* define a largura do item  */
  height: 87px;
  /*configura a altura do item*/
  border-radius: 50px 0 0 50px;
  /*configura a borda */
  border: 1px solid #000;
  background: #F5F5CC;
  /*deixa o fundo com a cor #F5F5CC*/
  font-size: 30px;
  cursor: pointer;
  /* essa parte estiliza o botão avançar */
}

.titulocaixa {
  /* Título pequeno dentro da caixa */
  font-size: 15px;
  /*muda o tamanho da letra */
  color: #000;
  font-family: poppinsbold;
  align-self: flex-start;
  text-align: left;
}

.preco {
  font-family: poppinsRegular;
  color: #000;
  font-size: 25px;
  /*muda o tamanho da letra */
  align-self: flex-start;
  text-align: left;
  /* essa parte estiliza o preço */
}

.descri {
  font-size: 13px;
  /*muda o tamanho da letra */
  color: #000;
  font-family: poppinsRegular;
  align-self: flex-start;
  text-align: left;
  /* essa parte estiliza a descrição */
}

.caixa {
  /* Caixa branca arredondada que organiza itens em coluna */
  width: 290px;
  /* define a largura do item  */
  height: 320px;
  background: #FFF;
  border-radius: 30px;
  border: 1px solid #000;
  display: flex;
  /*deixa o cabeçalho em display flex para posicionar corretamente os itens*/
  align-items: center;
  flex-direction: column;
  padding: 20px;
}

.dcaixa {
  /* Caixa menor para detalhes */
  width: 229px;
  /* define a largura do item  */
  height: 140px;
  border-radius: 10px;
  border: 1px solid #000;
  background: #FFF;
}

.imgprod {
  /* Tamanho da imagem do produto */
  width: 219px;
  /* define a largura do item  */
  height: 130px;
}

.botao {
  /* Botão grande arredondado */
  color: black;
  width: 249px;
  /* define a largura do item  */
  height: 79px;
  border: 1px solid #000;
  font-size: 25px;
  border-radius: 0 80px;
  font-family: poppinsSemiBold;
  display: flex;
  /*forma de organizar os itens*/
  align-items: center;
  justify-content: center;
  /*alinha os itens no centro*/
  margin: auto;
}

.botao:hover {
  /*configura o botao o houver do botão que ao passar o mouse ele mudara  */
  display: flex;
  /*forma de organizar os itens*/
  width: 249px;
  /* define a largura do item  */
  height: 79px;
  align-items: center;
  border-radius: 0 80px;
  border: 1px solid #FFF;
  text-decoration: none;
  color: white;
  background-color: #348145;

}

form {
  /* Form alinhado à direita com espaçamento */
  display: flex;
  /*forma de organizar os itens*/
  flex-direction: row;
  /*deixa os itens um do lado do outro na horizontal*/
  gap: 10px;
  /*espaço entre os itens*/
  justify-content: flex-end;
  /*alinha os itens na direita*/
  margin-top: 30px;
  margin-right: 22px;
}

#busca2 {
  /* Caixa pra digitar com lupa e borda redonda */
  width: 254px;
  /* define a largura do item  */
  height: 41px;
  background-image: url('../imagens/lupa.png');
  background-repeat: no-repeat;
  padding-left: 40px;
  background-position: 10px 50%;
  border-radius: 50px;
  border: 1px solid #000;
  font-size: 18px;
  font-family: poppinsRegular;
  margin-top: 5px;
}

.sacola {
  /* Caixinha branca redonda que deixa tudo dentro bem no meio */
  width: 50px;
  /* define a largura do item  */
  height: 50px;
  background-color: white;
  border-radius: 100px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  /*alinha os itens no centro*/
  align-items: center;

  img {
    width: 31.5px;
    /* define a largura do item  */
    height: 37.5px;
  }
}

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

  .containers-qudrados {
    margin-top: 120px;
    /* essa parte ajusta a margem superior dos containers de quadrados */
  }

}