/* ================================================================= */
/* 1. Global Variables & Reset (إعدادات أساسية) */
/* ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    --deep-blue-bg: #0a192f;
    --primary-blue-bg: #112240;
    --light-blue-bg: #233554;
    --orange-accent: #ffae00;
    --box-color: #dcb695; /* لون الكرتون الطبيعي الراقي */
    --box-shadow-color: #8d6e53;
    
    --text-main: #ccd6f6;
    --text-heading: #ffffff;
    --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Arial', Bold;
    background-color: var(--deep-blue-bg);
    color: var(--text-main);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--deep-blue-bg); }
::-webkit-scrollbar-thumb { background: var(--light-blue-bg); border-radius: 5px; border: 2px solid var(--deep-blue-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--orange-accent); }

/* Common Classes */
.container { width: 90%; max-width: 1200px; margin: 0 auto; position: relative; }
.section-padding { padding: 80px 0; border-bottom: 2px dashed rgba(255, 174, 0, 0.2); }
.bg-light { background-color: var(--primary-blue-bg); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); }
.text-center { text-align: center; }

h1, h2, h3, h4 { color: var(--text-heading); font-weight: 700; margin-bottom: 1rem; }
h1 { font-size: 2.8rem; } h2 { font-size: 2.2rem; } h3 { font-size: 1.5rem; }
p { margin-bottom: 1.5rem; color: var(--text-main); opacity: 0.9; }
a { text-decoration: none; transition: var(--transition); color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Buttons */
.btn { display: inline-block; padding: 12px 35px; border-radius: 50px; font-weight: 700; text-align: center; cursor: pointer; border: none; transition: var(--transition); margin: 5px; }
.btn-primary { background-color: var(--orange-accent); color: var(--deep-blue-bg); position: relative; overflow: hidden; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255, 174, 0, 0.3); background-color: #ffc107; color: #000; }
.btn-outline, .btn-secondary { background: transparent; border: 2px solid var(--orange-accent); color: var(--orange-accent); }
.btn-outline:hover, .btn-secondary:hover { background: var(--orange-accent); color: var(--deep-blue-bg); transform: translateY(-3px); }


/* ================================================================= */
/* 2. Header & Nav */
/* ================================================================= */
header {
    position: fixed; top: 0; left: 0; width: 100%;
    background-color: rgba(10, 25, 47, 0.95);
    backdrop-filter: blur(10px); z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}
header.scrolled { background-color: var(--deep-blue-bg); box-shadow: 0 4px 20px rgba(0,0,0,0.4); }

header nav { display: flex; justify-content: space-between; align-items: center; min-height: 80px; }

.nav-left-group { display: flex; align-items: center; gap: 40px; }
.logo img { max-height: 45px; filter: brightness(0) invert(1); }

.nav-links { display: flex; gap: 25px; }
.nav-links a { font-weight: 500; color: #fff; padding: 5px 0; position: relative; font-size: 1.05rem; }
.nav-links a:hover, .nav-links a.active { color: var(--orange-accent); }
.nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -3px; right: 0; background: var(--orange-accent); transition: 0.3s; }
.nav-links a:hover::after { width: 100%; }

.nav-right-group { display: flex; align-items: center; gap: 15px; }
.lang-switcher a { padding: 6px 18px; border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; color: #fff; font-size: 0.9rem; transition: 0.3s; }
.lang-switcher a:hover { border-color: var(--orange-accent); color: var(--orange-accent); }
.mobile-menu-toggle { display: none; color: #fff; font-size: 1.8rem; background: none; border: none; cursor: pointer; }


/* ================================================================= */
/* 3. Mobile Sidebar */
/* ================================================================= */
.mobile-sidebar-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 2000;
    opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(5px);
}
.mobile-sidebar-overlay.active { opacity: 1; visibility: visible; }

.mobile-nav-content.sidebar {
    position: fixed; top: 0; right: -300px;
    width: 280px; height: 100vh;
    background: var(--primary-blue-bg);
    z-index: 2001; padding: 30px;
    transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: -5px 0 30px rgba(0,0,0,0.5);
    display: flex !important; flex-direction: column;
}
.mobile-nav-content.sidebar.open { right: 0; }

.sidebar .close-sidebar { background: none; border: none; color: #fff; font-size: 1.8rem; align-self: flex-end; margin-bottom: 30px; cursor: pointer; }
.sidebar .sidebar-logo img { max-width: 140px; margin-bottom: 40px; filter: brightness(0) invert(1); }
.sidebar .nav-links { flex-direction: column; width: 100%; text-align: right; gap: 0; }
.sidebar .nav-links a { display: block; padding: 15px 0; font-size: 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.05); }


/* ================================================================= */
/* 4. Interactive Hero (الهيرو) */
/* ================================================================= */
.hero-interactive-master {
    position: relative; width: 100%; height: 100vh;
    overflow: hidden; background-color: var(--deep-blue-bg);
}

.intro-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; display: flex; align-items: center; justify-content: center;
    transition: opacity 1.5s ease-in-out, visibility 1.5s;
}
.intro-layer.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }

.bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.video-overlay-gradient {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 25, 47, 0.5); z-index: 0;
}

.intro-content { position: relative; z-index: 2; text-align: center; padding: 0 20px; }
.intro-content h1 { font-size: 3.5rem; margin-bottom: 20px; text-shadow: 0 10px 30px rgba(0,0,0,0.5); }

.btn-skip {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3);
    color: #fff; padding: 10px 25px; border-radius: 30px;
    cursor: pointer; margin-top: 30px; backdrop-filter: blur(5px); transition: 0.3s;
}
.btn-skip:hover { background: var(--orange-accent); border-color: var(--orange-accent); color: #000; }

.sound-control-btn {
    position: absolute; top: 120px; left: 30px; z-index: 20;
    width: 45px; height: 45px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3);
    color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
}
.sound-control-btn:hover { background: var(--orange-accent); color: #000; }

/* طبقة المشهد (الشاحنة) */
.scene-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5;
    background: radial-gradient(circle at center, #1b3a5f 0%, var(--deep-blue-bg) 80%);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.95); transition: 2s ease;
}
.scene-layer.active { opacity: 1; transform: scale(1); }

.van-container { position: relative; width: 100%; max-width: 1400px; display: flex; justify-content: center; }
.van-img { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6)); }


/* ================================================================= */
/* 🔧 5. منطقة الكراتين (النسخة الاحترافية - Smart Cargo Grid) */
/* ================================================================= */

.cargo-area {
    position: absolute;
    /* المكان المثالي داخل عمق العربية */
    top: 33%; 
    left: 50%;
    transform: translateX(-50%) perspective(800px) rotateX(8deg); /* هنا السر: زاوية ميلان 3D */
    
    /* أبعاد متجاوبة تماماً تعتمد على عرض الشاشة */
    width: 32vw; 
    max-width: 450px; /* حد أقصى عشان الشاشات الكبيرة */
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px; /* مسافة رفيعة جداً بين الوحدات */
    
    background: rgba(0, 0, 0, 0.3); /* ظل خفيف تحت الرصة كلها */
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* ظل العمق */
    
    z-index: 10;
}

/* ================================================================= */
/* 🔧 تصميم وحدة الشحن (الكرتونة المودرن) */
/* ================================================================= */

