/*--------------------------------------------------------------
# Arabic News Website Custom Styles
--------------------------------------------------------------*/

/* Reset and Base Styles */
* {
	box-sizing: border-box;
}

body {
	font-family: 'Cairo', Arial, sans-serif;
	direction: rtl;
	text-align: right;
	background-color: #f8f9fa;
	margin: 0;
	padding: 0;
	line-height: 1.6;
	transition: all 0.3s ease;
}

/* Night Mode Styles */
body.night-mode {
	background-color: #1a1a1a;
	color: #e0e0e0;
}

body.night-mode .site-content {
	background-color: #1a1a1a;
}

body.night-mode .news-grid-item,
body.night-mode .latest-news-item,
body.night-mode .featured-article-item {
	background-color: #2d2d2d;
	border-color: #404040;
}

body.night-mode .news-title,
body.night-mode .latest-news-title,
body.night-mode .featured-title {
	color: #ffffff;
}

body.night-mode .news-meta,
body.night-mode .latest-news-meta {
	color: #b0b0b0;
}

body.night-mode .section-title {
	color: #ffffff;
}

body.night-mode .night-mode-btn {
	background: rgba(255, 255, 255, 0.25);
}

body.night-mode .night-mode-btn i {
	color: #ffd700;
}

.site-main {
	max-width: 1240px;
	margin: 0 auto;
	padding: 16px 12px 0;
}

.site-content {
	margin-top: 0;
	padding-top: 0;
}

/* ===== NEWS TICKER STYLES ===== */
.news-ticker-section {
	background: transparent;
	position: relative;
	z-index: 100;
}

.news-ticker {
	background: #ffffff;
	color: #333;
	overflow: hidden;
	position: relative;
}

.news-ticker-container {
	display: flex;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	height: 48px;
	position: relative;
}

/* Ticker Title */
.ticker-title {
	background: #b70703;
	color: white;
	padding: 0 16px;
	height: 100%;
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	flex-shrink: 0;
	border-radius: 0 16px 16px 0;
	box-shadow: 2px 0 6px rgba(183, 7, 3, 0.3);
}

.ticker-title-text {
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	font-size: 13px;
}

