:root {
    /* الخلفيات: درجة وسط (بني شوكولاتة داكن ودافئ) تحافظ على الفخامة وتبرز الذهبي */
    --bg-main: #1C110C;       /* الخلفية الأساسية للموقع */
    --bg-card: #261812;       /* خلفية الكروت (أفتح سِنة بسيطة لتمييزها عن الخلفية) */
    
    /* ألوان اللوجو */
    --brand-green: #A4C639;   /* الزيتوني المشع (لون النخيل) - بديل الذهبي */
    --brand-maroon: #5D2A2C;  /* العنابي (لون التراث) - للحدود والخلفيات */
    
    /* تأثيرات التوهج */
    --glow-green: 0 0 20px rgba(164, 198, 57, 0.4);
    --border-subtle: rgba(93, 42, 44, 0.5); /* حدود عنابية خفيفة */

    /* النصوص */
    --text-white: #FFFFFF;
    --text-gray: #B0A1A1;     /* رمادي دافئ */

    --font-main: 'Tajawal', sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    background-color: var(--bg-main);
    color: var(--text-white);
    direction: rtl;
    line-height: 1.7;
    overflow-x: hidden;
}

ul { list-style: none; }
a { text-decoration: none; color: inherit; transition: 0.4s ease; }

.container {
    width: 88%;
    max-width: 1250px;
    margin: 0 auto;
}

/* ==================== 2. الهيدر (مثل الصور) ==================== */
.luxury-header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 0;
    z-index: 1000;
    background: rgba(18, 8, 8, 0.9); /* خلفية داكنة شفافة */
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    height: 55px;
    width: auto;
}

.desktop-nav ul {
    display: flex;
    gap: 35px;
}

.nav-link {
    color: var(--text-white);
    font-size: 1.05rem;
    font-weight: 500;
    position: relative;
    padding-bottom: 5px;
}

/* تأثير الخط الأخضر المشع تحت الروابط */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    right: 0;
    background-color: var(--brand-green);
    box-shadow: var(--glow-green);
    transition: 0.4s;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--brand-green);
}

/* الزر الأخضر (مثل الصور) */
.btn-gold-shine {
    background-color: var(--brand-green);
    color: #120808; /* نص غامق على خلفية فاتحة */
    padding: 10px 30px;
    border-radius: 4px; /* حواف حادة قليلاً مثل الصور */
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(164, 198, 57, 0.2);
}

.btn-gold-shine:hover {
    background-color: #ffffff; /* يتحول للأبيض عند الهوفر */
    color: var(--brand-green);
    transform: translateY(-2px);
    box-shadow: 0 0 20px var(--brand-green);
}

.hamburger-menu {
    display: none; 
    color: var(--brand-green);
    font-size: 1.8rem;
    cursor: pointer;
}

/* ==================== 3. الواجهة الرئيسية (Hero) ==================== */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    /* تأكد من وجود صورة خلفية غامقة */
    background: url('images/hero-bg.jpg') center/cover no-repeat;
}

/* طبقة تعتيم بنية دافئة */
.hero-bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(0deg, var(--bg-main) 10%, rgba(26, 15, 15, 0.85) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 50px;
}

.hero-tagline {
    color: var(--brand-green);
    font-size: 1.1rem;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.hero-title {
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: 25px;
    font-weight: 800;
}

/* تدرج لوني للنص الرئيسي (أبيض -> زيتوني) */
.text-gradient-gold {
    background: linear-gradient(135deg, #ffffff 30%, var(--brand-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--text-gray);
    max-width: 750px;
    margin: 0 auto 40px;
    font-weight: 300;
}

/* زر "اكتشف المزيد" المفرغ */
.btn-transparent {
    background: transparent;
    border: 2px solid var(--brand-green);
    color: var(--brand-green);
    padding: 12px 45px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 0 10px rgba(164, 198, 57, 0.1);
}

.btn-transparent:hover {
    background: var(--brand-green);
    color: #000;
    box-shadow: var(--glow-green);
}

/* مؤشر الماوس */
.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-gray);
    font-size: 0.9rem;
}

.mouse-icon {
    width: 26px; height: 42px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    position: relative;
}

.wheel {
    width: 4px; height: 6px;
    background: var(--brand-green);
    border-radius: 2px;
    position: absolute; top: 6px; left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
    0% { top: 6px; opacity: 1; }
    100% { top: 25px; opacity: 0; }
}

/* ==================== 4. قسم من نحن (ستايل الكروت المفرغة) ==================== */
.section-padding { padding: 120px 0; }

.grid-2-cols {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* مساحة أكبر للنص */
    gap: 80px;
    align-items: start;
}

.section-subtitle {
    color: var(--brand-green);
    font-size: 1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-subtitle::after {
    content: ''; width: 40px; height: 2px; background: var(--brand-green);
}

.section-title {
    font-size: 2.8rem;
    margin-bottom: 30px;
}

.lead-text {
    font-size: 1.15rem;
    color: #ddd;
    margin-bottom: 25px;
}

.body-text {
    color: var(--text-gray);
    margin-bottom: 40px;
    text-align: justify;
}

/* الأرقام (مثل الصور: كبيرة وبلون مميز) */
.stats-minimal {
    display: flex;
    gap: 60px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 30px;
}

.stat-num {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--brand-green);
    line-height: 1;
    margin-bottom: 5px;
}

.stat-desc {
    color: #fff;
    font-size: 0.9rem;
}

.divider-vertical {
    width: 1px;
    background: var(--border-subtle);
}

/* صورة مع إطار حدودي */
.image-wrapper {
    position: relative;
    padding: 20px;
    border: 1px solid var(--border-subtle); /* الإطار الخارجي الرفيع */
    border-radius: 8px;
}

.image-wrapper img {
    width: 100%;
    border-radius: 4px;
    display: block;
    filter: brightness(0.9);
}

/* كارت عائم فوق الصورة */
.glass-badge {
    position: absolute;
    bottom: -20px; right: -20px;
    background: var(--bg-card);
    padding: 15px 30px;
    border: 1px solid var(--brand-maroon);
    display: flex; align-items: center; gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.glass-badge i { color: var(--brand-green); font-size: 1.5rem; }

/* ==================== 5. الكروت (الرؤية والرسالة) ==================== */
/* الستايل هنا مطابق للصور: خلفية داكنة + حدود عنابية + أيقونة كبيرة */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    padding-bottom: 80px;
}

.glass-card {
    background: var(--bg-card);
    padding: 50px 30px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle); /* الحدود العنابية الخفيفة */
    text-align: center;
    transition: 0.4s;
    position: relative;
    overflow: hidden;
}

/* الأيقونة في الكارد */
.icon-header {
    font-size: 3rem;
    color: var(--brand-green); /* الأيقونة بلون النخيل */
    margin-bottom: 25px;
    background: rgba(164, 198, 57, 0.05); /* دائرة خفيفة جداً حول الأيقونة */
    width: 90px;
    height: 90px;
    line-height: 90px;
    border-radius: 50%;
    margin: 0 auto 25px;
    border: 1px solid rgba(164, 198, 57, 0.2);
}

.glass-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #fff;
}

.glass-card p {
    color: var(--text-gray);
    font-size: 0.95rem;
}

/* عند الهوفر (الإبداع) */
.glass-card:hover {
    border-color: var(--brand-green); /* يتحول الإطار للأخضر */
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.glass-card:hover .icon-header {
    background: var(--brand-green);
    color: #000;
    box-shadow: var(--glow-green);
}

/* ==================== 6. المشاريع ==================== */
.section-header-center { text-align: center; margin-bottom: 70px; }
.gold-separator { width: 60px; height: 3px; background: var(--brand-green); margin: 20px auto; }

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.project-box {
    background: var(--bg-card);
    padding: 40px 25px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid transparent; /* مخفي في البداية */
    border-bottom: 3px solid var(--brand-maroon); /* خط سفلي عنابي */
    transition: 0.3s;
}

.project-box:hover {
    background: #221515;
    border-bottom-color: var(--brand-green); /* يتحول للأخضر عند الهوفر */
}

.p-icon { font-size: 2.2rem; color: #fff; margin-bottom: 20px; transition: 0.3s; }
.project-box:hover .p-icon { color: var(--brand-green); transform: scale(1.1); }

.project-box h4 { font-size: 1.2rem; margin-bottom: 10px; }
.project-box p { font-size: 0.9rem; color: var(--text-gray); }

/* ==================== 7. مركز داعم ==================== */
.daem-section { padding: 80px 0; }
.daem-banner {
    background: radial-gradient(circle at right, #251414 0%, #120808 100%);
    padding: 60px;
    border-radius: 8px;
    border: 1px solid var(--brand-maroon);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.badge-gold {
    background: rgba(164, 198, 57, 0.15);
    color: var(--brand-green);
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 20px;
    display: inline-block;
    border: 1px solid rgba(164, 198, 57, 0.3);
}

.link-with-arrow {
    color: #fff; margin-top: 25px; display: inline-flex; align-items: center; gap: 10px; font-weight: bold;
}
.link-with-arrow:hover { color: #8c8989; gap: 15px; }

.daem-visual { opacity: 0.05; transform: rotate(-10deg); font-size: 10rem; color: #fff; }

/* ==================== 8. الفوتر ==================== */
.main-footer {
    background: #0a0404; /* أسود كحلي جداً */
    padding: 70px 0 30px;
    border-top: 1px solid var(--border-subtle);
}

.footer-top {
    display: flex; justify-content: space-between; margin-bottom: 50px; flex-wrap: wrap; gap: 30px;
}

.c-item { margin-bottom: 15px; color: var(--text-gray); display: flex; align-items: center; gap: 12px; }
.c-item i { color: var(--brand-green); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 25px;
    display: flex; justify-content: space-between; color: #666; font-size: 0.9rem;
}

.social-links a { color: #fff; margin-left: 20px; font-size: 1.1rem; }
.social-links a:hover { color: var(--brand-green); }

/* ==================== Responsive ==================== */
.mobile-nav-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(18, 8, 8, 0.98);
    z-index: 2000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.4s;
}
.mobile-nav-overlay.active { opacity: 1; visibility: visible; }
.mobile-links { text-align: center; }
.mobile-links li { margin: 25px 0; font-size: 1.4rem; }
.close-btn { position: absolute; top: 30px; right: 30px; font-size: 2rem; color: var(--brand-green); cursor: pointer; }

@media (max-width: 768px) {
    .desktop-nav, .header-action { display: none; }
    .hamburger-menu { display: block; }
    .grid-2-cols { grid-template-columns: 1fr; gap: 40px; }
    .hero-title { font-size: 2.8rem; }
    .daem-banner { flex-direction: column; text-align: center; padding: 40px; }
    .image-wrapper { margin-top: 30px; }
    .glass-badge { bottom: -15px; right: 50%; transform: translateX(50%); width: 80%; justify-content: center; }
}
/* ==================== إضافات قسم الشركاء (جديد) ==================== */

.partners-section {
    padding: 100px 0;
    background-color: var(--bg-main); /* نفس خلفية الموقع الداكنة */
    border-top: 1px solid var(--border-subtle);
}

.partners-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px; /* مسافة بين اللوجوهات */
    margin-top: 50px;
}

.partner-item {
    width: 180px; /* عرض صندوق اللوجو */
    height: 100px;
    background: rgba(255, 255, 255, 0.03); /* خلفية شفافة جداً */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    transition: all 0.4s ease;
}

.partner-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.8); /* اللوجو أبيض وأسود ليتناسب مع الفخامة */
    transition: all 0.4s ease;
    opacity: 0.7;
}

/* التأثير عند مرور الماوس */
.partner-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--brand-green); /* إطار أخضر */
    transform: translateY(-5px); /* يرتفع للأعلى قليلاً */
}

.partner-item:hover img {
    filter: grayscale(0%) brightness(1); /* يعود لألوانه الطبيعية */
    opacity: 1;
}

/* تعديل للموبايل */
@media (max-width: 768px) {
    .partners-wrapper {
        gap: 20px;
    }
    .partner-item {
        width: 140px;
        height: 80px;
    }
}
/* ==================== إضافات: قسم الهوية (الرؤية، الرسالة، القيم) ==================== */
.identity-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--bg-main) 0%, #716a6a 100%);
    position: relative;
}

/* تنسيق شريط الرؤية والرسالة */
.vision-mission-wrapper {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 80px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.vm-box {
    flex: 1;
    padding: 40px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: 0.3s;
}

.vm-box:hover {
    background: rgba(255,255,255,0.02);
}

.vm-icon {
    font-size: 2.5rem;
    color: var(--brand-green);
    min-width: 60px;
}

.vm-content h3 {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 10px;
}

.vm-content p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.6;
}

.vm-divider {
    width: 1px;
    background: var(--border-subtle);
}

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

.value-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(164, 198, 57, 0.1);
    padding: 30px 20px;
    text-align: center;
    border-radius: 8px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: var(--brand-green);
    transform: scaleX(0);
    transition: 0.4s;
    transform-origin: left;
}

.value-card:hover {
    transform: translateY(-10px);
    background: rgba(164, 198, 57, 0.05);
    border-color: var(--brand-green);
}

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

.v-icon {
    font-size: 2rem;
    color: var(--text-white);
    margin-bottom: 15px;
    transition: 0.4s;
}

.value-card:hover .v-icon {
    color: var(--brand-green);
    transform: scale(1.2);
    text-shadow: 0 0 15px var(--brand-green);
}

.value-card h4 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
}

/* استجابة الموبايل للقسم الجديد */
@media (max-width: 768px) {
    .vision-mission-wrapper {
        flex-direction: column;
    }
    .vm-divider {
        width: 100%;
        height: 1px;
    }
    .vm-box {
        padding: 30px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .vm-icon { margin-bottom: 15px; min-width: auto; }
}


/* ==================== إضافات: قسم الشركاء ==================== */
.partners-section {
    padding: 80px 0 100px;
    background-color: var(--bg-main);
    border-top: 1px solid var(--border-subtle);
}

.partners-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 50px;
}

.partner-item {
    width: 170px;
    height: 90px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    transition: all 0.4s ease;
}

.partner-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.7); /* لون مطفي */
    transition: all 0.4s ease;
    opacity: 0.6;
}

.partner-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--brand-green);
    transform: translateY(-5px);
}

