/* ===============================
   Dilor Category Navigation
=============================== */

.dilor-category-navigation{

    display:flex;
    justify-content:center;

    margin:10px 0 30px;

}

.dilor-category-stage{

    background:#F6F6F4;

    border-radius:28px;

    box-shadow:0 10px 18px rgba(0,0,0,.16);

    padding:18px 28px 14px;
    
     overflow:visible;

}

.dilor-category-items{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:22px;

}

/* ---------- Card ---------- */

.dilor-category-card{

    width:105px;
    flex:0 0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    position:relative;

}

/* ---------- Image ---------- */

.dilor-category-image{

    height:70px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    margin-top:-18px;

}

.dilor-category-image img{

    max-width:90px;

    max-height:90px;

    object-fit:contain;

    display:block;

}

/* ---------- Text ---------- */

.dilor-category-title{

    margin-top:6px;

    font-size:12px;

    font-weight:400;

    color:#6B6565;

    line-height:18px;

    text-align:center;

}

/* ---------- Active ---------- */

.dilor-category-card.active .dilor-category-title{

    color:#000;

    font-weight:700;

}

.dilor-active-arrow{

    width:0;

    height:0;

    margin-top:4px;

    border-left:7px solid transparent;

    border-right:7px solid transparent;

    border-top:8px solid #000;

}

/* ---------- Hover ---------- */

.dilor-category-card:hover img{

    transform:translateY(-4px);

    transition:.25s;

}

/* ---------- Responsive ---------- */

/* ===========================
   Tablet
=========================== */

@media (max-width:1024px){

    .dilor-category-stage{

        padding:16px 22px 12px;

    }

    .dilor-category-items{

        gap:14px;

    }

    .dilor-category-card{

        width:90px;

    }

    .dilor-category-image img{

        max-width:72px;
        max-height:72px;

    }

    .dilor-category-title{

        font-size:11px;

    }

}

/* ===========================
   Mobile
=========================== */

@media (max-width:767px){

    .dilor-category-navigation{

        justify-content:flex-start;

        overflow-x:auto;

        padding:0 16px 12px;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

    }

    .dilor-category-navigation::-webkit-scrollbar{

        display:none;

    }

    .dilor-category-stage{

    flex:0 0 auto;

    width:max-content;

    min-width:max-content;

}

    .dilor-category-items{

    display:flex;

    flex-wrap:nowrap;

    gap:12px;

}

}