/* ============================================================
PUBLIC WEBSITE STYLESHEET
Mobile-first, responsive, professional news design.
============================================================ */
/* --- CSS Variables --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;700&display=swap');
:root {
--color-primary: #1a1a2e;
--color-accent: #e94560;
--color-accent-dark: #c73652;
--color-bg: #f8f9fa;
--color-white: #ffffff;
--color-text: #2d2d2d;
--color-text-light: #666666;
--color-text-muted: #999999;
--color-border: #e0e0e0;
--color-dark-bg: #1a1a2e;
--color-dark-text: #a0a0b8;
--font-main: 'Georgia', 'Times New Roman', serif;
--font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
--max-width: 1200px;
--header-height: 60px;
--radius: 8px;
--shadow: 0 2px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
}
/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: var(--font-ui);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-dark); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
/* --- Container --- */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 16px;
}
/* --- Top Bar --- */
.top-bar {
background: var(--color-dark-bg);
color: var(--color-dark-text);
font-size: 12px;
padding: 6px 0;
}
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.top-bar-right { display: flex; gap: 12px; }
.top-bar-right a { color: var(--color-dark-text); font-weight: 600; }
.top-bar-right a:hover { color: #fff; }
/* --- Header --- */
.site-header {
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
padding: 16px 0;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.logo-text {
font-family: var(--font-main);
font-size: 28px;
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.5px;
}
.logo-text:hover { color: var(--color-accent); }
.logo-img { max-height: 50px; width: auto; }
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.mobile-menu-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--color-primary);
transition: all 0.3s;
}
.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* --- Navigation --- */
.main-nav {
background: var(--color-primary);
position: sticky;
top: 0;
z-index: 100;
}
.main-nav .container { display: flex; align-items: center; justify-content: space-between; }
.nav-list { display: flex; align-items: center; }
.nav-link {
display: block;
padding: 14px 16px;
color: #ccc;
font-size: 22px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.2s;
border-bottom: 3px solid transparent;
}
.nav-link:hover, .nav-link.active {
color: #fff;
background: rgba(233, 69, 96, 0.15);
border-bottom-color: var(--color-accent);
}
.nav-search { display: flex; align-items: center; }
.nav-search input {
padding: 8px 14px;
border: none;
border-radius: 4px 0 0 4px;
font-size: 13px;
outline: none;
width: 180px;
}
.nav-search button {
padding: 8px 12px;
background: var(--color-accent);
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
font-size: 14px;
}
/* --- Breaking News --- */
.breaking-bar {
background: var(--color-accent);
color: #fff;
padding: 8px 0;
overflow: hidden;
}
.breaking-inner { display: flex; align-items: center; gap: 16px; }
.breaking-label {
font-weight: 800;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
background: rgba(0,0,0,0.2);
padding: 4px 12px;
border-radius: 3px;
white-space: nowrap;
animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
.breaking-ticker { position: relative; height: 20px; overflow: hidden; flex: 1; }
.breaking-item {
position: absolute;
top: 0; left: 0;
color: #fff;
font-size: 14px;
font-weight: 600;
opacity: 0;
transition: opacity 0.5s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.breaking-item.active { opacity: 1; }
.breaking-item:hover { text-decoration: underline; }
/* --- Main Content --- */
.site-main { padding: 30px 0; min-height: 60vh; }
/* --- Section Headings --- */
.section-heading {
font-family: var(--font-main);
font-size: 28px;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px solid var(--color-accent);
display: flex;
align-items: center;
justify-content: space-between;
}
.section-heading a { font-size: 14px; font-family: var(--font-ui); font-weight: 600; }
/* --- News Cards --- */
.news-grid {
display: grid;
gap: 24px;
margin-bottom: 32px;
}
.news-grid-3 { grid-template-columns: repeat(3, 1fr); }
.news-grid-2 { grid-template-columns: repeat(2, 1fr); }
.news-grid-4 { grid-template-columns: repeat(4, 1fr); }
.news-card {
background: var(--color-white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: transform 0.2s, box-shadow 0.2s;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.news-card-image { display: block; overflow: hidden; }
.news-card-image img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.3s; }
.news-card:hover .news-card-image img { transform: scale(1.05); }
.news-card-body { padding: 16px; }
.news-card-category {
display: inline-block;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-accent);
margin-bottom: 8px;
}
.news-card-title { font-family: var(--font-main); font-size: 22px; line-height: 2 !important; margin-bottom: 8px; }
.news-card-title a { color: var(--color-primary); }
.news-card-title a:hover { color: var(--color-accent); }
.news-card-excerpt { font-size: 17px; color: var(--color-text-light); line-height: 2.3 !important; margin-bottom: 10px; }
.news-card-meta { font-size: 15px; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; }
.meta-sep { color: var(--color-border); }
/* Large card (hero) */
.news-card-large .news-card-image img { height: 350px; }
.news-card-large .news-card-title { font-size: 26px; }
.news-card-large .news-card-excerpt { font-size: 18px; }
/* Horizontal card */
.news-card-horizontal { display: flex; }
.news-card-horizontal .news-card-image { width: 200px; flex-shrink: 0; }
.news-card-horizontal .news-card-image img { height: 100%; }
.news-card-horizontal .news-card-body { flex: 1; }
/* --- Sidebar --- */
.content-layout { display: grid; grid-template-columns: 1fr 340px; gap: 30px; }
.sidebar { display: flex; flex-direction: column; gap: 24px; }
.sidebar-widget {
background: var(--color-white);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow);
}
.sidebar-widget h3 {
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-primary);
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-accent);
}
.sidebar-list-item {
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
.sidebar-list-item:last-child { border-bottom: none; }
.sidebar-list-item a { color: var(--color-text); font-size: 15px; font-weight: 600; line-height: 1.6; }
.sidebar-list-item a:hover { color: var(--color-accent); }
.sidebar-list-item .meta { font-size: 13px; color: var(--color-text-muted); margin-top: 3px; }
/* --- Ad Slots --- */
.ad-slot {
margin: 24px 0;
text-align: center;
padding: 10px;
background: var(--color-white);
border: 1px dashed var(--color-border);
border-radius: var(--radius);
min-height: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ad-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text-muted);
margin-bottom: 8px;
}
.ad-container { max-width: 100%; }
/* --- Breadcrumb --- */
.breadcrumb-nav { margin-bottom: 20px; }
.breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.breadcrumb-item { font-size: 14px; color: var(--color-text-muted); }
.breadcrumb-item a { color: var(--color-text-light); }
.breadcrumb-item a:hover { color: var(--color-accent); }
.breadcrumb-sep { margin: 0 6px; color: var(--color-border); }
/* --- Pagination --- */
.pagination { margin: 32px 0; }
.pagination-list { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pagination-link {
display: inline-block;
padding: 10px 16px;
border: 1px solid var(--color-border);
border-radius: 6px;
font-size: 15px;
font-weight: 600;
color: var(--color-text);
transition: all 0.2s;
}
.pagination-link:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination-link.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.pagination-dots span { padding: 10px 8px; color: var(--color-text-muted); }
/* --- Footer --- */
.site-footer {
background: var(--color-dark-bg);
color: var(--color-dark-text);
padding: 48px 0 0;
margin-top: 40px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
padding-bottom: 32px;
}
.footer-heading {
color: #fff;
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-about { font-size: 14px; line-height: 1.8; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--color-dark-text); font-size: 14px; transition: color 0.2s; }
.footer-links a:hover { color: #fff; }
.footer-social { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.footer-social a {
color: var(--color-dark-text);
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 4px;
transition: all 0.2s;
}
.footer-social a:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 20px 0;
text-align: center;
font-size: 14px;
}
/* --- 404 Page --- */
.error-page { text-align: center; padding: 80px 20px; }
.error-page h1 { font-size: 100px; color: var(--color-accent); font-weight: 800; }
.error-page h2 { font-size: 26px; color: var(--color-primary); margin: 16px 0; }
.error-page p { color: var(--color-text-light); margin-bottom: 24px; }
.error-page .btn {
display: inline-block;
padding: 12px 32px;
background: var(--color-accent);
color: #fff;
border-radius: 6px;
font-weight: 700;
}
/* --- Utility --- */
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.text-center { text-align: center; }
/* --- Responsive --- */
@media (max-width: 992px) {
.content-layout { grid-template-columns: 1fr; }
.news-grid-3 { grid-template-columns: repeat(2, 1fr); }
.news-grid-4 { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.mobile-menu-toggle { display: flex; }
.main-nav .container { flex-direction: column; }
.nav-list {
display: none;
flex-direction: column;
width: 100%;
}
.main-nav.open .nav-list { display: flex; }
.nav-link { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-search { width: 100%; padding: 10px 0; }
.nav-search input { width: 100%; }
.news-grid-3, .news-grid-2, .news-grid-4 { grid-template-columns: 1fr; }
.news-card-horizontal { flex-direction: column; }
.news-card-horizontal .news-card-image { width: 100%; }
.news-card-large .news-card-image img { height: 220px; }
.footer-grid { grid-template-columns: 1fr; }
.header-inner { flex-wrap: wrap; }
.logo-text { font-size: 24px; }
.section-heading { font-size: 24px; }
.news-card-title { font-size: 19px; }
.news-card-excerpt { font-size: 16px; }
}
@media (max-width: 480px) {
.container { padding: 0 12px; }
.section-heading { font-size: 22px; }
.news-card-title { font-size: 18px; }
.news-card-large .news-card-title { font-size: 22px; }
}
/* ============================================
STICKY NAVBAR FIX
============================================ */
html, body {
overflow-x: clip;
}
.main-nav {
position: sticky !important;
top: 0 !important;
left: 0;
width: 100%;
z-index: 9999 !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
/* ============================================
NAVBAR FIX: SHOW ALL PAGES (NO CUTTING)
============================================ */
.main-nav .container {
flex-wrap: wrap;
justify-content: center;
}
.nav-list {
flex-wrap: wrap;
justify-content: center;
}
.nav-link {
padding: 13px 11px;
font-size: 12.5px;
white-space: nowrap;
}
.nav-search { padding: 8px 0; }
.nav-search input { width: 150px; }
@media (max-width: 992px) {
.nav-link { padding: 10px 8px; font-size: 11.5px; }
.nav-search input { width: 120px; }
}
@media (max-width: 768px) {
.main-nav .container { flex-direction: column; }
.nav-list { flex-direction: column; flex-wrap: nowrap; width: 100%; }
.nav-link { padding: 12px 16px; font-size: 14px; }
.nav-search { width: 100%; padding: 10px 0; }
.nav-search input { width: 100%; }
}
/* ============================================
NAVBAR FIX: MENU LEFT + SEARCH RIGHT (1 LINE)
============================================ */
.main-nav .container {
max-width: 100%;
padding: 0 16px;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.nav-list {
flex-wrap: wrap;
justify-content: flex-start;
}
.nav-link {
padding: 13px 9px;
font-size: 12px;
}
.nav-search {
margin-left: auto;
padding: 8px 0;
}
.nav-search input {
width: 140px;
}
@media (max-width: 992px) {
.nav-link { padding: 10px 7px; font-size: 11px; }
.nav-search input { width: 110px; }
}
@media (max-width: 768px) {
.main-nav .container { flex-direction: column; padding: 0; }
.nav-list { flex-direction: column; flex-wrap: nowrap; width: 100%; }
.nav-link { padding: 12px 16px; font-size: 14px; }
.nav-search { margin-left: 0; width: 100%; padding: 10px 16px; }
.nav-search input { width: 100%; }
}
/* ============================================
NAVBAR FIX: EQUAL SPACING + SEARCH RIGHT
============================================ */
.main-nav .container {
max-width: 100%;
padding: 0 16px;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.nav-list {
flex: 1;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.nav-link {
padding: 13px 6px;
font-size: 22px;
white-space: nowrap;
}
.nav-search {
margin-left: 0;
flex-shrink: 0;
}
.nav-search input {
width: 150px;
}
@media (max-width: 1100px) {
.nav-list { flex-wrap: wrap; justify-content: center; }
.nav-link { padding: 10px 8px; font-size: 11px; }
.nav-search input { width: 120px; }
}
@media (max-width: 768px) {
.main-nav .container { flex-direction: column; padding: 0; gap: 0; }
.nav-list { flex-direction: column; flex-wrap: nowrap; width: 100%; justify-content : flex-start; }
.nav-link { padding: 12px 16px; font-size: 14px; }
.nav-search { width: 100%; padding: 10px 16px; }
.nav-search input { width: 100%; }
}
/* ======================== ====================
URDU (RTL) SUPPORT — AUTO DETECT
============================================  /
.urdu-text {
direction: rtl;
text-align: right;
font-family: 'Noto Nastaliq Urdu', 'Georgia', serif;
line-height: 2.4;
word-spacing: 2px;
}
.news-card-title.urdu-text { font-size : 22px; line-height: 2.3; }
.news-card-excerpt.urdu-text { font-size: 17px; line-height: 2.4; }
.hero-card-title.urdu-text { font-size: 32px; line-height: 2.3; }
.hero-card-excerpt .urdu-text { line-height: 2.3; }
.article-title.urdu-text { font-size: 38px; line-height: 2.3; }
.article-subtitle.urdu-text { line-height: 2.3; }
.article-content.urdu-text { font -size: 21px; line-height: 2.9; }
.article-content.urdu-text p { margin-bottom: 26px; }
/  ============================================
URDU FONT — FULL FORCE (Nastaliq on ALL Urdu text)
============================================  /
.urdu-text,
.urdu-text a,
.urdu-text span,
.urdu-text p,
.urdu-text h1,
.urdu-text h2,
.urdu-text h3,
.news-card-title.urdu-text,
.news-card-title.urdu-text a,
.hero-card-title.urdu-text,
.hero-card-title.urdu-text a,
.hero-side-title.urdu-text,
.hero-side-title.urdu-text a,
.article-title.urdu-text,
.article-content.urdu-text,
.article-content.urdu-text p  {
font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Georgia', serif !important;
direction: rtl !important;
text-align: right;
}
.urdu-text { line-height: 2.4; word-spa cing: 2px; }
.news-card-title.urdu-text, .hero-side-title.urdu-text { font-size: 22px; line-height: 2.3; }
.hero-card-title.urdu-text { font-size: 32px; line-height: 2.3; }
.articl e-title.urdu-text { font-size: 38px; line-height: 2.3; }
.article-content.urdu-text { font-size: 21px; line-height: 2.9; }
.article-content.urdu-text p { margin-bottom: 26px; }
/  ============================================
MOBILE MENU FIX — menu default CLOSED
============================================  /
@media (max-width: 768px) {
.nav-list {
display: none !important;
flex-direction: column;
width: 100%;
}
.main-nav.open .nav-list {
display: flex !important;
max-height: calc(100 vh - 140px);
overflow-y: auto;
}
.mobile-menu-toggle {
display: flex !important;
}
}
/  ============================================
JAMEEL NOORI NASTALEEQ — URDU FONT
============================================ */
@font-face {
font-family: 'Jameel Noori Nastaleeq'; 
src: url('/assets/fonts/jameel-noori.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Har post/article content + titles par Urdu font */
.article-content,
.article-body,
.post-content,
.article-title,
.article-content p,
h1, h2, h3,
.news-card .card-title,
[dir="rtl"],
.urdu {
font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
}
/* Nastaleeq font ke liye line-height (warna lines overlap hoti hain) */
.article-content p,
.article-body p,
.post-content p {
line-height: 2.7 !important;
font-size: 21px !important;
margin-bottom: 22px;
}
/* Urdu titles ke liye /
.article-title, h1 {
line-height: 2.3 !important;
}
/ ============================================
URDU CHHOTAY TEXT KA FIX — Tags & Pills
============================================ */
a[href*="/tag/"],
.article-tags a,
.tags a,
.tag-link,
.tag-pill,
.post-tags a {
font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
font-size: 17px !important;
line-height: 2.3 !important;
padding: 8px 18px !important;
height: auto !important;
}
/* Tags label ( "Tags: ") ke liye  /
.tags-label,
.article-tags strong,
.article-tags span {
font-size: 16px !important;
font-weight: 700 !important;
}
/  ============================================
✅ AUTHOR PROFILE PHOTO FIX — Full Round Photo
============================================  /
.author-avatar,
.author-photo,
.author-img,
.author-thumb,
.author-header img,
.author-profile img,
.author-info img,
.author-top img {
width: 150px !important;
height: 150px !im portant;
object-fit: cover !important;
object-position: center 25% !important;
border-radius: 50% !important;
border: 4px solid #fff !important;
box-shadow: 0 4px 15px rgba(0,0,0,. 15) !important;
flex-shrink: 0 !important;
}
@media (max-width: 768px) {
.author-avatar,
.author-photo,
.author-img,
.author-thumb,
.author-header img,
.author-profile img,
.author -info img,
.author-top img {
width: 110px !important;
height: 110px !important;
}
}
/  ============================================
✅ AUTHOR PHOTO FIX v2 — Full Round Profile
============================================  /
img[src*= "author "],
.author-avatar,
.author-photo,
.author-img,
.author-thumb,
.author-header img,
.author-profile img,
.author-info img,
.author-top img,
.author-card img,
.author-hero img,
.auth or-box img {
width: 160px !important;
height: 160px !important;
min-width: 160px !important;
max-width: 160px !important;
object-fit: cover !important;
object-position: center 20%  !important;
border-radius: 50% !important;
border: 4px solid #fff !important;
box-shadow: 0 4px 15px rgba(0,0,0,.2) !important;
flex-shrink: 0 !important;
}
@media (max-width: 768p x) {
img[src*= "author "],
.author-avatar, .author-photo, .author-img, .author-thumb,
.author-header img, .author-profile img, .author-info img,
.author-top img, .author-card img, .author-hero img, .auth or-box img {
width: 110px !important;
height: 110px !important;
min-width: 110px !important;
}
}
/  ============================================
✅ REPORTERS PAGE PHOTO FIX — poora sir/chehra dikhe
============================================ */
.author-card img,
.reporter-card i mg,
.author-grid img,
.authors-grid img,
.reporters-grid img,
.team-grid img,
.author-list img,
.author-card-photo,
img[src*= "author "],
img[src*= "reporter "] {
object-fit: cover !important;
object-position: top center !important;
}
/* ============================================
✅ INCREASED FONT SIZES — Easy Readable (Poori site par)
(Jameel Noori Nastaleeq font SAME hai, sirf sizes barhay)
============================================ */

/* --- News Cards (Homepage + Category pages) --- */
.news-card-title,
.news-card-title a {
font-size: 22px !important;
line-height: 2.1 !important;
}

.news-card-excerpt {
font-size: 17px !important;
line-height: 2.3 !important;
}

.news-card-category {
font-size: 13px !important;
}

.news-card-meta,
.news-card-meta time,
.news-card-meta span,
.news-card-author {
font-size: 15px !important;
}

/* --- Hero Section --- */
.hero-card-title {
font-size: 32px !important;
line-height: 2 !important;
}

.hero-card-excerpt {
font-size: 18px !important;
line-height: 2.2 !important;
}

.hero-side-title {
font-size: 20px !important;
line-height: 2 !important;
}

.hero-card-category,
.hero-side-category {
font-size: 13px !important;
}

.hero-card-meta {
font-size: 15px !important;
}

/* --- Article Page --- */
.article-title, h1 {
font-size: 38px !important;
line-height: 2.3 !important;
}

.article-subtitle {
font-size: 20px !important;
line-height: 2.2 !important;
}

.article-content,
.article-content p {
font-size: 21px !important;
line-height: 2.7 !important;
margin-bottom: 22px !important;
}

.article-meta {
font-size: 15px !important;
}

/* --- Author Page --- */
.author-profile-name {
font-size: 34px !important;
line-height: 2 !important;
}

.author-profile-designation {
font-size: 17px !important;
}

.author-profile-bio {
font-size: 18px !important;
line-height: 2.4 !important;
}

.author-profile-country {
font-size: 15px !important;
}

/* --- Section Headings --- */
.section-heading,
.section-heading span {
font-size: 28px !important;
}

/* --- Sidebar --- */
.sidebar-widget h3 {
font-size: 18px !important;
}

.sidebar-list-item a {
font-size: 15px !important;
}

/* --- Footer --- */
.footer-heading {
font-size: 18px !important;
}

.footer-about,
.footer-links a {
font-size: 14px !important;
}
/* ============================================
   ✅ FINAL FONT SIZES — Very Large & Easy to Read
   ============================================ */

/* News Card Titles — BADE BADE */
.news-card-title,
.news-card-title a {
    font-size: 26px !important;
    line-height: 2.2 !important;
    font-weight: 700 !important;
}

/* News Card Excerpt — Summary text */
.news-card-excerpt {
    font-size: 19px !important;
    line-height: 2.4 !important;
}

/* Category Labels (BUSINESS, POLITICS, etc.) */
.news-card-category {
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* Author + Date Meta */
.news-card-meta,
.news-card-meta time,
.news-card-meta span,
.news-card-author {
    font-size: 16px !important;
}

/* Hero Section Titles */
.hero-card-title,
.hero-card-title a {
    font-size: 36px !important;
    line-height: 2.1 !important;
}

.hero-card-excerpt {
    font-size: 20px !important;
    line-height: 2.3 !important;
}

.hero-side-title,
.hero-side-title a {
    font-size: 24px !important;
    line-height: 2.1 !important;
}

/* Section Headings (Latest News, Pakistan, World) */
.section-heading,
.section-heading span {
    font-size: 32px !important;
}

/* Article Page */
.article-title, h1 {
    font-size: 42px !important;
    line-height: 2.4 !important;
}

.article-content,
.article-content p {
    font-size: 23px !important;
    line-height: 2.8 !important;
}

.article-subtitle {
    font-size: 22px !important;
    line-height: 2.3 !important;
}

/* Sidebar */
.sidebar-widget h3 {
    font-size: 20px !important;
}

.sidebar-list-item a {
    font-size: 17px !important;
    line-height: 2 !important;
}
/* ============================================
   ✅ FULL RTL SUPPORT — Urdu Text (Right to Left)
   ============================================ */

/* --- All Urdu Text Elements --- */
.news-card-title,
.news-card-title a,
.news-card-excerpt,
.hero-card-title,
.hero-card-title a,
.hero-side-title,
.hero-side-title a,
.hero-card-excerpt,
.article-title,
.article-content,
.article-content p,
.article-subtitle,
.author-profile-name,
.author-profile-bio,
.section-heading span {
    direction: rtl !important;
    text-align: right !important;
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', 'Georgia', serif !important;
}

/* --- Card Titles --- */
.news-card-title,
.news-card-title a {
    font-size: 26px !important;
    line-height: 2.3 !important;
}

/* --- Card Excerpts --- */
.news-card-excerpt {
    font-size: 19px !important;
    line-height: 2.5 !important;
}

/* --- Hero Section --- */
.hero-card-title,
.hero-card-title a {
    font-size: 36px !important;
    line-height: 2.2 !important;
}

.hero-side-title,
.hero-side-title a {
    font-size: 24px !important;
    line-height: 2.2 !important;
}

.hero-card-excerpt {
    font-size: 20px !important;
    line-height: 2.4 !important;
}

/* --- Article Page --- */
.article-title {
    font-size: 42px !important;
    line-height: 2.4 !important;
}

.article-content,
.article-content p {
    font-size: 23px !important;
    line-height: 2.9 !important;
    margin-bottom: 24px !important;
}

.article-subtitle {
    font-size: 22px !important;
    line-height: 2.3 !important;
}

/* --- Author Page --- */
.author-profile-name {
    font-size: 34px !important;
    line-height: 2.1 !important;
}

.author-profile-bio {
    font-size: 19px !important;
    line-height: 2.5 !important;
}

/* --- Section Headings --- */
.section-heading span {
    font-size: 30px !important;
}

/* --- Meta Information (Author • Date) --- */
.news-card-meta,
.hero-card-meta,
.article-meta {
    direction: ltr !important;
    text-align: left !important;
    font-family: var(--font-ui) !important;
}
/* Force RTL on all text content */
[dir="rtl"],
[lang="ur"],
.urdu,
body {
    direction: rtl;
}

.news-card-title,
.news-card-excerpt,
.hero-card-title,
.hero-side-title,
.article-title,
.article-content {
    unicode-bidi: embed;
}
/* ============================================
   ✅ NAVBAR — URDU CATEGORIES (One Row, Readable)
   ============================================ */

/* Navigation Links — Urdu Font + Bada Size */
.nav-link {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 18px !important;
    line-height: 2.2 !important;
    padding: 12px 14px !important;
    white-space: nowrap !important;
    direction: rtl !important;
    text-align: right !important;
    font-weight: 700 !important;
}

/* Navbar Container — Flex wrap disable (sab ek row mein) */
.main-nav .container {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.main-nav .container::-webkit-scrollbar {
    display: none !important;
}

/* Nav List — Compact spacing */
.nav-list {
    flex-wrap: nowrap !important;
    gap: 2px !important;
}

/* Search Box — Compact */
.nav-search {
    flex-shrink: 0 !important;
    margin-left: 10px !important;
}

.nav-search input {
    width: 120px !important;
    font-size: 13px !important;
}

/* Mobile — Allow scroll if needed */
@media (max-width: 1200px) {
    .nav-link {
        font-size: 16px !important;
        padding: 12px 10px !important;
    }
}

@media (max-width: 992px) {
    .main-nav .container {
        flex-wrap: wrap !important;
    }
    .nav-list {
        flex-wrap: wrap !important;
    }
    .nav-link {
        font-size: 16px !important;
        padding: 10px 12px !important;
    }
}
/* ============================================
   ✅ NAVBAR — URDU + ONE ROW FIX
   ============================================ */

/* Navbar Container — Sab ek line mein */
.main-nav .container {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    white-space: nowrap !important;
}

.main-nav .container::-webkit-scrollbar {
    display: none !important;
}

/* Nav List — Compact */
.nav-list {
    flex-wrap: nowrap !important;
    gap: 0 !important;
    white-space: nowrap !important;
}

/* Navigation Links — Urdu Font + RTL */
.nav-link {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 16px !important;
    line-height: 2 !important;
    padding: 12px 12px !important;
    white-space: nowrap !important;
    direction: rtl !important;
    text-align: right !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

/* Search Box */
.nav-search {
    flex-shrink: 0 !important;
    margin-right: 10px !important;
}

.nav-search input {
    width: 120px !important;
    font-size: 13px !important;
}

/* Mobile — Allow scroll */
@media (max-width: 992px) {
    .nav-link {
        font-size: 14px !important;
        padding: 12px 10px !important;
    }
    .nav-search input {
        width: 100px !important;
    }
}

@media (max-width: 768px) {
    .main-nav .container {
        flex-wrap: wrap !important;
    }
    .nav-list {
        flex-wrap: wrap !important;
    }
}
/* ============================================
   ✅ NAVBAR — HOME ICON + READABLE FONT SIZE
   ============================================ */

/* Navigation Links — Urdu Font + Bada Size */
.nav-link {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 20px !important;
    line-height: 2.2 !important;
    padding: 12px 8px !important;
    white-space: nowrap !important;
    direction: rtl !important;
    text-align: right !important;
    font-weight: 700 !important;
}

/* HOME Link — Icon Only (text hide) */
.nav-link[href="/"],
.nav-link[href*="/home"],
.nav-link.active[href="/"] {
    font-size: 0 !important;
    padding: 12px 16px !important;
}

.nav-link[href="/"]::before,
.nav-link[href*="/home"]::before,
.nav-link.active[href="/"]::before {
    content: '';
    font-size: 22px !important;
    margin-right: 0;
}

/* Navbar Container — Sab ek line mein */
.main-nav .container {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    white-space: nowrap !important;
}

.main-nav .container::-webkit-scrollbar {
    display: none !important;
}

/* Nav List — Compact */
.nav-list {
    flex-wrap: nowrap !important;
    gap: 0 !important;
    white-space: nowrap !important;
}

/* Search Box */
.nav-search {
    flex-shrink: 0 !important;
    margin-right: 10px !important;
}

.nav-search input {
    width: 130px !important;
    font-size: 14px !important;
}

/* Mobile */
@media (max-width: 992px) {
    .nav-link {
        font-size: 18px !important;
        padding: 12px 6px !important;
    }
    .nav-link[href="/"]::before,
    .nav-link[href*="/home"]::before,
    .nav-link.active[href="/"]::before {
        font-size: 20px !important;
    }
    .nav-search input {
        width: 110px !important;
    }
}

@media (max-width: 768px) {
    .main-nav .container {
        flex-wrap: wrap !important;
    }
    .nav-list {
        flex-wrap: wrap !important;
    }
}
/* ============================================
   ✅ SIRF HOME BUTTON — Icon Only (Baki sab text rahenge)
   ============================================ */

/* HOME link ka text chhupa dein */
.nav-link[href="/"],
.nav-link[href="./"],
.nav-link[href="index.php"] {
    font-size: 0 !important; /* Text ko 0 kar diya taake chhup jaye */
    padding: 12px 18px !important;
    min-width: 40px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* HOME link par sirf Icon dikhayein */
.nav-link[href="/"]::before,
.nav-link[href="./"]::before,
.nav-link[href="index.php"]::before {
    content: '🏠';
    font-size: 24px !important; /* Icon ka size */
    line-height: 1;
    display: inline-block;
}

/* Agar HOME active (current page) ho to bhi icon hi rahe */
.nav-link.active[href="/"]::before,
.nav-link.active[href="./"]::before {
    content: '🏠';
}

/* ============================================
   ✅ HOME LINK — GUARANTEED ICON (1st nav item)
   Ye rule pehle wale HOME item ko uski href se
   qatta nazar (independent) icon dikhata hai,
   taake agar href match na ho tab bhi icon aa jaye
   ============================================ */
.nav-list > li:first-child > .nav-link,
.nav-list > .nav-link:first-child {
    font-size: 0 !important;
    padding: 12px 16px !important;
    min-width: 40px;
    text-align: center;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.nav-list > li:first-child > .nav-link::before,
.nav-list > .nav-link:first-child::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5'/></svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Undo the icon-hiding rule for every other item (safety net in case a
   theme markup layer makes :first-child ambiguous) */
.nav-list > li:not(:first-child) > .nav-link,
.nav-list > .nav-link:not(:first-child) {
    font-size: 20px !important;
    padding: 12px 8px !important;
}

.nav-list > li:not(:first-child) > .nav-link::before,
.nav-list > .nav-link:not(:first-child)::before {
    content: none !important;
}

@media (max-width: 992px) {
    .nav-list > li:first-child > .nav-link::before,
    .nav-list > .nav-link:first-child::before {
        width: 18px;
        height: 18px;
    }
    .nav-list > li:not(:first-child) > .nav-link,
    .nav-list > .nav-link:not(:first-child) {
        font-size: 18px !important;
    }
}
/* ============================================
   ✅ FOOTER — URDU RTL SUPPORT
   ============================================ */

/* Footer ko RTL karein */
.site-footer {
    direction: rtl !important;
    text-align: right !important;
}

/* Footer headings */
.footer-heading {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 22px !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Footer links */
.footer-links a {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 16px !important;
    line-height: 2.2 !important;
    text-align: right !important;
    direction: rtl !important;
    display: block;
    margin-bottom: 8px;
}

/* Footer about text */
.footer-about {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 16px !important;
    line-height: 2.2 !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Footer social links */
.footer-social {
    direction: ltr !important; /* Social icons LTR rahen */
    justify-content: flex-end !important;
}

/* Footer bottom copyright */
.footer-bottom {
    direction: rtl !important;
    text-align: center !important;
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
}

/* Email link */
.footer-about a {
    direction: ltr !important;
    display: inline-block;
}
/* ============================================
   ✅ FOOTER — BARA FONT + URDU RTL
   ============================================ */

/* Footer ko RTL karein */
.site-footer {
    direction: rtl !important;
    text-align: right !important;
}

/* Footer headings — bara font */
.footer-heading {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 24px !important;
    text-align: right !important;
    direction: rtl !important;
    margin-bottom: 18px !important;
}

/* Footer about text — bara font */
.footer-about {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 19px !important;
    line-height: 2.3 !important;
    text-align: right !important;
    direction: rtl !important;
    margin-bottom: 16px !important;
}

/* Footer links — bara font */
.footer-links a {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 19px !important;
    line-height: 2.3 !important;
    text-align: right !important;
    direction: rtl !important;
    display: block;
    margin-bottom: 10px !important;
}

/* Footer social links */
.footer-social a {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 16px !important;
    direction: ltr !important;
}

/* Footer bottom copyright */
.footer-bottom {
    direction: rtl !important;
    text-align: center !important;
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 17px !important;
    padding: 24px 0 !important;
}

/* Email link */
.footer-about a {
    direction: ltr !important;
    display: inline-block;
}
/* ============================================
   ✅ AUTHOR PAGE - FULL IMAGES (no cropping)
   ============================================ */

/* Author page ke news cards mein images full dikhayein */
.author-page .news-card-image img,
.cv-wrap ~ .content-layout .news-card-image img {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    width: 100% !important;
}

/* Image container ko bhi adjust karein */
.author-page .news-card-image,
.cv-wrap ~ .content-layout .news-card-image {
    height: auto !important;
    overflow: visible !important;
}

/* Card body ko bhi adjust karein taake layout sahi rahe */
.author-page .news-card,
.cv-wrap ~ .content-layout .news-card {
    display: flex;
    flex-direction: column;
}

.author-page .news-card-body,
.cv-wrap ~ .content-layout .news-card-body {
    flex: 1;
}
/* ============================================
   ✅ GLOBAL IMAGE FIX — Sab Pages Par Full Images
   ============================================ */

/* News card images — height auto, no cropping */
.news-card-image img {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    width: 100% !important;
}

/* Image container */
.news-card-image {
    height: auto !important;
    overflow: visible !important;
}

/* Card layout fix */
.news-card {
    display: flex !important;
    flex-direction: column !important;
}

.news-card-body {
    flex: 1 !important;
}

/* Hero images bhi full dikhayein */
.hero-card-image img,
.hero-side-image img {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* Category page images */
.category-card-image img {
    height: auto !important;
    object-fit: contain !important;
}
/* ============================================
   ✅ ARTICLE PAGE — AUTHOR BOX FIX (RTL + Urdu)
   ============================================ */

/* Author box ko RTL karein */
.article-author-box,
.author-box,
.cv-wrap {
    direction: rtl !important;
    text-align: right !important;
}

/* Author name */
.article-author-name,
.cv-name {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 28px !important;
    line-height: 2 !important;
    color: #1a1a2e !important;
}

/* Author designation */
.article-author-designation,
.cv-desig {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 16px !important;
    color: #e94560 !important;
}

/* Author bio */
.article-author-bio,
.cv-section p {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 18px !important;
    line-height: 2.4 !important;
    direction: rtl !important;
    text-align: right !important;
}

/* Author photo */
.article-author-photo img,
.cv-photo img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 4px solid #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
}
/* ============================================
   ✅ NEWSLETTER BOX — DARK STYLED (Sab Pages Par)
   ============================================ */

.newsletter-box {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    color: #fff !important;
    padding: 40px 30px !important;
    border-radius: 12px !important;
    text-align: center !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.25) !important;
    direction: rtl !important;
    margin: 20px 0 !important;
}

.newsletter-box .newsletter-icon {
    font-size: 48px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

.newsletter-box .newsletter-title {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 12px !important;
    line-height: 2 !important;
}

.newsletter-box .newsletter-desc {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 17px !important;
    line-height: 2.2 !important;
    color: #d0d0e0 !important;
    max-width: 600px !important;
    margin: 0 auto 24px !important;
}

.newsletter-box .newsletter-input-group {
    display: flex !important;
    gap: 10px !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.newsletter-box .newsletter-input {
    flex: 1 !important;
    min-width: 220px !important;
    padding: 12px 16px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    outline: none !important;
    background: #fff !important;
    color: #1a1a2e !important;
    direction: ltr !important;
    text-align: left !important;
}

.newsletter-box .newsletter-input::placeholder {
    color: #999 !important;
    font-family: 'Jameel Noori Nastaleeq', serif !important;
}

.newsletter-box .newsletter-btn {
    padding: 12px 28px !important;
    background: #e94560 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    white-space: nowrap !important;
}

.newsletter-box .newsletter-btn:hover {
    background: #c73652 !important;
}

.newsletter-box .newsletter-btn:disabled {
    background: #888 !important;
    cursor: not-allowed !important;
}

.newsletter-box .newsletter-message {
    margin-top: 16px !important;
    font-family: 'Jameel Noori Nastaleeq', serif !important;
    font-size: 15px !important;
}

/* Full-width newsletter (homepage) */
.newsletter-full {
    max-width: 100% !important;
}

/* Sidebar newsletter */
.newsletter-sidebar {
    padding: 30px 20px !important;
}

.newsletter-sidebar .newsletter-title {
    font-size: 26px !important;
}

.newsletter-sidebar .newsletter-desc {
    font-size: 15px !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .newsletter-box {
        padding: 30px 20px !important;
    }
    .newsletter-box .newsletter-title {
        font-size: 26px !important;
    }
    .newsletter-box .newsletter-desc {
        font-size: 15px !important;
    }
    .newsletter-box .newsletter-input-group {
        flex-direction: column !important;
    }
    .newsletter-box .newsletter-input,
    .newsletter-box .newsletter-btn {
        width: 100% !important;
        min-width: 100% !important;
    }
}
/* =========================================
   MOBILE MENU FIX (Sticky Menu Overlay Fix)
   ========================================= */

/* 1. موبائل پر مینو کو ڈیفالٹ طور پر چھپا دیں */
@media (max-width: 991px) {
    .main-nav, .nav-menu, .mobile-menu, #mainNav {
        display: none !important; 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #ffffff;
        z-index: 9999;
        overflow-y: auto;
        padding-top: 70px; /* ہیڈر کے لیے جگہ */
    }

    /* 2. مینو صرف تب دکھائیں جب JavaScript اسے 'active' یا 'open' کلاس دے */
    .main-nav.active, .nav-menu.active, .mobile-menu.active, #mainNav.active,
    .main-nav.open, .nav-menu.open, .mobile-menu.open, #mainNav.open {
        display: block !important;
    }

    /* 3. بیک گراؤنڈ کو ڈھانپنے کے لیے کالا اوورلے (Overlay) */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9998;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .menu-overlay.active, .menu-overlay.open {
        display: block !important;
        opacity: 1;
    }

    /* 4. جب مینو کھلا ہو تو پیچھے والی ویب سائٹ کو سکرول ہونے سے روکیں */
    body.menu-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
        height: 100%;
    }
}

/* 5. ڈیسک ٹاپ ویو کو بالکل متاثر نہ ہونے دیں */
@media (min-width: 992px) {
    .main-nav, .nav-menu, .mobile-menu, #mainNav {
        display: flex !important; 
        position: static !important;
        height: auto !important;
        width: auto !important;
        background: transparent !important;
        z-index: auto !important;
        padding-top: 0 !important;
    }
    .menu-overlay {
        display: none !important;
    }
    body.menu-open {
        overflow: auto !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
    }
}
/* ============================================
✅ NAVBAR FIX — NO SCROLL, SAB CATEGORIES DIKHEIN
============================================ */

/* Navbar container — scroll band, sab fit karein */
.main-nav .container {
    overflow-x: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* Nav list — sab ek line mein */
.nav-list {
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* Nav links — chota font taake sab fit ho jayein */
.nav-link {
    font-size: 15px !important;
    padding: 12px 6px !important;
    white-space: nowrap !important;
}

/* Home icon button */
.nav-list > li:first-child > .nav-link,
.nav-list > .nav-link:first-child {
    padding: 12px 10px !important;
    min-width: 35px !important;
}

.nav-list > li:first-child > .nav-link::before,
.nav-list > .nav-link:first-child::before {
    width: 18px !important;
    height: 18px !important;
}

/* Search box chota karein */
.nav-search input {
    width: 110px !important;
    font-size: 12px !important;
}

/* Mobile par bhi theek rahe */
@media (max-width: 1200px) {
    .nav-link {
        font-size: 13px !important;
        padding: 12px 5px !important;
    }
    .nav-search input {
        width: 90px !important;
    }
}

@media (max-width: 992px) {
    .nav-link {
        font-size: 12px !important;
        padding: 10px 4px !important;
    }
}
/* ============================================
✅ NAVBAR FIX — NO SCROLL, SAB CATEGORIES DIKHEIN
============================================ */

/* Navbar container — scroll band, sab fit karein */
.main-nav .container {
    overflow-x: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* Nav list — sab ek line mein */
.nav-list {
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* Nav links — chota font taake sab fit ho jayein */
.nav-link {
    font-size: 15px !important;
    padding: 12px 6px !important;
    white-space: nowrap !important;
}

/* Home icon button */
.nav-list > li:first-child > .nav-link,
.nav-list > .nav-link:first-child {
    padding: 12px 10px !important;
    min-width: 35px !important;
}

.nav-list > li:first-child > .nav-link::before,
.nav-list > .nav-link:first-child::before {
    width: 18px !important;
    height: 18px !important;
}

/* Search box chota karein */
.nav-search input {
    width: 110px !important;
    font-size: 12px !important;
}

/* Mobile par bhi theek rahe */
@media (max-width: 1200px) {
    .nav-link {
        font-size: 13px !important;
        padding: 12px 5px !important;
    }
    .nav-search input {
        width: 90px !important;
    }
}

@media (max-width: 992px) {
    .nav-link {
        font-size: 12px !important;
        padding: 10px 4px !important;
    }
}
/* ============================================
✅ NAVBAR SPREAD FIX — Full Width & Spread Items
============================================ */

/* 1. Navbar container ko full screen width do */
.main-nav .container {
    max-width: 100% !important;
    padding: 0 40px !important; /* Side se thora gap */
    justify-content: space-between !important;
}

/* 2. Nav list (categories) ko puri jagah mein phailao */
.nav-list {
    flex: 1 !important;
    justify-content: center !important; /* Categories center mein rahengi lekin phaili hui */
    gap: 10px !important; /* Har category ke beech thora space */
}

/* 3. Har link ke padding barha do taake wo zyada jagah lein */
.nav-link {
    padding: 12px 16px !important;
    font-size: 18px !important;
}

/* 4. Search box aur Reporter button ki positioning */
.nav-search {
    margin-left: 20px !important;
}
.nav-item-highlight {
    margin-right: 20px !important;
}

/* Mobile par wapis normal ho jaye */
@media (max-width: 992px) {
    .main-nav .container {
        padding: 0 16px !important;
    }
    .nav-link {
        padding: 12px 10px !important;
    }
}
/* ============================================
✅ SEARCH ICON FIX — Cut Off Issue
============================================ */

/* Search container ko proper padding do */
.nav-search {
    padding-left: 10px !important;
    padding-right: 10px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* Search button/icon ko fully visible karo */
.nav-search button,
.nav-search .search-btn,
.nav-search input[type="submit"] {
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Navbar container overflow fix — search ko cut hone se bachao */
.main-nav .container {
    overflow-x: visible !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Agar search box ke andar icon hai to usko bhi fix karo */
.nav-search input {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Mobile par bhi theek rahe */
@media (max-width: 768px) {
    .nav-search {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
/* ============================================
✅ PHONE NUMBER FIX — LTR Direction
============================================ */

/* Phone numbers ko LTR karo taake sahi dikhain */
.cv-chip a[href^="tel:"],
.cv-chip a[href*="tel"],
.contact-number,
.phone-number,
.cv-chip .phone,
.cv-chip .contact,
.cv-chip:has(a[href^="tel"]),
.cv-chip:has(.fa-phone),
.cv-chip:has(.fa-whatsapp) {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate !important;
}

/* Author page ke specific phone number chips */
.cv-chips .cv-chip:nth-child(6), /* Contact wala chip */
.cv-chips .cv-chip:nth-child(7) {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate !important;
}

/* Agar phone number link hai to */
.cv-chip a {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}