/*----------------------------------
 nav-shoping
----------------------------------*/
.nav-shoping ul {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
}

.nav-shoping ul li {
    padding: 5px 4px;
}

.nav-shoping ul li a {
    text-align: center;
    display: flex;
    align-items: center;
    height: 37px;
}

.nav-shoping ul li a span {
    height: 100%;
    display: flex;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    font-family: javan;
    background-color: #e7eaef;
    border-left: 1px solid #ffffff;
    color: #505050;
    font-size: 18px;
}

.nav-shoping ul li a i {
    width: 30px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d4d9e1;
    border-right: 1px solid #b4becd;
    color: #f6faff;
    font-size: 17px;
}

.nav-shoping ul li a:hover span,
.nav-shoping ul li a:hover i {
    color: #8945d1;
}

/*----------------------------------
 ریسپانسیو 
----------------------------------*/
@media screen and (max-width: 799px) {
    .nav-shoping {
        margin-bottom: 20px;
    }

    .nav-shoping ul li a {
        height: 40px;
    }

    .nav-shoping ul li a span {
        font-size: 20px;
        background-color: #eaedf3;
        border: 1px solid #f8f9fb;
        color: #3d3d6d;
        border-radius: 18px;
    }

    .nav-shoping ul li a i {
        display: none;
    }
}

/*----------------------------------
 انتخاب نمایش منو در موبایل و سیستم
----------------------------------*/
@media screen and (min-width: 1024px) {
    ul.Mo-ON {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    ul.Pc-ON {
        display: none;
    }
}