/* ===================================
   Featured Categories
=================================== */

.featured-category{
    background:#fff;
}

.section-title{
    font-size:34px;
    font-weight:700;
    color:#253D4E;
}

/* ===============================
   Category Filter
================================ */

.category-filter{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
}

.category-filter li{
    list-style:none;
}

.category-filter li a{
    color:#253D4E;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.category-filter li.active a,
.category-filter li a:hover{
    color:#3BB77E;
}

/* ===============================
   Slider Navigation
================================ */

.slider-btn{
    display:flex;
    gap:10px;
}

.slider-btn button{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#f3f3f3;
    transition:.3s;
}

.slider-btn button:hover{
    background:#3BB77E;
    color:#fff;
}

/* ===============================
   Owl Fix
================================ */

.categorySlider .owl-stage{
    display:flex;
}

.categorySlider .owl-item{
    display:flex;
}

.categorySlider .owl-item>a{
    display:block;
    width:100%;
    text-decoration:none;
}

/* ===============================
   Category Card
================================ */

.category-card{

    height:100%;
    min-height:auto;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    border:1px solid #ececec;
    border-radius:18px;

    padding:25px 5px;

    background:#F8FFF6;

    transition:.35s;
}

.category-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.category-card img{

    width:100px !important;
    min-width: 100px;
    max-width: 100px;
    height:100px;
    max-height: 100px;
    min-height:100px;
    

    object-fit:contain;

    margin-bottom:18px;

    transition:.35s;
    border-radius: 50px;
    
}

.category-card:hover img{

    transform:scale(1.08);
}

.category-card h5{

    font-size:18px;
    font-weight:700;

    color:#253D4E;

    line-height:1.4;

    /*min-height:50px;*/
    min-height:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:8px;

    overflow:hidden;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.category-card span{

    font-size:14px;

    color:#7E7E7E;

    margin-top:auto;
}

/* ===============================
   Background Colors
================================ */

.categorySlider .owl-item:nth-child(8n+1) .category-card{
    background:#F4F6D7;
}

.categorySlider .owl-item:nth-child(8n+2) .category-card{
    background:#FFF5E8;
}

.categorySlider .owl-item:nth-child(8n+3) .category-card{
    background:#EAF8E7;
}

.categorySlider .owl-item:nth-child(8n+4) .category-card{
    background:#FFF0ED;
}

.categorySlider .owl-item:nth-child(8n+5) .category-card{
    background:#F4F1FF;
}

.categorySlider .owl-item:nth-child(8n+6) .category-card{
    background:#EDFBE4;
}

.categorySlider .owl-item:nth-child(8n+7) .category-card{
    background:#FFF8DF;
}

.categorySlider .owl-item:nth-child(8n+8) .category-card{
    background:#EEF7FF;
}

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

@media(max-width:767px){

    .featured-category{
        padding:35px 0;
    }

    .featured-category .d-flex.justify-content-between{

        flex-direction:column;
        align-items:flex-start !important;

        gap:15px;
    }

    .section-title{

        font-size:26px;
    }

    .category-filter{

        flex-wrap:nowrap;
        overflow-x:auto;

        white-space:nowrap;

        width:100%;

        scrollbar-width:none;
    }

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

    .slider-btn{
        display:none;
    }

    .category-card{

        min-height:180px;

        padding:30px 12px 18px 12px;

        border-radius:14px;
    }

    .category-card img{

        width: 100px !important;
        height: 100px;
        margin-bottom: 10px;
        border-radius: 50px !important;
    }

    .category-card h5{
        margin-top: 6px;
        font-size:18px;

        /*min-height:42px;*/
        min-height:auto;

        line-height:1.3;
    }

    .category-card span{

        font-size:12px;
    }
}

.category-img{
    width:100px;
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 0px;
}

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

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