/*==================================================
PixelWorld Category Listing
==================================================*/

.category-card{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    border:1px solid #ececec;

    transition:all .35s ease;

    height:100%;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.category-card:hover{

    transform:translateY(-8px);

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

}

.category-card a{

    display:block;

    color:inherit;

    text-decoration:none;

}

/*======================================
Image
======================================*/

.category-image{

    position:relative;

    overflow:hidden;

    background:#f8f9fa;

    aspect-ratio:1/1;

}

.category-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .5s ease;

}

.category-card:hover img{

    transform:scale(1.08);

}

/*======================================
Content
======================================*/

.category-content{

    padding:20px;

}

.category-content h5{

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:10px;

}

.category-content p{

    color:#6c757d;

    font-size:.95rem;

    line-height:1.6;

    min-height:48px;

}

/*======================================
Footer
======================================*/

.category-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

}

.category-footer span:first-child{

    background:#f3f5f7;

    padding:6px 12px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

}

.category-footer span:last-child{

    color:#0d6efd;

    font-weight:600;

    transition:.3s;

}

.category-card:hover
.category-footer span:last-child{

    transform:translateX(6px);

}

/*======================================
Heading
======================================*/

.category-page-title{

    font-size:2.3rem;

    font-weight:700;

}

.category-page-subtitle{

    color:#6c757d;

    max-width:700px;

    margin:auto;

}

/*======================================
Responsive
======================================*/

@media(max-width:991px){

.category-content{

padding:18px;

}

}

@media(max-width:767px){

.category-page-title{

font-size:1.8rem;

}

.category-content{

padding:15px;

}

.category-content h5{

font-size:1.05rem;

}

.category-content p{

font-size:.9rem;

}

}

@media(max-width:575px){

.category-footer{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

}