/* =========================================
   1. المتغيرات والأساسيات (RTL)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');

:root { 
    --dark-blue: #0F172A; 
    --brand-red: #DD183B; 
    --white: #FFFFFF; 
    --bg-light: #f8fafc; 
    --text-gray: #64748b;
    
    /* متغيرات الوضع الافتراضي */
    --bg-body: #f8fafc;
    --text-main: #0f172a;
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
}

/* الوضع الليلي */
[data-theme="dark"] {
    --bg-body: #0b1120;
    --text-main: #ffffff;
    --card-bg: #1e293b;
    --border-color: #334155;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cairo', sans-serif; scroll-behavior: smooth; }
body { background-color: var(--bg-body); color: var(--text-main); overflow-x: hidden; direction: rtl; text-align: right; transition: background 0.3s, color 0.3s; }

/* إجبار الخلفية في الوضع الليلي */
[data-theme="dark"] body, [data-theme="dark"] section, [data-theme="dark"] main, [data-theme="dark"] .about-box, [data-theme="dark"] .sec-title, [data-theme="dark"] .page-hero {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
}

/* =========================================
   2. الهيدر والقائمة (Header & Nav)
   ========================================= */
/* =========================================
   Header & Mobile Menu (Arabic RTL - Exact English Sizes)
   ========================================= */

header { 
    background: var(--dark-blue); 
    padding: 10px 5%; /* نفس مقاس الإنجليزي */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    border-bottom: 3px solid var(--brand-red); 
    height: 70px; /* نفس الارتفاع */
}

.logo { flex: 0 0 auto; }
.logo img { 
    height: 45px; /* نفس ارتفاع اللوجو */
    width: auto; 
    filter: brightness(1.2); 
    display: block; 
}

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

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

nav ul li { 
    margin: 0 15px; /* نفس المسافات بين الروابط */
}

nav ul li a { 
    color: var(--white); 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 15px; /* نفس حجم الخط */
    transition: 0.3s; 
}

nav ul li a:hover { 
    color: var(--brand-red); 
}

.header-actions { 
    display: flex; 
    align-items: center; 
    gap: 15px; /* نفس المسافة بين الأزرار */
    flex: 0 0 auto; 
}

.btn-header { 
    background: var(--brand-red); 
    color: white; 
    padding: 8px 18px; /* نفس حجم الزر */
    border-radius: 25px; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 13px; /* نفس حجم خط الزر */
    border: 2px solid var(--brand-red); 
    cursor: pointer; 
    white-space: nowrap; 
    transition: 0.3s; 
}

.btn-header:hover { 
    background: transparent; 
    color: var(--brand-red); 
}

/* =========================================
   تنسيق زر الوضع الليلي (Dark/Light Toggle)
   ========================================= */

/* تنسيق الزر العام (مشترك بين الوضعين) */
.header-actions .theme-btn {
    display: flex !important;
    align-items: center; 
    justify-content: center;
    width: 40px !important; 
    height: 40px !important; 
    border-radius: 50%; 
    cursor: pointer; 
    transition: all 0.3s ease;
    margin-left: 10px;
    font-size: 18px;
}

/* --- الحالة 1: الوضع النهاري (Light Mode) --- */
/* بنقوله صراحة: لو الثيم light أو مفيش ثيم محدد، خليك أبيض */
:root:not([data-theme="dark"]) .header-actions .theme-btn,
[data-theme="light"] .header-actions .theme-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important; /* أيقونة بيضاء */
}

/* --- الحالة 2: الوضع الليلي (Dark Mode) --- */
/* بنقوله صراحة: لو الثيم dark، اقلب أحمر */
[data-theme="dark"] .header-actions .theme-btn {
    background: rgba(221, 24, 59, 0.1) !important;
    border: 1px solid var(--brand-red) !important;
    color: var(--brand-red) !important; /* أيقونة حمراء */
}

/* --- عند مرور الماوس (Hover) --- */
.header-actions .theme-btn:hover {
    background: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: #ffffff !important; /* يرجع أبيض */
    transform: scale(1.1);
}

.menu-toggle { 
    color: white; 
    font-size: 24px; 
    cursor: pointer; 
    display: none; 
    background: none; 
    border: none; 
    padding: 5px; 
}

/* زر الثيم (نفس المقاسات) */


/* =========================================
   Mobile Menu (RTL - Exact Sizes)
   ========================================= */
.mobile-menu { 
    position: fixed; 
    top: 0; 
    
    /* التعديل للعربي: يبدأ من اليمين بدلاً من اليسار */
    right: -100%; 
    left: auto; 

    width: 80%; /* نفس العرض 80% */
    height: 100%; 
    background: var(--dark-blue); 
    z-index: 2001; 
    transition: 0.4s ease-in-out; /* نفس توقيت الحركة */
    padding: 30px 20px; /* نفس الحشو الداخلي */
    
    /* التعديل للعربي: الظل يتجه لليسار (-10px) بدلاً من اليمين */
    box-shadow: -10px 0 30px rgba(0,0,0,0.5); 
    
    visibility: hidden; 
}

.mobile-menu.active { 
    right: 0; /* يدخل من اليمين */
    visibility: visible; 
}

.mobile-menu .close-btn { 
    position: absolute; 
    top: 15px; /* نفس المكان من فوق */
    
    /* التعديل للعربي: الزر يكون على اليسار */
    left: 20px; 
    right: auto;

    font-size: 35px; 
    color: var(--brand-red); 
    background: none; 
    border: none; 
    cursor: pointer; 
    z-index: 10002; 
}

.mobile-menu .m-logo { 
    text-align: center; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    padding-bottom: 20px; 
    margin-bottom: 20px; 
    background: transparent !important; 
}

