@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 {
  background-color: #F5F5CC;
  /* define a cor de fundo da pagina */
  background-image: url(../imagens/slide1.png);
  /*Coloca a imagem de fundo no começo da pagina*/
  background-repeat: no-repeat;
  /* define que a imagem de fundo não se repita */
  background-size: 100%;
  background-position-y: 20px;
  overflow-y: visible;
}

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

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

.carrosel {
  width: 100%;
  /* A largura do carrossel será 100% do tamanho do contêiner em que ele está */
  height: 600px;
  /* Define a altura do carrossel como 600px */
  flex-shrink: 0;
  /* Impede que o carrossel encolha quando o espaço disponível for menor */
  background: #5DE782;
  /* Define a cor de fundo do carrossel como verde claro (#5DE782) */
}


.quadrado {
  width: 220px;
  height: 220px;
  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;
}

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

.tituloshop {
  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 */
  display: none;
}

hr {
  height: 4px;
  /* Define a altura da linha horizontal (hr) como 4px */
  border-radius: 5px;
  /* Arredonda as bordas da linha com um raio de 5px */
  width: 80%;
  /* Define a largura da linha como 80% do tamanho do contêiner */
  background-color: #000;
  /* Define a cor de fundo da linha como preta */
}

.textop {
  padding-left: 40px;
  /* Adiciona um espaço de 40px à esquerda do texto */
  display: flex;
  /* Torna o elemento flexível */
  font-family: poppinsRegular;
  /* Usa a fonte Poppins Regular para o texto */
  color: #000;
  /* Define a cor do texto como preta */
  align-self: flex-start;
  /* Alinha o texto ao início do seu contêiner (lado esquerdo) */
  font-size: 40px;
  /* Define o tamanho da fonte como 40px */
  font-style: normal;
  /* Define o estilo da fonte como normal (sem itálico) */
  font-weight: 400;
  /* Define o peso da fonte como normal (400) */
  line-height: normal;
  /* Define o espaçamento entre as linhas como normal */
  align-items: center;
  /* Alinha o conteúdo dentro do container verticalmente no centro */
  gap: 100px;
  /* Adiciona um espaço de 100px entre os itens dentro do contêiner flexível */
}

.fileira {
  width: 302px;
  /* Define a largura da "fileira" como 302px */
  height: 329px;
  /* Define a altura da "fileira" como 329px */
  flex-shrink: 0;
  /* Impede que o elemento encolha caso o espaço seja reduzido */
  border-radius: 30px;
  /* Arredonda os cantos da "fileira" com um raio de 30px */
  background: #FFF;
  /* Define a cor de fundo da "fileira" como branca */
}

.grupofileira {
  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;
}

.botoes {
  display: flex;
  /* Torna o container flexível */
  flex-direction: row;
  /* Organiza os itens em linha (horizontal) */
  justify-content: space-between;
  /* Distribui os itens com espaçamento igual entre eles */
  padding-top: 180px;
  /* Adiciona um espaço de 180px no topo do container */
}

.voltar {
  width: 93px;
  /* Define a largura do botão como 93px */
  height: 87px;
  /* Define a altura do botão como 87px */
  border-radius: 0 50px 50px 0;
  /* Arredonda apenas os cantos direito superior e inferior */
  border: 1px solid #000;
  /* Define uma borda preta de 1px ao redor do botão */
  background: #F5F5CC;
  /* Define o fundo do botão como um tom de bege claro */
  font-size: 30px;
  /* Define o tamanho da fonte como 30px */
  cursor: pointer;
  /* Torna o cursor em "mãozinha" quando passa por cima do botão */
}

.avancar {
  width: 93px;
  /* Define a largura do botão como 93px */
  height: 87px;
  /* Define a altura do botão como 87px */
  border-radius: 50px 0 0 50px;
  /* Arredonda apenas os cantos esquerdo superior e inferior */
  border: 1px solid #000;
  /* Define uma borda preta de 1px ao redor do botão */
  background: #F5F5CC;
  /* Define o fundo do botão como um tom de bege claro */
  font-size: 30px;
  /* Define o tamanho da fonte como 30px */
  cursor: pointer;
  /* Torna o cursor em "mãozinha" quando passa por cima do botão */
}

