/* ===== SECURITY STYLES - حماية المحتوى ===== */
* {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* السماح بالاختيار في حقول الإدخال فقط */
input, textarea, select, .selectable {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
/* منع سحب الصور */
img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
/* إخفاء محتوى الطباعة */
@media print {
body {
display: none !important;
}
}
/* ===== COLOR PALETTE ===== */
:root {
/* Primary Colors - Green & Gold Theme */
--primary-green: #1a4c3d; /* Dark Green */
--secondary-green: #2d6e5a; /* Medium Green */
--light-green: #4a8c7a; /* Light Green */
--accent-gold: #d4af37; /* Classic Gold */
--light-gold: #f4e196; /* Light Gold */
--dark-gold: #b8941f; /* Dark Gold */
/* Supporting Colors */
--white: #ffffff;
--light-gray: #f8f9fa;
--medium-gray: #6c757d;
--dark-gray: #343a40;
--black: #000000;
/* Status Colors */
--success: #28a745;
--warning: #ffc107;
--danger: #dc3545;
--info: #17a2b8;
/* Gradient Colors */
--gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
--gradient-gold: linear-gradient(135deg, var(--accent-gold) 0%, var(--dark-gold) 100%);
--gradient-bg: linear-gradient(135deg, var(--light-green) 0%, var(--primary-green) 100%);
/* Typography */
--font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
--heading-font: 'Cairo', sans-serif;
--body-font: 'Cairo', sans-serif;
/* Spacing */
--container-max-width: 1200px;
--section-padding: 5rem 0;
--element-margin: 1rem;
--border-radius: 12px;
--button-radius: 30px;
/* Transitions */
--transition-fast: 0.3s ease;
--transition-normal: 0.5s ease;
--transition-slow: 0.8s ease;
/* Shadows */
--shadow-light: 0 2px 10px rgba(26, 76, 61, 0.1);
--shadow-medium: 0 4px 20px rgba(26, 76, 61, 0.15);
--shadow-heavy: 0 8px 30px rgba(26, 76, 61, 0.2);
--shadow-gold: 0 4px 15px rgba(212, 175, 55, 0.3);
/* Additional UI Colors */
--text-dark: #2c3e50;
--text-light: #7f8c8d;
--background-light: #f8f9fa;
--border-light: #e9ecef;
/* ===== RESPONSIVE HEADER VARIABLES ===== */
/* Dynamic Logo Heights */
--logo-height-desktop: 70px;
--logo-height-tablet: clamp(45px, 5vw, 60px);
--logo-height-mobile: clamp(35px, 8vw, 50px);
/* ===== AML POLICY DESIGN VARIABLES ===== */
--policy-card-bg: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
--policy-card-border: 1px solid rgba(26, 76, 61, 0.1);
--policy-card-shadow: 0 8px 32px rgba(26, 76, 61, 0.08);
--policy-card-hover-shadow: 0 12px 40px rgba(26, 76, 61, 0.15);
--policy-icon-bg: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
--policy-point-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
--commitment-card-bg: linear-gradient(135deg, var(--light-gold) 0%, #fff3cd 100%);
--contact-card-bg: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
/* Dynamic Font Sizes */
--nav-font-size: clamp(0.75rem, 1.5vw, 1.1rem);
--dropdown-font-size: clamp(0.7rem, 1.3vw, 0.95rem);
/* Dynamic Spacing */
--header-padding: clamp(0.5rem, 2vw, 2rem);
--nav-gap: clamp(0.3rem, 1vw, 1.5rem);
--services-margin: clamp(1rem, 4vw, 3rem);
}
/* ===== RESET & BASE STYLES ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* إزالة الفراغات من جميع العناصر الأساسية */
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
overflow-x: hidden !important;
}
html {
scroll-behavior: smooth;
font-size: 16px;
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
}
body {
font-family: var(--body-font);
line-height: 1.6;
color: var(--dark-gray);
background: var(--light-gray);
overflow-x: hidden;
direction: rtl;
text-align: right;
margin: 0;
padding: 0;
width: 100%;
}
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 20px;
}
/* تخصيص container للـ header لملء العرض الكامل */
.header .container {
max-width: 100% !important;
padding: 0 2rem !important;
width: 100% !important;
margin: 0 !important;
}
/* تحسين توزيع العناصر في الهيدر */
.nav-brand {
display: flex !important; /* إظهار الشعار دائماً */
grid-column: 1 !important; /* العمود الأول - اللوجو */
justify-self: start !important;
align-items: center !important; /* محاذاة عمودية مع النافجيشن */
order: 1 !important; /* ترتيب أول دائماً */
flex-shrink: 0; /* منع التقلص */
height: 100% !important;
}
.nav-brand .logo {
display: block !important; /* إظهار الصورة دائماً */
max-width: 100%;
height: auto;
object-fit: contain;
}
.nav-links {
grid-column: 2 !important; /* العمود الثاني فقط */
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
order: 2 !important;
height: 100% !important;
}
.right-side-services {
grid-column: 3 !important; /* العمود الثالث */
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
order: 3 !important;
height: 100% !important;
}
/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--element-margin);
}
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p {
margin-bottom: var(--element-margin);
font-size: 1.1rem;
line-height: 1.8;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-fast);
}
ul, ol {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* ===== HEADER STYLES ===== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-bottom: 2px solid var(--accent-gold);
z-index: 1000;
transition: var(--transition-fast);
box-shadow: var(--shadow-light);
margin: 0;
padding: 0;
}
.header.scrolled {
background: rgba(26, 76, 61, 0.95);
backdrop-filter: blur(15px);
box-shadow: var(--shadow-heavy);
}
.header.scrolled .nav-link {
color: var(--white) !important;
font-weight: 600;
}
.header.scrolled .nav-link:hover,
.header.scrolled .nav-link.active {
color: var(--accent-gold) !important;
background: rgba(212, 175, 55, 0.2);
border-bottom: 3px solid var(--accent-gold);
}
/* .header.scrolled .logo {
filter: brightness(0) invert(1);
} */
.header.scrolled .hamburger span {
background: var(--white);
}
.header.scrolled .nav-link.lang-link {
background: var(--accent-gold) !important;
color: var(--primary-green) !important;
border: 2px solid var(--accent-gold) !important;
}
.header.scrolled .nav-link.lang-link:hover {
background: var(--white) !important;
color: var(--primary-green) !important;
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3) !important;
}
.navbar {
padding: 1rem 0;
width: 100%;
margin: 0;
}
.navbar .container {
/* Fallback for older browsers */
display: flex;
justify-content: space-between;
align-items: center;
/* Modern CSS Grid Layout */
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
max-width: 100%;
width: 100%;
padding: 0 2rem;
margin: 0;
box-sizing: border-box;
gap: 1rem;
height: auto !important;
min-height: 70px !important;
}
.nav-brand .logo {
height: var(--logo-height-desktop);
width: auto;
transition: var(--transition-fast);
}
.nav-brand .logo:hover {
transform: scale(1.05);
}
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
}
/* تم نقل تعريف nav-menu إلى الأسفل */
.nav-link {
font-weight: 600;
font-size: 1.1rem;
padding: 0.8rem 1.5rem;
border-radius: var(--button-radius);
transition: var(--transition-fast);
position: relative;
color: var(--primary-green);
}
.nav-link:hover,
.nav-link.active {
color: var(--white);
background: var(--gradient-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.nav-link::before {
content: '';
position: absolute;
bottom: -5px;
right: 50%;
transform: translateX(50%);
width: 0;
height: 3px;
background: var(--gradient-gold);
transition: var(--transition-fast);
border-radius: 2px;
}
.nav-link:hover::before,
.nav-link.active::before {
width: 100%;
}
/* Language Link Styling */
.nav-link.lang-link {
background: var(--accent-gold) !important;
color: var(--primary-green) !important;
border-radius: 20px !important;
padding: 0.5rem 1rem !important;
font-weight: 600 !important;
border: 2px solid var(--accent-gold) !important;
transition: all 0.3s ease !important;
margin-right: 1rem !important;
}
.nav-link.lang-link:hover {
background: var(--primary-green) !important;
color: var(--white) !important;
border-color: var(--primary-green) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.3) !important;
}
.nav-link.lang-link::before {
display: none !important;
}
.nav-link.lang-link i {
margin-left: 0.5rem;
}
/* ===== DROPDOWN STYLES ===== */
.dropdown {
position: relative;
}
.dropdown-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
background: var(--gradient-primary) !important;
color: var(--white) !important;
border-radius: 25px !important;
padding: 0.7rem 1.2rem !important;
font-weight: 600 !important;
border: 2px solid var(--primary-green) !important;
transition: all 0.3s ease !important;
text-decoration: none;
}
.dropdown-toggle:hover {
background: var(--accent-gold) !important;
color: var(--primary-green) !important;
border-color: var(--accent-gold) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-gold) !important;
}
.dropdown-toggle i {
transition: transform 0.3s ease;
}
.dropdown-toggle .dropdown-arrow {
margin-right: 0.3rem;
font-size: 0.8rem;
}
.dropdown.active .dropdown-toggle .dropdown-arrow {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background: var(--white);
min-width: 250px;
border-radius: var(--border-radius);
box-shadow: var(--shadow-heavy);
border: 2px solid var(--primary-green);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
overflow: hidden;
margin-top: 0.5rem;
}
/* ===== DROPDOWN POSITIONING BY LANGUAGE ===== */
/* Arabic and Kurdish - Far Left */
html[dir="rtl"] .dropdown-menu {
right: auto !important;
left: 0 !important;
}
/* English - Far Right */
html[dir="ltr"] .dropdown-menu {
left: auto !important;
right: 0 !important;
}
.dropdown.active .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu li {
list-style: none;
}
.dropdown-link {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1rem 1.5rem;
color: var(--primary-green);
text-decoration: none;
transition: all 0.3s ease;
border-bottom: 1px solid var(--border-light);
font-weight: 500;
}
.dropdown-link:last-child {
border-bottom: none;
}
.dropdown-link:hover {
background: var(--light-gray);
color: var(--accent-gold);
padding-right: 2rem;
}
.dropdown-link i {
font-size: 1.1rem;
color: var(--accent-gold);
transition: color 0.3s ease;
}
.dropdown-link:hover i {
color: var(--primary-green);
}
/* ===== LANGUAGE DROPDOWN - FAR LEFT ===== */
.language-dropdown {
margin-left: 0; /* لا حاجة للمسافة لأنها ضمن right-side-services */
}
.language-toggle {
background: transparent !important;
color: var(--primary-green) !important;
border: 2px solid var(--primary-green) !important;
border-radius: 50% !important;
width: 45px !important;
height: 45px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
position: relative;
overflow: hidden;
}
.language-toggle:hover {
background: var(--primary-green) !important;
color: var(--white) !important;
transform: scale(1.1) !important;
box-shadow: var(--shadow-medium) !important;
}
.language-toggle:hover i.fas.fa-globe {
color: var(--accent-gold) !important; /* تبقى ذهبية عند hover */
transform: rotate(15deg); /* تأثير دوران طفيف */
}
.language-toggle i.fas.fa-globe {
font-size: 1.2rem;
margin: 0;
color: var(--accent-gold); /* أيقونة ذهبية */
}
.language-toggle .dropdown-arrow {
position: absolute;
bottom: -2px;
right: 2px;
font-size: 0.6rem;
opacity: 0.8;
}
.language-dropdown.active .language-toggle .dropdown-arrow {
transform: rotate(180deg);
}
.language-menu {
min-width: 120px;
right: 0;
left: auto;
/* ضمان عدم الخروج من الشاشة */
max-width: 90vw;
transform: translateX(0);
}
.language-menu .dropdown-link {
font-size: 0.95rem;
padding: 0.8rem 1rem;
justify-content: flex-start;
}
.language-menu .dropdown-link i {
font-size: 1rem;
}
/* تعديل ترتيب nav-links - القائمة الرئيسية قريبة من اللوجو والخدمات في اليسار */
.nav-links {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-right: 1.5rem; /* زيادة المسافة قليلاً لتوازن الشيفت */
}
.nav-menu {
display: flex;
list-style: none;
gap: var(--nav-gap);
align-items: center;
margin: 0;
padding: 0;
justify-content: flex-start; /* القائمة تبدأ من اليمين قريبة من اللوجو */
}
.hamburger {
display: none; /* مخفي في الحالة العادية */
}
/* ===== RIGHT SIDE SERVICES CONTAINER ===== */
.right-side-services {
display: flex;
align-items: center;
gap: 1rem;
margin-left: 2rem; /* شيفت لليمين قليلاً */
}
.electronic-services-dropdown {
margin-left: 0;
}
/* ===== TABLET SUPPORT (iPad Air & similar) ===== */
@media (max-width: 1024px) and (min-width: 769px) {
/* تصغير الهيدر والمحتوى أكثر */
.header .container {
padding: 0 0.8rem !important;
gap: 0.5rem;
}
/* تصغير اللوجو للآيباد أكثر */
.nav-brand {
display: block !important;
grid-column: 1 !important;
justify-self: start !important;
order: 1 !important;
}
.nav-brand .logo {
display: block !important;
height: var(--logo-height-tablet) !important;
width: auto !important;
transition: var(--transition-fast) !important;
}
/* تصغير navbar للآيباد */
.navbar {
padding: 0.6rem 0;
}
/* تصغير القائمة الرئيسية أكثر */
.nav-menu {
gap: 0.5rem; /* مسافة أقل أكثر */
}
/* تصغير النصوص في التنقل أكثر */
.nav-link {
font-size: 0.9rem !important; /* تكبير قليلاً */
padding: 0.4rem 0.6rem !important;
white-space: nowrap;
}
/* تصغير الخدمات الإلكترونية أكثر */
.dropdown-toggle {
padding: 0.4rem 0.6rem !important;
font-size: 0.85rem !important; /* تكبير قليلاً */
white-space: nowrap;
}
/* تصغير زر اللغات أكثر */
.language-toggle {
width: 36px !important; /* تكبير قليلاً */
height: 36px !important;
}
.language-toggle i.fas.fa-globe {
font-size: 1rem; /* تكبير الأيقونة */
color: var(--accent-gold) !important;
}
.language-toggle .dropdown-arrow {
font-size: 0.5rem;
}
.dropdown-menu {
min-width: 150px; /* أصغر أكثر للآيباد */
box-shadow: var(--shadow-heavy);
border: 2px solid var(--primary-green);
}
.dropdown-link {
padding: 0.6rem 0.8rem;
font-size: 0.8rem;
}
/* تصغير الخدمات في الآيباد أكثر */
.right-side-services {
gap: 0.4rem;
margin-left: 5rem; /* شيفت أكبر جداً لليمين للآيباد */
}
/* تحسين touch targets للتابليت */
.dropdown-toggle,
.dropdown-link {
min-height: 36px; /* أصغر للآيباد */
display: flex;
align-items: center;
}
/* تعديل المسافات العامة */
.nav-links {
margin-right: 0.2rem; /* مسافة أقل لتعويض الشيفت الكبير */
}
/* ضمان عدم اختفاء العناصر في الآيباد */
.nav-menu {
flex-wrap: nowrap;
min-width: fit-content;
}
.nav-menu .nav-link {
flex-shrink: 0;
min-width: fit-content;
}
/* تقليل النص في القائمة إذا لزم الأمر */
.nav-link {
font-weight: 500; /* وزن أقل للنص */
letter-spacing: -0.5px; /* تقليل المسافات بين الحروف */
}
.dropdown-toggle {
font-weight: 500;
letter-spacing: -0.3px;
}
}
/* ===== TABLET LANDSCAPE - تنسيقات إضافية للآيباد في الوضع الأفقي ===== */
@media (max-width: 1024px) and (min-width: 769px) and (orientation: landscape) {
.header .container {
padding: 0 0.6rem !important;
gap: 0.4rem;
}
.nav-brand .logo {
height: 40px !important; /* أصغر أكثر في الوضع الأفقي */
}
.navbar {
padding: 0.5rem 0; /* padding أقل */
}
.nav-menu {
gap: 0.3rem;
}
.nav-link {
font-size: 0.85rem !important; /* تكبير للوضع الأفقي */
padding: 0.3rem 0.5rem !important;
}
.dropdown-toggle {
padding: 0.3rem 0.5rem !important;
font-size: 0.8rem !important; /* تكبير للوضع الأفقي */
}
.language-toggle {
width: 32px !important; /* تكبير للوضع الأفقي */
height: 32px !important;
}
.language-toggle i.fas.fa-globe {
font-size: 0.9rem; /* تكبير الأيقونة */
}
.right-side-services {
gap: 0.3rem;
margin-left: 6rem; /* شيفت أكبر للوضع الأفقي */
}
.nav-links {
margin-right: 0.3rem;
}
}
/* ===== ENSURE ELEMENTS DON'T DISAPPEAR - منع اختفاء العناصر ===== */
@media (max-width: 1024px) and (min-width: 769px) {
/* ضمان عدم overflow */
.header {
overflow-x: visible;
}
.navbar .container {
overflow-x: visible;
min-width: 100%;
}
.nav-links {
overflow-x: visible;
flex-shrink: 0;
}
.right-side-services {
flex-shrink: 0;
min-width: fit-content;
}
/* ضمان ظهور كرة اللغات */
.language-dropdown {
flex-shrink: 0;
min-width: fit-content;
}
.language-toggle {
flex-shrink: 0;
}
/* ضمان ظهور dropdown كرة اللغات في جميع الشاشات */
.language-menu {
position: fixed !important;
top: 70px !important;
right: 10px !important;
left: auto !important;
z-index: 9999 !important;
transform: none !important;
min-width: 140px;
max-width: 200px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
.language-dropdown.active .language-menu {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
}
/* ===== iPad Air Specific - تنسيقات خاصة للآيباد إير ===== */
@media only screen and (width: 820px) and (height: 1180px),
only screen and (width: 1180px) and (height: 820px),
(max-width: 834px) and (min-width: 800px) {
.header .container {
padding: 0 0.5rem !important;
gap: 0.3rem;
}
.nav-brand {
display: block !important;
grid-column: 1 !important;
justify-self: start !important;
order: 1 !important;
}
.nav-brand .logo {
display: block !important;
height: 45px !important;
width: auto !important;
transition: var(--transition-fast) !important;
}
.navbar {
padding: 0.5rem 0;
}
.nav-menu {
gap: 0.3rem;
}
.nav-link {
font-size: 0.85rem !important; /* تكبير للآيباد إير */
padding: 0.3rem 0.5rem !important;
font-weight: 500;
letter-spacing: -0.5px;
}
.dropdown-toggle {
padding: 0.3rem 0.5rem !important;
font-size: 0.8rem !important; /* تكبير للآيباد إير */
font-weight: 500;
letter-spacing: -0.3px;
}
.language-toggle {
width: 30px !important;
height: 30px !important;
}
.language-toggle i.fas.fa-globe {
font-size: 0.85rem;
}
.right-side-services {
gap: 0.3rem;
margin-left: 6.5rem; /* شيفت أكبر جداً للآيباد إير */
}
.nav-links {
margin-right: 0.3rem;
}
/* ضمان عدم تكسير أو اختفاء العناصر */
.nav-menu,
.right-side-services {
flex-shrink: 0;
overflow: visible;
}
}
/* Mobile Language Link */
@media (max-width: 768px) {
.nav-link.lang-link {
margin: 0.5rem auto !important;
display: inline-block !important;
text-align: center !important;
}
/* Mobile Dropdown - محسن للموبايل */
.dropdown-toggle {
padding: 0.5rem 0.8rem !important;
font-size: 0.85rem !important;
white-space: nowrap;
}
.dropdown-menu {
position: fixed !important;
top: auto !important;
bottom: 100% !important;
left: 50% !important;
transform: translateX(-50%) !important;
right: auto !important;
min-width: 200px;
width: auto;
max-width: 90vw;
margin-bottom: 0.5rem;
}
.dropdown.active .dropdown-menu {
transform: translateX(-50%) translateY(0) !important;
}
.dropdown-link {
padding: 0.8rem 1rem;
font-size: 0.9rem;
white-space: nowrap;
}
/* تحسين dropdowns للمس */
.dropdown-toggle,
.dropdown-link {
min-height: 44px; /* معايير iOS للمس */
display: flex;
align-items: center;
}
/* Mobile Right Side Services */
.right-side-services {
gap: 0.5rem;
}
/* تخطيط الموبايل الجديد */
.nav-links {
grid-column: 2;
justify-content: flex-end;
margin-right: 0;
}
/* إخفاء القائمة الرئيسية فقط */
.nav-menu {
display: none;
}
/* إظهار الشعار دائماً في الموبايل */
.nav-brand {
display: block !important;
grid-column: 1 !important;
justify-self: start !important;
order: 1 !important;
}
.nav-brand .logo {
display: block !important;
height: var(--logo-height-mobile) !important;
width: auto !important;
transition: var(--transition-fast) !important;
}
/* تحسين تخطيط الموبايل */
.navbar .container {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
gap: 0.5rem !important;
}
/* إعدادات خاصة للغات RTL */
html[dir="rtl"] .nav-brand {
justify-self: start !important;
order: 1 !important;
}
html[dir="ltr"] .nav-brand {
justify-self: start !important;
order: 1 !important;
}
}
/* ===== MEDIUM SCREENS - تدرج متوسط ===== */
@media (max-width: 1024px) and (min-width: 769px) {
.navbar .container {
padding: 0 1rem !important;
gap: 0.8rem !important;
}
.nav-menu {
gap: 1rem !important;
}
.nav-link {
font-size: 0.95rem !important;
padding: 0.6rem 1rem !important;
}
.dropdown-toggle {
font-size: 0.9rem !important;
padding: 0.6rem 1rem !important;
}
}
/* ===== DESKTOP AND LARGE SCREENS - إعادة إظهار النافجيشن ===== */
@media (min-width: 769px) {
/* إظهار الشعار دائماً في الديسكتوب */
.nav-brand {
display: block !important;
grid-column: 1 !important;
justify-self: start !important;
order: 1 !important;
}
.nav-brand .logo {
display: block !important;
height: var(--logo-height-desktop) !important;
width: auto !important;
transition: var(--transition-fast) !important;
}
.nav-menu {
display: flex !important;
position: static !important;
flex-direction: row !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
height: auto !important;
width: auto !important;
top: auto !important;
right: auto !important;
z-index: auto !important;
}
.hamburger {
display: none !important;
}
.nav-link {
font-size: var(--nav-font-size) !important;
padding: 0.8rem 1.5rem !important;
color: var(--primary-green) !important;
background: transparent !important;
margin: 0 !important;
width: auto !important;
text-align: left !important;
border: none !important;
backdrop-filter: none !important;
}
.nav-link:hover,
.nav-link.active {
color: var(--white) !important;
background: var(--gradient-primary) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-medium) !important;
}
.nav-menu {
gap: var(--nav-gap);
align-items: center;
margin: 0;
list-style: none;
}
.nav-link {
border-radius: var(--button-radius);
transition: var(--transition-fast);
position: relative;
font-weight: 600;
text-align: right !important;
}
.nav-link::before {
content: '';
position: absolute;
bottom: -5px;
right: 50%;
transform: translateX(50%);
width: 0;
height: 3px;
background: var(--gradient-gold);
transition: var(--transition-fast);
border-radius: 2px;
}
.nav-link:hover::before,
.nav-link.active::before {
width: 100%;
}
/* إعدادات خاصة للغات في الديسكتوب */
html[dir="rtl"] .nav-brand {
justify-self: start !important;
order: 1 !important;
}
html[dir="ltr"] .nav-brand {
justify-self: start !important;
order: 1 !important;
}
/* تحسين تخطيط الديسكتوب */
.navbar .container {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
gap: 1rem !important;
}
}
/* ===== RESPONSIVE NAVIGATION SCALING - تدرج أحجام النافجيشن ===== */
/* Large Desktop */
@media (min-width: 1200px) {
.nav-link {
font-size: 1.1rem !important;
padding: 0.8rem 1.5rem !important;
}
}
/* Medium Desktop */
@media (max-width: 1199px) and (min-width: 992px) {
.nav-link {
font-size: 1rem !important;
padding: 0.7rem 1.2rem !important;
}
}
/* Small Desktop / Large Tablet */
@media (max-width: 991px) and (min-width: 769px) {
.nav-link {
font-size: 0.9rem !important;
padding: 0.6rem 1rem !important;
}
.nav-menu {
gap: 0.5rem;
}
/* إبقاء الخدمات واللغات ظاهرة */
.right-side-services {
display: flex;
gap: 0.3rem;
align-items: center;
margin-left: 0.5rem; /* شيفت قليل جداً في الموبايل */
}
/* عرض الهامبورغر للقائمة الرئيسية */
.hamburger {
display: block !important;
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
z-index: 1001;
}
/* menu للموبايل - القائمة الرئيسية فقط */
.nav-menu.active {
display: flex;
position: fixed;
top: 100%;
left: 0;
right: 0;
background: var(--white);
flex-direction: column;
padding: 1.5rem;
box-shadow: var(--shadow-heavy);
z-index: 999;
border-top: 2px solid var(--accent-gold);
}
.nav-menu.active .nav-link {
padding: 1rem;
border-bottom: 1px solid var(--border-light);
text-align: center;
}
/* تحسين hamburger للموبايل */
.hamburger {
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.hamburger:hover {
transform: translateY(-50%) scale(1.1);
}
.hamburger span {
display: block;
width: 25px;
height: 3px;
background: var(--primary-green);
margin: 5px 0;
transition: 0.3s;
border-radius: 2px;
}
/* انيميشن hamburger */
.hamburger.active span:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
.language-dropdown {
margin-left: 0;
}
.language-toggle {
width: 40px !important;
height: 40px !important;
}
.language-toggle i.fas.fa-globe {
font-size: 1rem;
color: var(--accent-gold) !important; /* ذهبية في الموبايل أيضاً */
}
.language-toggle:hover i.fas.fa-globe {
color: var(--accent-gold) !important;
transform: rotate(15deg);
}
.language-toggle .dropdown-arrow {
bottom: -1px;
right: 1px;
font-size: 0.5rem;
}
.language-menu {
min-width: 100px;
right: -10px;
}
.language-menu .dropdown-link {
padding: 0.6rem 0.8rem;
font-size: 0.85rem;
}
/* ضمان ظهور dropdown في الموبايل */
.language-menu {
position: fixed !important;
top: 60px !important;
right: 5px !important;
left: auto !important;
z-index: 9999 !important;
min-width: 120px;
max-width: 150px;
box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
border-radius: 8px !important;
}
/* تخصيص Header للموبايل - عرض كامل */
.header .container {
padding: 0 1rem !important;
}
.navbar {
padding: 0.8rem 0;
}
/* تعديل التخطيط للموبايل */
.navbar .container {
grid-template-columns: auto 1fr;
gap: 0.5rem;
}
}
/* ===== SMALL SCREENS - بداية التحول للدروب داون ===== */
@media (max-width: 900px) and (min-width: 769px) {
.nav-menu {
gap: 0.5rem !important;
}
.nav-link {
font-size: 0.85rem !important;
padding: 0.5rem 0.8rem !important;
}
.dropdown-toggle {
font-size: 0.8rem !important;
padding: 0.5rem 0.8rem !important;
}
.navbar .container {
padding: 0 0.8rem !important;
gap: 0.5rem !important;
}
}
/* ===== TRANSITION TO MOBILE - انتقال للموبايل ===== */
@media (max-width: 820px) {
.nav-menu {
display: none !important;
}
.hamburger {
display: block !important;
}
.right-side-services {
display: none !important;
}
}
/* ===== GENERAL TABLET FIXES - إصلاحات عامة للآيباد ===== */
@media (max-width: 1024px) and (min-width: 768px) {
/* منع أي overflow في الهيدر */
.header,
.navbar,
.nav-links {
overflow-x: visible !important;
}
/* ضمان المرونة في التخطيط */
.navbar .container {
display: grid !important;
grid-template-columns: auto 1fr !important;
width: 100% !important;
max-width: 100% !important;
}
.nav-links {
justify-self: stretch !important;
width: 100% !important;
}
/* ضمان ظهور جميع العناصر */
.right-side-services,
.language-dropdown,
.electronic-services-dropdown {
visibility: visible !important;
display: flex !important;
}
}
/* ===== UNIVERSAL LANGUAGE DROPDOWN POSITIONING ===== */
/* ضمان ظهور dropdown اللغات في جميع الشاشات والأوضاع */
/* Desktop and Large Screens */
@media (min-width: 1025px) {
.language-menu {
position: absolute !important;
top: 100% !important;
z-index: 1000 !important;
margin-top: 0.5rem !important;
transform: none !important;
min-width: 140px;
max-width: 200px;
}
/* Arabic and Kurdish - Far Left */
html[dir="rtl"] .language-menu {
right: auto !important;
left: 0 !important;
}
/* English - Far Right */
html[dir="ltr"] .language-menu {
left: auto !important;
right: 0 !important;
}
}
/* Tablet Landscape */
@media (max-width: 1024px) and (min-width: 769px) and (orientation: landscape) {
.language-menu {
position: fixed !important;
top: 65px !important;
z-index: 9999 !important;
min-width: 130px;
max-width: 180px;
}
/* Arabic and Kurdish - Far Left */
html[dir="rtl"] .language-menu {
right: auto !important;
left: 8px !important;
}
/* English - Far Right */
html[dir="ltr"] .language-menu {
left: auto !important;
right: 8px !important;
}
}
/* Tablet Portrait */
@media (max-width: 1024px) and (min-width: 769px) and (orientation: portrait) {
.language-menu {
position: fixed !important;
top: 75px !important;
z-index: 9999 !important;
min-width: 140px;
max-width: 200px;
}
/* Arabic and Kurdish - Far Left */
html[dir="rtl"] .language-menu {
right: auto !important;
left: 10px !important;
}
/* English - Far Right */
html[dir="ltr"] .language-menu {
left: auto !important;
right: 10px !important;
}
}
/* Mobile Landscape */
@media (max-width: 768px) and (orientation: landscape) {
.language-menu {
position: fixed !important;
top: 55px !important;
z-index: 9999 !important;
min-width: 110px;
max-width: 140px;
font-size: 0.8rem;
}
/* Arabic and Kurdish - Far Left */
html[dir="rtl"] .language-menu {
right: auto !important;
left: 5px !important;
}
/* English - Far Right */
html[dir="ltr"] .language-menu {
left: auto !important;
right: 5px !important;
}
}
/* Mobile Portrait */
@media (max-width: 768px) and (orientation: portrait) {
.language-menu {
position: fixed !important;
top: 65px !important;
z-index: 9999 !important;
min-width: 120px;
max-width: 150px;
}
/* Arabic and Kurdish - Far Left */
html[dir="rtl"] .language-menu {
right: auto !important;
left: 8px !important;
}
/* English - Far Right */
html[dir="ltr"] .language-menu {
left: auto !important;
right: 8px !important;
}
}
/* Extra Small Screens */
@media (max-width: 480px) {
.language-menu {
position: fixed !important;
top: 60px !important;
z-index: 9999 !important;
min-width: 100px;
max-width: 130px;
}
/* Arabic and Kurdish - Far Left */
html[dir="rtl"] .language-menu {
right: auto !important;
left: 5px !important;
}
/* English - Far Right */
html[dir="ltr"] .language-menu {
left: auto !important;
right: 5px !important;
font-size: 0.75rem;
}
.language-menu .dropdown-link {
padding: 0.5rem 0.6rem;
font-size: 0.75rem;
}
}
/* Universal Dropdown Enhancements */
.language-menu {
/* Prevent overflow and ensure visibility */
overflow: visible !important;
white-space: nowrap;
box-sizing: border-box;
/* Enhanced shadow and border */
box-shadow: 0 8px 25px rgba(26, 76, 61, 0.15),
0 4px 12px rgba(0,0,0,0.1) !important;
border: 2px solid var(--primary-green) !important;
border-radius: var(--border-radius) !important;
/* Smooth animations */
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.language-dropdown.active .language-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.language-menu .dropdown-link {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.2s ease;
}
.language-menu .dropdown-link:hover {
background: var(--light-gray) !important;
color: var(--accent-gold) !important;
transform: translateX(3px);
}
/* ضمان عدم التداخل مع العناصر الأخرى */
.language-dropdown {
position: relative;
z-index: 100;
}
.language-dropdown.active {
z-index: 9999;
}
/* منع تقطع dropdown في الشاشات الضيقة */
@media (max-width: 380px) {
.language-menu {
right: 2px !important;
min-width: 90px !important;
max-width: 110px !important;
}
.language-menu .dropdown-link {
padding: 0.4rem 0.5rem;
font-size: 0.7rem;
}
}
/* iPad Air specific adjustments */
@media only screen and (width: 820px) and (height: 1180px) {
.language-menu {
top: 70px !important;
right: 12px !important;
min-width: 140px;
}
}
@media only screen and (width: 1180px) and (height: 820px) {
.language-menu {
top: 60px !important;
right: 10px !important;
min-width: 130px;
}
}
/* ===== تنسيقات للشاشات الكبيرة - عرض كامل ===== */
@media (min-width: 1400px) {
.header .container {
padding: 0 3rem !important;
gap: 2rem;
}
.nav-menu {
gap: 2rem;
}
.right-side-services {
margin-left: 2.5rem; /* شيفت أكبر للشاشات الكبيرة */
}
}
@media (min-width: 1600px) {
.header .container {
padding: 0 4rem !important;
gap: 3rem;
}
.nav-menu {
gap: 2.5rem;
}
.right-side-services {
margin-left: 3rem; /* شيفت أكبر للشاشات الكبيرة جداً */
}
}
/* Hero Section Buttons - Golden Border */
.hero-buttons .btn {
border: 2px solid var(--accent-gold) !important;
box-shadow: 0 2px 15px rgba(212, 175, 55, 0.3) !important;
color: #f4d03f !important; /* لون ذهبي فاتح للنص */
}
.hero-buttons .btn:hover {
border-color: var(--dark-gold) !important;
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4) !important;
color: #f1c40f !important; /* لون ذهبي أكثر إشراقاً عند التمرير */
}
.hero-buttons .btn i {
color: inherit !important; /* لضمان أن الأيقونات تأخذ نفس اللون */
}
/* English Page Navigation Fix - Minimal LTR Only */
html[lang="en"],
body[lang="en"],
body[dir="ltr"] {
direction: ltr !important;
}
/* Hamburger Menu */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
gap: 5px;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
transition: all 0.3s ease;
}
.hamburger:hover {
background: rgba(212, 175, 55, 0.2);
transform: scale(1.05);
}
.hamburger span {
width: 28px;
height: 3px;
background: var(--primary-green);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-radius: 2px;
transform-origin: center;
}
.hamburger.active {
background: rgba(212, 175, 55, 0.3);
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
background: var(--accent-gold);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
transform: scale(0);
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
background: var(--accent-gold);
}
/* Body scroll lock when menu is open */
body.menu-open {
overflow: hidden;
position: fixed;
width: 100%;
}
/* ===== HERO SECTION ===== */
.hero {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
background: none;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.hero-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
.slide.active {
opacity: 1;
}
.hero-content {
position: relative;
z-index: 2;
width: 100%;
text-align: center;
color: var(--white);
padding: 2rem 0;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 30px;
}
.hero-title {
margin-bottom: 2rem;
animation: fadeInUp 1s ease-out;
}
.title-main {
display: block;
font-size: 4rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--white) 0%, var(--accent-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.title-sub {
display: block;
font-size: 1.8rem;
font-weight: 400;
opacity: 0.95;
color: var(--light-gold);
}
.hero-description {
font-size: 1.3rem;
max-width: 700px;
margin: 0 auto 3rem;
opacity: 0.9;
line-height: 1.8;
animation: fadeInUp 1s ease-out 0.3s both;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease-out 0.6s both;
margin-bottom: 0;
margin-top: 4rem;
position: relative;
}
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
padding: 1rem 2rem;
font-weight: 600;
font-size: 1rem;
border-radius: 30px;
transition: var(--transition-fast);
position: relative;
overflow: hidden;
border: 2px solid var(--primary-green);
background: rgba(26, 76, 61, 0.05);
color: var(--primary-green);
cursor: pointer;
text-decoration: none;
box-shadow: 0 2px 8px rgba(26, 76, 61, 0.1);
}
.btn:hover {
background: rgba(26, 76, 61, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.2);
border-color: var(--secondary-green);
}
.btn-primary {
background: rgba(26, 76, 61, 0.05);
color: var(--primary-green);
border: 2px solid var(--primary-green);
box-shadow: 0 2px 8px rgba(26, 76, 61, 0.1);
}
.btn-primary:hover {
background: rgba(26, 76, 61, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.2);
border-color: var(--secondary-green);
}
.btn-secondary {
background: rgba(26, 76, 61, 0.05);
color: var(--primary-green);
border: 2px solid var(--primary-green);
box-shadow: 0 2px 8px rgba(26, 76, 61, 0.1);
}
.btn-secondary:hover {
background: rgba(26, 76, 61, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.2);
border-color: var(--secondary-green);
}
.btn-outline {
background: rgba(26, 76, 61, 0.05);
color: var(--primary-green);
border: 2px solid var(--primary-green);
box-shadow: 0 2px 8px rgba(26, 76, 61, 0.1);
}
.btn-outline:hover {
background: rgba(26, 76, 61, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.2);
border-color: var(--secondary-green);
}
/* ===== BUTTON SIZES ===== */
.btn-sm {
padding: 8px 16px;
font-size: 0.875rem;
border-radius: 20px;
}
.btn-lg {
padding: 16px 32px;
font-size: 1.125rem;
border-radius: 35px;
}
/* ===== FORM BUTTONS ===== */
button[type="submit"],
input[type="submit"],
.submit-btn,
.close-btn,
.modal-btn {
background: rgba(26, 76, 61, 0.05) !important;
color: var(--primary-green) !important;
border: 2px solid var(--primary-green) !important;
border-radius: 30px !important;
padding: 0.75rem 1.5rem !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(26, 76, 61, 0.1) !important;
cursor: pointer !important;
}
button[type="submit"]:hover,
input[type="submit"]:hover,
.submit-btn:hover,
.close-btn:hover,
.modal-btn:hover {
background: rgba(26, 76, 61, 0.1) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.2) !important;
border-color: var(--secondary-green) !important;
}
/* ===== GENERAL BUTTON-LIKE ELEMENTS ===== */
a.button,
.button-link,
.cta-button,
.action-button {
background: rgba(26, 76, 61, 0.05) !important;
color: var(--primary-green) !important;
border: 2px solid var(--primary-green) !important;
border-radius: 30px !important;
padding: 0.75rem 1.5rem !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(26, 76, 61, 0.1) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
}
a.button:hover,
.button-link:hover,
.cta-button:hover,
.action-button:hover {
background: rgba(26, 76, 61, 0.1) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.2) !important;
border-color: var(--secondary-green) !important;
}
/* ===== SLIDER CONTROLS ===== */
.slider-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 2rem;
z-index: 4;
}
.slider-prev,
.slider-next {
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
color: var(--white);
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-fast);
backdrop-filter: blur(10px);
font-size: 1.2rem;
}
.slider-prev:hover,
.slider-next:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.1);
border-color: var(--accent-gold);
}
.slider-dots {
display: flex;
gap: 0.8rem;
}
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: var(--transition-fast);
border: 2px solid transparent;
}
.dot.active,
.dot:hover {
background: var(--accent-gold);
transform: scale(1.3);
border-color: var(--white);
}
/* ===== SECTIONS ===== */
.section {
padding: var(--section-padding);
position: relative;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-title {
font-size: 3rem;
font-weight: 800;
color: var(--primary-green);
margin-bottom: 1.5rem;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--gradient-gold);
border-radius: 2px;
}
.section-subtitle {
font-size: 1.2rem;
color: var(--medium-gray);
max-width: 700px;
margin: 0 auto;
line-height: 1.8;
}
/* ===== SERVICES SECTION ===== */
.services {
background: var(--white);
position: relative;
}
.services::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 3rem;
margin-top: 4rem;
}
.service-card {
background: var(--white);
border-radius: var(--border-radius);
padding: 3rem 2rem;
text-align: center;
transition: var(--transition-normal);
border: 1px solid rgba(26, 76, 61, 0.1);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-light);
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0;
transition: var(--transition-normal);
z-index: -1;
}
.service-card:hover::before {
opacity: 0.05;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-heavy);
border-color: var(--accent-gold);
}
.service-icon {
width: 90px;
height: 90px;
margin: 0 auto 2rem;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 2.5rem;
transition: var(--transition-fast);
position: relative;
}
.service-icon::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: var(--gradient-gold);
border-radius: 50%;
z-index: -1;
opacity: 0;
transition: var(--transition-fast);
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
}
.service-card:hover .service-icon::before {
opacity: 1;
}
.service-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary-green);
margin-bottom: 1.5rem;
}
.service-description {
color: var(--medium-gray);
margin-bottom: 2rem;
line-height: 1.8;
font-size: 1.1rem;
}
.service-features ul {
list-style: none;
text-align: right;
margin-bottom: 2.5rem;
}
.service-features li {
padding: 0.8rem 0;
color: var(--dark-gray);
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 1.05rem;
}
.service-features i {
color: var(--accent-gold);
font-size: 1.2rem;
}
.service-btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: rgba(26, 76, 61, 0.05);
color: var(--primary-green);
padding: 1rem 2rem;
border-radius: 30px;
font-weight: 600;
transition: var(--transition-fast);
border: 2px solid var(--primary-green);
text-decoration: none;
box-shadow: 0 2px 8px rgba(26, 76, 61, 0.1);
}
.service-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.2);
background: rgba(26, 76, 61, 0.1);
border-color: var(--secondary-green);
}
/* ===== STATISTICS SECTION ===== */
.statistics {
padding: 4rem 0;
background: var(--gradient-primary);
color: var(--white);
position: relative;
}
.statistics::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.stat-item {
text-align: center;
padding: 2.5rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: var(--transition-fast);
}
.stat-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
}
.stat-icon {
font-size: 3.5rem;
color: var(--accent-gold);
margin-bottom: 1.5rem;
transition: var(--transition-fast);
}
.stat-item:hover .stat-icon {
transform: scale(1.1);
color: var(--light-gold);
}
.stat-number {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 0.8rem;
color: var(--white);
line-height: 1;
}
.stat-label {
font-size: 1.2rem;
color: var(--light-gold);
font-weight: 500;
}
/* ===== ABOUT SECTION ===== */
.about {
background: var(--light-gray);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-text h3 {
color: var(--primary-green);
margin-bottom: 2rem;
font-size: 2.2rem;
}
.about-text p {
color: var(--medium-gray);
margin-bottom: 1.5rem;
line-height: 1.8;
}
.about-image {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-medium);
}
.about-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0.1;
z-index: 1;
}
/* ===== FOOTER ===== */
.footer {
background: var(--gradient-primary);
color: var(--white);
padding: 4rem 0 2rem;
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
/* تصميم خاص لجعل "تواصل معنا" و "خدماتنا" في سطر واحد */
.footer-services-contact-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 3rem;
width: 100%;
margin: 2rem 0;
}
.footer-services-contact-row .footer-section {
flex: 1;
max-width: 48%;
}
.footer-services-contact-row .footer-section:first-child {
text-align: right;
}
.footer-services-contact-row .footer-section:last-child {
text-align: left;
}
@media (max-width: 768px) {
.footer-services-contact-row {
flex-direction: column;
gap: 2rem;
}
.footer-services-contact-row .footer-section {
max-width: 100%;
text-align: center;
}
}
.footer-section h3 {
margin-bottom: 1.5rem;
color: var(--accent-gold);
font-weight: 700;
font-size: 1.5rem;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.8rem;
}
.footer-section ul li a {
color: rgba(255, 255, 255, 0.8);
transition: var(--transition-fast);
font-size: 1.05rem;
}
.footer-section ul li a:hover {
color: var(--accent-gold);
transform: translateX(5px);
}
.footer-logo {
height: 70px;
margin-bottom: 1.5rem;
}
.contact-info p {
margin-bottom: 0.8rem;
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 1.05rem;
}
.contact-info i {
color: var(--accent-gold);
font-size: 1.2rem;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.social-links a {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: var(--transition-fast);
border: 2px solid transparent;
font-size: 1.2rem;
}
.social-links a:hover {
background: var(--accent-gold);
color: var(--primary-green);
transform: translateY(-3px);
border-color: var(--white);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.8);
font-size: 1.05rem;
}
/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out;
}
.animate-slide-in-right {
animation: slideInRight 0.8s ease-out;
}
.animate-pulse {
animation: pulse 2s infinite;
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
.title-main {
font-size: 3rem;
}
.services-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
}
.about-content {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 768px) {
.hamburger {
display: flex;
z-index: 1001;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
backdrop-filter: blur(20px);
flex-direction: column;
justify-content: center;
align-items: center;
transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1000;
padding: 2rem;
overflow-y: auto;
}
.nav-menu.active {
right: 0;
animation: slideInRight 0.4s ease-out;
}
.nav-menu.active .nav-link {
animation: navLinkAppear 0.5s ease-out forwards;
}
.nav-menu.active .nav-link:nth-child(1) { animation-delay: 0.1s; }
.nav-menu.active .nav-link:nth-child(2) { animation-delay: 0.2s; }
.nav-menu.active .nav-link:nth-child(3) { animation-delay: 0.3s; }
.nav-menu.active .nav-link:nth-child(4) { animation-delay: 0.4s; }
.nav-menu.active .nav-link:nth-child(5) { animation-delay: 0.5s; }
.nav-menu.active .nav-link:nth-child(6) { animation-delay: 0.6s; }
.nav-menu::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,
rgba(212, 175, 55, 0.1) 0%,
transparent 25%,
transparent 75%,
rgba(212, 175, 55, 0.1) 100%);
pointer-events: none;
}
.nav-link {
font-size: 1.4rem;
padding: 1.2rem 2.5rem;
width: 85%;
text-align: center;
color: var(--white) !important;
background: rgba(255, 255, 255, 0.1);
margin: 0.5rem 0;
border-radius: 15px;
border: 2px solid transparent;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.nav-link:hover::before {
left: 100%;
}
.nav-link:hover,
.nav-link:active {
background: var(--accent-gold) !important;
color: var(--primary-green) !important;
border-color: var(--light-gold);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}
.nav-link.lang-link {
background: var(--accent-gold) !important;
color: var(--primary-green) !important;
border: 2px solid var(--light-gold) !important;
font-weight: 700 !important;
margin-top: 1.5rem !important;
}
.nav-link.lang-link:hover {
background: var(--white) !important;
color: var(--primary-green) !important;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.title-main {
font-size: 2.5rem;
}
.title-sub {
font-size: 1.4rem;
}
.hero-description {
font-size: 1.1rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.hero-content {
padding-bottom: 25px !important;
}
.services-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.section-title {
font-size: 2.2rem;
}
.service-card {
padding: 2rem 1.5rem;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.title-main {
font-size: 2rem;
}
.hero-buttons .btn {
width: 100%;
justify-content: center;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.social-links {
justify-content: center;
}
.service-features {
text-align: center;
}
.service-features li {
justify-content: center;
}
}
/* ===== LOADING STATES ===== */
.loading {
opacity: 0.7;
pointer-events: none;
}
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
/* Mobile Menu Animations */
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeInUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes navLinkAppear {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ===== ACCESSIBILITY ===== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.focus-visible {
outline: 2px solid var(--accent-gold);
outline-offset: 2px;
}
/* ===== BRANCH CARDS ===== */
.branches-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.branch-card {
background: var(--white);
border-radius: 12px;
box-shadow: var(--shadow-light);
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid var(--border-light);
}
.branch-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.branch-header {
background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
color: var(--white);
padding: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.branch-icon {
background: rgba(255, 255, 255, 0.2);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.branch-header h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 0;
flex: 1;
}
.branch-code {
background: var(--accent-gold);
color: var(--primary-green);
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.875rem;
}
.branch-content {
padding: 1.5rem;
}
.branch-info p {
margin: 0.75rem 0;
display: flex;
align-items: flex-start;
gap: 0.75rem;
color: var(--text-dark);
line-height: 1.6;
}
.branch-info i {
color: var(--primary-green);
margin-top: 0.2rem;
min-width: 16px;
}
.branch-actions {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-light);
}
.branch-actions .btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
border: 2px solid var(--primary-green);
background: rgba(26, 76, 61, 0.05);
color: var(--primary-green);
border-radius: 30px;
padding: 0.75rem 1rem;
box-shadow: 0 2px 8px rgba(26, 76, 61, 0.1);
}
.branch-actions .btn:hover {
transform: translateY(-2px);
background: rgba(26, 76, 61, 0.1);
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.2);
border-color: var(--secondary-green);
}
.branch-actions .btn i {
color: var(--primary-green);
}
/* ===== ATM CARDS ===== */
.atm-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.atm-card {
background: var(--white);
border-radius: 12px;
box-shadow: var(--shadow-light);
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid var(--border-light);
}
.atm-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
}
.atm-header {
background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
color: var(--white);
padding: 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.atm-icon {
background: rgba(255, 255, 255, 0.2);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.atm-status {
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
}
.atm-status.active {
background: var(--success);
color: var(--white);
}
.atm-status.maintenance {
background: var(--warning);
color: var(--white);
}
.atm-content {
padding: 1.25rem;
}
.atm-content p {
margin: 0.5rem 0;
display: flex;
align-items: flex-start;
gap: 0.5rem;
color: var(--text-dark);
font-size: 0.9rem;
}
.atm-content i {
color: var(--primary-green);
margin-top: 0.2rem;
min-width: 14px;
}
.atm-services {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.service-tag {
background: var(--background-light);
color: var(--primary-green);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid var(--border-light);
}
/* ===== SEARCH AND FILTER ===== */
.search-section {
background: var(--background-light);
padding: 2rem 0;
}
.search-controls {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
}
.search-box {
position: relative;
max-width: 500px;
width: 100%;
}
.search-box input {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
border: 2px solid var(--border-light);
border-radius: 25px;
font-size: 1rem;
transition: all 0.3s ease;
background: var(--white);
}
.search-box input:focus {
border-color: var(--primary-green);
outline: none;
box-shadow: 0 0 0 3px rgba(26, 76, 61, 0.1);
}
.search-box i {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-light);
font-size: 1.25rem;
}
.filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.filter-btn {
padding: 0.75rem 1.5rem;
border: 2px solid var(--primary-green);
background: rgba(26, 76, 61, 0.05);
color: var(--primary-green);
border-radius: 30px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(26, 76, 61, 0.1);
}
.filter-btn:hover,
.filter-btn.active {
background: rgba(26, 76, 61, 0.1);
border-color: var(--secondary-green);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.2);
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
.branches-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.branch-actions {
flex-direction: column;
}
.search-controls {
padding: 0 1rem;
}
.filter-buttons {
gap: 0.5rem;
}
.filter-btn {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
}
/* ===== PRINT STYLES ===== */
@media print {
.header,
.whatsapp-contact,
.slider-controls {
display: none;
}
.hero {
min-height: auto;
padding: 2rem 0;
}
* {
background: white !important;
color: black !important;
}
}
/* ===== FOOTER SOCIAL MEDIA ICONS ===== */
.footer-social-media {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
justify-content: flex-start;
flex-wrap: wrap;
}
.footer-social-media .social-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.2rem;
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.3);
}
.footer-social-media .social-icon:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 6px 20px rgba(26, 76, 61, 0.4);
}
/* Individual Social Media Colors on Hover */
.footer-social-media .social-icon.facebook:hover {
background: #1877f2;
box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}
.footer-social-media .social-icon.twitter:hover {
background: #1da1f2;
box-shadow: 0 6px 20px rgba(29, 161, 242, 0.4);
}
.footer-social-media .social-icon.instagram:hover {
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
box-shadow: 0 6px 20px rgba(225, 48, 108, 0.4);
}
.footer-social-media .social-icon.linkedin:hover {
background: #0077b5;
box-shadow: 0 6px 20px rgba(0, 119, 181, 0.4);
}
.footer-social-media .social-icon.youtube:hover {
background: #ff0000;
box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
}
/* Responsive adjustments for social media icons */
@media (max-width: 768px) {
.footer-social-media {
justify-content: center;
gap: 0.8rem;
margin-top: 1rem;
}
.footer-social-media .social-icon {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.footer-social-media .social-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
}
/* زر الخدمات الإلكترونية المصغر */
.electronic-services-link {
padding: 0.8rem 1.5rem !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
min-width: 180px;
position: relative;
overflow: hidden;
}
.electronic-services-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: all 0.6s;
}
.electronic-services-link:hover::before {
left: 100%;
}
.electronic-services-link i {
font-size: 1rem !important;
}
/* تحسينات الموبايل للأزرار */
@media (max-width: 768px) {
.hero-buttons {
margin-top: 3rem;
gap: 1rem;
}
.electronic-services-link {
padding: 0.7rem 1.3rem !important;
min-width: 160px;
order: -1; /* جعل زر الخدمات الإلكترونية أول زر */
}
}
/* تحسين nav-brand لاستيعاب الزر */
.nav-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
/* زر الخدمات الإلكترونية في الهيدر */
.header-electronic-services-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.2rem;
background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
color: white;
text-decoration: none;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(26, 76, 61, 0.2);
}
.header-electronic-services-btn:hover {
background: linear-gradient(135deg, var(--secondary-green), var(--primary-green));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26, 76, 61, 0.3);
color: white;
}
.header-electronic-services-btn i {
font-size: 0.9rem;
}
/* تحسينات للموبايل */
@media (max-width: 768px) {
.nav-brand {
align-items: center;
gap: 0.5rem;
}
.header-electronic-services-btn {
font-size: 0.8rem;
padding: 0.5rem 1rem;
}
}
/* تحسين nav-brand لاستيعاب زر الخدمات الإلكترونية */
.nav-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
/* Financial CTA Section in About Page */
.financial-statements-section {
background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
padding: 4rem 0;
margin-top: 4rem;
}
.financial-cta {
text-align: center;
color: white;
}
.financial-cta-content h3 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: white;
font-family: 'Cairo', sans-serif;
}
.financial-cta-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.financial-btn {
padding: 1rem 2rem !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
background: var(--accent-gold) !important;
color: var(--primary-green) !important;
border: none !important;
border-radius: 30px !important;
transition: all 0.3s ease !important;
}
.financial-btn:hover {
background: #ffd700 !important;
transform: translateY(-3px) !important;
box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4) !important;
color: var(--primary-green) !important;
}
/* Responsive for Financial CTA */
@media (max-width: 768px) {
.financial-cta-content h3 {
font-size: 2rem;
}
.financial-cta-content p {
font-size: 1rem;
}
.financial-statements-section {
padding: 3rem 0;
}
}
/* ===== EXECUTIVE MANAGEMENT POPUP ===== */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.popup-overlay.active {
opacity: 1;
visibility: visible;
}
.popup-content {
background: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--shadow-heavy);
max-width: 90vw;
max-height: 90vh;
width: 800px;
overflow: hidden;
transform: scale(0.8);
transition: transform 0.3s ease;
position: relative;
}
.popup-overlay.active .popup-content {
transform: scale(1);
}
.popup-header {
background: var(--gradient-primary);
color: var(--white);
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 3px solid var(--accent-gold);
}
.popup-header h2 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.close-popup {
background: none;
border: none;
color: var(--white);
font-size: 1.8rem;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: var(--transition-fast);
}
.close-popup:hover {
background: rgba(255, 255, 255, 0.2);
transform: rotate(90deg);
}
.executive-cards-container {
padding: 2rem;
max-height: 70vh;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
}
.executive-card {
background: var(--light-gray);
border: 2px solid var(--primary-green);
border-radius: var(--border-radius);
padding: 1.5rem;
text-align: center;
transition: var(--transition-fast);
position: relative;
overflow: hidden;
}
.executive-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
border-color: var(--accent-gold);
}
.executive-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-gold);
}
.executive-position {
font-size: 0.95rem;
font-weight: 600;
color: var(--primary-green);
margin-bottom: 0.8rem;
line-height: 1.4;
min-height: 2.8rem;
display: flex;
align-items: center;
justify-content: center;
}
.executive-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--dark-gray);
margin-bottom: 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
min-height: 1.5rem;
}
/* Custom Scrollbar for Popup */
.executive-cards-container::-webkit-scrollbar {
width: 8px;
}
.executive-cards-container::-webkit-scrollbar-track {
background: var(--light-gray);
border-radius: 10px;
}
.executive-cards-container::-webkit-scrollbar-thumb {
background: var(--primary-green);
border-radius: 10px;
}
.executive-cards-container::-webkit-scrollbar-thumb:hover {
background: var(--secondary-green);
}
/* Responsive Design for Popup */
@media (max-width: 768px) {
.popup-content {
width: 95vw;
max-height: 85vh;
}
.popup-header {
padding: 1rem 1.5rem;
}
.popup-header h2 {
font-size: 1.3rem;
}
.executive-cards-container {
padding: 1.5rem;
grid-template-columns: 1fr;
gap: 1rem;
}
.executive-card {
padding: 1.2rem;
}
.executive-position {
font-size: 0.9rem;
}
.executive-name {
font-size: 1rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
}
@media (max-width: 480px) {
.popup-content {
width: 98vw;
max-height: 80vh;
}
.popup-header {
padding: 1rem;
}
.popup-header h2 {
font-size: 1.2rem;
}
.executive-cards-container {
padding: 1rem;
max-height: 60vh;
}
.executive-card {
padding: 1rem;
}
.executive-position {
font-size: 0.85rem;
min-height: 2.5rem;
}
.executive-name {
font-size: 0.95rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
}
/* ===== SHARIA BOARD POPUP ===== */
.sharia-info-container {
padding: 2rem;
max-height: 70vh;
overflow-y: auto;
}
.sharia-description {
background: var(--light-gray);
padding: 1.5rem;
border-radius: var(--border-radius);
margin-bottom: 2rem;
border-left: 4px solid var(--accent-gold);
}
.sharia-description p {
margin: 0 0 1rem 0;
line-height: 1.8;
color: var(--dark-gray);
text-align: justify;
}
.sharia-description p:last-child {
margin-bottom: 0;
}
.sharia-members-title {
text-align: center;
margin-bottom: 1.5rem;
}
.sharia-members-title h3 {
color: var(--primary-green);
font-size: 1.3rem;
margin: 0;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--accent-gold);
display: inline-block;
}
.sharia-cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.sharia-card {
background: var(--white);
border: 2px solid var(--primary-green);
border-radius: var(--border-radius);
padding: 1.5rem;
text-align: center;
transition: var(--transition-fast);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-light);
}
.sharia-card.chairman {
border-color: var(--accent-gold);
background: linear-gradient(135deg, var(--accent-gold) 0%, var(--light-gold) 100%);
color: var(--white);
}
.sharia-card.chairman .sharia-position {
color: var(--white);
font-weight: 700;
}
.sharia-card.chairman .sharia-name {
color: var(--white);
}
.sharia-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
border-color: var(--accent-gold);
}
.sharia-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-gold);
}
.sharia-card.chairman::before {
background: linear-gradient(135deg, var(--white) 0%, rgba(255,255,255,0.8) 100%);
}
.sharia-position {
font-size: 0.95rem;
font-weight: 600;
color: var(--primary-green);
margin-bottom: 0.8rem;
line-height: 1.4;
min-height: 2.8rem;
display: flex;
align-items: center;
justify-content: center;
}
.sharia-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--dark-gray);
margin-bottom: 0;
line-height: 1.3;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
min-height: 1.5rem;
}
/* Responsive Design for Sharia Popup */
@media (max-width: 768px) {
.sharia-info-container {
padding: 1.5rem;
max-height: 75vh;
}
.sharia-description {
padding: 1.2rem;
margin-bottom: 1.5rem;
}
.sharia-cards-container {
grid-template-columns: 1fr;
gap: 1rem;
}
.sharia-card {
padding: 1.2rem;
}
.sharia-position {
font-size: 0.9rem;
min-height: 2.5rem;
}
.sharia-name {
font-size: 1rem;
}
.sharia-members-title h3 {
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.sharia-info-container {
padding: 1rem;
max-height: 70vh;
}
.sharia-description {
padding: 1rem;
}
.sharia-card {
padding: 1rem;
}
.sharia-position {
font-size: 0.85rem;
min-height: 2.2rem;
}
.sharia-name {
font-size: 0.95rem;
}
}
/* ===== GOVERNANCE POPUP STYLES ===== */
.governance-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
}
.governance-modal-content {
background-color: var(--white);
margin: 2% auto;
padding: 20px;
border-radius: var(--border-radius);
width: 90%;
max-width: 900px;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: var(--shadow-heavy);
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.governance-modal-header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid var(--primary-green);
}
.governance-modal-header h2 {
color: var(--primary-green);
font-size: 2rem;
margin: 0;
font-weight: 700;
}
.governance-close {
color: var(--medium-gray);
float: right;
font-size: 28px;
font-weight: bold;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
transition: var(--transition-fast);
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--light-gray);
}
.governance-close:hover,
.governance-close:focus {
color: var(--danger);
background-color: #ffe6e6;
transform: scale(1.1);
}
.governance-images-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 20px;
}
.governance-image-item {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-medium);
transition: var(--transition-fast);
cursor: pointer;
background-color: var(--light-gray);
}
.governance-image-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-heavy);
}
.governance-image-item img {
width: 100%;
height: 200px;
object-fit: cover;
transition: var(--transition-fast);
}
.governance-image-item:hover img {
transform: scale(1.05);
}
.governance-image-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(26, 76, 61, 0.9));
color: var(--white);
padding: 15px;
text-align: center;
font-weight: 600;
font-size: 0.9rem;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.governance-modal-content {
margin: 5% auto;
width: 95%;
padding: 15px;
max-height: 85vh;
}
.governance-modal-header h2 {
font-size: 1.5rem;
}
.governance-images-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.governance-image-item img {
height: 180px;
}
.governance-close {
font-size: 24px;
width: 30px;
height: 30px;
}
}
@media (max-width: 480px) {
.governance-modal-content {
margin: 3% auto;
width: 98%;
padding: 10px;
border-radius: 8px;
}
.governance-modal-header {
margin-bottom: 20px;
}
.governance-modal-header h2 {
font-size: 1.3rem;
}
.governance-image-item img {
height: 150px;
}
.governance-image-title {
padding: 10px;
font-size: 0.8rem;
}
}
/* ===== GOVERNANCE PDF STYLES ===== */
.governance-pdf-container {
width: 100%;
max-height: 600px;
text-align: center;
}
.governance-pdf-container embed {
border: 2px solid var(--primary-green);
border-radius: var(--border-radius);
box-shadow: var(--shadow-medium);
}
.governance-pdf-fallback {
background-color: var(--light-gray);
border: 2px dashed var(--primary-green);
border-radius: var(--border-radius);
padding: 30px;
text-align: center;
margin-top: 10px;
}
.governance-pdf-fallback p {
color: var(--dark-gray);
font-size: 1.1rem;
margin-bottom: 20px;
}
.pdf-download-btn {
display: inline-block;
background: var(--gradient-primary);
color: var(--white);
padding: 12px 25px;
border-radius: var(--button-radius);
text-decoration: none;
font-weight: 600;
transition: var(--transition-fast);
box-shadow: var(--shadow-medium);
}
.pdf-download-btn:hover {
background: var(--gradient-gold);
transform: translateY(-2px);
box-shadow: var(--shadow-heavy);
text-decoration: none;
color: var(--white);
}
/* ===== Report Modal Styles ===== */
.report-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
animation: fadeIn 0.3s ease;
}
.report-modal-content {
background-color: var(--white);
margin: 2% auto;
border-radius: var(--border-radius);
width: 95%;
max-width: 1200px;
height: 90vh;
position: relative;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
}
.report-modal-header {
background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
color: white;
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.report-modal-header h2 {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
}
.report-modal-header .close-btn {
position: static;
color: white;
font-size: 2rem;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.1);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.report-modal-header .close-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: rotate(90deg);
}
.report-modal-body {
flex: 1;
position: relative;
background: #f8f9fa;
}
.iframe-container {
position: relative;
width: 100%;
height: 100%;
background: white;
}
.iframe-container iframe {
width: 100%;
height: 100%;
border: none;
display: none;
}
.iframe-container embed {
width: 100%;
height: 100%;
border: none;
display: none;
}
.iframe-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
z-index: 10;
}
.loading-spinner {
text-align: center;
color: var(--primary-green);
}
.loading-spinner i {
font-size: 3rem;
margin-bottom: 1rem;
color: var(--accent-gold);
}
.loading-spinner p {
font-size: 1.2rem;
font-weight: 600;
margin: 0;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Report Modal Responsive */
@media (max-width: 768px) {
.report-modal-content {
width: 98%;
height: 95vh;
margin: 1% auto;
}
.report-modal-header {
padding: 1rem 1.5rem;
}
.report-modal-header h2 {
font-size: 1.3rem;
}
.report-modal-header .close-btn {
width: 35px;
height: 35px;
font-size: 1.5rem;
}
.loading-spinner i {
font-size: 2.5rem;
}
.loading-spinner p {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.report-modal-content {
width: 100%;
height: 100vh;
margin: 0;
border-radius: 0;
}
.report-modal-header {
padding: 1rem;
border-radius: 0;
}
.report-modal-header h2 {
font-size: 1.1rem;
}
.report-modal-header .close-btn {
width: 30px;
height: 30px;
font-size: 1.3rem;
}
.loading-spinner i {
font-size: 2rem;
}
.loading-spinner p {
font-size: 0.9rem;
}
}
/* ===== MOBILE UNIFIED DROPDOWN STYLES ===== */
/* Hide desktop navigation on mobile */
@media (max-width: 820px) {
.desktop-nav,
.desktop-services {
display: none !important;
}
/* Show mobile dropdown */
.mobile-unified-dropdown {
display: block !important;
position: relative;
}
}
/* Hide mobile dropdown on desktop */
@media (min-width: 821px) {
.mobile-unified-dropdown {
display: none !important;
}
}
/* Mobile Dropdown Button */
.mobile-dropdown-toggle {
background: linear-gradient(135deg, var(--accent-gold) 0%, var(--dark-gold) 100%);
color: var(--primary-green);
border: 2px solid var(--accent-gold);
border-radius: 25px;
padding: 0.8rem 1.5rem;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.8rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
font-family: var(--heading-font);
position: relative;
overflow: hidden;
}
.mobile-dropdown-toggle::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
}
.mobile-dropdown-toggle:hover::before {
left: 100%;
}
.mobile-dropdown-toggle:hover {
background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
color: var(--accent-gold);
border-color: var(--primary-green);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26, 76, 61, 0.4);
}
.mobile-dropdown-toggle i.fas.fa-bars {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.mobile-dropdown-arrow {
font-size: 0.8rem;
transition: transform 0.3s ease;
}
.mobile-unified-dropdown.active .mobile-dropdown-toggle {
background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
color: var(--accent-gold);
border-color: var(--primary-green);
box-shadow: 0 6px 20px rgba(26, 76, 61, 0.4);
}
.mobile-unified-dropdown.active .mobile-dropdown-toggle i.fas.fa-bars {
transform: rotate(90deg);
}
/* Mobile Dropdown Menu */
.mobile-dropdown-menu {
position: fixed;
top: 100%;
left: 0;
right: 0;
background: linear-gradient(180deg, var(--primary-green) 0%, var(--secondary-green) 100%);
z-index: 9999;
display: none;
opacity: 0;
transform: translateY(-20px);
transition: all 0.3s ease;
border-top: 3px solid var(--accent-gold);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
max-height: calc(100vh - 100px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) transparent;
}
.mobile-dropdown-menu::-webkit-scrollbar {
width: 6px;
}
.mobile-dropdown-menu::-webkit-scrollbar-track {
background: transparent;
}
.mobile-dropdown-menu::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: 3px;
}
.mobile-dropdown-menu.show {
opacity: 1;
transform: translateY(0);
}
/* Mobile Menu Sections */
.mobile-menu-section {
padding: 1.5rem 2rem;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.mobile-menu-section:last-child {
border-bottom: none;
padding-bottom: 2rem;
}
.mobile-section-title {
color: var(--accent-gold);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--accent-gold);
text-align: center;
position: relative;
font-family: var(--heading-font);
}
.mobile-section-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background: var(--light-gold);
}
/* Mobile Dropdown Links */
.mobile-dropdown-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
color: var(--white);
text-decoration: none;
transition: all 0.3s ease;
border-radius: 12px;
margin-bottom: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.mobile-dropdown-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
transition: left 0.5s ease;
}
.mobile-dropdown-link:hover::before {
left: 100%;
}
.mobile-dropdown-link:hover {
background: linear-gradient(135deg, var(--accent-gold) 0%, var(--dark-gold) 100%);
color: var(--primary-green);
transform: translateX(10px);
border-color: var(--light-gold);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.mobile-dropdown-link:active {
transform: translateX(5px) scale(0.98);
}
.mobile-dropdown-link i {
font-size: 1.2rem;
color: var(--accent-gold);
transition: all 0.3s ease;
width: 24px;
text-align: center;
}
.mobile-dropdown-link:hover i {
color: var(--primary-green);
transform: scale(1.2);
}
.mobile-dropdown-link span {
font-weight: 600;
font-size: 1rem;
font-family: var(--body-font);
}
/* Special styling for language options */
.mobile-dropdown-link.language-option {
background: rgba(212, 175, 55, 0.1);
border-color: rgba(212, 175, 55, 0.3);
}
.mobile-dropdown-link.language-option:hover {
background: var(--light-gold);
color: var(--dark-green);
}
.mobile-dropdown-link.language-option i {
color: var(--light-gold);
}
.mobile-dropdown-link.language-option:hover i {
color: var(--dark-green);
}
/* Responsive adjustments for small mobile screens */
@media (max-width: 480px) {
.mobile-dropdown-toggle {
padding: 0.7rem 1.2rem;
font-size: 0.9rem;
}
.mobile-menu-section {
padding: 1.2rem 1.5rem;
}
.mobile-section-title {
font-size: 1rem;
}
.mobile-dropdown-link {
padding: 0.8rem 1.2rem;
font-size: 0.9rem;
}
.mobile-dropdown-link i {
font-size: 1rem;
}
.mobile-dropdown-link span {
font-size: 0.9rem;
}
}
/* Animation keyframes for mobile menu */
@keyframes mobileMenuSlideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Prevent text selection on menu items */
.mobile-dropdown-menu {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Smooth scrolling for menu */
.mobile-dropdown-menu {
scroll-behavior: smooth;
}
/* ===== ENHANCED RESPONSIVE NAVIGATION - تحسينات إضافية للنافجيشن ===== */
/* تحسين للشاشات المتوسطة جداً (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
.header .container {
padding: 0 1rem !important;
gap: 1rem;
flex-wrap: nowrap;
overflow-x: visible;
}
.nav-brand .logo {
height: clamp(45px, 6vw, 60px) !important;
width: auto;
flex-shrink: 0;
}
.navbar {
padding: 0.8rem 0;
min-height: 70px;
}
.nav-menu {
gap: 0.8rem;
flex-shrink: 0;
overflow-x: visible;
}
.nav-link {
font-size: clamp(0.8rem, 2vw, 1rem) !important;
padding: 0.5rem 0.8rem !important;
white-space: nowrap;
flex-shrink: 0;
min-width: fit-content;
}
.dropdown-toggle {
padding: 0.5rem 0.8rem !important;
font-size: clamp(0.75rem, 1.8vw, 0.9rem) !important;
white-space: nowrap;
min-width: fit-content;
}
.language-toggle {
width: clamp(35px, 4vw, 40px) !important;
height: clamp(35px, 4vw, 40px) !important;
flex-shrink: 0;
}
.right-side-services {
gap: 0.5rem;
margin-left: 1rem;
flex-shrink: 0;
min-width: fit-content;
}
/* ضمان عدم تكسير العناصر */
.nav-links {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
overflow-x: visible;
}
}
/* تحسين للشاشات الصغيرة (480px - 768px) */
@media (max-width: 768px) and (min-width: 480px) {
.header .container {
padding: 0 0.8rem !important;
gap: 0.5rem;
}
.nav-brand .logo {
height: clamp(40px, 8vw, 50px) !important;
}
.navbar {
padding: 0.6rem 0;
min-height: 60px;
}
.nav-menu {
gap: 0.4rem;
}
.nav-link {
font-size: clamp(0.75rem, 3vw, 0.9rem) !important;
padding: 0.4rem 0.6rem !important;
}
.dropdown-toggle {
padding: 0.4rem 0.6rem !important;
font-size: clamp(0.7rem, 2.8vw, 0.85rem) !important;
}
.language-toggle {
width: clamp(32px, 6vw, 38px) !important;
height: clamp(32px, 6vw, 38px) !important;
}
.right-side-services {
gap: 0.4rem;
margin-left: 0.8rem;
}
}
/* تحسين للشاشات الصغيرة جداً (أقل من 480px) */
@media (max-width: 480px) {
.header .container {
padding: 0 0.5rem !important;
gap: 0.3rem;
}
.nav-brand .logo {
height: clamp(35px, 10vw, 45px) !important;
}
.navbar {
padding: 0.5rem 0;
min-height: 55px;
}
.nav-menu {
gap: 0.3rem;
}
.nav-link {
font-size: clamp(0.7rem, 4vw, 0.85rem) !important;
padding: 0.3rem 0.5rem !important;
}
.dropdown-toggle {
padding: 0.3rem 0.5rem !important;
font-size: clamp(0.65rem, 3.5vw, 0.8rem) !important;
}
.language-toggle {
width: clamp(30px, 8vw, 35px) !important;
height: clamp(30px, 8vw, 35px) !important;
}
.right-side-services {
gap: 0.3rem;
margin-left: 0.5rem;
}
/* تحسين hamburger للشاشات الصغيرة */
.hamburger {
padding: 0.8rem;
margin-left: 0.5rem;
}
.hamburger span {
width: 24px;
height: 2.5px;
}
}
/* تحسين للشاشات الصغيرة جداً (أقل من 380px) */
@media (max-width: 380px) {
.header .container {
padding: 0 0.3rem !important;
gap: 0.2rem;
}
.nav-brand .logo {
height: clamp(30px, 12vw, 40px) !important;
}
.navbar {
padding: 0.4rem 0;
min-height: 50px;
}
.nav-menu {
gap: 0.2rem;
}
.nav-link {
font-size: clamp(0.65rem, 5vw, 0.8rem) !important;
padding: 0.25rem 0.4rem !important;
}
.dropdown-toggle {
padding: 0.25rem 0.4rem !important;
font-size: clamp(0.6rem, 4.5vw, 0.75rem) !important;
}
.language-toggle {
width: clamp(28px, 10vw, 32px) !important;
height: clamp(28px, 10vw, 32px) !important;
}
.right-side-services {
gap: 0.2rem;
margin-left: 0.3rem;
}
.hamburger {
padding: 0.6rem;
margin-left: 0.3rem;
}
.hamburger span {
width: 22px;
height: 2px;
}
}
/* تحسين للشاشات الكبيرة (أكبر من 1400px) */
@media (min-width: 1400px) {
.header .container {
padding: 0 3rem !important;
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
}
.nav-menu {
gap: 2rem;
}
.nav-link {
font-size: 1.1rem !important;
padding: 0.8rem 1.2rem !important;
}
.dropdown-toggle {
font-size: 1rem !important;
padding: 0.8rem 1.2rem !important;
}
.language-toggle {
width: 45px !important;
height: 45px !important;
}
.right-side-services {
margin-left: 2.5rem;
gap: 1rem;
}
}
/* تحسين للشاشات الكبيرة جداً (أكبر من 1600px) */
@media (min-width: 1600px) {
.header .container {
padding: 0 4rem !important;
gap: 3rem;
max-width: 1600px;
}
.nav-menu {
gap: 2.5rem;
}
.nav-link {
font-size: 1.2rem !important;
padding: 1rem 1.5rem !important;
}
.dropdown-toggle {
font-size: 1.1rem !important;
padding: 1rem 1.5rem !important;
}
.language-toggle {
width: 50px !important;
height: 50px !important;
}
.right-side-services {
margin-left: 3rem;
gap: 1.2rem;
}
}
/* ضمان عدم تكسير النافجيشن في جميع الأحجام */
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
overflow-x: visible;
min-height: 70px;
}
.nav-links {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
overflow-x: visible;
}
.nav-menu {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
overflow-x: visible;
flex-wrap: nowrap;
}
.right-side-services {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
overflow-x: visible;
}
/* تحسين للأجهزة اللوحية في الوضع الأفقي */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
.header .container {
padding: 0 0.8rem !important;
gap: 0.8rem;
}
.nav-brand .logo {
height: clamp(40px, 5vw, 50px) !important;
}
.navbar {
padding: 0.6rem 0;
min-height: 65px;
}
.nav-menu {
gap: 0.6rem;
}
.nav-link {
font-size: clamp(0.8rem, 2.5vw, 0.95rem) !important;
padding: 0.4rem 0.7rem !important;
}
.dropdown-toggle {
font-size: clamp(0.75rem, 2.3vw, 0.9rem) !important;
padding: 0.4rem 0.7rem !important;
}
.language-toggle {
width: clamp(35px, 4.5vw, 40px) !important;
height: clamp(35px, 4.5vw, 40px) !important;
}
.right-side-services {
gap: 0.6rem;
margin-left: 1.2rem;
}
}
/* تحسين للأجهزة اللوحية في الوضع العمودي */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
.header .container {
padding: 0 1.2rem !important;
gap: 1rem;
}
.nav-brand .logo {
height: clamp(45px, 6vw, 55px) !important;
}
.navbar {
padding: 0.8rem 0;
min-height: 75px;
}
.nav-menu {
gap: 0.8rem;
}
.nav-link {
font-size: clamp(0.85rem, 2.8vw, 1rem) !important;
padding: 0.5rem 0.8rem !important;
}
.dropdown-toggle {
font-size: clamp(0.8rem, 2.6vw, 0.95rem) !important;
padding: 0.5rem 0.8rem !important;
}
.language-toggle {
width: clamp(38px, 5vw, 42px) !important;
height: clamp(38px, 5vw, 42px) !important;
}
.right-side-services {
gap: 0.8rem;
margin-left: 1.5rem;
}
}
/* ===== AML POLICY ENHANCED DESIGN ===== */
.aml-content {
padding: 2rem 0;
}
/* Introduction Card */
.policy-intro-card {
background: var(--policy-card-bg);
border: var(--policy-card-border);
border-radius: var(--border-radius);
box-shadow: var(--policy-card-shadow);
padding: 2rem;
margin-bottom: 3rem;
display: flex;
align-items: center;
gap: 2rem;
transition: var(--transition-normal);
position: relative;
overflow: hidden;
}
.policy-intro-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
border-radius: 50%;
transform: translate(30px, -30px);
}
.policy-intro-card:hover {
box-shadow: var(--policy-card-hover-shadow);
transform: translateY(-5px);
}
.intro-icon {
flex-shrink: 0;
width: 80px;
height: 80px;
background: var(--policy-icon-bg);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-gold);
}
.intro-icon i {
font-size: 2rem;
color: var(--white);
}
.intro-content h3 {
color: var(--primary-green);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
position: relative;
}
.intro-content h3::after {
content: '';
position: absolute;
bottom: -5px;
right: 0;
width: 50px;
height: 3px;
background: var(--accent-gold);
border-radius: 2px;
}
.intro-content p {
color: var(--text-dark);
line-height: 1.8;
font-size: 1.1rem;
margin: 0;
}
/* Policy Cards Grid */
.policy-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
/* Policy Card */
.policy-card {
background: var(--policy-card-bg);
border: var(--policy-card-border);
border-radius: var(--border-radius);
box-shadow: var(--policy-card-shadow);
overflow: hidden;
transition: var(--transition-normal);
position: relative;
}
.policy-card:hover {
box-shadow: var(--policy-card-hover-shadow);
transform: translateY(-8px);
}
.policy-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 4px;
background: var(--policy-icon-bg);
}
.policy-card-header {
padding: 1.5rem;
background: linear-gradient(135deg, rgba(26, 76, 61, 0.05) 0%, rgba(45, 110, 90, 0.05) 100%);
border-bottom: 1px solid rgba(26, 76, 61, 0.1);
display: flex;
align-items: center;
gap: 1rem;
}
.policy-card-icon {
width: 50px;
height: 50px;
background: var(--policy-icon-bg);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-medium);
}
.policy-card-icon i {
font-size: 1.5rem;
color: var(--white);
}
.policy-card-header h3 {
color: var(--primary-green);
font-size: 1.2rem;
font-weight: 600;
margin: 0;
flex: 1;
}
.policy-card-body {
padding: 1.5rem;
}
/* Policy Points */
.policy-points {
display: flex;
flex-direction: column;
gap: 1rem;
}
.policy-point {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: var(--policy-point-bg);
border-radius: 8px;
transition: var(--transition-fast);
}
.policy-point:hover {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
transform: translateX(-5px);
}
.policy-point i {
color: var(--success);
font-size: 1.2rem;
margin-top: 2px;
flex-shrink: 0;
}
.policy-point span {
color: var(--text-dark);
font-size: 1rem;
line-height: 1.6;
font-weight: 500;
}
/* Compliance Sources */
.compliance-sources {
margin: 1.5rem 0;
}
.compliance-sources h4 {
color: var(--primary-green);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.compliance-sources h4::before {
content: '';
width: 20px;
height: 2px;
background: var(--accent-gold);
}
.sources-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.source-item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem;
background: var(--policy-point-bg);
border-radius: 8px;
transition: var(--transition-fast);
}
.source-item:hover {
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
transform: translateY(-2px);
}
.source-item i {
color: var(--primary-green);
font-size: 1.1rem;
width: 20px;
text-align: center;
}
.source-item span {
color: var(--text-dark);
font-size: 0.95rem;
font-weight: 500;
}
/* Automation Info */
.automation-info {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
border-radius: 8px;
margin-top: 1rem;
border-right: 4px solid var(--success);
}
.automation-info i {
color: var(--success);
font-size: 1.5rem;
}
.automation-info p {
color: var(--text-dark);
font-size: 1rem;
margin: 0;
font-weight: 500;
}
/* Risk Points */
.risk-points {
display: flex;
flex-direction: column;
gap: 1rem;
}
.risk-point {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: var(--policy-point-bg);
border-radius: 8px;
transition: var(--transition-fast);
}
.risk-point:hover {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
transform: translateX(-5px);
}
.risk-point i {
color: var(--warning);
font-size: 1.2rem;
margin-top: 2px;
flex-shrink: 0;
}
.risk-point span {
color: var(--text-dark);
font-size: 1rem;
line-height: 1.6;
font-weight: 500;
}
/* Commitment Card */
.commitment-card {
background: var(--commitment-card-bg) !important;
border: 2px solid var(--accent-gold) !important;
}
.commitment-card::before {
background: linear-gradient(135deg, var(--accent-gold) 0%, var(--dark-gold) 100%) !important;
}
.commitment-content {
text-align: center;
position: relative;
}
.commitment-content i {
color: var(--accent-gold);
font-size: 2rem;
margin-bottom: 1rem;
opacity: 0.7;
}
.commitment-content p {
color: var(--text-dark);
font-size: 1.1rem;
line-height: 1.8;
font-style: italic;
margin: 0;
position: relative;
}
.commitment-content p::before,
.commitment-content p::after {
content: '"';
color: var(--accent-gold);
font-size: 2rem;
font-weight: bold;
position: absolute;
top: -10px;
}
.commitment-content p::before {
right: -20px;
}
.commitment-content p::after {
left: -20px;
top: auto;
bottom: -10px;
}
/* Contact Section */
.aml-contact-section {
margin-top: 3rem;
}
.contact-card {
background: var(--contact-card-bg);
border-radius: var(--border-radius);
box-shadow: var(--shadow-heavy);
overflow: hidden;
color: var(--white);
}
.contact-header {
padding: 2rem;
text-align: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.contact-header i {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--light-gold);
}
.contact-header h3 {
font-size: 1.8rem;
font-weight: 700;
margin: 0;
}
.contact-content {
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.contact-method {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: var(--transition-fast);
}
.contact-method:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.contact-method i {
font-size: 1.5rem;
color: var(--light-gold);
width: 30px;
text-align: center;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.contact-label {
font-size: 0.9rem;
opacity: 0.9;
font-weight: 500;
}
.contact-link {
color: var(--light-gold);
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
transition: var(--transition-fast);
}
.contact-link:hover {
color: var(--white);
text-decoration: underline;
}
/* Responsive Design */
@media (max-width: 768px) {
.policy-intro-card {
flex-direction: column;
text-align: center;
gap: 1.5rem;
padding: 1.5rem;
}
.intro-icon {
width: 60px;
height: 60px;
}
.intro-icon i {
font-size: 1.5rem;
}
.policy-cards-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.policy-card-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.sources-grid {
grid-template-columns: 1fr;
}
.contact-content {
grid-template-columns: 1fr;
gap: 1rem;
}
.policy-point,
.risk-point {
padding: 0.8rem;
}
.policy-point i,
.risk-point i {
font-size: 1rem;
}
.policy-point span,
.risk-point span {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.policy-intro-card {
padding: 1rem;
}
.intro-content h3 {
font-size: 1.3rem;
}
.intro-content p {
font-size: 1rem;
}
.policy-card-header {
padding: 1rem;
}
.policy-card-body {
padding: 1rem;
}
.contact-header {
padding: 1.5rem;
}
.contact-content {
padding: 1.5rem;
}
}