html {
    scroll-behavior: smooth;
}

/* MENU */
header {
    background-color: #022d36;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    position: relative;
    overflow: hidden; /* Evita barras de rolagem indesejadas */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
    z-index: 1000; /* Mantém o menu sempre acima dos outros elementos */
}

/* LOGO - MENU */
.menu-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

img.menu-logo-img {
    width: 100px;
    height: auto;
    margin-left: 10px;
}

img.menu-logotipo-img {
    margin-top: 15px;
    width: 250px;
    height: auto;
}

/* LISTA - MENU */
/* Cuidado com seletores globais como 'li, a' porque afetam o site inteiro. 
   Se quiser aplicar só no menu, use .menu-links a, .menu-links li */
.menu-links {
    list-style: none;
    display: flex;
    flex-wrap: nowrap; /* IMPEDE que os itens caiam para a linha de baixo */
    white-space: nowrap; /* Garante que o texto de cada item não quebre */
    
    /* Centralização perfeita sem position absolute agressivo */
    position: absolute;
    left: 55%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    align-items: center;
}

.menu-links li {
    display: inline-block;
    padding: 0px 20px; /* Ajuste o espaçamento lateral se quiser */
    margin: 0;
}

.menu-links li a {
    font-size: 24px;
    color: #EBB367;
    text-decoration: none;
    font-family: 'glacial indifference', sans-serif;
    
    /* ADIÇÕES NECESSÁRIAS PARA O SUBLINHADO */
    padding-bottom: 7px; /* Cria um pequeno respiro entre o texto e a linha */
    position: relative;  /* Necessário para posicionar a linha em relação ao link */
}

.menu-links li a:hover {
    color: #F1DEC1;
}

/* Efeito da linha (sublinhado animado) */
.menu-links li a:not(.btn-entrar)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #F1DEC1;
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Quando o mouse passa por cima OU quando o item estiver ativo */
.menu-links li a:hover::after,
.menu-links li a.ativo::after {
    width: 100%; /* A linha cresce ocupando toda a largura do texto */
}

.menu-links li a.btn-entrar {
    background-color: #EBB367; /* Cor de fundo do botão */
    color: #022d36;            /* Cor do texto dentro do botão */
    padding: 10px 40px;         /* Espaçamento interno (altura e largura) */
    border-radius: 40px;        /* Bordas arredondadas */
    transition: all 0.3s ease; /* Transição suave para o efeito de hover */
    font-weight: bold;
}

/* Efeito ao passar o mouse sobre o botão */
.menu-links li a.btn-entrar:hover {
    background-color: #F1DEC1; /* Nova cor de fundo ao passar o mouse */
    color: #022d36;            /* Mantém a cor do texto legível */
}

/* INÍCIO */
.inicio {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
}

/* BANNER - INÍCIO */
.banner-img {
    width: 100%; 
    max-width: 1200px; 
    height: auto; 
    display: block;
    margin-top: 10%;
   
    }
/* BOTÕES */
.botoes{
    background-image: url(imagens/fundo.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 500px;
}
/* VAGAS */
/* EMPRESAS */
/* SOBRE */
/* ENTRAR */
/* RODAPÉ */