/*=========================================================
 Aitadal Urdu News V2
 Module 1 - Foundation
=========================================================*/


/*=========================
  Font Face
==========================*/

@font-face{
    font-family:"NafeesWeb";
    src:url("../fonts/NafeesWeb.woff2") format("woff2"),
        url("../fonts/NafeesWeb.woff") format("woff"),
        url("../fonts/NafeesWeb.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}


/*=========================
  Root Variables
==========================*/

:root{

    --primary:#C40018;

    --primary-hover:#9e0014;

    --text:#1f1f1f;

    --light:#666;

    --border:#ececec;

    --bg:#ffffff;

    --container:1240px;

    --article:760px;

    --radius:12px;

    --transition:.25s;

}


/*=========================
  Body
==========================*/

body{

    direction:rtl;

    text-align:right;

    background:#fff;

    color:var(--text);

    font-family:"NafeesWeb",serif;

    font-size:27px;

    line-height:2.25;

    font-weight:400;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/*=========================
  Container
==========================*/

.container{

    width:92%;

    max-width:var(--container);

    margin:auto;

}


/*=========================
  Article Width
==========================*/

.single-post .container{

    max-width:900px;

}


/*=========================
  Links
==========================*/

a{

    color:inherit;

    text-decoration:none;

    transition:all .25s ease;

}

a:hover{

    color:var(--primary);

}


/*=========================
  Images
==========================*/

img{

    max-width:100%;

    height:auto;

    display:block;

}


/*=========================
  Typography
==========================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:"NafeesWeb",serif;

    color:#111;

    font-weight:700;

    line-height:2;

    margin-bottom:18px;

}


h1{

    font-size:39px;

}

h2{

    font-size:34px;

}

h3{

    font-size:30px;

}

h4{

    font-size:26px;

}

h5{

    font-size:22px;

}

h6{

    font-size:20px;

}


/*=========================
 Paragraph
==========================*/

p{

    margin:0 0 25px;

    line-height:2.3;

    font-size:31px;

    color:#222;

}


/*=========================
 Lists
==========================*/

ul,
ol{

    margin:20px 0;

    padding-right:28px;

}

li{

    line-height:2.2;

    margin-bottom:10px;

}


/*=========================
 Blockquote
==========================*/

blockquote{

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

    background:#fafafa;

    padding:20px;

    margin:30px 0;

    font-size:30px;

    line-height:2.2;

}


/*=========================
 Table
==========================*/

table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}

td,
th{

    border:1px solid #ddd;

    padding:14px;

}


/*=========================
 Selection
==========================*/

::selection{

    background:var(--primary);

    color:#fff;

}


/*=========================
 Buttons
==========================*/

button,
input[type=submit]{

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:6px;

    padding:12px 24px;

    cursor:pointer;

    transition:.25s;

}

button:hover,
input[type=submit]:hover{

    background:var(--primary-hover);

}


/*=========================
 Forms
==========================*/

input,
textarea,
select{

    width:100%;

    border:1px solid var(--border);

    padding:14px;

    border-radius:8px;

    font-family:inherit;

    font-size:18px;

}


/*=========================
 HR
==========================*/

hr{

    border:none;

    border-top:1px solid var(--border);

    margin:35px 0;

}


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

@media(max-width:991px){

body{

    font-size:24px;

}

h1{

    font-size:34px;

}

h2{

    font-size:30px;

}

p{

    font-size:27px;

}

}


@media(max-width:768px){

.container{

    width:94%;

}

body{

    font-size:22px;

}

h1{

    font-size:28px;

    line-height:2.1;

}

h2{

    font-size:26px;

}

h3{

    font-size:24px;

}

p{

    font-size:23px;

    line-height:2.2;

}

blockquote{

    font-size:23px;

}

}


/*=========================================================
 Module 2
 Header & Navigation
=========================================================*/


/*=========================
 Top Bar
==========================*/

.top-bar{

    background:#fafafa;

    border-bottom:1px solid #ececec;

    font-size:16px;

    color:#666;

}

.top-bar .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:42px;

}


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

.site-header{

    background:#fff;

    position:sticky;

    top:0;

    z-index:9999;

    border-bottom:1px solid #ececec;

    transition:.25s;

}

.site-header.scrolled{

    box-shadow:0 3px 18px rgba(0,0,0,.08);

}

.site-header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:84px;

}


/*=========================
 Logo
==========================*/

.site-logo{

    display:flex;

    align-items:center;

}

.site-logo img{

    max-height:58px;

    width:auto;

}


/*=========================
 Navigation
==========================*/

.main-navigation{

    display:flex;

    align-items:center;

}

.main-navigation ul{

    display:flex;

    align-items:center;

    gap:12px;

    margin:0;

    padding:0;

    list-style:none;

}

.main-navigation li{

    position:relative;

    margin:0;

}

.main-navigation a{

    display:block;

    padding:12px 16px;

    font-size:23px;

    font-family:"NafeesWeb",serif;

    color:#111;

    transition:.25s;

}

