.menu {
  background-color: var(--branco-cor);
  position: fixed;
  left: 0; /*começa na borda esquerda do contêiner pai*/
  right: 0; /*começa na borda direita do contêiner pai*/
  width: 100%; /*Define a largura do elemento, 100% da largura da janela*/
  z-index: 1;
  border-bottom: 0.1rem solid var(--cinza-claro-cor);
}

.menu-principal {
  display: flex; /* organizar em uma única linha (ou coluna)*/
  justify-content: space-between; /*separa com espaços iguais entre eles*/
  align-items: center; /*centraliza no centro do contêiner. */
  padding-top: 0; /*remove o preenchimento superior */
  padding-bottom: 0; /*remove o preenchimento inferior */
}

.Logo-Studeo {
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}


.Logo-Studeo:hover {
  opacity: 0.8; /* Reduz a opacidade da imagem quando o mouse passa por cima */
}


.menu a {
  color: inherit; /* Herda a cor do texto do elemento pai (h1) */
}

.menu ul {
  list-style: none; /* Remove os marcadores padrão da lista */
  display: flex; /* Organiza os itens da lista em uma linha */
}

.menu ul li a {
  display: block; /* Define os links como elementos de bloco para ocuparem toda a largura disponível e empurrar a pagina para baixo. */
  padding: 2rem;
  font-size: 1.8rem;
  position: relative;
  color: var(--azul-cor);
  font-weight: bold; /* Deixa o texto em negrito */
}

.menu ul li a::after {
  /* Adiciona um pseudo-elemento após os links no menu */
  content: ""; /* Define o conteúdo do pseudo-elemento como vazio */
  position: absolute; /* Posiciona o pseudo-elemento absolutamente em relação ao elemento pai */
  bottom: 1rem; /* Define a distância do pseudo-elemento a partir do fundo do elemento pai */
  left: 50%; /* Define a posição horizontal inicial do pseudo-elemento como 50% do elemento pai */
  width: 0; /* Define a largura inicial do pseudo-elemento como 0 */
  height: 0.2rem; /* Define a altura do pseudo-elemento */
  background-color: var(
    --azul-cor
  ); /* Define a cor de fundo do pseudo-elemento */
  transition: all 300ms ease-in-out; /* Adiciona uma transição suave em todas as propriedades do pseudo-elemento */
}

.menu ul li a:hover::after {
  /* Define o estilo quando o mouse está sobre os links no menu */
  width: 60%; /* Aumenta a largura do pseudo-elemento quando o mouse está sobre o link */
  left: 25%; /* Move o pseudo-elemento para a esquerda quando o mouse está sobre o link */
}

.label-menu, .checkbox{
   display: none;
}