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

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

/* Estilo para a barra de busca */
#busca2 {
  width: 254px;
  /* Largura da barra de busca */
  height: 41px;
  /* Altura da barra de busca */
  background-image: url('../imagens/lupa.png');
  /* Ícone de lupa dentro da barra de busca */
  background-repeat: no-repeat;
  /* O ícone não se repetirá */
  padding-left: 40px;
  /* Espaço interno à esquerda para acomodar o ícone */
  background-position: 10px 50%;
  /* A posição do ícone dentro da barra de busca (10px da esquerda e centralizado verticalmente) */
  border-radius: 50px;
  /* Cantos arredondados, dando um formato de círculo para a barra */
  border: 1px solid #000;
  /* Borda preta de 1px */
  font-size: 18px;
  /* Tamanho da fonte do texto dentro da barra de busca */
  font-family: poppinsRegular;
  /* Fonte utilizada no texto da barra de busca */
  margin-top: 5px;
  /* Espaço acima da barra de busca */
}

/* Estilo para o ícone de sacola */
.sacola {
  width: 50px;
  /* Largura da sacola */
  height: 50px;
  /* Altura da sacola */
  background-color: white;
  /* Cor de fundo branca para a sacola */
  border-radius: 100px;
  /* Canto totalmente arredondado, criando um círculo */
  border: 1px solid #000;
  /* Borda preta de 1px */
  display: flex;
  /* Flexbox para alinhar o conteúdo dentro da sacola */
  justify-content: center;
  /* Alinha o conteúdo horizontalmente no centro */
  align-items: center;
  /* Alinha o conteúdo verticalmente no centro */
}

/* Estilo para a imagem dentro da sacola */
.sacola img {
  width: 31.5px;
  /* Largura da imagem dentro da sacola */
  height: 37.5px;
  /* Altura da imagem dentro da sacola */
}


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

.titulo {
  color: #5DE77B;
  /*muda a cor do texto*/
  text-align: center;
  /*alinha o texto no centro*/
  text-shadow: 0 4px 0 #000;
  /*sombra no texto*/
  -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: 60px;
  /*muda o tamanho da letra */
  margin-top: 10px;
  /*coloca uma margem sobre o topo de 60 pixels*/
}

/* Estilo para a fila de blocos */
.tfileira {
  display: flex;
  /* Usando Flexbox para a disposição dos itens */
  flex-direction: column;
  /* Alinha os itens na coluna (de cima para baixo) */
  gap: 100px;
  /* Espaçamento de 100px entre os itens */
  align-items: center;
  /* Alinha os itens horizontalmente no centro */
  justify-content: center;
  /* Alinha os itens verticalmente no centro */
}

/* Estilo para cada bloco dentro da fila */
.bloco {
  width: 300.164px;
  /* Largura do bloco */
  height: 327px;
  /* Altura do bloco */
  background-color: white;
  /* Cor de fundo do bloco */
  border-radius: 30px;
  /* Cantos arredondados do bloco */
  display: flex;
  /* Usando Flexbox para alinhar os itens dentro do bloco */
  justify-content: center;
  /* Alinha o conteúdo horizontalmente no centro */
  align-items: center;
  /* Alinha o conteúdo verticalmente no centro */
  flex-direction: column;
  /* Organiza o conteúdo do bloco na direção da coluna */
  gap: 10px;
  /* Espaçamento de 10px entre os itens dentro do bloco */
  border: 1px solid #000;
  /* Borda preta de 1px ao redor do bloco */
}

/* Estilo para o texto dentro de cada bloco */
.texto {
  color: #000;
  /* Cor do texto é preta */
  font-size: 30px;
  /* Tamanho da fonte do texto */
  font-family: poppinsRegular;
  /* Fonte usada para o texto */
  text-align: center;
  /* Alinha o texto no centro do bloco */
}


.fileira {
  display: flex;
  /*forma de organizar os itens*/
  flex-direction: row;
  /*deixa os itens um do lado do outro na horizontal*/
  justify-content: center;
  gap: 280px;

}