.partner-item:hover img {
    filter: grayscale(0%) brightness(1); /* ألوان طبيعية عند الهوفر */
    opacity: 1;
}

@media (max-width: 768px) {
    .partners-wrapper { gap: 15px; }
    .partner-item { width: 130px; height: 70px; }
}
/* ==================== تحديثات الروح والإضاءة (Vibrant & Animated) ==================== */

/* 1. خلفية أكثر إشراقاً وحيوية */
.site-glow-background {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 0%, #2e3b1f 0%, #120808 60%); /* إضاءة خضراء زيتونية من الأعلى */
    z-index: -1;
    animation: bgPulse 10s infinite alternate;
}

@keyframes bgPulse {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* 2. تحسين الهيرو ليكون مشرقاً */
.hero-title {
    text-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.glow-text {
    color: var(--brand-green);
    text-shadow: 0 0 20px rgba(164, 198, 57, 0.4); /* توهج للنص */
}

/* 3. كروت القيم (مضيئة بدلاً من مظلمة) */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.value-card {
    background: rgba(255, 255, 255, 0.05); /* خلفية أفتح قليلاً */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--brand-green); /* خط علوي ملون */
    padding: 40px 20px;
    text-align: center;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* حركة مرنة */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.value-card:hover {
    transform: translateY(-10px) scale(1.02);
    background: linear-gradient(145deg, rgba(164, 198, 57, 0.15), rgba(255, 255, 255, 0.05));
    border-color: var(--brand-green);
    box-shadow: 0 15px 30px rgba(164, 198, 57, 0.15); /* ظل أخضر مشع */
}

.v-icon-bg {
    width: 80px; height: 80px;
    line-height: 80px;
    background: rgba(164, 198, 57, 0.1);
    border-radius: 50%;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: var(--brand-green);
    transition: 0.4s;
}

.value-card:hover .v-icon-bg {
    background: var(--brand-green);
    color: #fff;
    transform: rotateY(360deg); /* دوران الأيقونة */
}

/* 4. قسم "فكرة الشركة" (إطار مضيء للصورة) */
.image-wrapper.glow-border {
    border: 2px solid rgba(164, 198, 57, 0.3);
    box-shadow: 0 0 25px rgba(164, 198, 57, 0.1);
    position: relative;
    overflow: visible;
}

.floating-badge {
    position: absolute;
    bottom: 30px; left: -20px; /* تغيير المكان لليسار */
    background: #fff;
    color: #120808;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    display: flex; align-items: center; gap: 10px;
    animation: floatBadge 3s infinite ease-in-out;
}
.floating-badge i { color: var(--brand-green); }

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 5. شريط الشركاء (أكثر وضوحاً) */
.partners-wrapper {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 40px;
}
.partner-item {
    background: rgba(255,255,255,0.9); /* خلفية بيضاء تقريباً للوجوهات لتكون واضحة */
    border-radius: 8px;
    padding: 10px 20px;
    width: 160px; height: 90px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.4s;
    opacity: 0.8;
}
.partner-item img { filter: none; opacity: 1; max-width: 100%; max-height: 100%; } /* إظهار الألوان الأصلية */
.partner-item:hover {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}


/* ==================== أنيميشن الظهور (Fade Up) ==================== */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* نبض اللوجو */
.pulse-effect {
    animation: logoPulse 3s infinite;
}
@keyframes logoPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
/* ==================== 1. ستارة الترحيب (Preloader Curtain) ==================== */
.loader-curtain {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* يسمح بالنقر بعد الانتهاء */
}

/* الجزئين الأيمن والأيسر للستارة */
.curtain-left, .curtain-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: #120808;
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 1;
}

.curtain-left { left: 0; border-right: 1px solid var(--brand-maroon); }
.curtain-right { right: 0; border-left: 1px solid var(--brand-maroon); }

/* المحتوى في الوسط (اللوجو) */
.loader-content {
    position: relative;
    z-index: 2;
    text-align: center;
    transition: opacity 0.5s ease;
}

.loader-logo {
    width: 100px;
    animation: pulseLogo 2s infinite;
}

.loader-text {
    color: var(--brand-green);
    margin-top: 15px;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.loading-bar {
    width: 150px;
    height: 3px;
    background: rgba(255,255,255,0.1);
    margin: 20px auto;
    border-radius: 3px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    width: 0;
    background: var(--brand-green);
    animation: loadProgress 1.5s ease-in-out forwards;
}

/* عند انتهاء التحميل (الكلاس يضاف بالجافاسكريبت) */
.loader-curtain.loaded .curtain-left { transform: translateX(-100%); }
.loader-curtain.loaded .curtain-right { transform: translateX(100%); }
.loader-curtain.loaded .loader-content { opacity: 0; }

@keyframes loadProgress { 0% { width: 0; } 100% { width: 100%; } }
@keyframes pulseLogo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } }


/* ==================== 2. الزخارف الإسلامية والخلفيات ==================== */
/* نمط الأرابيسك الشفاف */
.islamic-pattern-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* رسم زخرفي بسيط باستخدام CSS gradients */
    background-image: 
        radial-gradient(circle at 50% 50%, transparent 0%, transparent 60%, rgba(164, 198, 57, 0.03) 100%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.01) 0px, rgba(255,255,255,0.01) 2px, transparent 2px, transparent 10px);
    z-index: -1;
    pointer-events: none;
}

/* أهلة ونجوم طافية (Background Floating Elements) */
.floating-crescents {
    position: fixed;
    width: 100%; height: 100%;
    top: 0; left: 0;
    z-index: -1;
    pointer-events: none;
}

.floating-crescents i {
    position: absolute;
    color: var(--brand-green);
    opacity: 0.05; /* شفاف جداً */
    animation: floatIcon 10s infinite ease-in-out;
}

.c1 { top: 20%; left: 10%; font-size: 8rem; animation-duration: 15s; }
.c2 { top: 60%; right: 15%; font-size: 5rem; animation-duration: 12s; }
.c3 { bottom: 10%; left: 30%; font-size: 6rem; animation-duration: 20s; }

@keyframes floatIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(10deg); }
}


/* ==================== 3. الفاصل الزخرفي (The Divider) ==================== */
.royal-divider {
    position: relative;
    top: -5px; /* لسد الفراغات */
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background: var(--bg-card); /* لون القسم السفلي */
}

.royal-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.royal-divider .shape-fill {
    fill: var(--bg-main); /* لون القسم العلوي */
}


/* ==================== 4. تحسينات الفخامة (Luxury Tweaks) ==================== */
/* تحسين قسم الفكرة ليكون مميزاً */
.idea-section {
    background: var(--bg-main); /* لون داكن */
    position: relative;
}

/* إضافة لمعة ذهبية للنصوص */
.text-gradient-gold {
    background: linear-gradient(to right, #A4C639, #fbf5b7, #A4C639);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shineText 5s linear infinite;
}

@keyframes shineText {
    to { background-position: 200% center; }
}

/* زخرفة جانبية في قسم القيم */
.side-pattern-right {
    position: absolute;
    right: 0; top: 0;
    width: 150px; height: 100%;
    background: radial-gradient(circle at right, rgba(164, 198, 57, 0.05), transparent 70%);
    z-index: 0;
}
/* ==================== زخارف قسم القيم (جديد) ==================== */
.identity-section {
    position: relative;
    overflow: hidden; /* لمنع ظهور أشرطة التمرير بسبب الزخارف */
}

.values-decor-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; /* خلف المحتوى النصي */
    pointer-events: none;
}

/* 1. الهلال الكبير */
.big-moon {
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: 15rem; /* حجم ضخم جداً */
    color: var(--brand-green);
    opacity: 0.03; /* شفافية عالية جداً ليكون كالظل */
    transform: rotate(-15deg);
    animation: moonFloat 8s infinite alternate ease-in-out;
}

/* 2. رمز الهلال والنجمة الإسلامي */
.islamic-symbol {
    position: absolute;
    bottom: 10%;
    right: 5%;
    font-size: 8rem;
    color: var(--brand-green);
    opacity: 0.04;
    animation: symbolPulse 6s infinite ease-in-out;
}

/* 3. النجوم الصغيرة المتناثرة */
.tiny-star {
    position: absolute;
    color: #fff;
    opacity: 0.1;
    font-size: 1.5rem;
    animation: twinkle 3s infinite alternate;
}

.s1 { top: 20%; right: 20%; animation-delay: 0s; }
.s2 { top: 70%; left: 15%; animation-delay: 1s; font-size: 1rem; }
.s3 { top: 15%; left: 40%; animation-delay: 2s; }

/* الحركات (Animations) */
@keyframes moonFloat {
    0% { transform: translateY(0) rotate(-15deg); }
    100% { transform: translateY(-20px) rotate(-10deg); }
}

@keyframes symbolPulse {
    0%, 100% { transform: scale(1); opacity: 0.04; }
    50% { transform: scale(1.1); opacity: 0.06; }
}

@keyframes twinkle {
    0% { opacity: 0.1; transform: scale(1); }
    100% { opacity: 0.3; transform: scale(1.2); }
}
/* تعديل الستارة لإزالة الخط البني */
.curtain-left { 
    left: 0; 
    border-right: none; /* تم إلغاء الخط */
}

.curtain-right { 
    right: 0; 
    border-left: none; /* تم إلغاء الخط */
}
/* ==================== ستايل صفحة "من نحن" (About Page) ==================== */

/* 1. هيرو الصفحة الداخلية */
.inner-hero {
    height: 50vh; /* ارتفاع أقل من الرئيسية */
    background: url('images/hero-bg.jpg') center/cover no-repeat; /* نفس صورة الرئيسية أو غيرها */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 50px;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(0deg, #120808 0%, rgba(18, 8, 8, 0.7) 100%);
}

.hero-text-center {
    position: relative;
    z-index: 2;
    padding-top: 60px;
}

.page-title {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(164, 198, 57, 0.3);
}

.breadcrumb {
    color: var(--brand-green);
    font-size: 1.1rem;
    font-weight: 500;
}

/* 2. قسم رأس المال */
.capital-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    background: rgba(255,255,255,0.03);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

.cap-box {
    text-align: center;
}

.cap-box .num {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.cap-box.target .num { color: var(--brand-green); text-shadow: 0 0 15px rgba(164, 198, 57, 0.4); }

.cap-box .lbl { font-size: 0.85rem; color: var(--text-gray); }

.arrow-icon { color: var(--text-gray); font-size: 1.2rem; }

/* 3. الهيكل التنظيمي (Org Chart Tree) */
.org-chart-section {
    background: linear-gradient(180deg, #120808 0%, #1a0f0f 100%);
}

.org-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    position: relative;
}

.org-box {
    background: linear-gradient(145deg, #251414, #1a0f0f);
    border: 1px solid var(--border-subtle);
    padding: 15px 30px;
    border-radius: 8px;
    text-align: center;
    min-width: 200px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: 0.3s;
}

.org-box:hover {
    border-color: var(--brand-green);
    transform: translateY(-5px);
}

.org-box .icon { font-size: 1.5rem; color: var(--brand-green); margin-bottom: 10px; }
.org-box h4 { font-size: 1.1rem; color: #fff; margin: 0; }
.org-box span { font-size: 0.8rem; color: var(--text-gray); }

/* الخطوط الواصلة (Connectors) */
.connector-v {
    width: 2px;
    height: 40px;
    background: var(--brand-maroon);
}
.connector-v-small {
    width: 2px;
    height: 30px;
    background: var(--brand-maroon);
}

.level-3-wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.branch-container {
    display: flex;
    gap: 40px; /* مسافة بين اللجنة والمدير */
    position: relative;
}
/* خط يربط اللجنة بالمدير */
.branch-container::before {
    content: '';
    position: absolute;
    top: -20px; /* يرتفع للأعلى ليلتقي بالخط النازل */
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: var(--brand-maroon);
}
.branch-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 20%; /* يمتد من بداية اللجنة */
    right: 20%; /* إلى نهاية المدير */
    height: 2px;
    background: var(--brand-maroon);
    z-index: -1;
}

/* الإدارات (Level 4) */
.level-4-departments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    position: relative;
}

/* خط أفقي يجمع الإدارات */
.level-4-departments::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 10%; right: 10%;
    height: 2px;
    background: var(--brand-maroon);
}
/* خطوط عمودية صغيرة لكل إدارة */
.dept-box {
    position: relative;
    background: rgba(255,255,255,0.05);
    padding: 15px 20px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 0.9rem;
    margin-top: 20px; /* مسافة للخط */
}

.dept-box::before {
    content: '';
    position: absolute;
    top: -22px;
    left: 50%;
    width: 2px;
    height: 22px;
    background: var(--brand-maroon);
}
.dept-box i { color: var(--brand-green); }

/* 4. كروت الأعضاء (Leadership) */
.group-title {
    text-align: center;
    color: var(--brand-green);
    font-size: 1.8rem;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    left: 50%; transform: translateX(-50%);
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
}

.member-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 30px 20px;
    text-align: center;
    border-radius: 10px;
    transition: 0.4s;
}

.member-card:hover {
    background: #251414;
    border-color: var(--brand-green);
    transform: translateY(-5px);
}

.member-card.highlight {
    border-color: rgba(164, 198, 57, 0.4);
    background: linear-gradient(180deg, #1f1212 0%, #120808 100%);
}

.m-photo {
    width: 80px; height: 80px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex; justify-content: center; align-items: center;
    font-size: 2rem; color: var(--text-gray);
    border: 1px solid rgba(164, 198, 57, 0.2);
}

.member-card h5 { font-size: 1rem; color: #fff; margin-bottom: 5px; }
.member-card .role { font-size: 0.85rem; color: var(--brand-green); }

.gold-separator-wide {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-maroon), transparent);
    margin: 60px 0;
}

/* للموبايل: تعديل الهيكل التنظيمي */
@media (max-width: 768px) {
    .branch-container { flex-direction: column; gap: 20px; }
    .branch-container::before, .branch-container::after, .level-4-departments::before { display: none; }
    .connector-h { display: none; }
    .dept-box { width: 100%; margin-top: 10px; }
    .dept-box::before { display: none; }
}
/* ==================== تحسينات صفحة من نحن (مجلس الإدارة والنظار) ==================== */

