.navBar {
  background-image: url('/imgs/navbar-back.png');
  display: flex;
    list-style-type: none;
    padding: 10px 15px;
    width: fit-content;
    height: 140px;
    margin: 0 auto;
    gap: 12px;
    align-items: center;
    border: 3px solid #023047;
    border-radius: 10px;
    background-color: white;
    transition: padding 0.3s ease-in-out;
}

/* Efeito sutil na navbar inteira quando o botão home é 'hoverado' */
.navBar:has(a:hover) {
  padding-top: 14px;
  padding-bottom: 14px;  
}

/* ================================== */
/* LINKS (a) - ONDE A MÁGICA ACONTECE */
/* ================================== */
.navBar a {
  display: block; /* Faz o link se comportar como uma caixa */
  padding: 8px 12px; /* Cria uma área de clique confortável */
  text-decoration: none;
  color: black;
  border-radius: 5px; /* Borda arredondada para um visual mais suave */
  /* A transição agora é SÓ no transform e na cor */
  transition: color 0.2s ease, transform 0.2s ease;
  align-content: center;
}

/* EFEITO DE HOVER NOS LINKS DE TEXTO */
.navBar a:hover {
  transform: translateY(-5px) scale(1.3) ; /* Movendo para cima e escalando com transform */
   display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #2d4c5d;
    border-radius: 5px;
    transition: color 0.2s ease, transform 0.2s ease;
    align-content: center;
    text-shadow: 0px 1px 0px #eceff4, 0px 1px 2px #f2f2f2, 0px 4px 0px #48b4e7;
}

/* Estilo para a barra de navegação mobile */
.navbar_mobile {
  display: none;
  width: 95%;
  margin-bottom: 5px;
  margin: 20px 20px auto;
  padding: 20px;
  background-color: #313030;
  position: absolute;
  top: -20px;
  left: -20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Estilo para o botão hamburger */
.hamburger-btn {
  width: 24px;
  height: 24px;
  background-color: transparent;
  background-image: url("../imgs/menu_icon.png");
  border: none;
  color: black; /* Ícone branco para contrastar com o fundo escuro */
  font-size: 24px; /* Tamanho do ícone */
  cursor: pointer;
  padding: 5px;
}

.hamburger-btn:hover {
  color: #fcbf49; /* Efeito ao passar o mouse */
}

/* O container do menu dropdown (escondido por padrão) */
.dropdown-content {
  display: none; /* Esconde o menu por padrão */
  position: absolute; /* Posição relativa à navbar */
  top: 100%; /* Aparece logo abaixo da navbar */
  left: 0;
  background-color: #e3e3d9;
  width: 100%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* Garante que o conteúdo não vaze */
}

/* Estilo dos links dentro do dropdown */
.dropdown-content a {
  color: #658393;
  padding: 14px 20px;
  text-decoration: none;
  display: block; /* Faz com que o link ocupe toda a largura */
  text-align: left;
  border-bottom: 1px solid #313030; /* Linha sutil para separar os links */
}

/* Efeito ao passar o mouse sobre os links */
.dropdown-content a:hover {
  background-color: #658393;
  color: white;
}

/* Remove a borda do último link */
.dropdown-content a:last-child {
  border-bottom: none;
}

/* Classe 'show' que será adicionada/removida pelo JavaScript */
.dropdown-content.show {
  display: block; /* Mostra o menu */
}

.navbar_textos{
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  display: flex;
  margin: auto;
  justify-content: center;
  background-color: #3bdf3b;
  width: fit-content;
  border: 5px solid #1cb01c;
  box-shadow: 0px 0px 15px 5px #a1fb83;
  padding: 5px;
  margin-bottom: 10px;
}

.navbar_textos a{
  text-decoration-line: none;
  color: black;
  padding: 15px;
  
}

/* ==== Responsividade ==== */
@media (max-width: 768px) {
  
  .navbar_mobile{
  display: block ;
  }
  
  .navBar{
    display: none ;
  }
  
  
}