body {
    background-image: url('img/bb.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    background-attachment: fixed;

    min-height: 100vh; /* Estabelece a altura mínima da tela cheia */
    display: flex;
    flex-direction: column;
}


.menu { 
    display: none; 
    background-color: #333; 
    padding: 10px; 
    margin-top: 20px;
    border-radius: 10px;
  }
  .menu a {
    color: white; 
    text-decoration: none; 
    padding: 10px; 
    display: block;
  }
  /* Estilo para o ícone do menu hambúrguer */
  .hamburger {
    background: none;
    border: none;
    cursor: pointer;
    float: left;
    margin-top: -18px;
    transition: transform 0.5s ease;
  }
  .hamburger:focus {
    outline: none;
  }
  .hamburger-icon {
    display: block;
    width: 30px;
    height: 3px;
    background-color: black;
    margin: 6px 0;
    transition: transform 0.5s ease;
  }
  .hamburger.rotate {
    transform: rotate(180deg);
  }
  /* Transformações das barras do ícone */
  .hamburger-icon.rotate-top {
    transform: translateY(9px) rotate(45deg);
  }
  .hamburger-icon.rotate-middle {
    opacity: 0;
  }
  .hamburger-icon.rotate-bottom {
    transform: translateY(-9px) rotate(-45deg);
  }
  /* Mostrar menu quando .menu-active é adicionado ao .menu */
  .menu-active {
    display: block;
  }


 .barra-superior {
    background-color: #d3d3d3;
    width: 100%;
    padding: 25px 0;
    border-radius: 10px;
    text-align: center;
 } 

.footer {
  text-align: right;
  font-size: 14px;
  position: fixed;
  bottom: 0; /* Fixa o footer na parte inferior da tela */
  width: 97%; /* Garante que o footer ocupe toda a largura da tela */
  border-radius: 10px;
}

.text {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
}


.menu-carousel {
  display: flex;
  align-items: center;
}

.carousel-button {
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.menu-container {
  overflow: hidden;
  flex-grow: 1;
}

.menu-items2 {
  display: flex; /* Altera o layout para flexível */
  list-style: none; /* Remove marcadores de lista */
  padding: 0; /* Remove o preenchimento padrão da lista */
  overflow-x: auto; /* Adiciona rolagem horizontal se houver muitos itens */
}

.menu-items2 a {
  color: white;
  text-decoration: none;
  padding: 10px;
  background-color: #333;
}

.menu-items2 a:hover {
  background-color: #555;
}

.menu-item {
  margin-right: 20px; /* Espaçamento entre os itens */
}

.menu-item .menu-item-content {
  background-color: white; /* Adiciona fundo branco */
  padding: 20px; /* Adiciona espaçamento interno */
  border-radius: 8px; /* Adiciona bordas arredondadas */
  text-align: center; /* Centraliza o conteúdo */
}

.menu-item img {
  width: 400px;
  height: 400px;
  margin-bottom: 10px; /* Espaçamento inferior entre a imagem e o texto */
}

.menu-item p {
  color: black; /* Ajusta a cor do texto */
  margin-bottom: 10px; /* Espaçamento inferior entre o parágrafo e o botão */
}

.ver-button {
  background-color: #333;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  text-decoration: none; /* Remove sublinhado */
}

/* Adaptação para dispositivos móveis */
@media only screen and (max-width: 768px) {
  .menu-item img {
      width: 200px;
      height: 200px;
  }
  
  .menu-item p {
      font-size: 14px;
  }
  
  .ver-button {
      padding: 8px 16px;
      font-size: 12px;
  }
}