/* Right Navigation */
.ticker-nav-right {
	padding: 0 12px;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.ticker-prev,
.ticker-next {
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	color: #333;
	width: 28px;
	height: 28px;
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
}

.ticker-prev:hover,
.ticker-next:hover {
	background: #b70703;
	color: white;
	border-color: #b70703;
}

/* Ticker Content */
.ticker-content {
	flex: 1;
	overflow: hidden;
	height: 100%;
	position: relative;
	margin: 0;
}

/* Gradient overlays for smooth edges */
.ticker-content::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 100%;
	background: linear-gradient(to right, #f8f9fa, transparent);
	z-index: 2;
	pointer-events: none;
}

.ticker-content::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 100%;
	background: linear-gradient(to left, #f8f9fa, transparent);
	z-index: 2;
	pointer-events: none;
}

.ticker-scroll {
	display: inline-flex;
	align-items: center;
	height: 100%;
	animation: tickerMove 90s linear infinite;
	white-space: nowrap;
	/* Start position for left-to-right movement */
	transform: translateX(-50%);
}

.ticker-scroll:hover {
	animation-play-state: paused;
}

.ticker-item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.ticker-logo-separator {
	background: linear-gradient(135deg, #b70703, #a10603);
	color: white;
	padding: 5px 11px;
	border-radius: 13px;
	font-weight: 700;
	font-size: 11px;
	margin-left: 20px;
	margin-right: 16px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	box-shadow: 0 2px 3px rgba(183, 7, 3, 0.3);
}

.ticker-link {
	color: #333;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
	display: block;
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.ticker-link:hover {
	color: #b70703;
}

/* Center logo removed - using logo separators instead */

/* Controls removed - only left navigation remains */

/* Ticker items styling */
.ticker-item {
	display: inline-flex;
	align-items: center;
	padding: 0 24px;
	white-space: nowrap;
}

.ticker-link {
	color: #333;
	text-decoration: none;
	font-size: 13px; /* Increased from 11px */
	transition: color 0.3s ease;
}

.ticker-link:hover {
	color: #b70703;
}

.ticker-logo-separator {
	background: #b70703;
	color: white;
	font-weight: bold;
	margin: 0 12px;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 3px;
	display: inline-block;
}

/* Ticker Animation - Left to Right Continuous Loop */
@keyframes tickerMove {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0%);
	}
}



/* Ticker Responsive Design */
@media screen and (max-width: 768px) {
	.news-ticker {
		height: auto;
		min-height: 32px;
	}
	
	.news-ticker-container {
		flex-wrap: nowrap;
	}
	
	.ticker-title {
		padding: 0 8px;
		min-width: auto;
	}
	
	.ticker-title-text {
		font-size: 10px;
	}
	
	.ticker-nav-right {
		display: none;
	}
	
	.ticker-content {
		flex: 1;
	}
	
	.ticker-item {
		padding: 0 8px;
	}
	
	.ticker-link {
		font-size: 10px;
	}
}

/* Night Mode Ticker */
body.night-mode .news-ticker-section {
	background: transparent;
}

body.night-mode .news-ticker {
	background: transparent;
	color: #ffffff;
}

body.night-mode .ticker-link {
	color: #ffffff;
}

body.night-mode .ticker-link:hover {
	color: #ffd700;
}

/* Dark mode gradient overlays */
body.night-mode .ticker-content::before {
	background: linear-gradient(to right, rgba(26,26,26,1), transparent);
}

body.night-mode .ticker-content::after {
	background: linear-gradient(to left, rgba(26,26,26,1), transparent);
}

/* Night Mode Hero Section */
body.night-mode .section-title-with-lines::before,
body.night-mode .section-title-with-lines::after {
	background: #666;
}

body.night-mode .section-content-clean p,
body.night-mode .timeline-content h4 a {
	color: #e0e0e0;
}

body.night-mode .timeline-content h4 a:hover {
	color: #ff6b6b;
}

body.night-mode .slider-title-clean h3 {
	color: #e0e0e0;
}

body.night-mode .slider-title-clean {
	background: #1a1a1a;
}

body.night-mode .slider-title-link {
	color: #e0e0e0;
}

body.night-mode .slider-title-link:hover {
	color: #ff6b6b;
}

body.night-mode .zoom-section-bottom {
	background: #2d2d2d;
	border-color: #404040;
}

body.night-mode .zoom-content-bottom {
	background: #2d2d2d;
}

body.night-mode .zoom-content-bottom p {
	color: #e0e0e0;
}

/* Responsive Ticker */
@media (max-width: 768px) {
	.news-ticker-container {
		height: 48px;
	}
	
	.ticker-title {
		
		padding: 0 12px;
		font-size: 11px;
	}
	
	.ticker-nav-right {
		padding: 0 8px;
		gap: 6px;
	}
	
	.ticker-prev,
	.ticker-next {
		width: 24px;
		height: 24px;
		font-size: 9px;
	}
	
	.ticker-link {
		font-size: 13px;
	}
	
	.ticker-logo-separator {
		padding: 3px 10px;
		font-size: 10px;
		margin-left: 16px;
		margin-right: 12px;
	}
	
	/* Slider responsive adjustments */
	.slider-wrapper-clean {
		height: 280px; /* Proportionally reduced for mobile */
		position: relative; /* Disable sticky on mobile */
	}
	
	.slider-content {
		width: 100%; /* Full width on mobile */
		height: 280px;
		margin: 0 auto;
	}
	
	.slider-slide img,
	.slider-slide .w-full {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.slider-slide .thumbnail {
		border-radius: 5px; /* Slightly smaller radius on mobile */
	}
	
	.hero-center-slider {
		min-height: auto;
	}
	
	.slider-container-clean {
		min-height: auto;
	}
	
	.slider-title-clean {
		position: relative; /* Remove sticky on tablet */
		padding: 8px 0;
	}
}

@media (max-width: 480px) {
	.news-ticker-container {
		height: 44px;
	}
	
	.ticker-title {
		padding: 0 10px;
		font-size: 10px;
	}
	
	.ticker-nav-right {
		padding: 0 6px;
		gap: 5px;
	}
	
	.ticker-prev,
	.ticker-next {
		width: 22px;
		height: 22px;
		font-size: 8px;
	}
	
	.ticker-link {
		font-size: 11px;
	}
	
	.ticker-logo-separator {
		padding: 2px 8px;
		font-size: 9px;
		margin-left: 12px;
		margin-right: 10px;
	}
}

/* ===== HEADER STYLES ===== */
.site-header {
	position: relative;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

/* Header Top Bar */
.header-top-bar {
	background: linear-gradient(135deg, #b70703, #a10603);
	padding: 10px 0;
}

.header-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Header Left - Social Media Icons */
.header-left {
	flex: 1 1 0;
	display: flex;
	justify-content: flex-start;
}

/* Header Right - Night Mode & Language Switcher */
.header-right {
	flex: 1 1 0;
	display: flex;
	justify-content: flex-end;
}

.header-controls {
	display: flex;
	align-items: center;
	gap: 12px;
}

.night-mode-btn {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: white;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.night-mode-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translateY(-1px);
}

.language-switcher .lang-btn {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: white;
	padding: 6px 12px;
	border-radius: 16px;
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 5px;
}

.language-switcher .lang-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translateY(-1px);
}

/* Header Center - Logo */
.header-center {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Custom Logo Styles */
.site-branding {
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-branding .custom-logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.site-branding .custom-logo-link:hover {
	transform: scale(1.05);
}

.site-branding .custom-logo {
	max-height: 50px;
	width: auto;
	height: auto;
	display: block;
}

/* Site Title (when no logo is set) */
.site-branding .site-title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}

.site-branding .site-title a {
	color: white;
	text-decoration: none;
	transition: all 0.3s ease;
}

.site-branding .site-title a:hover {
	text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* Header Social Media Icons */
.header-social {
	display: flex;
	align-items: center;
	gap: 12px;
}

.header-social .social-link,
.header-social .search-icon {
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	transition: all 0.3s ease;
	text-decoration: none;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	cursor: pointer;
}

.header-social .social-link:hover,
.header-social .search-icon:hover {
	color: white;
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

/* Navigation Menu */
.header-navigation {
	background: #f8f9fa;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 999;
}

.main-navigation {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-menu-wrapper {
	display: flex;
	justify-content: center;
	flex: 1;
}

.nav-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.nav-menu .menu-item {
	margin: 0;
}

.nav-menu .menu-item a {
	display: block;
	padding: 12px 16px;
	color: #333;
	text-decoration: none;
	font-weight: 700;
	font-size: 18px;
	transition: all 0.3s ease;
	border-bottom: 2px solid transparent;
}

.nav-menu .menu-item a:hover {
	background: rgba(183, 7, 3, 0.1);
	color: #b70703;
	border-bottom-color: #b70703; /* Border for hover */
}

.nav-menu .menu-item.current-category a,
.nav-menu .menu-item.current-menu-item a {
	background: rgba(183, 7, 3, 0.1);
	color: #b70703;
	border-bottom-color: transparent !important; /* No border for active state */
	border-bottom: 2px solid transparent !important;
}

/* Night Mode Navigation */
body.night-mode .header-navigation {
	background: rgba(0, 0, 0, 0.1);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.night-mode .nav-menu .menu-item a {
	color: rgba(255, 255, 255, 0.9);
	border-bottom: 2px solid transparent;
}

body.night-mode .nav-menu .menu-item a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border-bottom-color: white; /* Border for hover */
}

body.night-mode .nav-menu .menu-item.current-category a,
body.night-mode .nav-menu .menu-item.current-menu-item a {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border-bottom-color: transparent !important; /* No border for active state */
	border-bottom: 2px solid transparent !important;
}

/* Menu Toggle Button Wrapper - Left Side */
.menu-toggle-wrapper {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* Menu Spacer - Right Side for Balance */
.menu-spacer {
	flex: 0 0 auto;
	width: 48px; /* Same width as toggle button area */
}

/* Menu Toggle Button - Always Visible */
.mobile-menu-toggle {
	display: block;
	background: none;
	border: none;
	color: #333;
	font-size: 16px;
	cursor: pointer;
	padding: 12px 16px;
	transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
	background: rgba(183, 7, 3, 0.1);
	color: #b70703;
}

/* Night Mode Toggle Button */
body.night-mode .mobile-menu-toggle {
	color: white;
}

body.night-mode .mobile-menu-toggle:hover {
	background: rgba(255, 255, 255, 0.1);
	color: white;
}

/* Night Mode Header Shadow Fix */
body.night-mode .site-header {
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.mobile-search-btn,
.mobile-menu-btn {
	background: none;
	border: none;
	color: white;
	font-size: 14px;
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.mobile-search-btn:hover,
.mobile-menu-btn:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
	opacity: 1;
	visibility: visible;
}

.mobile-menu-content {
	position: absolute;
	top: 0;
	right: -240px;
	width: 240px;
	height: 100%;
	background: linear-gradient(135deg, #b70703, #a10603);
	transition: all 0.3s ease;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.mobile-menu-overlay.active .mobile-menu-content {
	right: 0;
}

.mobile-menu-header {
	padding: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.mobile-menu-title {
	color: white;
	font-size: 14px;
	font-weight: 600;
	flex-shrink: 0;
}

.mobile-menu-header-icons {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	justify-content: center;
}

.mobile-icon-btn {
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: white;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
}

.mobile-icon-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.05);
}

.mobile-menu-footer {
	padding: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	margin-top: auto;
}

.mobile-menu-social {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

.mobile-social-btn {
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
}

.mobile-social-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.1);
}

.mobile-menu-close {
	background: none;
	border: none;
	color: white;
	font-size: 16px;
	cursor: pointer;
	padding: 4px;
	flex-shrink: 0;
}

.mobile-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav-menu li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-menu li a {
	display: block;
	padding: 12px 16px;
	color: white;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.3s ease;
}

.mobile-nav-menu li a:hover {
	background: rgba(255, 255, 255, 0.1);
	padding-right: 24px;
}

/* ===== ALTERNATIVE NEWS TICKER ===== */
.news-ticker-alt {
	background: linear-gradient(to bottom, #1a1a1a, #2d2d2d);
	height: 40px;
	overflow: hidden;
	position: relative;
	margin-top: 0;
	width: 100%;
}

.news-ticker-alt-container {
	display: flex;
	align-items: stretch;
	height: 100%;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}

/* Alt Ticker Title */
.ticker-alt-title {
	background: linear-gradient(135deg, #b70703, #a10603);
	color: white;
	padding: 0 16px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	position: relative;
	z-index: 10;
	font-weight: 600;
	font-size: 11px;
	border-radius: 0 16px 16px 0;
	box-shadow: 2px 0 6px rgba(183, 7, 3, 0.3);
}

.ticker-alt-title-text {
	color: white;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Alt Ticker Content */
.ticker-alt-content {
	flex: 1;
	overflow: hidden;
	position: relative;
	height: 100%;
	background: transparent;
}

.ticker-alt-scroll {
	display: flex;
	align-items: center;
	height: 100%;
	animation: tickerAltMove 120s linear infinite;
	animation-fill-mode: both;
	white-space: nowrap;
	width: max-content;
}

.ticker-alt-scroll:hover {
	animation-play-state: paused;
}

.ticker-alt-item {
	display: inline-flex;
	align-items: center;
	padding: 0 24px;
	white-space: nowrap;
}

.ticker-alt-logo {
	margin-left: 6px;
	display: inline-flex;
	align-items: center;
	background: #b70703;
	color: white;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 9px;
	font-weight: 600;
}

.ticker-alt-link {
	color: white;
	text-decoration: none;
	font-size: 11px;
	transition: color 0.3s ease;
}

.ticker-alt-link:hover {
	color: #ffd700;
}

/* Alt Ticker Navigation */
.ticker-alt-nav {
	padding: 0 12px;
	display: flex;
	gap: 4px;
	background: rgba(0,0,0,0.2);
	height: 100%;
	align-items: center;
}

.ticker-alt-prev,
.ticker-alt-next {
	background: rgba(255,255,255,0.2);
	color: white;
	border: 1px solid rgba(255,255,255,0.3);
	width: 24px;
	height: 24px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 10px;
}

.ticker-alt-prev:hover,
.ticker-alt-next:hover {
	background: rgba(255,255,255,0.3);
	border-color: rgba(255,255,255,0.5);
}

/* Alt Ticker Animation - Left to Right */
@keyframes tickerAltMove {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* Alt Ticker Responsive */
@media screen and (max-width: 768px) {
	.news-ticker-alt {
		height: 32px;
	}
	
	.ticker-alt-title {
		padding: 0 12px;
		min-width: 96px;
		font-size: 10px;
	}
	
	.ticker-alt-nav {
		display: none;
	}
	
	.ticker-alt-item {
		padding: 0 12px;
	}
	
	.ticker-alt-link {
		font-size: 10px;
	}
}

/* Alt Ticker Dark Mode Support */
body.night-mode .news-ticker-alt {
	background: linear-gradient(to bottom, #1a1a1a, #2d2d2d);
}

body.night-mode .ticker-alt-link {
	color: rgba(255, 255, 255, 0.9);
}

body.night-mode .ticker-alt-link:hover {
	color: #ffd700;
}

body.night-mode .ticker-alt-logo {
	background: #b70703;
	color: white;
}

body.night-mode .ticker-alt-nav {
	background: rgba(0,0,0,0.3);
}

body.night-mode .ticker-alt-prev,
body.night-mode .ticker-alt-next {
	background: rgba(255,255,255,0.2);
	color: white;
	border-color: rgba(255,255,255,0.3);
}

body.night-mode .ticker-alt-prev:hover,
body.night-mode .ticker-alt-next:hover {
	background: rgba(255,255,255,0.3);
	border-color: rgba(255,255,255,0.5);
}





.ticker-js-container {
	display: flex;
	align-items: center;
	height: 100%;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}

/* JS Ticker Title */


/* JS Ticker Content Wrapper */
.ticker-js-wrapper {
	flex: 1;
	overflow: hidden;
	position: relative;
	height: 100%;
}

/* Add gradient edges */
.ticker-js-wrapper::before {
	content: '';
	position: absolute;
	left: 80px !important;
	top: 0;
	width: 40px;
	height: 100%;
	background: linear-gradient(to right, #ffffff, transparent);
	z-index: 2;
	pointer-events: none;
}

.ticker-js-wrapper::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 100%;
	background: linear-gradient(to left, #ffffff, transparent);
	z-index: 2;
	pointer-events: none;
}

/* Dark mode gradients */
body.night-mode .ticker-js-wrapper::before {
	background: linear-gradient(to right, rgba(26,26,26,1), transparent);
}

body.night-mode .ticker-js-wrapper::after {
	background: linear-gradient(to left, rgba(26,26,26,1), transparent);
}

/* JS Ticker Content */
.ticker-js-content {
	display: flex;
	align-items: center;
	height: 100%;
	position: absolute;
	white-space: nowrap;
	will-change: transform;
}

.ticker-js-items {
	display: inline-flex;
	align-items: center;
	padding-right: 80px; /* Gap between loops */
	min-width: 100%;
}

.ticker-js-item {
	display: inline-flex;
	align-items: center;
	padding: 0 24px;
}

.ticker-js-logo {
	background: #b70703;
	color: white;
	font-weight: bold;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 3px;
	margin-left: 6px;
}

.ticker-js-link {
	color: #333;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s ease;
	font-weight: bold;
}

.ticker-js-link:hover {
	color: #b70703;
}

/* Dark mode text */
body.night-mode .ticker-js-link {
	color: white;
}

body.night-mode .ticker-js-link:hover {
	color: #ffd700;
}

/* JS Ticker Navigation */
.ticker-js-nav {
	padding: 0 12px;
	display: flex;
	align-items: center;
	background: rgba(0,0,0,0.05);
	height: 100%;
}

body.night-mode .ticker-js-nav {
	background: rgba(0,0,0,0.3);
}

.ticker-js-pause {
	background: #b70703;
	color: white;
	border: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 10px;
}

.ticker-js-pause:hover {
	background: #a10603;
	transform: scale(1.1);
}

/* Responsive */
@media screen and (max-width: 768px) {
	.news-ticker-js {
		height: 32px;
	}

	.ticker-js-title {
		padding: 12px 12px;
		min-width: 96px;
		font-size: 11px;
	}

	.ticker-js-nav {
		display: none;
	}

	.ticker-js-item {
		padding: 0 16px;
	}

	.ticker-js-link {
		font-size: 11px;
	}
}

/* ===== HERO SECTION ===== */
.hero-section {
	margin: 0 0 20px 0;
}

/* Main Container - 3 Column Layout */
.hero-main-container {
	display: flex;
	gap: 8px;
	margin: 24px 0 16px; /* Reduced bottom margin */
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 16px;
	direction: ltr; /* Force left-to-right for proper column order */
	align-items: flex-start; /* Align items to start */
}

/* Left Sidebar - طولندلز and زووم */
.hero-left-sidebar {
	flex: 1;
	min-width: 240px;

	max-width: 240px;
	order: 1; /* Ensure it stays on the left */
}

/* Center Slider */
.hero-center-slider {
	flex: 2;
	position: sticky;
	top: 0;
	order: 2; /* Ensure it stays in the center */
}

/* Right Sidebar - على مدار الساعة */
.hero-right-sidebar {
	flex: 1;
	min-width: 240px;
	order: 3; /* Ensure it stays on the right */
}

/* Section Title with Lines Styling */
.section-title-with-lines {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	position: relative;
}

.section-title-with-lines::before,
.section-title-with-lines::after {
	content: '';
	flex: 1;
	height: 2px;
	background: #333;
}

.section-title-text {
	background: #000;
	color: white;
	padding: 8px 19px;
	font-size: 19px;
	font-weight: bold;
	white-space: nowrap;
	margin: 0 10px;
}

.left-section-item {
	margin-bottom: 24px;
}

.section-content-clean {
	padding: 12px 0;
}

.section-content-clean p {
	line-height: 1.6;
	margin: 0;
	color: #333;
	font-size: 13px;
	text-align: justify;
	direction: rtl; /* RTL for Arabic text */
	font-weight: 600;
}

/* Tendance Items */
.tendance-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tendance-item h4 {
	margin: 0 0 10px 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	font-family: 'Cairo', sans-serif;
	text-align: right;
	direction: rtl;
}

.tendance-item p {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	color: #444;
	font-family: 'Cairo', sans-serif;
	text-align: justify;
	direction: rtl;
	opacity: 0.9;
}

.tendance-item a {
	color: #333;
	text-decoration: none;
	transition: color 0.3s ease;
}

.tendance-item a:hover {
	color: #b70703;
}

/* Center Slider */
.hero-center-slider {
	flex: 2;
	height: auto;
	display: flex;
	flex-direction: column;
}

.slider-container-clean {
	position: relative;
	height: auto;
	display: flex;
	flex-direction: column;
}

.slider-title-clean {
	padding:12px 0 12px 0;
	text-align: center;
	direction: rtl; /* RTL for Arabic text */
	flex-shrink: 0;

	background: white;
	z-index: 101;
}

.slider-title-clean h3 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #333;
}

.slider-wrapper-clean {
	position: relative;
	width: 100%;
	height: 424px; /* Match content height */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
}

.slider-content {
	width: 100%; /* Rendered width */
	height: 424px; /* Rendered height */
	position: relative;
	overflow: hidden;
}

.slider-slides {
	position: relative;
	width: 100%;
	height: 100%;
}

.slider-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
	z-index: 1;
}

.slider-slide.active {
	opacity: 1;
	z-index: 5; /* Higher z-index for active slide */
}

.slider-slide .thumbnail {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	display: block;
}

.slider-slide .thumbnail.rounded-qma {
	border-radius: 6px;
}

.slider-slide .img {
	display: block;
	width: 100%;
	height: 100%;
}

.slider-slide img,
.slider-slide .w-full {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0 auto;
	display: block;
}

.slider-slide .object-center {
	object-position: center;
}

.slider-slide .object-cover {
	object-fit: cover;
}

.slider-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	position: relative;
	pointer-events: none; /* Disable by default */
}

.slider-slide.active .slider-link {
	pointer-events: auto; /* Enable only for active slide */
	cursor: pointer;
}

.slider-slide.active .slider-link:hover .thumbnail {
	opacity: 0.9;
	transform: scale(1.02);
	transition: all 0.3s ease;
}

.slider-title-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.slider-title-link:hover {
	color: #b70703;
}

.slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.9);
	border: none;
	color: #333;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	z-index: 20; /* Higher z-index to stay above links */
}

.slider-prev {
	left: 12px;
}

.slider-next {
	right: 12px;
}

.slider-btn:hover {
	background: #fff;
	color: #b70703;
	transform: translateY(-50%) scale(1.1);
}

.slider-dots-overlay {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	gap: 6px;
	z-index: 20; /* Higher z-index to stay above links */
}

.dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	transition: background 0.3s ease;
	border: 2px solid rgba(255, 255, 255, 0.9);
}

.dot.active {
	background: #b70703;
	border-color: #b70703;
}

/* Hero Section Responsive Styles */
/* Large screens (960px+) */
@media (min-width: 1200px) {
	.slider-wrapper-clean {
		height: 424px; /* Slightly larger while maintaining aspect ratio */
	}
	
	.slider-content {
		width: 100%; /* Scaled up proportionally */
		height: 424px;
	}
	
	.hero-main-container {
		max-width: 1240px;
	}
}

/* Medium screens (615px - 959px) */
@media (min-width: 769px) and (max-width: 1199px) {
	.slider-wrapper-clean {
		height: 360px; /* Proportionally reduced from 424px */
	}
	
	.slider-content {
		width: 100%;
		height: 360px;
	}
	
	.hero-main-container {
		gap: 8px;
	}
	
	.hero-left-sidebar,
	.hero-right-sidebar {
		min-width: 200px;
	}
}

/* Tablet landscape (819px) */
@media (max-width: 1024px) {
	.slider-wrapper-clean {
		height: 320px; /* Proportionally reduced */
	}
	
	.slider-content {
		width: 100%;
		height: 320px;
	}
	
	.slider-title-clean h3 {
		font-size: 18px;
	}
	
	.section-title-text {
		font-size: 16px;
		padding: 6px 16px;
	}
}

/* Right Sidebar - على مدار الساعة */
.hero-right-sidebar {
	flex: 1;
	min-width: 240px;
}

.timeline-section-clean {
	padding: 12px 0;
	direction: rtl; /* RTL for Arabic text */
}

.timeline-items {
	display: flex;
	flex-direction: column;
}

.timeline-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 6px 0;
	transition: color 0.3s ease;
}

.timeline-time {
	background: #b70703;
	color: white;
	padding: 0px 8px;
	margin-top: 3px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	flex-shrink: 0;
	min-width: 40px;
	text-align: center;
}

.timeline-content {
	flex: 1;
}

.timeline-content h4 {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
}

.timeline-content h4 a {
	color: #333;
	text-decoration: none;
	transition: color 0.3s ease;
	font-weight: 600;
}

.timeline-content h4 a:hover {
	color: #b70703;
}

/* Bottom Zoom Section */
.zoom-section-bottom {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	margin-top: 24px;
}

.zoom-content-bottom {
	padding: 16px;
	background: #fff;
	border-top: 2px solid #b70703;
}

.zoom-content-bottom p {
	margin: 0;
	font-size: 11px;
	line-height: 1.6;
	color: #333;
	text-align: justify;
}

.hero-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
	padding: 32px 24px 24px;
	color: white;
}

.hero-title {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 12px 0;
	line-height: 1.3;
}

.hero-title a {
	color: white;
	text-decoration: none;
}

.hero-meta {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 11px;
}

.hero-category {
	background-color: #b70703;
	padding: 3px 10px;
	border-radius: 12px;
	font-weight: 600;
}

.hero-excerpt {
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.9;
}

.hero-sidebar {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hero-sidebar-article {
	display: flex;
	gap: 12px;
	background: white;
	padding: 12px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.hero-sidebar-article:hover {
	transform: translateY(-2px);
}

.hero-sidebar-image {
	flex-shrink: 0;
	width: 64px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
}

.hero-sidebar-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-sidebar-content {
	flex: 1;
}

.hero-sidebar-title {
	font-size: 11px;
	font-weight: 600;
	margin: 0 0 6px 0;
	line-height: 1.4;
}

.hero-sidebar-title a {
	color: #333;
	text-decoration: none;
}

.hero-sidebar-title a:hover {
	color: #b70703;
}

.hero-sidebar-meta {
	font-size: 10px;
	color: #666;
}

/* ===== HERO SECTION RESPONSIVE DESIGN ===== */
@media screen and (max-width: 1200px) {
	.hero-main-container {
		flex-wrap: wrap !important;
		padding: 8px !important;
		gap: 8px;
	}
	
	.hero-center-slider {
		width: 100% !important;
		order: 1;
		margin-bottom: 16px;
		flex: 0 0 100%;
		position: relative !important;
	}
	
	.hero-left-sidebar,
	.hero-right-sidebar {
		width: calc(50% - 8px) !important;
		order: 2;
		flex: 0 0 calc(50% - 8px);
	}
	
	.hero-left-sidebar {
		margin-left: 0 !important;
		margin-right: 8px;
	}
	
	.hero-right-sidebar {
		margin-right: 0 !important;
		margin-left: 8px;
	}
}

@media screen and (max-width: 768px) {
	.hero-main-container {
		flex-direction: column !important;
		display: flex !important;
	}
	
	.hero-left-sidebar,
	.hero-right-sidebar,
	.hero-center-slider {
		width: 100% !important;
		margin: 0 !important;
		margin-bottom: 0 !important;
		flex: 0 0 100% !important;
	}
	
	.hero-left-sidebar{
		max-width: 100%;
	}
	.hero-center-slider {
		min-height: 100% !important;
		position: relative !important;
	}
	
	.slider-container-clean {
		min-height: 240px;
		display: block !important; /* Ensure slider container is visible */
	}
	
	.slider-wrapper-clean {
		display: block !important; /* Ensure slider wrapper is visible */
		position: relative !important; /* Override sticky positioning */
		height: 280px !important; /* Proportionally reduced */
	}
	
	.slider-content {
		display: block !important; /* Ensure slider content is visible */
		height: 280px !important;
		width: 100% !important;
		margin: 0 auto !important;
	}
	
	.slider-content img {
		height: 100% !important; /* Take full height of container */
		width: 100% !important;
		display: block !important; /* Ensure images are visible */
		object-fit: cover !important; /* Maintain aspect ratio while filling container */
	}
	
	.slider-slide {
		display: block !important; /* Ensure slides are visible */
	}
	
	.slider-title-clean h3 {
		font-size: 14px;
		line-height: 1.4;
	}
	
	.left-section-item {
		margin-bottom: 12px;
	}
	
	.timeline-item {
		padding: 8px 0;
	}

	.timeline-time {
		font-size: 11px;
	}

	.timeline-content h4 {
		font-size: 13px;
		line-height: 1.4;
	}
}

@media (max-width: 480px) {
	.hero-main-container {
		padding: 4px;
	}
	
	.slider-container-clean {
		min-height: 200px;
	}
	
	.slider-wrapper-clean {
		height: 224px !important; /* Proportionally reduced for small mobile */
	}
	
	.slider-content {
		width: 100% !important;
		height: 224px !important;
	}
	
	.slider-content img {
		height: 100% !important; /* Take full height of container */
		object-fit: cover !important; /* Maintain aspect ratio */
	}
	
	.slider-title-clean {
		padding: 8px;
	}
	
	.slider-title-clean h3 {
		font-size: 13px;
	}
	
	.section-title-text {
		font-size: 13px;
	}
	
	.tendance-item h4 {
		font-size: 15px;
	}

	.tendance-item p {
		font-size: 13px;
		line-height: 1.6;
	}
}

/* ===== SPORTS SECTION ===== */
.sports-section {
	background: linear-gradient(135deg, #b70703, #a10603);
	margin: 0 0 20px 0;
	padding: 20px 24px;
	border-radius: 12px;
	box-shadow: 0 3px 16px rgba(183, 7, 3, 0.3);
}

.sports-container {
	max-width: 1200px;
	margin: 0 auto;
}

.sports-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.sports-title {
	color: white;
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

.sports-nav {
	display: flex;
	gap: 8px;
}

.sports-nav-btn {
	background: rgba(255,255,255,0.2);
	border: none;
	color: white;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
}

.sports-nav-btn:hover {
	background: rgba(255,255,255,0.3);
	transform: scale(1.1);
}

.sports-slider {
	position: relative;
	height: 280px;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 16px;
}

.sports-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.sports-slide.active {
	opacity: 1;
}

.sports-image {
	position: relative;
	width: 100%;
	height: 100%;
}

.sports-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sports-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
	padding: 24px;
	color: white;
}

.sports-article-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px 0;
}

.sports-article-title a {
	color: white;
	text-decoration: none;
}

.sports-meta {
	display: flex;
	gap: 12px;
	font-size: 11px;
}

.sports-category {
	background-color: rgba(255,255,255,0.2);
	padding: 3px 10px;
	border-radius: 12px;
}

.sports-thumbnails {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.sports-thumb {
	width: 48px;
	height: 36px;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.6;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.sports-thumb.active {
	opacity: 1;
	border-color: white;
	transform: scale(1.1);
}

.sports-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== VIDEO SECTION (OLD - REPLACED BY GENERIC TEMPLATE) ===== */
/* .video-section styles are now handled by .category-section-generic */

.video-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.video-header {
	margin-bottom: 20px;
}

.video-content h3 {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	line-height: 1.4;
	transition: all 0.3s ease;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
}

/* Video Grid Layout */
.video-grid {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
	height: 320px;
}

.video-grid-item {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
}

.video-grid-item.featured {
	grid-row: 1 / 3;
	grid-column: 2;
}

.video-grid-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.video-thumbnail {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.video-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.video-grid-item:hover .video-thumbnail img {
	transform: scale(1.05);
}

.video-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #333, #666);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 38px;
}

.video-play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255,255,255,0.9);
	color: #b70703;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: all 0.3s ease;
	opacity: 1;
}

.video-grid-item.featured .video-play-overlay {
	width: 48px;
	height: 48px;
	font-size: 16px;
}

.video-grid-item:hover .video-play-overlay {
	transform: translate(-50%, -75%);
}

.video-grid-item.featured:hover .video-play-overlay {
	transform: translate(-50%, -80%);
}

.video-duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(0,0,0,0.8);
	color: white;
	padding: 3px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 600;
}

.video-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.9));
	padding: 16px 12px 12px;
	color: white;
	transition: all 0.3s ease;
}

.video-meta {
	font-size: 10px;
	opacity: 0.9;
	margin-bottom: 6px;
	transition: all 0.3s ease;
}

.video-grid-item.featured .video-meta {
	font-size: 11px;
}



.video-grid-item.featured .video-content h3 {
	font-size: 21px;
}

.video-content h3 a {
	color: white;
	text-decoration: none;
}

.video-content h3 a:hover {
	color: white;
}

/* Hover effects for date and title */
.video-grid-item:hover .video-meta {
	opacity: 0;
	transform: translateY(-8px);
}

.video-grid-item:hover .video-content h3 {
	transform: translateY(-12px);
}

/* Tablet responsive */
@media (max-width: 1024px) {
	.video-section {
		padding: 16px 0;
		margin: 16px 0;
	}
	
	.video-container {
		padding: 0 16px;
	}
	
	.video-grid {
		height: 320px;
		gap: 10px;
	}
	
	.video-content h3 {
		font-size: 13px;
	}
	
	.video-grid-item.featured .video-content h3 {
		font-size: 18px;
	}
	
	.video-play-overlay {
		width: 36px;
		height: 36px;
		font-size: 11px;
	}
	
	.video-grid-item.featured .video-play-overlay {
		width: 44px;
		height: 44px;
		font-size: 14px;
	}
}

/* Mobile responsive */
@media (max-width: 768px) {
	.video-section {
		padding: 12px 0;
		margin: 12px 0;
	}
	
	.video-container {
		padding: 0 12px;
	}
	
	.video-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto;
		height: auto;
		gap: 8px;
	}
	
	.video-grid-item {
		height: 144px;
	}
	
	.video-grid-item.featured {
		grid-row: 1 / 3;
		grid-column: 1;
		height: 296px;
	}
	
	.video-content h3 {
		font-size: 11px;
	}
	
	.video-grid-item.featured .video-content h3 {
		font-size: 14px;
	}
	
	.video-play-overlay {
		width: 32px;
		height: 32px;
		font-size: 10px;
	}
	
	.video-grid-item.featured .video-play-overlay {
		width: 40px;
		height: 40px;
		font-size: 13px;
	}
	
	.video-meta {
		font-size: 9px;
	}
	
	.video-grid-item.featured .video-meta {
		font-size: 10px;
	}
}

/* Small mobile responsive */
@media (max-width: 480px) {
	.video-section {
		padding: 8px 0;
		margin: 8px 0;
	}
	
	.video-container {
		padding: 0 8px;
	}
	
	.video-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		height: auto;
		gap: 6px;
	}
	
	.video-grid-item {
		height: 160px;
	}
	
	.video-grid-item.featured {
		grid-row: span 1;
		grid-column: 1;
		height: 176px;
	}
	
	.video-content h3 {
		font-size: 10px;
	}
	
	.video-grid-item.featured .video-content h3 {
		font-size: 13px;
	}
	
	.video-play-overlay {
		width: 28px;
		height: 28px;
		font-size: 9px;
	}
	
	.video-grid-item.featured .video-play-overlay {
		width: 36px;
		height: 36px;
		font-size: 11px;
	}
	
	.video-meta {
		font-size: 8px;
	}
	
	.video-grid-item.featured .video-meta {
		font-size: 10px;
	}
	
	.video-content {
		padding: 12px 8px 8px;
	}
}

/* ===== NEWS GRID SECTIONS ===== */
.news-grid-section,
.news-grid-section-2 {
	margin: 32px 0;
}

.news-grid-container,
.news-grid-2-container {
	max-width: 1200px;
	margin: 0 auto;
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.news-grid-item {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 3px 12px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.news-grid-item:hover {
	transform: translateY(-4px);
}

.news-grid-item.featured {
	grid-column: span 2;
	grid-row: span 2;
}

.news-grid-image {
	position: relative;
	height: 160px;
	overflow: hidden;
}

.news-grid-item.featured .news-grid-image {
	height: 240px;
}

.news-grid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-grid-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
	padding: 20px 16px 16px;
	color: white;
}

.news-grid-title {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 8px 0;
	line-height: 1.4;
}

.news-grid-item.featured .news-grid-title {
	font-size: 16px;
}

.news-grid-title a {
	color: white;
	text-decoration: none;
}

.news-grid-meta {
	display: flex;
	gap: 8px;
	font-size: 10px;
	margin-bottom: 8px;
}

.news-grid-category {
	background-color: #b70703;
	padding: 2px 6px;
	border-radius: 8px;
	font-weight: 600;
}

.news-grid-excerpt {
	font-size: 11px;
	line-height: 1.4;
	opacity: 0.9;
}

/* Second News Grid */
.news-grid-2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.news-grid-2-item {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 3px 12px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.news-grid-2-item:hover {
	transform: translateY(-2px);
}

.news-grid-2-image {
	position: relative;
	height: 144px;
	overflow: hidden;
}

.news-grid-2-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-grid-2-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
	padding: 16px 12px 12px;
	color: white;
}

.news-grid-2-title {
	font-size: 11px;
	font-weight: 600;
	margin: 0 0 6px 0;
	line-height: 1.4;
}

.news-grid-2-title a {
	color: white;
	text-decoration: none;
}

.news-grid-2-meta {
	font-size: 9px;
	opacity: 0.9;
}

/* ===== LATEST NEWS SECTION ===== */
.latest-news-section {
	margin: 0 0 20px 0;
}

.latest-news-container {
	max-width: 1200px;
	margin: 0 auto;
}

.section-header {
	text-align: center;
	margin-bottom: 32px;
}

.section-title {
	font-size: 26px;
	font-weight: 700;
	color: #333;
	margin: 0 0 12px 0;
}

.section-line {
	width: 48px;
	height: 3px;
	background: linear-gradient(135deg, #b70703, #a10603);
	margin: 0 auto;
	border-radius: 2px;
}

.latest-news-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.latest-news-item {
	display: flex;
	gap: 16px;
	background: white;
	padding: 16px;
	border-radius: 10px;
	box-shadow: 0 3px 12px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.latest-news-item:hover {
	transform: translateY(-2px);
}

.latest-news-image {
	flex-shrink: 0;
	width: 120px;
	height: 96px;
	border-radius: 8px;
	overflow: hidden;
}

.latest-news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.latest-news-content {
	flex: 1;
}

.latest-news-author {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.author-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
}

.author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author-info {
	display: flex;
	flex-direction: column;
}

.author-name {
	font-weight: 600;
	font-size: 11px;
	color: #333;
}

.author-title {
	font-size: 10px;
	color: #666;
}

.latest-news-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 10px 0;
	line-height: 1.4;
}

.latest-news-title a {
	color: #333;
	text-decoration: none;
}

.latest-news-title a:hover {
	color: #b70703;
}

.latest-news-excerpt {
	font-size: 11px;
	color: #666;
	line-height: 1.5;
	margin-bottom: 10px;
}

.latest-news-meta {
	display: flex;
	gap: 12px;
	font-size: 10px;
	color: #999;
}

.latest-news-category {
	color: #b70703;
	font-weight: 600;
}

/* ===== FEATURED ARTICLES SECTION ===== */
.featured-articles-section {
	margin: 40px 0;
	background: #f8f9fa;
	padding: 32px 16px;
	border-radius: 12px;
}

.featured-articles-container {
	max-width: 1200px;
	margin: 0 auto;
}

.featured-articles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.featured-article-item {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 3px 12px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.featured-article-item:hover {
	transform: translateY(-4px);
}

.featured-article-item.large {
	grid-row: span 2;
}

.featured-article-image {
	position: relative;
	height: 160px;
	overflow: hidden;
}

.featured-article-item.large .featured-article-image {
	height: 240px;
}

.featured-article-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured-article-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
	padding: 20px 16px 16px;
	color: white;
}

.featured-article-category {
	background-color: #b70703;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 10px;
	font-weight: 600;
	display: inline-block;
	margin-bottom: 8px;
}

.featured-article-title {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 8px 0;
	line-height: 1.4;
}

.featured-article-item.large .featured-article-title {
	font-size: 16px;
}

.featured-article-title a {
	color: white;
	text-decoration: none;
}

.featured-article-excerpt {
	font-size: 11px;
	line-height: 1.4;
	opacity: 0.9;
	margin-bottom: 8px;
}

.featured-article-meta {
	display: flex;
	gap: 12px;
	font-size: 10px;
	opacity: 0.8;
}

/* ===== BOTTOM GRID SECTION ===== */
.bottom-news-grid {
	margin: 40px 0;
}

.bottom-grid-container {
	max-width: 1200px;
	margin: 0 auto;
}

.bottom-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}

.bottom-grid-item {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 3px 12px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.bottom-grid-item:hover {
	transform: translateY(-2px);
}

.bottom-grid-image {
	position: relative;
	height: 160px;
	overflow: hidden;
}

.bottom-grid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bottom-grid-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
	padding: 20px 16px 16px;
	color: white;
}

.bottom-grid-category {
	background-color: #b70703;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 10px;
	font-weight: 600;
	display: inline-block;
	margin-bottom: 8px;
}

.bottom-grid-title {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 8px 0;
	line-height: 1.4;
}

.bottom-grid-title a {
	color: white;
	text-decoration: none;
}

.bottom-grid-meta {
	display: flex;
	gap: 12px;
	font-size: 10px;
	opacity: 0.8;
}

.load-more-container {
	text-align: center;
}

.load-more-btn {
	background: linear-gradient(135deg, #b70703, #a10603);
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.load-more-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(183, 7, 3, 0.3);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
	/* Header Responsive */
	.header-container {
		padding: 0 12px;
	}
	
	.site-branding .site-title {
		font-size: 22px;
	}
	
	.site-branding .custom-logo {
		max-height: 45px;
	}

	.nav-menu .menu-item a {
		padding: 10px 12px;
		font-size: 14px;
	}
	
	.hero-container {
		grid-template-columns: 1fr;
	}
	
	.news-grid,
	.news-grid-2,
	.featured-articles-grid,
	.bottom-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.latest-news-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	/* Header Mobile */
	.nav-menu-wrapper {
		display: none;
	}
	
	.mobile-menu-toggle {
		display: block;
	}
	
	.header-social {
		gap: 8px;
	}
	
	.header-social .social-link,
	.header-social .search-icon {
		width: 24px;
		height: 24px;
		font-size: 13px;
	}
	
	.site-branding .site-title {
		font-size: 19px;
	}
	
	.site-branding .custom-logo {
		max-height: 40px;
	}

	.sports-section {
		padding: 16px;
	}
	
	.sports-title {
		font-size: 19px;
	}
	
	.news-grid,
	.news-grid-2,
	.featured-articles-grid,
	.bottom-grid {
		grid-template-columns: 1fr;
	}
	
	.news-grid-item.featured {
		grid-column: span 1;
		grid-row: span 1;
	}
	
	.featured-article-item.large {
		grid-row: span 1;
	}
	
	.latest-news-item {
		flex-direction: column;
	}
	
	.latest-news-image {
		width: 100%;
		height: 160px;
	}
	
	.section-title {
		font-size: 22px;
	}
}

@media (max-width: 480px) {
	/* Header Small Mobile */
	.header-container {
		padding: 0 8px;
	}
	
	.header-left,
	.header-right {
		flex: 0.8;
	}
	
	.header-center {
		flex: 1.4;
	}
	
	.header-controls {
		gap: 8px;
	}
	
	.night-mode-btn {
		width: 24px;
		height: 24px;
		font-size: 11px;
	}
	
	.language-switcher .lang-btn {
		padding: 5px 8px;
		font-size: 10px;
	}
	
	.site-branding .site-title {
		font-size: 16px;
	}
	
	.header-social {
		gap: 6px;
	}
	
	.header-social .social-link:nth-child(n+4) {
		display: none; /* Hide some social icons on very small screens */
	}
	
	.site-main {
		padding: 0 8px;
	}
	
	.hero-overlay {
		padding: 16px 12px 12px;
	}
	
	.hero-title {
		font-size: 16px;
	}
	
	.sports-section {
		padding: 12px;
		margin: 16px 0;
	}
	
	.sports-title {
		font-size: 16px;
	}
	
	.section-title {
		font-size: 19px;
	}
	
	.latest-news-item {
		padding: 12px;
	}
	
	.featured-articles-section {
		padding: 24px 12px;
	}
}

/* ===== GENERIC CATEGORY SECTION ===== */
.category-section-generic {
	margin: 0;
	margin-bottom: 20px;
	border-radius: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: hidden;
	box-sizing: border-box;
}

/* Custom background when color is specified */
.category-section-generic.has-custom-bg {
	background: linear-gradient(135deg, var(--section-bg-color), var(--section-bg-color)dd) !important;
}

/* Default background for day mode */
.category-section-generic.has-default-bg {
	background: rgb(248, 249, 250) !important;
	color: #333333;
}

/* Square corners option - removes rounded corners when parameter is passed */
.category-section-generic.has-rounded-corners .category-grid-item {
	border-radius: 0;
}

/* Black title lines for sections with custom background colors */
.category-section-generic.has-custom-bg .section-title-with-lines::before,
.category-section-generic.has-custom-bg .section-title-with-lines::after {
	background-color: #000000;
}

/* Default background for night mode - using body class instead of media query */
body.night-mode .category-section-generic.has-default-bg,
body.dark-mode .category-section-generic.has-default-bg,
.dark-theme .category-section-generic.has-default-bg,
[data-theme="dark"] .category-section-generic.has-default-bg {
	background: rgb(26, 26, 26) !important;
	color: #e0e0e0;
}

/* Section title colors for default backgrounds in night mode */
body.night-mode .category-section-generic.has-default-bg .section-title-text,
body.dark-mode .category-section-generic.has-default-bg .section-title-text,
.dark-theme .category-section-generic.has-default-bg .section-title-text,
[data-theme="dark"] .category-section-generic.has-default-bg .section-title-text {
	color: white;
}

/* Fallback for system dark mode preference - DISABLED to prevent auto dark mode */
/* User must explicitly toggle night mode instead */
/*
@media (prefers-color-scheme: dark) {
	.category-section-generic.has-default-bg {
		background: rgb(26, 26, 26) !important;
		color: #e0e0e0;
	}

	.category-section-generic.has-default-bg .section-title-text {
		color: white;
	}
}
*/

/* Ensure no body margins interfere */
body {
	margin: 0;
	padding: 0;
}

/* Specific styles for video category section */
.category-section-فيديو.category-section-generic {
	background: linear-gradient(135deg, #b70703, #b70703dd) !important;
	box-shadow: 0 3px 16px rgba(183, 7, 3, 0.3);
}

.category-section-generic .category-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.category-section-generic .category-header {
	margin-bottom: 0;
}

.category-section-generic .category-grid {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
	height: 384px;
	margin-bottom: 12px;
}

/* Explicit positioning for all grid items - Desktop only */
@media (min-width: 769px) {
	.category-section-generic .category-grid > *:nth-child(1) {
		grid-row: 1 / 3 !important;
		grid-column: 2 !important;
	}

	.category-section-generic .category-grid > *:nth-child(2) {
		grid-row: 1;
		grid-column: 1;
	}

	.category-section-generic .category-grid > *:nth-child(3) {
		grid-row: 2;
		grid-column: 1;
	}

	.category-section-generic .category-grid > *:nth-child(4) {
		grid-row: 1;
		grid-column: 3;
	}

	.category-section-generic .category-grid > *:nth-child(5) {
		grid-row: 2;
		grid-column: 3;
	}
}

.category-section-generic .category-grid-item {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
}

.category-section-generic .category-grid-item.featured {
	grid-row: 1 / 3 !important;
	grid-column: 2 !important;
}

.category-section-generic .category-grid-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.category-section-generic .category-thumbnail {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.category-section-generic .category-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.category-section-generic .category-grid-item:hover .category-thumbnail img {
	transform: scale(1.05);
}

.category-section-generic .category-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #333, #666);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 38px;
}

.category-section-generic .category-play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255,255,255,0.9);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: all 0.3s ease;
	opacity: 1;
}

/* Play icon color for custom backgrounds */
.category-section-generic.has-custom-bg .category-play-overlay {
	color: var(--section-bg-color);
}

/* Play icon color for default backgrounds */
.category-section-generic.has-default-bg .category-play-overlay {
	color: #007bff;
}

/* Dark mode play icon colors */
body.night-mode .category-section-generic.has-default-bg .category-play-overlay,
body.dark-mode .category-section-generic.has-default-bg .category-play-overlay,
.dark-theme .category-section-generic.has-default-bg .category-play-overlay,
[data-theme="dark"] .category-section-generic.has-default-bg .category-play-overlay {
	color: #0d6efd;
}

/* DISABLED - Auto dark mode based on system preference
@media (prefers-color-scheme: dark) {
	.category-section-generic.has-default-bg .category-play-overlay {
		color: #0d6efd;
	}
}
*/

.category-section-generic .category-grid-item.featured .category-play-overlay {
	width: 48px;
	height: 48px;
	font-size: 16px;
}

.category-section-generic .category-grid-item:hover .category-play-overlay {
	transform: translate(-50%, -75%);
}

.category-section-generic .category-grid-item.featured:hover .category-play-overlay {
	transform: translate(-50%, -80%);
}

.category-section-generic .category-duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(0,0,0,0.8);
	color: white;
	padding: 3px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 600;
}

.category-section-generic .category-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,1));
	padding: 20px 16px 16px;
	color: white;
	transition: all 0.3s ease;
}