.cargo-unit {
    position: relative;
    width: 100%;
    /* ارتفاع نسبي للحفاظ على شكل الصندوق */
    aspect-ratio: 4/3; 
    
    /* تصميم الكرتونة */
    background: linear-gradient(145deg, #e6cbb2, #d1bfa8); /* تدرج لوني بيج واقعي */
    border: 1px solid rgba(255,255,255,0.2);
    border-bottom: 6px solid #bba084; /* سمك الكرتونة من تحت */
    border-radius: 6px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    
    box-shadow: inset 0 0 15px rgba(0,0,0,0.05); /* ظل داخلي للعمق */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* تجهيز الأنيميشن */
    opacity: 0;
    transform: translateZ(0) scale(0.8);
}

/* محتوى الكرتونة (أيقونة ونص) */
.unit-face {
    text-align: center;
    color: #000; /* بني غامق */
}

.unit-icon {
    display: block;
    font-size: 1.8vw; /* حجم متجاوب */
    margin-bottom: 8px;
    opacity: 0.7;
    transition: 0.3s;
}

.unit-text {
    display: block;
    font-weight: 1000;
    font-size: 1.5vw; /* حجم متجاوب */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ================================================================= */
/* 🔧 الهوفر (التفاعل الراقي) */
/* ================================================================= */

.cargo-unit:hover {
    z-index: 20;
    /* الكرتونة تطلع لفوق وتنور */
    transform: translateY(-10px) scale(1.05) !important;
    background: linear-gradient(145deg, #fff0e0, #e6cbb2);
    border-bottom-color: var(--orange-accent); /* الخط السفلي ينور برتقالي */
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.cargo-unit:hover .unit-icon {
    color: var(--orange-accent);
    transform: scale(1.2);
    opacity: 1;
}

.cargo-unit:hover .unit-text {
    color: #222;
}

/* ================================================================= */
/* 🔧 حركة الدخول (Animation JS) */
/* ================================================================= */
.cargo-unit.load-in {
    opacity: 1;
    transform: translateZ(0) scale(1);
}


/* ================================================================= */
/* 6. Sections Rest of CSS */
/* ================================================================= */
.split-section { display: flex; align-items: center; gap: 60px; }
.split-content, .split-image { flex: 1; }
.split-image img { border-radius: 12px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,0.1); }
.split-content .btn { margin-top: 20px; }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

.service-card, .employee-card {
    background-color: var(--light-blue-bg); border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px; padding: 40px 30px; text-align: center;
    box-shadow: var(--shadow); transition: var(--transition);
    border-left: 3px solid var(--orange-accent); position: relative;
}
.service-card::after, .employee-card::after {
    content: ''; position: absolute; top: 10px; right: 10px;
    width: 6px; height: 6px; background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}
.service-card:hover, .employee-card:hover { transform: translateY(-10px); background-color: #2d4566; border-color: var(--orange-accent); }

.service-icon { width: 70px; height: 70px; margin: 0 auto 20px; background: rgba(255, 255, 255, 0.05); color: var(--orange-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.service-card h4, .employee-card h4 { color: #fff; margin-bottom: 15px; font-size: 1.3rem; }
.service-card p, .employee-card p { color: #b0c4de; font-size: 1rem; }

.stats-section { background: var(--primary-blue-bg); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 50px; }
.stat-item h3 { font-size: 3rem; color: var(--orange-accent); margin-bottom: 5px; }

/* Partners */
.trusted-by-section { padding: 50px 0; overflow: hidden; background: transparent; position: relative; z-index: 1; }
.trusted-by-title { color: #8892b0; font-size: 1.1rem; text-transform: uppercase; margin-bottom: 40px; }
.bg-light::before, .trusted-by-section::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?q=80&w=2070&auto=format&fit=crop');
    background-size: cover; background-position: center; background-attachment: fixed;
    opacity: 0.04; mix-blend-mode: overlay; z-index: -1; pointer-events: none;
}
.logos-slider { width: 100%; overflow: hidden; position: relative; padding: 20px 0; }
.logos-slide-track { display: flex; gap: 40px; width: max-content; animation: scrollLogos 30s linear infinite; }
.partner-logo-item { width: 180px; height: 100px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); backdrop-filter: blur(4px); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 15px; transition: var(--transition); }
.partner-logo-item img { max-width: 90%; max-height: 70%; object-fit: contain; filter: none; opacity: 0.8; transition: var(--transition); }
.partner-logo-item:hover { border-color: var(--orange-accent); background: rgba(255, 255, 255, 0.08); transform: translateY(-5px); }
.partner-logo-item:hover img { opacity: 1; transform: scale(1.1); }
@keyframes scrollLogos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
html[dir="rtl"] .logos-slide-track { animation-direction: reverse; }

/* Footer */
footer { background: linear-gradient(to top, #060f1e, #0e1c33) !important; color: #a8b2d1; padding: 70px 0 20px; margin-top: 0; border-top: 4px solid var(--orange-accent) !important; position: relative; overflow: hidden; }
footer::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.03; filter: invert(1); pointer-events: none; }
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 50px; margin-bottom: 40px; position: relative; z-index: 2; }
.footer-links h4, .footer-contact h4 { color: #fff; margin-bottom: 25px; font-size: 1.2rem; position: relative; padding-bottom: 10px; }
.footer-links h4::after, .footer-contact h4::after { content: ''; position: absolute; bottom: 0; right: 0; width: 40px; height: 3px; background: var(--orange-accent); }
.footer-links ul li { margin-bottom: 10px; }
.footer-links ul li a { color: #a8b2d1; transition: 0.3s; position: relative; padding-right: 0; }
.footer-links ul li a:hover { color: var(--orange-accent); padding-right: 10px; }
.copyright { text-align: center; font-size: 0.9rem; color: #576075; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 25px; position: relative; z-index: 2; }
.copyright a { color: var(--orange-accent); }

/* Icons Background */
body::after { content: '\f48b  \f0d1  \f135'; font-family: "Font Awesome 5 Free"; font-weight: 900; position: fixed; top: 50%; left: 50%; font-size: 200px; color: rgba(255, 255, 255, 0.01); transform: translate(-50%, -50%) rotate(-15deg); z-index: -2; pointer-events: none; white-space: pre; }

/* Responsive */
@media (max-width: 992px) {
    .nav-left-group { gap: 20px; }
    .nav-links { gap: 15px; }
    .split-section, .split-section.reverse { flex-direction: column; text-align: center; }
    
    /* تعديل الكراتين للتابلت */
    .cargo-area { width: 45vw; top: 38%; }
    .unit-icon { font-size: 2.5vw; }
    .unit-text { font-size: 1.5vw; }
}

@media (max-width: 768px) {
    .desktop-nav-links { display: none; }
    .mobile-menu-toggle { display: block; }
    .intro-content h1 { font-size: 2.2rem; }
    .hero-interactive-master { height: 100vh; }
    .footer-content { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    .footer-links h4::after, .footer-contact h4::after { right: 50%; transform: translateX(50%); }
    
    /* تعديل الكراتين للموبايل */
    .cargo-area { width: 60vw; top: 40%; transform: translateX(-50%) perspective(600px) rotateX(5deg); }
    .unit-icon { font-size: 4vw; }
    .unit-text { font-size: 2.5vw; }
}

.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Custom Cursor */
.custom-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; }
.cursor-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; position: absolute; transform: translate(-50%, -50%); }
.cursor-outline { width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; position: absolute; transform: translate(-50%, -50%); transition: 0.1s; }
body.cursor-hover .cursor-outline { transform: translate(-50%, -50%) scale(1.5); border-color: var(--orange-accent); }
@media (max-width: 768px) { .custom-cursor { display: none; } }
/* ================================================================= */
/* Body Setup (إخفاء السهم العادي) */
/* ================================================================= */
body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--deep-blue-bg);
    color: var(--text-main);
    font-size: 16px;
    line-height: 1.7;
    direction: rtl;
    overflow-x: hidden;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    
    /* 🔥 إخفاء الماوس العادي تماماً */
    cursor: none !important;
}

/* إخفاء الماوس من على الروابط والأزرار كمان */
a, button, input, textarea, .box-item, .cargo-unit {
    cursor: none !important;
}

/* ================================================================= */
/* ✨ Pro Custom Cursor (الماوس الاحترافي) */
/* ================================================================= */

.custom-cursor {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: difference; /* التريك: بيعكس اللون اللي تحته فبيبقى ظاهر دايماً */
}

/* النقطة الصغيرة اللي في النص */
.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
}

/* الدائرة الكبيرة (بتتحرك بنعومة) */
.cursor-outline {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    position: absolute;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background-color 0.2s; /* نعومة التكبير */
}

/* شكل الماوس لما ييجي على رابط أو زرار */
body.cursor-hover .cursor-dot {
    opacity: 0; /* نخفي النقطة */
}

body.cursor-hover .cursor-outline {
    width: 70px; /* يكبر */
    height: 70px;
    background-color: rgba(255, 255, 255, 0.1); /* لون خفيف */
    border-color: transparent;
}

/* ================================================================= */
/* 📱 Mobile Adjustments (إلغاء الماوس المخصص للموبايل) */
/* ================================================================= */
@media (max-width: 768px) {
    .custom-cursor {
        display: none !important; /* إخفاء الماوس المخصص */
    }
    
    body, a, button, input, textarea, .box-item, .cargo-unit {
        cursor: auto !important; /* استرجاع الماوس العادي للموبايل */
    }
}
/* ================================================================= */
/* تعديل اتجاه السلايدر (عشان يتحرك نفس حركة الانجليزي) */
/* ================================================================= */

/* تعريف الحركة الأساسية */
@keyframes scrollLogos { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

/* هنا التعديل: إجبار العربي إنه يمشي "normal" زي الانجليزي مش "reverse" */
html[dir="rtl"] .logos-slide-track { 
    animation-direction: normal !important; 
}
/* ================================================================= */
/* 💎 تحسين لوجو الفوتر (Team Logo Style) */
/* ================================================================= */

.footer-about img {
    /* 1. الحجم والمكان */
    max-width: 170px; /* حجم متناسق */
    height: auto;
    margin-bottom: 25px; /* مسافة بينه وبين النص اللي تحته */
    display: inline-block; /* عشان يقبل التحريك */

    /* 2. الفلاتر الأساسية */
    /* يحول الصورة لأبيض ناصع + ظل أسود ناعم يعطي بروز 3D */
    filter: brightness(0) invert(1) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
    
    /* 3. الشفافية والنعومة */
    opacity: 0.85; /* خافت سنة بسيطة للشياكة */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* حركة مطاطية ناعمة */
}

/* ================================================================= */
/* ✨ تأثير الهوفر (لما تقف عليه) */
/* ================================================================= */
.footer-about img:hover {
    /* 1. الإضاءة */
    /* يرجع سطوعه كامل + وهج برتقالي (لون البراند) */
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 174, 0, 0.5));
    
    /* 2. الحركة */
    /* يكبر سنة ويطلع لفوق كأنه بيطوف */
    transform: scale(1.05) translateY(-5px) rotate(2deg);
    
    cursor: pointer;
}
/* ================================================================= */
/* 🇬🇧 English Mode Fixes (تضبيط اتجاهات النسخة الإنجليزية) */
/* ================================================================= */

/* 1. ضبط اتجاه النصوص والقوائم لليسار */
html[lang="en"] {
    direction: ltr; /* الصفحة كلها من الشمال لليمين */
}

html[lang="en"] body {
    text-align: left; /* النصوص تبدأ من اليسار */
}
/* ================================================================= */
/* 🇬🇧 English Mode Fixes (إصلاحات النسخة الإنجليزية) */
/* ================================================================= */

/* 1. إجبار الاتجاه اليسار عند اختيار الانجليزية */
html[lang="en"] body {
    direction: ltr;
    text-align: left;
}

/* 2. عكس الناف بار (اللوجو يروح شمال والروابط يمين) */
html[lang="en"] .nav-links a::after {
    right: auto; 
    left: 0; /* الخط تحت الرابط يبدأ من الشمال */
}

/* 3. عكس المسافات في القوائم والأيقونات */
html[lang="en"] .features-list li i,
html[lang="en"] .footer-contact i {
    margin-left: 0;
    margin-right: 15px; /* المسافة تكون يمين الأيقونة */
}

/* 4. عكس اتجاه قسم "لماذا نحن" والخدمات */
html[lang="en"] .split-section {
    flex-direction: row; /* يرجع طبيعي (صورة يمين نص شمال) */
}

/* لو فيه سكشن معمول له reverse في العربي، نعكسه تاني في الانجليزي */
html[lang="en"] .split-section.reverse {
    flex-direction: row-reverse;
}

/* 5. تضبيط القائمة الجانبية (Sidebar) للموبايل */
/* في العربي بتطلع من اليمين، في الانجليزي خليها تطلع من الشمال أو تفضل يمين بس المحتوى يتقلب */
html[lang="en"] .mobile-nav-content.sidebar {
    text-align: left; /* محتوى القائمة محاذي لليسار */
}
html[lang="en"] .sidebar .nav-links {
    text-align: left;
    align-items: flex-start;
}

/* 6. تضبيط كروت الخدمات والفوتر */
html[lang="en"] .service-card,
html[lang="en"] .footer-content,
html[lang="en"] .copyright {
    text-align: left;
}

/* 7. عكس حدود الكروت (Border) */
html[lang="en"] .service-card, 
html[lang="en"] .employee-card {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 3px solid var(--orange-accent); /* الشريط الملون يجي يمين */
}

/* 8. عكس أيقونات الأسهم في الفوتر */
html[lang="en"] .footer-links ul li a::before {
    content: '→'; /* سهم باصص يمين */
    right: auto;
    left: -15px; /* يجي عالشمال */
}
html[lang="en"] .footer-links ul li a:hover::before {
    left: -5px;
}
html[lang="en"] .footer-links ul li a {
    padding-right: 0;
    padding-left: 0;
}
html[lang="en"] .footer-links ul li a:hover {
    padding-right: 0;
    padding-left: 10px;
}
/* ================================================================= */
/* توحيد اتجاه السلايدر في العربي والإنجليزي */
/* ================================================================= */

/* إجبار العربي إنه يمشي في الاتجاه الطبيعي (زي الانجليزي) */
html[dir="rtl"] .logos-slide-track {
    animation-direction: normal !important; 
}
/* ================================================================= */
/* إجبار السلايدر على الحركة كأنه إنجليزي تماماً */
/* ================================================================= */

/* 1. بنقول للسلايدر: خلي اتجاهك يسار ليمين حتى لو الموقع عربي */
/* ده هيخلي الإحداثيات والاتجاهات زي الانجليزي بالظبط */
.logos-slider {
    direction: ltr !important; 
}

/* 2. بنعرف الحركة إنها تمشي ناحية الشمال */
@keyframes scrollLogos { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

/* 3. بنطبق الحركة وبنلغي أي عكس كان بيحصل في العربي */
.logos-slide-track {
    animation: scrollLogos 30s linear infinite !important;
    animation-direction: normal !important; /* ممنوع العكس */
}

/* زيادة تأكيد: حتى لو الـ HTML واخد اتجاه RTL، السلايدر ده ملوش دعوة */
html[dir="rtl"] .logos-slide-track {
    animation-direction: normal !important;
}
/* ================================================================= */
/* 🎨 About Page Styles (تنسيقات صفحة من نحن) */
/* ================================================================= */

/* 1. Page Header (عنوان الصفحة العلوي) */
.page-header {
    background-color: var(--primary-blue-bg);
    padding: 160px 0 80px; /* مسافة من فوق عشان الناف بار */
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 2px dashed rgba(255, 174, 0, 0.2);
}

/* خلفية زخرفية خفيفة */
.page-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(circle at 20% 50%, rgba(255, 174, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.page-header h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    color: var(--text-heading);
}

.page-header p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    color: #a8b2d1;
}

/* 2. Values Grid (شبكة القيم) */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.value-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 35px 25px;
    border-radius: 12px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--orange-accent);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.value-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
}

.value-card:hover::before {
    transform: scaleX(1);
}

.value-icon {
    font-size: 2.5rem;
    color: var(--orange-accent);
    margin-bottom: 20px;
    display: inline-block;
}

.value-card h4 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #fff;
}

/* 3. Static Partners Grid (شبكة الشركاء الثابتة) */
.partners-grid-static {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 30px;
    margin-top: 40px;
    justify-items: center;
}

.partner-card {
    width: 100%;
    height: 120px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: var(--transition);
    cursor: pointer;
}

.partner-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%); /* رمادي في العادي */
    opacity: 0.6;
    transition: var(--transition);
}

.partner-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--orange-accent);
    transform: translateY(-5px);
}

