/* ===============================
   Global
================================ */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn/Vazirmatn-Variable.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}


* {
    box-sizing: border-box;
}


body {

    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;

    background: #f8fafc;

    color: #334155;

    line-height: 2;

}



a {

    text-decoration: none;

    transition: .3s;

}



img {

    max-width:100%;

    height:auto;

}





/* ===============================
   Header
================================ */


.navbar-brand {

    font-weight:800;

    color:#0f172a;

}



.top-header {

    font-size:14px;

}





/* ===============================
   Cards
================================ */


.card {

    border:none;

    border-radius:20px;

    overflow:hidden;

}



.article-card {

    background:white;

    transition:.3s;

}



.article-card:hover {

    transform:translateY(-6px);

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

}





.card img {

    width:100%;

    object-fit:cover;

}





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


.article-featured-image {

    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:24px;

    display:block;

}





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


.article-content {

    background:#fff;

    border-radius:24px;

    padding:35px;

    font-size:17px;

}



.article-content p {

    margin-bottom:25px;

}



.article-content h2 {

    color:#0f172a;

    font-size:30px;

    font-weight:800;

    margin-top:45px;

    margin-bottom:20px;

}



.article-content h3 {

    color:#1e293b;

    font-size:24px;

    font-weight:700;

    margin-top:35px;

}



.article-content img {

    max-width:850px;

    width:100%;

    height:auto;

    border-radius:18px;

    display:block;

    margin:30px auto;

}



.article-content table {

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}



.article-content td,

.article-content th {

    border:1px solid #e2e8f0;

    padding:12px;

}



.article-content blockquote {

    background:#f1f5f9;

    border-right:5px solid #2563eb;

    padding:20px;

    border-radius:15px;

}





/* ===============================
   Article Meta
================================ */


.article-meta {

    color:#64748b;

    font-size:14px;

}



.article-title {

    color:#0f172a;

    font-weight:800;

    line-height:1.7;

}





/* ===============================
   Sidebar
================================ */


.sidebar-card {

    background:#fff;

    border-radius:20px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}



.sidebar-card h4 {

    font-weight:800;

    color:#0f172a;

}





/* ===============================
   Tags
================================ */


.article-tag {

    display:inline-block;

    background:#eff6ff;

    color:#2563eb;

    padding:5px 14px;

    border-radius:30px;

    margin:4px;

    font-size:14px;

}



.article-tag:hover {

    background:#2563eb;

    color:#fff;

}





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


.footer a {

    text-decoration:none;

}





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


@media(max-width:768px){


    .article-featured-image {

        height:240px;

        border-radius:18px;

    }



    .article-content {

        padding:20px;

        font-size:15px;

    }



    .article-content h2 {

        font-size:24px;

    }



}