.menu-main {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 40px;
    left: 0px;
    box-sizing: border-box;
}




.mobile-menu {
    position: relative;
    display:none;
    text-indent: -9999px;
    width: 33px;
    height: 26px;
    
    box-sizing: border-box;
}

.mobile-menu:hover {
    cursor: pointer;
}
.mobile-menu .lines { 
    position: absolute;
    top: 50%;
    display: block;
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 2px;
}
.mobile-menu .lines::before { 
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;
    background-color: white;
    top: -11px;
    transition: all 0.4s;
    border-radius: 2px;
}
.mobile-menu .lines::after { 
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;
    background-color: white;
    top: 10px;
    transition: all 0.4s;
    border-radius: 2px;
}



.mobile-menu.-open{
    display: block;
    z-index: 2;
}
.mobile-menu.-open .lines { 
    background-color: transparent;
}
.mobile-menu.-open .lines::after { 
    transition: all 0.4s;
    transform: rotate(-45deg) translate(8px, -8px);
    
}
.mobile-menu.-open .lines::before { 
    transform: rotate(45deg) translate(7px, 7px);
}


@media screen and (max-width: 970px) {
    .menu-main {
        position: absolute;
        top: 70px;
        left: -105%;
        display: flex;
        border-radius: 0 0 20px 20px;
        background-color: #101026;
        text-align: center;
        flex-direction: column;
        z-index: 3;
        padding: 20px 0;
        gap: 30px;
        transition: 0.3s;    
    }
    .menu-main.-open {    
        left: 0; 
    }
    .mobile-menu {
        display: block;
    }
    .menu-main .wrapper-dropdown {
        position: relative;
        right: auto;
    }
}