.partner-card:hover img {
    filter: grayscale(0%); /* ملون عند الهوفر */
    opacity: 1;
    transform: scale(1.1);
}

/* تعديل ريسبونسيف */
@media (max-width: 768px) {
    .page-header { padding: 120px 0 60px; }
    .page-header h1 { font-size: 2.2rem; }
}
/* ================================================================= */
/* 🌊 Dual Flow Partners (شريط الشركاء المزدوج) */
/* ================================================================= */

.dual-scroll-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* مسافة بين الصفين */
    padding: 20px 0;
    position: relative;
}

/* التراك اللي شايل الكروت */
.scroll-track {
    display: flex;
    gap: 20px;
    width: max-content;
}

/* حركة لليسار */
.move-left {
    animation: scrollLeft 40s linear infinite;
}

/* حركة لليمين */
.move-right {
    animation: scrollRight 40s linear infinite;
}

/* ================================================================= */
/* 🃏 تصميم الكارت المودرن (الحل السحري للخلفيات) */
/* ================================================================= */

.partner-card-modern {
    width: 160px;
    height: 90px;
    /* خلفية بيضاء عشان تظهر اللوجوهات الغامقة */
    background: #ffffff; 
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* ظل خفيف */
    
    /* الحالة الطبيعية: باهت وأبيض وأسود */
    opacity: 0.6; 
    filter: grayscale(100%);
    transition: all 0.4s ease;
}

