/* Estilo para a imagem do botão "Fale Conosco" */
  .inmagen-aluguel {
    text-align: center;
    margin-top: 20px;
    margin-bottom: -50px;
  }

  .inmagen-aluguel img {
    width: 40dvb; /* Tamanho inicial da imagem */
    transition: width 0.3s ease; /* Adiciona uma transição suave à animação */
  }

  /* Animação ao passar o mouse */
  .inmagen-aluguel img:hover {
    width: 220px; /* Tamanho aumentado ao passar o mouse */
  }

  /* Estilo para telas menores */
  @media only screen and (max-width: 800px) {
    .inmagen-aluguel img {
      width: 200px !important; /* Ajuste de tamanho para telas menores */
      transition: none !important; /* Remove a transição para telas menores */
    }
  }


 /* Estilo básico para o botão WhatsApp */
.whatsapp-btn {
  position: fixed;
  /* Define a posição fixa para que o botão permaneça fixo na tela enquanto rola a página */
  bottom: 20px;
  /* Define a distância em pixels do fundo da janela do navegador */
  right: 10px;
  /* Define a distância em pixels da margem direita da janela do navegador */
  z-index: 999;
  /* Define a ordem de empilhamento do botão sobre outros elementos */
  transition: transform 0.1s ease-in-out;
  /* Adiciona uma transição suave ao movimento do botão */
}

/* Estilo para a mensagem que aparecerá ao passar o mouse */
.whatsapp-btn span {
  visibility: hidden;
  /* Inicialmente, a mensagem está oculta */
  width: 120px;
  /* Define a largura da mensagem */
  background-color: #000;
  /* Define a cor de fundo da mensagem */
  color: #fff;
  /* Define a cor do texto da mensagem */
  text-align: center;
  /* Centraliza o texto da mensagem */
  border-radius: 6px;
  /* Adiciona cantos arredondados à caixa da mensagem */
  padding: 5px 0;
  /* Adiciona espaçamento interno à mensagem */
  position: absolute;
  /* Posiciona a mensagem de forma absoluta em relação ao elemento pai */
  z-index: 1;
  /* Define a ordem de empilhamento da mensagem sobre o botão */
  bottom: 30px;
  /* Define a distância em pixels do fundo da janela do navegador para a mensagem */
  right: 65px;
  /* Define a distância em pixels da margem direita da janela do navegador para a mensagem */
  opacity: 0;
  /* Define a opacidade inicial da mensagem como transparente */
  transition: opacity 0.3s;
  /* Adiciona uma transição suave para a opacidade da mensagem */
}

.whatsapp-btn:hover span {
  visibility: visible;
  /* Ao passar o mouse sobre o botão, a mensagem se torna visível */
  opacity: 1;
  /* A opacidade da mensagem muda para 1 (totalmente visível) */
}

/* Redimensionar a imagem para 80x80 pixels */
.whatsapp-btn img {
  width: 80px;
  /* Define a largura da imagem do botão */
  height: 80px;
  /* Define a altura da imagem do botão */
}

 /* Estilos específicos para dispositivos móveis */
 @media (max-width: 768px) {
  .whatsapp-btn {
    bottom: 10px;
    right: 5px;
  }

  .whatsapp-btn span {
    bottom: 20px;
    right: 45px;
  }
}



@font-face{
    font-family: 'Futura1';
    src: url('/tipo grafia/futura sv/Futura\ Thin.ttf');
  }
  @font-face{
    font-family: 'Futura2';
    src: url('/tipo grafia/futura sv/Futura\ Futura Std Book.ttf');
  }
  @font-face{
    font-family: 'Futura3';
    src: url('/tipo grafia/futura sv/Futura\ Futura Std Heavy.ttf');
  }

  .product-category-page {
    display: flex;
    gap: 10px;
    padding: 20px;
    margin-bottom: 60px;
    margin-top: 60px;
    margin-left: 15em;
    margin-right: 7em;
}
  .caixa{
    position: sticky; 
    background-color: #0077cc00;
    border-radius: 10px;  /* Bordas arredondadas */
    box-shadow: 6px 6px 100px rgba(0, 0, 0, 0.185);  /* Sombra suave */
    padding: 20px;
    margin-bottom: auto;
  }

  .caixa:hover {
    transform: translateY(-5px); /* Efeito de levitar um pouco o card ao passar o mouse */
  }

  #filter-h3{
    margin: auto;
    font-size: 25px;
    margin-top: 0;  /* Remover margem superior */
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
  }


