/*==================================================
    MIRSOFT MEGA MENU
==================================================*/

.ms-nav{
    position:relative;
    width:100%;
    padding-right: 35px;
    padding-left: 35px;
}

/*==========================
LEVEL1
==========================*/

.ms-menu{
    display:flex;
    align-items:center;
    margin:0;
    padding:0;
    list-style:none;
}

.ms-item{
    position:static;
}

.ms-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 58px;
    padding: 0px 9px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: .25s;
}

.ms-link:hover{

    color:#fff;

    text-decoration:none;

}

.ms-link:after{

    content:"";

    position:absolute;

    right:16px;

    left:16px;

    bottom:10px;

    height:3px;

    border-radius:50px;

    background:#fff;

    transform:scaleX(0);

    transition:.25s;

}

.ms-item:hover .ms-link:after,
.ms-item.active .ms-link:after{

    transform:scaleX(1);

}

.ms-arrow{

    font-size:15px;

    transition:.25s;

}

.ms-item:hover .ms-arrow{

    transform:rotate(180deg);

}

/*==========================
PANEL
==========================*/

.ms-panel{

    position:absolute;

    right:0;

    left:0;

    top:100%;

    background:#fff;

    border-radius:0 0 18px 18px;

    border:1px solid #edf2f7;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

    overflow:hidden;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(15px);

    transition:.25s;

}

.ms-panel.active{

    opacity:1;

    visibility:visible;

    transform:none;

    pointer-events:auto;

}

/*==========================
LEVEL2
==========================*/

.ms-level2{

    display:flex;

    align-items:center;

    gap:10px;

    padding:18px 25px;

    background:#f7f8fb;

    border-bottom:1px solid #edf2f7;

}

.ms-level2-item{

    position:relative;

    border:none;

    background:transparent;

    padding:12px 18px;

    cursor:pointer;

    font-size:14px;

    font-weight:700;

    color:#666;

    border-radius:10px;

    transition:.25s;

}

.ms-level2-item:hover{

    background:#fff;

    color:#3E4095;

}

.ms-level2-item.active{

    background:#fff;

    color:#3E4095;

    box-shadow:0 5px 15px rgba(62,64,149,.08);

}

.ms-level2-item.active:after{

    content:"";

    position:absolute;

    right:15px;

    left:15px;

    bottom:-18px;

    height:3px;

    border-radius:50px;

    background:#3E4095;

}

/*==========================
BODY
==========================*/

.ms-body{

    padding:30px;

    min-height:420px;

}

.ms-tab{

    display:none;

}

.ms-tab.active{

    display:block;

}

/*==========================
GRID
==========================*/

.ms-grid{

    display:grid;

    grid-template-columns:repeat(5,minmax(180px,1fr));

    gap:30px;

    align-items:flex-start;

}

/*==========================
COLUMN
==========================*/

.ms-column{

    display:flex;

    flex-direction:column;

}

/*==========================
LEVEL3
==========================*/

.ms-title{

    margin-bottom:15px;

    padding-bottom:10px;

    border-bottom:1px solid #edf2f7;

}

.ms-title-link{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#3E4095;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    transition:.25s;

}

.ms-title-link span{

    display:flex;

    align-items:center;

    gap:8px;

}

.ms-title-link:hover{

    color:#2daa5e;

    text-decoration:none;

}

/*==========================
LEVEL4
==========================*/

.ms-links{

    margin:0;

    padding:0;

    list-style:none;

}

.ms-links li{

    margin-bottom:8px;

}

.ms-links li a{

    display:block;

    padding:6px 0;

    color:#666;

    font-size:13px;

    text-decoration:none;

    transition:.2s;

}

.ms-links li a:hover{

    color:#3E4095;

    padding-right:8px;

}

/*==========================
SCROLL
==========================*/

.ms-body{

    overflow-y:auto;

}

.ms-body::-webkit-scrollbar{

    width:8px;

}

.ms-body::-webkit-scrollbar-thumb{

    background:#d8dce4;

    border-radius:50px;

}

/*==========================
ANIMATION
==========================*/