.titulocaixa {
  font-size: 15px;
  /* Define o tamanho da fonte como 15px */
  color: #000;
  /* Define a cor do texto como preto */
  font-family: poppinsbold;
  /* Usa a fonte Poppins Bold */
  align-self: flex-start;
  /* Alinha o texto à esquerda do container */
  text-align: left;
  /* Alinha o texto à esquerda */
}

.preco {
  font-family: poppinsRegular;
  /* Usa a fonte Poppins Regular */
  color: #000;
  /* Define a cor do texto como preto */
  font-size: 25px;
  /* Define o tamanho da fonte como 25px */
  align-self: flex-start;
  /* Alinha o texto à esquerda do container */
  text-align: left;
  /* Alinha o texto à esquerda */
}

.descri {
  font-size: 13px;
  /* Define o tamanho da fonte como 13px */
  color: #000;
  /* Define a cor do texto como preto */
  font-family: poppinsRegular;
  /* Usa a fonte Poppins Regular */
  align-self: flex-start;
  /* Alinha o texto à esquerda do container */
  text-align: left;
  /* Alinha o texto à esquerda */
}

.caixa {
  width: 290px;
  /* Define a largura da caixa como 290px */
  height: 320px;
  /* Define a altura da caixa como 320px */
  background: #FFF;
  /* Define o fundo da caixa como branco */
  border-radius: 30px;
  /* Arredonda os cantos da caixa com raio de 30px */
  border: 1px solid #000;
  /* Define uma borda preta de 1px ao redor da caixa */
  display: flex;
  /* Torna a caixa flexível */
  align-items: center;
  /* Alinha os itens da caixa verticalmente no centro */
  flex-direction: column;
  /* Organiza os itens da caixa em coluna (vertical) */
  padding: 20px;
  /* Adiciona 20px de espaço interno nas bordas da caixa */
}

.dcaixa {
  width: 229px;
  /* Define a largura da subcaixa como 229px */
  height: 140px;
  /* Define a altura da subcaixa como 140px */
  border-radius: 10px;
  /* Arredonda os cantos da subcaixa com raio de 10px */
  border: 1px solid #000;
  /* Define uma borda preta de 1px ao redor da subcaixa */
  background: #FFF;
  /* Define o fundo da subcaixa como branco */
}

.imgprod {
  width: 219px;
  /* Define a largura da imagem como 219px */
  height: 130px;
  /* Define a altura da imagem como 130px */
}

.botao {
  color: black;
  /* Define a cor do texto como preto */
  width: 249px;
  /* Define a largura do botão como 249px */
  height: 79px;
  /* Define a altura do botão como 79px */
  border: 1px solid #000;
  /* Define uma borda preta de 1px ao redor do botão */
  font-size: 25px;
  /* Define o tamanho da fonte como 25px */
  border-radius: 0 80px;
  /* Arredonda os cantos direito superior e inferior do botão */
  font-family: poppinsSemiBold;
  /* Usa a fonte Poppins SemiBold */
  display: flex;
  /* Torna o botão flexível */
  align-items: center;
  /* Alinha o texto dentro do botão verticalmente */
  justify-content: center;
  /* Alinha o texto dentro do botão horizontalmente */
  margin: auto;
  /* Centraliza o botão no contêiner */
}


.botao:hover {
  display: flex;
  /* Torna o botão flexível quando o mouse passa por cima */
  width: 249px;
  /* Mantém a largura do botão como 249px ao passar o mouse */
  height: 79px;
  /* Mantém a altura do botão como 79px ao passar o mouse */
  align-items: center;
  /* Centraliza o conteúdo dentro do botão verticalmente */
  border-radius: 0 80px;
  /* Mantém os cantos arredondados do botão à direita */
  border: 1px solid #FFF;
  /* Altera a borda do botão para branca quando o mouse passa por cima */
  text-decoration: none;
  /* Remove qualquer decoração de texto, como sublinhado */
  color: white;
  /* Altera a cor do texto para branco quando o mouse passa por cima */
  background-color: #348145;
  /* Altera o fundo do botão para um verde escuro */
}


