/* ==========================================
   News Detail Page
========================================== */

.news-detail{

    padding:70px 20px;

    background:#f5f7fb;

}

.news-detail .container{

    max-width:1000px;

    margin:auto;

}

/* ==========================================
   Badge
========================================== */

.news-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    color:#fff;

    margin-bottom:20px;

}

.news-badge.blue{

    background:#1976d2;

}

.news-badge.green{

    background:#2e7d32;

}

.news-badge.orange{

    background:#ef6c00;

}

.news-badge.red{

    background:#d32f2f;

}

.news-badge.purple{

    background:#6a1b9a;

}

/* ==========================================
   Heading
========================================== */

.news-detail h1{

    font-size:40px;

    color:#173f73;

    margin-bottom:15px;

    line-height:1.3;

}

/* ==========================================
   Date
========================================== */

.news-date{

    color:#777;

    font-size:15px;

    margin-bottom:30px;

}

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

.news-image{

    width:100%;

    border-radius:14px;

    box-shadow:0 8px 30px rgba(0,0,0,.12);

    margin-bottom:35px;

}

/* ==========================================
   Content Area
========================================== */

.news-content{

    background:#fff;

    padding:35px;

    border-radius:14px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    line-height:1.9;

    color:#444;

    font-size:17px;

}

/* Paragraph */

.news-content p{

    margin-bottom:18px;

}

/* Headings */

.news-content h2{

    color:#173f73;

    margin-top:35px;

    margin-bottom:15px;

    font-size:30px;

}

.news-content h3{

    color:#173f73;

    margin-top:28px;

    margin-bottom:15px;

    font-size:24px;

}

.news-content h4{

    color:#173f73;

    margin-top:22px;

    margin-bottom:12px;

    font-size:20px;

}

/* Lists */

.news-content ul,

.news-content ol{

    margin:15px 0 20px 30px;

}

.news-content li{

    margin-bottom:10px;

}

/* Links */

.news-content a{

    color:#1565c0;

    text-decoration:none;

    font-weight:600;

}

.news-content a:hover{

    text-decoration:underline;

}

/* Images inside CKEditor */

.news-content img{

    max-width:100%;

    height:auto;

    border-radius:10px;

    margin:25px auto;

    display:block;

    box-shadow:0 6px 20px rgba(0,0,0,.12);

}

/* Tables */

.news-content table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}

.news-content table th{

    background:#173f73;

    color:#fff;

    padding:12px;

}

.news-content table td{

    border:1px solid #ddd;

    padding:12px;

}

.news-content table tr:nth-child(even){

    background:#f7f9fc;

}

/* Code */

.news-content pre{

    background:#1f2937;

    color:#fff;

    padding:18px;

    border-radius:10px;

    overflow:auto;

    margin:25px 0;

}

.news-content code{

    background:#eef2f7;

    padding:3px 6px;

    border-radius:5px;

    color:#d63384;

}

/* Blockquote */

.news-content blockquote{

    border-left:5px solid #1565c0;

    padding-left:20px;

    margin:25px 0;

    color:#555;

    font-style:italic;

    background:#f8fbff;

    padding-top:15px;

    padding-bottom:15px;

}

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

@media(max-width:768px){

    .news-detail{

        padding:50px 15px;

    }

    .news-detail h1{

        font-size:30px;

    }

    .news-content{

        padding:25px;

        font-size:16px;

    }

    .news-content h2{

        font-size:24px;

    }

    .news-content h3{

        font-size:21px;

    }

}