/* Enhanced gradient for video and shorts sections */
.category-section-فيديو .category-content,
.shorts-section .shorts-content {
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,1) 100%);
}

/* Play icon for TV section (like shorts) */
.category-section-فيديو .category-play-icon {
	position: absolute;
	bottom: 6px;
	left: 6px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
	transition: all 0.3s ease;
}

.category-section-فيديو .category-play-icon svg {
	width: 38px;
	height: 38px;
}

.category-section-فيديو .category-grid-item:hover .category-play-icon {
	transform: scale(1.1);
	color: #b70703;
}

/* Apply gradient to TV section thumbnails */
.category-section-فيديو .category-thumbnail {
	position: relative;
}

.category-section-فيديو .category-thumbnail::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 70%;
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,1) 100%);
	pointer-events: none;
}

/* Duration display for TV section */
.category-section-فيديو .category-duration {
	position: absolute;
	top: 6px;
	right: 6px;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 10px;
	z-index: 2;
}

.category-section-generic .category-meta {
	font-size: 11px;
	opacity: 0.9;
	margin-bottom: 8px;
	transition: all 0.3s ease;
}

/* Time display for TV section */
.category-section-فيديو .category-time {
	margin-right: 8px;
	color: rgba(255, 255, 255, 0.8);
}

.category-section-generic .category-grid-item.featured .category-meta {
	font-size: 13px;
}