.main-navigation a:hover{

    color:var(--primary);

}


/*=========================
 Active Menu
==========================*/

.main-navigation .current-menu-item>a,

.main-navigation .current_page_item>a{

    color:var(--primary);

}


/*=========================
 Dropdown
==========================*/

.main-navigation ul ul{

    position:absolute;

    right:0;

    top:100%;

    display:none;

    width:250px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:10px;

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

    flex-direction:column;

    padding:10px 0;

    z-index:999;

}

.main-navigation ul li:hover>ul{

    display:flex;

}

.main-navigation ul ul li{

    width:100%;

}

.main-navigation ul ul a{

    padding:12px 18px;

    font-size:20px;

}


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

.header-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

.header-icon{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

}

.header-icon:hover{

    background:#f3f3f3;

}


/*=========================
 Search
==========================*/

.search-toggle{

    font-size:22px;

    cursor:pointer;

}


/*=========================
 Breaking News
==========================*/

.breaking-news{

    background:var(--primary);

    color:#fff;

}

.breaking-news .container{

    display:flex;

    align-items:center;

    min-height:48px;

}

.breaking-title{

    background:#a30013;

    padding:0 18px;

    height:48px;

    display:flex;

    align-items:center;

    font-size:20px;

    font-weight:700;

    margin-left:18px;

}

.breaking-content{

    overflow:hidden;

    white-space:nowrap;

    font-size:20px;

}


/*=========================
 Mobile Menu Button
==========================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:none;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    width:28px;

    height:3px;

    background:#111;

    margin:6px auto;

    border-radius:20px;

}


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

@media(max-width:991px){

.main-navigation{

    display:none;

}

.menu-toggle{

    display:block;

}

.site-header .container{

    min-height:72px;

}

.site-logo img{

    max-height:50px;

}

}

@media(max-width:768px){

.top-bar{

    display:none;

}

.breaking-title{

    font-size:17px;

    padding:0 12px;

}

.breaking-content{

    font-size:17px;

}

.site-logo img{

    max-height:44px;

}

}
/*=========================================================
 Module 3
 Homepage • Hero • News Cards
=========================================================*/


/*====================================
 Hero Section
====================================*/

.hero-news{
    margin:30px 0 40px;
}

.hero-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
}


/*====================================
 Featured News
====================================*/

.hero-featured{

    position:relative;

    overflow:hidden;

    border-radius:16px;

    background:#000;

}

.hero-featured img{

    width:100%;

    height:520px;

    object-fit:cover;

    transition:.45s;

}

.hero-featured:hover img{

    transform:scale(1.05);

}

.hero-overlay{

    position:absolute;

    right:0;

    left:0;

    bottom:0;

    padding:35px;

    background:linear-gradient(to top,rgba(0,0,0,.88),transparent);

}

.hero-category{

    display:inline-block;

    background:var(--primary);

    color:#fff;

    padding:5px 12px;

    border-radius:30px;

    font-size:15px;

    margin-bottom:15px;

}

.hero-title{

    color:#fff;

    font-size:40px;

    line-height:1.9;

    margin-bottom:12px;

}

.hero-meta{

    color:#ddd;

    font-size:16px;

}


/*====================================
 Side News
====================================*/

.hero-sidebar{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.side-news{

    display:flex;

    gap:15px;

    border-bottom:1px solid #ececec;

    padding-bottom:18px;

}

.side-news:last-child{

    border:none;

    padding-bottom:0;

}

.side-news img{

    width:130px;

    height:90px;

    border-radius:10px;

    object-fit:cover;

}

.side-news-title{

    font-size:23px;

    line-height:1.9;

    color:#111;

}

.side-news-title:hover{

    color:var(--primary);

}


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

.section-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:45px 0 25px;

}

.section-title h2{

    font-size:32px;

    margin:0;

    position:relative;

    padding-right:18px;

}

.section-title h2:before{

    content:"";

    position:absolute;

    right:0;

    top:18px;

    width:6px;

    height:36px;

    background:var(--primary);

    border-radius:20px;

}


/*====================================
 News Grid
====================================*/

.news-grid{

    display:grid;

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

    gap:28px;

}


/*====================================
 News Card
====================================*/

.news-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:16px;

    overflow:hidden;

    transition:.3s;

}

.news-card:hover{

    transform:translateY(-6px);

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

}

.news-card-image{

    overflow:hidden;

}

.news-card img{

    width:100%;

    height:235px;

    object-fit:cover;

    transition:.4s;

}

.news-card:hover img{

    transform:scale(1.05);

}

.news-card-body{

    padding:18px;

}

.news-category{

    display:inline-block;

    color:var(--primary);

    font-size:16px;

    margin-bottom:10px;

    font-weight:700;

}

.news-title{

    font-size:26px;

    line-height:2;

    color:#111;

    margin-bottom:14px;

}

