.dfpu-category-slider{

    padding:20px 0;

    background:#ffffff;

    overflow:hidden;

}

.dfpu-category-wrapper{

    display:flex;

    gap:30px;

    overflow-x:auto;

    scroll-behavior:smooth;

    padding:0 30px;

}

.dfpu-category-wrapper::-webkit-scrollbar{

    display:none;

}

.dfpu-category-card{

    flex:0 0 auto;

    width:120px;

    text-align:center;

    text-decoration:none;

    color:#222;

}

.dfpu-category-card img{

    width:80px;

    height:80px;

    object-fit:contain;

    margin-bottom:10px;

}

.dfpu-category-card span{

    display:block;

    font-size:15px;

    font-weight:600;

}

.category-item{
    flex:0 0 auto;
    width: 85px;
    text-align:center;
    text-decoration:none;
    color:#222;
}

.category-image{
    width: 50px;
    height:50px;
    margin:auto;
}

.category-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:.3s;
}

.category-item h4{
    font-size:13px;
    margin-top:8px;
    line-height:18px;
    font-weight:500;
}

.category-item:hover .category-image img{
    transform:scale(1.08);
}


.dfpu-category-slider{
    width:100%;
    margin:0 auto;
    padding:5px 45px;
    overflow:hidden;
}

.category-item,
.category-item:link,
.category-item:visited,
.category-item:hover{
    text-decoration:none !important;
}

.category-track{

    display:flex;
    gap:18px;

    overflow-x:auto;
    scroll-behavior:auto;

    scrollbar-width:none;

    padding:2px 50px;

}

.category-track::-webkit-scrollbar{
    display:none;
}

.category-item{

    flex:0 0 auto;

    width:90px;

    text-align:center;

    text-decoration:none;

    color:#222;

}

.category-image{

    width:60px;
    height:60px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

}

.category-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.category-item h4{

    font-size:11px;

    margin-top:8px;

    font-weight:500;

    line-height:18px;

    text-decoration:none;

}

.slider-btn{

    padding: 18px;;

    position:absolute;

    top:45%;

    transform:translateY(-50%);

    width: 30px;

    height:30px;

    border-radius:50%;

    background:#fff;

    color:#444;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 3px 8px rgba(0,0,0,.12);

    opacity:1;

    visibility:visible;

    z-index:100;

    transition:.25s;

}

.slider-btn:hover{

    background:#d62828;

    color:#fff;

    border-color:#d62828;

    transform:translateY(-50%) scale(1.08);

}

.prev{

    left: 8px;;

}

.next{

    right: 8px;

}