/* 1. ضبط وتجميل العناوين (Group Titles) */
.group-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 60px;
    position: relative;
    display: table; /* يساعد في التمركز */
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
}

/* تأثير النص الذهبي المتدرج */
.group-title {
    background: linear-gradient(to right, #fff, #A4C639, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(164, 198, 57, 0.2);
}

/* الزخرفة أسفل العنوان */
.group-title::after {
    content: '\f005'; /* رمز النجمة من FontAwesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: var(--brand-green);
    background: var(--bg-main);
    padding: 0 10px;
    z-index: 2;
}

.group-title::before {
    content: '';
    position: absolute;
    bottom: -3px; /* مكان الخط */
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-green), transparent);
    z-index: 1;
}

/* 2. ضبط شبكة الكروت (توسيط الكروت الأخيرة) */
.members-grid {
    display: flex; /* تغيير من grid إلى flex لسهولة التوسيط */
    flex-wrap: wrap;
    justify-content: center; /* هذا السطر هو السر في توسيط الصف الأخير */
    gap: 30px;
}

.member-card {
    flex: 0 1 calc(25% - 30px); /* 4 كروت في الصف للشاشات الكبيرة */
    min-width: 240px; /* أقل عرض للكارت */
}

/* 3. تجميل الكروت (Luxury Cards) */
.member-card {
    background: rgba(255, 255, 255, 0.02); /* خلفية شفافة جداً */
    backdrop-filter: blur(10px); /* تأثير الزجاج */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 15px; /* حواف أكثر نعومة */
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* تأثير اللمعة عند الهوفر */
.member-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: 0.5s;
    transform: skewX(-15deg);
}

.member-card:hover::before {
    left: 100%; /* حركة اللمعة */
}

.member-card:hover {
    transform: translateY(-10px);
    border-color: var(--brand-green);
    box-shadow: 0 15px 40px rgba(164, 198, 57, 0.15);
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.8), rgba(18, 8, 8, 0.9));
}

/* تحسين صورة العضو */
.m-photo {
    width: 90px; height: 90px;
    border: 2px solid rgba(164, 198, 57, 0.3);
    background: rgba(0,0,0,0.3);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    transition: 0.4s;
}

.member-card:hover .m-photo {
    border-color: var(--brand-green);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(164, 198, 57, 0.3);
}

.member-card h5 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #fff;
}

.member-card .role {
    font-size: 0.9rem;
    color: var(--text-gray);
    letter-spacing: 1px;
}

.member-card.highlight .role {
    color: var(--brand-green);
    font-weight: bold;
}

/* استجابة الشاشات (Responsive) */
@media (max-width: 1200px) {
    .member-card { flex: 0 1 calc(33.33% - 30px); } /* 3 كروت */
}

@media (max-width: 992px) {
    .member-card { flex: 0 1 calc(50% - 30px); } /* كارتين */
}

@media (max-width: 576px) {
    .member-card { flex: 0 1 100%; } /* كارت واحد */
}
/* ==================== إضافات "الفخامة الشاملة" (تحسينات الصفحة الأولى والعليا) ==================== */

/* 1. توحيد فخامة العناوين (تطبيق ستايل الذهب على كل العناوين) */
.section-title, 
.hero-title span, 
.page-title {
    background: linear-gradient(to right, #fff 20%, #A4C639 50%, #fff 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineText 5s linear infinite; /* لمعة متحركة مستمرة */
    text-shadow: 0 0 30px rgba(164, 198, 57, 0.15); /* توهج خفيف */
}

@keyframes shineText {
    to { background-position: 200% center; }
}

/* 3. تحسين "الهيرو" (الواجهة الأولى) - إضافة غبار ذهبي */
.hero-section::after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    background-image: radial-gradient(rgba(164, 198, 57, 0.3) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
    animation: floatingDust 20s linear infinite;
}

@keyframes floatingDust {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50px); }
}


/* 4. تحسين الأزرار (Buttons) - تأثير التموج */
.btn-gold-shine, .btn-transparent {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.4s;
    border-radius: 50px; /* جعل الأزرار دائرية الحواف */
}

/* 5. تحسين قسم "فكرة الشركة" (About Section) */
.about-text {
    border-right: 3px solid var(--brand-green); /* خط جانبي جمالي */
    padding-right: 30px;
    background: linear-gradient(90deg, rgba(164, 198, 57, 0.05), transparent); /* خلفية متدرجة خفيفة */
    border-radius: 8px;
    padding: 30px;
}

.image-wrapper.glow-border {
    border: 1px solid rgba(164, 198, 57, 0.3);
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    position: relative;
}

/* إضافة ركن زخرفي للصورة */
.image-wrapper.glow-border::before,
.image-wrapper.glow-border::after {
    content: '';
    position: absolute;
    width: 40px; height: 40px;
    border: 2px solid var(--brand-green);
    transition: 0.5s;
}

.image-wrapper.glow-border::before { top: -2px; left: -2px; border-bottom: 0; border-right: 0; }
.image-wrapper.glow-border::after { bottom: -2px; right: -2px; border-top: 0; border-left: 0; }

.image-wrapper:hover::before,
.image-wrapper:hover::after {
    width: 100%; height: 100%; /* يتمدد الإطار عند الهوفر */
    opacity: 0.5;
}

/* 6. تحسين كروت القيم (Values Cards) */
.value-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(20, 10, 10, 0.6); /* لون أعمق */
    backdrop-filter: blur(10px);
}

.value-card:hover {
    border-color: var(--brand-green);
    background: linear-gradient(145deg, rgba(164, 198, 57, 0.1), rgba(0,0,0,0));
    transform: translateY(-10px) rotate(1deg); /* دوران خفيف جداً */
}

.v-icon-bg {
    box-shadow: 0 0 0 0 rgba(164, 198, 57, 0.7);
    animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(164, 198, 57, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(164, 198, 57, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(164, 198, 57, 0); }
}

/* 7. سكرول بار (شريط التمرير) فخم */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #120808; 
}
::-webkit-scrollbar-thumb {
    background: var(--brand-green); 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #fff; 
}
/* ==================== تنسيق شعار الرؤية بجانب اللوجو ==================== */

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px; /* مسافة بين العنصرين */
}

/* الخط الفاصل بين الشعاريين */
.logos-separator {
    width: 1px;
    height: 35px; /* طول الخط */
    background-color: rgba(255, 255, 255, 0.2); /* لون أبيض خافت */
    margin: 0 5px;
}

/* تنسيق شعار الرؤية */
.vision-logo {
    height: 45px; /* ارتفاع مناسب (يمكنك تعديله حسب حجم شعار الشركة) */
    width: auto;
    /* هذا الفلتر سيجعل الشعار أبيض بالكامل تلقائياً حتى لو الصورة ملونة */
    filter: brightness(0) invert(1); 
    opacity: 0.9;
    transition: 0.3s;
}

.vision-link:hover .vision-logo {
    opacity: 1;
    transform: scale(1.05); /* تكبير بسيط عند الماوس */
}

/* تعديل للموبايل: تصغير الشعارات قليلاً لتناسب الشاشة */
@media (max-width: 768px) {
    .brand-logo { height: 40px; }
    .vision-logo { height: 35px; }
    .logos-separator { height: 25px; }
    .logo-container { gap: 10px; }
}
/* ==================== تغميق صورة الهيرو لزيادة وضوح النص ==================== */

.hero-bg-overlay {
    /* تعتيم بنسبة 60% في الأعلى و 85% في الأسفل ليعطي عمقاً فخماً */
    background: linear-gradient(
        rgba(0, 0, 0, 0.65), 
        rgba(18, 8, 8, 0.85)
    ) !important;
    
    /* إضافة تأثير "تغبيش" خفيف جداً للخلفية لتركيز العين على النص */
    backdrop-filter: blur(2px); 
    
    z-index: 1;
}

/* التأكد من أن النص فوق التعتيم */
.hero-content {
    position: relative;
    z-index: 5;
    /* إضافة ظل خفيف خلف النص لزيادة الوضوح */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* تحسين زر "اكتشف الشركة" ليبرز أكثر فوق الصورة الغامقة */
.btn-transparent {
    background: rgba(164, 198, 57, 0.1);
    backdrop-filter: blur(5px);
    border: 1.5px solid var(--brand-green);
}
/* ==================== تعتيم صورة الهيرو (Hero Overlay) ==================== */

.hero-section {
    position: relative;
    z-index: 1; /* لضمان ترتيب العناصر */
}

/* إنشاء طبقة سوداء شفافة فوق الصورة */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* لون أسود شفاف بنسبة 60% - يمكنك تغيير 0.6 إلى 0.7 لتغميق أكثر */
    background: rgba(0, 0, 0, 0.6); 
    z-index: -1; /* لتكون خلف النص ولكن أمام الصورة الخلفية */
}

/* التأكد من أن النصوص والأزرار فوق طبقة التعتيم */
.hero-content {
    position: relative;
    z-index: 2;
}
/* ==================== فلتر اللوجو الأبيض ==================== */

.brand-logo {
    /* الخطوة 1: تحويل اللوجو للأسود (brightness 0) */
    /* الخطوة 2: عكس الأسود ليصبح أبيض (invert 1) */
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1); /* لضمان العمل على كل المتصفحات */
    
    /* تحسين الدقة لضمان عدم التشويش */
    opacity: 1; 
    transition: 0.3s;
}

.brand-logo:hover {
    filter: none;
    -webkit-filter: none;
}
/* ==================== تحسين شارة "نماء مستمر" ==================== */

.floating-badge {
    position: absolute;
    bottom: 30px; 
    left: -25px; /* تداخل مع الإطار ليعطي عمقاً */
    
    /* الخلفية: أبيض مائل للكريمي قليلاً */
    background: linear-gradient(145deg, #ffffff, #f4f4f4);
    
    /* الأبعاد والحواف */
    padding: 12px 28px;
    border-radius: 50px;
    
    /* الحدود: حد رفيع جداً مع حد جانبي سميك بلون الهوية */
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 5px solid var(--brand-green); /* اللمسة الجمالية */
    
    /* الظل: لإبراز العنصر فوق الصورة */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    
    /* تنسيق النص والأيقونة */
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 1rem;
    color: #2c2c2c; /* لون نص غامق للتباين */
    
    /* الحركة */
    animation: badgeFloat 4s ease-in-out infinite;
    z-index: 10;
}

/* تنسيق الأيقونة داخل الشارة */
.floating-badge i {
    color: var(--brand-green);
    font-size: 1.2rem;
    background: rgba(164, 198, 57, 0.15); /* دائرة خلفية خفيفة للأيقونة */
    width: 35px; height: 35px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
}

/* حركة الطفو (Floating Animation) */
@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* حركة عند مرور الماوس */
.floating-badge:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(164, 198, 57, 0.3); /* ظل أخضر خفيف */
}

.floating-badge:hover i {
    background: var(--brand-green);
    color: #fff;
    transform: rotate(360deg); /* دوران الأيقونة عند الهوفر */
}
/* ==================== تعديلات اللوجو النهائية (أبيض وثابت) ==================== */

/* 1. توحيد لون اللوجو (أبيض) في كل الموقع */
.brand-logo, 
.loader-logo, 
.footer-logo {
    /* تحويل اللوجو للون الأبيض بالكامل */
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    
    /* التأكد من الظهور الكامل */
    opacity: 1 !important;
}

/* 2. إيقاف الحركة والاهتزاز تماماً */
.brand-logo, 
.loader-logo,
.pulse-effect {
    /* إلغاء أي أنيميشن سابق */
    animation: none !important;
    transform: none !important;
}

/* ------------------------------------------------------- */
/* (اختياري) إذا كنت تريد "حركة بسيطة جداً" بدلاً من الإيقاف الكامل،
   يمكنك استخدام الكود التالي بدلاً من الجزء رقم 2 أعلاه: */

/*
@keyframes subtleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); } 
}

.brand-logo, .loader-logo {
    animation: subtleFloat 4s ease-in-out infinite !important;
}
*/
/* ==================== تحسين شارة "نماء مستمر" ==================== */

.floating-badge {
    position: absolute;
    bottom: 30px; 
    left: -25px; /* تداخل مع الإطار ليعطي عمقاً */
    
    /* الخلفية: أبيض مائل للكريمي قليلاً */
    background: linear-gradient(145deg, #ffffff, #f4f4f4);
    
    /* الأبعاد والحواف */
    padding: 12px 28px;
    border-radius: 50px;
    
    /* الحدود: حد رفيع جداً مع حد جانبي سميك بلون الهوية */
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 5px solid var(--brand-green); /* اللمسة الجمالية */
    
    /* الظل: لإبراز العنصر فوق الصورة */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    
    /* تنسيق النص والأيقونة */
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 1rem;
    color: #2c2c2c; /* لون نص غامق للتباين */
    
    /* الحركة */
    animation: badgeFloat 4s ease-in-out infinite;
    z-index: 10;
}

/* تنسيق الأيقونة داخل الشارة */
.floating-badge i {
    color: var(--brand-green);
    font-size: 1.2rem;
    background: rgba(164, 198, 57, 0.15); /* دائرة خلفية خفيفة للأيقونة */
    width: 35px; height: 35px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
}

/* حركة الطفو (Floating Animation) */
@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* حركة عند مرور الماوس */
.floating-badge:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(164, 198, 57, 0.3); /* ظل أخضر خفيف */
}

.floating-badge:hover i {
    background: var(--brand-green);
    color: #fff;
    transform: rotate(360deg); /* دوران الأيقونة عند الهوفر */
}
/* ==================== تعديل مكان شارة نماء (أعلى اليمين) ==================== */

.floating-badge {
    /* 1. إلغاء التموضع القديم (الأسفل واليسار) */
    bottom: auto !important;
    left: auto !important;

    /* 2. التموضع الجديد (أعلى اليمين) */
    top: -30px;   /* يرتفع للأعلى قليلاً خارج الإطار */
    right: -25px; /* يزاح لليمين قليلاً خارج الإطار */

    /* 3. عكس مكان الخط الملون ليصبح على اليمين (جهة الخارج) */
    border-left: 1px solid rgba(255, 255, 255, 0.8); /* إرجاع اليسار لخط رفيع */
    border-right: 5px solid var(--brand-green);      /* جعل الخط السميك يمين الشارة */

    /* ضمان الظهور فوق كل العناصر */
    z-index: 15;
}

