/* ===================================
   AUFG GLOBAL HEADER STYLES
   Replicates Elementor Header Design
   =================================== */

/* Import Global Colors */
@import url('global-colors.css');
@import url('global-poppins-font.css');

/* ===== BASE HEADER STRUCTURE ===== */
.aufg-global-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9998;
	min-height: 123px;
	background: linear-gradient(180deg, #054780E5 0%, #1169B500 100%);
	transition: background 0.3s ease, min-height 0.3s ease, padding 0.3s ease;
	transform: translateY(0);
	font-family: "Poppins", sans-serif;
}

/* Hide click/tap focus outlines while preserving keyboard focus indicators */
.aufg-global-header *:focus:not(:focus-visible),
.aufg-global-header *:active {
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

.aufg-header-wrapper {
	width: 100%;
	max-width: 100%;
	padding: 0;
}

.aufg-header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 40px;
	gap: 30px;
}

/* ===== LOGO SECTION ===== */
.aufg-logo-section {
	flex-shrink: 0;
}

.aufg-logo-link {
	display: inline-block;
	text-decoration: none;
	transition: all 0.3s ease;
}

.aufg-logo {
	max-width: 130px;
	max-height: 80px;
	width: auto;
	height: auto;
	display: block;
	transition: all 0.3s ease;
}

.aufg-logo-link:hover {
	transform: translateY(-2px);
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* ===== NAVIGATION SECTION ===== */
.aufg-nav-section {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.aufg-nav-item {
	position: relative;
	margin: 0;
}

.aufg-nav-link {
	display: flex;
	align-items: center;
	padding: 13px 20px;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	transition: all 0.3s ease;
	position: relative;
	white-space: nowrap;
	outline: none !important;
}

/* Navigation Link Hover Effects */
.aufg-nav-link::before {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, #038BB9 0%, #1169B5 100%);
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transform: translateX(-50%);
	border-radius: 2px;
	box-shadow: 0 2px 8px rgba(3, 139, 185, 0.3);
}

.aufg-nav-link::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(3, 139, 185, 0.08) 0%, rgba(17, 105, 181, 0.08) 100%);
	border-radius: 8px;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: -1;
}

.aufg-nav-link:hover,
.aufg-nav-link:focus-visible,
.aufg-nav-link.active {
	color: #F8F9FA;
	transform: translateY(-2px);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.aufg-nav-link:hover::before,
.aufg-nav-link:focus-visible::before,
.aufg-nav-link.active::before {
	width: 100%;
}

.aufg-nav-link:hover::after,
.aufg-nav-link:focus-visible::after,
.aufg-nav-link.active::after {
	opacity: 1;
}

/* Dropdown Arrow - Font Awesome Chevron */
.aufg-nav-link .fa-chevron-down {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 6px;
	vertical-align: middle;
	font-size: 0; /* Hide any text content */
}

/* Hide default FontAwesome icon */
.aufg-nav-link .fa-chevron-down:before {
	display: none;
}

/* Create CSS triangle chevron with animation */
.aufg-nav-link .fa-chevron-down:after {
	content: "";
	position: absolute;
	top: 3px;
	left: 2px;
	display: block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.3s ease;
	transform-origin: center;
}

/* Rotate chevron 180 degrees on hover */
.aufg-nav-item:hover .fa-chevron-down:after {
	transform: rotate(180deg);
}

/* Dropdown Menu - Exact Elementor Match */
.aufg-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #ffffff;
	border: 1px solid rgba(3, 139, 185, 0.15);
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(3, 139, 185, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 9999;
	width: 320px;
	max-width: 320px;
	padding: 12px 0;
	list-style: none;
	margin: 2px 0 0 0;
	overflow: hidden;
}

/* Add invisible hover area to prevent dropdown disappearing */
.aufg-dropdown-menu::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
	background: transparent;
}

.aufg-has-dropdown:hover .aufg-dropdown-menu,
.aufg-dropdown-menu:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.aufg-dropdown-menu li {
	margin: 0;
	width: 100%;
	border-bottom: 1px solid rgba(3, 139, 185, 0.08);
	list-style: none;
}

.aufg-dropdown-menu li:last-child {
	border-bottom: none;
}

/* Dropdown links with title/description structure */
.aufg-dropdown-menu a {
	display: block;
	padding: 16px 20px;
	color: #334155;
	text-decoration: none;
	transition: all 0.3s ease;
	border-radius: 8px;
	margin: 0 8px;
	position: relative;
	box-sizing: border-box;
}

.aufg-dropdown-menu a:hover {
	background: linear-gradient(135deg, rgba(3, 139, 185, 0.08) 0%, rgba(17, 105, 181, 0.08) 100%);
	color: #038BB9;
	transform: translateX(4px);
	text-shadow: none;
}

/* Dropdown content structure */
.aufg-dropdown-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.aufg-dropdown-title {
	font-weight: 600;
	font-size: 16px;
	color: #1e293b;
	text-shadow: none;
}

.aufg-dropdown-description {
	font-size: 13px;
	color: #64748b;
	font-weight: 400;
	line-height: 1.4;
	text-shadow: none;
	word-wrap: break-word;
	white-space: normal;
	overflow-wrap: break-word;
}

.aufg-dropdown-menu a:hover .aufg-dropdown-title {
	color: #038BB9;
	text-shadow: none;
}

.aufg-dropdown-menu a:hover .aufg-dropdown-description {
	text-shadow: none;
}

/* ===== MOBILE MENU TOGGLE ===== */
.aufg-mobile-toggle {
	display: none;
	background: none;
	border: none;
	padding: 10px;
	cursor: pointer;
	z-index: 1001;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
}

.aufg-mobile-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: #FFFFFF;
	margin: 3px 0;
	transition: all 0.3s ease;
	transform-origin: center;
}

/* Active state - hamburger to X */
.aufg-mobile-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

.aufg-mobile-toggle.active span:nth-child(2) {
	opacity: 0;
}

