* {
    margin: 0;
    /* Remove margens padrão */
    padding: 0;
    /* Remove padding padrão */
    font-family: sans-serif;
    /* Fonte padrão */
}

header {
    display: flex;
    /* Flex para colocar logo, menu e botão lado a lado */
    align-items: center;
    /* Centraliza verticalmente */
    justify-content: space-between;
    /* Espaço entre logo, menu e botão */
    background-color: transparent;
    /* Fundo transparente */
    border: 1px solid #222222;
    /* Fundo escuro */
    padding: 10px 20px;
    /* Espaçamento interno */
    border-radius: 10px;
    /* Cantos arredondados */
    margin: 20px;
    /* Margem externa */
}

.navbar-logo img {
    width: 50px;
    /* Tamanho da logo */
    height: auto;
    /* Altura proporcional (automática) */
     border-radius: 8px;
    /* Cantos arredondados */
    padding: 8px;
    /* Espaço interno do botão */
}

.navbar-menu {
    display: flex;
    /* Coloca os itens de menu em linha (horizontais) */
    list-style: none;
    /* Remove os marcadores da lista */
    gap: 20px;
    /* Espaçamento horizontal entre os itens do menu */
    padding: 0;
    /* Remove padding padrão da lista */
    margin: 0;
    /* Remove margem padrão da lista */
}

.navbar-menu li a {
    text-decoration: none;
    /* Remove sublinhado dos links */
    color: rgb(187, 187, 187);
    /* Cor do texto do link */
    font-weight: bold;
    /* Texto em negrito */
    transition: color 0.2s ease;
    /* Animação suave ao mudar de cor no hover */
}

.navbar-menu li a:hover {
    color: #ffffff;
    /* Muda para azul ao passar o mouse */
}

.downloads-github {
    background-color: #3f3f3f;
    /* Fundo cinza escuro */
    padding: 2px 6px;
    /* Espaço interno do botão */
    border-radius: 45px;
    /* Cantos arredondados */
    display: flex;
    /* Flex para colocar ícone e texto lado a lado */
    align-items: center;
    /* Centraliza verticalmente */
    gap: 3px;
    /* Espaço entre ícone e texto */
    margin-left: 8px; 
    /* Aproxima do botão GitHub */
}

.downloads-github i {
    color: rgb(187, 187, 187);
    /* Cor do ícone */
    font-size: 15px;
    /* Tamanho do ícone */
    margin-right: -4px;
    /* Espaço negativo para aproximar do texto */
}

.downloads-github a {
    color: rgb(187, 187, 187);
    /* Cor do texto do link */
    font-size: 11px;
    /* Tamanho do texto */
    padding: 2px 6px;
    /* Espaço interno do botão */
    text-decoration: none;
    /* Remove sublinhado do link */
}

.downloads-github a:hover,
.downloads-github i:hover {
    color: #ffffff;
    /* Muda para azul ao passar o mouse */
}

.navbar-menu li i.fa-star {
    font-size: 10px;
    /* Tamanho do ícone */
}

.navbar-ling {
    background-color: transparent;
    /* Fundo transparente */
    border: 1px solid #333;
    /* Borda cinza escura */
    padding: 8px;
    /* Espaço interno do botão */
    border-radius: 8px;
    /* Cantos arredondados */
    cursor: pointer;
    /* Cursor tipo "mãozinha" ao passar o mouse */
    color: #ffffff;
    /* Cor do texto */
    ;
}

.navbar-ling i {
    color: white; 
    /* Cor do ícone */
    font-size: 18px; 
    /* Tamanho do ícone */
}

.navbar-center {
  display: flex;
    /* Flex para colocar logo, menu e botão lado a lado */
  align-items: center;
    /* Centraliza verticalmente */
  gap: 16px; /* Espaço entre menu e estrelas */
}

.navbar-menu li {
    display: flex;
    /* Coloca estrela e número lado a lado */
    align-items: center;
    /* Centraliza verticalmente */
}
/* Aumenta a imagem principal do Hydra */
.hydra-image-container {
    max-width: auto;
    /* Ajuste conforme necessário */
    margin: 0 auto;
    /* Centraliza horizontalmente */
}

.hydra-image {
    width: 100%;
    /* Ocupa toda a largura do container */
    height: auto;
    /* Mantém proporção */
    display: block;
    /* Remove espaço extra abaixo da imagem */
}


/* Estilos adicionais para o footer */
footer {
  background-color: #000;
    /* Fundo preto */

}

footer .bg-gradient-to-r {
  background-size: 100% 1px;
  /* Tamanho do gradiente */
  background-position: 0 0;
    /* Posição do gradiente */
  background-repeat: no-repeat;
    /* Não repetir o gradiente */
}

footer .bg-teal-900\/30 {
  background-color: rgba(19, 78, 74, 0.3);
    /* Cor de fundo com opacidade */
  background-image: radial-gradient(rgba(20, 184, 166, 0.1) 1px, transparent 1px);
    /* Gradiente radial */
  background-size: 20px 20px;
    /* Tamanho do gradiente */
}

footer .rounded-lg {
  border-radius: 12px;
    /* Cantos arredondados */
}
/* Estilos para o conteúdo do footer */
@media (max-width: 768px) {
  footer .flex-col {
    align-items: center;
    /* Centraliza os itens verticalmente */
    text-align: center;
    /* Centraliza o texto */
  }
  
  footer .grid {
    width: 100%;
    /* Largura total */
    text-align: center;
    /* Centraliza o texto */
  }
}