/* تعديل للموبايل: لضمان عدم خروج الشارة من الشاشة */
@media (max-width: 768px) {
    .floating-badge {
        right: -10px; /* تقليل الإزاحة في الموبايل */
        top: -20px;
        padding: 8px 20px; /* تصغير الحجم قليلاً */
        font-size: 0.9rem;
    }
}
/* ==================== تعديل شفافية الهيدر ==================== */

/* 1. الحالة الطبيعية (في أعلى الصفحة) - شفاف تماماً */
.luxury-header {
    background: transparent !important;      /* إجبار الخلفية تكون شفافة */
    border-bottom: none !important;          /* إزالة الخط السفلي */
    box-shadow: none !important;             /* إزالة الظل */
    backdrop-filter: none !important;        /* إزالة التغبيش مؤقتاً */
    padding: 25px 0;                         /* مساحة مريحة للفخامة */
    transition: all 0.4s ease-in-out;        /* نعومة في التحول */
}

/* 2. حالة السكرول (عند النزول للأسفل) - خلفية داكنة */
/* يتم تفعيل هذا الكلاس تلقائياً بواسطة الجافاسكريبت الموجود لديك */
.luxury-header.scrolled {
    background: rgba(18, 8, 8, 0.95) !important; /* لون داكن شبه شفاف */
    backdrop-filter: blur(15px) !important;      /* تفعيل التغبيش (Blur) */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; /* خط رفيع جداً */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; /* ظل ناعم */
    padding: 15px 0;                             /* تقليص الارتفاع قليلاً */
}
/* ==================== تنسيق قائمة المؤسسين (نصية فاخرة) ==================== */

.founders-grid {
    display: grid;
    /* توزيع تلقائي: أعمدة متجاوبة */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.founder-card {
    background: rgba(255, 255, 255, 0.03); /* خلفية داكنة شفافة */
    border: 1px solid rgba(255, 255, 255, 0.08); /* حدود خفيفة */
    border-right: 3px solid var(--brand-green); /* خط جمالي يمين الكارت */
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 6px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* الترقيم (01, 02..) */
.f-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: rgba(164, 198, 57, 0.2); /* رقم كبير وشفاف */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* خط إنجليزي للأرقام */
    transition: 0.4s;
}

/* الاسم */
.f-name {
    font-size: 1rem;
    color: #fff;
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
}

/* التأثير عند مرور الماوس (Hover) */
.founder-card:hover {
    background: linear-gradient(90deg, rgba(164, 198, 57, 0.1), transparent);
    transform: translateX(-5px); /* حركة لليسار قليلاً */
    border-color: var(--brand-green);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.founder-card:hover .f-num {
    color: var(--brand-green); /* الرقم يضيء */
    transform: scale(1.1);
}

/* لمعة خفيفة تمر عند الهوفر */
.founder-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: 0.5s;
}
.founder-card:hover::after {
    left: 100%;
}
/* ==================== 1. تنسيق الرؤية والرسالة (القسم الجديد) ==================== */

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

.vm-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.4s;
    position: relative;
    overflow: hidden;
}

.vm-card:hover {
    border-color: var(--brand-green);
    transform: translateY(-5px);
    background: linear-gradient(145deg, rgba(30,20,20,0.9), #120808);
}

.icon-box {
    font-size: 3rem;
    color: var(--brand-green);
    margin-bottom: 20px;
    background: rgba(164, 198, 57, 0.1);
    width: 80px; height: 80px;
    line-height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
    transition: 0.4s;
}

.vm-card:hover .icon-box {
    background: var(--brand-green);
    color: #fff;
    transform: rotateY(180deg);
}

.vm-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #fff;
}

.vm-card p {
    color: var(--text-gray);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ==================== 2. تنسيق الأهداف الاستراتيجية ==================== */

.goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.goal-item {
    background: var(--bg-card);
    padding: 25px;
    border-radius: 8px;
    border-right: 3px solid var(--brand-maroon);
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: 0.3s;
}

.goal-item:hover {
    border-right-color: var(--brand-green);
    background: rgba(255,255,255,0.05);
}

.g-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: rgba(164, 198, 57, 0.3);
    line-height: 1;
}

.goal-item p {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
}

/* ==================== 3. تنسيق استراتيجية العمل (القسم الجديد) ==================== */

.strategy-work-section {
    background: linear-gradient(0deg, #120808 0%, #1a0f0f 100%);
    position: relative;
}

.strategy-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.strat-box {
    flex: 1 1 280px; /* مرونة في العرض */
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    transition: 0.4s;
}

.strat-box:hover {
    border-color: var(--brand-green);
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.s-icon {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 20px;
    transition: 0.3s;
}

.strat-box:hover .s-icon {
    color: var(--brand-green);
    transform: scale(1.1);
}

.strat-box h4 {
    font-size: 1.2rem;
    color: var(--brand-green);
    margin-bottom: 10px;
}

.strat-box p {
    font-size: 0.9rem;
    color: var(--text-gray);
}
/* ==================== تنسيق صفحة المشاريع والأنشطة ==================== */

/* 1. كارت قاعدة الاستثمار (25%) */
.investment-rule-card {
    margin-top: 30px;
    background: linear-gradient(90deg, rgba(164, 198, 57, 0.1), transparent);
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(164, 198, 57, 0.3);
}

.rule-icon {
    font-size: 2.5rem;
    color: var(--brand-green);
}

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

.rule-text p {
    color: var(--text-gray);
    margin: 0;
    font-size: 0.9rem;
}

/* 2. شبكة المشاريع الديناميكية */
.dynamic-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.project-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    transition: 0.4s;
    text-align: center;
    z-index: 1;
}

/* الأيقونة */
.p-icon-wrapper {
    width: 90px; height: 90px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    margin: 0 auto 25px;
    display: flex; justify-content: center; align-items: center;
    font-size: 2.5rem;
    color: var(--brand-green);
    border: 1px solid rgba(164, 198, 57, 0.2);
    transition: 0.4s;
}

.project-card h3 {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 700;
}

.project-card p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* تأثير الهوفر الفخم */
.project-card:hover {
    transform: translateY(-10px);
    border-color: var(--brand-green);
}

.project-card:hover .p-icon-wrapper {
    background: var(--brand-green);
    color: #120808;
    transform: scale(1.1) rotate(360deg);
    box-shadow: 0 0 20px var(--brand-green);
}

/* خلفية متدرجة تظهر عند الهوفر */
.p-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(164, 198, 57, 0.05) 100%);
    z-index: -1;
    opacity: 0;
    transition: 0.4s;
}

.project-card:hover .p-overlay {
    opacity: 1;
}
/* ==================== تعديل مكان شارة نماء (أعلى اليمين) ==================== */

.floating-badge {
    /* 1. إلغاء التموضع القديم (الأسفل واليسار) */
    bottom: auto !important;
    left: auto !important;

    /* 2. التموضع الجديد (أعلى اليمين) */
    top: -30px;   /* يرتفع للأعلى قليلاً خارج الإطار */
    right: -25px; /* يزاح لليمين قليلاً خارج الإطار */

    /* 3. عكس مكان الخط الملون ليصبح على اليمين (جهة الخارج) */
    border-left: 1px solid rgba(255, 255, 255, 0.8); /* إرجاع اليسار لخط رفيع */
    border-right: 5px solid var(--brand-green);      /* جعل الخط السميك يمين الشارة */

    /* ضمان الظهور فوق كل العناصر */
    z-index: 15;
}

/* تعديل للموبايل: لضمان عدم خروج الشارة من الشاشة */
@media (max-width: 768px) {
    .floating-badge {
        right: -10px; /* تقليل الإزاحة في الموبايل */
        top: -20px;
        padding: 8px 20px; /* تصغير الحجم قليلاً */
        font-size: 0.9rem;
    }
}
/* ==================== تصميم صفحة مركز داعم "الفائقة الروعة" ==================== */

.premium-daem-section {
    padding: 60px 0 120px;
    position: relative;
    overflow: hidden;
}

/* توهج خلفي يعطي عمقاً فخماً */
.bg-glow-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(164, 198, 57, 0.1) 0%, transparent 70%);
    filter: blur(50px);
    z-index: 0;
    pointer-events: none;
    animation: blobPulse 8s infinite alternate ease-in-out;
}

@keyframes blobPulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* حاوية الفورم المقسمة */
.daem-split-card {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    background: rgba(26, 15, 15, 0.6); /* خلفية زجاجية داكنة */
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(164, 198, 57, 0.1);
    overflow: hidden;
}

/* --- النصف الأيمن (المعلومات) --- */
.daem-info-side {
    background: linear-gradient(135deg, rgba(164, 198, 57, 0.08) 0%, rgba(0,0,0,0) 100%);
    padding: 60px 50px;
    border-left: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.massive-icon {
    font-size: 4rem;
    color: var(--brand-green);
    margin-bottom: 20px;
    text-shadow: 0 0 30px rgba(164, 198, 57, 0.4);
}

.daem-info-side h2 {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 800;
}

.daem-info-side h2 span {
    color: var(--brand-green);
}

.daem-info-side p {
    color: var(--text-gray);
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 1.05rem;
}

.daem-features {
    list-style: none;
    margin-bottom: 30px;
}

.daem-features li {
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    line-height: 1.5;
}

.daem-features li i {
    color: var(--brand-green);
    background: rgba(164, 198, 57, 0.1);
    min-width: 35px; height: 35px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
}

/* صندوق الاقتباس الفخم */
.quote-box {
    background: rgba(255, 255, 255, 0.03);
    border-right: 3px solid var(--brand-maroon);
    padding: 20px;
    border-radius: 8px;
    position: relative;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
}

.quote-box i {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 2rem;
    color: rgba(164, 198, 57, 0.1);
}

/* --- النصف الأيسر (الفورم) --- */
.daem-form-side {
    padding: 60px 50px;
}

.form-heading {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 5px;
}

.form-subheading {
    color: var(--brand-green);
    font-size: 0.95rem;
    margin-bottom: 40px;
}

/* تنسيق حقول الإدخال العائمة الفاخرة */
.input-group {
    position: relative;
    margin-bottom: 35px;
}

.input-icon {
    position: absolute;
    right: 0;
    top: 15px;
    color: var(--text-gray);
    font-size: 1.2rem;
    transition: 0.3s;
}

.premium-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 35px 15px 15px;
    color: #fff;
    font-size: 1.05rem;
    font-family: var(--font-main);
    outline: none;
    transition: 0.3s;
}

.input-line {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--brand-green);
    transition: 0.4s ease;
    box-shadow: 0 0 10px rgba(164, 198, 57, 0.5);
}

.premium-input:focus ~ .input-line,
.premium-input:valid ~ .input-line {
    width: 100%;
}

.premium-input:focus ~ .input-icon {
    color: var(--brand-green);
}

/* Label عائم (Floating Label) */
.premium-label {
    position: absolute;
    right: 35px;
    top: 15px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    transition: 0.3s ease;
    font-size: 1rem;
}

.premium-input:focus ~ .premium-label,
.premium-input:not(:placeholder-shown) ~ .premium-label {
    top: -15px;
    font-size: 0.85rem;
    color: var(--brand-green);
}

.select-group select {
    appearance: none;
    cursor: pointer;
}

.select-caret {
    position: absolute;
    left: 10px;
    top: 18px;
    color: var(--brand-green);
    pointer-events: none;
}

.premium-input option {
    background: #120808;
    color: #fff;
}

/* الأنيميشن السلس للحقل الفرعي */
.dynamic-field {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    pointer-events: none;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-10px);
}

.dynamic-field.show-field {
    max-height: 100px;
    opacity: 1;
    margin-bottom: 35px;
    pointer-events: auto;
    transform: translateY(0);
}

/* زر الإرسال الفاخر */
.premium-submit-btn {
    background: linear-gradient(135deg, var(--brand-green) 0%, #b8db45 100%);
    color: #120808;
    border: none;
    padding: 16px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--font-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 20px rgba(164, 198, 57, 0.2);
    margin-top: 10px;
}

.premium-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(164, 198, 57, 0.4);
    background: #fff;
}

.premium-submit-btn:hover i {
    transform: translateX(-5px);
}

/* رسائل التنبيه */
.premium-alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 0.95rem;
    display: flex; align-items: center; gap: 10px;
    animation: fadeInDown 0.5s ease;
}

.premium-alert.success { background: rgba(164, 198, 57, 0.1); border-right: 3px solid var(--brand-green); color: #fff; }
.premium-alert.success i { color: var(--brand-green); font-size: 1.2rem; }
.premium-alert.error { background: rgba(255, 77, 77, 0.1); border-right: 3px solid #ff4d4d; color: #fff; }
.premium-alert.error i { color: #ff4d4d; font-size: 1.2rem; }

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 992px) {
    .daem-split-card { grid-template-columns: 1fr; }
    .daem-info-side { border-left: none; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 40px 30px; text-align: center; }
    .daem-features li { text-align: right; }
    .daem-form-side { padding: 40px 30px; }
}
/* ==================== إضافات لتظبيط صفحة عن الشركة ==================== */

/* 1. ضبط نصوص استراتيجية العمل لتكون منسقة يميناً */
.strat-box {
    text-align: right; /* لجعل النص يبدأ من اليمين بشكل مريح للقراءة */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.strat-box .s-icon {
    margin: 0 auto 20px auto; /* توسيط الأيقونة فقط */
}
.strat-box h4 {
    margin-bottom: 12px;
    font-size: 1.3rem;
}
.strat-box p {
    line-height: 1.8;
}

/* 2. تحسين شكل أهداف الشركة */
.goal-item p {
    line-height: 1.6;
    font-size: 1.05rem;
    padding-top: 5px;
}

/* 3. إصلاح وتأكيد خطوط الهيكل التنظيمي (Org Chart) */
.branch-container {
    display: flex;
    justify-content: center;
    gap: 80px; /* مسافة أوسع بين اللجنة التنفيذية والمدير التنفيذي */
    position: relative;
    padding-top: 20px;
}

/* الخط الأفقي بين اللجنة والمدير */
.branch-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--brand-maroon);
}

/* الخطوط العمودية النازلة للجنة والمدير */
.committee-box::before, .ceo-box::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: var(--brand-maroon);
}