.news-title:hover{

    color:var(--primary);

}

.news-excerpt{

    font-size:20px;

    line-height:2;

    color:#666;

}

.news-meta{

    margin-top:16px;

    font-size:15px;

    color:#888;

}


/*====================================
 Load More
====================================*/

.load-more{

    text-align:center;

    margin:50px 0;

}

.load-more a{

    display:inline-block;

    padding:15px 35px;

    background:var(--primary);

    color:#fff;

    border-radius:50px;

    font-size:20px;

}

.load-more a:hover{

    background:var(--primary-hover);

}


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

@media(max-width:1200px){

.news-grid{

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

}

}


@media(max-width:991px){

.hero-grid{

    grid-template-columns:1fr;

}

.hero-featured img{

    height:420px;

}

}


@media(max-width:768px){

.news-grid{

    grid-template-columns:1fr;

}

.hero-featured img{

    height:260px;

}

.hero-overlay{

    padding:18px;

}

.hero-title{

    font-size:28px;

    line-height:2;

}

.side-news{

    align-items:center;

}

.side-news img{

    width:110px;

    height:80px;

}

.side-news-title{

    font-size:20px;

}

.news-card img{

    height:220px;

}

.news-title{

    font-size:23px;

}

.news-excerpt{

    font-size:18px;

}

.section-title h2{

    font-size:28px;

}

}
/*=========================================================
 Module 4.1
 Single Post Header
=========================================================*/


/*======================================
 Single Article
======================================*/

.single-post{

    background:#fff;

}

.single-post article{

    max-width:860px;

    margin:0 auto;

}


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

.article-header{

    margin:30px 0 35px;

    text-align:right;

}


/*======================================
 Category
======================================*/

.article-category{

    display:inline-flex;

    align-items:center;

    background:#c40018;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:17px;

    font-weight:700;

    margin-bottom:20px;

    transition:.3s;

}

.article-category:hover{

    background:#9e0014;

    color:#fff;

}


/*======================================
 Title
======================================*/

.article-title{

    font-family:"NafeesWeb",serif;

    font-size:52px;

    font-weight:700;

    line-height:2.05;

    color:#111;

    margin:0 0 18px;

    letter-spacing:0;

    word-spacing:2px;

}


/*======================================
 Subtitle
======================================*/

.article-subtitle{

    font-size:27px;

    line-height:2.1;

    color:#555;

    margin-bottom:24px;

}


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

.article-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:18px;

    padding:16px 0;

    border-top:1px solid #ececec;

    border-bottom:1px solid #ececec;

    color:#666;

    font-size:18px;

}

.article-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

.article-meta svg{

    width:18px;

    height:18px;

}


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

.article-featured-image{

    margin:35px 0;

}

.article-featured-image img{

    width:100%;

    display:block;

    border-radius:18px;

    object-fit:cover;

    transition:.45s;

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

}

.article-featured-image img:hover{

    transform:scale(1.01);

}


/*======================================
 Caption
======================================*/

.wp-caption-text,

.featured-caption{

    text-align:center;

    font-size:17px;

    color:#777;

    margin-top:14px;

    line-height:1.8;

}


/*======================================
 Breadcrumb
======================================*/

.breadcrumb{

    margin-bottom:18px;

    color:#777;

    font-size:17px;

}

.breadcrumb a{

    color:#666;

}

.breadcrumb a:hover{

    color:#c40018;

}


/*======================================
 Reading Progress
======================================*/

.reading-progress{

    position:fixed;

    top:0;

    right:0;

    width:0;

    height:4px;

    background:#c40018;

    z-index:999999;

}


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

@media(max-width:991px){

.article-title{

    font-size:42px;

}

.article-subtitle{

    font-size:24px;

}

}


@media(max-width:768px){

.article-header{

    margin:20px 0 25px;

}

.article-title{

    font-size:33px;

    line-height:2.15;

}

.article-subtitle{

    font-size:21px;

}

.article-meta{

    gap:10px;

    font-size:15px;

}

.article-category{

    font-size:15px;

    padding:7px 14px;

}

.article-featured-image{

    margin:22px 0;

}

.article-featured-image img{

    border-radius:12px;

}

}
/*=========================================================
 Module 4.2
 Single Post Content
=========================================================*/


/*======================================
 Entry Content
======================================*/

.entry-content,
.article-content{

    max-width:860px;

    margin:0 auto;

    color:#222;

}


/*======================================
 Paragraph
======================================*/

.entry-content p,
.article-content p{

    font-family:"NafeesWeb",serif;

    font-size:31px;

    line-height:2.35;

    color:#1f1f1f;

    margin:0 0 28px;

    text-align:right;

    word-spacing:2px;

    letter-spacing:0;

}


/*======================================
 Strong
======================================*/

.entry-content strong,
.article-content strong{

    color:#111;

    font-weight:700;

}


/*======================================
 Links
======================================*/