.aufg-mobile-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* Legacy support for menu-toggle class */
.aufg-menu-toggle {
	display: none;
	background: none;
	border: none;
	padding: 10px;
	cursor: pointer;
	z-index: 1001;
}

.aufg-menu-icon {
	display: block;
	width: 24px;
	height: 18px;
	position: relative;
}

.aufg-menu-icon span {
	display: block;
	width: 100%;
	height: 2px;
	background: #FFFFFF;
	position: absolute;
	left: 0;
	transition: all 0.3s ease;
}

.aufg-menu-icon span:nth-child(1) { top: 0; }
.aufg-menu-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.aufg-menu-icon span:nth-child(3) { bottom: 0; }

/* Active state */
.aufg-menu-toggle.active .aufg-menu-icon span:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.aufg-menu-toggle.active .aufg-menu-icon span:nth-child(2) {
	opacity: 0;
}

.aufg-menu-toggle.active .aufg-menu-icon span:nth-child(3) {
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
}

/* ===== ACTIONS SECTION ===== */
.aufg-actions-section {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-shrink: 0;
}

/* Login Button - Exact Elementor Match - Higher Specificity */
.aufg-global-header .aufg-btn-login {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px 54px !important;
	background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 100%) !important;
	color: #112a3b !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	transition: all 0.4s ease !important;
	cursor: pointer !important;
	position: relative !important;
	overflow: hidden !important;
	border: none !important;
	height: 44px !important;
	min-height: auto !important;
	box-sizing: border-box !important;
}

.aufg-global-header .aufg-btn-login::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: -100% !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(135deg, #1169B5 0%, #038BB9 100%) !important;
	transition: left 0.5s ease !important;
	border-radius: inherit !important;
	z-index: 1 !important;
}

.aufg-global-header .aufg-btn-login:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(3, 139, 185, 0.3) !important;
}

.aufg-global-header .aufg-btn-login:hover::before {
	left: 0 !important;
}

.aufg-global-header .aufg-btn-login span {
	position: relative !important;
	z-index: 10 !important;
	color: #112a3b !important;
	text-shadow: none !important;
}

.aufg-global-header .aufg-btn-login:hover span {
	color: #F8F9FA !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Language Selector */
.aufg-language-selector {
	position: relative;
}

.aufg-lang-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	color: #FFFFFF;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 14px;
	font-family: "Poppins", sans-serif;
	height: 44px;
	box-sizing: border-box;
}

.aufg-lang-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(3, 139, 185, 0.6);
	transform: translateY(-2px);
}

.aufg-globe-icon,
.aufg-lang-btn .aufg-dropdown-arrow {
	width: 16px;
	height: 16px;
}

.aufg-current-lang {
	font-weight: 500;
}

.aufg-lang-dropdown {
	position: fixed;
	top: 70px;
	right: 20px;
	z-index: 2147483647;
	background: white;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	padding: 0;
	min-width: 160px;
	overflow: visible;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-10px);
	transition: all 0.3s ease;
}

.aufg-language-selector.active .aufg-lang-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.aufg-lang-option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 12px 20px;
	background: none;
	border: none;
	width: 100%;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color: #333;
	border-bottom: 1px solid rgba(3, 139, 185, 0.1);
}

.aufg-lang-option:last-child {
	border-bottom: none;
}

.aufg-lang-option:hover {
	background: linear-gradient(135deg, rgba(3, 139, 185, 0.08) 0%, rgba(17, 105, 181, 0.08) 100%);
	color: #038BB9;
}

.aufg-lang-flag {
	font-size: 18px;
}

/* ===== MODERN MOBILE NAVIGATION ===== */
.aufg-mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #ffffff;
	transform: translateX(-100%);
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
	z-index: 9999;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.aufg-mobile-nav.active {
	transform: translateX(0);
}

/* Login/Auth Button */
.aufg-mobile-auth {
	padding: 20px;
	background: #f8f9fa;
	border-bottom: 2px solid #e9ecef;
}

.aufg-mobile-auth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(135deg, #1169B5 0%, #054780 100%);
	color: white;
	text-decoration: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(17, 105, 181, 0.3);
}

.aufg-mobile-auth-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(17, 105, 181, 0.4);
	color: white;
}

.aufg-mobile-auth-btn i {
	font-size: 18px;
}

/* Mobile Menu */
.aufg-mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	overflow-y: auto;
}

.aufg-mobile-item {
	border-bottom: 1px solid #e9ecef;
}

.aufg-mobile-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	color: #1a202c;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	transition: all 0.3s ease;
	position: relative;
}

.aufg-mobile-link:hover,
.aufg-mobile-link:active {
	background: #f8f9fa;
	color: #1169B5;
	padding-left: 25px;
}

.aufg-link-text {
	flex: 1;
}

/* Dropdown Icon */
.aufg-dropdown-icon {
	font-size: 12px;
	color: #6c757d;
	transition: transform 0.3s ease;
}

.aufg-mobile-link.active .aufg-dropdown-icon {
	transform: rotate(180deg);
	color: #1169B5;
}

/* Submenu */
.aufg-mobile-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #f8f9fa;
	display: none;
	overflow: hidden;
}

.aufg-mobile-submenu.active {
	display: block;
}

.aufg-mobile-submenu li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.aufg-mobile-submenu li:last-child {
	border-bottom: none;
}

.aufg-mobile-submenu a {
	display: block;
	padding: 14px 20px 14px 40px;
	color: #495057;
	text-decoration: none;
	font-size: 15px;
	transition: all 0.3s ease;
}

.aufg-mobile-submenu a:hover,
.aufg-mobile-submenu a:active {
	background: white;
	color: #1169B5;
	padding-left: 45px;
}

/* Language Switcher */
.aufg-mobile-language {
	padding: 20px;
	background: #f8f9fa;
	border-top: 2px solid #e9ecef;
	margin-top: auto;
}