/* ضبط أسماء الإدارات لتكون في سطر واحد إن أمكن */
.dept-box span {
    white-space: nowrap;
    font-weight: 500;
}

/* 4. إخفاء الخطوط في الشاشات الصغيرة للهيكل التنظيمي لعدم التداخل */
@media (max-width: 768px) {
    .branch-container { flex-direction: column; gap: 20px; padding-top: 0; }
    .branch-container::before { display: none; }
    .committee-box::before, .ceo-box::before { display: none; }
    .dept-box { width: 100%; justify-content: center; }
}
/* 1. هيرو الصفحة الداخلية */
.inner-hero {
    height: 50vh; 
    /* تم تغيير اسم الصورة هنا لتكون مختلفة عن الرئيسية */
    background: url('images/inner-hero.jpg') center/cover no-repeat; 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 50px;
}
/* ==================== تعتيم صورة الهيرو في الرئيسية فقط (تأثير سينمائي للأطراف) ==================== */
.hero-section {
    position: relative;
    z-index: 1;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 
       دمج تدرجين لونيين فوق الصورة:
       1. التدرج الخطي (linear): يعتم أعلى الصورة بنسبة 85% (ليبرز اللوجو والقائمة) ويعتم أسفلها للاندماج مع الموقع.
       2. التدرج الدائري (radial): يعتم الأطراف (اليمين واليسار) ويترك المنتصف (وجوه الأشخاص) شفافاً وواضحاً.
    */
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(18, 8, 8, 0.95) 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.7) 100%);
        
    z-index: -1; /* ليكون فوق الصورة مباشرة وخلف المحتوى والهيدر */
    pointer-events: none; /* لضمان عدم تعارضه مع أي نقرة بالماوس */
}
/* ==================== الفوتر الفاخر (Premium Footer) ==================== */
.premium-footer {
    background: linear-gradient(180deg, #120808 0%, #0a0404 100%);
    position: relative;
    padding-top: 80px;
    border-top: 1px solid rgba(164, 198, 57, 0.2); /* إطار أخضر خفيف */
    overflow: hidden;
}

/* توهج علوي خفيف للفوتر */
.premium-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 50%; height: 2px;
    background: radial-gradient(circle, var(--brand-green) 0%, transparent 100%);
    box-shadow: 0 0 30px var(--brand-green);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 50px;
    margin-bottom: 60px;
}

.footer-logo {
    width: 140px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
}

.brand-col p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 25px;
    max-width: 90%;
}

.social-links {
    display: flex; gap: 15px;
}

.social-links a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.4s;
}

.social-links a:hover {
    background: var(--brand-green);
    color: #120808;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(164, 198, 57, 0.3);
}

.footer-col h3 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    width: 40px; height: 2px;
    background: var(--brand-green);
}

.links-col ul { padding: 0; margin: 0; }
.links-col ul li { margin-bottom: 15px; }
.links-col ul li a {
    color: var(--text-gray);
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* إضافة سهم صغير عند تمرير الماوس */
.links-col ul li a::before {
    content: '\f104'; /* سهم FontAwesome يسار */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--brand-green);
    opacity: 0;
    transform: translateX(10px);
    transition: 0.3s;
}

.links-col ul li a:hover {
    color: var(--brand-green);
    transform: translateX(-5px);
}
.links-col ul li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.contact-info { padding: 0; margin: 0; }
.contact-info li {
    display: flex; align-items: center; gap: 15px;
    color: var(--text-gray);
    margin-bottom: 20px;
    font-size: 0.95rem;
}
.contact-info li i {
    color: var(--brand-green);
    font-size: 1.2rem;
    background: rgba(164, 198, 57, 0.1);
    width: 35px; height: 35px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
}

/* رابط الموقع الرسمي المأخوذ من الـ PDF */
.contact-info li a.official-link {
    color: var(--brand-green);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 1px;
    transition: 0.3s;
}
.contact-info li a.official-link:hover {
    color: #fff;
    text-shadow: 0 0 10px var(--brand-green);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 25px 0;
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
}

@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .brand-col p { max-width: 100%; }
    .social-links { justify-content: center; }
    .footer-col h3::after { left: 50%; transform: translateX(-50%); right: auto; }
    .contact-info li { flex-direction: column; gap: 10px; }
    .links-col ul li a:hover { transform: none; }
}
/* ==================== تعديل أزرار السوشيال ميديا في الفوتر ==================== */
.social-links-premium {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.social-links-premium a {
    width: 45px; 
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(164, 198, 57, 0.3); /* إطار بلون الهوية */
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--brand-green);
    font-size: 1.2rem;
    transition: all 0.4s ease;
}

/* تأثير الواتساب عند الهوفر */
.social-links-premium a.whatsapp-btn:hover {
    background: #25D366; /* لون الواتساب الأصلي */
    color: #fff;
    border-color: #25D366;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
    transform: translateY(-5px);
}

/* تأثير تويتر (X) عند الهوفر */
.social-links-premium a.twitter-btn:hover {
    background: #000000;
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}
/* ==================== حقوق التطوير (Sweesa) ==================== */
.footer-bottom-content {
    display: flex;
    justify-content: space-between; /* يوزع الحقوق يمين ويسار */
    align-items: center;
    flex-wrap: wrap; /* ليتوافق مع الموبايل */
    gap: 15px;
}

.developer-credit {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5); /* لون رمادي خافت */
    margin: 0;
}

.developer-credit a {
    color: var(--brand-green); /* لون اسم شركتك مميز */
    font-weight: 800;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

/* تأثير الإضاءة عند تمرير الماوس على اسم شركتك */
.developer-credit a:hover {
    color: #fff;
    text-shadow: 0 0 15px var(--brand-green);
}

/* تعديل للموبايل: توسيط النصوص */
@media (max-width: 768px) {
    .footer-bottom-content {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}
/* ==================== شريط الحقوق والتطوير ==================== */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 25px 0;
    width: 100%;
    position: relative;
    z-index: 10; /* لضمان ظهوره فوق الخلفية */
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between; /* يوزع الحقوق يمين ويسار */
    align-items: center;
    flex-wrap: wrap; 
    gap: 15px;
    color: rgba(255, 255, 255, 0.5); /* لون النص الافتراضي */
    font-size: 0.95rem;
}

.footer-bottom-content p {
    margin: 0;
}

.developer-credit a {
    color: var(--brand-green); 
    font-weight: 800;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.developer-credit a:hover {
    color: #fff;
    text-shadow: 0 0 15px var(--brand-green);
}

/* للموبايل: توسيط النصوص */
@media (max-width: 768px) {
    .footer-bottom-content {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}
/* ==================== شريط الحقوق والتطوير ==================== */
.footer-bottom-content {
    display: flex;
    flex-direction: column; /* وضعهم تحت بعض بشكل مرتب */
    justify-content: center; /* توسيط عمودي */
    align-items: center; /* توسيط أفقي */
    text-align: center;
    gap: 10px; /* مسافة جمالية بسيطة بينهم */
    color: rgba(255, 255, 255, 0.5); /* لون النص الافتراضي */
    font-size: 0.95rem;
}

.footer-bottom-content p {
    margin: 0;
}

/* تنسيق اسم الشركة المطور */
.developer-credit a {
    color: var(--brand-green); 
    font-weight: 800;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.developer-credit a:hover {
    color: #fff;
    text-shadow: 0 0 15px var(--brand-green);
}
body {
    overflow-x: hidden; /* هذا السطر يمنع ظهور أي خطوط جانبية أو مساحات فارغة */
}
/* ==================== شريط الحقوق الإجباري ف المنتصف ==================== */
.footer-bottom-centered {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px 0;
    width: 100%;
    display: flex !important;
    flex-direction: column !important; /* يحطهم تحت بعض */
    align-items: center !important; /* توسيط أفقي إجباري */
    justify-content: center !important; /* توسيط عمودي */
    text-align: center !important;
    gap: 10px;
}

.footer-bottom-centered p {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
}

.developer-credit a {
    color: var(--brand-green); 
    font-weight: 800;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.developer-credit a:hover {
    color: #fff;
    text-shadow: 0 0 15px var(--brand-green);
}
html, body {
    overflow-x: hidden !important;
}
/* ==================== تنسيق صور الأعضاء المرفوعة ==================== */
.m-photo {
    overflow: hidden; /* يمنع الصورة من الخروج عن الدائرة */
    position: relative;
}

.m-photo .member-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* لضمان ملء الدائرة بالصورة دون تشويه أبعادها */
    border-radius: 50%;
}
/* ==================== تنسيق قائمة المؤسسين (صور فاخرة) ==================== */

.founders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.founder-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 3px solid var(--brand-green);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 6px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* تنسيق صورة المؤسس / الشعار */
.f-image {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(164, 198, 57, 0.2); /* إطار ذهبي خفيف */
    flex-shrink: 0; /* لمنع الصورة من الانضغاط */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s;
}

.f-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* لضمان ملء الدائرة بدون تشويه */
    filter: grayscale(100%) brightness(0.8); /* الصورة أبيض وأسود فخمة في البداية */
    transition: 0.4s;
}

/* الاسم */
.f-name {
    font-size: 1rem;
    color: #fff;
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
}

/* التأثير عند مرور الماوس (Hover) */
.founder-card:hover {
    background: linear-gradient(90deg, rgba(164, 198, 57, 0.1), transparent);
    transform: translateX(-5px);
    border-color: var(--brand-green);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.founder-card:hover .f-image {
    border-color: var(--brand-green);
    box-shadow: 0 0 15px rgba(164, 198, 57, 0.3);
}

.founder-card:hover .f-image img {
    filter: grayscale(0%) brightness(1); /* تعود لألوانها الطبيعية */
    transform: scale(1.1);
}

/* لمعة خفيفة تمر عند الهوفر */
.founder-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: 0.5s;
}
.founder-card:hover::after {
    left: 100%;
}
/* ==================== عرض صورة الهيرو كاملة على الموبايل (بدون قص) ==================== */
@media (max-width: 768px) {
    .hero-section {
        /* 1. إجبار الصورة على أخذ العرض بالكامل بدون زووم أو قص */
        background-size: 100% auto !important; 
        background-position: top center !important; 
        
        /* 2. ملء باقي الشاشة بلون الموقع عشان متكونش بيضاء */
        background-color: var(--bg-main) !important; 
        
        /* 3. تعديل الارتفاع عشان يتناسب مع الموبايل والمحتوى */
        height: auto !important;
        min-height: 85vh;
        padding-top: 140px; /* مسافة من فوق عشان الهيدر */
        padding-bottom: 50px;
    }

    /* 4. تعديل طبقة التعتيم (الستارة) لتندمج بنعومة مع لون الموقع في الأسفل */
    .hero-section::after {
        background: linear-gradient(
            to bottom, 
            rgba(0, 0, 0, 0.4) 0%,       /* تعتيم خفيف فوق عشان اللوجو */
            rgba(28, 17, 12, 0.7) 30%,   /* بداية دمج لون الصورة مع الخلفية */
            var(--bg-main) 60%           /* تحول كامل للون الموقع الداكن */
        ) !important;
    }
    
    /* رفع المحتوى النصي قليلاً ليكون متناسق مع الصورة */
    .hero-content {
        margin-top: -20px;
    }
}
/* ==================== عرض صورة الهيرو كاملة (بدون قص وبدون فراغ) ==================== */
@media (max-width: 768px) {
    .hero-section {
        /* 1. عرض الصورة بنسبة 100% من الشاشة بدون زووم أو قص */
        background-size: 100% auto !important; 
        background-position: top center !important; 
        background-repeat: no-repeat !important;

        /* 2. السر هنا: تحديد الارتفاع بناءً على عرض الشاشة ليتطابق مع حجم الصورة */
        /* vw تعني Viewport Width، جرب الرقم 60، ولو لقيت فيه فراغ صغير تحت الصورة خليه 55 أو 65 حتى يضبط 100% */
        height: 60vw !important; 
        min-height: unset !important;
    }

    /* 3. تدرج خفيف جداً لدمج أطراف الصورة السفلية مع الموقع */
    .hero-section::after {
        background: linear-gradient(
            to bottom, 
            rgba(0, 0, 0, 0.5) 0%,        /* تعتيم أعلى الصورة للوجو */
            transparent 30%,              /* ترك المنتصف واضحاً تماماً */
            transparent 80%, 
            var(--bg-main) 100%           /* دمج النهاية مع لون الموقع */
        ) !important;
    }

    /* 4. إخفاء أيقونة الماوس في الموبايل لأن ارتفاع الصورة أصبح قصيراً ومناسباً للرؤية بالكامل */
    .scroll-down-indicator {
        display: none !important; 
    }
}

/* ==================== كروت الأعضاء (الشكل الفخم مع تأثير القلب 3D) ==================== */

/* 1. الحاوية الخارجية (يجب أن تكون شفافة تماماً ومجرد إطار للحركة) */
.member-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    perspective: 1000px; /* لتفعيل البعد الثلاثي */
    flex: 0 1 calc(25% - 30px);
    min-width: 240px;
    height: 300px; /* تثبيت الطول مهم جداً عشان الكارت ميصغرش */
    margin-bottom: 20px;
}

/* 2. المحور الداخلي الذي يلف */
.member-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); /* حركة ناعمة جداً */
    transform-style: preserve-3d;
}

/* 3. حركة القلب والارتفاع للأعلى عند تمرير الماوس */
.member-card:hover .member-card-inner {
    transform: translateY(-10px) rotateY(180deg);
}

/* 4. تصميم الوجهين (نفس الشكل الفخم القديم تماماً) */
.member-card-front, .member-card-back {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; /* إخفاء الظهر لتجنب التداخل */
    
    /* الاستايل الأصلي الفخم */
    background: rgba(255, 255, 255, 0.02); /* خلفية شفافة زجاجية */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px; /* حواف ناعمة */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    
    /* توسيط المحتوى */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 5. الوجه الأمامي (الصورة والاسم) */
.member-card-front h5 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #fff;
}

.member-card-front .role {
    font-size: 0.9rem;
    color: var(--text-gray);
    letter-spacing: 1px;
}

