.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 38px;
  max-width: 1200px; /* Largura máxima para telas maiores */
  margin: 0 auto; /* Centraliza a navbar */
  backdrop-filter: blur(10px); /* Efeito de desfoque */
  -webkit-backdrop-filter: blur(10px); /* Suporte para navegadores Webkit */
  color: white;
}

.navbar-logo img {
  height: 22px; /* Ajuste conforme o tamanho da sua logo */
}

.navbar-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.navbar-links a {
  color: white;
  text-decoration: none;
  font-size: 1em;
  transition: opacity 0.3s ease; /* Adiciona transição para opacidade */
}

.navbar-links a:hover {
  /* Remove os estilos anteriores de hover */
  /* color: #2ecc71; */
  /* background-color: rgba(255, 255, 255, 0.1); */
  /* padding: 5px 10px; */
  /* border-radius: 5px; */
  /* Adiciona apenas a mudança de opacidade */
  opacity: 0.8; /* Diminui a opacidade no hover */
}

.navbar-auth {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 10px 25px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: bold;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra leve */
}

.login-btn {
  background-color: rgba(40, 44, 52, 0.8);
  color: white;
}

.login-btn:hover {
  background-color: rgba(40, 44, 52, 0.9);
}

.signup-btn {
  background-color: #28a745;
  color: white;
}

.signup-btn:hover {
  background-color: #218838;
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: row; /* Alinha os itens na horizontal */
        justify-content: space-between; /* Distribui espaço entre a logo e os botões */
        align-items: center; /* Alinha os itens verticalmente ao centro */
        padding: 20px 20px 10px 20px; /* Aumenta o padding superior, mantém laterais e inferior */
    }

    .navbar-logo {
        /* margin-bottom: 10px; Remove a margem inferior se estiver alinhado horizontalmente */
    }

    .navbar-links {
        display: none; /* Mantém os links de navegação ocultos */
        /* As outras propriedades flexbox para links empilhados não são necessárias aqui */
    }

    .navbar-auth {
        /* width: 100%; Remove a largura total, deixa o conteúdo determinar a largura */
        /* justify-content: center; Não é necessário centralizar 100% se a navbar gerencia a distribuição */
        /* margin-top: 10px; Remove a margem superior se estiver alinhado horizontalmente */
    }

    /* Opcional: ajustar espaçamento entre os botões se necessário */
     .navbar-auth .btn {
         /* margin: 0 5px; Adicionar margem horizontal entre os botões */
     }
}