.category-section-generic .category-content h3 {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	line-height: 1.4;
	transition: all 0.3s ease;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.9);
}

.category-section-generic .category-grid-item.featured .category-content h3 {
	font-size: 24px;
}

.category-section-generic .category-content h3 a {
	color: white;
	text-decoration: none;
}

.category-section-generic .category-content h3 a:hover {
	color: white;
}

.category-section-generic .category-grid-item:hover .category-meta {
	opacity: 0;
	transform: translateY(-8px);
}

.category-section-generic .category-grid-item:hover .category-content h3 {
	transform: translateY(-12px);
}

/* This media query is now handled by the mobile @media (max-width: 768px) below */

@media (max-width: 768px) {
	.category-section-generic .category-grid {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(5, auto);
		height: auto;
		gap: 2vw;
	}
	
	.category-section-generic .category-grid-item {
		height: clamp(240px, 60vw, 480px);
	}
	
	/* Make featured post look the same as other posts on mobile */
	.category-section-generic .category-grid-item.featured {
		grid-row: span 1;
		grid-column: 1;
		height: clamp(240px, 60vw, 480px); /* Same height as regular posts */
	}
	
	/* Make featured post text same size as other posts on mobile */
	.category-section-generic .category-grid-item.featured .category-content h3,
	.category-section-generic .category-grid-item.featured .post-title {
		font-size: clamp(13px, 4.5vw, 18px) !important; /* Compact responsive font size */
	}
	
	.category-section-generic .category-grid-item.featured .category-meta {
		font-size: clamp(10px, 4vw, 13px) !important; /* Increased responsive meta size */
	}
	
	/* Ensure all 5 posts are displayed in single column with same styling */
	.category-section-generic .category-grid > *:nth-child(1),
	.category-section-generic .category-grid > *:nth-child(2),
	.category-section-generic .category-grid > *:nth-child(3),
	.category-section-generic .category-grid > *:nth-child(4),
	.category-section-generic .category-grid > *:nth-child(5) {
		grid-column: 1;
		grid-row: auto;
		height: clamp(240px, 60vw, 480px); /* All posts same responsive height */
	}
	
	/* Make all post titles responsive */
	.category-section-generic .post-title {
		font-size: clamp(13px, 4.5vw, 18px) !important; /* Compact sizes */
	}
	
	/* Make all post meta responsive */
	.category-section-generic .post-meta {
		font-size: clamp(10px, 4vw, 13px) !important; /* Increased sizes */
	}
}

/* Dark mode support for category sections */
body.night-mode .category-section-generic .category-content h3,
body.dark-mode .category-section-generic .category-content h3,
.dark-theme .category-section-generic .category-content h3,
[data-theme="dark"] .category-section-generic .category-content h3 {
	color: white;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.9);
}


body.night-mode .columns-section .column-title a {
	color: white !important;
}

body.night-mode .category-section-generic .category-content h3 a,
body.dark-mode .category-section-generic .category-content h3 a,
.dark-theme .category-section-generic .category-content h3 a,
[data-theme="dark"] .category-section-generic .category-content h3 a {
	color: white;
}

body.night-mode .category-section-generic .category-content h3 a:hover,
body.dark-mode .category-section-generic .category-content h3 a:hover,
.dark-theme .category-section-generic .category-content h3 a:hover,
[data-theme="dark"] .category-section-generic .category-content h3 a:hover {
	color: white;
}

/* DISABLED - Auto dark mode based on system preference
@media (prefers-color-scheme: dark) {
	.category-section-generic .category-content h3 {
		color: white;
		text-shadow: 2px 2px 3px rgba(0,0,0,0.9);
	}

	.category-section-generic .category-content h3 a {
		color: white;
	}

	.category-section-generic .category-content h3 a:hover {
		color: white;
	}
}
*/

/* ================================================
   COLUMNS SECTION (أقلامكم) STYLES
   ================================================ */

/* Columns Section Specific Styles */
.columns-section .columns-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

.columns-section .column-item {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    position: relative;
    direction: ltr;
    justify-content: space-between;
}

/* Removed separator lines between posts */

.columns-section .column-text {
    flex: 1;
    min-width: 0;
}

.columns-section .column-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    color: #333;
    text-align: right;
}

.columns-section .column-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.columns-section .column-title a:hover {
    color: #007cba;
}

.columns-section .column-image {
    flex-shrink: 0;
    order: 2; /* Position image on the right */
}

.columns-section .column-text {
    flex: 1;
    min-width: 0;
    order: 1; /* Position text on the left */
    direction: rtl;
}

.columns-section .column-featured-img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
    transition: border-color 0.3s ease;
}

.columns-section .column-featured-img:hover {
    border-color: #007cba;
}

.columns-section .column-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ddd;
    color: #999;
    font-size: 26px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .columns-content {
        flex-direction: column;
        gap: 16px;
    }
    
    .column-item {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid #ddd;
    }
    
    .column-item:not(:last-child)::after {
        display: none;
    }
    
    .column-item:last-child {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
  
    
    .columns-container {
        padding: 0 12px;
    }
    
    .columns-title-wrapper {
        gap: 12px;
    }
    
    .columns-title {
        font-size: 13px;
        padding: 6px 16px;
    }
    
    .columns-section .column-title {
        font-size: 14px;
    }
    
    .columns-section .column-featured-img,
    .columns-section .column-placeholder {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 480px) {
    .columns-title {
        font-size: 11px;
        padding: 5px 12px;
    }
    
    .columns-section .column-title {
        font-size: 13px;
    }
    
    .columns-section .column-featured-img,
    .columns-section .column-placeholder {
        width: 56px;
        height: 56px;
    }
}

/* ================================================
   GLOBAL POST TEMPLATE STYLES
   (Used by shorts, video, and other post sections)
   ================================================ */

/* Grid Layout for Posts */
.shorts-section .shorts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}

/* Global Post Item Styles */
.post-item {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: rgba(255, 255, 255, 0.1);
    height: 192px; /* Match category grid item height */
}

.post-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* Global Post Thumbnail Styles */
.post-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.post-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-item:hover .post-featured-img {
    transform: scale(1.05);
}

/* Global Post Placeholder */
.post-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #666, #888);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
}

/* Global Post Content Styles */
.post-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,1) 100%);
    padding: 20px 12px 12px;
    color: white;
    transition: all 0.3s ease;
}

.post-content-wrapper {
    /* Tailwind classes handle the padding: ltr:pl-16 rtl:pr-16 */
	padding-left: 24px;
}

/* Ensure Tailwind padding classes work */
.post-content-wrapper.pl-12 {
    padding-left: 3rem; /* 38px - space for icon */
    padding-right: 0; /* No right padding needed */
}

/* Global Play Icon Styling */
.post-play-icon {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
    transition: all 0.3s ease;
}

.post-play-icon svg {
    width: 38px;
    height: 38px;
}

.group:hover .post-play-icon {
    color: #b70703;
}

.group:hover .post-title {
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

/* Global Post Title Styles */
.post-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    color: white;
    text-align: right;
    direction: rtl;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9);
}

/* Featured Post Styling */
.post-item.featured .post-title {
    font-size: 24px;
}

/* Featured Post Grid Positioning (for category sections) */
.category-section-generic .category-grid .post-item.featured {
    grid-row: 1 / 3 !important;
    grid-column: 2 !important;
}

/* Backup rule with higher specificity */
.category-grid .post-item.featured.category-grid-item {
    grid-row: 1 / 3 !important;
    grid-column: 2 !important;
}

/* Very specific rule to ensure featured post takes full height */
.category-section-generic .category-grid .post-item.featured.category-grid-item {
    grid-row: 1 / 3 !important;
    grid-column: 2 / 3 !important;
    height: 100% !important;
}

/* Alternative approach - target any featured item in category grid */
.category-grid > .post-item.featured,
.category-grid > .category-grid-item.featured {
    grid-row: 1 / 3 !important;
    grid-column: 2 !important;
}

.post-title a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-title a:hover {
    color: white;
}

/* Responsive Design for Post Template */
@media (max-width: 1024px) {
    .shorts-section .shorts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .shorts-section .shorts-grid {
        grid-template-columns: 1fr;
        gap: 2vw;
    }
    
    .shorts-section .post-item {
        height: clamp(240px, 60vw, 480px); /* Same responsive height as category posts */
    }
    
    .post-item {
        height: 200px; /* Taller for single column layout */
    }
    
    .post-title {
        font-size: 14px;
    }
    
    /* Featured post title on tablet */
    .post-item.featured .post-title {
        font-size: 16px; /* Smaller than desktop but still larger than regular */
    }
    
    .post-play-icon svg {
        width: 45px;
        height: 45px;
    }
    
    .post-play-icon {
        bottom: 5px;
        left: 5px;
    }
    
    .post-content {
        padding: 16px 10px 10px;
    }
    
    /* Responsive padding for icon space */
    .post-content-wrapper.pl-12 {
        padding-left: 2.5rem; /* 32px - smaller space on tablet */
        padding-right: 0; /* No right padding needed */
    }
}

@media (max-width: 480px) {
    .shorts-section .shorts-grid {
        grid-template-columns: 1fr;
        gap: 2vw;
    }
    
    .shorts-section .post-item {
        height: clamp(240px, 60vw, 480px); /* Same responsive height as category posts */
    }
    
    .post-item {
        height: 160px; /* Match category grid small mobile height */
    }
    
    .post-title {
        font-size: 13px;
    }
    
    /* Featured post title on mobile */
    .post-item.featured .post-title {
        font-size: 14px; /* Slightly larger than regular on mobile */
    }
    
    .post-play-icon svg {
        width: 38px;
        height: 38px;
    }
    
    .post-play-icon {
        bottom: 3px;
        left: 3px;
    }
    
    .post-content {
        padding: 12px 8px 8px;
    }
    
    /* Responsive padding for icon space - mobile */
    .post-content-wrapper.pl-12 {
        padding-left: 2rem; /* 26px - smaller space on mobile */
        padding-right: 0; /* No right padding needed */
    }
}

/* Section Title Icon for Shorts */
.shorts-section .section-title-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Global Post Meta Display */
.post-meta {
    margin-bottom: 6px;
    font-size: 13px;
	font-weight: 700;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.post-date {
    color: rgba(255, 255, 255, 0.9);
    margin-left: 8px;
}

.post-time {
    color: rgba(255, 255, 255, 0.9);
}

/* Hide date/time on hover */
.post-item:hover .post-meta {
    opacity: 0;
    transform: translateY(-8px);
}

/* Global Hover Animations */
.post-item {
    transition: all 0.3s ease;
}

.post-thumbnail img {
    transition: transform 0.3s ease;
}

.post-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.post-item:hover .post-thumbnail img {
    transform: scale(1.05);
}

.post-item:hover .post-title {
    transform: translateY(-2px);
}

.shorts-section .section-title-text i {
    font-size: 16px;
    color: white;
}

/* Bootstrap Icons in Section Titles */
.category-section-generic .section-title-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* View More Link for Category Sections */
.category-view-more {
    text-align: center;
    margin-top: 16px;
    padding-top: 16px;
}

.view-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.view-more-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: white;
}

/* For sections with custom backgrounds */
.has-custom-bg .view-more-link {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.3);
}

.has-custom-bg .view-more-link:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* For default background sections */
.has-default-bg .view-more-link {
    background: #b70703;
    color: white;
    border-color: #b70703;
}

.has-default-bg .view-more-link:hover {
    background: #a00603;
    border-color: #a00603;
}

/* Dark mode */
body.night-mode .has-default-bg .view-more-link {
    background: rgba(183, 7, 3, 0.9);
    border-color: rgba(183, 7, 3, 0.9);
}

body.night-mode .has-default-bg .view-more-link:hover {
    background: #b70703;
    border-color: #b70703;
}

/* ================================================
   THREE POSTS SECTION STYLES
   ================================================ */

.three-posts-section {
    margin: 0;
    margin-bottom: 20px;
    border-radius: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: hidden;
    box-sizing: border-box;
}

.three-posts-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.three-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.three-posts-item-wrapper {
    display: flex;
    flex-direction: column;
}

.three-posts-category-title {
    margin-bottom: 16px;
}

.three-posts-category-title .section-title-with-lines {
    margin-bottom: 0;
}

.three-posts-category-title .section-title-text {
    background: #000;
    color: white;
    padding: 6px 16px;
    font-size: 19px;
    font-weight: bold;
    white-space: nowrap;
    margin: 0 10px;
}