/* 6. الوجه الخلفي (النبذة التعريفية) */
.member-card-back {
    transform: rotateY(180deg); /* مقلوب ليكون في الخلف */
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.9), rgba(18, 8, 8, 0.95)); /* خلفية داكنة لسهولة القراءة */
    border-color: var(--brand-green); /* إطار بلون الهوية عند القلب */
    box-shadow: 0 15px 40px rgba(164, 198, 57, 0.15); /* إضاءة خفيفة */
}

.member-card-back h5 {
    color: var(--brand-green);
    margin-bottom: 15px;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(164, 198, 57, 0.2);
    padding-bottom: 10px;
    width: 100%;
    text-align: center;
}

.bio-text {
    color: var(--text-gray);
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: center;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 5px;
}

/* سكرول بار أنيق للنبذة الطويلة */
.bio-text::-webkit-scrollbar { width: 4px; }
.bio-text::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 4px; }
.bio-text::-webkit-scrollbar-thumb { background: var(--brand-green); border-radius: 4px; }

/* 7. كروت الرئيس والنائب (المميزة) */
.member-card.highlight .member-card-front,
.member-card.highlight .member-card-back {
    border-color: rgba(164, 198, 57, 0.4);
    background: linear-gradient(180deg, #1f1212 0%, #120808 100%);
}

.member-card.highlight .member-card-front .role {
    color: var(--brand-green);
    font-weight: bold;
}
/* ==================== زر الصعود للأعلى ==================== */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px; /* تم وضعه على اليسار ليتناسب مع اتجاه اللغة العربية RTL */
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.03); /* خلفية زجاجية داكنة */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(164, 198, 57, 0.3); /* إطار بلون الهوية الخفيف */
    color: var(--brand-green);
    border-radius: 50%; /* زر دائري */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 999; /* لضمان ظهوره فوق كل شيء */
    
    /* إخفاء الزر في البداية */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* الكلاس الذي تتم إضافته بالجافاسكريبت لإظهار الزر */
.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* تأثير التمرير (Hover) */
.scroll-to-top:hover {
    background: var(--brand-green);
    color: #120808; /* نص داكن عند التمرير */
    box-shadow: 0 5px 20px rgba(164, 198, 57, 0.4); /* توهج أخضر */
    transform: translateY(-5px); /* حركة للأعلى */
}

/* تعديل للموبايل */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}
/* ==================== أزرار تصنيفات مركز داعم (Tabs) ==================== */
.daem-category-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.cat-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-gray);
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 1rem;
    font-family: var(--font-main);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-btn i {
    font-size: 1.2rem;
    transition: 0.4s;
}

/* حالة التمرير (Hover) */
.cat-btn:hover {
    background: rgba(164, 198, 57, 0.1);
    border-color: var(--brand-green);
    color: #fff;
    transform: translateY(-3px);
}

/* الحالة النشطة (Active) */
.cat-btn.active {
    background: var(--brand-green);
    color: #120808;
    border-color: var(--brand-green);
    box-shadow: 0 10px 20px rgba(164, 198, 57, 0.3);
}

.cat-btn.active i {
    color: #120808;
}

/* تعديل للموبايل */
@media (max-width: 768px) {
    .daem-category-tabs {
        gap: 10px;
    }
    .cat-btn {
        flex: 1 1 45%; /* لتقسيم الأزرار 2 في كل صف */
        justify-content: center;
        font-size: 0.9rem;
        padding: 10px;
    }
}
/* ==================== كروت المشاريع (تأثير القلب 3D الفخم) ==================== */

.projects-flip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

/* الحاوية الأساسية للكارت */
.proj-flip-card {
    background: transparent;
    perspective: 1000px; /* تفعيل البعد الثلاثي */
    height: 400px; /* طول ثابت للكارت */
    width: 100%;
}

/* المحور الداخلي الذي يلف */
.proj-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* حركة القلب عند مرور الماوس */
.proj-flip-card:hover .proj-card-inner {
    transform: rotateY(180deg);
    box-shadow: 0 15px 40px rgba(164, 198, 57, 0.2); /* توهج أخضر خفيف */
}

/* الوجهين الأمامي والخلفي */
.proj-card-front, .proj-card-back {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 15px;
    overflow: hidden;
}

/* --- الوجه الأمامي --- */
.proj-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7); /* تغميق الصورة قليلاً لبروز النص */
    transition: 0.5s;
}

.proj-flip-card:hover .proj-card-front img {
    transform: scale(1.1); /* زووم بسيط قبل القلب */
}

/* طبقة النص فوق الصورة */
.front-overlay {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    background: linear-gradient(0deg, rgba(18, 8, 8, 0.95) 0%, rgba(18, 8, 8, 0.6) 50%, transparent 100%);
    padding: 40px 20px 20px;
    text-align: center;
    border-bottom: 4px solid var(--brand-green);
}

.front-overlay h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 5px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

.hover-hint {
    font-size: 0.85rem;
    color: var(--brand-green);
    opacity: 0.8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* --- الوجه الخلفي --- */
.proj-card-back {
    transform: rotateY(180deg);
    background: linear-gradient(145deg, var(--bg-card), #120808);
    border: 1px solid var(--brand-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    text-align: center;
}

.proj-card-back .b-icon {
    width: 60px; height: 60px;
    background: rgba(164, 198, 57, 0.1);
    color: var(--brand-green);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.8rem;
    margin-bottom: 15px;
    box-shadow: 0 0 15px rgba(164, 198, 57, 0.2);
}

.proj-card-back h3 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.b-divider {
    width: 40px;
    height: 2px;
    background: var(--brand-green);
    margin: 0 auto 15px;
}

.proj-card-back .b-desc {
    max-height: 180px;
    overflow-y: auto;
    padding-right: 5px;
}

.proj-card-back p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* سكرول بار للوصف الطويل في الوجه الخلفي */
.proj-card-back .b-desc::-webkit-scrollbar { width: 4px; }
.proj-card-back .b-desc::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.proj-card-back .b-desc::-webkit-scrollbar-thumb { background: var(--brand-green); border-radius: 4px; }
/* الكود ده بيخلي المحتوى الداخلي كله في النص */
.proj-card-back .back-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* تعديل الأيقونة عشان تتوسط صح */
.proj-card-back .b-icon {
    width: 60px; 
    height: 60px;
    background: rgba(164, 198, 57, 0.1);
    color: var(--brand-green);
    border-radius: 50%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    font-size: 1.8rem;
    
    /* السطر ده هو اللي هيحل المشكلة ويجيبها في النص بالظبط */
    margin: 0 auto 15px auto; 
    
    box-shadow: 0 0 15px rgba(164, 198, 57, 0.2);
}
/* ==================== قسم شركاء النجاح (التصميم الفخم المضيء) ==================== */

.premium-partners-section {
    position: relative;
    padding: 100px 0;
    /* خلفية متدرجة للأسود العميق جداً لكسر الملل */
    background: linear-gradient(180deg, var(--bg-main) 0%, #0a0404 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

/* تأثير "السبوت لايت" (إضاءة دائرية خلف اللوجوهات) */
.premium-partners-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 80%;
    background: radial-gradient(circle, rgba(164, 198, 57, 0.08) 0%, transparent 70%);
    pointer-events: none; /* عشان ميمنعش كليك الماوس */
    z-index: 1;
}

.partners-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
}

/* صناديق اللوجوهات (Glassmorphism - تأثير الزجاج) */
.premium-partner-box {
    width: 190px;
    height: 110px;
    background: rgba(255, 255, 255, 0.02); /* خلفية بيضاء شفافة جداً */
    backdrop-filter: blur(10px); /* تغبيش زجاجي */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* ظل عميق */
}

/* التأثير عند وضع الماوس (Hover) */
.premium-partner-box:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05); /* تفتيح بسيط للصندوق */
    border-color: var(--brand-green); /* إطار بلون الهوية */
    box-shadow: 0 15px 40px rgba(164, 198, 57, 0.15); /* إشعاع أخضر خفيف */
}

/* اللوجوهات نفسها داخل الصندوق */
.premium-partner-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    opacity: 0.5;
    transition: 0.5s;
}

/* اللوجو يرجع لألوانه الطبيعية ويلمع لما تقف عليه بالماوس */
.premium-partner-box:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.1); /* زووم بسيط جداً للوجو */
}

/* تعديل للموبايل */
@media (max-width: 768px) {
    .premium-partner-box {
        width: 150px;
        height: 90px;
        padding: 15px;
    }
}
/* ==================== تنسيق قسم اليسار في الهيدر ==================== */
.left-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* زر التبديل الليلي/النهاري */
.theme-switch-btn {
    background: transparent;
    border: 1px solid var(--brand-green);
    color: var(--brand-green);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease;
    font-size: 1.1rem;
    outline: none;
}

.theme-switch-btn:hover {
    background: var(--brand-green);
    color: #120808; /* لون داكن أو أبيض حسب ستايلك */
    box-shadow: 0 0 15px var(--brand-green);
    transform: rotate(15deg);
}

/* تنسيقات الموبايل للزرار الجديد */
.mobile-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 768px) {
    .hidden-mobile { display: none; }
    .header-action { display: none !important; }
}
/* ==================== إخفاء أزرار الموبايل على شاشات اللاب توب والكمبيوتر ==================== */
@media (min-width: 769px) {
    .hamburger-menu,
    .mobile-controls {
        display: none !important;
    }
}
/* ==================== أنيميشن سكرول شركاء النجاح ==================== */

.partners-marquee-container {
    width: 100%;
    overflow: hidden; /* إخفاء أي حاجة برا الشاشة */
    position: relative;
    padding: 20px 0;
    direction: ltr; /* ضبط الاتجاه لليسار لضمان سلاسة الحركة في كل المتصفحات */
}

/* تأثير التلاشي (Fade) على اليمين واليسار للفخامة */
.partners-marquee-container::before,
.partners-marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none; /* عشان الماوس يعدي منها عادي */
}

/* التدرج لدمج الحواف مع خلفية الموقع */
.partners-marquee-container::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-main), transparent);
}
.partners-marquee-container::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-main), transparent);
}

/* مسار السكرول */
.partners-track {
    display: flex;
    width: max-content;
    gap: 30px;
    align-items: center;
    /* تشغيل الأنيميشن لمدة 35 ثانية وتتكرر للأبد */
    animation: scroll-partners 35s linear infinite;
}

/* وقوف الحركة لما الماوس ييجي على اللوجوهات */
.partners-track:hover {
    animation-play-state: paused;
}

/* منع انضغاط اللوجوهات */
.premium-partner-box {
    flex-shrink: 0;
}

/* الحركة نفسها */
@keyframes scroll-partners {
    0% {
        transform: translateX(0);
    }
    100% {
        /* السكرول بيمشي لنص المسافة بالظبط (لأننا طابعين اللوجوهات مرتين) */
        transform: translateX(-50%);
    }
}

/* تعديل عرض التلاشي للموبايل */
@media (max-width: 768px) {
    .partners-marquee-container::before,
    .partners-marquee-container::after {
        width: 80px;
    }
}
/* ==================== زر الواتساب العائم الفخم ==================== */
.floating-whatsapp-btn {
    position: fixed;
    right: 30px; /* على يمين الشاشة */
    bottom: 30px;
    z-index: 1000; /* لضمان ظهوره فوق كل شيء */
    
    width: 60px;
    height: 60px;
    background-color: #25D366; /* لون الواتساب الرسمي */
    color: #FFF;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem; /* حجم الأيقونة */
    
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
    transition: all 0.4s ease;
    
    /* حركة النبض لجذب الانتباه */
    animation: whatsappPulse 2s infinite;
}

.floating-whatsapp-btn:hover {
    transform: translateY(-5px) scale(1.1); /* يرتفع ويكبر عند الهوفر */
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.5);
    animation-play-state: paused; /* إيقاف النبض عند الهوفر */
}

/* تعريف حركة النبض */
@keyframes whatsappPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* تعديل للموبايل */
@media (max-width: 768px) {
    .floating-whatsapp-btn {
        width: 50px;
        height: 50px;
        font-size: 1.8rem;
        right: 20px;
        bottom: 20px;
    }
}
/* ==================== أيقونات التواصل في الفوتر (التصميم الجديد) ==================== */

/* إزالة الستايل القديم لضمان عدم التداخل */
.contact-info {
    display: none !important;
}

/* حاوية الأيقونات الجديدة */
.footer-icon-links {
    display: flex;
    gap: 15px; /* مسافة بين الأيقونات */
    margin-top: 20px; /* مسافة تحت عنوان "تواصل معنا" */
}

/* تصميم الأيقونات الفخم */
.footer-icon-links a {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05); /* خلفية زجاجية */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%; /* شكل دائري أنيق */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: var(--brand-green); /* لون الأيقونة */
    font-size: 1.2rem;
    transition: all 0.4s ease;
}

/* تأثير الهوفر الفاخر */
.footer-icon-links a:hover {
    background: var(--brand-green);
    color: #120808; /* لون داكن للأيقونة عند الهوفر */
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(164, 198, 57, 0.3); /* توهج أخضر */
}

/* تعديل للموبايل: توسيط الأيقونات تحت العنوان */
@media (max-width: 768px) {
    .footer-icon-links {
        justify-content: center;
    }
}
/* ==================== تنسيق العنوان والأيقونات في الفوتر ==================== */

/* 1. تنسيق العنوان النصي الجديد */
.footer-address {
    display: flex;
    align-items: center;
    gap: 12px; /* مسافة بين الأيقونة والنص */
    color: var(--text-gray);
    font-size: 0.95rem;
    margin-bottom: 25px; /* مسافة بين العنوان والأيقونات التي تليه */
}

.footer-address i {
    color: var(--brand-green);
    font-size: 1.2rem;
}

/* 2. تنسيق حاوية الأيقونات (كما هو) */
.footer-icon-links {
    display: flex;
    gap: 15px;
}

.footer-icon-links a {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-green);
    font-size: 1.2rem;
    transition: all 0.4s ease;
}

.footer-icon-links a:hover {
    background: var(--brand-green);
    color: #120808;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(164, 198, 57, 0.3);
}

/* 3. تعديل للموبايل: توسيط كل شيء */
@media (max-width: 768px) {
    .footer-address,
    .footer-icon-links {
        justify-content: center;
    }
}
/* ==================== تنسيق منطقة رفع الملفات الفاخرة ==================== */

.premium-label-static {
    display: block;
    color: var(--brand-green);
    font-size: 0.95rem;
    margin-bottom: 10px;
    font-weight: 500;
}