.aufg-mobile-lang-title {
	font-size: 14px;
	font-weight: 600;
	color: #6c757d;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.aufg-mobile-lang-options {
	display: flex;
	gap: 10px;
}

.aufg-mobile-lang-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	background: white;
	border: 2px solid #dee2e6;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
}

.aufg-mobile-lang-btn:hover {
	border-color: #1169B5;
	background: #f0f7ff;
}

.aufg-mobile-lang-btn.active {
	background: #1169B5;
	color: white;
	border-color: #1169B5;
}

.aufg-lang-flag {
	font-size: 20px;
}

/* ===== STICKY HEADER STATES ===== */
.aufg-global-header.scrolled {
	background: linear-gradient(135deg, 
		rgba(5, 71, 128, 0.35) 0%, 
		rgba(3, 139, 185, 0.30) 50%, 
		rgba(17, 105, 181, 0.35) 100%);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	min-height: 80px;
}

.aufg-global-header.scrolled .aufg-header-container {
	padding: 8px 40px;
}

.aufg-global-header.scrolled .aufg-logo {
	max-width: 80px;
	max-height: 60px;
	width: auto;
	height: auto;
}

.aufg-global-header.scrolled .aufg-nav-link {
	padding: 10px 18px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.aufg-global-header.scrolled .aufg-btn-login {
	padding: 8px 25px !important;
	font-size: 13px !important;
	background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 100%) !important;
	border: 1px solid rgba(3, 139, 185, 0.3) !important;
	height: 38px !important;
}

.aufg-global-header.scrolled .aufg-lang-btn {
	padding: 8px 15px;
	font-size: 13px;
	background: rgba(3, 139, 185, 0.25);
	border: 1px solid rgba(3, 139, 185, 0.5);
}

/* Smooth hide animation */
.aufg-global-header.hidden {
	transform: translateY(-100%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.6, 1);
}

/* Ensure smooth show animation */
.aufg-global-header:not(.hidden) {
	transform: translateY(0);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 1400px) {
	.aufg-nav-link {
		padding: 13px 15px;
		font-size: 15px;
	}
}

@media (max-width: 1200px) {
	.aufg-nav-link {
		padding: 13px 12px;
		font-size: 14px;
	}
	
	.aufg-header-container {
		padding: 20px 30px;
	}
}

@media (max-width: 1024px) {
	.aufg-nav-link {
		padding: 13px 10px;
		font-size: 14px;
	}
	
	.aufg-header-container {
		padding: 15px 20px;
	}
}

@media (max-width: 768px) {
	.aufg-global-header {
		min-height: 90px;
	}
	
	.aufg-header-container {
		padding: 15px;
	}
	
	.aufg-logo {
		max-width: 100px;
		max-height: 60px;
		width: auto;
		height: auto;
	}
	
	.aufg-nav-menu {
		display: none;
	}
	
	.aufg-mobile-toggle,
	.aufg-menu-toggle {
		display: flex;
	}
	
	.aufg-mobile-nav {
		display: block;
		top: 90px;
		max-height: calc(100vh - 90px);
	}
	
	.aufg-global-header .aufg-btn-login {
		padding: 8px 25px !important;
		font-size: 14px !important;
	}
	
	.aufg-lang-btn {
		padding: 8px 12px;
		font-size: 13px;
	}
	
	.aufg-lang-btn .aufg-current-lang {
		display: none;
	}
	
	.aufg-global-header.scrolled {
		min-height: 70px;
	}
	
	.aufg-global-header.scrolled .aufg-logo {
		max-width: 80px;
		max-height: 60px;
		width: auto;
		height: auto;
	}
	
	.aufg-global-header.scrolled .aufg-btn-login {
		padding: 6px 20px !important;
		font-size: 13px !important;
	}
	
	.aufg-global-header.scrolled .aufg-lang-btn {
		padding: 6px 10px;
	}
	
	.aufg-actions-section {
		gap: 10px;
	}
}

@media (max-width: 480px) {
	.aufg-global-header {
		min-height: 70px;
	}
	
	.aufg-header-container {
		padding: 8px 15px;
		gap: 15px;
	}
	
	.aufg-logo {
		max-width: 70px;
		max-height: 50px;
	}
	
	.aufg-global-header .aufg-btn-login {
		padding: 6px 15px !important;
		font-size: 12px !important;
		min-width: 40px !important;
	}
	
	.aufg-global-header .aufg-btn-login span {
		display: none !important;
	}
	
	.aufg-global-header .aufg-btn-login::after {
		content: '👤' !important;
		font-size: 14px !important;
		position: relative;
		z-index: 11;
	}
	
	.aufg-lang-btn {
		padding: 6px 8px;
		font-size: 12px;
		min-width: 30px;
	}
	
	.aufg-lang-btn .aufg-current-lang,
	.aufg-lang-btn .fa-chevron-down {
		display: none;
	}
	
	.aufg-lang-btn::after {
		content: '🌐';
		font-size: 14px;
	}
	
	.aufg-actions-section {
		gap: 8px;
	}
	
	.aufg-mobile-toggle {
		width: 35px;
		height: 35px;
		padding: 5px;
	}
	
	.aufg-mobile-toggle span {
		width: 20px;
		height: 1.5px;
		margin: 2px 0;
	}
	
	.aufg-mobile-nav {
		top: 70px;
		max-height: calc(100vh - 70px);
	}
}

/* ===== BODY PADDING COMPENSATION ===== */
body {
	padding-top: 123px !important;
}

/* Compensate for first content section after header */
.aufg-global-header + .elementor-element:first-of-type {
	margin-top: -123px !important;
}