.entry-content a,
.article-content a{

    color:#c40018;

    text-decoration:none;

    border-bottom:1px solid transparent;

    transition:.25s;

}

.entry-content a:hover,
.article-content a:hover{

    border-color:#c40018;

}


/*======================================
 H2
======================================*/

.entry-content h2,
.article-content h2{

    font-family:"NafeesWeb",serif;

    font-size:41px;

    line-height:2;

    margin:60px 0 28px;

    color:#111;

    position:relative;

    padding-right:18px;

}

.entry-content h2:before,
.article-content h2:before{

    content:"";

    position:absolute;

    right:0;

    top:20px;

    width:6px;

    height:42px;

    background:#c40018;

    border-radius:20px;

}


/*======================================
 H3
======================================*/

.entry-content h3,
.article-content h3{

    font-size:35px;

    line-height:2;

    margin:50px 0 24px;

    color:#111;

}


/*======================================
 H4
======================================*/

.entry-content h4,
.article-content h4{

    font-size:30px;

    line-height:2;

    margin:40px 0 20px;

}


/*======================================
 Lists
======================================*/

.entry-content ul,
.entry-content ol,
.article-content ul,
.article-content ol{

    margin:25px 0;

    padding-right:35px;

}

.entry-content li,
.article-content li{

    font-size:30px;

    line-height:2.25;

    margin-bottom:12px;

}


/*======================================
 Blockquote
======================================*/

.entry-content blockquote,
.article-content blockquote{

    background:#fafafa;

    border-right:6px solid #c40018;

    border-radius:12px;

    padding:28px;

    margin:40px 0;

    font-size:30px;

    line-height:2.25;

    color:#222;

}


/*======================================
 Images
======================================*/

.entry-content img,
.article-content img{

    width:100%;

    height:auto;

    display:block;

    border-radius:14px;

    margin:35px 0;

}


/*======================================
 Image Caption
======================================*/

.entry-content .wp-caption-text,
.article-content .wp-caption-text{

    text-align:center;

    font-size:17px;

    color:#777;

    margin-top:-12px;

    margin-bottom:28px;

}


/*======================================
 Tables
======================================*/

.entry-content table,
.article-content table{

    width:100%;

    border-collapse:collapse;

    margin:40px 0;

}

.entry-content th,
.entry-content td,
.article-content th,
.article-content td{

    border:1px solid #e6e6e6;

    padding:16px;

    font-size:22px;

    text-align:center;

}

.entry-content th,
.article-content th{

    background:#f7f7f7;

    color:#111;

}


/*======================================
 Horizontal Line
======================================*/

.entry-content hr,
.article-content hr{

    border:none;

    border-top:1px solid #ececec;

    margin:45px 0;

}


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

@media(max-width:991px){

.entry-content p,
.article-content p{

    font-size:28px;

}

.entry-content h2,
.article-content h2{

    font-size:35px;

}

.entry-content h3,
.article-content h3{

    font-size:31px;

}

}


@media(max-width:768px){

.entry-content p,
.article-content p{

    font-size:24px;

    line-height:2.25;

}

.entry-content h2,
.article-content h2{

    font-size:29px;

    line-height:2.1;

    margin:42px 0 20px;

}

.entry-content h2:before,
.article-content h2:before{

    height:32px;

    top:16px;

}

.entry-content h3,
.article-content h3{

    font-size:26px;

}

.entry-content h4,
.article-content h4{

    font-size:23px;

}

.entry-content li,
.article-content li{

    font-size:23px;

}

.entry-content blockquote,
.article-content blockquote{

    padding:20px;

    font-size:23px;

}

}
/*=========================================================
 Module 4.3
 Social Share • WhatsApp Box • Reading Tools
=========================================================*/


/*======================================
 Article Tools
======================================*/

.article-tools{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin:35px 0;

    flex-wrap:wrap;

}


/*======================================
 Reading Time
======================================*/

.reading-time{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    background:#f8f8f8;

    border:1px solid #ececec;

    border-radius:40px;

    color:#555;

    font-size:16px;

    font-weight:600;

}


/*======================================
 Share Buttons
======================================*/

.share-buttons{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.share-buttons a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f5f5f5;

    color:#222;

    border:1px solid #ececec;

    transition:.3s;

}

.share-buttons a:hover{

    transform:translateY(-3px);

    color:#fff;

    border-color:transparent;

}


/* Facebook */

.share-facebook:hover{

    background:#1877F2;

}


/* X */

.share-twitter:hover{

    background:#000;

}


/* WhatsApp */

.share-whatsapp:hover{

    background:#25D366;

}


/* Telegram */

.share-telegram:hover{

    background:#229ED9;

}


/* Copy */

.share-copy:hover{

    background:#c40018;

}


/*======================================
 Sticky Share
======================================*/

.sticky-share{

    position:fixed;

    top:180px;

    right:20px;

    display:flex;

    flex-direction:column;

    gap:10px;

    z-index:999;

}

