header{
    display: flex;
    flex-direction: row;
    height: 16vh;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
#open-menu {
    width: 35px;
    height: 24px;
    margin-right: 4%
}


.menu {
    display: flex;
    flex-direction: column;
    background-color: #1B4A78;
    width: 100vw;
    height: 40vh;
    position: fixed;
    top: 0;
    left: 100%;
    justify-content: center;
    padding-left: 5%;
    transition: left 0.5s ease-in-out;
}

.menu.show {
    left: 0; /* Move para a posição visível */
}




.menu a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 120%;
    margin-top: 1%;
}
.menu button {
    background: none;
    border: none;
    text-align: start;
    font-size: 120%;
    text-transform: uppercase;
    margin-top: 1%;
}
#login {
    color: #4DB0DF;
}
#profissional {
    color: #91BA39;
}
.close-menu {
    width: 100%;
    display: flex;
    justify-content: end;
    padding-right: 2%;
}


@media (min-width: 840px) {
    header{
    display: flex;
    flex-direction: row;
    height: 20vh;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: inherit;
}
    #open-menu {
        display: none;
    }
    .close-menu {
        display: none;
    }
    .menu {
        display: flex;
        flex-direction: row;
        background-color: #fff;
        width: 90%;
        height: 100%;
        position: inherit;
        left: 0;
        justify-content: space-evenly;
        align-items: center;
        padding-left: 0;
    }
    .menu a {
        color: #5B5B5B;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 110%;
        margin-top: 1%;
        transition: color .2s;
        transition: font-weight .2s;
    }
    .menu a:hover {
        color: #1B4A78;
        font-weight: bold;
        transition: color .2s;
        transition: font-weight .2s;
    }
    .menu button {
        border: none;
        text-align: center;
        font-size: 100%;
        text-transform: uppercase;
        color: #fff;
        border-radius: 36px;
        cursor: pointer;
    }
    .menu button:hover {
        
    }
    #login {
        background-color: #1B4A78;
        width: 16%;
        height: 40%;
        color: #fff;
        transition: background-color .2s;
    }
    #login:hover {
        background-color: #2A5C8C;
        transition: background-color .2s;
    }
    #profissional {
        background-color: #91BA39;
        width: 20%;
        height: 40%;
        color: #fff;
        transition: background-color .2s;
    }
    #profissional:hover {
        background-color: #A2C94A;
        transition: background-color .2s;
    }
    #logo {
        width: 150px;
    }
}