/* Cabeçalho */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0a1e33;
  padding: 10px 20px;
  color: #fff;
}

header .logo img {
  height: 100px;
  margin-right: -50px;
}

header nav ul {
  display: flex;
  list-style: none;
  gap: 15px;
}

header nav ul li a {
  color: #fff;
  font-weight: bold;
}

header .menu-btn {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Responsividade */
/* Menu na versão mobile */
@media (max-width: 768px) {
  header nav ul {
    flex-direction: column; /* Coloca os itens em coluna */
    display: none; /* Esconde o menu inicialmente */
    width: 100%; /* Garante que o menu ocupe toda a largura */
    margin: 0; /* Remove margens */
    padding: 0; /* Remove o padding */
    text-align: center; /* Centraliza os itens */
  }

  header nav ul li {
    font-size: 1.1rem; /* Ajusta o tamanho da fonte */
    width: 100%; /* Garante que cada item ocupe toda a largura disponível */
    padding: 10px 0; /* Espaçamento vertical */
  }

  header .menu-btn {
    display: block; /* Exibe o botão do menu */
    font-size: 2rem; /* Aumenta o tamanho do botão para ser visível */
    cursor: pointer; /* Deixa o botão clicável */
  }

  /* Quando o menu estiver aberto */
  header.active nav ul {
    display: flex; /* Exibe o menu */
  }

  /* Ajusta o logo para tela pequena */
  header .logo img {
    height: 100px; /* Ajusta a altura do logo */
    margin-right: 0; /* Remove a margem do logo */
  }
}

/* Menu em dispositivos muito pequenos (exemplo: abaixo de 480px) */
@media (max-width: 480px) {
  header nav ul li {
    font-size: 1rem; /* Diminui o tamanho da fonte ainda mais */
    padding: 8px 0; /* Reduz o espaçamento entre os itens */
  }

  header .menu-btn {
    font-size: 1.8rem; /* Tamanho do ícone de menu reduzido */
  }
}