.sticky-share a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:1px solid #ececec;

    border-radius:50%;

    box-shadow:0 4px 14px rgba(0,0,0,.08);

    transition:.3s;

}

.sticky-share a:hover{

    transform:scale(1.08);

}


/*======================================
 WhatsApp Follow Box
======================================*/

.whatsapp-follow{

    background:#ffffff;

    border:1px solid #e6e6e6;

    border-right:6px solid #25D366;

    border-radius:16px;

    padding:24px;

    margin:45px 0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.whatsapp-follow-content{

    flex:1;

}

.whatsapp-follow h3{

    font-size:28px;

    margin-bottom:10px;

    color:#111;

}

.whatsapp-follow p{

    font-size:21px;

    margin:0;

    color:#666;

    line-height:1.9;

}

.whatsapp-follow-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#25D366;

    color:#fff;

    padding:14px 28px;

    border-radius:50px;

    font-size:20px;

    font-weight:700;

    white-space:nowrap;

    transition:.3s;

}

.whatsapp-follow-btn:hover{

    background:#1da851;

    color:#fff;

}


/*======================================
 Telegram Box
======================================*/

.telegram-follow{

    background:#f9fcff;

    border:1px solid #d8eefc;

    border-right:6px solid #229ED9;

    border-radius:16px;

    padding:24px;

    margin:35px 0;

}


/*======================================
 Copy Link Alert
======================================*/

.copy-alert{

    display:none;

    position:fixed;

    left:50%;

    bottom:25px;

    transform:translateX(-50%);

    background:#111;

    color:#fff;

    padding:12px 20px;

    border-radius:8px;

    font-size:16px;

    z-index:99999;

}


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

@media(max-width:991px){

.sticky-share{

    display:none;

}

}


@media(max-width:768px){

.article-tools{

    flex-direction:column;

    align-items:flex-start;

}

.share-buttons{

    width:100%;

}

.share-buttons a{

    width:42px;

    height:42px;

}

.whatsapp-follow{

    flex-direction:column;

    align-items:flex-start;

    padding:20px;

}

.whatsapp-follow h3{

    font-size:24px;

}

.whatsapp-follow p{

    font-size:18px;

}

.whatsapp-follow-btn{

    width:100%;

    justify-content:center;

    font-size:18px;

}

}
/*=========================================================
 Module 4.4
 Author Box • Tags • Previous / Next
=========================================================*/


/*======================================
 Author Box
======================================*/

.author-box{

    display:flex;

    align-items:flex-start;

    gap:25px;

    margin:60px 0;

    padding:30px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

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

}

.author-avatar{

    flex:0 0 95px;

}

.author-avatar img{

    width:95px;

    height:95px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #f3f3f3;

}

.author-content{

    flex:1;

}

.author-label{

    display:inline-block;

    font-size:15px;

    color:#777;

    margin-bottom:8px;

}

.author-name{

    font-size:30px;

    line-height:1.8;

    color:#111;

    margin-bottom:12px;

    font-weight:700;

}

.author-bio{

    font-size:21px;

    line-height:2;

    color:#555;

    margin-bottom:18px;

}


/*======================================
 Author Social
======================================*/

.author-social{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.author-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f7f7f7;

    color:#333;

    border:1px solid #ececec;

    transition:.3s;

}

.author-social a:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}


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

.post-tags{

    margin:45px 0;

}

.post-tags h4{

    font-size:25px;

    margin-bottom:18px;

    color:#111;

}

.post-tags a{

    display:inline-block;

    margin:0 8px 10px 0;

    padding:10px 18px;

    border:1px solid #e6e6e6;

    border-radius:40px;

    background:#fafafa;

    color:#555;

    font-size:17px;

    transition:.3s;

}

.post-tags a:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}


/*======================================
 Previous / Next
======================================*/

.post-navigation{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    margin:60px 0;

}

.post-navigation .nav-box{

    display:flex;

    gap:18px;

    align-items:center;

    padding:20px;

    border:1px solid #ececec;

    border-radius:16px;

    background:#fff;

    transition:.3s;

}

.post-navigation .nav-box:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(0,0,0,.06);

}

.post-navigation img{

    width:110px;

    height:80px;

    border-radius:10px;

    object-fit:cover;

}

.nav-label{

    display:block;

    font-size:15px;

    color:#888;

    margin-bottom:8px;

}

.nav-title{

    font-size:22px;

    line-height:1.9;

    color:#111;

}

.nav-title:hover{

    color:var(--primary);

}


/*======================================
 Category Badges
======================================*/

.post-category-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:35px 0;

}

.post-category-list a{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    background:#f7f7f7;

    border-radius:40px;

    border:1px solid #ececec;

    color:#555;

    font-size:16px;

    transition:.3s;

}

.post-category-list a:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}


/*======================================
 Divider
======================================*/

.article-divider{

    height:1px;

    background:#ececec;

    margin:55px 0;

}


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

