/* Estilos gerais do header */
header {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 2%;
  min-height: 150px;
  width: 100%; 
  background-color: var(--cor-1);
  transition: all 0.7s;
}

/* Estilo para header com scroll */
#header.scrollHide {
  min-height: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 1% 2%; /* Reduz o padding quando estiver fixo */
  z-index: 1000;
  transition: all 0.7s;
}

/* Estilos para logo */
header img {
  max-width: 30vw; /* Limita a largura da imagem */
  width: auto;
  height: auto;
  transition: all 0.7s;
}

/* Logo quando scroll é aplicado */
#logo.scrollHide {
  max-width: 25vw; /* Reduz o tamanho do logo ao scrollar */
  transition: all 0.7s;
}

/* Estilos para o menu de navegação */
header nav ul {
  display: flex;
  list-style: none;
  text-transform: uppercase;
}

header nav li:hover {
  transition: background-color 1s ease, transform 0.3s ease;
  scale: 1.02;
}

header nav ul li a {
  display: flex;
  border-radius: 4px;
  transition: background-color var(--transition-duration);
  padding: 5px;
  margin: 2px;
  color: #ffffff;
  background-color: var(--cor-2);
  justify-content: center;
  font-size: 1.1em;
}

/* Estilos para dispositivos móveis */
@media only screen and (min-width: 0px) and (max-width: 768px) {
  /* Menu responsivo */
  .menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    width: 80%;
  }

  .menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    flex-direction: column;
  }

  .menu.show {
    max-height: 200px; 
  }

  /* Header para telas pequenas */
  header {
    min-height: 100px;
    flex-direction: column;
    transition: all 0.3s ease;
  }

  header section {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  /* Imagem do logo para telas menores */
  header img {
    width: 80vw;
    max-width: 100vw; /* Limita a largura da imagem */

    height: auto;
    align-items: center;
  }

  /* Ícone de menu responsivo */
  .icon-toggle-menu i {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--cor-2);
    font-size: 6vw;
  }

  #header.scrollHide {
    padding: 2%; /* Reduz o padding quando estiver fixo */
  }

  /* Logo quando scroll é aplicado */
  #logo.scrollHide {
    max-width: 70vw; /* Reduz o tamanho do logo ao scrollar */
  }
}