/* Estilo para a classe 'planta' */
.planta {
  width: 155px;
  /* Largura da planta */
  height: 179px;
  /* Altura da planta */
}

/* Estilo para a classe 'roupa' */
.roupa {
  width: 223px;
  /* Largura da roupa */
  height: 176px;
  /* Altura da roupa */
}

/* Estilo para a classe 'higi' */
.higi {
  width: 100.219px;
  /* Largura do item higiênico */
  height: 182.678px;
  /* Altura do item higiênico */
}


.fileira2 {
  display: flex;
  /*forma de organizar os itens*/
  flex-direction: row;
  /*deixa os itens um do lado do outro na horizontal*/
  justify-content: center;
  /*alinha os itens no centro*/
  gap: 280px;
  /*espaço entre os itens*/

}

/* Estilo para a classe 'lapis' */
.lapis {
  width: 161px;
  /* Largura do lápis */
  height: 168.031px;
  /* Altura do lápis */
}

/* Estilo para a classe 'panela' */
.panela {
  width: 211px;
  /* Largura da panela */
  height: 164px;
  /* Altura da panela */
}

/* Estilo para a classe 'dec' */
.dec {
  width: 181px;
  /* Largura do item decorativo */
  height: 183px;
  /* Altura do item decorativo */
}


.fileira3 {
  display: flex;
  /*forma de organizar os itens*/
  flex-direction: row;
  /*deixa os itens um do lado do outro na horizontal*/
  justify-content: center;
  /*alinha os itens no centro*/
  gap: 280px;
  /*espaço entre os itens*/

}

/* Estilo para a classe 'bike' */
bike {
  width: 259.276px;
  /* Largura da bicicleta */
  height: 168px;
  /* Altura da bicicleta */
}

/* Estilo para a classe 'gato' */
gato {
  width: 186.332px;
  /* Largura do gato */
  height: 167px;
  /* Altura do gato */
}

/* Estilo para a classe 'cel' */
cel {
  width: 145.305px;
  /* Largura do celular */
  height: 187.422px;
  /* Altura do celular */
}

/* Estilo para a classe 'botao' */
.botao {
  color: black;
  /* Cor do texto do botão */
  width: 249px;
  /* Largura do botão */
  height: 79px;
  /* Altura do botão */
  border: 1px solid #000;
  /* Borda preta ao redor do botão */
  font-size: 25px;
  /* Tamanho da fonte do texto no botão */
  border-radius: 0 80px;
  /* Bordas arredondadas no botão */
  font-family: poppinsSemiBold;
  /* Família da fonte */
  display: flex;
  /* Usar o modelo de layout flexbox */
  align-items: center;
  /* Alinhar itens verticalmente no centro */
  justify-content: center;
  /* Alinhar itens horizontalmente no centro */
  margin: auto;
  /* Centralizar o botão */
}


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

/* Estilos aplicados quando a largura da tela é menor ou igual a 600px */
@media (max-width: 600px) {

  /* Altera a direção dos itens na classe 'fileira' para coluna e reduz o espaçamento entre os itens */
  .fileira {
    flex-direction: column;
    /* Muda para coluna */
    gap: 10px;
    /* Reduz o espaço entre os itens */
  }

  /* Altera a direção dos itens na classe 'fileira2' para coluna e reduz o espaçamento entre os itens */
  .fileira2 {
    flex-direction: column;
    /* Muda para coluna */
    gap: 10px;
    /* Reduz o espaço entre os itens */
  }

  /* Altera a direção dos itens na classe 'fileira3' para coluna e reduz o espaçamento entre os itens */
  .fileira3 {
    flex-direction: column;
    /* Muda para coluna */
    gap: 10px;
    /* Reduz o espaço entre os itens */
  }

  /* Reduz o espaço entre os itens na classe 'tfileira' */
  .tfileira {
    gap: 10px;
    /* Reduz o espaço entre os itens */
  }

  /* Oculta o elemento com a classe 'partedabusca' */
  .partedabusca {
    display: none;
    /* Esconde o elemento */
  }

}



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

}