@media(max-width:768px){

.author-box{

    flex-direction:column;

    text-align:center;

    align-items:center;

}

.author-avatar{

    margin-bottom:10px;

}

.author-social{

    justify-content:center;

}

.author-name{

    font-size:26px;

}

.author-bio{

    font-size:19px;

}

.post-navigation{

    grid-template-columns:1fr;

}

.post-navigation .nav-box{

    padding:16px;

}

.post-navigation img{

    width:95px;

    height:72px;

}

.nav-title{

    font-size:19px;

}

.post-tags a{

    font-size:15px;

    padding:8px 14px;

}

}
/*=========================================================
 Module 4.5
 Related Posts • Comments • Bottom CTA
=========================================================*/


/*======================================
 Related Posts
======================================*/

.related-posts{

    margin:70px 0;

}

.related-posts-title{

    position:relative;

    font-size:34px;

    margin-bottom:30px;

    padding-right:18px;

    color:#111;

}

.related-posts-title:before{

    content:"";

    position:absolute;

    right:0;

    top:16px;

    width:6px;

    height:42px;

    background:var(--primary);

    border-radius:20px;

}

.related-grid{

    display:grid;

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

    gap:28px;

}

.related-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:16px;

    overflow:hidden;

    transition:.35s;

}

.related-card:hover{

    transform:translateY(-6px);

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

}

.related-card img{

    width:100%;

    height:210px;

    object-fit:cover;

    transition:.4s;

}

.related-card:hover img{

    transform:scale(1.05);

}

.related-content{

    padding:18px;

}

.related-category{

    display:inline-block;

    color:var(--primary);

    font-size:15px;

    margin-bottom:10px;

    font-weight:700;

}

.related-title{

    font-size:24px;

    line-height:2;

    color:#111;

}

.related-title:hover{

    color:var(--primary);

}


/*======================================
 Comments
======================================*/

.comments-area{

    margin:70px 0;

}

.comments-title{

    font-size:32px;

    margin-bottom:30px;

    color:#111;

}

.comment-list{

    list-style:none;

    margin:0;

    padding:0;

}

.comment{

    border-bottom:1px solid #ececec;

    padding:28px 0;

}

.comment-body{

    display:flex;

    gap:20px;

}

.comment-author img{

    width:70px;

    height:70px;

    border-radius:50%;

}

.comment-meta{

    font-size:15px;

    color:#888;

    margin-bottom:10px;

}

.comment-content{

    font-size:24px;

    line-height:2.15;

    color:#222;

}

.reply a{

    display:inline-block;

    margin-top:15px;

    color:var(--primary);

    font-size:17px;

    font-weight:700;

}


/*======================================
 Comment Form
======================================*/

.comment-respond{

    margin-top:60px;

    padding:30px;

    background:#fafafa;

    border-radius:16px;

    border:1px solid #ececec;

}

.comment-reply-title{

    font-size:30px;

    margin-bottom:25px;

}

.comment-form p{

    margin-bottom:18px;

}

.comment-form textarea{

    min-height:220px;

    resize:vertical;

}

.comment-form input,
.comment-form textarea{

    width:100%;

    border:1px solid #ddd;

    border-radius:10px;

    padding:14px 16px;

    font-size:18px;

    font-family:inherit;

}

.comment-form input:focus,
.comment-form textarea:focus{

    border-color:var(--primary);

    outline:none;

}

.comment-form .submit{

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:40px;

    padding:15px 35px;

    font-size:20px;

    cursor:pointer;

    transition:.3s;

}

.comment-form .submit:hover{

    background:var(--primary-hover);

}


/*======================================
 Bottom CTA
======================================*/