@media (max-width: 768px) {
	body {
		padding-top: 90px !important;
	}
	
	/* Mobile compensation for first content section */
	.aufg-global-header + .elementor-element:first-of-type {
		margin-top: -90px !important;
	}
	
	/* Show mobile menu toggle */
	.aufg-menu-toggle {
		display: flex !important;
	}
	
	/* Hide desktop navigation */
	.aufg-nav-section {
		display: none !important;
	}
	
	/* Hide login button from header since it's now in mobile menu */
	.aufg-btn-login,
	.aufg-btn.aufg-btn-login,
	.aufg-actions-section .aufg-btn-login,
	a.aufg-btn.aufg-btn-login {
		display: none !important;
		visibility: hidden !important;
	}
	
	/* Show language selector on mobile instead of hiding it */
	.aufg-language-selector {
		display: flex !important;
	}
	
	/* Optimize language button for mobile */
	.aufg-lang-btn {
		padding: 8px 12px !important;
		font-size: 14px !important;
		gap: 6px !important;
	}
	
	.aufg-lang-btn .aufg-current-lang {
		font-weight: 600 !important;
	}
	
	/* Ensure language dropdown works well on mobile */
	.aufg-lang-dropdown {
		right: 0 !important;
		left: auto !important;
		min-width: 120px !important;
		font-size: 14px !important;
	}
	
	.aufg-lang-option {
		padding: 12px 16px !important;
		font-size: 14px !important;
	}
	
	/* Ensure mobile menu can be displayed */
	.aufg-mobile-nav {
		display: flex !important;
	}
}

@media (max-width: 480px) {
	body {
		padding-top: 70px !important;
	}
	
	/* Small mobile compensation for first content section */
	.aufg-global-header + .elementor-element:first-of-type {
		margin-top: -70px !important;
	}
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: opacity 0.3s ease !important;
	}
}

/* Focus styles shown only during keyboard navigation */
.aufg-nav-link:focus-visible,
.aufg-btn-login:focus-visible,
.aufg-lang-btn:focus-visible,
.aufg-menu-toggle:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(3, 139, 185, 0.5) !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.aufg-global-header {
		border-bottom: 2px solid #FFFFFF;
	}
	
	.aufg-nav-link {
		text-decoration: underline;
	}
	
	.aufg-btn-login {
		border: 2px solid #FFFFFF;
	}
}

/* ===== RTL MODE SUPPORT ===== */
/* RTL Mode - Apply RTL direction to body and header */
body.rtl-mode {
	direction: rtl;
}

/* Enable full RTL layout for header */
body.rtl-mode .aufg-global-header {
	direction: rtl !important;
}

/* Header container RTL layout */
body.rtl-mode .aufg-header-container {
	flex-direction: row-reverse !important;
}

/* Logo section positioning in RTL */
body.rtl-mode .aufg-logo-section {
	order: 3 !important;
}

/* Navigation section positioning in RTL */
body.rtl-mode .aufg-nav-section {
	direction: rtl !important;
	order: 2 !important;
}

/* Actions section positioning in RTL */
body.rtl-mode .aufg-actions-section {
	direction: rtl !important;
	order: 1 !important;
	justify-content: flex-start !important;
}

/* Navigation menu RTL layout */
body.rtl-mode .aufg-nav-menu {
	flex-direction: row-reverse !important;
	justify-content: flex-start !important;
	direction: rtl !important;
}

/* Ensure menu items flow correctly in RTL - reverse order */
body.rtl-mode .aufg-nav-item {
	order: inherit !important;
	flex-direction: row-reverse !important;
}

/* Specific menu item ordering for RTL (Home first from right) */
body.rtl-mode .aufg-nav-item:nth-child(1) { order: 8 !important; }
body.rtl-mode .aufg-nav-item:nth-child(2) { order: 7 !important; }
body.rtl-mode .aufg-nav-item:nth-child(3) { order: 6 !important; }
body.rtl-mode .aufg-nav-item:nth-child(4) { order: 5 !important; }
body.rtl-mode .aufg-nav-item:nth-child(5) { order: 4 !important; }
body.rtl-mode .aufg-nav-item:nth-child(6) { order: 3 !important; }
body.rtl-mode .aufg-nav-item:nth-child(7) { order: 2 !important; }
body.rtl-mode .aufg-nav-item:nth-child(8) { order: 1 !important; }

/* Make sure dropdowns work properly with reversed layout */
body.rtl-mode .aufg-nav-item.aufg-has-dropdown {
	position: relative;
}

/* Language selector button content RTL */
body.rtl-mode .aufg-lang-btn {
	flex-direction: row-reverse !important;
}

/* Dropdown menus RTL positioning - Enhanced specificity for all pages */
body.rtl-mode .aufg-dropdown-menu,
body.rtl-mode .aufg-global-header .aufg-dropdown-menu,
body.rtl-mode .aufg-nav-item .aufg-dropdown-menu {
	right: auto !important;
	left: 0 !important;
	text-align: right !important;
	z-index: 99999 !important;
	position: absolute !important;
	top: 100% !important;
	transform: translateY(-10px) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
	width: 320px !important;
	max-width: 320px !important;
	min-width: 280px !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	white-space: normal !important;
}

/* Enhanced RTL dropdown visibility */
body.rtl-mode .aufg-has-dropdown:hover .aufg-dropdown-menu,
body.rtl-mode .aufg-dropdown-menu:hover,
body.rtl-mode .aufg-nav-item:hover .aufg-dropdown-menu {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}

/* Language dropdown RTL positioning - Enhanced specificity for all pages */
body.rtl-mode .aufg-lang-dropdown,
body.rtl-mode .aufg-global-header .aufg-lang-dropdown,
body.rtl-mode .aufg-language-selector .aufg-lang-dropdown {
	left: 0 !important;
	right: auto !important;
	text-align: right !important;
	z-index: 2147483647 !important;
	position: fixed !important;
	top: 70px !important;
}

/* Ensure language dropdown shows on hover in RTL */
body.rtl-mode .aufg-language-selector.active .aufg-lang-dropdown,
body.rtl-mode .aufg-global-header .aufg-language-selector.active .aufg-lang-dropdown {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateY(0) !important;
}