.file-upload-wrapper {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}

/* إخفاء الزر الافتراضي القبيح، وجعله شفافاً يغطي كامل الصندوق */
.file-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

.file-upload-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none; /* لضمان أن الكليك يذهب للـ input المخفي */
}

.upload-icon {
    font-size: 2.5rem;
    color: var(--text-gray);
    transition: all 0.3s ease;
}

.upload-text {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.upload-hint {
    color: var(--text-gray);
    font-size: 0.8rem;
}

/* التأثير عند مرور الماوس */
.file-upload-wrapper:hover {
    background: rgba(164, 198, 57, 0.05);
    border-color: var(--brand-green);
}

.file-upload-wrapper:hover .upload-icon {
    color: var(--brand-green);
    transform: translateY(-5px);
}

/* التأثير عندما يتم اختيار ملف بنجاح */
.file-upload-wrapper.has-file {
    border: 2px solid var(--brand-green);
    background: rgba(164, 198, 57, 0.1);
}

.file-upload-wrapper.has-file .upload-icon {
    color: var(--brand-green);
    content: "\f00c"; /* لتغيير الأيقونة إن أردت لاحقاً */
}

.file-upload-wrapper.has-file .upload-text {
    color: var(--brand-green);
}
        .project-filters {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 50px;
        }

        .filter-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-gray);
            padding: 10px 25px;
            border-radius: 50px;
            font-size: 1rem;
            font-family: var(--font-main);
            font-weight: bold;
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .filter-btn:hover {
            background: rgba(164, 198, 57, 0.1);
            border-color: var(--brand-green);
            color: #fff;
            transform: translateY(-3px);
        }

        .filter-btn.active {
            background: var(--brand-green);
            color: #120808;
            border-color: var(--brand-green);
            box-shadow: 0 10px 20px rgba(164, 198, 57, 0.3);
        }

        /* كلاسات التحكم في الإخفاء والظهور أثناء الفلترة */
        .project-item {
            transition: all 0.5s ease-in-out;
            transform: scale(1);
            opacity: 1;
        }

        .project-item.hide {
            transform: scale(0.8);
            opacity: 0;
            pointer-events: none;
            position: absolute; /* لمنع ترك مساحة فارغة */
            visibility: hidden;
        }

        @media (max-width: 768px) {
            .filter-btn { padding: 8px 15px; font-size: 0.9rem; }
        }
/* ==========================================================================
   ==================== الوضع النهاري (Light Mode) الشامل ====================
   ========================================================================== */

/* 1. المتغيرات الأساسية */
body.light-mode {
    --bg-main: #FCFBF8 !important;       
    --bg-card: #FFFFFF !important;       
    --text-white: #3A2318 !important;    /* بني داكن بديل الأبيض */
    --text-gray: #7A5C53 !important;     /* بني رمادي بديل الرمادي */
    --brand-maroon: #8B4546 !important;  
    --border-subtle: rgba(58, 35, 24, 0.1) !important; 
    --glow-green: 0 5px 15px rgba(164, 198, 57, 0.1) !important;
}

/* ==================== 2. تثبيت الهيدر (إلغاء الشفافية) ==================== */
/* هذا الكود يجعل الهيدر أبيض دائماً في النهار سواء كنت فوق أو تحت */
body.light-mode .luxury-header,
body.light-mode .luxury-header.scrolled {
    background: #FCFBF8 !important; 
    border-bottom: 1px solid rgba(58, 35, 24, 0.08) !important;
    box-shadow: 0 5px 20px rgba(58, 35, 24, 0.05) !important;
    backdrop-filter: none !important; /* إلغاء التغبيش الزجاجي */
    padding: 15px 0 !important; /* تثبيت الحجم لكي لا يقفز */
}
/* روابط الهيدر */
body.light-mode .nav-link {
    color: #3A2318 !important;
}
body.light-mode .nav-link:hover,
body.light-mode .nav-link.active {
    color: var(--brand-green) !important;
}

/* ==================== 3. إجبار كل النصوص على اللون البني ==================== */
body.light-mode,
body.light-mode p,
body.light-mode h1, body.light-mode h2, body.light-mode h3, 
body.light-mode h4, body.light-mode h5, body.light-mode h6,
body.light-mode li,
body.light-mode a:not(.btn-gold-shine):not(.floating-whatsapp-btn), /* استثناء الأزرار الملونة */
body.light-mode .lead-text,
body.light-mode .stat-desc,
body.light-mode .body-text,
body.light-mode .hero-description,
body.light-mode .breadcrumb,
body.light-mode .quote-box,
body.light-mode .role,
body.light-mode .f-name,
body.light-mode .b-desc p,
body.light-mode .footer-bottom-centered p {
    color: var(--text-white) !important;
}

/* استثناء للنصوص التي يجب أن تظل خضراء */
body.light-mode .hero-tagline,
body.light-mode .section-subtitle,
body.light-mode .stat-num,
body.light-mode .hover-hint {
    color: var(--brand-green) !important;
}

/* ==================== 4. إصلاح جميع الأزرار والروابط المفرغة ==================== */
body.light-mode .btn-transparent,
body.light-mode .link-with-arrow {
    color: #3A2318 !important; /* نص بني */
    border: 2px solid #3A2318 !important; /* إطار بني */
    background: transparent !important;
}
body.light-mode .btn-transparent:hover,
body.light-mode .link-with-arrow:hover {
    background: var(--brand-green) !important;
    color: #FFFFFF !important;
    border-color: var(--brand-green) !important;
}

/* ==================== 5. الكروت والخلفيات ==================== */
body.light-mode .glass-card,
body.light-mode .value-card,
body.light-mode .project-box,
body.light-mode .premium-partner-box,
body.light-mode .founder-card,
body.light-mode .member-card-front,
body.light-mode .member-card-back,
body.light-mode .proj-card-front,
body.light-mode .proj-card-back,
body.light-mode .strat-box,
body.light-mode .vm-card,
body.light-mode .goal-item,
body.light-mode .daem-split-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(58, 35, 24, 0.1) !important;
    box-shadow: 0 10px 30px rgba(58, 35, 24, 0.03) !important;
    backdrop-filter: none !important;
}

/* ==================== 6. الأيقونات داخل الكروت ==================== */
body.light-mode .icon-header,
body.light-mode .v-icon-bg,
body.light-mode .p-icon,
body.light-mode .b-icon,
body.light-mode .icon-box,
body.light-mode .s-icon,
body.light-mode .m-photo {
    background: rgba(164, 198, 57, 0.1) !important;
    color: var(--brand-green) !important;
    border: 1px solid rgba(164, 198, 57, 0.2) !important;
}