.three-posts-section .three-posts-item {
    position: relative;
    border-radius: 10px; /* Match category posts border-radius */
    overflow: hidden;
    transition: all 0.3s ease; /* Match category posts transition */
    background-color: rgba(255, 255, 255, 0.1);
    height: 256px; /* Increased desktop height */
}

.three-posts-section .three-posts-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* Ensure consistent typography in three-posts section */
.three-posts-section .post-title {
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    font-family: 'Cairo', sans-serif;
}

.three-posts-section .post-content p,
.three-posts-section .post-excerpt {
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.6;
    font-family: 'Cairo', sans-serif;
    margin: 0;
}

/* Custom background support */
.three-posts-section.has-custom-bg {
    background: linear-gradient(135deg, var(--section-bg-color), var(--section-bg-color)dd) !important;
}

.three-posts-section.has-default-bg {
    background: rgb(248, 249, 250) !important;
    color: #333333;
}

/* Like/Dislike Styles */
.three-posts-section .like-dislike-posts {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 256px; /* Match the height of other posts */
    border-radius: 10px;
    overflow: hidden;
    background-color: transparent;
    backdrop-filter: none;
}

.like-dislike-item {
    position: relative;
    flex: 1;
    transition: all 0.3s ease;
    height: 50%;
    border: none;
}

.like-dislike-item:first-child {
    border-bottom: none;
}

.like-dislike-item.like-item {
    background: #e7fcf6 !important;
}

.like-dislike-item.dislike-item {
    background: #fde7eb
}

.like-item:hover > .like-dislike-item.dislike-item{
    filter: brightness(1.1);

}

.like-dislike-link {
    display: block;
    text-decoration: none;
    color: white;
    height: 100%;
}

.like-dislike-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    height: 100%;
    position: relative;
}

.like-dislike-thumbnail {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    border-radius: 5px;
    overflow: hidden;
}

.like-dislike-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.like-dislike-text {
    flex: 1;
    min-width: 0; /* Allow text to shrink */
}

.like-dislike-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 3px 0;
    line-height: 1.2;
    color: #333;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.like-dislike-excerpt {
    font-size: 10px;
    color: #333;
    line-height: 1.3;
    margin: 0;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.like-icon,
.dislike-icon {
	position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex
;
    align-items: center;
    top: 16px;
    justify-content: center;
    font-size: 14px;
    color: white;
}

.like-icon{
    background: #2ec493;
}

.dislike-icon{
    background: #f54c6a;
}

/* Responsive Design for Three Posts Section */
@media (max-width: 1024px) {
    .three-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .three-posts-container {
        padding: 0 16px;
    }
}

@media (max-width: 768px) {
    .three-posts-grid {
        grid-template-columns: 1fr;
        gap: 2vw; /* Match category sections gap exactly */
    }
    
    .three-posts-container {
        padding: 0 12px;
    }
    
    .three-posts-category-title .section-title-text {
        font-size: 13px;
        padding: 5px 13px;
    }

    .three-posts-section .three-posts-item {
        height: clamp(240px, 60vw, 480px); /* Match category posts height exactly */
    }

    .three-posts-section .post-title {
        font-size: 16px !important;
    }

    .three-posts-section .post-content p,
    .three-posts-section .post-excerpt {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .three-posts-container {
        padding: 0 8px;
    }
    
    .three-posts-grid {
        gap: 2vw; /* Match category sections gap exactly */
    }
    
    .three-posts-category-title .section-title-text {
        font-size: 11px;
        padding: 4px 11px;
    }

    .three-posts-section .three-posts-item {
        height: clamp(240px, 60vw, 480px); /* Match category posts height exactly */
    }

    .three-posts-section .post-title {
        font-size: 15px !important;
    }

    .three-posts-section .post-content p,
    .three-posts-section .post-excerpt {
        font-size: 13px !important;
    }
}

/* ================================================
   MOBILE SPACING OPTIMIZATION
   Reduce margins and padding for better mobile UX
   ================================================ */

@media (max-width: 768px) {
    /* Hide only the ticker title "شريط الأخبار" on mobile */
    .ticker-js-title,
    .ticker-title {
        display: none !important;
    }
    
    /* Make ticker navigation buttons smaller on mobile */
    .ticker-prev,
    .ticker-next,
    .ticker-js-prev,
    .ticker-js-next,
    .ticker-nav-btn {
        width: 16px !important;
        height: 16px !important;
        font-size: 8px !important;
        padding: 0 !important;
    }
    
    .ticker-nav-right {
        padding: 0 5px !important;
        gap: 3px !important;
    }
    
    /* Mobile ticker positioning adjustments */
    #tickerSplide {
        margin-left: 4px !important;
    }
    
    .ticker-js-wrapper::before {
        left: 4px !important;
    }
    
    /* Section containers - reduce horizontal padding */
    .category-section-generic .category-container {
        padding: 0 12px; /* Reduced from 24px */
    }
    
    .hero-main-container {
        padding: 0 12px !important; /* Reduced from 16px */
    }
    
    .video-container {
        padding: 0 8px; /* Reduced from 12px */
    }
    
    .columns-container {
        padding: 0 8px; /* Reduced from 12px */
    }
    
    /* Section spacing - reduce vertical margins */
    .category-section-generic {
        margin-bottom: 16px; /* Reduced from 24px */
    }
    
    /* Mobile Typography - Compact title sizes for better layout */
    .post-title {
        font-size: 14px !important; /* Further reduced for compact layout */
    }
    
    .post-item.featured .post-title {
        font-size: 18px !important; /* Further reduced */
    }
    
    .post-meta {
        font-size: 11px !important; /* Keep meta text readable */
    }
    
    .category-section-generic .post-title {
        font-size: clamp(13px, 4.5vw, 18px) !important; /* More compact responsive sizing */
    }
    
    .category-section-generic .post-meta {
        font-size: clamp(10px, 4vw, 13px) !important; /* Keep meta text proportional */
    }
    
    .video-section {
        padding: 8px 0; /* Reduced from 12px */
        margin: 12px 0; /* Reduced from 12px */
    }
    
    .sports-section {
        padding: 12px; /* Reduced from 16px */
        margin: 12px 0; /* Reduced from 16px */
    }
    
    /* Header and title spacing */
    .category-header {
        margin-bottom: 12px; /* Reduced from 20px */
    }
    
    .section-title-with-lines {
        margin-bottom: 12px; /* Reduced from 16px */
    }
    
    .section-title-text {
        padding: 6px 13px; /* Reduced from 8px 19px */
        font-size: 14px; /* Reduced from 19px */
    }
    
    /* Post content padding */
    .post-content {
        padding: 12px 8px 8px; /* Reduced from 16px 10px 10px */
    }
    
    /* Grid gaps */
    .category-section-generic .category-grid {
        gap: 1.5vw; /* Reduced from 2vw */
    }
    
    .shorts-section .shorts-grid {
        gap: 1.5vw; /* Reduced from 2vw */
    }
    
    /* News grid sections */
    .news-grid-section,
    .news-grid-section-2 {
        margin: 16px 0; /* Reduced from 32px */
    }
    
    /* Latest news section */
    .latest-news-section {
        margin: 24px 0; /* Reduced from 40px */
    }
    
    .section-header {
        margin-bottom: 20px; /* Reduced from 32px */
    }
    
    /* Hero section items */
    .left-section-item {
        margin-bottom: 8px; /* Reduced from 12px */
    }
    
    .hero-sidebar-article {
        padding: 10px; /* Reduced from 12px */
    }
}

@media (max-width: 480px) {
    /* Extra small mobile - even more compact */
    .category-section-generic .category-container {
        padding: 0 8px; /* Further reduced */
    }
    
    .hero-main-container {
        padding: 0 8px !important; /* Further reduced */
    }
    
    .video-container {
        padding: 0 6px; /* Further reduced */
    }
    
    .columns-container {
        padding: 0 6px; /* Further reduced */
    }
    
    /* Section spacing - very compact */
    .category-section-generic {
        margin-bottom: 12px; /* Further reduced */
    }
    
    /* Small Mobile Typography - Compact title sizes */
    .post-title {
        font-size: 16px !important; /* Compact size for small screens */
    }
    
    .post-item.featured .post-title {
        font-size: 19px !important; /* More compact for better fit */
    }
    
    .post-meta {
        font-size: 13px !important; /* Keep meta text readable */
    }
    
    .category-section-generic .post-title {
        font-size: clamp(14px, 5vw, 19px) !important; /* Compact responsive sizing */
    }
    
    .category-section-generic .post-meta {
        font-size: clamp(11px, 5vw, 14px) !important; /* Keep meta proportional */
    }
    
    .video-section {
        padding: 6px 0; /* Further reduced */
        margin: 8px 0; /* Further reduced */
    }
    
    .sports-section {
        padding: 8px; /* Further reduced */
        margin: 8px 0; /* Further reduced */
    }
    
    /* Header and title spacing */
    .category-header {
        margin-bottom: 10px; /* Further reduced */
    }
    
    .section-title-with-lines {
        margin-bottom: 10px; /* Further reduced */
    }
    
    .section-title-text {
        padding: 5px 10px; /* Further reduced */
        font-size: 13px; /* Further reduced */
    }
    
    /* Post content padding */
    .post-content {
        padding: 10px 6px 6px; /* Further reduced */
    }
    
    /* Grid gaps */
    .category-section-generic .category-grid {
        gap: 1vw; /* Further reduced */
    }
    
    .shorts-section .shorts-grid {
        gap: 1vw; /* Further reduced */
    }
    
    /* News sections */
    .news-grid-section,
    .news-grid-section-2 {
        margin: 12px 0; /* Further reduced */
    }
    
    .latest-news-section {
        margin: 16px 0; /* Further reduced */
    }
    
    .section-header {
        margin-bottom: 16px; /* Further reduced */
    }
    
    /* Hero items */
    .left-section-item {
        margin-bottom: 6px; /* Further reduced */
    }
    
    .hero-sidebar-article {
        padding: 8px; /* Further reduced */
    }
    
    /* Latest news items */
    .latest-news-item {
        padding: 10px; /* Further reduced from 12px */
    }
    
    /* Override inline padding styles for mobile */
    .category-section-generic[style*="padding: 24px 0"] {
        padding: 12px 0 !important; /* Override inline padding */
    }
    
    .shorts-section[style*="padding: 24px 0"] {
        padding: 12px 0 !important; /* Override inline padding */
    }
}

/* Additional mobile overrides for inline styles */
@media (max-width: 480px) {
    .category-section-generic[style*="padding: 24px 0"] {
        padding: 8px 0 !important; /* Further reduced for small mobile */
    }
    
    .shorts-section[style*="padding: 24px 0"] {
        padding: 8px 0 !important; /* Further reduced for small mobile */
    }
}

.category-section-generic .section-title-text i {
    font-size: 16px;
    color: white !important;
    display: inline-block;
}

/* Specific styling for video section icons */
.category-section-فيديو .section-title-text i {
    font-size: 18px;
    color: white !important;
}

/* Video Section Thumbnail Container */
.category-section-فيديو .category-thumbnail {
    position: relative !important;
}

/* Video Section Title with Play Icon (icon left, title right) */
.category-section-فيديو .category-title {
    display: flex;
    align-items: center;
    direction: rtl; /* Right-to-left layout */
    gap: 6px; /* Space between icon and text */
}

.category-section-فيديو .category-title i {
    font-size: 14px;
    color: #b70703;
    flex-shrink: 0; /* Icon keeps its size */
    order: 1; /* Icon appears first (left) */
}

.category-section-فيديو .category-title a {
    flex: 1;
    order: 2; /* Title appears second (right) */
    text-align: right; /* Align text to the right */
}

/* SVG Icon responsive adjustments integrated above */

/*--------------------------------------------------------------
# Footer Styles
--------------------------------------------------------------*/

/* Footer Main */
.site-footer {
    background-color: #1a1a1a;
    color: #ffffff;
    margin-top: 40px;
    font-family: 'Cairo', Arial, sans-serif;
    direction: rtl;
}

/* Footer Container */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Footer Main Content */
.footer-main {
    padding: 48px 0 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}

/* Footer Section Headers with Lines */
.footer-section-header {
    margin-bottom: 20px;
}

.footer-section-header .section-title-with-lines {
    display: flex;
    align-items: center;
    position: relative;
}

.footer-section-header .section-title-text {
    background: #b70703 !important;
    color: #ffffff;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.body.dark-mode .footer-about p  {
	font-size: 14px !important;
}

/* Footer About Section */
.footer-about .footer-logo h3 {
    font-size: 22px;
    margin-bottom: 12px;
    color: #ffffff;
    font-weight: 700;
}

/* Footer Logo Styling */
.footer-site-logo {
    margin-bottom: 16px;
}

.footer-site-logo img {
    max-width: 128px;
    height: auto;
    filter: brightness(0) invert(1); /* Make logo white */
}

.footer-about p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 16px;
    font-size: 14px;
}

/* Footer Social Links */
.footer-social {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.social-link {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-link:hover {
    color: white;
    transform: translateY(-2px);
}

.social-link.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.social-link.twitter:hover {
    background: #1da1f2;
    border-color: #1da1f2;
}

.social-link.youtube:hover {
    background: #ff0000;
    border-color: #ff0000;
}

.social-link.instagram:hover {
    background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
    border-color: #833ab4;
}

.social-link.linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
}

/* Footer Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    display: inline-block;
    position: relative;
}

.footer-links a:hover {
    color: #ffffff;
    padding-right: 8px;
}

.footer-links a::before {
    content: '◄';
    position: absolute;
    right: -12px;
    opacity: 0;
    transition: all 0.3s ease;
}

.footer-links a:hover::before {
    right: -8px;
    opacity: 1;
}

/* Footer Links Two Columns */
.footer-links-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    column-gap: 20px;
}

/* Footer Recent Posts */
.footer-recent-posts {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-recent-posts li {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-recent-posts li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.footer-recent-posts a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

.footer-recent-posts a:hover {
    color: #ffffff;
}

.footer-recent-posts .post-date {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}

.footer-recent-posts .post-title {
    font-size: 11px;
    line-height: 1.4;
}

/* Footer Newsletter */
.footer-newsletter {
    margin-bottom: 20px;
}

.footer-newsletter p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
    font-size: 14px;
}

.newsletter-form {
    display: flex;
    gap: 8px;
}

.newsletter-form input[type="email"] {
    flex: 1;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: #ffffff;
    font-size: 14px;
    font-family: 'Cairo', Arial, sans-serif;
}

.newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.newsletter-form button {
    padding: 10px 20px;
    background: #b70703;
    border: none;
    border-radius: 20px;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Cairo', Arial, sans-serif;
}

.newsletter-form button:hover {
    background: #a10603;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(183, 7, 3, 0.3);
}

/* Footer Contact Info */
.footer-contact-info p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-contact-info i {
    color: #b70703;
    width: 16px;
}

/* Footer Bottom */
.footer-bottom {
    background: rgba(0, 0, 0, 0.3);
    padding: 16px 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.site-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
}

.developer-credit {
    margin-top: 4px;
    font-size: 10px;
}

.developer-credit a {
    color: #b70703;
    text-decoration: none;
    transition: all 0.3s ease;
}

.developer-credit a:hover {
    color: #e74c5c;
}

/* Footer Bottom Menu */
.footer-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

.footer-menu a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 11px;
    padding: 0 8px;
    transition: all 0.3s ease;
}

.footer-menu a:hover {
    color: #ffffff;
}

.footer-menu .separator {
    color: rgba(255, 255, 255, 0.3);
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 40px;
    height: 40px;
    background: #b70703;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(183, 7, 3, 0.3);
    z-index: 999;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: #a10603;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(183, 7, 3, 0.4);
}

/* Dark Mode Support */
body.night-mode .site-footer {
    background-color: #0d0d0d;
}

body.night-mode .three-posts-section.has-default-bg
{
    background-color: rgb(26, 26, 26) !important

}

/* Dark mode for like/dislike */
body.night-mode .like-dislike-item.like-item,
body.dark-mode .like-dislike-item.like-item,
[data-theme="dark"] .like-dislike-item.like-item {
    background: #388E3C; /* Darker green for dark mode */
}

body.night-mode .like-dislike-item.dislike-item,
body.dark-mode .like-dislike-item.dislike-item,
[data-theme="dark"] .like-dislike-item.dislike-item {
    background: #fde7eb /* Darker red for dark mode */
}