.partner-card-modern img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ================================================================= */
/* ✨ الهوفر (إحياء الألوان) */
/* ================================================================= */

.partner-card-modern:hover {
    opacity: 1; /* وضوح كامل */
    filter: grayscale(0%); /* الألوان الطبيعية تظهر */
    transform: scale(1.1); /* تكبير */
    box-shadow: 0 10px 25px rgba(255, 174, 0, 0.3); /* ظل برتقالي */
    z-index: 10;
}

/* عند الوقوف على الشريط، نوقف الحركة عشان الزائر يركز */
.dual-scroll-container:hover .scroll-track {
    animation-play-state: paused;
}

/* ================================================================= */
/* ⚙️ تعريف الأنيميشن */
/* ================================================================= */

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* تضبيط الاتجاه للعربي (عشان ميعكسش الحركة) */
html[dir="rtl"] .move-left { animation-name: scrollRight; } /* في العربي اليسار يبقى يمين */
html[dir="rtl"] .move-right { animation-name: scrollLeft; }
/* ================================================================= */
/* 🛠️ إصلاح الحركة في العربي (إجبار الاتجاه اليساري) */
/* ================================================================= */

/* 1. بنقول للحاوية الكبيرة: "انتِ إنجليزي يا بنتي!" */
.dual-scroll-container {
    direction: ltr !important; 
}

