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

.article-page{

    padding:140px 0 80px;

}

.article-container{

    max-width:900px;

    margin:auto;

}

/* ==========================================
   BREADCRUMB
========================================== */

.breadcrumb{

    display:flex;

    gap:10px;

    align-items:center;

    font-size:14px;

    margin-bottom:20px;

    color:#8b9bb4;

}

.breadcrumb a{

    color:#8b9bb4;

    text-decoration:none;

    transition:.3s;

}

.breadcrumb a:hover{

    color:#0d6efd;

}

/* ==========================================
   CATEGORY
========================================== */

.article-category{

    display:inline-block;

    background:#0d6efd;

    color:#fff;

    padding:7px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:20px;

}

/* ==========================================
   TITLE
========================================== */

.article-title{

    font-size:52px;

    line-height:1.2;

    font-weight:800;

    color:#fff;

    margin-bottom:25px;

}

/* ==========================================
   EXCERPT
========================================== */

.article-excerpt{

    font-size:22px;

    line-height:1.8;

    color:#b6c2d9;

    margin-bottom:30px;

}

/* ==========================================
   META
========================================== */

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    margin-bottom:35px;

    color:#93a7c4;

    font-size:15px;

}

.article-meta span{

    display:flex;

    align-items:center;

    gap:7px;

}

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

.article-image{

    margin-bottom:45px;

}

.article-image img{

    width:100%;

    border-radius:18px;

    display:block;

    box-shadow:

    0 15px 40px rgba(0,0,0,.35);

}

/* ==========================================
   CONTENT
========================================== */

.article-content{

    font-size:18px;

    line-height:2;

    color:#dbe4f3;

}

.article-content p{

    margin-bottom:24px;

}

.article-content h2{

    margin-top:50px;

    margin-bottom:20px;

    font-size:34px;

    color:#fff;

}

.article-content h3{

    margin-top:35px;

    margin-bottom:15px;

    font-size:26px;

    color:#fff;

}

.article-content ul{

    padding-left:25px;

    margin-bottom:25px;

}

.article-content li{

    margin-bottom:10px;

}

.article-content a{

    color:#0d6efd;

    text-decoration:none;

}

.article-content a:hover{

    text-decoration:underline;

}

/* ==========================================
   CODE BLOCK
========================================== */

.article-content pre{

    background:#091421;

    border:1px solid #16263c;

    border-radius:14px;

    padding:20px;

    overflow:auto;

    margin:35px 0;

}

.article-content code{

    font-family:Consolas, monospace;

    color:#6dc8ff;

}

/* ==========================================
   BLOCKQUOTE
========================================== */

.article-content blockquote{

    border-left:5px solid #0d6efd;

    background:#091421;

    padding:20px;

    margin:35px 0;

    border-radius:10px;

    color:#bfcde3;

}

/* ==========================================
   SHARE
========================================== */

.share-box{

    margin-top:60px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.08);

}

.share-title{

    margin-bottom:20px;

    font-size:20px;

    font-weight:700;

}

.share-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.share-buttons a{

    padding:12px 22px;

    border-radius:10px;

    text-decoration:none;

    color:#fff;

    background:#132338;

    transition:.3s;

}

.share-buttons a:hover{

    background:#0d6efd;

}

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

.related{

    margin-top:70px;

}

.related h2{

    margin-bottom:25px;

    font-size:34px;

}

.related-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.related-card{

    background:#101c2d;

    border-radius:16px;

    overflow:hidden;

    transition:.35s;

}

.related-card:hover{

    transform:translateY(-8px);

}

.related-card img{

    width:100%;

    display:block;

}

.related-card .body{

    padding:20px;

}

.related-card h3{

    font-size:20px;

    margin-bottom:12px;

}

.related-card p{

    color:#b9c6d9;

    margin-bottom:18px;

}

.related-card a{

    color:#0d6efd;

    text-decoration:none;

}

/* ==========================================
   TABLE
========================================== */

.article-content table{

    width:100%;

    border-collapse:collapse;

    margin:35px 0;

}

.article-content th{

    background:#10243b;

    padding:14px;

    text-align:left;

}

.article-content td{

    padding:14px;

    border-top:1px solid #24384d;

}

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

@media(max-width:992px){

.related-grid{

grid-template-columns:1fr;

}

.article-title{

font-size:40px;

}

}

@media(max-width:768px){

.article-page{

padding-top:120px;

}

.article-title{

font-size:32px;

}

.article-excerpt{

font-size:18px;

}

.article-meta{

flex-direction:column;

gap:12px;

}

.share-buttons{

flex-direction:column;

}

}

@media(max-width:480px){

.article-title{

font-size:28px;

}

.article-content{

font-size:16px;

line-height:1.9;

}

}