body.night-mode .footer-section-header .section-title-text {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.night-mode .social-link,
body.night-mode .newsletter-form input[type="email"] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .footer-main {
        padding: 32px 0 24px;
    }
    
    .footer-container {
        padding: 0 16px;
    }
    
    .footer-section-header .section-title-text {
        font-size: 14px;
        padding: 6px 13px;
    }
    
    .footer-links a {
        font-size: 12px;
    }
    
    .footer-about p {
        font-size: 12px;
    }
    
    .footer-contact-info p {
        font-size: 11px;
    }
    
    .footer-site-logo img {
        max-width: 120px;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-menu {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 12px;
    }
    
    .site-info p {
        margin-bottom: 4px;
    }
}


@media (max-width: 480px) {
    .footer-main {
        padding: 24px 0 16px;
    }
    
    .footer-container {
        padding: 0 12px;
    }
    
    .footer-section-header .section-title-text {
        font-size: 11px;
        padding: 6px 13px;
    }
    
    .footer-about .footer-logo h3 {
        font-size: 19px;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form button {
        width: 100%;
    }
    
    .footer-menu a {
        font-size: 10px;
        padding: 0 4px;
    }
}

/*--------------------------------------------------------------
# Single Post Styles
--------------------------------------------------------------*/

/* Single Post Main */
.single-post-main {
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* Featured Image within content */
.single-featured-image-wrapper {
    margin: 24px 0;
}

.single-featured-image {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
    box-shadow: 0 3px 16px rgba(0,0,0,0.1);
}

/* Breadcrumb */
.single-breadcrumb {
    margin-bottom: 16px;
    font-size: 18px;
    color: #666;
}

.single-breadcrumb a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s ease;
}

.single-breadcrumb a:hover {
    color: #b70703;
}

.breadcrumb-separator {
    margin: 0 6px;
    color: #999;
}

.breadcrumb-current {
    color: #333;
    font-weight: 600;
    display: inline-block;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* Dark mode breadcrumb */
body.night-mode .single-breadcrumb,
body.dark-mode .single-breadcrumb,
[data-theme="dark"] .single-breadcrumb {
    color: #b0b0b0;
}

body.night-mode .single-breadcrumb a,
body.dark-mode .single-breadcrumb a,
[data-theme="dark"] .single-breadcrumb a {
    color: #888;
}

body.night-mode .single-breadcrumb a:hover,
body.dark-mode .single-breadcrumb a:hover,
[data-theme="dark"] .single-breadcrumb a:hover {
    color: #b70703;
}

body.night-mode .breadcrumb-separator,
body.dark-mode .breadcrumb-separator,
[data-theme="dark"] .breadcrumb-separator {
    color: #666;
}

body.night-mode .breadcrumb-current,
body.dark-mode .breadcrumb-current,
[data-theme="dark"] .breadcrumb-current {
    color: #e0e0e0;
}

/* Title */
.single-title {
    font-size: clamp(26px, 4vw, 32px);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 24px;
    color: #1a1a1a;
}

/* Meta Information */
.single-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0;
    padding: 16px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.single-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.single-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
}

.single-author-info {
    display: flex;
    flex-direction: column;
}

.single-author-name {
    font-weight: 600;
    font-size: 13px;
    color: #b70703;
    display: flex;
    align-items: center;
    gap: 4px;
}

.single-author-name i {
    font-size: 14px;
}

body.night-mode .single-author-name {
    color: #b70703 !important;
}

body.night-mode .single-publish-date{
	color: white !important;
}

.single-publish-date {
    font-size: 11px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-publish-date i {
    font-size: 10px;
}

.single-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Share Buttons */
.single-share {
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-share-label {
    font-weight: 600;
    margin-left: 8px;
}

.single-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #ddd;
    cursor: pointer;
}

.single-share-btn:hover {
    transform: translateY(-2px);
}

.single-share-btn.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: white;
}

.single-share-btn.twitter:hover {
    background: #1da1f2;
    border-color: #1da1f2;
    color: white;
}

.single-share-btn.whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    color: white;
}

.single-share-btn.copy-link:hover {
    background: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* Sticky Share */
.single-share.sticky {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    z-index: 100;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        left: -80px;
    }
    to {
        left: 24px;
    }
}

/* Reading Time */
.single-reading-time {
    font-size: 11px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

/* Content Wrapper */
.single-content-wrapper {
    position: relative;
}

.single-content-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 32px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
}

/* Progress Bar - All Pages */
.progress-bar,
.single-progress-bar,
.front-page-progress-bar,
.category-progress-bar,
.page-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: #b70703;
    width: 0%;
    z-index: 1000;
    transition: width 0.2s ease;
}

/* Main Content */
.single-content {
    background: white;
    border-radius: 6px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Excerpt */
.single-excerpt {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 24px;
    padding: 16px;
    background: #f8f9fa;
    border-right: 3px solid #b70703;
    border-radius: 3px;
}

/* Article Body */
.single-body {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}

.single-body p {
    margin-bottom: 16px;
}

.single-body h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 32px 0 16px;
    color: #1a1a1a;
}

.single-body h3 {
    font-size: 19px;
    font-weight: 600;
    margin: 24px 0 12px;
    color: #333;
}

.single-body h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 12px;
    color: #444;
}

.single-body ul,
.single-body ol {
    margin: 16px 0;
    padding-right: 24px;
}

.single-body li {
    margin-bottom: 8px;
}

.single-body blockquote {
    margin: 24px 0;
    padding: 16px 24px;
    background: #f8f9fa;
    border-right: 3px solid #b70703;
    font-style: italic;
    font-size: 16px;
    color: #666;
}

.single-body img {
    max-width: 100%;
    height: auto;
    margin: 16px 0;
    border-radius: 6px;
}

.single-body a {
    color: #b70703;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.single-body a:hover {
    border-bottom-color: #b70703;
}

