/* Navi Bar */

.navbar .container {
    padding-left: 20px;  
    padding-right: 20px; 
}

.navbar .container.scrolled {
    padding-left: 20px;  
    padding-right: 20px; 
}
.navbar-brand.scrolled {
    margin-right: 20px; 
}
.navbar-brand {
    margin-right: 20px; 
}

.navbar-brand img {
    margin-right: 20px; 
}

.navbar-brand:nth-child(1) img {
    content: url('../images/icons/logogold.png'); 
   
}

.navbar-brand.scrolled:nth-child(1) img {
    content: url('../images/icons/logoblue.png'); 
   
}


.navbar-brand:nth-child(1):hover img  {
    content: url('../images/icons/logoblue.png'); 
    transform: scale(1.2); 
    text-decoration: none; 
}



.navbar-brand.scrolled:nth-child(1):hover img  {
    content: url('../images/icons/logogold.png'); 
    transform: scale(1.2); 
    text-decoration: none; 
}


@keyframes social-pulse {
    0% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.15); 
        opacity: 0.8;
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}


.navbar {
   
    background: rgba(255, 255, 255, 0);
    padding: 15px 0; /* Padding ajustado */
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    transition: all 0.4s ease;
    
}

/* Quando a página for rolada, a navbar fica branca */
.navbar.scrolled {
    background: rgb(255, 255, 255) !important;
    padding: 8px 0; /* Padding ajustado */
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    transition: all 0.4s ease;
}

/* Ajustando as cores dos textos */
.navbar .nav-link {
    color: #c59161 !important; /* Texto padrão: branco */
    transition: color 0.4s ease;
}

.navbar.scrolled .nav-link {
    color: #1b134a !important; /* Texto escuro quando navbar branca */
}
.navbar.scrolled .nav-link:hover {
    color: #c59161 !important; /* Texto escuro quando navbar branca */
}
/* Linhas laterais e entre os itens (apenas no desktop) */


/* Melhorias no Mobile */
@media (max-width: 991px) {
    .navbar-nav {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-left: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }
.navbar-nav::before,
    .navbar-nav::after,
    .nav-item:not(:last-child)::after {
        display: none; /* Removendo as linhas no mobile */
    }
    

    .navbar-collapse {
        text-align: center;
        background: rgba(255, 255, 255, 0.9); /* Fundo branco sutil para melhor legibilidade */
     
        
    }

    .nav-item {
        width: 100%;
        text-align: center;
    }

    .nav-link {
        width: 100%;
        padding: 12px 15px !important;
        font-size: 16px;
    }

    .navbar-toggler {
        border: none;
        outline: none;
    }

    .navbar-toggler-icon {
        width: 25px;
        height: 25px;
    }
}



/* Quando navbar estiver branca, as linhas ficam escuras */


.navbar-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0; 
    position: relative;
}




.navbar-nav::before {
    left: 0px;
}


.navbar-nav::after {
    right: 0px;
}


.nav-item {
    
    position: relative;
    padding: 0 15px;
}


.nav-link {
    position: relative;
    color: #1b134a !important;
    font-weight: 500;
    padding: 15px 15px !important;
    transition: all 0.3s ease;
}

.nav-item:hover {
    color: #1b134a !important;
    
}

.nav-link:hover {
    color: #1b134a !important;
    background-color: transparent;
}

@media (max-width: 991px) {
    .navbar-nav {
        flex-direction: column; /* Empilha os itens no menu colapsável */
        align-items: flex-start;
        margin-left: 0; /* Remove o deslocamento para a direita */
    }

    .navbar-nav::before,
    .navbar-nav::after {
        display: none; /* Remove as linhas verticais em telas pequenas */
    }

  

    .navbar-collapse {
        text-align: right; /* Alinha o conteúdo para a direita no menu colapsável */
    }
}


.btn-join {
    background: #c59161;
    color: #fff !important;
    border-radius: 5px;
    padding: 10px 25px !important;
    margin-left: 15px;
    transition: all 0.3s ease;
}

.btn-join.scrolled {
    border: none;
    outline: none;
    background-color: #1b134a;
    color: white !important;
   
  
    border-radius: 5px;
   
    transition: all 0.3s ease;
}
.btn-join.scrolled:hover {
    background-color: #a87548;
}



.btn-join:hover {
    background: #1b134a;
    color: #fff !important;
}