@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
.hide-menu{
    transform: scale(0,0);
    transform-origin: right;
    transition: transform .5s ease-in-out;
}
.show-menu{
    transform: scale(1, 1);
    transform-origin: right;
    transition: transform .5s ease-in-out;
}
div#mobile-nav{
    z-index: 9999;
    width: 100%;
    height: 100vh;
    background-color: rgba(20, 20, 20, 1);
    position: fixed;
    display: flex;
    justify-content: center;
    padding-block: 1.2rem;
    overflow: scroll;
}
#mobile-nav-div{
    width: 65%;
}
#mobile-nav ul{
    list-style: none;
    margin-block-start: 1.5rem;
}
#mobile-nav-div  a{
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    padding: .5rem;
    font-weight: 500;
    font-size: 1rem;
    font-family: "Inter", serif;
}
#mobile-nav-div i{
    color: red;
}
#mobile-submenu-ul{
    background: #646464;
    display: none;
}
#mobile-menu{
    display: none;
}
#close-menu{
    font-size: 1.5rem;
    text-align: right;
    display: inline-block;
    width: 100%;
    color: #ffffff;
}
#mobile-menu-up{
    display: none;
}

#navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 8rem;
    background-color: #ffffff;
}
#navbar img{
    width: 120px;
}
#navbar ul{
    display: flex;
    gap: 1.25rem;
    list-style: none;
}
#navbar a{
    text-decoration: none;
    color: black;
    font-family: "DM Sans", sans-serif;
    font-size: .85rem;
}
@media screen and (max-width: 598px) {
    #navbar{
        display: none;
    }

    #mobile-menu{
        color: var(--dark-blue);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1.5rem;
        margin-top: -15px;
        z-index: 99999;
        padding: 1.5rem;
    }
    #mobile-menu i{
        color: red;
        font-size: 1.35rem;
    }
}