/* Tags */
.single-tags {
    margin: 32px 0;
    padding: 16px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.single-tags i {
    color: #b70703;
    margin-left: 8px;
}

.single-tag-label {
    font-weight: 600;
    margin-left: 8px;
}

.single-tags a {
    display: inline-block;
    background: #f8f9fa;
    color: #666;
    padding: 4px 12px;
    border-radius: 16px;
    margin: 4px;
    text-decoration: none;
    font-size: 11px;
    transition: all 0.3s ease;
}

.single-tags a:hover {
    background: #b70703;
    color: white;
    transform: translateY(-2px);
}

/* Author Box */
.single-author-box {
    display: flex;
    gap: 16px;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 6px;
    margin: 32px 0;
}

.author-box-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.author-box-info {
    flex: 1;
}

.author-box-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.author-box-name a {
    color: #1a1a1a;
    text-decoration: none;
}

.author-box-bio {
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
}

.author-box-social a {
    display: inline-flex;
    width: 28px;
    height: 28px;
    background: #b70703;
    color: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.author-box-social a:hover {
    background: #a10603;
    transform: translateY(-2px);
}

/* Post Navigation */
.single-post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 32px 0;
}

.single-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.single-nav-link:hover {
    background: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.single-nav-prev {
    grid-column: 1;
}

.single-nav-next {
    grid-column: 2;
    text-align: left;
}

.single-nav-label {
    display: block;
    font-size: 10px;
    color: #999;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.single-nav-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.single-nav-link i {
    font-size: 16px;
    color: #b70703;
}

/* Sidebar */
.single-sidebar {
    position: sticky;
    top: 16px;
    height: fit-content;
}

/* Widgets */
.single-widget {
    background: white;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 24px;
}

.widget-header {
    margin-bottom: 16px;
}

.widget-header .section-title-text {
    background: #b70703;
    color: white;
    padding: 6px 16px;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Related Posts */
.related-post-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.related-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.related-post-thumbnail {
    flex: 0 0 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 6px;
}

.related-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-post-thumbnail:hover img {
    transform: scale(1.1);
}

.related-post-content {
    flex: 1;
}

.related-post-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

.related-post-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-post-title a:hover {
    color: #b70703;
}

.related-post-date {
    font-size: 10px;
    color: #999;
}

/* New Sidebar Widgets Styles */

/* Hourly News Widget */
.hourly-post-item {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.hourly-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.single-widget .hourly-post-time {
    display: inline-block;
    background: #b70703;
    color: white;
    padding: 0 !important;
    border-radius: 3px;
    font-size: 11px !important;
    font-weight: 600;
    margin-bottom: 6px;
}

.single-widget h4 {

    font-size: 13px ;

}

.hourly-post-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.hourly-post-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.hourly-post-title a:hover {
    color: #b70703;
}

/* Hourly News Widget */
.hourly-posts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hourly-post-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
}

.hourly-post-item:last-child {
    border-bottom: none;
}

.hourly-post-time {
    flex: 0 0 auto;
    background: #b70703;
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

.hourly-post-title {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.hourly-post-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.hourly-post-title a:hover {
    color: #b70703;
}

/* TV Widget */
.tv-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.tv-widget .sidebar-tv-item {
    margin: 0;
    display: block;
}

/* Fix for post-template link structure */
.tv-widget .sidebar-tv-item > a {
    display: block !important;
    text-decoration: none;
}

.tv-widget .post-item {
    height: auto !important;
    border-radius: 0;
    overflow: visible !important;
    margin-bottom: 12px;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
	box-sizing: none !important;
	color: #333 !important;
}

.tv-widget .post-thumbnail {
    height: 96px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #000;
}

.tv-widget .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tv-widget .post-item:hover .post-thumbnail img {
    transform: scale(1.05);
}

.tv-widget .post-content {
    padding: 6px 0 !important;
    background: none !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    text-align: center;
}

/* Ensure content wrapper displays */
.tv-widget .post-content-wrapper {
    display: block !important;
}

/* Hide post meta in TV widget */
.tv-widget .post-meta {
    display: none !important;
}

.tv-widget .post-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin: 0 !important;
    font-weight: 600 !important;
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important;
    text-shadow: none !important;
    background: none !important;
}

/* Remove hover color change */
.tv-widget .tv-post-link:hover .post-title {
    color: #000 !important;
    background: none !important;
}

.tv-widget .post-play-icon {
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 26px;
    color: white;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
    z-index: 2;
    transition: all 0.3s ease;
}

.tv-widget .post-item:hover .post-play-icon {
    transform: scale(1.1);
 
}

/* Dark mode Hourly widget */
body.night-mode .hourly-widget .widget-header .section-title-text,
body.dark-mode .hourly-widget .widget-header .section-title-text,
[data-theme="dark"] .hourly-widget .widget-header .section-title-text {
    background: #b70703;
    color: white;
}

body.night-mode .hourly-post-item,
body.dark-mode .hourly-post-item,
[data-theme="dark"] .hourly-post-item {
    border-bottom-color: #444;
}

body.night-mode .hourly-post-title a,
body.dark-mode .hourly-post-title a,
[data-theme="dark"] .hourly-post-title a {
    color: #e0e0e0;
}

body.night-mode .hourly-post-title a:hover,
body.dark-mode .hourly-post-title a:hover,
[data-theme="dark"] .hourly-post-title a:hover {
    color: #b70703;
}

/* Dark mode TV widget */
body.night-mode .tv-widget .widget-header .section-title-text,
body.dark-mode .tv-widget .widget-header .section-title-text,
[data-theme="dark"] .tv-widget .widget-header .section-title-text {
    background: #b70703;
    color: white;
}

body.night-mode .tv-widget .post-title,
body.dark-mode .tv-widget .post-title,
[data-theme="dark"] .tv-widget .post-title {
    color: #fff !important;
    background: none !important;
}

body.night-mode .tv-widget .tv-post-link:hover .post-title,
body.dark-mode .tv-widget .tv-post-link:hover .post-title,
[data-theme="dark"] .tv-widget .tv-post-link:hover .post-title {
    color: #fff !important;
    background: none !important;
}

/* Override template utility classes for TV widget */
.tv-widget .p-4 {
    padding: 6px 4px 0 !important;
}

.tv-widget .text-sm {
    font-size: 10px !important;
}

.tv-widget .text-gray-900,
.tv-widget .text-gray-500 {
    color: #333 !important;
}

.tv-widget .dark\:text-gray-100 {
    color: #333 !important;
}

/* Ensure block class doesn't break layout */
.tv-widget .block {
    display: block !important;
}

/* TV widget link styling */
.tv-widget .tv-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Writers Widget */
.writers-posts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.writers-post-item {
    display: flex;
    gap: 12px;
    align-items: center;
}

.writers-post-author {
    flex: 0 0 48px;
}

.writers-post-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e0e0e0;
}

.writers-post-content {
    flex: 1;
}

.writers-post-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.writers-post-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.writers-post-title a:hover {
    color: #b70703;
}

/* Dark mode writers widget */
body.night-mode .writers-widget .widget-header .section-title-text,
body.dark-mode .writers-widget .widget-header .section-title-text,
[data-theme="dark"] .writers-widget .widget-header .section-title-text {
    background: #b70703;
    color: white;
}

body.night-mode .writers-post-author img,
body.dark-mode .writers-post-author img,
[data-theme="dark"] .writers-post-author img {
    border-color: #444;
}

body.night-mode .writers-post-title a,
body.dark-mode .writers-post-title a,
[data-theme="dark"] .writers-post-title a {
    color: #e0e0e0;
}

body.night-mode .writers-post-title a:hover,
body.dark-mode .writers-post-title a:hover,
[data-theme="dark"] .writers-post-title a:hover {
    color: #b70703;
}

/* Related Posts Section */
.single-related-section {
    background: transparent;
    padding: 16px 0;
    margin-top: 16px;
    margin-bottom: 0px;
}

.single-related-container {
    max-width: 1240px;
    margin: 0 auto;
}

.single-related-section .section-header {
    text-align: center;
    margin-bottom: 32px;
}

.single-related-section .section-title-text {
    background: #b70703;
    color: white;
    padding: 10px 24px;
    border-radius: 24px;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.single-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Related post items using post-template */
.single-related-grid .related-post-item {
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
}

.single-related-grid .related-post-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.single-related-grid .post-item {
    height: 240px;
    background: transparent;
    position: relative;
}

.single-related-grid .post-thumbnail {
    height: 100%;
    background: #f0f0f0;
}

.single-related-grid .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-related-grid .post-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.7) 50%, transparent);
    color: white;
}

.single-related-grid .post-title {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.single-related-grid .post-title a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.single-related-grid .post-title a:hover {
    color: #b70703;
}

.single-related-grid .post-meta {
    font-size: 10px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0;
}

/* Hide excerpt in related posts */
.single-related-grid .post-excerpt {
    display: none;
}


/* Comments Section */
.single-comments-section {
    background: white;
    padding: 16px 0;
}

.single-comments-container {
    max-width: 100%;
    margin: 0 auto;
}

.single-comments-section .section-header {
    text-align: center;
    margin-bottom: 32px;
}

.single-comments-section .section-title-text {
    background: #28a745;
    color: white;
    padding: 10px 24px;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.single-comments-wrapper {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 30px;
}

/* Style WordPress Comment Form */
.single-comments-wrapper .comment-form {
    margin-bottom: 32px;
}

.single-comments-wrapper .comment-form-comment label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.single-comments-wrapper .comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-family: 'Cairo', Arial, sans-serif;
    font-size: 13px;
    resize: vertical;
    min-height: 120px;
    transition: all 0.3s ease;
}

.single-comments-wrapper .comment-form textarea:focus {
    outline: none;
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
}

.single-comments-wrapper .comment-form-author,
.single-comments-wrapper .comment-form-email,
.single-comments-wrapper .comment-form-url {
    margin-bottom: 16px;
}

.single-comments-wrapper .comment-form input[type="text"],
.single-comments-wrapper .comment-form input[type="email"],
.single-comments-wrapper .comment-form input[type="url"] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-family: 'Cairo', Arial, sans-serif;
    font-size: 13px;
    transition: all 0.3s ease;
}

.single-comments-wrapper .comment-form input[type="text"]:focus,
.single-comments-wrapper .comment-form input[type="email"]:focus,
.single-comments-wrapper .comment-form input[type="url"]:focus {
    outline: none;
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
}

.single-comments-wrapper .comment-form .submit {
    background: #28a745;
    color: white;
    padding: 11px 24px;
    border: none;
    border-radius: 24px;
    font-family: 'Cairo', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.single-comments-wrapper .comment-form .submit:hover {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

/* Comment List */
.single-comments-wrapper .comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.single-comments-wrapper .comment {
    background: white;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.single-comments-wrapper .comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.single-comments-wrapper .comment-author .avatar {
    border-radius: 50%;
}

.single-comments-wrapper .comment-author .fn {
    font-weight: 600;
    color: #333;
    font-style: normal;
}

.single-comments-wrapper .comment-metadata {
    font-size: 10px;
    color: #999;
    margin-bottom: 12px;
}

.single-comments-wrapper .comment-content {
    color: #666;
    line-height: 1.6;
}

.single-comments-wrapper .reply {
    margin-top: 12px;
}

.single-comments-wrapper .comment-reply-link {
    background: #f8f9fa;
    color: #333;
    padding: 6px 16px;
    border-radius: 16px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.single-comments-wrapper .comment-reply-link:hover {
    background: #28a745;
    color: white;
}

/* Dark Mode Support */
body.night-mode .single-post-main,
body.dark-mode .single-post-main,
[data-theme="dark"] .single-post-main {
    background-color: #1a1a1a;
}

body.night-mode .single-content-wrapper,
body.dark-mode .single-content-wrapper,
[data-theme="dark"] .single-content-wrapper {
    background-color: transparent;
}

body.night-mode .single-content,
body.dark-mode .single-content,
[data-theme="dark"] .single-content {
    background-color: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

body.night-mode .single-title,
body.night-mode .single-body,
body.night-mode .author-box-name a,
body.night-mode .single-nav-title,
body.night-mode .related-post-title a,
body.dark-mode .single-title,
body.dark-mode .single-body,
body.dark-mode .author-box-name a,
body.dark-mode .single-nav-title,
body.dark-mode .related-post-title a,
[data-theme="dark"] .single-title,
[data-theme="dark"] .single-body,
[data-theme="dark"] .author-box-name a,
[data-theme="dark"] .single-nav-title,
[data-theme="dark"] .related-post-title a {
    color: #e0e0e0;
}

body.night-mode .single-excerpt,
body.night-mode .single-widget,
body.night-mode .single-author-box,
body.night-mode .single-nav-link,
body.night-mode .single-tags a,
body.dark-mode .single-excerpt,
body.dark-mode .single-widget,
body.dark-mode .single-author-box,
body.dark-mode .single-nav-link,
body.dark-mode .single-tags a,
[data-theme="dark"] .single-excerpt,
[data-theme="dark"] .single-widget,
[data-theme="dark"] .single-author-box,
[data-theme="dark"] .single-nav-link,
[data-theme="dark"] .single-tags a {
    background-color: #3a3a3a;
    color: #e0e0e0;
}

body.night-mode .single-body blockquote,
body.dark-mode .single-body blockquote,
[data-theme="dark"] .single-body blockquote {
    background-color: #3a3a3a;
    color: #b0b0b0;
}

body.night-mode .single-related-section,
body.dark-mode .single-related-section,
[data-theme="dark"] .single-related-section {
    background: transparent;
}

body.night-mode .single-related-grid .related-post-item,
body.dark-mode .single-related-grid .related-post-item,
[data-theme="dark"] .single-related-grid .related-post-item {
    background: transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

body.night-mode .single-related-grid .post-content,
body.dark-mode .single-related-grid .post-content,
[data-theme="dark"] .single-related-grid .post-content {
    background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.8) 50%, transparent);
}

body.night-mode .single-related-grid .post-title a,
body.dark-mode .single-related-grid .post-title a,
[data-theme="dark"] .single-related-grid .post-title a {
    color: white;
}

body.night-mode .single-related-grid .post-title a:hover,
body.dark-mode .single-related-grid .post-title a:hover,
[data-theme="dark"] .single-related-grid .post-title a:hover {
    color: #b70703;
}

body.night-mode .single-related-grid .post-meta,
body.dark-mode .single-related-grid .post-meta,
[data-theme="dark"] .single-related-grid .post-meta {
    color: rgba(255,255,255,0.8);
}

body.night-mode .single-comments-section,
body.dark-mode .single-comments-section,
[data-theme="dark"] .single-comments-section {
    background: none;
}

body.night-mode .single-comments-wrapper,
body.dark-mode .single-comments-wrapper,
[data-theme="dark"] .single-comments-wrapper {
    background: #2d2d2d;
}

body.night-mode .single-meta,
body.dark-mode .single-meta,
[data-theme="dark"] .single-meta {
    border-color: #444;
}

body.night-mode .single-author-avatar,
body.dark-mode .single-author-avatar,
[data-theme="dark"] .single-author-avatar {
    border-color: #666;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .single-content-container {
        grid-template-columns: 1fr;
    }
    
    .single-sidebar {
        margin-top: 32px;
    }
}

@media (max-width: 768px) {
    .single-header-container,
    .single-featured-image-container,
    .single-meta-container {
        padding: 0 16px;
    }
    
    .single-featured-image {
        border-radius: 0;
    }
    
    .single-content {
        padding: 20px;
    }
    
    .single-content-container {
        padding: 0 16px 24px;
    }
    
    .single-hero-section {
        min-height: 240px;
    }
    
    .single-title {
        font-size: clamp(19px, 5vw, 29px);
    }
    
    .single-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .single-share.sticky {
        display: none;
    }
    
    .single-body {
        font-size: 14px;
    }
    
    .single-post-navigation {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .single-nav-next {
        grid-column: 1;
    }
    
    /* Related Posts Responsive */
    .single-related-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .single-related-thumbnail {
        height: 120px;
    }
    
    /* Comments Responsive */
    .single-comments-wrapper {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .single-hero-container,
    .single-header-container,
    .single-content-container,
    .single-comments-container,
    .single-related-container {
        padding: 0 12px;
    }
    
    .single-hero-content {
        padding: 32px 0 24px;
    }
    
    .single-excerpt {
        font-size: 13px;
        padding: 12px;
    }
    
    .single-body h2 {
        font-size: 19px;
    }
    
    .single-body h3 {
        font-size: 16px;
    }
    
    .single-author-box {
        flex-direction: column;
        text-align: center;
    }
    
    .author-box-avatar {
        margin: 0 auto;
    }
    
    /* Related Posts Mobile */
    .single-related-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .single-related-section {
        padding: 0px 0;
    }
    
    .single-related-section .section-title-text {
        font-size: 14px;
        padding: 8px 16px;
    }
    
    /* Comments Mobile */
    .single-comments-section {
        padding: 32px 0;
    }
    
    .single-comments-section .section-title-text {
        font-size: 14px;
        padding: 8px 16px;
    }
    
    .single-comments-wrapper {
        padding: 16px 12px;
    }
    
    .single-comments-wrapper .comment-form textarea {
        font-size: 11px;
        min-height: 96px;
    }
    
    .single-comments-wrapper .comment-form input[type="text"],
    .single-comments-wrapper .comment-form input[type="email"],
    .single-comments-wrapper .comment-form input[type="url"] {
        font-size: 11px;
    }
}

/* ================================================
   CATEGORY PAGE STYLES
   ================================================ */

.category-page {
    padding: 32px 0;
    background: #f8f9fa;
}

.category-page-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Category Header */
.category-page-header {
    text-align: center;
    margin-bottom: 32px;
}

.category-page-header .section-title-with-lines {
    margin-bottom: 16px;
}

/* Category page title icons */
.category-page-header .section-title-text .bi {
    font-size: 1.1em;
    margin-left: 6px;
    vertical-align: middle;
    color: white;
}

/* Section title icons in homepage */
.category-section-generic .section-title-text .bi,
.shorts-section .section-title-text .bi {
    font-size: 1.2em;
    margin-left: 6px;
    vertical-align: middle;
}

/* White icons for sections with custom backgrounds */
.category-section-generic.has-custom-bg .section-title-text .bi,
.shorts-section .section-title-text .bi {
    color: white;
}

/* Dark mode support for icons */
body.night-mode .category-section-generic.has-default-bg .section-title-text .bi,
body.dark-mode .category-section-generic.has-default-bg .section-title-text .bi,
[data-theme="dark"] .category-section-generic.has-default-bg .section-title-text .bi {
    color: #b70703;
}

/* Active category highlighting in navigation */
.nav-menu .current-category,
.nav-menu .current-menu-item.active,
.primary-menu .current-category,
.primary-menu .current-menu-item.active {
    background-color: rgba(183, 7, 3, 0.1);
    color: #b70703;
}

.nav-menu .current-category > a,
.nav-menu .current-menu-item.active > a,
.primary-menu .current-category > a,
.primary-menu .current-menu-item.active > a {
    color: #b70703;
}

/* Active category in sidebar widgets */
.widget_categories .current-cat,
.widget_categories .active,
.widget_nav_menu .current-menu-item,
.widget_nav_menu .active {
    font-weight: 600;
}

.widget_categories .current-cat > a,
.widget_categories .active > a,
.widget_nav_menu .current-menu-item > a,
.widget_nav_menu .active > a {
    color: #b70703;
    position: relative;
}

/* Add indicator for active category in sidebar */
.widget_categories .current-cat > a::before,
.widget_categories .active > a::before,
.widget_nav_menu .current-menu-item > a::before,
.widget_nav_menu .active > a::before {
    content: "▸";
    position: absolute;
    right: -12px;
    color: #b70703;
}

/* Dark mode support for active categories */
body.night-mode .widget_categories .current-cat > a,
body.night-mode .widget_categories .active > a,
body.night-mode .widget_nav_menu .current-menu-item > a,
body.night-mode .widget_nav_menu .active > a {
    color: #ff4444;
}

body.night-mode .widget_categories .current-cat > a::before,
body.night-mode .widget_categories .active > a::before,
body.night-mode .widget_nav_menu .current-menu-item > a::before,
body.night-mode .widget_nav_menu .active > a::before {
    color: #ff4444;
}

.category-description {
    max-width: 640px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
}

/* Posts Grid */
.category-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.category-post-item {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
}

.category-post-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* No posts message */
.no-posts-found {
    text-align: center;
    padding: 48px 16px;
    background: white;
    border-radius: 6px;
    font-size: 14px;
    color: #666;
}

/* Pagination */
.category-pagination {
    margin-top: 40px;
    margin-bottom: 32px;
    text-align: center;
    padding: 16px 0;
}

.category-pagination ul {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.category-pagination li {
    margin: 0;
}

.category-pagination a,
.category-pagination .current {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 6px 12px;
    background: white;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: 2px solid #ddd;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.category-pagination a:hover {
    background: #b70703;
    color: white;
    border-color: #b70703;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(183, 7, 3, 0.3);
}

.category-pagination .current {
    background: #b70703;
    color: white;
    border-color: #b70703;
    cursor: default;
    box-shadow: 0 2px 4px rgba(183, 7, 3, 0.3);
}

.category-pagination .prev,
.category-pagination .next {
    font-size: 14px;
}

/* Dots */
.category-pagination .dots {
    background: transparent;
    border: none;
    color: #666;
    cursor: default;
    box-shadow: none;
}

.category-pagination .dots:hover {
    background: transparent;
    transform: none;
}

/* Dark Mode Support */
body.night-mode .category-page {
    background: #1a1a1a;
}

body.night-mode .category-post-item {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.night-mode .category-description {
    color: #ccc;
}

body.night-mode .no-posts-found {
    background: #2d2d2d;
    color: #ccc;
}

body.night-mode .category-pagination a {
    background: #2d2d2d;
    color: #e0e0e0;
    border-color: #444;
}

body.night-mode .category-pagination a:hover {
    background: #b70703;
    color: white;
    border-color: #b70703;
}

/* Responsive Design */
@media (max-width: 768px) {
    .category-page {
        padding: 16px 0;
    }
    
    .category-posts-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .category-page-header {
        margin-bottom: 24px;
    }
}

@media (max-width: 480px) {
    .category-page-container {
        padding: 0 12px;
    }
    
    .category-description {
        font-size: 11px;
    }
    
    .category-pagination a,
    .category-pagination .current {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* Load More Button */
.load-more-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.load-more-button {
    background: #b70703;
    color: white;
    border: none;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.load-more-button:hover {
    background: #a10603;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(183, 7, 3, 0.3);
}

.load-more-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.load-more-button .load-more-spinner {
    margin-left: 8px;
}

/* Dark mode load more */
body.night-mode .load-more-button {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

body.night-mode .load-more-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* ================================================
   ACTIVE MENU ITEM HIGHLIGHTING
   ================================================ */

/* Highlight current category in menu */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-parent > a,
.main-navigation .current-category-ancestor > a,
.main-navigation .current-category-parent > a {
    color: #b70703 !important;
    background-color: rgba(183, 7, 3, 0.1);
    border-radius: 4px;
}

/* Ensure no border on active items */
.main-navigation .current-menu-item > a,
.main-navigation .current-category > a {
    border-bottom: 2px solid transparent !important;
}

/* For category pages specifically */
body.category .main-navigation li.menu-item-object-category > a {
    position: relative;
}

/* Removed ::after pseudo-element that was creating unwanted border */

/* Dark mode active menu - override day mode styles */
body.night-mode .main-navigation .current-menu-item > a,
body.night-mode .main-navigation .current-menu-parent > a,
body.night-mode .main-navigation .current-category-ancestor > a,
body.night-mode .main-navigation .current-category-parent > a,
body.night-mode .nav-menu .current-menu-item > a,
body.night-mode .nav-menu .current-category > a {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
}

/* Removed night mode ::after pseudo-element that was creating unwanted border */

/* ================================================
   SEARCH OVERLAY STYLES
   ================================================ */

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-overlay-content {
    width: 90%;
    max-width: 640px;
    position: relative;
}

.search-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    transition: all 0.3s ease;
}

.search-close:hover {
    transform: rotate(90deg);
}

.search-overlay-form {
    width: 100%;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.search-overlay .search-field {
    flex: 1;
    border: none;
    padding: 16px 24px;
    font-size: 19px;
    background: transparent;
    color: #333;
    outline: none;
}

.search-overlay .search-field::placeholder {
    color: #999;
}

.search-overlay .search-submit {
    background: #b70703;
    border: none;
    color: white;
    padding: 16px 24px;
    font-size: 19px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-overlay .search-submit:hover {
    background: #a10603;
}

/* Dark mode search overlay */
body.night-mode .search-overlay {
    background: rgba(0, 0, 0, 0.98);
}

body.night-mode .search-input-wrapper {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

body.night-mode .search-overlay .search-field {
    color: white;
}

body.night-mode .search-overlay .search-field::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

body.night-mode .search-overlay .search-submit {
    background: rgba(255, 255, 255, 0.1);
    border-left: 2px solid rgba(255, 255, 255, 0.2);
}

body.night-mode .search-overlay .search-submit:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Mobile search overlay */
@media (max-width: 768px) {
    .search-overlay-content {
        width: 95%;
    }
    
    .search-overlay .search-field {
        font-size: 14px;
        padding: 12px 16px;
    }
    
    .search-overlay .search-submit {
        font-size: 14px;
        padding: 12px 16px;
    }
    
    .search-close {
        top: -32px;
        font-size: 19px;
    }
	.load-more-button{
		padding: 8px 16px;
		font-size: 11px;
	}
	.load-more-container{
		margin-top: 24px;
       margin-bottom: 0px;
	}
}

/* ================================================
   SEARCH RESULTS PAGE STYLES
   ================================================ */

.search-results-page .search-term {
    color: #b70703;
    font-weight: 700;
}

.search-results-count {
    margin-top: 8px;
    font-size: 11px;
    color: #666;
}

body.night-mode .search-results-count {
    color: rgba(255, 255, 255, 0.7);
}

body.night-mode .search-results-page .search-term {
    color: white;
}

/* ================================================
   ARCHIVE PAGE STYLES
   ================================================ */

.archive-page {
    padding: 32px 0;
    background: #f8f9fa;
}

.archive-page-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

.archive-page-header {
    text-align: center;
    margin-bottom: 32px;
}

.archive-page-header .section-title-with-lines {
    margin-bottom: 16px;
}

.archive-posts-grid {
    margin-bottom: 32px;
}

/* Dark mode archive page */
body.night-mode .archive-page {
    background: #1a1a1a;
} 

/* ================================================
   OPTIMIZED RESPONSIVE SPACING SYSTEM
   ================================================ */

/* Tablet (768px - 1024px) - 75% scaling */
@media (max-width: 1024px) {
    .category-section-generic,
    .hero-section,
    .sports-section,
    .latest-news-section,
    .three-posts-section {
        margin-bottom: 15px; /* 20px * 0.75 */
    }

    .section-title-with-lines {
        margin-bottom: 10px; /* 12px * 0.83 */
    }

    .sports-section {
        padding: 15px 20px; /* Reduced padding */
    }

    /* Video and Shorts sections with colored backgrounds */
    .category-section-فيديو,
    .shorts-section,
    .category-section-generic[style*="padding"] {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    .category-grid {
        gap: 12px; /* Reduced from 15px */
    }

    .shorts-grid {
        gap: 15px;
    }
}

/* Mobile (480px - 768px) - 60% scaling */
@media (max-width: 768px) {
    .category-section-generic,
    .hero-section,
    .sports-section,
    .latest-news-section,
    .three-posts-section {
        margin-bottom: 12px; /* 20px * 0.6 */
    }

    .section-title-with-lines {
        margin-bottom: 8px; /* Tighter on mobile */
    }

    .sports-section {
        padding: 12px 15px;
    }

    /* Video and Shorts sections with colored backgrounds */
    .category-section-فيديو,
    .shorts-section,
    .category-section-generic[style*="padding"] {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .category-grid,
    .shorts-grid {
        gap: 10px;
    }
}

/* Small Mobile (≤480px) - 50% scaling */
@media (max-width: 480px) {
    .category-section-generic,
    .hero-section,
    .sports-section,
    .latest-news-section,
    .three-posts-section {
        margin-bottom: 10px; /* 20px * 0.5 */
    }

    .section-title-with-lines {
        margin-bottom: 6px; /* Very tight on small screens */
    }

    .sports-section {
        padding: 10px 12px;
    }

    /* Video and Shorts sections with colored backgrounds */
    .category-section-فيديو,
    .shorts-section,
    .category-section-generic[style*="padding"] {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .category-grid,
    .shorts-grid {
        gap: 8px; /* Minimum comfortable gap */
    }
}

/* Very Small Mobile (≤360px) - Ultra compact */
@media (max-width: 360px) {
    .category-section-generic,
    .hero-section,
    .sports-section,
    .latest-news-section,
    .three-posts-section {
        margin-bottom: 8px;
    }

    .section-title-with-lines {
        margin-bottom: 5px;
    }

    /* Video and Shorts sections with colored backgrounds */
    .category-section-فيديو,
    .shorts-section,
    .category-section-generic[style*="padding"] {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .category-grid,
    .shorts-grid {
        gap: 6px;
    }
}

/*--------------------------------------------------------------
# Contact Page Styles
--------------------------------------------------------------*/

/* Contact Page Header */
.contact-page-header {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    padding: 60px 0;
    text-align: center;
    color: white;
}

.contact-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.contact-header-content .section-title-text {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: white;
    padding: 15px 40px;
    font-size: 32px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.contact-header-description {
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
}

.contact-header-description p {
    margin-bottom: 0;
}

/* Contact Info Section */
.contact-info-section {
    padding: 60px 0;
    background: white;
}

.contact-info-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.contact-info-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.contact-card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
}

.contact-card-icon.email {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.contact-card-icon.phone {
    background: linear-gradient(135deg, #28a745, #218838);
}

.contact-card-icon.address {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.contact-card-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}

.contact-card-text {
    font-size: 18px;
    margin-bottom: 10px;
    color: #666;
}

.contact-card-text a {
    color: #dc3545;
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-card-text a:hover {
    color: #c82333;
}

.contact-card-description {
    font-size: 14px;
    color: #999;
    margin-bottom: 0;
}

/* Contact Form Section */
.contact-form-section {
    padding: 60px 0;
    background: #f8f9fa;
}

.contact-form-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

.contact-form-wrapper {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.contact-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-form-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.contact-form-subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 0;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-form .form-group {
    margin-bottom: 0;
}

.contact-form label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-family: 'Cairo', Arial, sans-serif;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #dc3545;
    background: white;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
}

.contact-form textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-submit-btn {
    width: 100%;
    padding: 16px 30px;
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Cairo', Arial, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.contact-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}

.contact-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.form-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    display: none;
}

.form-message.success {
    display: block;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    display: block;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Contact Sidebar */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-sidebar-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.sidebar-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-card-title i {
    color: #dc3545;
}

/* Social Links */
.contact-social-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-social-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-social-btn i {
    font-size: 18px;
}

.contact-social-btn.facebook {
    background: #1877f2;
}

.contact-social-btn.facebook:hover {
    background: #145dbf;
    transform: translateX(5px);
}

.contact-social-btn.youtube {
    background: #ff0000;
}

.contact-social-btn.youtube:hover {
    background: #cc0000;
    transform: translateX(5px);
}

.contact-social-btn.x-twitter {
    background: #000000;
}

.contact-social-btn.x-twitter:hover {
    background: #333333;
    transform: translateX(5px);
}

.contact-social-btn.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.contact-social-btn.instagram:hover {
    opacity: 0.9;
    transform: translateX(5px);
}

.contact-social-btn.tiktok {
    background: #000000;
}

.contact-social-btn.tiktok:hover {
    background: #333333;
    transform: translateX(5px);
}

/* Working Hours */
.working-hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.working-hours-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.working-hours-list li:last-child {
    border-bottom: none;
}

.working-hours-list .day {
    font-weight: 600;
    color: #333;
}

.working-hours-list .time {
    color: #666;
}

/* Dark Mode Support */
body.night-mode .contact-info-section,
body.dark-mode .contact-info-section,
[data-theme="dark"] .contact-info-section {
    background: #1a1a1a;
}

body.night-mode .contact-info-card,
body.dark-mode .contact-info-card,
[data-theme="dark"] .contact-info-card {
    background: #2d2d2d;
    border-color: #3d3d3d;
}

body.night-mode .contact-card-title,
body.dark-mode .contact-card-title,
[data-theme="dark"] .contact-card-title {
    color: #e0e0e0;
}

body.night-mode .contact-card-text,
body.dark-mode .contact-card-text,
[data-theme="dark"] .contact-card-text {
    color: #b0b0b0;
}

body.night-mode .contact-form-section,
body.dark-mode .contact-form-section,
[data-theme="dark"] .contact-form-section {
    background: #0d0d0d;
}

body.night-mode .contact-form-wrapper,
body.dark-mode .contact-form-wrapper,
[data-theme="dark"] .contact-form-wrapper {
    background: #2d2d2d;
}

body.night-mode .contact-form-title,
body.dark-mode .contact-form-title,
[data-theme="dark"] .contact-form-title {
    color: #e0e0e0;
}

body.night-mode .contact-form-subtitle,
body.dark-mode .contact-form-subtitle,
[data-theme="dark"] .contact-form-subtitle {
    color: #b0b0b0;
}

body.night-mode .contact-form label,
body.dark-mode .contact-form label,
[data-theme="dark"] .contact-form label {
    color: #e0e0e0;
}

body.night-mode .contact-form input,
body.night-mode .contact-form textarea,
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea,
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea {
    background: #1a1a1a;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

body.night-mode .contact-form input:focus,
body.night-mode .contact-form textarea:focus,
body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form textarea:focus,
[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form textarea:focus {
    background: #2d2d2d;
}

body.night-mode .contact-sidebar-card,
body.dark-mode .contact-sidebar-card,
[data-theme="dark"] .contact-sidebar-card {
    background: #2d2d2d;
}

body.night-mode .sidebar-card-title,
body.dark-mode .sidebar-card-title,
[data-theme="dark"] .sidebar-card-title {
    color: #e0e0e0;
}

body.night-mode .working-hours-list .day,
body.dark-mode .working-hours-list .day,
[data-theme="dark"] .working-hours-list .day {
    color: #e0e0e0;
}

body.night-mode .working-hours-list .time,
body.dark-mode .working-hours-list .time,
[data-theme="dark"] .working-hours-list .time {
    color: #b0b0b0;
}

body.night-mode .working-hours-list li,
body.dark-mode .working-hours-list li,
[data-theme="dark"] .working-hours-list li {
    border-bottom-color: #3d3d3d;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-form-container {
        grid-template-columns: 1fr;
    }

    .contact-sidebar {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .contact-page-header {
        padding: 40px 0;
    }

    .contact-header-content .section-title-text {
        font-size: 24px;
        padding: 12px 25px;
    }

    .contact-header-description {
        font-size: 16px;
    }

    .contact-info-section,
    .contact-form-section {
        padding: 40px 0;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-form-wrapper {
        padding: 30px 20px;
    }

    .contact-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }

    .contact-form .form-group {
        margin-bottom: 20px;
    }

    .sidebar-card-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .contact-header-container,
    .contact-info-container,
    .contact-form-container {
        padding: 0 15px;
    }

    .contact-info-card {
        padding: 30px 20px;
    }

    .contact-card-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .contact-card-title {
        font-size: 18px;
    }

    .contact-card-text {
        font-size: 16px;
    }

    .contact-form-wrapper {
        padding: 20px 15px;
    }

    .contact-form-title {
        font-size: 22px;
    }

    .contact-submit-btn {
        font-size: 16px;
        padding: 14px 25px;
    }

    .contact-sidebar {
        grid-template-columns: 1fr;
    }

    .contact-sidebar-card {
        padding: 20px;
    }
}

/*--------------------------------------------------------------
# About Page Styles
--------------------------------------------------------------*/

/* About Page Header */
.about-page-header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    padding: 80px 0 60px;
    text-align: center;
    color: white;
}

.about-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.about-header-content .section-title-text {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: white;
    padding: 15px 40px;
    font-size: 32px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    border-radius: 50px;
    margin-bottom: 30px;
}

.about-header-image {
    max-width: 800px;
    margin: 30px auto 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.about-header-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* About Content Section */
.about-content-section {
    padding: 60px 0;
    background: white;
}

.about-content-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 30px;
}

.about-main-content {
    background: white;
}

.about-text-content {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}

.about-text-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 20px;
    margin-top: 30px;
}

.about-text-content h2:first-child {
    margin-top: 0;
}

.about-text-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    margin-top: 30px;
}

.about-text-content p {
    margin-bottom: 20px;
    color: #555;
}

.about-text-content ul,
.about-text-content ol {
    margin-bottom: 20px;
    padding-right: 25px;
}

.about-text-content li {
    margin-bottom: 10px;
    color: #555;
}

/* Section Header Center */
.section-header-center {
    text-align: center;
    margin-bottom: 50px;
}

.section-main-title {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.section-subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 0;
}

/* Values Section */
.about-values-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.about-values-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.value-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.value-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    transition: all 0.3s ease;
}

.value-card:hover .value-icon {
    transform: scale(1.1) rotate(5deg);
}

.value-icon.credibility {
    background: linear-gradient(135deg, #28a745, #218838);
}

.value-icon.objectivity {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.value-icon.professionalism {
    background: linear-gradient(135deg, #ffc107, #e0a800);
}

.value-icon.innovation {
    background: linear-gradient(135deg, #17a2b8, #138496);
}

.value-icon.diversity {
    background: linear-gradient(135deg, #6f42c1, #59339d);
}

.value-icon.community {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.value-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.value-description {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Statistics Section */
.about-stats-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}

.about-stats-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.stat-card {
    text-align: center;
}

.stat-icon {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.stat-number {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.stat-label {
    font-size: 18px;
    opacity: 0.9;
}

/* Team Section */
.about-team-section {
    padding: 80px 0;
    background: white;
}

.about-team-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.team-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.team-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-name {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 20px 0 8px;
    padding: 0 15px;
}

.team-role {
    font-size: 15px;
    color: #666;
    margin-bottom: 15px;
    padding: 0 15px;
}

.team-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0 15px 20px;
}

.team-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.team-social a:hover {
    background: #007bff;
    color: white;
    transform: translateY(-3px);
}

/* CTA Section */
.about-cta-section {
    padding: 80px 0;
    background: #dc3545;
    color: white;
    text-align: center;
}

.about-cta-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 30px;
}

.cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
}

.cta-description {
    font-size: 20px;
    margin-bottom: 35px;
    opacity: 0.95;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.cta-btn {
    padding: 16px 35px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.cta-btn.primary {
    background: white;
    color: #dc3545;
}

.cta-btn.primary:hover {
    background: #f8f9fa;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.cta-btn.secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid white;
}

.cta-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

/* Dark Mode Support */
body.night-mode .about-content-section,
body.dark-mode .about-content-section,
[data-theme="dark"] .about-content-section {
    background: #1a1a1a;
}

body.night-mode .about-text-content,
body.dark-mode .about-text-content,
[data-theme="dark"] .about-text-content {
    color: #e0e0e0;
}

body.night-mode .about-text-content h2,
body.dark-mode .about-text-content h2,
[data-theme="dark"] .about-text-content h2 {
    color: #4d9fff;
}

body.night-mode .about-text-content h3,
body.dark-mode .about-text-content h3,
[data-theme="dark"] .about-text-content h3 {
    color: #e0e0e0;
}

body.night-mode .about-text-content p,
body.night-mode .about-text-content li,
body.dark-mode .about-text-content p,
body.dark-mode .about-text-content li,
[data-theme="dark"] .about-text-content p,
[data-theme="dark"] .about-text-content li {
    color: #b0b0b0;
}

body.night-mode .about-values-section,
body.dark-mode .about-values-section,
[data-theme="dark"] .about-values-section {
    background: #0d0d0d;
}

body.night-mode .section-main-title,
body.dark-mode .section-main-title,
[data-theme="dark"] .section-main-title {
    color: #e0e0e0;
}

body.night-mode .section-subtitle,
body.dark-mode .section-subtitle,
[data-theme="dark"] .section-subtitle {
    color: #b0b0b0;
}

body.night-mode .value-card,
body.dark-mode .value-card,
[data-theme="dark"] .value-card {
    background: #2d2d2d;
    border-color: #3d3d3d;
}

body.night-mode .value-title,
body.dark-mode .value-title,
[data-theme="dark"] .value-title {
    color: #e0e0e0;
}

body.night-mode .value-description,
body.dark-mode .value-description,
[data-theme="dark"] .value-description {
    color: #b0b0b0;
}

body.night-mode .about-team-section,
body.dark-mode .about-team-section,
[data-theme="dark"] .about-team-section {
    background: #1a1a1a;
}

body.night-mode .team-card,
body.dark-mode .team-card,
[data-theme="dark"] .team-card {
    background: #2d2d2d;
}

body.night-mode .team-name,
body.dark-mode .team-name,
[data-theme="dark"] .team-name {
    color: #e0e0e0;
}

body.night-mode .team-role,
body.dark-mode .team-role,
[data-theme="dark"] .team-role {
    color: #b0b0b0;
}

body.night-mode .team-social a,
body.dark-mode .team-social a,
[data-theme="dark"] .team-social a {
    background: #3d3d3d;
    color: #e0e0e0;
}

body.night-mode .team-social a:hover,
body.dark-mode .team-social a:hover,
[data-theme="dark"] .team-social a:hover {
    background: #4d9fff;
    color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .about-page-header {
        padding: 50px 0 40px;
    }

    .about-header-content .section-title-text {
        font-size: 24px;
        padding: 12px 25px;
    }

    .about-content-section,
    .about-values-section,
    .about-stats-section,
    .about-team-section,
    .about-cta-section {
        padding: 50px 0;
    }

    .section-main-title {
        font-size: 28px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    .about-text-content h2 {
        font-size: 26px;
    }

    .about-text-content h3 {
        font-size: 20px;
    }

    .about-text-content {
        font-size: 16px;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .stat-number {
        font-size: 36px;
    }

    .stat-label {
        font-size: 16px;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cta-title {
        font-size: 28px;
    }

    .cta-description {
        font-size: 16px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .about-header-container,
    .about-content-container,
    .about-values-container,
    .about-stats-container,
    .about-team-container,
    .about-cta-container {
        padding: 0 15px;
    }

    .value-card {
        padding: 30px 20px;
    }

    .value-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .value-title {
        font-size: 18px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .stat-icon {
        font-size: 36px;
    }

    .stat-number {
        font-size: 32px;
    }

    .cta-title {
        font-size: 24px;
    }

    .cta-btn {
        font-size: 16px;
        padding: 14px 28px;
    }
}

/* About Page Custom Header Adjustments */
.about-page-custom-header {
    margin-top: 40px;
    margin-bottom: 30px;
}

.about-page-custom-header .section-title-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Hide old about page header styles */
.about-page-header {
    display: none;
}

.about-header-container,
.about-header-content {
    display: none;
}

/* Contact Page Custom Header Adjustments */
.contact-page-custom-header {
    margin-top: 40px;
    margin-bottom: 30px;
}

.contact-page-custom-header .section-title-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Hide old contact page header styles */
.contact-page-header {
    display: none;
}

.contact-header-container,
.contact-header-content,
.contact-header-description {
    display: none;
}