/* ==================== 7. العناوين المتدرجة (تصبح بنية) ==================== */
body.light-mode .text-gradient-gold,
body.light-mode .section-title, 
body.light-mode .page-title,
body.light-mode .group-title {
    background: linear-gradient(to right, #3A2318 20%, var(--brand-green) 50%, #3A2318 80%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important; 
}
body.light-mode .group-title::before {
    background: linear-gradient(90deg, transparent, rgba(58, 35, 24, 0.3), transparent) !important;
}

/* ==================== 8. تعتيم الصور والطبقات الشفافة ==================== */
body.light-mode .hero-bg-overlay,
body.light-mode .hero-section::after {
    background: linear-gradient(0deg, #FCFBF8 5%, rgba(255, 255, 255, 0.8) 100%) !important;
}
body.light-mode .front-overlay {
    background: linear-gradient(0deg, #FCFBF8 0%, rgba(252, 251, 248, 0.8) 50%, transparent 100%) !important;
}

/* ==================== 9. إرجاع اللوجوهات لألوانها ==================== */
body.light-mode .brand-logo, 
body.light-mode .footer-logo,
body.light-mode .vision-logo {
    filter: none !important;
    -webkit-filter: none !important;
}


/* ==================== 10. الفوتر و مركز داعم ==================== */
body.light-mode .main-footer,
body.light-mode .premium-footer,
body.light-mode .premium-partners-section,
body.light-mode .daem-banner,
body.light-mode .mobile-nav-overlay {
    background: #FCFBF8 !important;
    border-top: 1px solid rgba(58, 35, 24, 0.1) !important;
}
body.light-mode .footer-bottom,
body.light-mode .footer-bottom-centered {
    border-top: 1px solid rgba(58, 35, 24, 0.1) !important;
}
body.light-mode .footer-icon-links a,
body.light-mode .social-links a {
    background: #FFFFFF !important;
    color: var(--brand-green) !important;
    border-color: rgba(58, 35, 24, 0.15) !important;
}

/* ==================== 11. الزخارف ==================== */
body.light-mode .royal-divider .shape-fill { fill: #FCFBF8 !important; }
body.light-mode .floating-crescents i,
body.light-mode .big-moon,
body.light-mode .islamic-symbol,
body.light-mode .daem-visual {
    color: #3A2318 !important;
    opacity: 0.04 !important;
}
body.light-mode .mouse-icon { border-color: #3A2318 !important; }
/* ==========================================================================
   ============= تخصيصات الوضع النهاري لصفحة (من نحن - عن الشركة) =============
   ========================================================================== */

/* 1. تعتيم الهيرو الداخلي (تغيير الستارة السوداء لستارة بيضاء شفافة) */
body.light-mode .hero-overlay {
    background: linear-gradient(0deg, #FCFBF8 0%, rgba(255, 255, 255, 0.7) 100%) !important;
}

/* 2. إحصائيات رأس المال (الصندوق الذي بجوار قصة التأسيس) */
body.light-mode .capital-stats {
    background: #FFFFFF !important;
    border: 1px solid rgba(58, 35, 24, 0.1) !important;
    box-shadow: 0 5px 20px rgba(58, 35, 24, 0.05) !important;
}
body.light-mode .cap-box .num {
    color: #3A2318 !important; /* الرقم العادي بني */
}
body.light-mode .cap-box.target .num {
    color: var(--brand-green) !important; /* الرقم المستهدف أخضر */
    text-shadow: none !important;
}
body.light-mode .arrow-icon {
    color: var(--brand-maroon) !important;
}

/* 3. أرقام الأهداف الاستراتيجية (كانت خضراء باهتة لا تظهر على الأبيض) */
body.light-mode .g-num {
    color: rgba(164, 198, 57, 0.6) !important; /* تغميق اللون الأخضر قليلاً ليوضح */
}

/* 4. إزالة الخلفيات السوداء الثابتة من الأقسام (الهيكل التنظيمي واستراتيجية العمل) */
body.light-mode .strategy-work-section,
body.light-mode .org-chart-section {
    background: #FCFBF8 !important; /* إجبار الخلفية لتكون نفس لون الموقع الكريمي */
}

/* 5. صناديق الهيكل التنظيمي (الجمعية، الإدارة، الإدارات) */
body.light-mode .org-box,
body.light-mode .dept-box {
    background: #FFFFFF !important;
    border: 1px solid rgba(58, 35, 24, 0.15) !important;
    box-shadow: 0 5px 15px rgba(58, 35, 24, 0.05) !important;
}
body.light-mode .org-box h4,
body.light-mode .dept-box span {
    color: #3A2318 !important;
    font-weight: 700 !important;
}
body.light-mode .org-box span {
    color: #7A5C53 !important;
}
body.light-mode .dept-box::before {
    background: var(--brand-maroon) !important; /* الخطوط الموصولة */
}

/* 6. كروت القيادة (الرئيس والنائب - الكروت المميزة Highlight) */
/* الكروت المميزة كانت تأخذ تدرج أسود، الآن تأخذ تدرج سكري فاخر */
body.light-mode .member-card.highlight .member-card-front,
body.light-mode .member-card.highlight .member-card-back {
    background: linear-gradient(180deg, #FDFBF7 0%, #FFFFFF 100%) !important;
    border-color: var(--brand-green) !important;
    box-shadow: 0 10px 30px rgba(164, 198, 57, 0.15) !important;
}
/* تعديل ظهر الكارت لكل الأعضاء في النهار (النبذة التعريفية) */
body.light-mode .member-card-back {
    background: #FFFFFF !important;
    border: 1px solid var(--brand-green) !important;
}
body.light-mode .member-card-back h5 {
    color: var(--brand-green) !important;
    border-bottom: 1px solid rgba(58, 35, 24, 0.1) !important;
}
body.light-mode .bio-text {
    color: #7A5C53 !important;
}

/* 7. سكرول بار النبذة التعريفية في ظهر الكارت */
body.light-mode .bio-text::-webkit-scrollbar-track {
    background: rgba(58, 35, 24, 0.05) !important;
}
/* ==========================================================================
   ============= تخصيصات الوضع النهاري لصفحة (مركز داعم - الفورم) =============
   ========================================================================== */

/* 1. الحاوية الرئيسية للفورم (البطاقة المقسومة) */
body.light-mode .daem-split-card {
    background: #FFFFFF !important; /* خلفية بيضاء نقية */
    border: 1px solid rgba(58, 35, 24, 0.1) !important;
    box-shadow: 0 15px 40px rgba(58, 35, 24, 0.08) !important; /* ظل ناعم بدلاً من الداكن */
    backdrop-filter: none !important; /* إلغاء التغبيش لأنه لا يعمل جيداً على الأبيض */
}

/* 2. النصف الأيمن (المعلومات الجانبية) */
body.light-mode .daem-info-side {
    background: linear-gradient(135deg, rgba(164, 198, 57, 0.05) 0%, #FFFFFF 100%) !important;
    border-left: 1px solid rgba(58, 35, 24, 0.08) !important;
}

/* 3. النصوص داخل النصف الأيمن */
body.light-mode .daem-info-side h2,
body.light-mode .form-heading {
    color: var(--text-white) !important; /* لون بني داكن من متغيراتك */
}

body.light-mode .daem-info-side p,
body.light-mode .form-subheading {
    color: var(--text-gray) !important; /* لون بني فاتح/رمادي */
}

body.light-mode .daem-features li {
    color: var(--text-white) !important;
}

/* 4. حقول الإدخال (Inputs & Textarea) */
body.light-mode .premium-input {
    color: var(--text-white) !important;
    border-bottom: 1px solid rgba(58, 35, 24, 0.2) !important; /* خط سفلي بني فاتح */
}

body.light-mode .premium-input:focus {
    border-bottom-color: transparent !important; /* الخط الأخضر سيغطي عليه */
}

/* 5. العناوين العائمة (Floating Labels) */
body.light-mode .premium-label {
    color: rgba(58, 35, 24, 0.5) !important; /* لون باهت في وضع السكون */
}

body.light-mode .premium-input:focus ~ .premium-label,
body.light-mode .premium-input:not(:placeholder-shown) ~ .premium-label {
    color: var(--brand-green) !important; /* أخضر عند التفعيل */
}

/* 6. أيقونات حقول الإدخال */
body.light-mode .input-icon {
    color: rgba(58, 35, 24, 0.4) !important;
}
body.light-mode .premium-input:focus ~ .input-icon {
    color: var(--brand-green) !important;
}

/* 7. القائمة المنسدلة (Select Options) */
body.light-mode .premium-input option {
    background: #FFFFFF !important;
    color: var(--text-white) !important;
}

/* 8. أزرار التصنيفات العلوية (Tabs) */
body.light-mode .cat-btn {
    background: #FFFFFF !important;
    border: 1px solid rgba(58, 35, 24, 0.1) !important;
    color: var(--text-gray) !important;
}

body.light-mode .cat-btn:hover {
    background: rgba(164, 198, 57, 0.05) !important;
    color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
}

body.light-mode .cat-btn.active {
    background: var(--brand-green) !important;
    color: #120808 !important; /* النص داكن دائماً على الأخضر */
    border-color: var(--brand-green) !important;
    box-shadow: 0 10px 20px rgba(164, 198, 57, 0.2) !important;
}

/* 9. التوهج الخلفي (Glow Blob) */
body.light-mode .bg-glow-blob {
    background: radial-gradient(circle, rgba(164, 198, 57, 0.15) 0%, transparent 70%) !important;
}

/* 10. رسائل التنبيه (Alerts) */
body.light-mode .premium-alert.success {
    background: rgba(164, 198, 57, 0.1) !important;
    color: var(--text-white) !important;
}
body.light-mode .premium-alert.error {
    background: rgba(255, 77, 77, 0.1) !important;
    color: var(--text-white) !important;
}

/* 11. إصلاح الهواتف المحمولة في الوضع النهاري */
@media (max-width: 992px) {
    body.light-mode .daem-info-side {
        border-left: none !important;
        border-bottom: 1px solid rgba(58, 35, 24, 0.08) !important;
    }
}
/* ==========================================================================
   ============= تخصيصات الوضع النهاري للهيدر (Header Light Mode) =============
   ========================================================================== */

/* 1. خلفية الهيدر في الوضع النهاري */
body.light-mode .luxury-header {
    background: rgba(252, 251, 248, 0.95) !important; /* لون سكري/أبيض شفاف قليلاً */
    backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(58, 35, 24, 0.08) !important; /* خط سفلي بني فاتح جداً */
    box-shadow: 0 5px 20px rgba(58, 35, 24, 0.05) !important;
}

/* 2. روابط القائمة (الديسكتوب) */
body.light-mode .nav-link {
    color: #3A2318 !important; /* لون بني داكن وفخم للنصوص */
    font-weight: 600 !important;
}

body.light-mode .nav-link:hover,
body.light-mode .nav-link.active {
    color: var(--brand-green) !important; /* أخضر عند التحديد */
}

/* 3. اللوجوهات (اللوجو الرئيسي + لوجو رؤية 2030) */
body.light-mode .brand-logo,
body.light-mode .vision-logo {
    /* إلغاء الفلتر الأبيض لترجع اللوجوهات لألوانها الطبيعية */
    filter: none !important;
    -webkit-filter: none !important;
}

/* ملاحظة: إذا كان لوجو رؤية 2030 لديك أبيض بالكامل بصيغة PNG، 
استخدم الكود التالي بدلاً من السطرين أعلاه ليتحول للأسود في النهار:
filter: brightness(0) !important; */

/* 4. الخط الفاصل بين اللوجوهات وزر الوضع النهاري */
body.light-mode .logos-separator {
    background-color: rgba(58, 35, 24, 0.15) !important; /* لون بني باهت للفاصل */
}

/* 5. زر تبديل الوضع (الليلي / النهاري) */
body.light-mode .theme-switch-btn {
    border-color: rgba(58, 35, 24, 0.2) !important;
    color: #3A2318 !important; /* لون الأيقونة بني داكن */
    background: transparent !important;
}

body.light-mode .theme-switch-btn:hover {
    background: var(--brand-green) !important;
    color: #FFFFFF !important;
    border-color: var(--brand-green) !important;
}

/* 6. أيقونة قائمة الموبايل (الهامبرجر) */
body.light-mode .hamburger-menu .fa-bars-staggered {
    color: #3A2318 !important; /* لون بني داكن */
}

/* ==========================================================================
   ============= تخصيصات قائمة الموبايل الجانبية (Mobile Nav) =============
   ========================================================================== */

body.light-mode .mobile-nav-overlay {
    background: rgba(252, 251, 248, 0.98) !important; /* خلفية سكرية/بيضاء */
}

body.light-mode .mobile-links a {
    color: #3A2318 !important; /* لون الروابط بني داكن */
    font-weight: 700 !important;
}

body.light-mode .mobile-links a:hover,
body.light-mode .mobile-links a.active {
    color: var(--brand-green) !important;
}

body.light-mode .close-btn {
    color: #3A2318 !important;
}

body.light-mode .close-btn:hover {
    color: var(--brand-green) !important;
}

/* ==========================================================================
   ============= تخصيصات شاشة التحميل الافتتاحية (Preloader) =============
   ========================================================================== */
/* بما أن شاشة التحميل موجودة في الهيدر، يجب أن تكون فاتحة إذا كان الزائر يفضل النهار */

body.light-mode .curtain-left,
body.light-mode .curtain-right {
    background: #FCFBF8 !important; /* ستارة التحميل بيضاء */
}

body.light-mode .loader-company-name {
    color: #3A2318 !important; /* اسم الشركة بني داكن */
    text-shadow: none !important; /* إلغاء التوهج */
}

body.light-mode .loading-bar {
    background: rgba(58, 35, 24, 0.1) !important; /* شريط تحميل باهت */
}

body.light-mode .loader-logo {
    filter: none !important;
    -webkit-filter: none !important;
}
/* ==================== إلغاء تأثير القلب 3D وجعل الكروت ثابتة وفخمة ==================== */

/* إعادة ضبط الحاوية الرئيسية للكارت */
.member-card {
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 20px !important;
    transition: all 0.4s ease !important;
    height: auto !important;
    min-height: 260px !important;
    perspective: none !important; /* إلغاء البعد الثلاثي */
}

/* تأثير الارتفاع والإضاءة عند مرور الماوس (بدون قلب) */
.member-card:hover {
    transform: translateY(-10px) !important;
    border-color: var(--brand-green) !important;
    box-shadow: 0 15px 40px rgba(164, 198, 57, 0.15) !important;
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.8), rgba(18, 8, 8, 0.9)) !important;
}

/* تنسيقات النصوص داخل الكارت الثابت */
.member-card h5 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #fff;
    text-align: center;
}

.member-card .role {
    font-size: 0.9rem;
    color: var(--text-gray);
    letter-spacing: 1px;
    text-align: center;
}

/* كروت الرئيس والنائب (المميزة) في الوضع الليلي */
.member-card.highlight {
    border-color: rgba(164, 198, 57, 0.4) !important;
    background: linear-gradient(180deg, #1f1212 0%, #120808 100%) !important;
}

.member-card.highlight .role {
    color: var(--brand-green);
    font-weight: bold;
}

/* ===== التوافق مع الوضع النهاري (Light Mode) ===== */
body.light-mode .member-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(58, 35, 24, 0.1) !important;
    box-shadow: 0 10px 30px rgba(58, 35, 24, 0.03) !important;
}

body.light-mode .member-card:hover {
    background: #FCFBF8 !important;
}

body.light-mode .member-card h5 {
    color: #3A2318 !important; /* بني داكن */
}

body.light-mode .member-card.highlight {
    background: linear-gradient(180deg, #FDFBF7 0%, #FFFFFF 100%) !important;
    border-color: var(--brand-green) !important;
}
/* ==================== تصميم المؤسسين الفاخر (يناسب الشركات والأفراد) ==================== */
.founders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* كروت أعرض */
    gap: 30px;
    margin-top: 50px;
}

.founder-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.4)) !important;
    border: 1px solid rgba(164, 198, 57, 0.2) !important;
    border-top: 3px solid var(--brand-green) !important; /* خط علوي فخم */
    border-radius: 15px !important;
    padding: 30px 20px !important;
    display: flex !important;
    flex-direction: column !important; /* تصميم رأسي */
    align-items: center !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative;
    overflow: hidden;
}

/* لمعة تتحرك داخل الكارت */
.founder-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transform: skewX(-20deg);
    transition: 0.7s;
}

.founder-card:hover::before {
    left: 150%;
}

.founder-card:hover {
    transform: translateY(-10px) !important;
    background: linear-gradient(145deg, rgba(164, 198, 57, 0.1), rgba(0, 0, 0, 0.6)) !important;
    box-shadow: 0 15px 40px rgba(164, 198, 57, 0.2) !important;
}

/* حاوية الصورة/الشعار */
.founder-card .f-image {
    width: 100px !important; /* حجم كبير للشعارات */
    height: 100px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px dashed rgba(164, 198, 57, 0.5) !important; /* إطار متقطع فخم */
    padding: 8px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: 0.5s !important;
}

.founder-card:hover .f-image {
    border: 2px solid var(--brand-green) !important; /* يتحول لخط متصل عند الهوفر */
    transform: rotate(5deg) scale(1.05) !important;
    box-shadow: 0 0 20px rgba(164, 198, 57, 0.3) !important;
    background: #fff !important; /* تبييض الخلفية ليبرز شعار الشركة */
}

/* الصورة أو الشعار */
.founder-card .f-image img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: contain !important; /* (Contain) ممتاز لشعارات الشركات لكي لا تُقص */
    filter: grayscale(100%) brightness(0.9) !important;
    transition: 0.5s !important;
}

.founder-card:hover .f-image img {
    filter: grayscale(0%) brightness(1) !important; /* تلوين الشعار */
}

/* اسم المؤسس */
.founder-card .f-name {
    font-size: 1.1rem !important;
    color: #fff !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* شارة صغيرة (شريك مؤسس) */
.founder-badge {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--brand-green);
    background: rgba(164, 198, 57, 0.1);
    padding: 4px 12px;
    border-radius: 50px;
    border: 1px solid rgba(164, 198, 57, 0.2);
}

/* التوافق مع الوضع النهاري (Light Mode) للمؤسسين */
body.light-mode .founder-card {
    background: #FFFFFF !important;
    border-color: rgba(58, 35, 24, 0.1) !important;
    box-shadow: 0 10px 30px rgba(58, 35, 24, 0.03) !important;
}
body.light-mode .founder-card:hover {
    background: #FCFBF8 !important;
    border-top-color: var(--brand-green) !important;
}
body.light-mode .founder-card .f-name {
    color: #3A2318 !important;
}
/* تنسيق النص الجانبي لمركز الوقفية (الوضع النهاري) */
body.light-mode .daem-subtitle {
    color: #3A2318 !important; /* لون بني داكن جداً ليكون واضحاً على الفاتح */
}
/* ==================== 1. تعديلات صور المؤسسين (مربعة وبدون فلاتر) ==================== */

/* الحاوية (مربعة بحواف ناعمة جداً للفخامة) */
.founder-card .f-image {
    width: 90px !important; 
    height: 90px !important;
    border-radius: 12px !important; /* شكل مربع بحواف ناعمة */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(164, 198, 57, 0.5) !important; /* إطار متصل وواضح */
    padding: 5px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: 0.5s !important;
}

/* الصورة داخل الحاوية */
.founder-card .f-image img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px !important; /* ليتناسب مع الإطار المربع */
    object-fit: cover !important; 
    filter: none !important; /* إزالة الفلتر الرمادي نهائياً لتظهر الألوان الأصلية */
    transition: 0.5s !important;
}

/* التأثير عند مرور الماوس (تكبير بسيط فقط دون تغيير الألوان لأنها ملونة دائماً) */
.founder-card:hover .f-image img {
    filter: none !important; 
    transform: scale(1.08) !important;
}

/* تأثير الإطار عند مرور الماوس */
.founder-card:hover .f-image {
    border-color: var(--brand-green) !important;
    background: #fff !important; /* خلفية بيضاء تبرز الصورة */
    box-shadow: 0 0 20px rgba(164, 198, 57, 0.4) !important;
}


/* ==================== 2. تعديلات شركاء النجاح (مربعة وفخمة) ==================== */

/* صندوق شريك النجاح */
.premium-partner-box {
    width: 140px !important;  /* العرض */
    height: 140px !important; /* الطول مساوي للعرض ليكون مربعاً تماماً */
    background: rgba(255, 255, 255, 0.02) !important; 
    backdrop-filter: blur(10px) !important; 
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important; /* حواف المربع ناعمة جداً */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 25px !important; /* مساحة داخلية ليتنفس اللوجو */
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; 
    flex-shrink: 0 !important;
}

/* اللوجو داخل الصندوق */
.premium-partner-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* لضمان ظهور اللوجو كاملاً داخل المربع بدون قص */
    opacity: 0.6 !important; /* شفافية بسيطة في البداية للفخامة */
    filter: grayscale(100%) !important; /* أبيض وأسود في البداية */
    transition: 0.5s !important;
}

/* التأثير عند الهوفر لشركاء النجاح */
.premium-partner-box:hover {
    transform: translateY(-10px) scale(1.05) !important;
    background: rgba(255, 255, 255, 0.06) !important; 
    border-color: var(--brand-green) !important; 
    box-shadow: 0 15px 40px rgba(164, 198, 57, 0.2) !important; 
}

.premium-partner-box:hover img {
    opacity: 1 !important;
    filter: grayscale(0%) !important; /* يعود لألوانه الطبيعية المذهلة */
    transform: scale(1.1) !important;
}

/* تعديل حجم المربع للموبايل ليناسب الشاشات الصغيرة */
@media (max-width: 768px) {
    .premium-partner-box {
        width: 110px !important;
        height: 110px !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }
}