/* ==========================================
   ARTICLE PAGE
========================================== */

.article-container{
    max-width:1180px;
    margin:0 auto;
    padding:40px 20px;
}

.article-content{
    font-size:18px;
    line-height:1.9;
    color:#333;
}

.article-content h2{
    margin:50px 0 20px;
    font-size:34px;
    font-weight:700;
}

.article-content h3{
    margin:35px 0 15px;
    font-size:28px;
    font-weight:700;
}

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

.article-content img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:35px auto;
    border-radius:15px;
}

.article-content table{
    width:100%;
    display:block;
    overflow-x:auto;
}

.article-content iframe{
    width:100%;
    max-width:100%;
}

/* ==========================================
   FEATURED IMAGE
========================================== */

.article-featured-image{
    margin-bottom:35px;
    overflow:hidden;
    border-radius:20px;
}

.article-featured-image img{
    width:100%;
    display:block;
    height:auto;
    object-fit:cover;
    border-radius:20px;
}

/* ==========================================
   RELATED ARTICLES
========================================== */

.card{
    border:none;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:100%;
}

.card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.card-body{
    padding:25px;
}

.card-title{
    font-size:22px;
    font-weight:700;
}

.btn-secondary,
.btn-primary{
    border-radius:50px;
    padding:12px 30px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:991px){

    .article-container{
        padding:35px 20px;
    }

    .article-content{
        font-size:17px;
    }

    .article-content h2{
        font-size:30px;
    }

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

}

@media (max-width:768px){

    .article-container{
        padding:25px 15px;
    }

    .article-content{
        font-size:16px;
        line-height:1.8;
    }

    .article-content h2{
        font-size:28px;
        margin-top:35px;
    }

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

    .article-featured-image img{
        border-radius:14px;
    }

    .card img{
        height:180px;
    }

}

@media (max-width:480px){

    .article-container{
        padding:20px 12px;
    }

    .article-content{
        font-size:15px;
    }

    .article-content h2{
        font-size:24px;
    }

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

    .card-body{
        padding:18px;
    }

    .card-title{
        font-size:20px;
    }

}
/* ==========================
   MOBILE ARTICLE CARDS
========================== */

@media (max-width:768px){

    .articles-grid,
    .knowledge-grid,
    .blog-grid,
    .posts-grid{
        display:grid;
        grid-template-columns:1fr !important;
        gap:20px;
    }

    .card{
        width:100%;
        margin:0;
    }

    .card img{
        width:100%;
        height:220px;
        object-fit:cover;
    }

    .card-body{
        padding:18px;
    }

    .card-title{
        font-size:22px;
        line-height:1.35;
    }

    .card p{
        font-size:15px;
    }
}

/* Small phones */

@media (max-width:480px){

    .card img{
        height:200px;
    }

    .card-title{
        font-size:20px;
    }
}