@keyframes megaFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.ms-panel.active{

    animation:megaFade .25s;

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:1400px){

.ms-grid{

    grid-template-columns:repeat(4,minmax(180px,1fr));

}

}

@media(max-width:1200px){

.ms-grid{

    grid-template-columns:repeat(3,minmax(180px,1fr));

}

}

@media(max-width:992px){

.ms-grid{

    grid-template-columns:repeat(2,minmax(180px,1fr));

}

}

@media(max-width:768px){

.ms-grid{

    grid-template-columns:1fr;

}

}
/*====================================
    CONTENT LAYOUT
====================================*/

.ms-content{

    display:flex;

    flex-direction:row-reverse; /* RTL */

    align-items:flex-start;

    gap:35px;

}

.ms-left{

    flex:1;

    min-width:0;

}

.ms-right{

    width:320px;

    min-width:320px;

    flex:0 0 320px;

    border-right:1px solid #edf1f7;

    padding-right:25px;

}
/*====================================
    FEATURED PRODUCTS
====================================*/


.ms-featured{

    display:flex;

    flex-direction:column;

}

.ms-featured-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;

    padding-bottom:12px;

    border-bottom:1px solid #eef2f6;

    font-size:14px;

    font-weight:700;

    color:#3E4095;

}

.ms-featured-head i{

    color:#ff9800;

    font-size:18px;

}

.ms-product{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px;

    margin-bottom:12px;

    border-radius:14px;

    border:1px solid #edf1f7;

    background:#fff;

    text-decoration:none;

    transition:.25s;

}

.ms-product:hover{

    transform:translateX(-4px);

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    border-color:#3E4095;

}

.ms-product-image{

    position:relative;

    width:70px;

    height:70px;

    flex-shrink:0;

}

.ms-product-image img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.ms-discount{

    position:absolute;

    top:-6px;

    left:-6px;

    background:#ef4444;

    color:#fff;

    font-size:10px;

    font-weight:700;

    padding:3px 6px;

    border-radius:20px;

}

.ms-product-body{

    flex:1;

    min-width:0;

}

.ms-product-title{

    font-size:12px;

    color:#333;

    font-weight:600;

    line-height:1.9;

    height:42px;

    overflow:hidden;

}

.ms-product-price{

    margin-top:8px;

}

.ms-product-price .sale{

    display:block;

    color:#2daa5e;

    font-size:13px;

    font-weight:800;

}

.ms-product-price del{

    display:block;

    margin-top:3px;

    color:#999;

    font-size:11px;

}

.ms-view-all{

    margin-top:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:44px;

    border-radius:12px;

    background:#3E4095;

    color:#fff;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    transition:.25s;

}

.ms-view-all:hover{

    background:#2daa5e;

    color:#fff;

}

.ms-view-all i{

    transition:.25s;

}

.ms-view-all:hover i{

    transform:translateX(-5px);

}
.ms-left{
    order:2 !important;
}

.ms-right{
    order:1 !important;

    border-left:1px solid #edf1f7;
    border-right:none;

    padding-left:25px;
    padding-right:0;
}

.ms-products-loading{
    padding:15px;
}

.ms-loading-head{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:15px;
    font-size:13px;
    color:#666;
}

.ms-loading-item{
    display:flex;
    gap:10px;
    margin-bottom:14px;
}

.ms-loading-item .thumb{
    width:70px;
    height:70px;
    border-radius:10px;
    background:#eee;
    animation:pulse 1.3s infinite;
}

.ms-loading-item .body{
    flex:1;
}

.ms-loading-item .line{
    height:12px;
    background:#eee;
    border-radius:6px;
    margin-bottom:10px;
    animation:pulse 1.3s infinite;
}

.ms-products-loading .w90{width:90%;}
.ms-products-loading .w80{width:80%;}
.ms-products-loading .w70{width:70%;}
.ms-products-loading .w60{width:60%;}
.ms-products-loading .w50{width:50%;}
.ms-products-loading .w40{width:40%;}

@keyframes pulse{
    0%{opacity:.5;}
    50%{opacity:1;}
    100%{opacity:.5;}
}