/* Estilo global */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Botão de abrir o menu (visível apenas no mobile) */
.abrir-menu {
  display: none;
 
  
  font-size: 24px;
  color: black;
  margin: 0 0px;  /* Diminuído para mover um pouco à esquerda */
  cursor: pointer;
  background: none;
  border: none;
  position: relative;
  top: -10px;
  left: 200px; /* Move o botão um pouco para a esquerda */
  transition: background 0.3s ease, color 0.3s ease;
}

/* Efeito hover */
.abrir-menu:hover {
  background: rgba(0, 234, 255, 0.5); /* Fundo preto claro translúcido */
  color: white; /* Muda a cor do texto para branco */
  border-radius: 2px;
  padding: 0px 0px; /* Ajuste para cobrir melhor a área do botão */
}




@media (max-width: 768px) {
  .abrir-menu {
    display: block;
    position: relative;
    left: 0; /* remove deslocamento lateral */
    margin: 0 auto; /* centraliza horizontalmente */
    top: -5px; /* ajuste fino se necessário */
    text-align: center;
  }
}






.categoria-destaque {
  display: block; /* Faz com que ocupe toda a largura */
  background-color: #215373; /* Cor de fundo amarela para destaque */
  color: #fff; /* Texto branco */
  padding: 10px; /* Espaçamento interno */
  margin-top: 5px; /* Espaçamento entre categorias */
  text-align: center; /* Centralizar o texto */
  font-size: 16px; /* Tamanho da fonte */
  font-weight: bold; /* Negrito */
  border-radius: 0px; /* Bordas arredondadas */
}



@media (max-width: 768px) {
  .logo-canva {
  margin-top: -40px; /* Sobe um pouco o slide */
    width: 110px; /* Reduz o tamanho da logo em telas menores */
 
  
  }
}

@media (max-width: 480px) {
  .logo-canva {
    width: 110px; /* Ajusta ainda mais para dispositivos móveis */
  }
}







/* Menu Lateral (Mobile) */
.menu-lateral {
  height: 100%;
  width: 0; /* Menu começa escondido com largura 0 */
  position: fixed;
  top: 0;
  left: 0;
  background-color: #0075A0;
  overflow-y: auto;
  transition: width 0.3s ease; /* Transição suave para aumentar a largura */
  padding-top: 60px;
  z-index: 1000;
}




.menu-lateral ul {
  list-style-type: none;
 
  padding: 0;
}

.menu-lateral a {
  color: white;
  
  padding: 8px 16px;
  
  text-decoration: none;
  display: block;
  transition: 0.3s;
}

.menu-lateral a:hover {
  background-color: #00eaff;
}

/* Item ativo destacado */
.menu-lateral a.ativo {
  background-color: #00eaff; /* Azul de destaque */

  color: white;
}

/* Fechar menu lateral */
.fechar-menu {
  position: absolute;
  top: 0px;
  right: 0px;
 
  font-size: 26px;
  color: white;
  background: rgba(0, 0, 0, 0.0); /* Fundo preto com 50% de transparência */
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 5px;
  transition: background 0.3s ease, transform 0.2s ease;
}

/* Efeito hover */
.fechar-menu:hover {
  background: rgba(255, 0, 0, 0.0); /* Vermelho com 70% de transparência */
  transform: scale(1.1); /* Aumenta ligeiramente o botão */
}



/* Submenu */
.dropdown {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #0075A0;
  list-style-type: none;
  padding: 0;
  margin: 0;
  min-width: 160px;
  z-index: 999;
}

/* Exibir submenu ao passar o mouse */
.dropdown:hover > .submenu {
  display: block;
}

.dropdown .submenu .submenu {
  top: 0;
  left: 160px; /* Alinha o submenu em cascata à direita */
}

/* Responsividade */
@media (max-width: 768px) {
  .abrir-menu {
    display: block;
  }

  .menu-topo {
    display: none;
  }

  .submenu {
    position: static;
  }
}

@media (min-width: 769px) {
  .menu-lateral {
    display: none;
	
  }

  .menu-topo {
    display: flex;
  }
}







/* Linha mais fina usando transparência */
ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Preto com 20% de opacidade */
}

/* Linha mais fina para os itens do submenu */
.submenu a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Remove a linha do último item do menu principal e submenu */
ul li:last-child,
.submenu a:last-child {
  border-bottom: none;
}

/* Estilo das categorias */
.categoria-destaque {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}