.mobile-menu .m-logo img { 
    background: transparent !important; 
}

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

.mobile-menu ul li { 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    padding: 15px 0; /* نفس مسافة العناصر */
}

.mobile-menu ul li a { 
    color: white; 
    text-decoration: none; 
    font-size: 1.1rem; /* نفس حجم الخط */
    display: block; 
    font-weight: bold; 
}
/* =========================================
   3. الأقسام العامة (Sections & Components)
   ========================================= */
section { padding: 80px 5%; position: relative; }
section::after { 
    content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); 
    width: 60%; height: 3px; background: linear-gradient(to right, transparent, var(--brand-red), transparent); 
    border-radius: 50%; opacity: 0.6; 
}
section:last-of-type::after { display: none; }

.sec-title { text-align: center; margin-bottom: 50px; }
.sec-title h2 { font-size: 2.5rem; color: var(--dark-blue); margin-bottom: 15px; display: inline-block; position: relative; }
.sec-title h2::after { content: ''; width: 60%; height: 4px; background: var(--brand-red); position: absolute; bottom: -10px; left: 20%; }
.sec-subtitle { color: var(--text-gray); font-size: 1.1rem; margin-bottom: 20px; }

/* Swiper Slider */
.swiper { width: 100%; height: 80vh; }
.swiper-slide { background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative; }
.swiper-slide::after { content: ''; position: absolute; inset: 0; background: rgba(15, 23, 42, 0.7); }
.slide-content { position: relative; z-index: 10; text-align: center; color: white; padding: 0 10%; }
.slide-content h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.2; font-weight: 900; }
.slide-content span { color: var(--brand-red); }

/* Buttons */
:root {
  --brand-red: #dd183b; 
}

.btn-action {
  background-color: var(--brand-red); /* خلفية حمراء */
  color: #ffffff; /* كتابة بيضاء */
  border: none;
  
  /* الحجم الجديد (أصغر) */
  padding: 8px 25px; /* قللنا الحشوة عشان الزر يصغر */
  font-size: 0.95rem; /* حجم خط مناسب */
  
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block; /* مش محتاجين flex طالما شلنا السهم */
  cursor: pointer;
  transition: 0.3s;
  margin-top: 15px;
}

.btn-action:hover {
  background-color: #b0132f; /* لون أغمق سنة عند الهوفر */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(221, 24, 59, 0.3);
}

/* =========================================
   4. صفحة من نحن (About)
   ========================================= */
.page-hero { 
    position: relative; height: 350px; display: flex; align-items: center; 
    justify-content: center; text-align: center; overflow: hidden; background: #0F172A; 
}
.page-hero img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.hero-content { position: relative; z-index: 2; color: white; padding: 20px; }
.hero-content h1 { font-size: 3rem; margin-bottom: 15px; font-weight: 900; }
.breadcrumb { font-size: 1rem; color: #cbd5e1; }
.breadcrumb a { color: var(--brand-red); text-decoration: none; font-weight: bold; }

.about-story { display: flex; flex-wrap: wrap; gap: 50px; align-items: center; margin-bottom: 80px; }
.about-text { flex: 1; min-width: 300px; padding: 40px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 25px; position: relative; overflow: hidden; }
.about-text h2 { font-size: 2.2rem; color: var(--dark-blue); margin-bottom: 20px; position: relative; display: inline-block; }
.about-text h2::after { content: ''; width: 50%; height: 4px; background: var(--brand-red); position: absolute; bottom: -10px; left: 0; }
.about-text p { color: var(--text-gray); line-height: 1.8; margin-bottom: 20px; font-size: 1.05rem; }
.about-image { flex: 1; min-width: 300px; }
.about-image img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-right: 10px solid var(--brand-red); }

/* Vision & Mission Cards (VM Grid) */
.vm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.vm-card { background: var(--card-bg); padding: 40px; border-radius: 15px; border: 1px solid var(--border-color); text-align: center; transition: 0.3s; }
.vm-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.05); border-bottom: 5px solid var(--brand-red); }
.vm-card i { font-size: 50px; color: var(--brand-red); margin-bottom: 20px; }
.vm-card h3 { color: var(--dark-blue); margin-bottom: 15px; font-size: 1.5rem; }
.vm-card p { color: var(--text-gray); line-height: 1.7; }

/* Stats Section */
.stats-section { background: var(--dark-blue); color: white; padding: 60px 5%; text-align: center; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }
.stat-item h3 { font-size: 3rem; color: var(--brand-red); font-weight: 900; margin-bottom: 10px; }
.stat-item p { font-size: 1.1rem; opacity: 0.9; }

/* CTA Section */
.cta-section { text-align: center; background: var(--card-bg); border-top: 1px solid var(--border-color); padding: 60px 0; }
.cta-section h2 { font-size: 2.2rem; color: var(--dark-blue); margin-bottom: 20px; }

/* =========================================
   5. الخدمات والأسئلة والمدونة (Other Sections)
   ========================================= */
/* Services Cards */
.grid-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
.card { background: var(--card-bg); padding: 40px 25px; border-radius: 15px; text-align: center; transition: 0.4s; border: 1px solid var(--border-color); cursor: pointer; }
.card:hover { transform: translateY(-10px); border-bottom: 5px solid var(--brand-red); box-shadow: 0 15px 30px rgba(0,0,0,0.05); }
.card i { font-size: 50px; color: var(--brand-red); margin-bottom: 20px; }
.card h3 { font-size: 1.4rem; color: var(--dark-blue); margin-bottom: 10px; }
.card p { color: var(--text-gray); font-size: 0.95rem; line-height: 1.6; }

