#menu-mobile{
    display: none;
}

@media (max-width:820px){

    #menu-mobile{
        display: block;
        font-size: 1.75rem;
        color: var(--texto);
        margin-left:5px;
        margin-right: 20px;
        cursor: pointer;
    }

   /*codigo para abrir o menu mobile*/

    header.active .nav-bar{
        opacity:1;
        visibility: visible;
        pointer-events: auto;
    }


    header .nav-bar{
        position: absolute;
        top: 5em;
        right: 0;
        background-color:var(--fundo);
        width: 30%;
        padding: 20px 25px ;
        border-left:2px solid var(--color-secondary);
        border-bottom: 2px solid var(--color-secondary);
        border-radius: 0 0 0 20px;
        opacity:0;
        visibility: hidden;
        pointer-events: none;
        transition:opacity 0.45s ease-in-out, visibility 0.45s ease-in-out;
    }

    .nav-bar ul {
        display: flex;
        flex-direction: column;
        width:100%;
        gap: 18px;
        text-align:right;
        color:var(--texto);
    }
}