/*==========================
Category Banner
==========================*/

.category-banner {
    background: linear-gradient(135deg,#2563EB,#1D4ED8);
    color: #fff;
    padding: 80px 20px;
    text-align: center;
}

    .category-banner h1 {
        font-size: 48px;
        font-weight: 700;
    }

    .category-banner p {
        font-size: 18px;
        opacity: .9;
    }

/*==========================
Article Card
==========================*/

.article-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    transition: .35s;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    height: 100%;
}

    .article-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 60px rgba(0,0,0,.15);
    }

.article-image {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.article-content {
    padding: 25px;
}

    .article-content h3 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .article-content p {
        margin-bottom: 20px;
    }

    .article-content .btn {
        width: 100%;
    }

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

@media(max-width:768px) {

    .category-banner {
        padding: 60px 20px;
    }

        .category-banner h1 {
            font-size: 34px;
        }

    .article-image {
        height: 200px;
    }

    .article-content {
        padding: 20px;
    }

        .article-content h3 {
            font-size: 20px;
        }
}