/* FAQ */
.faq-container { max-width: 900px; margin: 0 auto; }
.faq-item { background: var(--card-bg); margin-bottom: 15px; border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; transition: 0.3s; }
.faq-question { padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 700; color: var(--dark-blue); width: 100%; border: none; background: none; font-family: inherit; font-size: inherit; }
.faq-answer { max-height: 0; padding: 0 25px; overflow: hidden; transition: 0.4s ease; color: var(--text-gray); line-height: 1.8; }
.faq-item.active { border-color: var(--brand-red); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.faq-item.active .faq-answer { max-height: 500px; padding: 20px 25px; border-top: 1px solid var(--border-color); }

/* Blog Section */
.blog-section { 
    background-color: var(--bg-light); 
    padding: 60px 5%;
}

.blog-grid { 
    display: grid; 
    /* تعديل: تحديد 3 أعمدة ثابتة في الشاشات الكبيرة */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    max-width: 1200px; 
    margin: 40px auto; 
}

/* التجاوب مع الشاشات المتوسطة (تابلت) */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr); /* مقالتين جنب بعض */
    }
}

/* التجاوب مع الموبايل */
@media (max-width: 768px) {
    /* 1. الكونتينر (الشبكة): يجبر العناصر تتمدد لنفس الارتفاع */
    .blog-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 15px !important;
        padding-bottom: 25px !important;
        
        /* السطر ده هو السر: بيخلي كل الكروت تاخد طول أطول كارت فيهم */
        align-items: stretch !important; 
        
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
    }

    /* 2. الكارت: لازم ياخد الطول الكامل */
    .blog-card {
        min-width: 280px !important;
        width: 280px !important;
        
        /* يضمن إن الكارت يغطي المساحة المتاحة بالكامل */
        height: auto !important; 
        align-self: stretch !important; 
        
        scroll-snap-align: center;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 3. المحتوى الداخلي: توزيع المسافات عشان الزرار ينزل تحت */
    .blog-content {
        flex: 1 1 auto !important; /* يملأ المساحة الفاضية */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; /* يفصل النص عن الزرار */
    }

    /* 4. تثبيت ارتفاع الصورة */
    .blog-card img {
        height: 180px !important; /* تصغير الصورة شوية في الموبايل للتناسب */
        flex-shrink: 0 !important; /* منع الصورة من الانكماش */
    }

}

/* =========================================
   6. الفوتر (Footer) - النسخة النهائية
   ========================================= */
.hexogen-footer {
    background-color: #0b1221;
    color: #ffffff;
    padding-top: 0;
    position: relative;
    text-align: right;
    direction: rtl;
    padding-bottom: 20px;
    margin-top: 50px;
}