/* Dropdown content RTL alignment */
body.rtl-mode .aufg-dropdown-content {
	text-align: right !important;
	direction: rtl !important;
}

body.rtl-mode .aufg-dropdown-title {
	text-align: right !important;
}

body.rtl-mode .aufg-dropdown-description {
	text-align: right !important;
	direction: rtl !important;
}

/* Language option RTL layout */
body.rtl-mode .aufg-lang-option {
	flex-direction: row-reverse !important;
	text-align: right !important;
}

/* RTL dropdown content width and text control */
body.rtl-mode .aufg-dropdown-menu a,
body.rtl-mode .aufg-dropdown-content {
	width: 100% !important;
	box-sizing: border-box !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
}

/* Hide English text in Arabic dropdown */
body.rtl-mode .aufg-dropdown-menu .text-en,
body.rtl-mode .aufg-dropdown-content .text-en,
body.rtl-mode .aufg-dropdown-title .text-en,
body.rtl-mode .aufg-dropdown-description .text-en,
body.rtl-mode .aufg-dropdown-menu .menu-label-en,
body.rtl-mode .aufg-dropdown-title .menu-label-en {
	display: none !important;
	visibility: hidden !important;
}

/* Show only Arabic text in Arabic dropdown */
body.rtl-mode .aufg-dropdown-menu .text-ar,
body.rtl-mode .aufg-dropdown-content .text-ar,
body.rtl-mode .aufg-dropdown-title .text-ar,
body.rtl-mode .aufg-dropdown-description .text-ar,
body.rtl-mode .aufg-dropdown-menu .menu-label-ar,
body.rtl-mode .aufg-dropdown-title .menu-label-ar {
	display: block !important;
	visibility: visible !important;
}

/* Enhanced language switching for dropdown items */
body.rtl-mode .aufg-dropdown-menu li .text-en,
body.rtl-mode .aufg-dropdown-menu span.text-en,
body.rtl-mode .aufg-dropdown-menu p.text-en,
body.rtl-mode .aufg-dropdown-menu li .menu-label-en,
body.rtl-mode .aufg-dropdown-menu span.menu-label-en {
	display: none !important;
	visibility: hidden !important;
}

body.rtl-mode .aufg-dropdown-menu li .text-ar,
body.rtl-mode .aufg-dropdown-menu span.text-ar,
body.rtl-mode .aufg-dropdown-menu p.text-ar,
body.rtl-mode .aufg-dropdown-menu li .menu-label-ar,
body.rtl-mode .aufg-dropdown-menu span.menu-label-ar {
	display: block !important;
	visibility: visible !important;
}

/* Force Arabic language for dropdown in RTL mode */
body.rtl-mode .aufg-dropdown-menu [class*="text-en"],
body.rtl-mode .aufg-dropdown-menu [data-lang="en"] {
	display: none !important;
}

body.rtl-mode .aufg-dropdown-menu [class*="text-ar"],
body.rtl-mode .aufg-dropdown-menu [data-lang="ar"] {
	display: block !important;
}

/* Enhanced description switching for products and media dropdowns */
body.rtl-mode .aufg-dropdown-description .text-en,
body.rtl-mode .aufg-dropdown-description span.text-en,
body.rtl-mode .aufg-dropdown-description div.text-en,
body.rtl-mode .aufg-dropdown-description p.text-en {
	display: none !important;
	visibility: hidden !important;
}

body.rtl-mode .aufg-dropdown-description .text-ar,
body.rtl-mode .aufg-dropdown-description span.text-ar,
body.rtl-mode .aufg-dropdown-description div.text-ar,
body.rtl-mode .aufg-dropdown-description p.text-ar {
	display: block !important;
	visibility: visible !important;
}

/* Comprehensive language switching for all dropdown content */
body.rtl-mode .aufg-dropdown-menu * .text-en,
body.rtl-mode .aufg-dropdown-content * .text-en,
body.rtl-mode .aufg-dropdown-title * .text-en,
body.rtl-mode .aufg-dropdown-description * .text-en {
	display: none !important;
	visibility: hidden !important;
}

body.rtl-mode .aufg-dropdown-menu * .text-ar,
body.rtl-mode .aufg-dropdown-content * .text-ar,
body.rtl-mode .aufg-dropdown-title * .text-ar,
body.rtl-mode .aufg-dropdown-description * .text-ar {
	display: block !important;
	visibility: visible !important;
}

/* Catch any remaining English content in dropdowns */
body.rtl-mode .aufg-dropdown-menu .description-en,
body.rtl-mode .aufg-dropdown-menu .desc-en,
body.rtl-mode .aufg-dropdown-menu [lang="en"],
body.rtl-mode .aufg-dropdown-menu .en {
	display: none !important;
	visibility: hidden !important;
}

body.rtl-mode .aufg-dropdown-menu .description-ar,
body.rtl-mode .aufg-dropdown-menu .desc-ar,
body.rtl-mode .aufg-dropdown-menu [lang="ar"],
body.rtl-mode .aufg-dropdown-menu .ar {
	display: block !important;
	visibility: visible !important;
}

/* Universal language switching for any nested elements */
body.rtl-mode .aufg-dropdown-menu [class$="-en"],
body.rtl-mode .aufg-dropdown-menu [id$="-en"] {
	display: none !important;
}

body.rtl-mode .aufg-dropdown-menu [class$="-ar"],
body.rtl-mode .aufg-dropdown-menu [id$="-ar"] {
	display: block !important;
}

/* Aggressive English content hiding - catches all possible structures */
body.rtl-mode .aufg-dropdown-menu [style*="display: inline"],
body.rtl-mode .aufg-dropdown-menu [style*="display:inline"] {
	display: none !important;
}

body.rtl-mode .aufg-dropdown-menu [style*="display: none"],
body.rtl-mode .aufg-dropdown-menu [style*="display:none"] {
	display: block !important;
}

