.mobile-nav{
    position: fixed;
    left: -300px;
    width: 100%;
    min-width: 200px;
    max-width: 300px;
    height: 100vh;
    z-index: 4000;
    background: var(--color-light);
    transition: 0.5s all;
}

.mobile-nav.active{
    left: 0;
}

.mobile-nav .nav-menu-mobile{
    width: 100%;
}


.mobile-nav .nav-menu-mobile .nav-menu__item_catalog a{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav .nav-menu-mobile a{
    display: flex;
    padding: 15px 15px;
    width: 100%;
}

.mobile-nav .nav-menu-mobile li .menu-arrow{
    cursor: pointer;
}


.mobile-nav .nav-menu-mobile>li:hover,
.mobile-nav .nav-menu-mobile a:hover{
    background: var(--color-primary-hover);
}


.mobile-nav .nav-menu-mobile>li:hover .menu-arrow,
.nav-menu__item_catalog:hover >a{
    color: var(--color-light);
}

.mobile-nav .nav-menu-mobile a:hover{
    color: var(--color-light);
}


.mobile-nav .mobile-wrapper.active{
    display: block;
}

.mobile-nav .mobile-wrapper{
    position: fixed;
    display: none;
    width: 100vw;
    left: 0;
    top: 0;
    height: 100vh;
    background: var(--color-light);
    z-index: 5000;
}

.mobile-nav .submenu-nav{
    position: relative;
    top: 0;
    display: flex;
    width: 100%;
    box-shadow: none;
}

.mobile-nav .submenu-nav:hover{
    background: none;
}

.submenu-nav.active{
    display: flex;
}

.close-catalog{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    cursor: pointer;
    background: var(--color-bg);
    color: var(--color-dark);
}
.close-catalog:hover{
    color: var(--color-light);
    background: var(--color-primary-hover);
}


.close-catalog svg{
    width: 50px;
    height: 30px;
}

.submenu-title{
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-md);
    width: 100%;
    height: var(--height-down-menu);
}

.submenu-title:hover h3{color: var(--color-dark)}