.filter-group {
    flex: 1;
    font-family: 'Futura3';
    font-size: 20px;
    padding: 5px;
    margin: auto;

}

.filter-group ul {
    list-style: none;
    padding: 0;
    border-bottom: 1px solid #e0e0e0;
}

.filter-group li {
    margin-bottom: 15px;
}

.filter-group a {
    padding: 10px;
    text-decoration: none;
    color: #333;
}

.filter-group a:hover {
    background-color: rgba(255, 255, 255, 0.2);  /* Sombreamento leve no hover */
    transform: translateY(-5px); /* Efeito de levitar um pouco o card ao passar o mouse */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);;  /* Sem sombra no hover */
}

/* ------------------------------------------------------------------------------------------------- */

.product-grid {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Aqui está a alteração para exibir 4 produtos por fileira */
    gap: 20px;
    margin-left: 50px;
    margin-bottom: auto;
}

.product-card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    transition: transform 0.3s; /* Adicionado para um efeito de "hover" */
    margin-bottom: auto;
}

.product-card:hover {
    transform: translateY(-5px); /* Efeito de levitar um pouco o card ao passar o mouse */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.product-card img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px; /* Adiciona espaço entre a imagem e o título */
}

.nome-product{
  font-family: 'Futura3';
  font-size: 23px;
}

.info-product{
  font-family: 'Futura3';
  font-size: 19px;
}

.info{
  font-size: 18px;
}

.fixed-filter {
  position: fixed;
  top: 15em; /* ajuste conforme necessário */
  left: 5em; /* ajuste conforme necessário */
  z-index: 1000; /* para garantir que fique por cima de outros elementos */
}


/* ------------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  
  .product-category-page {
    display: flex;
    gap: 10px;
    padding: 20px;
    margin-bottom: 60px;
    margin-top: 60px;
    margin-left: 5em;
    margin-right: 7em;
}

.caixa {
    position: static;  /* Desativa o comportamento sticky em dispositivos móveis */
    padding: 10px; /* Reduzir o padding */
}

  
}

/* ------------------------------------------------------------------------------------------------- */
@media (max-width: 768px) {

  .fixed-filter {
    top: 0; /* ajuste conforme necessário */
    left: 0; /* ajuste conforme necessário */

  }
  
  .filter-group {
      display: none;
      background: none;
  }

  .fa-filter {
      font-size: 30px;
      cursor: pointer;
      margin: auto;
      justify-content: center;  /* Centraliza horizontalmente */
 
  }

  .product-category-page {
    flex-direction: column;
    margin-left: 1em;
    margin-right: 1em;
    gap: 20px;
}

.caixa {
    position: static;  /* Desativa o comportamento sticky em dispositivos móveis */
    padding: 10px; /* Reduzir o padding */
}

.caixa:hover {
  transform: none;
}


.filter-group {
    font-size: 16px;
    padding: 0; /* Remover o padding no mobile */
    margin: auto; /* Remover a margem no mobile */
}

.filter-group ul {
    border: none; /* Remover a borda inferior */
}

.filter-group li {
    margin-bottom: 10px; /* Reduzir a margem inferior dos itens */
}

.filter-group a {
    padding: 15px;
    font-size: 22px;
}


.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; /* Reduzir o espaço entre os produtos */
  margin-left: 0;
  margin-top: 20px; /* Adicionar margem superior */
}

  .info-product {
      font-size: 16px; /* Reduzir o tamanho da fonte da informação do produto */
  }

  .info {
      font-size: 16px;
  }
  
}
/* Hide filters on screens smaller than 768px by default */