/* Hide any element containing English text patterns */
body.rtl-mode .aufg-dropdown-menu *:contains("Complete range"),
body.rtl-mode .aufg-dropdown-menu *:contains("Premium quality"),
body.rtl-mode .aufg-dropdown-menu *:contains("Decorative glass"),
body.rtl-mode .aufg-dropdown-menu *:contains("High-quality"),
body.rtl-mode .aufg-dropdown-menu *:contains("international standards"),
body.rtl-mode .aufg-dropdown-menu *:contains("unique textures"),
body.rtl-mode .aufg-dropdown-menu *:contains("silver mirrors"),
body.rtl-mode .aufg-dropdown-menu *:contains("applications") {
	display: none !important;
	visibility: hidden !important;
}

/* Force hide inline English text */
body.rtl-mode .aufg-dropdown-menu {
	font-size: 0 !important;
}

body.rtl-mode .aufg-dropdown-menu .text-ar,
body.rtl-mode .aufg-dropdown-menu .aufg-dropdown-title,
body.rtl-mode .aufg-dropdown-menu .aufg-dropdown-content {
	font-size: 16px !important;
}

body.rtl-mode .aufg-dropdown-title {
	width: 100% !important;
	box-sizing: border-box !important;
	word-wrap: break-word !important;
	white-space: normal !important;
}

body.rtl-mode .aufg-dropdown-description {
	width: 100% !important;
	box-sizing: border-box !important;
	word-wrap: break-word !important;
	white-space: normal !important;
}

/* Fix gaps and spacing in RTL */
body.rtl-mode .aufg-actions-section {
	gap: 15px !important;
}

body.rtl-mode .aufg-nav-menu {
	gap: 5px !important;
}

/* Arabic menu labels should use RTL direction */
body.rtl-mode .menu-label-ar {
	direction: rtl !important;
	text-align: right;
}

/* Ensure English labels stay LTR */
body.rtl-mode .menu-label-en {
	direction: ltr !important;
	text-align: left;
}

/* Mobile navigation RTL fixes */
body.rtl-mode .aufg-mobile-nav {
	direction: rtl !important;
	text-align: right !important;
}

body.rtl-mode .aufg-mobile-menu {
	direction: rtl !important;
	text-align: right !important;
}

body.rtl-mode .aufg-mobile-menu .menu-label-ar {
	direction: rtl !important;
	text-align: right;
}

body.rtl-mode .aufg-mobile-menu .menu-label-en {
	direction: ltr !important;
	text-align: left;
}

/* Mobile menu toggle positioning in RTL */
body.rtl-mode .aufg-menu-toggle {
	order: 4 !important;
}

/* Mobile language buttons RTL */
body.rtl-mode .aufg-mobile-lang-btns {
	direction: rtl !important;
	justify-content: flex-start !important;
}

/* Home page specific RTL dropdown fixes */
body.home.rtl-mode .aufg-dropdown-menu,
body[class*="home"].rtl-mode .aufg-dropdown-menu,
body.rtl-mode.home .aufg-dropdown-menu {
	right: auto !important;
	left: 0 !important;
	text-align: right !important;
	z-index: 99999 !important;
	position: absolute !important;
	top: 100% !important;
	width: 320px !important;
	max-width: 320px !important;
	min-width: 280px !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	white-space: normal !important;
}

body.home.rtl-mode .aufg-has-dropdown:hover .aufg-dropdown-menu,
body[class*="home"].rtl-mode .aufg-has-dropdown:hover .aufg-dropdown-menu,
body.rtl-mode.home .aufg-has-dropdown:hover .aufg-dropdown-menu {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}

/* Mobile RTL responsive fixes */
@media (max-width: 768px) {
	body.rtl-mode .aufg-header-container {
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 15px !important;
		gap: 15px !important;
	}
	
	/* Hamburger menu on left in Arabic */
	body.rtl-mode .aufg-menu-toggle,
	body.rtl-mode .aufg-mobile-toggle {
		order: 1 !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}
	
	/* Logo section - centered like English */
	body.rtl-mode .aufg-logo-section {
		order: 2 !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
		flex-grow: 1 !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}
	
	/* Actions section on right */
	body.rtl-mode .aufg-actions-section {
		order: 3 !important;
		margin: 0 !important;
		display: flex !important;
		gap: 10px !important;
		align-items: center !important;
		flex-shrink: 0 !important;
	}
	
	/* Language selector - remove extra margins */
	body.rtl-mode .aufg-language-selector {
		margin: 0 !important;
	}
	
	/* Ensure consistent button sizes */
	body.rtl-mode .aufg-lang-btn {
		padding: 8px 12px !important;
		font-size: 13px !important;
	}
	
	/* Ensure hamburger menu consistent size */
	body.rtl-mode .aufg-mobile-toggle,
	body.rtl-mode .aufg-menu-toggle {
		width: 40px !important;
		height: 40px !important;
		padding: 10px !important;
	}
	
	/* Mobile RTL dropdown width fixes */
	body.rtl-mode .aufg-dropdown-menu,
	body.rtl-mode .aufg-global-header .aufg-dropdown-menu {
		width: 280px !important;
		max-width: 90vw !important;
		min-width: 250px !important;
		left: 0 !important;
		right: auto !important;
	}
}

/* ===== RTL LAYOUT FIXES ===== */
/* Fix gradient direction in RTL mode to prevent horizontal scroll */
body.rtl-mode .bg-gradient-to-r {
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
}

/* Prevent horizontal scroll in RTL mode */
body.rtl-mode {
    overflow-x: hidden;
}