.article-bottom-cta{

    margin:70px 0;

    padding:40px;

    border-radius:18px;

    background:linear-gradient(135deg,#c40018,#8f0012);

    color:#fff;

    text-align:center;

}

.article-bottom-cta h3{

    color:#fff;

    font-size:34px;

    margin-bottom:15px;

}

.article-bottom-cta p{

    color:#fff;

    font-size:22px;

    margin-bottom:25px;

}

.article-bottom-cta a{

    display:inline-block;

    background:#fff;

    color:#c40018;

    padding:14px 32px;

    border-radius:50px;

    font-size:20px;

    font-weight:700;

    transition:.3s;

}

.article-bottom-cta a:hover{

    transform:translateY(-2px);

}


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

@media(max-width:991px){

.related-grid{

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

}

}

@media(max-width:768px){

.related-grid{

    grid-template-columns:1fr;

}

.related-posts-title{

    font-size:28px;

}

.related-card img{

    height:220px;

}

.related-title{

    font-size:22px;

}

.comment-body{

    flex-direction:column;

    gap:15px;

}

.comment-author img{

    width:60px;

    height:60px;

}

.comment-content{

    font-size:21px;

}

.comment-respond{

    padding:22px;

}

.article-bottom-cta{

    padding:28px 22px;

}

.article-bottom-cta h3{

    font-size:28px;

}

.article-bottom-cta p{

    font-size:20px;

}

.article-bottom-cta a{

    width:100%;

    text-align:center;

}

}
/*=========================================================
 No Results
=========================================================*/

.no-results{

    padding:80px 20px;

    text-align:center;

}

.no-results-inner{

    max-width:760px;

    margin:auto;

}

.no-results-icon{

    color:var(--primary);

    margin-bottom:25px;

}

.no-results-title{

    font-size:42px;

    line-height:2;

    margin-bottom:18px;

}

.no-results-text{

    font-size:24px;

    line-height:2.2;

    color:#666;

    margin-bottom:35px;

}

.no-results-actions{

    margin-bottom:35px;

}

.home-button{

    display:inline-block;

    padding:15px 34px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-size:20px;

    transition:.3s;

}

.home-button:hover{

    background:var(--primary-hover);

    color:#fff;

}

.no-results-search{

    max-width:520px;

    margin:auto;

}

@media(max-width:768px){

.no-results{

    padding:60px 20px;

}

.no-results-title{

    font-size:30px;

}

.no-results-text{

    font-size:20px;

}

.home-button{

    width:100%;

}

}
/*=========================================================
 Search Form
=========================================================*/

.search-form{

    width:100%;

}

.search-form-wrapper{

    position:relative;

    display:flex;

    align-items:center;

}

.search-field{

    width:100%;

    height:58px;

    border:2px solid #ececec;

    border-radius:50px;

    padding:0 24px 0 70px;

    font-family:"NafeesWeb",serif;

    font-size:24px;

    background:#fff;

    transition:.3s;

}

.search-field:focus{

    border-color:var(--primary);

    outline:none;

    box-shadow:0 0 0 4px rgba(196,0,24,.08);

}

.search-field::placeholder{

    color:#888;

}

.search-submit{

    position:absolute;

    left:8px;

    top:50%;

    transform:translateY(-50%);

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s;

}

.search-submit:hover{

    background:var(--primary-hover);

}

.search-submit svg{

    width:20px;

    height:20px;

}

@media(max-width:768px){

.search-field{

    height:52px;

    font-size:20px;

}

.search-submit{

    width:42px;

    height:42px;

}

}
/*=========================================================
 Comments
=========================================================*/

.comments-area{

    margin-top:70px;

}

.comments-title{

    font-size:34px;

    margin-bottom:35px;

}

.comment-list{

    list-style:none;

    margin:0;

    padding:0;

}

.comment{

    margin-bottom:35px;

}

.comment-body{

    background:#fff;

    border:1px solid #ececec;

    border-radius:16px;

    padding:25px;

}

.comment-author{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:12px;

}

.comment-author img{

    border-radius:50%;

}

.comment-author .fn{

    font-size:22px;

    font-style:normal;

    font-weight:700;

}

.comment-metadata{

    font-size:15px;

    color:#888;

    margin-bottom:15px;

}

.comment-content{

    font-size:24px;

    line-height:2.15;

}

.comment-content p{

    margin-bottom:0;

}

.reply{

    margin-top:18px;

}

.reply a{

    display:inline-block;

    color:#fff;

    background:var(--primary);

    padding:8px 18px;

    border-radius:30px;

    font-size:16px;

}

.reply a:hover{

    background:var(--primary-hover);

}

.comment-respond{

    margin-top:60px;

}

.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment{

    margin-bottom:18px;

}

.comment-form input,
.comment-form textarea{

    width:100%;

    border:1px solid #ddd;

    border-radius:10px;

    padding:15px;

    font-family:"NafeesWeb",serif;

    font-size:22px;

}

.comment-form textarea{

    resize:vertical;

    min-height:180px;

}

.comment-form input:focus,
.comment-form textarea:focus{

    border-color:var(--primary);

    outline:none;

}

.comment-form .submit{

    background:var(--primary);

    color:#fff;

    border:none;

    padding:14px 32px;

    border-radius:40px;

    font-size:20px;

    cursor:pointer;

}

.comment-form .submit:hover{

    background:var(--primary-hover);

}

@media(max-width:768px){

.comments-title{

    font-size:28px;

}

.comment-content{

    font-size:21px;

}

.comment-form input,
.comment-form textarea{

    font-size:19px;

}

.comment-form .submit{

    width:100%;

}

}
/*=========================================================
 Archive
=========================================================*/

.archive-page{

    margin:40px 0 70px;

}

.archive-header{

    margin-bottom:45px;

    padding-bottom:25px;

    border-bottom:2px solid #ececec;

}

.archive-title{

    font-size:46px;

    line-height:2;

    color:#111;

    margin-bottom:10px;

}

.archive-description{

    font-size:23px;

    color:#666;

    line-height:2;

}

.archive-pagination{

    margin-top:50px;

    text-align:center;

}

.archive-pagination .page-numbers{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    margin:0 5px;

    border-radius:50%;

    background:#f6f6f6;

    color:#222;

    transition:.3s;

}

.archive-pagination .page-numbers.current{

    background:var(--primary);

    color:#fff;

}

.archive-pagination .page-numbers:hover{

    background:var(--primary);

    color:#fff;

}

@media(max-width:768px){

.archive-title{

    font-size:34px;

}

.archive-description{

    font-size:20px;

}

}
/*=========================================================
Category Page
=========================================================*/

.category-page{

margin:40px 0;

}

.category-header{

margin-bottom:45px;

padding:35px;

background:#fafafa;

border-radius:18px;

}

.category-title{

font-size:52px;

line-height:2;

margin-bottom:12px;

}

.category-description{

font-size:24px;

line-height:2;

color:#666;

margin-bottom:18px;

}

.category-meta{

font-size:18px;

color:#999;

}

.category-featured{

display:grid;

grid-template-columns:1.3fr 1fr;

gap:35px;

align-items:center;

margin-bottom:60px;

}

.category-featured img{

width:100%;

border-radius:18px;

display:block;

}

.category-featured h2{

font-size:38px;

line-height:2;

margin:20px 0;

}

.category-featured h2 a{

color:#111;

}

.category-featured h2 a:hover{

color:var(--primary);

}

.category-featured p{

font-size:24px;

line-height:2.15;

color:#555;

}

@media(max-width:991px){

.category-featured{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.category-header{

padding:22px;

}

.category-title{

font-size:34px;

}

.category-description{

font-size:20px;

}

.category-featured h2{

font-size:28px;

}

.category-featured p{

font-size:20px;

}

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

.sidebar{

margin:40px 0;

}

.widget{

background:#fff;

border:1px solid #ececec;

border-radius:18px;

padding:22px;

margin-bottom:30px;

}

.widget-title{

font-size:30px;

margin-bottom:25px;

padding-bottom:15px;

border-bottom:2px solid var(--primary);

}

.sidebar-post{

display:flex;

gap:15px;

margin-bottom:20px;

align-items:center;

}

.sidebar-post:last-child{

margin-bottom:0;

}

.sidebar-post-image img{

width:110px;

height:80px;

object-fit:cover;

border-radius:10px;

display:block;

}

.sidebar-post-content h4{

font-size:21px;

line-height:1.9;

margin-bottom:8px;

}

.sidebar-post-content h4 a{

color:#111;

}

.sidebar-post-content h4 a:hover{

color:var(--primary);

}

.sidebar-post-content span{

font-size:15px;

color:#888;

}

.widget-categories ul{

list-style:none;

padding:0;

margin:0;

}

.widget-categories li{

display:flex;

justify-content:space-between;

border-bottom:1px solid #ececec;

padding:12px 0;

}

.widget-categories li:last-child{

border-bottom:none;

}

.widget-categories a{

color:#222;

}

.widget-categories a:hover{

color:var(--primary);

}

.sidebar-ad{

height:260px;

display:flex;

align-items:center;

justify-content:center;

background:#f7f7f7;

border:2px dashed #ddd;

border-radius:12px;

font-size:22px;

color:#999;

}

@media(max-width:991px){

.sidebar{

margin-top:60px;

}

}
/*=========================================================
Search Page
=========================================================*/

.search-page{

    margin:40px 0 70px;

}

.search-header{

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:18px;

    padding:30px;

    margin-bottom:40px;

}

.search-title{

    font-size:42px;

    line-height:2;

    color:#111;

    margin-bottom:10px;

}

.search-count{

    font-size:21px;

    color:#777;

}

.search-page .news-grid{

    margin-top:10px;

}

.search-page mark{

    background:#fff4b8;

    color:#111;

    padding:2px 5px;

    border-radius:4px;

}

@media(max-width:768px){

.search-header{

    padding:20px;

}

.search-title{

    font-size:30px;

}

.search-count{

    font-size:18px;

}

}
/*=========================================================
404 Page
=========================================================*/

.error-404-page{

    margin:50px 0 80px;

}

.error-404{

    text-align:center;

    max-width:900px;

    margin:0 auto 70px;

}

.error-code{

    font-size:120px;

    font-weight:700;

    line-height:1;

    color:var(--primary);

    margin-bottom:20px;

}

.error-title{

    font-size:46px;

    line-height:1.8;

    margin-bottom:18px;

    color:#111;

}

.error-description{

    font-size:24px;

    line-height:2;

    color:#666;

    max-width:700px;

    margin:0 auto 35px;

}

.error-actions{

    margin-bottom:35px;

}

.error-search{

    max-width:650px;

    margin:0 auto;

}

.latest-news-404{

    margin-top:80px;

}

.latest-news-404 .section-title{

    margin-bottom:35px;

}

@media(max-width:768px){

.error-code{

    font-size:80px;

}

.error-title{

    font-size:32px;

}

.error-description{

    font-size:20px;

}

}