/* 2. بنعرف الحركات باتجاهات ثابتة (ملناش دعوة بلغة الموقع) */
@keyframes scrollLeftFixed {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scrollRightFixed {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* 3. بنطبق الحركة على الكلاسات ونمنع أي تدخل خارجي */
.move-left {
    animation: scrollLeftFixed 40s linear infinite !important;
}

.move-right {
    animation: scrollRightFixed 40s linear infinite !important;
}

/* 4. كود احتياطي: لو المتصفح حاول يعكس، نرجعه تاني */
html[dir="rtl"] .move-left {
    animation-direction: normal !important;
}
html[dir="rtl"] .move-right {
    animation-direction: normal !important;
}
/* ================================================================= */
/* 🚚 Services Page Styles */
/* ================================================================= */

.service-icon-large {
    width: 80px; height: 80px;
    background: rgba(255, 174, 0, 0.1);
    color: var(--orange-accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; margin-bottom: 25px;
}

/* Fleet Grid (شبكة أنواع السيارات) */
.fleet-grid {
    display: flex; gap: 15px; margin-top: 30px; flex-wrap: wrap;
}

.fleet-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 15px 20px;
    display: flex; align-items: center; gap: 10px;
    transition: 0.3s;
    flex: 1; min-width: 140px;
}

.fleet-card i {
    color: var(--orange-accent); font-size: 1.5rem;
}

.fleet-card span {
    font-weight: 700; color: #fff; font-size: 0.95rem;
}

.fleet-card:hover {
    background: var(--orange-accent); border-color: var(--orange-accent); transform: translateY(-3px);
}
.fleet-card:hover i, .fleet-card:hover span { color: #000; }

/* جعل كروت الخدمات في الرئيسية قابلة للنقر */
a.service-card {
    display: block; text-decoration: none; cursor: pointer;
}
/* ================================================================= */
/* 👥 Team Page Styles (تنسيقات صفحة فريق العمل) */
/* ================================================================= */

/* فواصل بين الأقسام */
.team-department-wrapper {
    margin-bottom: 60px;
}

.department-title {
    font-size: 1.8rem;
    color: var(--orange-accent);
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    display: inline-block;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
}

/* تصميم كارت الموظف */
.employee-card {
    background: var(--light-blue-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
    transition: var(--transition);
    text-align: center;
    position: relative;
    padding: 0; /* لغينا البادينج عشان الصورة تاخد العرض */
}

/* منطقة الصورة */
.photo-wrapper {
    width: 100%;
    height: 280px; /* ارتفاع ثابت */
    overflow: hidden;
    position: relative;
    background-color: #1a2c45;
}

.photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.5s ease;
    filter: grayscale(20%); /* رمادي خفيف للشياكة */
}

/* تأثير الهوفر على الصورة */
.employee-card:hover .photo-wrapper img {
    transform: scale(1.1);
    filter: grayscale(0%); /* يرجع ملون */
}

/* تدرج لوني فوق الصورة من تحت عشان الكلام يبان لو حبيت تحطه فوق الصورة */
.photo-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(17, 34, 64, 1), transparent);
    opacity: 0.8;
}

/* معلومات الموظف */
.info-content {
    padding: 20px;
    position: relative;
    z-index: 2;
    background: var(--light-blue-bg);
    margin-top: -5px; /* عشان يغطي طرف الصورة */
}

.employee-card h4 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.job-title {
    color: var(--orange-accent);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 15px;
    opacity: 0.9;
}

/* روابط السوشيال ميديا */
.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
}

