.nav-bar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px 5px 15px;
    width: 100%;
   position: absolute;
   z-index: 10;
   
}


.nav-list{
    text-decoration: none;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 50px;
    font-family: "Poppins";
    font-size: 1rem;
    font-weight: bold;
    width: 100%;

}


#nav_home, #nav_aluguel, #nav_anuncio, #nav_oportunidade, #nav_quemSomos, #nav_politica {
    color: var(--cor-c5);
    transition: color 0.5s;
    text-decoration: none;
}

#nav_home:hover, #nav_aluguel:hover, #nav_anuncio:hover, #nav_oportunidade:hover, #nav_quemSomos:hover, #nav_politica:hover{
   color: var(--cor-c4);
    
}

.dimensionar_logo{
    width: 8%;
    height: 8%;
    margin: 10px 50px 0px 15px;
}
#logo{
    width:clamp(100%, 2vw, 2vw);
}


.botao-mobile{
 display: none;
 flex-direction: column;
}

#hamburguer{
    font-size: 32px;
    width: 100px; 
    height: 32px;
    cursor: pointer;
    background:none;
    border: none;
    color: var(--cor-c4);
}

.nav-list-mobile{
    display: none;
    text-decoration: none;
    list-style: none;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 12px 0px;
    font-family: "Poppins";
    font-size: 18 px;
    font-weight: bold;
    width: 100%;
    color: var(--cor-c5);
    background-color:var(--cor-c4) ;
 
}

@media screen and (max-width: 768px){

    .nav-bar{
        display: flex;
        flex-direction:row;
        position: relative;
        background: linear-gradient(to bottom, var(--cor-c1), var(--cor-c3));        
    }

    #logo{
        width:clamp(80px, 2vw, 2vw);
    }
    .nav-list{
        display: none;
    }


.nav-list-mobile {
    display: none; 
    flex-direction: column;
    position: absolute;
    top: 100px; /* ajuste conforme seu header */
    right: 0px;
    background-color: var(--cor-c3);
    padding: 10px;
    border-radius: 8px;
}

.nav-list-mobile.ativo {
    display: flex; /* mostra quando a classe ativo for adicionada */
}
    
    .botao-mobile{
        display: block;
        flex-direction: row;
       }

}