/* Fix for mobile RTL layout issues */
@media (max-width: 768px) {
    body.rtl-mode {
        overflow-x: hidden !important;
    }
    
    body.rtl-mode .absolute {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    body.rtl-mode .bg-gradient-to-r {
        background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    }
    
    /* Fix any absolute positioned elements causing overflow */
    body.rtl-mode .absolute.inset-0 {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* ===== TIMELINE RTL FIXES ===== */
    /* Fix timeline center line positioning - aggressive override */
    .timeline-line.absolute {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Fix timeline center line positioning in RTL - aggressive override */
    body.rtl-mode .timeline-line.absolute {
        right: 50% !important;
        left: auto !important;
        transform: translateX(50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Fix timeline dots positioning - aggressive override of Tailwind classes */
    .timeline-dot.absolute {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Fix timeline dots positioning in RTL - aggressive override */
    body.rtl-mode .timeline-dot.absolute {
        right: 50% !important;
        left: auto !important;
        transform: translateX(50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Mobile timeline dots are hidden, so no positioning needed */
    
    /* Timeline container overflow fix */
    body.rtl-mode .space-y-16 {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Timeline items overflow fix */
    body.rtl-mode .timeline-item {
        overflow-x: hidden !important;
        max-width: 100% !important;
        direction: rtl;
    }
    
    /* Timeline content RTL */
    body.rtl-mode .timeline-content {
        direction: rtl;
        text-align: right;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Timeline text alignment */
    body.rtl-mode .timeline-year {
        text-align: right;
    }
    
    /* ===== DESKTOP TIMELINE IMPROVEMENTS ===== */
    /* Improve timeline line design */
    .timeline-line {
        background: linear-gradient(to bottom, transparent 0%, #038BB9 10%, #038BB9 90%, transparent 100%);
        box-shadow: 0 0 4px rgba(3, 139, 185, 0.3);
    }
    
    /* Improve timeline dots */
    .timeline-dot {
        box-shadow: 0 0 0 4px #fff, 0 0 8px rgba(3, 139, 185, 0.4);
        transition: all 0.3s ease;
    }
    
    .timeline-item:hover .timeline-dot {
        transform: translateX(-50%) scale(1.2);
        box-shadow: 0 0 0 6px #fff, 0 0 12px rgba(3, 139, 185, 0.6);
    }
    
    /* RTL version of hover effect */
    body.rtl-mode .timeline-item:hover .timeline-dot {
        transform: translateX(50%) scale(1.2);
    }
    
    /* Improve timeline content cards */
    .timeline-content {
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
    }
    
    .timeline-item:hover .timeline-content {
        border-left-color: #038BB9;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }
    
    /* RTL version of content hover */
    body.rtl-mode .timeline-content {
        border-left: none;
        border-right: 4px solid transparent;
    }
    
    body.rtl-mode .timeline-item:hover .timeline-content {
        border-right-color: #038BB9;
        border-left: none;
    }
    
    /* Timeline flex layout fixes for RTL */
    body.rtl-mode .timeline-item .w-1\/2:first-child {
        padding-left: 2rem !important;
        padding-right: 0 !important;
        text-align: right !important;
    }
    
    body.rtl-mode .timeline-item .w-1\/2:last-child {
        padding-right: 2rem !important;
        padding-left: 0 !important;
        text-align: right !important;
    }
    
    /* Fix timeline responsive behavior */
    @media (max-width: 768px) {
        /* Hide the continuous blue line on mobile - aggressive override */
        .timeline-line,
        .timeline-line.absolute {
            display: none !important;
            visibility: hidden !important;
        }
        
        /* Hide timeline dots on mobile for cleaner design */
        .timeline-dot,
        .timeline-dot.absolute {
            display: none !important;
            visibility: hidden !important;
        }
        
        /* Make timeline mobile-friendly */
        .timeline-item {
            flex-direction: column !important;
            margin-bottom: 1rem;
            padding: 0.5rem;
        }
        
        .timeline-item .w-1\/2 {
            width: 100% !important;
            padding: 0 !important;
            text-align: center !important;
        }
        
        /* Timeline dots are hidden on mobile for cleaner design */
        
        /* Improve timeline content spacing on mobile */
        .timeline-content {
            margin-top: 0.5rem;
            max-width: 100%;
        }
        
        /* Reduce the large space-y-16 gap on mobile */
        .space-y-16 {
            gap: 1rem !important;
        }
        
        .space-y-16 > :not([hidden]) ~ :not([hidden]) {
            margin-top: 1rem !important;
            margin-bottom: 0 !important;
        }
        
        /* Force consistent spacing for ALL timeline items */
        .timeline-item {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }
        
        /* Remove any inherited spacing from alternating layout */
        .timeline-item:first-child {
            margin-top: 0 !important;
        }
        
        .timeline-item:last-child {
            margin-bottom: 0 !important;
        }
        
        /* Reset any odd/even specific margins */
        .timeline-item:nth-child(odd),
        .timeline-item:nth-child(even) {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }
        
        /* RTL specific mobile fixes - keep layout consistent with English */
        body.rtl-mode .timeline-item {
            flex-direction: column !important;
            text-align: center !important;
        }
        
        body.rtl-mode .timeline-item .w-1\/2 {
            width: 100% !important;
            padding: 0 !important;
            text-align: center !important;
        }
        
        body.rtl-mode .timeline-content {
            text-align: right !important;
            direction: rtl;
            margin: 0.5rem auto;
            max-width: 100%;
        }
        
        /* But keep year centered in Arabic */
        body.rtl-mode .timeline-year {
            text-align: center !important;
        }
        
        /* Ensure consistent spacing for RTL */
        body.rtl-mode .timeline-item {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }
        
        body.rtl-mode .timeline-item:nth-child(odd),
        body.rtl-mode .timeline-item:nth-child(even) {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }
    }
    
    /* Tablet timeline improvements */
    @media (max-width: 1024px) and (min-width: 769px) {
        .timeline-item .w-1\/2 {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
        
        .timeline-content {
            padding: 1.5rem !important;
        }
        
        .timeline-year {
            font-size: 2rem !important;
        }
    }
    
    /* Additional mobile improvements */
    @media (max-width: 480px) {
        .space-y-16 {
            gap: 0.75rem !important;
        }
        
        .space-y-16 > :not([hidden]) ~ :not([hidden]) {
            margin-top: 0.75rem !important;
            margin-bottom: 0 !important;
        }
        
        .timeline-content {
            padding: 1rem !important;
            margin: 0.25rem;
            border-radius: 0.75rem;
        }
        
        .timeline-year {
            font-size: 1.5rem !important;
            margin-bottom: 0.5rem;
        }
        
        .timeline-item {
            margin-top: 0.75rem !important;
            margin-bottom: 0.75rem !important;
            padding: 0.25rem;
        }
        
        /* Force consistent spacing for ALL timeline items on small mobile */
        .timeline-item:nth-child(odd),
        .timeline-item:nth-child(even) {
            margin-top: 0.75rem !important;
            margin-bottom: 0.75rem !important;
        }
        
        .timeline-item:first-child {
            margin-top: 0 !important;
        }
        
        .timeline-item:last-child {
            margin-bottom: 0 !important;
        }
        
        /* RTL fixes for small mobile - ensure identical alignment to English */
        body.rtl-mode .timeline-content {
            text-align: right !important;
            direction: rtl;
            margin: 0.25rem auto;
            padding: 1rem !important;
            border-radius: 0.75rem;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        body.rtl-mode .timeline-year {
            text-align: center !important;
            direction: rtl;
            font-size: 1.5rem !important;
            margin-bottom: 0.5rem;
        }
        
        body.rtl-mode .timeline-item {
            margin-top: 0.75rem !important;
            margin-bottom: 0.75rem !important;
            padding: 0.25rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        /* Force RTL timeline items to match English structure */
        body.rtl-mode .timeline-item > div {
            width: 100% !important;
            text-align: center !important;
        }
        
        body.rtl-mode .timeline-item .w-full {
            direction: rtl !important;
        }
        
        /* Remove hover effects on mobile */
        .timeline-item:hover .timeline-content {
            transform: none !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
        }
        
        /* Timeline dots are hidden on mobile, so no hover effects needed */
    }
    
    /* Very small mobile adjustments */
    @media (max-width: 360px) {
        .timeline-content {
            padding: 0.75rem !important;
            margin: 0.125rem;
        }
        
        .timeline-year {
            font-size: 1.25rem !important;
        }
        
        .space-y-16 {
            gap: 0.5rem !important;
        }
        
        .space-y-16 > :not([hidden]) ~ :not([hidden]) {
            margin-top: 0.5rem !important;
            margin-bottom: 0 !important;
        }
        
        .timeline-item {
            margin-top: 0.5rem !important;
            margin-bottom: 0.5rem !important;
            padding: 0.125rem;
        }
        
        /* Force consistent spacing for ALL timeline items on very small mobile */
        .timeline-item:nth-child(odd),
        .timeline-item:nth-child(even) {
            margin-top: 0.5rem !important;
            margin-bottom: 0.5rem !important;
        }
        
        .timeline-item:first-child {
            margin-top: 0 !important;
        }
        
        .timeline-item:last-child {
            margin-bottom: 0 !important;
        }
        
        /* Final RTL alignment fix for very small mobile - ensure identical to English */
        body.rtl-mode .timeline-content {
            text-align: right !important;
            direction: rtl;
            margin: 0.125rem auto;
            padding: 0.75rem !important;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        body.rtl-mode .timeline-year {
            text-align: center !important;
            direction: rtl;
            font-size: 1.25rem !important;
        }
        
        body.rtl-mode .timeline-item {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 0.5rem !important;
            margin-bottom: 0.5rem !important;
        }
    }
}

/* ===== FINAL RTL TIMELINE ALIGNMENT OVERRIDES ===== */
/* These ensure Arabic timeline cards align identically to English across all breakpoints */

/* Desktop and tablet RTL timeline alignment */
@media (min-width: 769px) {
    body.rtl-mode .timeline-item {
        direction: rtl;
    }
    
    body.rtl-mode .timeline-item .w-1\/2:first-child {
        text-align: right !important;
        padding-left: 2rem !important;
        padding-right: 0 !important;
    }
    
    body.rtl-mode .timeline-item .w-1\/2:last-child {
        text-align: left !important;
        padding-right: 2rem !important;
        padding-left: 0 !important;
    }
    
    body.rtl-mode .timeline-item:nth-child(even) .w-1\/2:first-child {
        text-align: left !important;
        padding-right: 2rem !important;
        padding-left: 0 !important;
    }
    
    body.rtl-mode .timeline-item:nth-child(even) .w-1\/2:last-child {
        text-align: right !important;
        padding-left: 2rem !important;
        padding-right: 0 !important;
    }
}

/* Mobile timeline alignment - single column layout for both English and Arabic */
@media (max-width: 768px) {
    /* English mobile timeline - single column center layout */
    .timeline-item {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .timeline-item .w-1\/2 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    .timeline-item > div {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* Remove alternating layout for all timeline items on mobile */
    .timeline-item:nth-child(odd) .w-1\/2,
    .timeline-item:nth-child(even) .w-1\/2 {
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    /* Arabic mobile timeline - same single column layout */
    body.rtl-mode .timeline-item {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        direction: ltr !important; /* Override RTL for structural alignment */
    }
    
    body.rtl-mode .timeline-content {
        direction: rtl !important; /* Keep text RTL */
        text-align: right !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    body.rtl-mode .timeline-year {
        text-align: center !important;
        direction: rtl !important;
    }
    
    /* Force all mobile timeline items to identical structure */
    body.rtl-mode .timeline-item > div {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    body.rtl-mode .timeline-item .w-1\/2,
    body.rtl-mode .timeline-item .w-full {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    /* Remove alternating layout for Arabic timeline items on mobile */
    body.rtl-mode .timeline-item:nth-child(odd) .w-1\/2,
    body.rtl-mode .timeline-item:nth-child(even) .w-1\/2 {
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
}