.red-line { background-color: #dc3545; height: 5px; width: 100%; margin-bottom: 40px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
.footer-col { flex: 1; min-width: 250px; }
.footer-col h3 { color: #dc3545; margin-bottom: 20px; font-size: 1.2rem; font-weight: 700; }
.footer-col p, .footer-col li { font-size: 0.95rem; line-height: 1.8; color: #e2e8f0; }
/* كود جديد عشان يخلي رقم الموبايل والروابط لونها أبيض */
.footer-col a {
    color: #ffffff !important;
    text-decoration: none;
    transition: 0.3s;
}

.footer-col a:hover {
    color: var(--brand-red) !important; /* لما تقف عليه يحمر */
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.footer-col ul li i { color: #dc3545; width: 20px; text-align: center; }

/* =========================================
   تعديل أيقونات السوشيال ميديا (Fix Social Icons)
   ========================================= */

/* 1. التنسيق الأساسي (الوضع الفاتح) */
.social-icons { display: flex; gap: 10px; }

.social-icons a { 
    display: flex; justify-content: center; align-items: center; 
    width: 40px; height: 40px; 
    background-color: #ffffff; /* خلفية الدائرة بيضاء */
    color: #0b1221;            /* لون الأيقونة كحلي */
    border-radius: 50%; 
    text-decoration: none; 
    font-size: 1.2rem; 
    transition: 0.3s; 
    border: 1px solid transparent; /* تجهيز للبوردر */
}

/* 2. التنسيق الخاص بالوضع الليلي (Dark Mode) - ده اللي هيحل المشكلة */
/* عند تفعيل الوضع الليلي: زر الثيم يصبح أحمر */
/* =========================================
   إصلاح أيقونات السوشيال ميديا في الوضع الليلي
   ========================================= */

/* 1. إجبار الأيقونات على الحفاظ على شكلها (دائرة بيضاء وأيقونة كحلي) حتى في الوضع الليلي */
[data-theme="dark"] .social-icons a {
    background-color: #ffffff !important; /* خلفية الدائرة بيضاء */
    color: #0b1221 !important;           /* لون الأيقونة كحلي */
    border: 1px solid transparent !important;
}

/* 2. عند مرور الماوس في الوضع الليلي (تتحول للأحمر) */
[data-theme="dark"] .social-icons a:hover {
    background-color: var(--brand-red) !important;
    color: #ffffff !important;
    border-color: var(--brand-red) !important;
    box-shadow: 0 0 10px rgba(221, 24, 59, 0.4); /* إضافة توهج بسيط */
}

/* 3. عند مرور الماوس (Hover) - يعمل في الوضعين */
.social-icons a:hover { 
    background-color: #dc3545; /* خلفية حمراء */
    color: white;              /* أيقونة بيضاء */
    border-color: #dc3545;
}

/* تنسيق قسم طلب الخدمة (الفوتر + المودال) */
.service-request-section { 
    background-color: #162032; padding: 25px; border-radius: 8px; 
    margin-bottom: 30px; border: 1px solid #2d3748; 
}
.service-request-section h3 { margin-top: 0; margin-bottom: 15px; color: #ffffff; }

.request-form .form-row { display: flex; gap: 15px; margin-bottom: 15px; }
.request-form input, .request-form select, .request-form textarea { 
    width: 100%; padding: 12px; border: none; border-radius: 4px; 
    background-color: #ffffff; font-family: 'Cairo', sans-serif; outline: none; 
    box-sizing: border-box; 
}
.request-form button { 
    background-color: #dc3545; color: white; border: none; padding: 10px 25px; 
    border-radius: 4px; cursor: pointer; font-weight: bold; margin-top: 10px; width: 100%; transition: 0.3s;
}
.request-form button:hover { background-color: #b02a37; }

/* حقوق الملكية */
.copyright { 
    border-top: 1px solid #2d3748; padding: 20px 0; display: flex; 
    justify-content: space-between; align-items: center; font-size: 0.9rem; color: #a0aec0; 
}

/* =========================================
   7. المودال والأزرار العائمة
   ========================================= */
/* =========================================
   Floating Buttons (Fixed Colors Always)
   ========================================= */
/* =========================================
   7. المودال والأزرار العائمة (تم التعديل لإزالة الخلفية الزرقاء)
   ========================================= */
.floating-buttons { 
    position: fixed; 
    bottom: 20px; 
    left: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    z-index: 1000;
    
    /* إصلاح 1: التأكد إن الحاوية نفسها شفافة تماماً */
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
}

.floating-buttons a { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    
    /* تثبيت لون الأيقونة أبيض دائماً */
    color: #ffffff !important; 
    text-decoration: none; 
    font-size: 24px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); 
    transition: transform 0.3s;
    
    /* إصلاح 2: مسح أي حدود أو خلفيات قديمة قبل وضع الألوان */
    border: none !important; 
}

/* إصلاح 3: منع الروابط من أخذ خلفية زرقاء في الوضع الليلي */
[data-theme="dark"] .floating-buttons a {
    background-color: transparent; /* تصفير الخلفية العامة */
}

.floating-buttons a:hover { 
    transform: scale(1.1); 
    /* ضمان عدم تغير اللون عند الماوس */
    color: #ffffff !important; 
}

/* تثبيت الخلفيات بألوان ثابتة لا تتأثر بالثيم */
/* هنا بنستخدم Selector قوي عشان يغلب أي لون تاني */
[data-theme="dark"] .btn-whatsapp,
.btn-whatsapp { 
    background-color: #25D366 !important; /* أخضر واتساب ثابت */
}

[data-theme="dark"] .btn-call,
.btn-call { 
    background-color: #dc3545 !important; /* أحمر ثابت */
}

/* =========================================
   8. تخصيصات الوضع الليلي الإضافية (Dark Mode Fixes)
   ========================================= */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] .sec-title h2, [data-theme="dark"] .faq-question { color: var(--brand-red) !important; }
[data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span, [data-theme="dark"] .faq-answer { color: #ffffff !important; opacity: 1 !important; }
[data-theme="dark"] section::after { opacity: 1; box-shadow: 0 0 10px rgba(221, 24, 59, 0.3); }
[data-theme="dark"] .blog-card a, [data-theme="dark"] .card a { color: var(--brand-red) !important; text-decoration: underline; }

/* استثناء الفوتر من تغييرات الألوان في الوضع الليلي */
[data-theme="dark"] .hexogen-footer, [data-theme="dark"] .hexogen-footer * {
    background-color: inherit; 
}
[data-theme="dark"] .hexogen-footer h3 { color: #dc3545 !important; }
[data-theme="dark"] .hexogen-footer p, [data-theme="dark"] .hexogen-footer li { color: #e2e8f0 !important; }
[data-theme="dark"] .service-request-section { background-color: #162032 !important; border-color: #2d3748; }

/* =========================================
   9. التجاوب (Media Queries)
   ========================================= */
@media (max-width: 992px) {
    /* 1. إخفاء القائمة وإظهار زر الموبايل */
    nav { display: none; }
    .menu-toggle { display: block; }
    .header-actions { gap: 10px; }

    /* 2. تنسيق الهيدر (يتحرك مع الصفحة إجباري) */
    header, 
    header.sticky, 
    header.fixed-top {
        padding: 10px 3%;
        
        /* التعديل القوي: static بيخلي العنصر جزء طبيعي من الصفحة ويتحرك معاها */
        position: static !important; 
        
        /* ضمان إلغاء أي تأثيرات تانية */
        top: auto !important;
        transform: none !important; 
        width: 100% !important;
    }

    /* 3. تنسيقات الأقسام العامة */
    section {
        padding: 40px 3%;
    }

    .contact-form {
        padding: 25px;
    }

    /* 4. الخطوط والعناوين */
    .page-hero h1 {
        font-size: 2rem;
    }

    .about-text h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    /* 1. ضبط الارتفاع */
    .swiper, 
    .swiper-slide { 
        height: 60vh !important; 
        min-height: 400px !important; 
    }

    /* 2. السنترة */
    .slide-content { 
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; 
        padding: 0 20px !important; 
        width: 100% !important; 
        box-sizing: border-box !important;
        text-align: center !important; /* تأكيد السنترة للنص */
    }

    /* 3. تعديل حجم الخط (العنوان + الكلاس التاني) */
    /* هنا ضفنا .h1-style عشان السلايد التاني يتظبط */
    .slide-content h1, 
    .slide-content .h1-style { 
        font-size: 1.6rem !important; 
        line-height: 1.4 !important; 
        margin-bottom: 10px !important;
        font-weight: 900 !important;
        display: block !important; /* تأكد إنه واخد مساحة السطر */
    }

    /* 4. الوصف */
    .slide-content p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }

    /* 5. الزرار */
    .slide-content .btn-action {
        padding: 10px 25px !important;
        font-size: 0.85rem !important;
        margin: 0 auto !important; /* سنترة الزرار */
    }

.about-text div[style*="column-count"] { column-count: 1 !important; }
    
    /* Blog */
    /* 1. إعدادات الحاوية (الكونتينر) عشان تقبل السكرول */
    .blog-grid {
        display: flex !important;        /* عرض مرن */
        flex-direction: row !important;  /* ترتيب أفقي */
        flex-wrap: nowrap !important;    /* منع النزول لسطر جديد */
        overflow-x: auto !important;     /* السماح بالسكرول بالعرض */
        scroll-snap-type: x mandatory;   /* ميزة تخلي الكارت يقف في النص عند السحب */
        gap: 15px !important;            /* مسافة بين الكروت */
        padding-bottom: 20px !important; /* مساحة عشان السكرول بار */
        
        /* إخفاء السكرول بار لشكل أجمل (اختياري) */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
    }
    
    .blog-grid::-webkit-scrollbar {
        display: none;
    }

    /* 2. تثبيت عرض الكارت عشان ميكشش */
    .blog-card {
        min-width: 280px !important;     /* عرض ثابت لكل كارت */
        max-width: 280px !important;
        scroll-snap-align: center;       /* الكارت ييجي في نص الشاشة */
    }
    
    /* Footer & Forms */
    .footer-content { flex-direction: column; }
    .request-form .form-row { flex-direction: column; }
    .copyright { flex-direction: column; text-align: center; gap: 10px; }
    .modal-content { padding: 20px; width: 90%; }
    
    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* خلفية المودال */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.9); /* خلفية داكنة */
    display: none; 
    align-items: center; 
    justify-content: center;
    z-index: 99999 !important; /* رقم عالي جداً ليكون فوق كل شيء */
}

/* صندوق المودال الأبيض */
.modal-content {
    z-index: 100000 !important;
    background: var(--card-bg);
    /* باقي تنسيقاتك */
}

/* =========================================
   تأمين ظهور الفورم فوق كل شيء (Super Z-Index)
   ========================================= */

.modal-overlay {
    position: fixed !important; /* ثابتة بالنسبة للشاشة وليس للعناصر */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important; /* عرض الشاشة بالكامل */
    height: 100vh !important; /* طول الشاشة بالكامل */
    background: rgba(0, 0, 0, 0.85) !important; /* خلفية معتمة */
    
    /* التوسط */
    display: none; /* يتم تغييره لـ flex بواسطة JS */
    align-items: center; 
    justify-content: center;
    
    /* الطبقة العليا */
    z-index: 999999 !important; /* أعلى قيمة ممكنة لضمان الظهور فوق الكل */
}

.modal-content {
    position: relative !important;
    z-index: 1000000 !important; /* أعلى من الـ overlay بمرتبة */
    background: var(--card-bg, #ffffff);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* ظل قوي لتعزيز العمق */
    
    /* للموبايل */
    width: 90%;
    max-width: 500px;
}

/* --- تنسيقات صفحة شركاء النجاح (Partners Page) --- */

/* 1. قسم الهيرو (صورة العنوان) */
.page-hero {
  position: relative;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-color: var(--dark-blue);
}

.page-hero img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3; /* تغميق الصورة عشان الكلام يبان */
}

.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  padding: 20px;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  font-weight: 900;
}

.breadcrumb {
  font-size: 1rem;
  color: #cbd5e1;
}

.breadcrumb a {
  color: var(--brand-red);
  text-decoration: none;
  font-weight: bold;
}

/* 2. النصوص التمهيدية */
.intro-text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

.intro-text h2 {
  font-size: 2.2rem;
  color: var(--dark-blue);
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.intro-text h2::after {
  content: '';
  width: 50%;
  height: 4px;
  background: var(--brand-red);
  position: absolute;
  bottom: -10px;
  left: 25%;
}

.intro-text p {
  color: var(--text-gray);
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* 3. شبكة الشركاء (Partners Grid) */
/* =========================================
   تنسيق شبكة الشركاء (إصلاح التوزيع)
   ========================================= */
/* تنسيق صور الشركاء (تعديل لإظهار الألوان دائماً) */
.partner-card img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    
    /* ألغينا السطرين دول عشان الألوان تظهر علطول */
    /* filter: grayscale(100%); */
    /* opacity: 0.7; */
    
    /* خليناها كدة عشان تظهر بوضوح كامل */
    filter: none; 
    opacity: 1;
    
    transition: 0.3s;
}

/* عند الوقوف بالماوس (مجرد تكبير بسيط بدون تغيير ألوان لأنها ملونة أصلاً) */
.partner-card:hover img {
    transform: scale(1.1);
}

/* 4. قسم CTA (انضم إلينا) */
.cta-section {
  text-align: center;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 80px 5%;
  margin-top: 40px;
}

.cta-section h2 {
  font-size: 2rem;
  color: var(--dark-blue);
  margin-bottom: 20px;
}

.cta-paragraph {
  margin-bottom: 30px;
  color: var(--text-gray);
  font-size: 1.1rem;
}

/* زر Large (موجود بالفعل بس للتأكيد) */
.btn-large {
  background: var(--brand-red);
  color: white;
  padding: 15px 50px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
  display: inline-block;
  transition: 0.3s;
  cursor: pointer;
  border: none;
}

.btn-large:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(221, 24, 59, 0.3);
}

/* تحسينات الموبايل */
@media (max-width: 992px) {
  .partners-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
  }
  .partner-card {
    height: 140px;
    padding: 10px;
  }
  .partner-card img {
    max-height: 110px;
  }
}

/* =========================================
   تنسيق هيكلي فقط (بدون تغيير الألوان)
   ========================================= */

/* 1. تقسيم الصفحة لنصفين (يمين ويسار) */
.contact-container {
    display: grid;
    /* العمود الأول (المعلومات) يأخذ مساحة واحدة، والعمود الثاني (الفورم) يأخذ مساحتين */
    grid-template-columns: 1fr 2fr; 
    gap: 30px; /* مسافة بين العمودين */
    align-items: start; /* محاذاة العناصر من الأعلى */
    
    /* ضبط الاتجاه للعربي */
    direction: rtl; 
    text-align: right;
    
    /* هوامش خارجية لضبط المحتوى في منتصف الشاشة */
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
}

/* 2. ضبط ظهور الأيقونات بجانب الكلام */
.info-card {
    display: flex;
    align-items: center;
    margin-bottom: 25px; /* مسافة تحت كل كارت */
}

.info-card i {
    margin-left: 15px; /* مسافة تفصل الأيقونة عن النص */
    /* لن نغير اللون أو الحجم، سيأخذ تنسيق موقعك الافتراضي */
}

/* 3. ضبط حقول الإدخال لتظهر بشكل سليم */
.contact-form .form-group {
    margin-bottom: 15px;
}

/* إجبار الحقل أن يملأ المساحة المتاحة له فقط دون تغيير شكله */
.contact-form .form-control {
    display: block;
    width: 100%; 
    direction: rtl;
    text-align: right;
    box-sizing: border-box; /* مهم جداً لمنع الخروج عن الإطار */
}

/* 4. جعل التصميم متجاوب للموبايل (تحت بعض) */
@media (max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr; /* عمود واحد فقط */
        gap: 20px;
    }
}

/* =========================================
   متغيرات الألوان والخطوط (مستخرجة من الكود)
   ========================================= */
:root {
    --dark-blue: #0F172A;
    --brand-red: #DD183B;
    --white: #FFFFFF;
    --bg-light: #f8fafc;
    --text-gray: #64748b;
}

body {
    background-color: var(--bg-light);
    color: var(--dark-blue);
    font-family: 'Cairo', sans-serif;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* =========================================
   تنسيق الهيرو (صورة الخلفية العلوية)
   ========================================= */
.page-hero {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background-color: #0F172A;
}

.page-hero img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    padding: 20px;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    font-weight: 900;
}

.breadcrumb {
    font-size: 1rem;
    color: #cbd5e1;
}

.breadcrumb a {
    color: var(--brand-red);
    text-decoration: none;
    font-weight: bold;
}

/* =========================================
   تنسيق صفحة اتصل بنا (Contact Section)
   ========================================= */
section {
    padding: 60px 5%;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* المسافة بين العمودين */
}

/* --- العمود الأيمن: معلومات الاتصال --- */
.contact-info {
    flex: 1;
    min-width: 300px;
}

.info-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #eee;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 20px; /* مسافة بين الأيقونة والكلام */
    transition: 0.3s;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-left: 5px solid var(--brand-red); /* خط أحمر جانبي عند الماوس */
}

.info-card i {
    font-size: 25px;
    color: var(--brand-red);
    background: rgba(221, 24, 59, 0.1);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.info-content h3 {
    font-size: 1.2rem;
    color: var(--dark-blue);
    margin-bottom: 5px;
    margin-top: 0;
}

.info-content p, 
.info-content a {
    color: var(--text-gray);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.info-content a:hover {
    color: var(--brand-red);
}

/* --- العمود الأيسر: نموذج الاتصال (Form) --- */
.contact-form {
    flex: 1.5; /* حجم أكبر للفورم */
    min-width: 300px;
    background: white;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.contact-form h2 {
    color: var(--dark-blue);
    margin-bottom: 20px;
    font-size: 2rem;
    margin-top: 0;
}

.form-group {
    margin-bottom: 20px;
}

.form-control {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
    background: #fff;
    box-sizing: border-box; /* هام لعدم خروج الحقل عن الإطار */
}

.form-control:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 3px rgba(221, 24, 59, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.btn-submit {
    background: var(--brand-red);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    width: 100%;
    transition: 0.3s;
}

.btn-submit:hover {
    background: #b91330;
}

/* =========================================
   تنسيق الخريطة (Map)
   ========================================= */
.map-section {
    padding: 0;
    height: 400px;
    width: 100%;
    overflow: hidden;
    margin-top: 40px;
}

iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* =========================================
   تجاوب الموبايل (Responsive)
   ========================================= */


/* =========================================
   تنسيقات صفحة المدونة (Blog Styles)
   ========================================= */

/* 1. تنسيق الهيرو الخاص بالمدونة */
.blog-page-header {
    padding: 100px 5% 60px;
    text-align: center;
    /* تأكد من مسار الصورة */
    background: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.8)), url('https://hexogen-eg.com/wp-content/uploads/2025/06/abstract-cybersecurity-concept-design-scaled.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    margin-bottom: 50px;
}

.blog-page-header h1 {
    font-size: 3rem;
    font-weight: 900;
    margin: 0 0 10px;
}

.blog-page-header h1 span {
    color: var(--brand-red);
}

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

/* 2. حاوية المقالات (Grid System) */
.blog-container {
    padding: 0 5% 80px; /* المسافة من الجوانب ومن الأسفل */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* نظام الأعمدة المتجاوب */
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* 3. تصميم الكارت (Card Design) */
.blog-card {
    background: var(--white); /* الافتراضي أبيض */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
    display: flex;
    flex-direction: column;
}

/* دعم الوضع الليلي للكارت */
[data-theme="dark"] .blog-card {
    background: #1e293b;
    border-color: #334155;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--brand-red);
}

/* صورة المقال */
.blog-img-wrapper {
    height: 240px;
    overflow: hidden;
    position: relative;
}

.blog-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover img {
    transform: scale(1.1); /* زووم خفيف عند الماوس */
}

/* محتوى المقال */
.blog-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-date {
    font-size: 0.85rem;
    color: var(--brand-red);
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

.blog-content h3 {
    margin: 0 0 15px 0;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--dark-blue);
}

[data-theme="dark"] .blog-content h3 {
    color: #f1f5f9;
}

.blog-content p {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 25px;
    flex-grow: 1;
}

[data-theme="dark"] .blog-content p {
    color: #94a3b8;
}

/* زر اقرأ المزيد */
.read-more-btn {
    display: inline-block;
    color: var(--brand-red);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    border: 2px solid #e2e8f0;
    padding: 10px 20px;
    border-radius: 8px;
    align-self: flex-start;
    transition: 0.3s;
}

[data-theme="dark"] .read-more-btn {
    border-color: #334155;
}

.read-more-btn:hover {
    background: var(--brand-red);
    color: white;
    border-color: var(--brand-red);
}

/* 4. رسالة "لا توجد مقالات" */
.no-posts {
    grid-column: 1/-1;
    text-align: center;
    padding: 50px;
    color: #64748b;
}

/* 5. تجاوب الموبايل */
@media (max-width: 768px) {
    .blog-page-header {
        padding: 80px 5% 40px;
    }
    
    .blog-page-header h1 {
        font-size: 2rem;
    }
    
    .blog-container {
        grid-template-columns: 1fr; /* عمود واحد */
        gap: 30px;
    }
}




/* =========================================
   تنسيق شبكة الشركاء (إصلاح التوزيع)
   ========================================= */
.partners-grid {
    display: grid !important; /* إجبار التوزيع الشبكي */
    /* توزيع العناصر أوتوماتيك (كل واحد ياخد 180 بيكسل) */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 30px;
    width: 100%;
    margin-top: 40px;
}

.partner-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px; /* ارتفاع ثابت عشان الشكل يظبط */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.partner-card img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain; /* عشان اللوجو يبان كامل */
    filter: grayscale(100%); /* اختياري: يخلي اللوجوهات رمادي */
    opacity: 0.7;
    transition: 0.3s;
}

.partner-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-red);
}

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



/* =========================================
   إصلاح مشاكل الزووم (Zoom Fixes)
   ========================================= */

/* 1. منع العناصر من الخروج عن حدود الشاشة */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important; /* يمنع السكرول العرضي المزعج */
}

/* 2. تحويل الارتفاعات الثابتة لارتفاعات مرنة */
/* ده أهم جزء: بيخلي الكروت تطول لو الكلام كبر */
.card, 
.partner-card, 
.blog-card, 
.vm-card, 
.about-text {
    height: auto !important;       /* إلغاء الارتفاع الثابت */
    min-height: 100%;             /* يضمن إنهم قد بعض في نفس السطر */
    display: flex;
    flex-direction: column;
    justify-content: center;      /* سنترة المحتوى بالطول */
}

/* 3. إصلاح الهيدر عشان الزراير متنزلش سطر جديد وتبوظه */
header {
    height: auto !important;      /* يسمح للهيدر يطول لو الزووم كبير جداً */
    min-height: 70px;
    flex-wrap: wrap;              /* يسمح للعناصر تنزل تحت بعض لو مفيش مكان */
}

/* 4. ضبط الصور عشان متخرجش بره الكروت */
img {
    max-width: 100%;
    height: auto;
}

/* 5. إصلاح شبكة الخدمات والشركاء مع الزووم */
.grid-6, 
.partners-grid, 
.vm-grid, 
.stats-grid {
    width: 100%;
    /* ده بيضمن إن العناصر تصغر وتكبر بذكاء */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

/* إصلاح خاص لكروت الشركاء عشان اللوجوهات متبكسلش */
.partner-card {
    min-height: 150px !important; /* أقل ارتفاع مقبول */
    padding: 10px !important;
}

.partner-card img {
    object-fit: contain !important;
    max-height: 100px !important; /* حجم اللوجو يفضل مناسب */
}



/* =========================================
   إصلاح ألوان أيقونات السوشيال ميديا (Fix Social Icons Color)
   ========================================= */

/* 1. إجبار الأيقونة تكون كحلي غامق عشان تبان جوه الدايرة البيضاء */
.footer-col .social-icons a {
    color: #0b1221 !important; /* لون الأيقونة */
    background-color: #ffffff !important; /* لون الخلفية (الدايرة) */
    border: 1px solid transparent;
}

/* 2. عند مرور الماوس (Hover): الخلفية تحمر والأيقونة تبيض */
.footer-col .social-icons a:hover {
    background-color: var(--brand-red) !important;
    color: #ffffff !important;
    border-color: var(--brand-red) !important;
    transform: translateY(-3px); /* حركة خفيفة لفوق */
}

/* 3. ضمان إن الوضع الليلي ميغيرش الألوان دي */
[data-theme="dark"] .footer-col .social-icons a {
    color: #0b1221 !important;
    background-color: #ffffff !important;
}

[data-theme="dark"] .footer-col .social-icons a:hover {
    background-color: var(--brand-red) !important;
    color: #ffffff !important;
}

/* =========================================
   تنسيق قسم من نحن (الصورة جنب الكلام في الكمبيوتر - وتحته في الموبايل)
   ========================================= */

/* 1. الكمبيوتر (جنب بعض) */
.about-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 40px;
    background-color: var(--card-bg);
    border-radius: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow: hidden; /* عشان الحواف المدورة */
}

.about-text {
    flex: 1;
    padding: 40px;
}

.about-img {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 350px;
    object-fit: cover !important;
    border-radius: 0 20px 20px 0; /* تدوير للحواف الجانبية */
}

/* 2. الموبايل (تحت بعض - الصورة في الأسفل) */
@media (max-width: 992px) {
    .about-box {
        flex-direction: column !important; /* رصهم عمودي */
        text-align: center;
        gap: 0;
    }

    .about-text {
        order: 1 !important; /* (1) الكلام يظهر الأول فوق */
        padding: 30px 20px;
    }

    .about-img {
        order: 2 !important; /* (2) الصورة تظهر التانية تحت */
        width: 100%;
        height: 250px; /* ارتفاع مناسب للموبايل */
    }

    .about-img img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 0 25px 25px; /* تدوير الحواف من تحت بس */
    }

    /* إخفاء الخط الجانبي في الموبايل */
    .about-text div[style*="absolute"] {
        display: none;
    }
}

/* =========================================
   تنسيق سلايدر الاعتمادات المتحرك (Infinite Slider)
   ========================================= */

.cert-slider-section {
    padding: 60px 0;
    background-color: #f8f9fa; /* لون خلفية فاتح */
    overflow: hidden; /* عشان يخفي أي حاجة تخرج بره الشاشة */
}

/* الحاوية اللي ماسكة الشريط المتحرك */
.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* الشريط اللي بيتحرك نفسه */
.slider-track {
    display: flex;
    width: max-content; /* عرضه على قد المحتوى اللي جواه */
    /* هنا سر الحركة: 30 ثانية، حركة خطية، وتتكرر للابد */
    animation: scroll 30s linear infinite; 
}

/* العنصر الواحد (اللوجو) */
.slide-item {
    width: 180px; /* عرض ثابت لكل لوجو */
    height: 100px; /* ارتفاع ثابت */
    margin: 0 30px; /* مسافة بين اللوجوهات */
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* =========================================
   تحديث تنسيق عنصر السلايدر (لإزالة الخلفية)
   ========================================= */

/* العنصر الواحد (اللوجو) */
.slide-item {
    width: 180px; /* عرض ثابت */
    height: 100px; /* ارتفاع ثابت */
    margin: 0 30px; /* مسافة جانبية */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* --- التعديلات هنا --- */
    background: transparent; /* إلغاء الخلفية البيضاء */
    /* box-shadow: none; */    /* إلغاء الضل (اختياري، لو عايزه شيل علامة التعليق) */
    /* border-radius: 0; */    /* إلغاء تدوير الحواف */
    padding: 10px;           /* تقليل الحواف الداخلية شوية */
}

/* تنسيق الصورة نفسها */
.slide-item img {
    max-width: 100%; /* عشان تاخد راحتها في المساحة */
    max-height: 100%;
    object-fit: contain;
    filter: none; /* الألوان طبيعية */
    opacity: 1;
    transition: 0.3s transform;
}

/* عند الوقوف بالماوس (تكبير فقط) */
.slide-item:hover img {
    transform: scale(1.1);
}

/* عند وقوف الماوس على السلايدر ككل، الحركة تقف (اختياري) */
.slider-track:hover {
    animation-play-state: paused;
}

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

/* تعديل للموبايل عشان اللوجوهات تصغر شوية */
@media (max-width: 768px) {
    .slide-item {
        width: 140px;
        margin: 0 15px;
        height: 80px;
    }
}



/* الحاوية الأساسية */
.slider-container {
    width: 100%;
    overflow: hidden; /* يخفي الزيادات */
    background: #f9f9f9; /* لون خلفية خفيف (اختياري) */
    padding: 20px 0;
}

/* الشريط المتحرك */
.slider-track {
    display: flex;
    width: max-content; /* مهم جداً: يخلي العناصر جنب بعض مهما كان عددهم */
    animation: scroll 20s linear infinite; /* حركة مستمرة للأبد */
}

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

/* تنسيق الكروت (بدون خلفية زي ما طلبت) */
.slide-item {
    width: 180px;
    height: 100px;
    margin: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important; /* شفاف */
    box-shadow: none !important;
}

.slide-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* === تعديلات الموبايل (تكبير الصور) === */
@media (max-width: 768px) {
    .slide-item {
        width: 150px !important; /* عرض أكبر للموبايل */
        height: 100px !important;
        margin: 0 15px; /* مسافة أقل بين الصور */
    }
    
    .slide-item img {
        transform: scale(1.2); /* تكبير اللوجو نفسه */
    }
}


/* تنسيق الحاوية والشبكة */
.mv-section-modern {
    padding: 60px 0;
    background-color: #f9f9f9; /* خلفية الصفحة رمادي فاتح */
}

.mv-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* تجاوب تلقائي */
    gap: 30px;
    padding: 0 15px;
}

/* تصميم الكارت (الوضع العادي) */
.mv-box {
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    transition: all 0.4s ease; /* نعومة الحركة */
    border-bottom: 3px solid transparent;
    cursor: default;
}

/* تنسيق الأيقونة */
.mv-box .mv-icon {
    font-size: 45px;
    color: #DD183B; /* لون البراند الأحمر */
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

/* تنسيق النصوص */
.mv-box h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: #222;
    transition: color 0.4s ease;
}

.mv-box p {
    color: #666;
    line-height: 1.7;
    font-size: 1rem;
    transition: color 0.4s ease;
}

/* =========================================
   سحر الحركة (Hover Effect)
   ========================================= */
.mv-box:hover {
    background: #DD183B; /* الخلفية تقلب أحمر */
    transform: translateY(-10px); /* يترفع لفوق */
    box-shadow: 0 20px 40px rgba(221, 24, 59, 0.3); /* ظل أحمر */
}

/* كل العناصر جوه المربع تتقلب أبيض */
.mv-box:hover h3,
.mv-box:hover p,
.mv-box:hover .mv-icon {
    color: #fff !important;
}