.social-links a {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a8b2d1;
    font-size: 0.9rem;
    transition: 0.3s;
}

.social-links a:hover {
    background: var(--orange-accent);
    color: #000;
    transform: translateY(-3px);
}

/* تأثير الهوفر على الكارت بالكامل */
.employee-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 174, 0, 0.3);
}

/* فاصل خفي */
.section-divider {
    height: 30px;
    width: 100%;
}
/* ================================================================= */
/* 👔 Careers Page Styles (صفحة الوظائف) */
/* ================================================================= */

.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.job-card {
    background: var(--light-blue-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
    transition: var(--transition);
    position: relative;
    border-right: 3px solid var(--orange-accent); /* خط جانبي ملون */
}

/* تضبيط اتجاه الخط الملون للغة الإنجليزية */
html[lang="en"] .job-card {
    border-right: none;
    border-left: 3px solid var(--orange-accent);
}

.job-card:hover {
    transform: translateY(-5px);
    border-color: var(--orange-accent);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.job-card h3 {
    font-size: 1.4rem;
    color: #fff;
    margin: 0;
}

.job-type {
    background: rgba(255, 174, 0, 0.1);
    color: var(--orange-accent);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.job-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    color: #a8b2d1;
    font-size: 0.9rem;
}

.job-meta i {
    color: var(--orange-accent);
    margin-left: 5px;
}
html[lang="en"] .job-meta i { margin-left: 0; margin-right: 5px; }

.job-desc {
    color: #ccc;
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.job-card .btn {
    width: 100%;
}

/* Modal Styles (النافذة المنبثقة) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

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

.modal-content {
    background: var(--primary-blue-bg);
    padding: 40px;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: scale(0.8);
    transition: 0.3s;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.close-modal {
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: 0.3s;
}
html[lang="en"] .close-modal { left: auto; right: 20px; }

.close-modal:hover { color: var(--orange-accent); }

.modal-content h3 {
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
}

.modal-content p { text-align: center; }

/* Form Styles inside Modal */
.form-group { margin-bottom: 15px; }

.form-group input, .form-group textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    transition: 0.3s;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: var(--orange-accent);
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}
/* ================================================================= */
/* 📞 Contact Page Styles (صفحة تواصل معنا) */
/* ================================================================= */

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* الفورم أعرض شوية من المعلومات */
    gap: 50px;
    align-items: start;
}

/* 1. تصميم الفورم */
.contact-form-wrapper {
    background: var(--light-blue-bg);
    padding: 40px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.contact-form-wrapper h3 { color: var(--orange-accent); margin-bottom: 10px; }
.contact-form-wrapper p { margin-bottom: 30px; font-size: 0.95rem; }

.contact-form-wrapper .form-group {
    margin-bottom: 20px;
    position: relative;
}

/* أيقونات داخل الحقول */
.contact-form-wrapper .form-group label {
    position: absolute;
    top: 50%; right: 15px;
    transform: translateY(-50%);
    color: var(--orange-accent);
    pointer-events: none;
    transition: 0.3s;
}
html[lang="en"] .contact-form-wrapper .form-group label { right: auto; left: 15px; }

/* حقل الرسالة ملوش أيقونة وسطية */
.contact-form-wrapper textarea { height: 150px; resize: none; }

.contact-form-wrapper input, 
.contact-form-wrapper textarea {
    width: 100%;
    padding: 12px 45px 12px 15px; /* مسافة للأيقونة */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    transition: 0.3s;
}
html[lang="en"] .contact-form-wrapper input { padding: 12px 15px 12px 45px; }

.contact-form-wrapper input:focus, 
.contact-form-wrapper textarea:focus {
    border-color: var(--orange-accent);
    background: rgba(255, 255, 255, 0.05);
    outline: none;
}

/* 2. تصميم كارت المعلومات */
.contact-info-card {
    background: linear-gradient(145deg, var(--light-blue-bg), rgba(17, 34, 64, 0.5));
    padding: 40px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-info-card h3 {
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 20px;
}

.icon-box {
    width: 50px; height: 50px;
    background: rgba(255, 174, 0, 0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--orange-accent);
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: 0.3s;
}

.info-item:hover .icon-box {
    background: var(--orange-accent);
    color: #000;
    transform: scale(1.1);
}

.info-text h4 {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 5px;
}

.info-text p, .info-text a {
    color: #a8b2d1;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}
.info-text a:hover { color: var(--orange-accent); }

/* 3. الخريطة */
.map-section {
    width: 100%;
    height: 400px;
    margin-top: 50px;
    filter: grayscale(100%) invert(10%); /* خريطة غامقة لتناسب الثيم */
    border-top: 1px solid var(--orange-accent);
    transition: 0.5s;
}

.map-section:hover {
    filter: grayscale(0%) invert(0%); /* ترجع ملونة لما تقف عليها */
}

.map-section iframe {
    width: 100%; height: 100%; border: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-info-card { order: -1; } /* نخلي المعلومات فوق في الموبايل */
}