/*==================================
ARTICLE DETAILS
==================================*/

.article-details{

    padding-top:80px;

}

.article-image{

    margin-bottom:40px;

    overflow:hidden;

    border-radius:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.article-image img{

    width:100%;

    display:block;

}

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:30px;

    margin-bottom:40px;

    padding-bottom:20px;

    border-bottom:1px solid #e9ecef;

    color:#6c757d;

    font-size:15px;

}

.article-meta span{

    display:flex;

    align-items:center;

    gap:10px;

}

.article-meta i{

    color:var(--primary);

}

.article-content{

    color:#555;

    line-height:1.9;

}

.article-content h2{

    margin:45px 0 20px;

    color:var(--secondary);

    font-size:34px;

}

.article-content h3{

    margin:35px 0 18px;

    color:var(--secondary);

    font-size:28px;

}

.article-content h4{

    margin:30px 0 15px;

    color:var(--secondary);

    font-size:22px;

}

.article-content p{

    margin-bottom:22px;

}

.article-content ul,

.article-content ol{

    margin-bottom:25px;

    padding-left:25px;

}

.article-content li{

    margin-bottom:10px;

}

.article-content img{

    max-width:100%;

    border-radius:12px;

    margin:30px 0;

}

.article-content blockquote{

    margin:35px 0;

    padding:30px;

    border-left:5px solid var(--primary);

    background:#f8f9fa;

    font-style:italic;

    border-radius:10px;

}

.article-content table{

    width:100%;

    margin:30px 0;

    border-collapse:collapse;

}

.article-content table th,

.article-content table td{

    padding:14px;

    border:1px solid #dee2e6;

}

.article-content table th{

    background:#f8f9fa;

}

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

@media(max-width:768px){

    .article-details{

        padding-top:60px;

    }

    .article-meta{

        gap:15px;

        flex-direction:column;

    }

    .article-content h2{

        font-size:28px;

    }

    .article-content h3{

        font-size:24px;

    }

}