/* Zera margens e preenchimentos, remove decorações de texto, estilo de listas e ajusta box-sizing */
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

/* Define a fonte do corpo como "Montserrat" */
body {
  font-family: "Montserrat", sans-serif;
  background-color: #000000;
}

/* Estiliza a barra de navegação */
nav {
  background-color: rgb(0, 0, 0);
  height: 80px;
  width: 100%;
  border-bottom: 3px solid #0dff00; /* Adiciona uma borda inferior verde */
}

/* Estiliza a logo dentro do label */
label.logo {
  color: white;
  font-size: 25px;
  line-height: 130px;
  padding: 0 100px;
  font-weight: bold;
}

/* Faz o ul dentro do nav flutuar à direita */
nav ul {
  float: right;
  margin-right: 20px;
}

/* Define os itens da lista do nav ul */
nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

/* Estiliza os links dentro dos itens da lista */
nav ul li a {
  color: rgb(255, 255, 255);
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}

/* Aplica estilos ao estado hover e ativo dos links */
nav ul li a:hover,
nav ul li a.active {
  background: #5e17eb;
  transition: .5s;
}

/* Estiliza o botão do menu */
.checkbtn {
  font-size: 22px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 30px;
  cursor: pointer;
  display: none;
}

/* Oculta o input checkbox */
#check {
  display: none;
}

/* Estilos para telas menores que 1050px */
@media (max-width: 1050px) {
  label.logo {
    padding-left: 30px;
  }
  nav ul li a {
    font-size: 16px;
  }
}

/* Estilos para telas menores que 991px */
@media (max-width: 991px) {
  nav ul li a {
    color: rgb(255, 255, 255); /* Mantém a cor dos links */
    font-size: 17px; /* Mantém o tamanho da fonte dos links */
  }
}

/* Estilos para telas menores que 890px */
@media (max-width: 890px) {
  .checkbtn {
    display: block;
  }
  label.logo {
    font-size: 22px;
  }
  ul {
    z-index: 2;
    width: 100%;
    height: 100vh;
    background: #000000;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
    overflow: hidden; /* Esconde a rolagem do ul */
  }
  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a {
    z-index: 21;
    font-size: 20px;
  }
  nav ul li a:hover,
  nav ul li a.active {
    background: none;
    color: #00ff26; /* Define a cor para hover e active */
  }
  #check:checked~ul {
    left: 0;
  }
}

/* Estilos para telas menores que 936px */
@media (max-width: 936px) {
  nav ul {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  nav ul li {
    width: 100%;
    text-align: center;
  }
  .checkbtn {
    display: block;
  }
  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #000000;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
    overflow: hidden; /* Esconde a rolagem do ul */
  }
  #check:checked~ul {
    left: 0;
  }
}

/* Estilos para telas menores que 320px */
@media (max-width: 320px) {
  label.logo {
    padding: 0 10px; /* Reduz o padding para evitar que o gif saia da header */
  }
}




/* --------------------------------------- FOOTER ----------------------------------*/

/* Estilo do footer */
footer {
  background-color: #1b1b1b;
  color: #ffffff;
  text-align: center;
  padding: 20px 0;
  position: relative;
  bottom: 0;
  width: 100%;
  border-top: 3px solid #0dff00;
}
/* Estilo para os links dentro do footer */
footer a {
  color: white; /* Cor dos links será branca */
  text-decoration: none; /* Remove o sublinhado padrão dos links */
  transition: color 0.3s; /* Transição suave para a mudança de cor */
}

footer a:hover {
  color: #28a745; /* Cor verde quando o mouse passa sobre o link */
}

/* Estilo para os ícones das redes sociais */
.social-icons a {
  margin: 0 10px;
  font-size: 24px;
  color: white; /* Ícones também serão brancos */
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #28a745; /* Cor verde para os ícones quando passar o mouse */
}

footer p {
  margin: 0;
  font-size: 14px;
  font-weight: bold; /* Deixa o texto mais destacado */
}

/* Estilo dos ícones sociais */
footer .social-icons {
  margin-bottom: 10px;
}

footer .social-icons a {
  color: #ffffff; /* Cor original */
  margin: 0 10px;
  font-size: 18px;
  transition: color 0.3s;
}

footer .social-icons a:hover {
  color: #0dff00;
}

@media (max-width: 600px) {
  footer {
    padding: 8px 0;
  }

  footer p {
    font-size: 12px;
  }

  footer .social-icons a {
    margin: 0 5px;
    font-size: 16px;
  }
}



 @keyframes girarLogo {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  
    .logo img {
      animation: girarLogo 4s linear infinite; /* 4s para uma rotação completa, ajuste conforme necessário */
    }