form {
  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 {
  width: 254px;
  /* Define a largura da barra de busca como 254px */
  height: 41px;
  /* Define a altura da barra de busca como 41px */
  background-image: url('../imagens/lupa.png');
  /* Define a imagem de fundo como uma lupa (ícone de pesquisa) */
  background-repeat: no-repeat;
  /* Impede que a imagem de fundo se repita */
  padding-left: 40px;
  /* Adiciona um espaço à esquerda do conteúdo dentro da barra de busca (para a lupa não ficar colada à borda) */
  background-position: 10px 50%;
  /* Posiciona a lupa 10px da borda esquerda e verticalmente centralizada */
  border-radius: 50px;
  /* Arredonda os cantos da barra de busca, criando um efeito de borda circular */
  border: 1px solid #000;
  /* Define uma borda preta de 1px ao redor da barra de busca */
  font-size: 18px;
  /* Define o tamanho da fonte do texto dentro da barra de busca como 18px */
  font-family: poppinsRegular;
  /* Usa a fonte Poppins Regular para o texto */
  margin-top: 5px;
  /* Adiciona um pequeno espaço de 5px acima da barra de busca */
}


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

.sacola {
  width: 50px;
  /* Define a largura da sacola como 50px */
  height: 50px;
  /* Define a altura da sacola como 50px */
  background-color: white;
  /* Define o fundo da sacola como branco */
  border-radius: 100px;
  /* Torna os cantos da sacola completamente arredondados (círculo) */
  border: 1px solid #000;
  /* Define uma borda preta de 1px ao redor da sacola */
  display: flex;
  /* Torna o contêiner um elemento flexível */
  justify-content: center;
  /* Alinha o conteúdo horizontalmente ao centro */
  align-items: center;
  /* Alinha o conteúdo verticalmente ao centro */
  cursor: pointer;
  /* Muda o cursor para "mãozinha" quando passa por cima */
}

.sacola img {
  width: 31.5px;
  /* Define a largura da imagem dentro da sacola como 31.5px */
  height: 37.5px;
  /* Define a altura da imagem dentro da sacola como 37.5px */
}


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

  .containers-qudrados {
    margin-top: 120px;
  }

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

}



@media (max-width: 600px) {
  body {
    background-image: none;
    /* Remove a imagem de fundo do body em telas pequenas (menos de 600px) */
  }

  .quadrado {
    margin-left: 0px;
    /* Remove qualquer margem à esquerda do elemento ".quadrado" */
  }

  .botoes {
    display: none;
    /* Esconde os botões em telas pequenas */
  }

  header {
    height: auto;
    /* Define a altura do header como automática (sem altura fixa) */
  }

  .containers-qudrados {
    flex-wrap: wrap;
    /* Permite que os itens dentro de ".containers-quadrados" quebrem para a linha seguinte */
    margin-top: 0px;
    /* Remove qualquer margem no topo do container */
    gap: 20px;
    /* Define um espaço de 20px entre os itens dentro do container */
  }

  .tituloshop {
    display: block;
    /* Torna o elemento ".tituloshop" um bloco em telas pequenas (provavelmente para forçar ele a quebrar para uma nova linha) */
  }

  .grupofileira {
    flex-wrap: wrap;
    /* Permite que os itens dentro de ".grupofileira" quebrem para a linha seguinte */
    gap: 55px;
    /* Define um espaço de 55px entre os itens dentro do grupo */
  }

  .caixa {
    width: auto;
    /* Define a largura da caixa como automática (ajustável conforme o conteúdo) */
    height: 300px;
    /* Define a altura da caixa como 300px */
  }

  .dcaixa {
    width: 250px;
    /* Define a largura da subcaixa como 250px */
    height: 150px;
    /* Define a altura da subcaixa como 150px */
  }


  .descri {
    overflow: hidden;
    /* Esconde o texto que excede a largura */
  }

}