/*
Theme Name: Data Future -Saqqr Enterprise
Text Domain: datafuture


Theme URI: https://saqqr.com
Author:  Developed by: Saqqr Digital Marketing / Eng. Bassem Mashaly

Description: قالب مخصص لشركة Data Future - Version: 1.0
*/


:root {
    /* ألوان الهوية */
    --color-primary: #C300B6;
    /* بنفسجي فوشيا */
    --color-primary-dark: #8E00A9;
    /* بنفسجي غامق */
    --color-secondary: #FF6A3D;
    /* برتقالي CTA */
    --color-accent: #1FB6D5;
    /* أزرق فيروزي */
    --color-dark: #0A0E17;
    --color-white: #ffffff;

    /* الخطوط */
    --font-main: 'IBM Plex Sans Arabic', sans-serif;

    /* الأبعاد */
    --container-width: 1200px;
    --header-height: 80px;
}

body {
    font-family: var(--font-main);
    color: #333;
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden;
    /* 🚀 يمنع اهتزاز الموقع في الواجهة العربية نهائياً */
    width: 100%;
}

html {
    overflow-x: hidden;
}

/* توحيد وتنعيم زوايا جميع الكروت في الجوال */
@media (max-width: 768px) {

    .pricing-card,
    .svc-card,
    .layer-card,
    .sol-card,
    .usp-card,
    .trust-item {
        border-radius: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* =======================================================
   Header & Top Bar (الترويسة العلوية)
   ======================================================= */
/* 1. الشريط العلوي الصغير */
.top-bar {
    background-color: #12001D;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar a,
.top-bar span {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.3s;
}

.top-bar a:hover {
    color: #FF6A3D;
}

.top-info i,
.top-access i {
    color: #FF6A3D;
    margin-inline-end: 5px;
}

.top-info .sep {
    margin: 0 10px;
    color: #444;
}

/* 2. الهيدر الرئيسي (شفاف افتراضياً فوق الهيرو) */
.site-header {
    position: absolute;
    width: 100%;
    top: 35px;
    /* يقع أسفل التوب بار */
    left: 0;
    z-index: 999;
    padding: 20px 0;
    background: transparent;
    transition: all 0.4s ease;
}

/* =======================================================
   حالة الهيدر عند التمرير لأسفل (Sticky - خلفية بيضاء)
   ======================================================= */
.site-header.is-sticky {
    position: fixed !important;
    top: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    /* خلفية بيضاء نقية مع شفافية زجاجية خفيفة */
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    /* ظل رمادي ناعم جداً */
    border-bottom: 1px solid #eeeeee !important;
}

/* 1. تحويل لون نصوص القائمة للداكن عند النزول */
.site-header.is-sticky .main-navigation .menu-item a {
    color: #1A002A !important;
    /* بنفسجي داكن/أسود ليتناسب مع الهوية */
}

.site-header.is-sticky .main-navigation .menu-item a:hover {
    color: #FF6A3D !important;
    /* يضيء بالبرتقالي عند تمرير الماوس */
}

/* 2. تحويل لون زر اللغة للداكن */
.site-header.is-sticky .lang-toggle-btn {
    color: #1A002A !important;
    border: 1px solid rgba(26, 0, 42, 0.2) !important;
    background: transparent !important;
}

.site-header.is-sticky .lang-toggle-btn:hover {
    background: rgba(26, 0, 42, 0.05) !important;
    color: #FF6A3D !important;
    border-color: #FF6A3D !important;
}

/* 3. تحويل أيقونة الموبايل (الهامبرغر) للداكن */
.site-header.is-sticky .menu-toggle .bar {
    background-color: #1A002A !important;
}

/* =======================================================
   التأثير المتقدم للشعار (درجة #B800BE الدقيقة إلى ألوانه الطبيعية)
   ======================================================= */

/* 1. الشعار في أعلى الصفحة (يأخذ اللون #B800BE تحديداً) */
.site-header .site-branding img {
    /* هذه الفلاتر محسوبة برمجياً لتطابق كود اللون #B800BE 100% */
    filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(5838%) hue-rotate(289deg) brightness(88%) contrast(124%) !important;
    opacity: 1 !important;
    transition: filter 0.4s ease-in-out !important;
    /* حركة ناعمة جداً */
}

/* 2. الشعار عند التمرير للأسفل (في الهيدر الأبيض يعود لألوانه الطبيعية) */
.site-header.is-sticky .site-branding img {
    /* إلغاء الفلاتر ليعود الشعار لشكله الأصلي بالكامل */
    filter: none !important;
}

/* 3. الشعار */
.custom-logo {
    max-width: 180px;
    height: auto;
    display: block;
}

/* 4. قائمة التنقل */
.main-navigation .nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px;
}

.main-navigation .menu-item a {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding: 10px 0;
    transition: color 0.3s ease;
}

.main-navigation .menu-item a:hover {
    color: #FF6A3D;
}

/* خط تحتي يظهر عند التمرير بالماوس */
.main-navigation .menu-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #FF6A3D;
    transition: width 0.3s ease;
}

.main-navigation .menu-item a:hover::after {
    width: 100%;
}

/* 5. الأزرار في الهيدر */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lang-toggle-btn {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.lang-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

.btn-header-cta {
    background: #FF6A3D;
    color: #ffffff;
    padding: 12px 25px;
    font-size: 15px;
    font-weight: 700;

    border-radius: 7px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-header-cta:hover {
    background: #e65c30;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 106, 61, 0.4);
}

/* 6. زر قائمة الجوال (مخفي في الشاشات الكبيرة) */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

/* =========================================
   تجاوب الموبايل والتابلت (Mobile Nav)
   ========================================= */
@media (max-width: 991px) {
    .top-bar {
        display: none;
    }

    /* إخفاء التوب بار في الموبايل لتوفير المساحة */
    .site-header {
        top: 0;
        padding: 15px 0;
        background: #1A002A;
    }

    /* خلفية داكنة دائماً في الموبايل */

    .menu-toggle {
        display: flex;
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        /* يبدأ من اليمين في العربي واليسار في الإنجليزي */
        inset-inline-end: 0;
        width: 100%;
        background: #12001D;
        padding: 20px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: none;
        box-sizing: border-box;
    }

    .main-navigation.is-open {
        display: block;
        /* تظهر عند النقر على الزر */
    }

    .main-navigation .nav-menu {
        flex-direction: column;
        gap: 0;
    }

    .main-navigation .menu-item a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .header-cta {
        display: none;
    }

    /* إخفاء زر الاستشارة في الهيدر للموبايل لتجنب التزاحم */
}

/* --- Header Layout Updates --- */

.site-header {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 15px 0;
}

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

/* 1. Logo */
.site-branding img {
    height: 50px;
    width: auto;
}

/* 2. Navigation Menu */
.main-navigation ul.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px;
}

.main-navigation ul.nav-menu li a {
    text-decoration: none;
    color: var(--color-dark, #333);
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s ease;
}

.main-navigation ul.nav-menu li a:hover {
    color: var(--color-primary, #C300B6);
}

/* 3. Language Switcher Styling */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lang-toggle-btn {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.lang-toggle-btn a {
    text-decoration: none;
    color: #888;
    transition: color 0.3s;
}

.lang-toggle-btn a.active {
    color: var(--color-primary, #C300B6);
}

.lang-toggle-btn .sep {
    margin: 0 8px;
    color: #ccc;
}

/* 4. CTA Button */
.btn-primary {
    background: linear-gradient(135deg, #C300B6 0%, #8E00A9 100%);
    color: #fff;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.btn-primary:hover {
    box-shadow: 0 5px 15px rgba(195, 0, 182, 0.3);
}

/* Mobile Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
}

@media (max-width: 992px) {
    .main-navigation {
        display: none;
    }

    /* سيتم تفعيلها بالجافاسكربت */
    .menu-toggle {
        display: flex;
    }

    .top-bar {
        display: none;
    }
}

/* زر الـ CTA */
.btn-primary {
    background: var(--color-secondary);
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: #e55a2f;
    transform: translateY(-2px);
}

/* RTL Specifics (يتم تفعيلها تلقائياً عند وجود dir=rtl) */
html[dir="rtl"] .btn-primary {
    font-family: var(--font-main);
}


/* --- Header Styles --- */

/* Top Bar */
.top-bar {
    background-color: var(--color-dark);
    /* #1A1A2E */
    color: #fff;
    font-size: 13px;
    padding: 8px 0;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-info a {
    color: #fff;
    text-decoration: none;
    margin-inline-end: 15px;
    transition: opacity 0.3s;
}

.top-info a:hover {
    opacity: 0.8;
}

.top-info .sep {
    margin-inline: 10px;
    opacity: 0.5;
}

/* Main Header */
.site-header {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: padding 0.3s ease;
    padding: 15px 0;
}

.site-header.is-sticky {
    padding: 10px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

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

/* Logo */
.site-branding img {
    display: block;
    max-width: 180px;
    height: auto;
}

/* Navigation */
.main-navigation ul.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.main-navigation ul.nav-menu li a {
    color: var(--color-text-body);
    font-weight: 500;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    transition: color 0.3s;
}

.main-navigation ul.nav-menu li a:hover,
.main-navigation ul.nav-menu li.current-menu-item a {
    color: var(--color-primary-start);
    /* #C300B6 */
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Lang Switcher */
.lang-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.lang-list li a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-body);
    text-decoration: none;
}

.lang-list li.current-lang a {
    color: var(--color-primary-start);
}

/* CTA Button */
.btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #FF8A5B 100%);
    /* Orange Gradient */
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 106, 61, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 106, 61, 0.4);
}

/* Mobile Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-dark);
    margin: 5px 0;
    transition: 0.3s;
}

/* Responsive */
@media (max-width: 991px) {
    .top-bar {
        display: none;
    }

    .main-navigation {
        display: none;
        /* سيتم تفعيلها بـ JS */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 20px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-top: 1px solid #eee;
    }

    .main-navigation ul.nav-menu {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .header-cta {
        display: none;
    }

    /* إخفاء الزر في الموبايل وإظهاره في القائمة */
    .menu-toggle {
        display: block;
    }
}

/* =======================================================
   Footer (تذييل الصفحة - تصميم Enterprise)
   ======================================================= */
.site-footer {
    background-color: #0B0014;
    /* درجة داكنة فخمة جداً تتناسق مع البنفسجي */
    color: #cccccc;
    font-size: 15px;
    line-height: 1.8;
}

.footer-top {
    padding: 80px 0 60px 0;
}

/* شبكة الفوتر (إعطاء مساحة أكبر لعمود الشعار) */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 50px;
}

/* عمود العلامة التجارية */
.footer-logo {
    margin-bottom: 25px;
}

.footer-desc {
    margin-bottom: 30px;
    font-size: 14px;
    color: #a0a0a0;
}

.trust-badges {
    display: flex;
    align-items: center;
    gap: 20px;
}

.trust-badges span {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
}

/* عناوين الأعمدة والخط البرتقالي (كما في الصورة) */
.footer-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 12px;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    /* يبدأ من اليمين في العربية */
    width: 40px;
    height: 3px;
    background-color: #FF6A3D;
}

html[dir="ltr"] .footer-title::after {
    right: auto;
    left: 0;
    /* يبدأ من اليسار في الإنجليزية */
}

/* القوائم والروابط */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: #a0a0a0;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: #FF6A3D;
    transform: translateX(-5px);
    /* حركة خفيفة لليمين في العربية */
}

html[dir="ltr"] .footer-links a:hover {
    transform: translateX(5px);
}

/* تفاصيل التواصل */
.footer-contact {
    font-style: normal;
}

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

.contact-item i {
    color: #FF6A3D;
    font-size: 18px;
    margin-top: 5px;
}

.contact-item a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: #ffffff;
}

/* أيقونات التواصل الاجتماعي */
.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: #FF6A3D;
    transform: translateY(-3px);
}

/* شريط الفوتر السفلي (حقوق النشر) */
.footer-bottom {
    background-color: #07000d;
    /* لون أغمق بقليل للشريط السفلي */
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #888888;
}

.legal-links a {
    color: #888888;
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-links a:hover {
    color: #ffffff;
}

.legal-links .sep {
    margin: 0 15px;
    color: #444;
}

/* =========================================
   تجاوب الموبايل والتابلت (Responsive)
   ========================================= */
@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        /* عمودين في التابلت */
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        /* عمود واحد في الجوال */
    }

    .bottom-flex {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* =======================================================
   تنسيق حقوق التطوير (Developer Credit)
   ======================================================= */
.developer-credit {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #888888;
}

.developer-credit a {
    color: #FF6A3D;
    /* لون برتقالي لتمييز اسم شركة الصقر */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.developer-credit a:hover {
    color: #ffffff;
}

@media (min-width: 992px) {
    .developer-credit {
        display: inline-block;
        margin-top: 0;
        margin-inline-start: 15px;
        padding-inline-start: 15px;
        border-inline-start: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* =======================================================
   تنسيق شعار الفوتر (تحويل للون الأبيض وضبط الحجم)
   ======================================================= */
.footer-logo-image {
    /* 1. ضبط الحجم المناسب */
    max-width: 180px;
    /* حجم أنيق ومناسب للفوتر (يمكنك زيادته لـ 200px إذا أردته أكبر قليلاً) */
    height: auto;
    /* الحفاظ على أبعاد الشعار الأصلية */
    display: block;
    margin-bottom: 25px;
    /* مسافة تحته */

    /* 2. السحر اللوني: تحويل الشعار إلى أبيض نقي */
    /* brightness(0) يحوله لأسود تماماً، ثم invert(1) يعكسه لأبيض تماماً */
    filter: brightness(0) invert(1) !important;

    /* لمسة جمالية اختيارية: شفافية بسيطة جداً لدمجه بنعومة مع الخلفية */
    opacity: 0.95;
    transition: all 0.3s ease;
}

/* تأثير اختياري عند مرور الماوس: يضيء بالكامل */
.footer-logo-image:hover {
    opacity: 1;
    transform: translateY(-2px);
    /* حركة خفيفة للأعلى */
}

/* =======================================================
   ضبط حجم أيقونة X (SVG) في الفوتر
   ======================================================= */
.social-icons a svg {
    width: 16px;
    height: auto;
    fill: currentColor;
    transition: all 0.3s ease;
}


/* --- Language Switcher --- */
.lang-switcher .lang-link {
    font-weight: 700;
    color: var(--color-dark);
    text-decoration: none;
    border: 1px solid #ddd;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 13px;
    transition: all 0.3s;
}

.lang-switcher .lang-link:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* --- Mobile Menu State --- */
@media (max-width: 992px) {
    .main-navigation {
        display: none;
        /* مخفي افتراضياً */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        padding: 20px;
        z-index: 1000;
    }

    /* عند تفعيل الكلاس active بواسطة JS */
    .main-navigation.active {
        display: block;
        animation: slideDown 0.3s ease;
    }

    .main-navigation ul {
        flex-direction: column;
        text-align: start;
        /* يضبط النص لليمين أو اليسار حسب لغة الموقع */
        padding-inline: 20px;
    }

    /* تحويل أيقونة المنيو لعلامة X عند الفتح */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

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

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

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 1. Top Bar Styling (الشريط العلوي) --- */
.top-bar {
    background-color: var(--color-dark, #1A1A2E);
    /* خلفية داكنة */
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-info a,
.top-access a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.top-info a:hover,
.top-access a:hover {
    opacity: 0.8;
}

.top-info .sep {
    margin: 0 10px;
    opacity: 0.3;
}

/* --- 2. Main Header Styling (الهيدر الرئيسي) --- */
.site-header {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* ظل ناعم */
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
    transition: all 0.3s ease;
}

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

/* --- 3. Navigation Styling (القوائم) --- */
.main-navigation ul.nav-menu {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation ul.nav-menu li a {
    color: var(--color-dark, #333);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s;
}

.main-navigation ul.nav-menu li a:hover,
.main-navigation ul.nav-menu li.current-menu-item a {
    color: var(--color-primary, #C300B6);
}

/* خط تحت الرابط عند التحويم */
.main-navigation ul.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    /* Left for LTR handled via logic */
    width: 0;
    height: 2px;
    background: var(--color-primary, #C300B6);
    transition: width 0.3s;
}

html[dir="ltr"] .main-navigation ul.nav-menu li a::after {
    right: auto;
    left: 0;
}

.main-navigation ul.nav-menu li a:hover::after {
    width: 100%;
}

/* --- 4. Actions Area (اللغة والزر) --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* زر اللغة الأنيق */
.lang-toggle-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid #eee;
    border-radius: 20px;
    transition: all 0.3s;
}

.lang-toggle-btn:hover {
    background: #f9f9f9;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* زر الحجز CTA */
.btn-glow {
    box-shadow: 0 4px 15px rgba(195, 0, 182, 0.3);
}

.btn-glow:hover {
    box-shadow: 0 6px 20px rgba(195, 0, 182, 0.5);
    transform: translateY(-2px);
}

/* الموبايل */
@media (max-width: 991px) {
    .top-bar {
        display: none;
    }

    /* إخفاء الشريط العلوي في الموبايل */
    .main-navigation {
        display: none;
    }

    /* سيتم تفعيلها بـ JS */
    .header-cta {
        display: none;
    }

    /* يمكن إخفاء الزر الكبير وإبقائه في القائمة */
}


/* --- تنسيق الشعار (Logo Styling) --- */

.site-branding {
    display: flex;
    align-items: center;
    padding: 5px 0;
    /* مسافة أمان بسيطة */
}

.site-branding a {
    display: block;
    line-height: 0;
    /* لمنع وجود مسافات وهمية أسفل الصورة */
}

.site-branding img.custom-logo {
    /* 1. الحفاظ على النسبة والتناسب */
    height: auto;
    width: auto;

    /* 2. الحد الأقصى للعرض في الشاشات الكبيرة */
    max-width: 180px;
    max-height: 55px;
    /* يضمن عدم تجاوز ارتفاع الهيدر */

    /* 3. ضمان جودة العرض */
    object-fit: contain;
}

/* --- استجابة الجوال (Mobile Responsiveness) --- */
@media (max-width: 768px) {
    .site-branding img.custom-logo {
        max-width: 140px;
        /* تصغير الشعار قليلاً في الموبايل */
        max-height: 45px;
    }
}

/* =========================================
   Global Container Fix (حل مشكلة الحواف)
   ========================================= */
.container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    /* 🚀 يدعم التوسيط الذكي في اللغتين */
    padding-inline: 24px;
    /* 🚀 هوامش ذكية تتكيف مع اتجاه اللغة */
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .container {
        padding-inline: 16px;
        /* هوامش متساوية للموبايل */
    }

    /* إصلاح تمدد الصور أو العناصر خارج الحاوية في الجوال */
    img,
    video,
    canvas {
        max-width: 100% !important;
        height: auto;
    }
}


/* =========================================
   تنسيق شعار الفوتر (ضبط الحجم والتناسق)
   ========================================= */

.footer-logo {
    display: block;
    margin-bottom: 20px;
    /* مسافة متناسقة تحت الشعار */
}

.footer-logo img {
    /* 1. ضبط العرض الأقصى (الحل للمشكلة) */
    max-width: 140px;
    /* حجم مثالي للفوتر (أصغر من الهيدر) */

    /* 2. الحفاظ على الأبعاد */
    height: auto;
    width: auto;

    /* 3. منع التمدد غير المرغوب */
    display: block;

    /* 4. تحسين الجودة */
    object-fit: contain;
}

/* --- تنسيق خاص للموبايل --- */
@media (max-width: 768px) {
    .footer-logo img {
        max-width: 120px;
        /* تصغير إضافي في الجوال ليكون أنيقاً */
        margin-left: auto;
        /* توسيط الشعار في الجوال */
        margin-right: auto;
    }

    .footer-logo {
        text-align: center;
        /* ضمان توسيط الحاوية في الجوال */
    }
}


/* =========================================
   Front Page Styles
   ========================================= */

/* --- 1. Hero Section --- */
.hero-section {
    position: relative;
    /* التدرج البنفسجي الخاص بالهوية */
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: #fff;
    padding: 100px 0;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.hero-content {
    max-width: 650px;
    width: 100%;
    /* يمنع الخروج عن الشاشة في الموبايل */
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.hero-badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-secondary);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-desc {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 550px;
    width: 100%;
    box-sizing: border-box;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.btn-lg {
    padding: 15px 35px;
    font-size: 16px;
}

.btn-outline {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-outline:hover {
    background: #fff;
    color: var(--color-primary);
}

/* =======================================================
   2. Partners Strip Section (النسخة النظيفة والمعتمدة)
   ======================================================= */
.partners-section {
    padding: 50px 0;
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 5;
}

.section-label {
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888888;
    margin-bottom: 35px;
    font-weight: 700;
}

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

.partner-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: #A0A0A0;
    /* لون رمادي باهت */
    opacity: 0.7;
    cursor: default;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s ease;
}

/* تنسيق الأيقونة */
.partner-icon {
    font-size: 26px;
    transition: all 0.3s ease;
}

/* تكبير أيقونة AWS */
.aws-icon {
    font-size: 32px;
}

/* تأثير التفاعل (Hover) */
.partner-item:hover {
    opacity: 1;
    color: #1A002A;
    /* يتحول النص للبنفسجي الداكن */
    transform: translateY(-4px);
}

/* تلوين الأيقونات عند الهوفر */
.partner-item:hover .partner-icon {
    color: #FF6A3D;
    /* برتقالي ساطع */
    transform: scale(1.1);
}

/* تنسيقات الموبايل للشركاء */
@media (max-width: 991px) {
    .partners-wrapper {
        gap: 30px;
    }

    .partner-item {
        font-size: 18px;
    }

    .partner-icon {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .partners-wrapper {
        gap: 20px;
        justify-content: center;
    }

    .partner-item {
        font-size: 15px;
        width: 40%;
        justify-content: center;
        margin-bottom: 15px;
    }
}

/* =======================================================
   3. Stats Section (قسم الإحصائيات)
   ======================================================= */
.stats-section {
    background: #fff;
    padding: 40px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 3;
    margin-top: -50px;
    /* تداخل احترافي مع الهيرو */
    border-radius: 10px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.stat-item {
    border-inline-end: 1px solid #eee;
    /* يضع الخط يساراً في العربي ويميناً في الإنجليزي */
}

.stat-item:last-child {
    border-inline-end: none;
}

.stat-number {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #FF6A3D;
    /* تم تعديله ليتناسب مع الهوية (البرتقالي) */
    margin-bottom: 5px;
}

.stat-label {
    font-size: 14px;
    color: #666;
}

/* استجابة الموبايل للإحصائيات */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .stat-item {
        border-right: none;
    }
}


/* =======================================================
   3. Methodology Section (Enterprise Process Track)
   ======================================================= */
.methodology-section {
    background-color: #F8F9FB;
    /* لون رمادي فاتح جداً يفصل القسم بوضوح */
    position: relative;
    z-index: 2;
}

.sec-header {
    margin-bottom: 60px;
}

.sec-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 15px;
}

.sec-header p {
    font-size: 18px;
    color: #666;
}

/* حاوية المسار (Track) */
.methodology-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 أعمدة للشاشات الكبيرة */
    gap: 20px;
    position: relative;
}

/* الخط الأفقي الواصل بين الخطوات */
.methodology-track::before {
    content: '';
    position: absolute;
    top: 35px;
    /* يمر بالضبط من منتصف الدوائر */
    left: 5%;
    right: 5%;
    height: 4px;
    background: #e0e0e0;
    /* لون الخط الأساسي */
    z-index: 1;
}

/* تصميم كل خطوة (Card) */
.step-card {
    position: relative;
    z-index: 2;
    text-align: center;
    background: transparent;
    padding: 0 10px;
    transition: all 0.3s ease;
}

/* الدائرة التي تحمل الرقم (العُقدة) */
.step-node {
    width: 70px;
    height: 70px;
    background: #ffffff;
    border: 4px solid #e0e0e0;
    color: #A0A0A0;
    font-size: 24px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.step-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.step-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* تأثير التفاعل (Hover) - إضاءة المسار */
.step-card:hover .step-node {
    border-color: #FF6A3D;
    /* تضيء الدائرة باللون البرتقالي */
    background: #FF6A3D;
    color: #ffffff;
    transform: scale(1.1);
    /* تكبر قليلاً */
    box-shadow: 0 10px 20px rgba(255, 106, 61, 0.3);
}

.step-card:hover h3 {
    color: #FF6A3D;
}

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

/* شاشات التابلت: تحويل المسار لصفين */
@media (max-width: 1024px) {
    .methodology-track {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 20px;
    }

    .methodology-track::before {
        display: none;
        /* إخفاء الخط الأفقي لأنه لم يعد بخط مستقيم */
    }
}

/* شاشات الجوال: تحويل المسار لعمودي متصل */
@media (max-width: 768px) {
    .methodology-track {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: right;
        /* محاذاة لليمين في الجوال */
    }

    /* إعادة رسم الخط ليكون عمودياً في الجوال */
    html[dir="rtl"] .methodology-track::before {
        display: block;
        width: 4px;
        height: 100%;
        left: auto;
        right: 45px;
        /* يمر من منتصف الدائرة في اليمين */
        top: 0;
    }

    html[dir="ltr"] .methodology-track::before {
        display: block;
        width: 4px;
        height: 100%;
        right: auto;
        left: 45px;
        /* يمر من منتصف الدائرة في اليسار */
        top: 0;
    }

    .step-card {
        display: flex;
        align-items: flex-start;
        text-align: right;
        gap: 20px;
        padding: 0;
    }

    html[dir="ltr"] .step-card {
        text-align: left;
    }

    .step-node {
        margin: 0;
        /* إزالة التوسيط */
        flex-shrink: 0;
        width: 60px;
        height: 60px;
        font-size: 20px;
    }

    .step-card h3 {
        margin-top: 5px;
        margin-bottom: 10px;
    }
}

/* --- 3. Services Section --- */
.section-padding {
    padding: 80px 0;
}

.section-header {
    margin-bottom: 50px;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-dark);
}

.section-subtitle {
    font-size: 18px;
    color: #777;
}

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

.service-card {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    border: 1px solid #eee;
}

.service-card:hover {
    transform: translateY(-10px);
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(195, 0, 182, 0.1);
    color: var(--color-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

/* --- 4. Process Section --- */
.bg-light {
    background-color: #f9f9fa;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.step-item {
    text-align: center;
    position: relative;
}

.step-number {
    width: 50px;
    height: 50px;
    background: var(--color-secondary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 auto 20px;
    position: relative;
    z-index: 2;
}

/* --- 5. Comparison Section --- */
.comp-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
}

.comp-table th,
.comp-table td {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.comp-table th.highlight,
.comp-table td.highlight {
    background: rgba(195, 0, 182, 0.05);
    color: var(--color-primary);
    font-weight: 700;
    border-radius: 10px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .hero-title {
        font-size: 32px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .stat-item {
        border: none;
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    .hero-buttons {
        flex-direction: column;
    }
}

/* =======================================================
   Data Future - Front Page Consolidated Styles
   ======================================================= */

/* --- General Utilities --- */
.section-padding {
    padding: 80px 0;
}

.bg-light {
    background-color: #F8F9FA;
}

.bg-dark {
    background-color: #1A1A2E;
    color: #ffffff;
}

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

.highlight {
    color: var(--color-secondary);
    font-weight: bold;
}

.section-label {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    color: #888;
    text-align: center;
    margin-bottom: 20px;
}

/* --- 1. Hero Section (التدرج العميق - Deep Corporate Purple) --- */
.hero-section {
    position: relative;

    /* السر هنا: 
      يبدأ من البنفسجي الداكن جداً (#1A002A) المائل للأسود 
      وينتهي بلون هوية الشركة الأصلي (#8E00A9) 
    */
    background: linear-gradient(135deg, #1A002A 0%, #8E00A9 100%);

    color: #fff;
    padding: 130px 0 100px;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* طبقة تظليل (Vignette) خفيفة جداً على الحواف لزيادة العمق والتركيز على النص في المنتصف */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
    pointer-events: none;
}

/* الكانفاس الخاص بتأثير الحركة (يدعم الشبكة أو تدفق البيانات) */
#tech-canvas,
#data-streams-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* حاوية المحتوى لتكون فوق التأثيرات */
.hero-content {
    max-width: 750px;
    position: relative;
    z-index: 3;
}

/* الشارة العلوية (Badge) بتنسيق زجاجي أنيق يتناسب مع العمق الجديد */
.hero-badge {
    background: rgba(255, 255, 255, 0.08);
    /* شفافية أخف */
    color: #fff;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
}

.hero-title {
    font-size: 50px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 25px;
}

/* الكلمة المميزة في العنوان: نستخدم البرتقالي الخاص بالهوية لأنه يبرز بقوة مع البنفسجي الداكن */
.hero-title .highlight {
    color: #FF6A3D;
    text-shadow: 0 4px 15px rgba(255, 106, 61, 0.4);
}

.hero-desc {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 4;
}

/* Buttons */
.btn {
    padding: 12px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s;
}

.btn-primary {
    background: #FF6A3D;
    color: #fff;
    border: 2px solid #FF6A3D;
}

.btn-primary:hover {
    background: #e55a35;
}

.btn-outline {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn-outline:hover {
    background: #fff;
    color: #2E0249;
}

.btn-white {
    background: #fff;
    color: #2E0249;
    padding: 15px 40px;
}

/* --- 2. Partners --- */
.partners-section {
    padding: 40px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.partners-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    font-weight: 700;
    color: #aaa;
    opacity: 0.7;
}

/* --- 3. Methodology --- */
.methodology-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.step-card {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    border: 1px solid #eee;
    text-align: center;
    transition: 0.3s;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.step-num {
    font-size: 30px;
    font-weight: 900;
    color: #eee;
    display: block;
    margin-bottom: 10px;
}

.step-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #2E0249;
}

.step-card p {
    font-size: 14px;
    color: #666;
}

/* =======================================================
   4. Comparison Section (جدول المقارنة المؤسسي - النسخة المحصنة 100%)
   ======================================================= */
.comparison-section {
    background-color: #12001D;
    background-image: radial-gradient(circle at 50% 0%, #3a005c 0%, transparent 60%);
    position: relative;
    padding-bottom: 90px;
    padding-top: 50px;
    /* لضمان عدم التصاق العنوان بما فوقه */
}

.comparison-section .sec-header h2 {
    color: #ffffff !important;
}

.comparison-section .sec-header p {
    color: #b3b3b3 !important;
    font-size: 18px;
    margin-top: 10px;
}

/* الغلاف الخارجي للجدول */
.comparison-section .table-responsive {
    overflow-x: auto;
    margin-top: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    background-color: transparent !important;
    /* إجبار الغلاف على الشفافية */
}

/* قوة التحديد (Specificity): 
   استخدام .comparison-section .comp-table يضمن تطبيق 
   التنسيق هنا فقط ولا يؤثر على جداول الموقع الأخرى.
*/
.comparison-section .comp-table {
    width: 100%;
    min-width: 750px;
    border-collapse: collapse;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* إجبار المتصفح على تجاهل الخلفيات البيضاء المفروضة على الصفوف والخلايا */
.comparison-section .comp-table tr,
.comparison-section .comp-table th,
.comparison-section .comp-table td {
    background: transparent !important;
}

.comparison-section .comp-table th,
.comparison-section .comp-table td {
    padding: 22px 25px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-size: 17px;
    color: #ffffff !important;
    /* ضمان اللون الأبيض للنص */
}

html[dir="ltr"] .comparison-section .comp-table th,
html[dir="ltr"] .comparison-section .comp-table td {
    text-align: left;
}

/* عمود "وجه المقارنة" الأول (اليمين) */
.comparison-section .comp-table th:first-child,
.comparison-section .comp-table td:first-child {
    font-weight: 700;
    color: #e0e0e0 !important;
    width: 25%;
    background-color: rgba(0, 0, 0, 0.2) !important;
    /* رمادي داكن شفاف */
}

/* عمود "النموذج التقليدي" (المنتصف) */
.comparison-section .comp-table .traditional-col {
    color: #888888 !important;
    width: 35%;
}

.comparison-section .comp-table .traditional-col i {
    color: #e74c3c !important;
    margin-inline-end: 8px;
    font-size: 16px;
}

/* عمود "Data Future" (اليسار - التمييز) */
.comparison-section .comp-table .df-col {
    width: 40%;
    background-color: rgba(255, 106, 61, 0.08) !important;
    color: #ffffff !important;
    font-weight: 700;
}

.comparison-section .comp-table th.df-col {
    background-color: rgba(255, 106, 61, 0.15) !important;
    border-top: 4px solid #FF6A3D !important;
    font-size: 19px;
    color: #FF6A3D !important;
}

.comparison-section .comp-table .df-col i {
    color: #FF6A3D !important;
    margin-inline-end: 8px;
    font-size: 18px;
}

/* تأثير التمرير بالماوس */
.comparison-section .comp-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    transition: background-color 0.3s;
}

/* =========================================
   تجاوب الموبايل (Responsive)
   ========================================= */
@media (max-width: 768px) {

    .comparison-section .comp-table th,
    .comparison-section .comp-table td {
        padding: 15px 12px;
        font-size: 14px;
    }

    .comparison-section .comp-table th.df-col {
        font-size: 15px;
    }

    .comparison-section .comp-table .traditional-col i,
    .comparison-section .comp-table .df-col i {
        display: inline-block;
        margin-bottom: 0;
        margin-inline-end: 5px;
    }
}

/* =======================================================
   5. Services Section (الخدمات المتكاملة)
   ======================================================= */
.services-section {
    background-color: #F8F9FB;
    /* لون خلفية فاتح يفصل القسم */
    position: relative;
    z-index: 2;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 أعمدة في الشاشات الكبيرة */
    gap: 30px;
    margin-top: 50px;
}

/* تصميم البطاقة (Card) */
.svc-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid #eeeeee;
    transition: all 0.4s ease;
    text-align: right;
    /* محاذاة لليمين للغة العربية */
    position: relative;
    overflow: hidden;
}

/* محاذاة لليسار للغة الإنجليزية */
html[dir="ltr"] .svc-card {
    text-align: left;
}

/* الشريط الملون المخفي أعلى البطاقة (يظهر عند التمرير) */
.svc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #8E00A9 0%, #FF6A3D 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

html[dir="rtl"] .svc-card::before {
    transform-origin: right;
}

/* تنسيق الأيقونة */
.svc-icon {
    width: 70px;
    height: 70px;
    background: rgba(195, 0, 182, 0.05);
    /* خلفية بنفسجية خفيفة جداً */
    color: #1A002A;
    /* لون الأيقونة بنفسجي داكن */
    font-size: 32px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

.svc-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.svc-card p {
    font-size: 15px;
    color: #666666;
    line-height: 1.7;
    margin: 0;
}

/* تأثير التمرير بالماوس (Hover) */
.svc-card:hover {
    transform: translateY(-8px);
    /* رفع البطاقة لأعلى */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    /* ظل ناعم وفخم */
    border-color: #ffffff;
}

.svc-card:hover::before {
    transform: scaleX(1);
    /* ظهور الشريط الملون بالأعلى */
}

.svc-card:hover .svc-icon {
    background: #FF6A3D;
    /* تتحول خلفية الأيقونة للبرتقالي */
    color: #ffffff;
    /* الأيقونة نفسها تصبح بيضاء */
    transform: rotateY(180deg);
    /* تأثير دوران 3D خفيف وجذاب للأيقونة */
}

/* =========================================
   تجاوب الموبايل والتابلت (Responsive)
   ========================================= */
@media (max-width: 991px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        /* عمودين في التابلت */
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        /* عمود واحد في الجوال */
        gap: 20px;
    }

    .svc-card {
        padding: 30px 20px;
    }
}

/* =======================================================
   6. Architecture Layers Section (الطبقات المعمارية)
   ======================================================= */
.layers-section {
    background-color: #12001D;
    /* خلفية داكنة جداً للتباين */
    /* إضاءة شبكية خفيفة في الخلفية لتعزيز الطابع التقني */
    background-image: radial-gradient(circle at 50% 50%, rgba(195, 0, 182, 0.05) 0%, transparent 60%);
    position: relative;
}

.layers-section .sec-header h2 {
    color: #ffffff;
}

.layers-section .sec-header p {
    color: #b3b3b3;
    font-size: 18px;
}

/* حاوية الطبقات (التراص الهرمي) */
.layers-container {
    max-width: 800px;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* مسافة بين الطبقات */
    align-items: center;
    /* لتوسيط الطبقات ذات العروض المختلفة */
}

/* تصميم البطاقة (الطبقة) */
.layer-card {
    background: rgba(255, 255, 255, 0.03);
    /* تأثير زجاجي شفاف */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    width: 100%;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    /* ضبابية خلف البطاقة */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* خط جانبي مضيء لتمييز الطبقات */
.layer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #FF6A3D;
    /* برتقالي افتراضي */
    transition: width 0.3s ease;
}

html[dir="rtl"] .layer-card::before {
    left: auto;
    right: 0;
}

/* تمييز ألوان الخطوط الجانبية لكل طبقة لتأكيد البناء المعماري */
.layer-card.l5::before {
    background: #FFD700;
}

/* ذهبي للإدارة */
.layer-card.l4::before {
    background: #FF6A3D;
}

/* برتقالي للتطبيقات */
.layer-card.l3::before {
    background: #E74C3C;
}

/* أحمر للحماية */
.layer-card.l2::before {
    background: #1FB6D5;
}

/* فيروزي للسحابة */
.layer-card.l1::before {
    background: #8E00A9;
}

/* بنفسجي للبنية التحتية */

/* إعطاء تدرج في العرض لتبدو مثل الهرم المعماري */
.layer-card.l5 {
    width: 85%;
}

.layer-card.l4 {
    width: 90%;
}

.layer-card.l3 {
    width: 95%;
}

.layer-card.l2 {
    width: 100%;
}

.layer-card.l1 {
    width: 100%;
}

/* رقم الطبقة */
.layer-num {
    font-size: 35px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    /* رقم كبير وشفاف كعلامة مائية */
    min-width: 40px;
    text-align: center;
    transition: all 0.3s ease;
}

/* محتوى الطبقة */
.layer-content {
    flex-grow: 1;
    text-align: right;
    /* محاذاة النص لليمين للعربية */
}

html[dir="ltr"] .layer-content {
    text-align: left;
}

.layer-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.layer-content p {
    font-size: 15px;
    color: #a0a0a0;
    margin: 0;
    line-height: 1.6;
}

/* تأثير التمرير (Hover) */
.layer-card:hover {
    transform: translateY(-5px) scale(1.02);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    z-index: 10;
}

.layer-card:hover .layer-num {
    color: #FF6A3D;
    /* يضيء الرقم باللون البرتقالي */
}

/* الجملة الختامية المميزة */
.layers-footer {
    margin-top: 50px;
}

.highlight-text {
    display: inline-block;
    background: rgba(255, 106, 61, 0.1);
    border: 1px solid rgba(255, 106, 61, 0.3);
    padding: 15px 30px;
    border-radius: 50px;
    color: #FF6A3D;
    font-size: 16px;
    font-weight: 700;
}

.highlight-text i {
    margin-inline-end: 8px;
    font-size: 18px;
}

/* =========================================
   تجاوب الموبايل والتابلت (Responsive)
   ========================================= */
@media (max-width: 768px) {
    .layer-card {
        width: 100% !important;
        /* إلغاء التدرج الهرمي في الجوال ليملأ الشاشة */
        flex-direction: column;
        text-align: center !important;
        gap: 15px;
        padding: 25px 20px;
    }

    .layer-content {
        text-align: center !important;
    }

    .highlight-text {
        font-size: 14px;
        padding: 12px 20px;
        border-radius: 12px;
    }
}

/* =======================================================
   7. Sectors Section (القطاعات التي نخدمها)
   ======================================================= */
.sectors-section {
    background-color: #F8F9FB;
    /* لون فاتح لفصل القسم */
    position: relative;
    z-index: 2;
}

.sectors-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 40px;
}

.sector-pill {
    background: #ffffff;
    padding: 15px 30px;
    border-radius: 50px;
    border: 1px solid #e0e0e0;
    font-weight: 700;
    color: #444444;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: default;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sector-pill i {
    color: #FF6A3D;
    /* أيقونة باللون البرتقالي الساطع */
    font-size: 20px;
    transition: all 0.3s ease;
}

/* التفاعل عند تمرير الماوس */
.sector-pill:hover {
    background: #1A002A;
    /* يتحول للبنفسجي الداكن */
    color: #ffffff;
    border-color: #1A002A;
    transform: translateY(-5px);
    /* يرتفع لأعلى */
    box-shadow: 0 10px 20px rgba(26, 0, 42, 0.15);
}

.sector-pill:hover i {
    color: #FFD700;
    /* تتحول الأيقونة للذهبي المضيء لزيادة الفخامة */
}

/* =======================================================
   8. Tailored Solutions (الحلول المخصصة)
   ======================================================= */
.solutions-section {
    background-color: #ffffff;
    /* خلفية بيضاء نقية */
    position: relative;
    z-index: 2;
}

.solutions-grid {
    display: grid;
    /* شبكة من 4 أعمدة في الشاشات الكبيرة */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.sol-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid #eeeeee;
    text-align: center;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

/* خط علوي ملون يعطي طابع مؤسسي */
.sol-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    transition: background 0.4s ease;
}

.sol-icon {
    width: 70px;
    height: 70px;
    background: #F8F9FB;
    color: #8E00A9;
    /* لون الأيقونة بنفسجي فاتح/مشرق */
    font-size: 30px;
    border-radius: 50%;
    /* أيقونة دائرية لكسر حدة المربعات */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
    transition: all 0.4s ease;
    border: 2px solid transparent;
}

.sol-card h3 {
    font-size: 19px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 15px;
}

.sol-card p {
    font-size: 14px;
    color: #666666;
    line-height: 1.7;
    margin: 0;
}

/* التفاعل عند تمرير الماوس */
.sol-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-color: #ffffff;
}

/* يضيء الخط العلوي بلون الهوية */
.sol-card:hover::before {
    background: linear-gradient(90deg, #8E00A9 0%, #FF6A3D 100%);
}

/* تتفاعل الأيقونة وتتوهج بالبرتقالي */
.sol-card:hover .sol-icon {
    background: rgba(255, 106, 61, 0.1);
    color: #FF6A3D;
    border-color: #FF6A3D;
    transform: scale(1.1);
}

/* =========================================
   تجاوب الموبايل والتابلت (Responsive)
   ========================================= */
@media (max-width: 991px) {
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        /* عمودين في التابلت */
    }
}

@media (max-width: 768px) {
    .sectors-wrapper {
        gap: 10px;
    }

    .sector-pill {
        padding: 12px 20px;
        font-size: 14px;
    }

    .solutions-grid {
        grid-template-columns: 1fr;
        /* عمود واحد في الجوال */
    }

    .sol-card {
        padding: 30px 20px;
    }
}

/* =======================================================
   9. Proof & Stats Section (الإحصائيات ودراسة الحالة)
   ======================================================= */
.proof-section {
    background-color: #ffffff;
    position: relative;
}

.proof-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}

.proof-content {
    flex: 1;
}

.section-title {
    font-size: 32px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 15px;
}

.section-desc {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* شبكة الأرقام */
.stats-grid-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stat-box {
    background: #F8F9FB;
    padding: 20px 15px;
    border-radius: 10px;
    border: 1px solid #eeeeee;
    text-align: center;
    transition: transform 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
    border-color: #FF6A3D;
}

.stat-num {
    display: block;
    font-size: 32px;
    font-weight: 900;
    color: #FF6A3D;
    margin-bottom: 5px;
}

.stat-text {
    font-size: 13px;
    font-weight: 700;
    color: #444;
}

/* بطاقة دراسة الحالة */
.proof-case-card {
    flex: 0 0 450px;
    /* عرض ثابت للبطاقة */
    background: linear-gradient(135deg, #8E00A9 0%, #460A5D 100%);
    padding: 40px;
    border-radius: 15px;
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(142, 0, 169, 0.2);
    position: relative;
    overflow: hidden;
}

.case-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

.proof-case-card h4 {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 15px;
}

.proof-case-card p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 25px;
}

.case-results {
    display: flex;
    gap: 15px;
}

.result-item {
    background: rgba(255, 106, 61, 0.9);
    /* برتقالي يبرز بقوة على البنفسجي */
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =======================================================
   10. Risk & SLA Section (المخاطر والامتثال)
   ======================================================= */
.risk-section {
    background-color: #12001D;
    /* خلفية داكنة توحي بالصرامة الأمنية */
    background-image: radial-gradient(circle at top right, rgba(195, 0, 182, 0.05) 0%, transparent 50%);
    border-top: 4px solid #FF6A3D;
    /* خط برتقالي فاصل من الأعلى */
}

.risk-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.risk-col {
    background: rgba(255, 255, 255, 0.03);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.risk-col:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.risk-icon {
    font-size: 40px;
    color: #1FB6D5;
    /* لون فيروزي (للامتثال والأمان) */
    margin-bottom: 20px;
}

.risk-col h3 {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 25px;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-list li {
    position: relative;
    padding-inline-start: 30px;
    /* مسافة للأيقونة */
    margin-bottom: 15px;
    font-size: 16px;
    color: #cccccc;
    line-height: 1.6;
}

.check-list li i {
    position: absolute;
    left: 0;
    /* للإنجليزية */
    top: 5px;
    color: #FF6A3D;
    font-size: 14px;
}

html[dir="rtl"] .check-list li i {
    left: auto;
    right: 0;
    /* للعربية */
}

/* =========================================
   تجاوب الموبايل والتابلت (Responsive)
   ========================================= */
@media (max-width: 991px) {
    .proof-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .proof-case-card {
        flex: auto;
        width: 100%;
    }

    .risk-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .stats-grid-mini {
        grid-template-columns: 1fr;
        /* الإحصائيات تصبح تحت بعضها في الجوال */
    }

    .case-results {
        flex-direction: column;
    }

    .risk-col {
        padding: 25px 20px;
    }
}

/* =======================================================
   11. USP Section (لماذا يصعب تقليدنا؟)
   ======================================================= */
.usp-section {
    background-color: #F8F9FB;
    border-top: 1px solid #eeeeee;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* عمودين ليكون العرض مريحاً للقراءة */
    gap: 30px;
    margin-top: 50px;
}

.usp-card {
    background: #ffffff;
    padding: 35px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    border-right: 4px solid #FF6A3D;
    /* خط برتقالي جانبي للغة العربية */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

html[dir="ltr"] .usp-card {
    border-right: 1px solid #e0e0e0;
    border-left: 4px solid #FF6A3D;
    /* خط يساري للإنجليزية */
}

.usp-icon {
    font-size: 35px;
    color: #8E00A9;
    margin-bottom: 20px;
}

.usp-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 12px;
}

.usp-card p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.usp-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
}



/* =======================================================
   12. Executive Message Section (رسالة الإدارة - C-Suite)
   ======================================================= */
/* 1. خلفية القسم الداكنة */
.exec-section {
    /* تدرج بنفسجي مؤسسي فخم */
    background: linear-gradient(135deg, #1A002A 0%, #460A5D 100%);
    position: relative;
    padding: 80px 0;
    /* مسافات داخلية مريحة */
}

.exec-section .sec-header h2 {
    color: #ffffff;
    /* جعل العنوان باللون الأبيض */
}

/* 2. شبكة البطاقات (3 أعمدة) */
.exec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

/* 3. تصميم البطاقة المخصصة للمدراء */
.exec-card {
    background: rgba(255, 255, 255, 0.04);
    /* تأثير زجاجي شفاف */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 40px 30px;
    color: #ffffff;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
    /* ضبابية للخلفية */
    text-align: right;
}

html[dir="ltr"] .exec-card {
    text-align: left;
}

/* 4. ترويسة البطاقة (الأيقونة واسم المدير) */
.exec-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.exec-header i {
    font-size: 32px;
    color: #FFD700;
    /* اللون الذهبي يعكس مستوى الإدارة العليا */
}

.exec-header h4 {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
}

.exec-card p {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* 5. تفاعل الماوس مع البطاقة */
.exec-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.3);
    /* توهج ذهبي خفيف */
}

/* 6. تنسيق الجملة الختامية (الاقتباس الاستراتيجي) */
.exec-footer {
    margin-top: 60px;
}

.strategic-quote {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 15px;
    padding: 30px 40px;
    display: inline-block;
    position: relative;
    backdrop-filter: blur(10px);
}

.strategic-quote .quote-icon {
    position: absolute;
    top: -15px;
    right: 30px;
    font-size: 30px;
    color: #FFD700;
    background: #1A002A;
    /* قطع الإطار بلون الخلفية */
    padding: 0 10px;
}

html[dir="ltr"] .strategic-quote .quote-icon {
    right: auto;
    left: 30px;
}

.strategic-quote h3 {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.6;
}

.strategic-quote .text-gold {
    color: #FFD700;
    /* تلوين كلمة "قرار استثماري" بالذهبي */
}

/* =========================================
   تجاوب الموبايل والتابلت (Responsive)
   ========================================= */
@media (max-width: 991px) {
    .exec-grid {
        grid-template-columns: repeat(2, 1fr);
        /* بطاقتين في التابلت */
    }
}

@media (max-width: 768px) {
    .exec-grid {
        grid-template-columns: 1fr;
        /* بطاقة واحدة في الموبايل */
    }

    .exec-card {
        padding: 30px 20px;
    }

    .strategic-quote {
        padding: 25px 20px;
    }

    .strategic-quote h3 {
        font-size: 18px;
    }
}


/* =======================================================
   13. FAQs Section (الأسئلة الشائعة - الأكورديون)
   ======================================================= */
.faq-section {
    background-color: #F8F9FB;
    /* لون خلفية مريح للعين */
    position: relative;
}

.faq-accordion {
    max-width: 850px;
    /* تحديد العرض ليكون النص مريحاً للقراءة ولا يمتد لآخر الشاشة */
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* التفاعل بالماوس */
.faq-item:hover {
    border-color: #8E00A9;
    /* إطار بنفسجي خفيف */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

/* تنسيق السؤال المفتوح */
.faq-item.active {
    border-color: #FF6A3D;
    /* إطار برتقالي بارز */
    box-shadow: 0 10px 25px rgba(255, 106, 61, 0.08);
}

.faq-question {
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: background 0.3s ease;
}

.faq-item.active .faq-question {
    background: rgba(255, 106, 61, 0.02);
    /* خلفية برتقالية شفافة جداً للسؤال المفتوح */
}

.faq-question h5 {
    font-size: 18px;
    font-weight: 700;
    color: #1A002A;
    margin: 0;
    padding-inline-end: 20px;
    /* مسافة بين النص والسهم (تعمل تلقائياً عربي/إنجليزي) */
    transition: color 0.3s ease;
}

.faq-item.active .faq-question h5 {
    color: #FF6A3D;
    /* تلوين العنوان المفتوح */
}

/* أيقونة السهم */
.toggle-icon {
    font-size: 16px;
    color: #8E00A9;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.faq-item.active .toggle-icon {
    transform: rotate(180deg);
    /* قلب السهم للأعلى عند الفتح */
    color: #FF6A3D;
}

/* الحاوية المخفية للإجابة */
.faq-answer {
    max-height: 0;
    /* يبدأ مغلقاً ومخفياً تماماً */
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    /* حركة انزلاق (Slide) ناعمة */
    background: #ffffff;
}

.faq-answer p {
    padding: 0 30px 25px 30px;
    margin: 0;
    font-size: 15px;
    color: #666;
    line-height: 1.8;
}

/* =========================================
   تجاوب الموبايل والتابلت (Responsive)
   ========================================= */
@media (max-width: 768px) {
    .faq-question {
        padding: 20px;
    }

    .faq-question h5 {
        font-size: 16px;
    }

    .faq-answer p {
        padding: 0 20px 20px 20px;
        font-size: 14px;
    }
}




/* =======================================================
   14. CTA Section (الخاتمة والدعوة للإجراء)
   ======================================================= */
.cta-section {
    position: relative;
    /* تدرج طولي يعطي طاقة عالية في نهاية الصفحة */
    background: linear-gradient(135deg, #1A002A 0%, #8E00A9 100%);
    padding: 100px 0;
    color: #fff;
    overflow: hidden;
}

/* توهج خفيف في زوايا القسم (برتقالي وفيروزي) */
.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 150%, rgba(255, 106, 61, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% -50%, rgba(31, 182, 213, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

.relative-z {
    position: relative;
    z-index: 2;
}

.cta-section h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #ffffff;
}

.cta-desc {
    font-size: 19px;
    max-width: 800px;
    margin: 0 auto 40px auto;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

/* تنسيق الزر الرئيسي (CTA Button) */
.cta-actions {
    margin-bottom: 20px;
}

.btn-cta {
    background: #FF6A3D;
    /* البرتقالي الساطع لجذب العين */
    color: #ffffff;
    padding: 20px 45px;
    font-size: 20px;
    font-weight: 800;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(255, 106, 61, 0.4);
    /* توهج برتقالي */
    border: 2px solid #FF6A3D;
}

.btn-cta:hover {
    background: transparent;
    color: #FF6A3D;
    box-shadow: 0 15px 40px rgba(255, 106, 61, 0.6);
    transform: translateY(-5px);
}

.btn-cta i {
    transition: transform 0.3s ease;
}

/* حركة السهم بناءً على اتجاه اللغة */
html[dir="rtl"] .btn-cta:hover i {
    transform: translateX(-8px);
}

html[dir="ltr"] .btn-cta:hover i {
    transform: translateX(8px);
}

/* رسالة التطمين أسفل الزر */
.cta-note {
    display: block;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 15px;
}

.cta-note i {
    margin-inline-end: 8px;
    color: #1FB6D5;
    /* أيقونة قفل باللون الفيروزي للأمان */
}

/* =========================================
   تجاوب الموبايل والتابلت (Responsive)
   ========================================= */
@media (max-width: 768px) {
    .cta-section {
        padding: 70px 0;
    }

    .cta-section h2 {
        font-size: 28px;
        line-height: 1.4;
    }

    .cta-desc {
        font-size: 16px;
    }

    .btn-cta {
        padding: 18px 25px;
        font-size: 16px;
        width: 100%;
        /* الزر يأخذ عرض الشاشة بالكامل في الموبايل لتسهيل النقر */
        justify-content: center;
    }
}



/* =========================================
   تجاوب الموبايل والتابلت للفوتر (Responsive)
   ========================================= */
@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        /* تحويل لعمودين في التابلت */
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        /* تحويل لعمود واحد مرتب في الجوال */
    }

    .bottom-flex {
        flex-direction: column;
        /* ترتيب الحقوق والروابط فوق بعضها */
        gap: 15px;
        text-align: center;
        /* توسيط النصوص بشكل أنيق */
    }

    .developer-credit {
        display: block;
        margin-top: 10px;
        margin-inline-start: 0;
        padding-inline-start: 0;
        border: none;
    }
}

/* =======================================================
   تنسيقات صفحة خطط ITaaS الشاملة (النسخة النهائية المنقحة)
   ======================================================= */

/* =======================================================
   1. قسم الهيرو (Pricing Hero) - Modern SaaS Style
   ======================================================= */
.pricing-hero {
    position: relative;
    background: linear-gradient(135deg, #0B0014 0%, #1A002A 100%);
    padding: 180px 0 140px;
    /* مساحة أكبر للتنفس لتبدو أفخم */
    color: #fff;
    overflow: hidden;
    z-index: 1;
}

/* توهج خلفي احترافي (Mesh Gradient Glow) */
.hero-bg-glow {
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(195, 0, 182, 0.2) 0%, rgba(255, 106, 61, 0.08) 40%, transparent 70%);
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

/* شارة الثقة العلوية */
.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FF6A3D;
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* العنوان الرئيسي */
.hero-title {
    font-size: 46px;
    /* تكبير العنوان ليكون بطلاً حقيقياً */
    font-weight: 900;
    margin-bottom: 25px;
    color: #fff;
    line-height: 1.35;
    letter-spacing: -0.5px;
}

/* تلوين كلمة ITaaS */
.hero-title .highlight {
    background: linear-gradient(90deg, #FF6A3D, #C300B6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* النص الفرعي */
.hero-subtitle {
    font-size: 18px;
    color: #b3b3cc;
    max-width: 780px;
    margin: 0 auto;
    line-height: 1.8;
    font-weight: 400;
}

.hero-subtitle strong {
    color: #fff;
    font-weight: 700;
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .pricing-hero {
        padding: 140px 0 100px;
        /* تقليل المساحة في الجوال */
    }

    .hero-title {
        font-size: 30px;
        line-height: 1.4;
    }

    .hero-subtitle {
        font-size: 15px;
        padding: 0 15px;
    }

    .hero-bg-glow {
        width: 150%;
        /* تكبير التوهج ليغطي الجوال */
        height: 400px;
    }
}


/* =======================================================
   تأثيرات وحركات قسم الهيرو (Hero Animations & Effects)
   ======================================================= */

/* 1. تعريف حركة الدخول من الأسفل */
@keyframes fadeInUpHero {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. تطبيق الدخول المتدرج (Staggered Entrance) */
.hero-badge {
    opacity: 0;
    /* مخفي بالبداية */
    animation: fadeInUpHero 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s forwards,
        floatBadge 4s ease-in-out 1s infinite;
    /* يطفو بعد انتهاء الظهور */
}

.hero-title {
    opacity: 0;
    animation: fadeInUpHero 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s forwards;
}

.hero-subtitle {
    opacity: 0;
    animation: fadeInUpHero 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s forwards;
}

/* 3. تأثير الكلمة الملونة (Animated Gradient Text) */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero-title .highlight {
    background-size: 200% auto;
    animation: gradientFlow 4s linear infinite;
}

/* 4. تنفس التوهج الخلفي (Breathing Glow) */
@keyframes breatheGlow {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translateX(-50%) scale(1.15);
        opacity: 1;
    }
}

.hero-bg-glow {
    animation: breatheGlow 6s ease-in-out infinite;
}

/* 5. حركة طفو الشارة البسيطة */
@keyframes floatBadge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* تفاعل إضافي عند تمرير الماوس على الشارة */
.hero-badge:hover {
    background: rgba(255, 106, 61, 0.1);
    border-color: rgba(255, 106, 61, 0.3);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 106, 61, 0.2);
    cursor: pointer;
    animation-play-state: paused;
    /* إيقاف الطفو عند الوقوف عليها */
}




/* 1. حاوية قسم الأسعار */
.pricing-plans-section {
    padding-bottom: 80px;
    background-color: #f9f9fc;
    position: relative;
    z-index: 5;
    /* يضمن بقاء القسم تحت الكروت */
}


/* 2. شبكة كروت الأسعار (Flex Fix & Z-Index) */
.pricing-plans-section {
    padding-bottom: 80px;
    background-color: #f9f9fc;
    position: relative;
    z-index: 5;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: -60px;
    padding-top: 25px;
    /* مسافة أمان لحماية بادج "الأكثر طلبا" من القص */
    align-items: stretch;
    position: relative;
    z-index: 15;
    /* 🚀 هذا السطر السحري يجبر الكروت على البقاء فوق القسم المظلم دائماً */
}

.pricing-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    border: 1px solid #eaeaea;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    background-clip: padding-box;
    /* يمنع تسرب الخلفية */
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* تمييز الباقات */
.popular-card {
    border: 2px solid #FF6A3D;
    transform: scale(1.03);
    box-shadow: 0 15px 40px rgba(255, 106, 61, 0.15);
    z-index: 2;
    /* لضمان بقاء الكرت المميز في المقدمة */
}

.popular-card:hover {
    transform: scale(1.03) translateY(-10px);
}

.popular-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF6A3D;
    color: #fff;
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    z-index: 10;
}

/* نصوص الأسعار */
.card-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.card-header h3 {
    font-size: 24px;
    color: #1A002A;
    font-weight: 800;
    margin: 0;
}

.target-audience {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
    margin-bottom: 15px;
    min-height: 40px;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 16px;
    display: block;
}

.current-price {
    font-size: 40px;
    font-weight: 800;
    color: #C300B6;
    display: block;
    line-height: 1;
    margin: 10px 0;
}

.current-price small {
    font-size: 15px;
    color: #888;
    font-weight: 500;
}

.custom-price {
    font-size: 32px;
    font-weight: 800;
    color: #1A002A;
    display: block;
    padding: 20px 0;
}

.price-desc {
    font-size: 13px;
    margin-top: 15px;
    font-weight: bold;
    min-height: 40px;
}

.highlight-pink {
    color: #C300B6;
}

.highlight-orange {
    color: #FF6A3D;
}

.highlight-dark {
    color: #1A002A;
}

/* المزايا والأزرار */
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1;
}

.plan-features li {
    margin-bottom: 15px;
    font-size: 14px;
    color: #444;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.plan-features li i {
    color: #C300B6;
    margin-top: 4px;
    font-size: 16px;
}

.card-footer {
    margin-top: auto;
}

.btn-plan {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-plan.outline {
    border: 2px solid #C300B6;
    color: #C300B6;
    background: transparent;
}

.btn-plan.outline:hover {
    background: #C300B6;
    color: #fff;
}

.btn-plan.primary {
    background: linear-gradient(135deg, #FF6A3D 0%, #E74C3C 100%);
    color: #fff;
    box-shadow: 0 5px 15px rgba(255, 106, 61, 0.3);
}

.btn-plan.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 106, 61, 0.4);
}

.btn-plan.dark {
    background: #1A002A;
    color: #fff;
}

.btn-plan.dark:hover {
    background: #C300B6;
}

/* =======================================================
   إصلاح التجاوب (Responsive) الشامل والمضمون
   ======================================================= */

/* شاشات اللابتوب الصغيرة والآيباد العرضي (أقل من 1200 بيكسل) */
@media (max-width: 1200px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        /* تحويلها لصفين لترتاح الكروت */
        margin-top: -30px;
        /* تقليل التداخل */
    }
}

/* شاشات التابلت العمودي (أقل من 992 بيكسل) */
@media (max-width: 992px) {
    .pricing-grid {
        margin-top: 0;
        /* إلغاء التداخل تماماً لمنع أي قص من الأعلى */
        padding-top: 40px;
    }
}

/* شاشات الجوال (أقل من 768 بيكسل) */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        /* كرت واحد يملأ الشاشة */
    }

    .popular-card {
        transform: scale(1);
        /* إلغاء التكبير في الجوال لمنع خروج الكرت عن الشاشة */
    }

    .popular-card:hover {
        transform: translateY(-5px);
    }
}


/* =======================================================
   إصلاح التجاوب (Responsive) الشامل والمطور
   ======================================================= */

/* شاشات اللابتوب المتوسطة (أقل من 1200 بيكسل) */
@media (max-width: 1200px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        /* تحويل لكرتين في الصف */
        margin-top: -30px;
        /* تقليل التداخل */
    }
}

/* شاشات التابلت والجوال (أقل من 992 بيكسل) */
@media (max-width: 992px) {
    .pricing-grid {
        margin-top: 0;
        /* إلغاء التداخل تماماً لمنع اختفاء الجزء العلوي */
        padding-top: 40px;
    }
}

/* شاشات الجوال الصغيرة (أقل من 768 بيكسل) */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        /* كرت واحد فقط في الصف */
    }

    .popular-card {
        transform: scale(1);
        /* إلغاء التكبير لمنع الخروج عن حواف الشاشة */
    }
}


/* =======================================================
   إصلاح التجاوب (Responsive) لشبكة الأسعار
   ======================================================= */

/* شاشات التابلت (عرض الشاشة أقل من 1024 بيكسل) -> كرتين في الصف */
@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 0;
        /* إزالة المارجن السلبي لمنع تداخل الكروت مع ما فوقها */
    }
}

/* شاشات الجوال (عرض الشاشة أقل من 768 بيكسل) -> كرت واحد يملأ الشاشة */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    /* إلغاء التكبير (Scale) للكرت المميز في الجوال لكي لا يخرج عن حواف الشاشة */
    .popular-card {
        transform: scale(1);
    }

    .popular-card:hover {
        transform: translateY(-5px);
    }
}

/* =======================================================
   3. المقارنة المالية (Financial Comparison) - تصميم مُحسّن
   ======================================================= */
.financial-compare {
    padding: 100px 0;
    background-color: #f4f4f9;
    /* خلفية هادئة لإبراز كروت المقارنة */
}

.financial-compare .section-title {
    margin-bottom: 50px;
}

.compare-wrapper {
    display: flex;
    gap: 0;
    /* تم إزالة الفراغ لإنشاء تأثير التداخل */
    align-items: center;
    max-width: 1050px;
    margin: 0 auto;
    position: relative;
}

/* الصندوق العام */
.compare-box {
    flex: 1;
    padding: 50px 40px;
    border-radius: 20px;
    position: relative;
    transition: all 0.3s ease;
}

/* رأس الصندوق */
.box-head {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.box-head h3 {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
}

.box-head i {
    font-size: 38px;
}

/* تنسيق القوائم الأساسية */
.compare-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compare-box ul li {
    margin-bottom: 20px;
    font-size: 16px;
    position: relative;
    padding-inline-start: 40px;
    /* مساحة لأيقونة الصح/الخطأ */
    line-height: 1.6;
}

/* ----------------------------------
   أ. الصندوق السلبي (قسم داخلي)
----------------------------------- */
.compare-box.negative {
    background: #fff;
    border: 1px solid #ffebeb;
    border-start-end-radius: 0;
    /* مسح الانحناء من جهة التداخل */
    border-end-end-radius: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    z-index: 1;
    padding-inline-end: 60px;
    /* إعطاء مساحة لتداخل الصندوق الآخر */
}

.compare-box.negative .box-head {
    border-bottom-color: #ffebeb;
}

.compare-box.negative .box-head i {
    color: #e74c3c;
}

/* أيقونة X حمراء للقائمة */
.compare-box.negative ul li::before {
    content: '\f00d';
    /* كود أيقونة الخطأ في FontAwesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    inset-inline-start: 0;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    top: 2px;
}

/* ----------------------------------
   ب. الصندوق الإيجابي (ITaaS)
----------------------------------- */
.compare-box.positive {
    background: linear-gradient(135deg, #1A002A 0%, #0B0014 100%);
    color: #fff;
    transform: scale(1.08);
    /* تكبير الصندوق لجعله البطل (Hero) */
    box-shadow: 0 20px 50px rgba(195, 0, 182, 0.15);
    z-index: 2;
    /* ليكون فوق الصندوق السلبي */
    border: 2px solid #C300B6;
}

.compare-box.positive .box-head {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.compare-box.positive h3 {
    color: #fff;
}

.compare-box.positive .box-head i {
    color: #2ecc71;
    /* لون أخضر فاقع للصح */
}

.compare-box.positive ul li {
    color: #e0e0e0;
}

.compare-box.positive ul li strong {
    color: #fff;
    font-size: 17px;
    display: block;
    margin-top: 5px;
}

/* أيقونة ✓ خضراء للقائمة */
.compare-box.positive ul li::before {
    content: '\f00c';
    /* كود أيقونة الصح في FontAwesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    inset-inline-start: 0;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.15);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    top: 0;
}

/* ----------------------------------
   ج. شارة الـ VS (تتوسط الصندوقين)
----------------------------------- */
.compare-wrapper::after {
    content: 'VS';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #FF6A3D 0%, #E74C3C 100%);
    color: #fff;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 900;
    font-size: 18px;
    box-shadow: 0 0 0 8px #f4f4f9;
    /* حدود بلون الخلفية لفصلها عن الكروت */
    z-index: 3;
    font-family: Arial, sans-serif;
}

/* ----------------------------------
   د. التجاوب مع الشاشات الصغيرة
----------------------------------- */
@media (max-width: 991px) {
    .compare-wrapper {
        flex-direction: column;
        gap: 40px;
        /* إعادة الفراغات في الجوال */
    }

    .compare-box.negative {
        border-radius: 20px;
        /* إعادة الانحناءات للصندوق السلبي */
        padding-inline-end: 40px;
    }

    .compare-box.positive {
        transform: scale(1);
        /* إلغاء التكبير في الجوال ليناسب الشاشة */
    }

    .compare-wrapper::after {
        display: none;
        /* إخفاء علامة VS في الجوال للحفاظ على نظافة التصميم */
    }
}

/* =======================================================
   تفاعلات وحركات قسم المقارنة المالية (Animations & Hover)
   ======================================================= */

/* 1. تأثير النبض المستمر لعلامة VS */
@keyframes pulseVS {
    0% {
        box-shadow: 0 0 0 8px #f4f4f9, 0 0 0 8px rgba(255, 106, 61, 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px #f4f4f9, 0 0 0 25px rgba(255, 106, 61, 0);
    }

    100% {
        box-shadow: 0 0 0 8px #f4f4f9, 0 0 0 8px rgba(255, 106, 61, 0);
    }
}

.compare-wrapper::after {
    animation: pulseVS 2s infinite cubic-bezier(0.66, 0, 0, 1);
    transition: transform 0.3s ease;
}

.compare-wrapper:hover::after {
    transform: translate(-50%, -50%) scale(1.15);
    /* تكبير علامة VS عند مرور الماوس قريباً منها */
}

/* 2. تفاعل الصناديق عند مرور الماوس (Hover Lift) */
.compare-box.negative:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(231, 76, 60, 0.08);
    z-index: 4;
    /* ليظهر فوق البقية عند التفاعل */
}

.compare-box.positive {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.compare-box.positive:hover {
    transform: scale(1.1) translateY(-10px);
    /* تكبير إضافي ورفع للأعلى */
    box-shadow: 0 30px 60px rgba(195, 0, 182, 0.25);
    z-index: 4;
    border-color: #FF6A3D;
    /* تغيير لون الإطار بشكل مبهر */
}

/* 3. تفاعل دقيق للنصوص داخل القائمة (Micro-interactions) */
.compare-box ul li {
    transition: transform 0.3s ease, color 0.3s ease;
}

/* إزاحة خفيفة للنص عند المرور (تلقائية حسب اللغة) */
.compare-box ul li:hover {
    transform: translateX(-8px);
    /* في العربية يتجه لليسار */
}

html[dir="ltr"] .compare-box ul li:hover {
    transform: translateX(8px);
    /* في الإنجليزية يتجه لليمين */
}

/* إضاءة النصوص عند المرور عليها */
.compare-box.positive ul li:hover {
    color: #fff;
}

.compare-box.negative ul li:hover {
    color: #e74c3c;
}

/* 4. دوران خفيف لأيقونة الرأس عند المرور */
.compare-box .box-head i {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.compare-box:hover .box-head i {
    transform: rotate(15deg) scale(1.2);
}

/* =======================================================
   4. جدول المقارنة التفصيلي (Advanced Pricing Table - محصن 100%)
   ======================================================= */
.detailed-compare {
    padding: 100px 0;
    background: #fff !important;
    /* خلفية بيضاء ليفصل عن القسم السابق */
}

.detailed-compare .section-title {
    margin-bottom: 50px;
}

/* حاوية الجدول */
.detailed-compare .table-responsive {
    background: #fff !important;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid #eaeaea !important;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #C300B6 #f4f4f9;
}

.detailed-compare .table-responsive::-webkit-scrollbar {
    height: 8px;
}

.detailed-compare .table-responsive::-webkit-scrollbar-track {
    background: #f4f4f9;
    border-radius: 10px;
}

.detailed-compare .table-responsive::-webkit-scrollbar-thumb {
    background-color: #C300B6;
    border-radius: 10px;
}

/* ----------------------------------
   إعدادات الجدول (معزولة عن القالب)
----------------------------------- */
.detailed-compare table.plans-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    min-width: 800px;
    background: transparent !important;
    margin: 0 !important;
}

/* ----------------------------------
   رأس الجدول (Table Headers)
----------------------------------- */
.detailed-compare table.plans-table th {
    background: #1A002A !important;
    color: #ffffff !important;
    /* إجبار النص على اللون الأبيض */
    padding: 25px 20px !important;
    font-size: 18px;
    font-weight: 800 !important;
    text-align: center !important;
    border-bottom: 4px solid #C300B6 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    white-space: nowrap;
}

/* تمييز رأس عمود "خطة الأعمال" (الأكثر طلباً) */
.detailed-compare table.plans-table th:nth-child(3) {
    background: linear-gradient(135deg, #FF6A3D 0%, #E74C3C 100%) !important;
    border-bottom-color: #1A002A !important;
    color: #ffffff !important;
}

/* حل المشكلة: رأس العمود الأول (الميزة) */
.detailed-compare table.plans-table th:first-child {
    background: #0B0014 !important;
    color: #ffffff !important;
    /* هذا السطر هو الذي سيظهر كلمة "الميزة" */
    text-align: start !important;
    z-index: 3;
}

/* ----------------------------------
   خلايا الجدول والتفاعلات (Table Cells & Hover)
----------------------------------- */
.detailed-compare table.plans-table tr {
    background: transparent !important;
}

.detailed-compare table.plans-table td {
    padding: 22px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: #555 !important;
    font-size: 15px;
    font-weight: 700 !important;
    transition: background 0.3s ease, color 0.3s ease;
    background: #ffffff !important;
    /* تغطية خلفيات القالب */
}

.detailed-compare table.plans-table tr:last-child td {
    border-bottom: none !important;
}

/* تظليل عمود خطة الأعمال بالكامل بشكل خفيف جداً */
.detailed-compare table.plans-table td:nth-child(3) {
    background: rgba(255, 106, 61, 0.03) !important;
    font-weight: 800 !important;
    color: #1A002A !important;
}

/* تفاعل الصف بالكامل عند تمرير الماوس */
.detailed-compare table.plans-table tbody tr {
    transition: transform 0.3s ease;
}

.detailed-compare table.plans-table tbody tr:hover td {
    background-color: #faf5ff !important;
    color: #1A002A !important;
}

.detailed-compare table.plans-table tbody tr:hover td:nth-child(3) {
    background-color: rgba(255, 106, 61, 0.08) !important;
}

/* ----------------------------------
   تثبيت العمود الأول (Sticky First Column)
----------------------------------- */
.detailed-compare table.plans-table td:first-child,
.detailed-compare table.plans-table th:first-child {
    position: sticky !important;
    inset-inline-start: 0 !important;
    text-align: start !important;
    font-weight: 800 !important;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.03) !important;
}

/* إعطاء العمود الأول خلفية بيضاء لتغطية النصوص عند التمرير */
.detailed-compare table.plans-table td:first-child {
    background-color: #fff !important;
    color: #1A002A !important;
    z-index: 2;
}

.detailed-compare table.plans-table tbody tr:hover td:first-child {
    background-color: #faf5ff !important;
}

/* ----------------------------------
   أيقونات الصح (Checkmarks Interactions)
----------------------------------- */
.detailed-compare table.plans-table .text-success {
    color: #2ecc71 !important;
    font-size: 20px !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}

.detailed-compare table.plans-table tbody tr:hover .text-success {
    transform: scale(1.4) rotate(5deg);
}

/* =======================================================
   5. اتفاقيات SLA والضمانات
   ======================================================= */
.sla-guarantees-section {
    padding: 80px 0;
    background-color: #f4f4f9;
}

.sla-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.sla-box {
    background: #fff;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.sla-box:hover {
    transform: translateY(-5px);
}

.sla-box.highlight {
    background: linear-gradient(135deg, #1A002A 0%, #0B0014 100%);
    color: #fff;
}

.sla-box .box-icon {
    font-size: 40px;
    color: #FF6A3D;
    margin-bottom: 20px;
}

.sla-box h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
}

.sla-box.highlight h3 {
    color: #fff;
}

.sla-box .box-desc {
    font-size: 15px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
}

.sla-box.highlight .box-desc {
    color: #ccc;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-list li {
    margin-bottom: 15px;
    font-size: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sla-box .check-list li {
    color: #444;
}

.sla-box.highlight .check-list li {
    color: #f9f9f9;
}

.check-list li i {
    color: #C300B6;
    margin-top: 4px;
}

/* =======================================================
   6. مسار التشغيل (Onboarding Process) - Timeline Design
   ======================================================= */
.onboarding-process {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
    /* لمنع أي تجاوز للخطوط الجانبية */
}

.onboarding-process .section-title {
    margin-bottom: 20px;
}

.onboarding-process .desc {
    font-size: 16px;
    color: #666;
    margin-bottom: 60px;
}

/* شبكة الخطوات (الخط الأفقي في الكمبيوتر) */
.steps-grid.five-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    position: relative;
    z-index: 1;
}

/* ----------------------------------
   خط التوصيل (Connecting Line)
----------------------------------- */
.steps-grid.five-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    /* يتوسط الدوائر التي ارتفاعها 80px */
    inset-inline-start: 10%;
    inset-inline-end: 10%;
    height: 4px;
    background: linear-gradient(90deg, #FF6A3D, #C300B6);
    opacity: 0.15;
    /* شفافية للخط غير النشط */
    z-index: -1;
    border-radius: 10px;
}

/* ----------------------------------
   عنصر الخطوة وتفاعلاته (Step Item)
----------------------------------- */
.step-item {
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.step-item:hover {
    transform: translateY(-10px);
    /* رفع الخطوة للأعلى عند المرور */
}

/* دائرة الرقم */
.step-num {
    width: 80px;
    height: 80px;
    background: #fff;
    color: #C300B6;
    font-size: 28px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 25px;
    border: 4px solid #f4f4f9;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

/* تفاعل الدائرة عند المرور */
.step-item:hover .step-num {
    background: linear-gradient(135deg, #FF6A3D 0%, #C300B6 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 15px 30px rgba(195, 0, 182, 0.25);
    transform: scale(1.15) rotate(-5deg);
    /* تكبير وميلان خفيف */
}

/* نصوص الخطوة */
.step-item h4 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #1A002A;
    transition: color 0.3s;
}

.step-item:hover h4 {
    color: #C300B6;
    /* تلوين العنوان عند المرور */
}

.step-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* ----------------------------------
   تجاوب الموبايل والتابلت (Vertical Timeline)
----------------------------------- */
@media (max-width: 991px) {
    .steps-grid.five-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 30px;
    }

    .steps-grid.five-steps::before {
        display: none;
        /* إخفاء الخط الأفقي في التابلت لعدم ملاءمته */
    }
}

@media (max-width: 768px) {

    /* تحويل الهيكل لمسار عمودي جانبي */
    .steps-grid.five-steps {
        grid-template-columns: 1fr;
        gap: 30px;
        position: relative;
        padding-inline-start: 20px;
        /* مسافة من الحافة للخط */
    }

    /* رسم خط عمودي في الجوال */
    .steps-grid.five-steps::before {
        display: block;
        top: 0;
        bottom: 0;
        inset-inline-start: 50px;
        /* يتوسط الدوائر الجديدة */
        inset-inline-end: auto;
        width: 3px;
        height: 100%;
    }

    /* إعادة ترتيب الخطوة لتصبح أفقية (الرقم بجوار النص) */
    .step-item {
        display: flex;
        align-items: center;
        text-align: start;
        gap: 20px;
    }

    .step-item:hover {
        transform: translateX(-10px);
        /* في الجوال الحركة لليسار بدلاً من الأعلى */
    }

    html[dir="ltr"] .step-item:hover {
        transform: translateX(10px);
        /* في الإنجليزية لليمين */
    }

    /* تصغير الدائرة في الجوال لتناسب المسار */
    .step-num {
        margin: 0;
        flex-shrink: 0;
        /* منع الدائرة من الانضغاط */
        width: 60px;
        height: 60px;
        font-size: 22px;
        border-width: 3px;
    }
}

/* =======================================================
   7. مؤشرات الثقة والاعتمادية (Trust Indicators)
   ======================================================= */
.trust-indicators-section {
    padding: 100px 0;
    background-color: #f9f9fc;
    /* لون خلفية ناعم يفصل القسم عن ما قبله */
    position: relative;
}

.trust-indicators-section .section-title {
    margin-bottom: 60px;
}

/* التوسيط الذكي لـ 5 كروت */
.trust-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

/* تصميم الكارت */
.trust-item {
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    width: calc(33.333% - 20px);
    /* 3 كروت في الصف الأول */
    min-width: 280px;
    /* لضمان عدم تشوهها في الشاشات الأصغر */
    border: 1px solid #f0f0f5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.trust-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(195, 0, 182, 0.08);
    border-color: rgba(195, 0, 182, 0.2);
}

/* خط تزييني أعلى الكارت يظهر عند المرور */
.trust-item::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #FF6A3D, #C300B6);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: start;
}

.trust-item:hover::before {
    transform: scaleX(1);
}

/* الدائرة المضيئة للأيقونات */
.icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: rgba(195, 0, 182, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.trust-item:hover .icon-wrapper {
    background: linear-gradient(135deg, #C300B6 0%, #1A002A 100%);
}

.icon-wrapper i {
    font-size: 32px;
    color: #C300B6;
    transition: all 0.4s ease;
}

.trust-item:hover .icon-wrapper i {
    color: #fff;
    transform: scale(1.1);
}

/* نصوص الكارت */
.trust-item p {
    font-size: 16px;
    font-weight: 600;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

/* ----------------------------------
   البانر الختامي للقسم (Footer Banner)
----------------------------------- */
.trust-footer-banner {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 40px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border-inline-start: 5px solid #FF6A3D;
    /* خط جانبي برتقالي */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.trust-footer-banner .quote-icon {
    font-size: 24px;
    color: #e0e0e0;
}

.trust-footer-banner strong {
    font-size: 18px;
    color: #1A002A;
    line-height: 1.6;
}

/* ----------------------------------
   تجاوب الموبايل والتابلت
----------------------------------- */
@media (max-width: 991px) {
    .trust-item {
        width: calc(50% - 15px);
        /* كارتين في كل صف للتابلت */
    }

    .trust-footer-banner {
        flex-direction: column;
        text-align: center;
        border-inline-start: none;
        border-top: 5px solid #FF6A3D;
        /* نقل الخط للأعلى في التابلت */
    }
}

@media (max-width: 768px) {
    .trust-item {
        width: 100%;
        /* كارت واحد في الموبايل */
    }

    .trust-footer-banner strong {
        font-size: 16px;
    }
}

/* =======================================================
   إصلاح طول الصفحة (UX/UI Compact Optimization)
   ======================================================= */

/* 1. تقليل المسافات العلوية والسفلية المهدرة في الأقسام */
.onboarding-process,
.trust-indicators-section,
.choose-plan-section,
.faq-section {
    padding: 60px 0 !important;
    /* تقليل الفراغات بنسبة 40% */
}

/* 2. ضغط كروت مؤشرات الثقة لتصبح أفقية (أقل ارتفاعاً) في الكمبيوتر */
.trust-item {
    display: flex;
    align-items: center;
    text-align: start;
    /* محاذاة النص بجوار الأيقونة */
    padding: 20px 25px !important;
    gap: 15px;
    width: calc(33.333% - 20px) !important;
}

/* تصغير الأيقونات قليلاً لتناسب التصميم المضغوط */
.trust-item .icon-wrapper {
    margin: 0 !important;
    width: 55px !important;
    height: 55px !important;
    flex-shrink: 0;
}

.trust-item .icon-wrapper i {
    font-size: 22px !important;
}

.trust-item p {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* =======================================================
   الحل الجذري للجوال: التمرير الأفقي (Swipe Scrolling)
   ======================================================= */
@media (max-width: 768px) {

    /* أ. تحويل مؤشرات الثقة إلى تمرير أفقي (Carousel) */
    .trust-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 15px !important;
        padding-bottom: 20px !important;
        /* تمديد العنصر لحواف الشاشة في الجوال */
        margin-inline-start: -15px;
        margin-inline-end: -15px;
        padding-inline-start: 15px;
        padding-inline-end: 15px;
    }

    /* إخفاء شريط التمرير الافتراضي القبيح */
    .trust-grid::-webkit-scrollbar {
        display: none;
    }

    .trust-grid {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .trust-item {
        width: 85% !important;
        /* يأخذ 85% ليظهر جزء من الكارت التالي فيفهم المستخدم أنه قابل للسحب */
        flex-shrink: 0;
        scroll-snap-align: center;
        flex-direction: column;
        /* إعادته للوضع العمودي داخل الكارت فقط لترتيب النص */
        text-align: center;
    }

    .trust-item .icon-wrapper {
        margin: 0 auto 15px !important;
    }

    /* ب. ضغط قسم "ماذا يحدث بعد الاشتراك" في الجوال */
    .steps-grid.five-steps {
        gap: 15px !important;
        padding-inline-start: 10px !important;
    }

    .step-item {
        padding: 10px;
        background: #f9f9fc;
        border-radius: 12px;
        border: 1px solid #eee;
    }

    .step-num {
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
        border-width: 2px !important;
    }

    .step-item h4 {
        font-size: 15px !important;
        margin-bottom: 5px !important;
    }

    /* ج. تقليل حجم البانر الختامي */
    .trust-footer-banner {
        padding: 15px !important;
    }
}

/* =======================================================
   8. قسم كيف تختار الخطة ولمن تناسب (Plan Selection)
   ======================================================= */
.choose-plan-section {
    padding: 80px 0;
    background: #f4f4f9;
    /* خلفية ناعمة لدمج القسم بسلاسة */
}

.choose-plan-section .row-flex {
    display: flex;
    gap: 30px;
    align-items: stretch;
    /* لمساواة طول العمودين */
}

/* تصميم الأعمدة (الصناديق الكبيرة) */
.half-col {
    flex: 1;
    padding: 50px 40px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.half-col:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.half-col.dark-bg {
    background: linear-gradient(135deg, #1A002A 0%, #0B0014 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* العناوين مع خطوط التزيين (Accent Lines) */
.half-col .section-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 35px;
    position: relative;
    padding-bottom: 15px;
    color: #1A002A;
}

.half-col .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    /* يدعم RTL و LTR */
    width: 60px;
    height: 4px;
    background: #C300B6;
    border-radius: 5px;
}

.half-col.dark-bg .section-title {
    color: #fff;
}

.half-col.dark-bg .section-title::after {
    background: #FF6A3D;
    /* خط برتقالي للقسم المظلم */
}

/* ----------------------------------
   القائمة الأولى: كيف تختار؟
----------------------------------- */
.selection-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.selection-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: #f9f9fc;
    border-radius: 12px;
    border: 1px solid #eee;
    color: #555;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* تفاعل الكارت عند المرور */
.selection-list li:hover {
    background: #fff;
    box-shadow: 0 8px 20px rgba(195, 0, 182, 0.08);
    border-color: #e0d4e8;
    transform: translateY(-3px);
}

/* علامة عدد الموظفين (Pill) */
.highlight-tag {
    display: inline-block;
    background: rgba(195, 0, 182, 0.08);
    color: #C300B6;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    min-width: 140px;
    text-align: center;
    white-space: nowrap;
}

/* السهم وتفاعله */
.selection-list li i {
    color: #ccc;
    font-size: 14px;
    transition: transform 0.3s ease, color 0.3s ease;
}

html[dir="ltr"] .selection-list li i {
    transform: rotate(180deg);
    /* عكس السهم للإنجليزية */
}

.selection-list li:hover i {
    color: #FF6A3D;
    /* يتحول للبرتقالي */
    transform: translateX(-5px);
    /* يتحرك لليسار */
}

html[dir="ltr"] .selection-list li:hover i {
    transform: rotate(180deg) translateX(-5px);
}

.selection-list li strong {
    color: #1A002A;
    font-size: 15px;
    font-weight: 800;
}

/* ----------------------------------
   القائمة الثانية: لمن تناسب؟
----------------------------------- */
.target-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.target-list li {
    margin-bottom: 15px;
    font-size: 15px;
    color: #e0e0e0;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    /* كارت شفاف جداً */
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    transition: background 0.3s ease, transform 0.3s ease;
    line-height: 1.6;
}

.target-list li:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(-5px);
}

html[dir="ltr"] .target-list li:hover {
    transform: translateX(5px);
}

/* دائرة علامة الصح المضيئة */
.target-list li i {
    color: #FF6A3D;
    margin-top: 2px;
    font-size: 14px;
    background: rgba(255, 106, 61, 0.15);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    /* يمنع انضغاط الأيقونة */
}

/* ----------------------------------
   التجاوب مع الجوال والتابلت
----------------------------------- */
@media (max-width: 991px) {
    .choose-plan-section .row-flex {
        flex-direction: column;
        /* جعل الأعمدة فوق بعضها */
    }
}

@media (max-width: 768px) {
    .half-col {
        padding: 40px 20px;
        /* تقليل الفراغات الداخلية في الجوال */
    }

    .selection-list li {
        flex-direction: column;
        /* ترتيب النص تحت العلامة */
        align-items: flex-start;
        gap: 10px;
    }

    .selection-list li i {
        display: none;
        /* إخفاء السهم في الجوال لتنظيف التصميم */
    }

    .highlight-tag {
        min-width: 0;
        padding: 6px 15px;
    }
}


/* =======================================================
   9. قسم الأسئلة الشائعة (Interactive FAQ Accordion)
   ======================================================= */
.faq-section {
    padding: 80px 0;
    background: #fff;
    /* خلفية بيضاء نقية */
}

.faq-section .section-title {
    margin-bottom: 50px;
}

.faq-accordion {
    max-width: 850px;
    margin: 0 auto;
}

/* صندوق السؤال والإجابة */
.faq-item {
    background: #fff;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* التفاعل عند المرور (Hover) */
.faq-item:hover {
    border-color: #d1bfe0;
    box-shadow: 0 5px 20px rgba(195, 0, 182, 0.05);
}

/* ----------------------------------
   رأس السؤال (Question)
----------------------------------- */
.faq-question {
    padding: 25px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: #fff;
    transition: background 0.3s ease;
}

.faq-question h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1A002A;
    line-height: 1.5;
    transition: color 0.3s ease;
}

/* أيقونة الـ + (موضوعة داخل دائرة) */
.faq-question i {
    flex-shrink: 0;
    /* منع الأيقونة من الانضغاط إذا طال النص */
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f9;
    color: #C300B6;
    border-radius: 50%;
    font-size: 14px;
    transition: all 0.4s ease;
}

/* ----------------------------------
   مربع الإجابة (Answer)
----------------------------------- */
.faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
    background: #fff;
}

.faq-answer p {
    margin: 0;
    padding: 0 30px 25px 30px;
    /* الحشوة توضع هنا لمنع القفز أثناء الفتح */
    color: #555;
    line-height: 1.8;
    font-size: 15px;
}

/* ----------------------------------
   حالة الفتح (Active State)
----------------------------------- */
.faq-item.active {
    border-color: #C300B6;
    box-shadow: 0 10px 30px rgba(195, 0, 182, 0.08);
}

.faq-item.active .faq-question h3 {
    color: #C300B6;
    /* تلوين السؤال المفتوح بالبنفسجي */
}

/* تحويل أيقونة الـ + إلى X بدوران أنيق وتلوين الدائرة */
.faq-item.active .faq-question i {
    transform: rotate(135deg);
    background: #C300B6;
    color: #fff;
    box-shadow: 0 5px 15px rgba(195, 0, 182, 0.3);
}

.faq-item.active .faq-answer {
    max-height: 300px;
    /* ارتفاع كافٍ للإجابات */
    opacity: 1;
}

/* ----------------------------------
   التجاوب مع الجوال
----------------------------------- */
@media (max-width: 768px) {
    .faq-question {
        padding: 20px;
    }

    .faq-question h3 {
        font-size: 15px;
    }

    .faq-answer p {
        padding: 0 20px 20px 20px;
        font-size: 14px;
    }
}


/* 10. CTA السفلي */
.cta-assessment {
    padding: 80px 0;
    background: linear-gradient(135deg, #1A002A 0%, #C300B6 100%);
    color: #fff;
}

.cta-assessment h2 {
    color: #fff;
    margin-bottom: 20px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.btn-plan.large {
    padding: 15px 40px;
    font-size: 18px;
}

/* =========================================
   تجاوب الموبايل والتابلت (Responsive Fixes)
   ========================================= */
@media (max-width: 1199px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 40px;
    }

    .popular-card {
        transform: scale(1);
    }

    .popular-card:hover {
        transform: translateY(-10px);
    }

    .trust-item {
        width: calc(50% - 20px);
    }
}

@media (max-width: 991px) {
    .sla-grid {
        grid-template-columns: 1fr;
    }

    .row-flex {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 28px;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .compare-wrapper {
        flex-direction: column;
    }

    .steps-grid.five-steps .step-item {
        width: 100%;
        min-width: 100%;
        margin-bottom: 20px;
    }

    .trust-item {
        width: 100%;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .plans-table {
        min-width: 600px;
    }

    .selection-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .highlight-tag {
        width: auto;
        margin-bottom: 5px;
    }

    .selection-list li i {
        display: none;
    }
}


/* =======================================================
   IT Solutions Page Styles (Template: IT Solutions)
   ======================================================= */

/* --- 1. Hero Section (الهيرو) --- */
.solutions-hero {
    position: relative;
    background: linear-gradient(135deg, #1A002A 0%, #460A5D 100%);
    padding: 160px 0 120px;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.solutions-hero .hero-bg-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(195, 0, 182, 0.2) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.solutions-hero .container {
    position: relative;
    z-index: 2;
}

.solutions-hero .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFD700;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
}

.solutions-hero .hero-title {
    font-size: 46px;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 20px;
}

.solutions-hero .hero-title .highlight {
    color: #FF6A3D;
}

.solutions-hero .hero-subtitle {
    font-size: 18px;
    color: #b3b3cc;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

/* Grouped Buttons */
.hero-cta-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Buttons Reuse & Extension */
.btn-solution {
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.btn-solution.primary {
    background: linear-gradient(135deg, #FF6A3D 0%, #E74C3C 100%);
    color: #fff;
    box-shadow: 0 10px 25px rgba(255, 106, 61, 0.4);
}

.btn-solution.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 106, 61, 0.5);
}

.btn-solution.outline-light {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #fff;
}

.btn-solution.outline-light:hover {
    background: #fff;
    color: #1A002A;
    border-color: #fff;
}

/* --- 2. Impact Section (النتائج والمقارنة) --- */
.solutions-impact {
    padding: 80px 0;
    background-color: #fff;
}

.solutions-impact .section-title {
    margin-bottom: 50px;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.impact-card {
    background: #F8F9FB;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.impact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
}

.impact-card.highlight {
    background: linear-gradient(135deg, #1A002A 0%, #460A5D 100%);
    color: #fff;
    border: none;
}

.impact-num {
    font-size: 42px;
    font-weight: 900;
    color: #C300B6;
    margin-bottom: 5px;
    display: block;
}

.impact-card.highlight .impact-num {
    color: #FF6A3D;
}

.impact-card p {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #666;
}

.impact-card.highlight p {
    color: #fff;
}

/* Comparison Container */
.comparison-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.comp-box {
    padding: 40px;
    border-radius: 20px;
    position: relative;
}

.comp-box.before {
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.comp-box.after {
    background: #F8F9FB;
    border: 2px solid #C300B6;
    box-shadow: 0 20px 40px rgba(195, 0, 182, 0.08);
}

.comp-box h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #1A002A;
}

.comp-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comp-box ul li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 15px;
    color: #555;
}

.comp-box ul li i {
    margin-top: 4px;
    font-size: 16px;
}

.comp-box.before li i {
    color: #e74c3c;
}

.comp-box.after {
    background: linear-gradient(135deg, #1A002A 0%, #0B0014 100%);
    color: #fff;
}

.comp-box.after h3 {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.comp-box.after li {
    color: #e0e0e0;
}

.comp-box.after li i {
    color: #2ecc71;
}

/* --- 3. Core Pillars (الحلول الأساسية) --- */
.core-pillars {
    padding: 80px 0;
    background-color: #F8F9FB;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.pillar-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #C300B6, #FF6A3D);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

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

.pillar-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border-color: transparent;
}

.pillar-card i {
    font-size: 40px;
    color: #C300B6;
    margin-bottom: 20px;
    display: block;
    transition: transform 0.3s ease;
}

.pillar-card:hover i {
    color: #FF6A3D;
    transform: scale(1.1);
}

.pillar-card h4 {
    font-size: 20px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 15px;
}

.pillar-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* --- 4. Methodology (المنهجية) --- */
.methodology-section {
    padding: 80px 0;
    background-color: #fff;
}

.methodology-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 50px;
}

/* Connecting Line */
.methodology-steps::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 50px;
    right: 50px;
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
}

.m-step {
    position: relative;
    z-index: 1;
    text-align: center;
    background: #fff;
    padding: 0 10px;
    flex: 1;
}

.m-step span {
    width: 50px;
    height: 50px;
    background: #1A002A;
    color: #FF6A3D;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 800;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
    border: 2px solid #fff;
}

.m-step:hover span {
    background: #C300B6;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(195, 0, 182, 0.3);
}

.m-step h5 {
    font-size: 16px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 8px;
}

.m-step p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* =======================================================
   5. قسم القطاعات (Sectors UI) - تصميم مضغوط وحديث
   ======================================================= */
.sectors-section {
    padding: 70px 0;
    background-color: #f9f9fc;
    border-top: 1px solid #eee;
}

.sectors-subtitle {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

/* شبكة القطاعات (Flexbox لضمان التمركز) */
.sectors-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

/* تصميم الوسام (Sector Tag) */
.sector-tag {
    background: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    color: #1A002A;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.sector-tag i {
    color: #C300B6;
    font-size: 16px;
}

.sector-tag:hover {
    background: #1A002A;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(195, 0, 182, 0.15);
    border-color: #1A002A;
}

.sector-tag:hover i {
    color: #2ecc71;
    /* تغيير لون الأيقونة عند الوقوف */
}

/* ميزات التغطية الإضافية  */
.coverage-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    max-width: 700px;
    margin: 0 auto;
}

.coverage-features span {
    font-size: 13px;
    font-weight: 600;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
}

.coverage-features i {
    color: #FF6A3D;
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .sector-tag {
        width: 100%;
        /* تظهر كقائمة في الجوال لسهولة القراءة */
        justify-content: center;
    }

    .coverage-features {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
}

/* --- 6. Solutions Final CTA --- */
.solutions-final-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, #1A002A 0%, #C300B6 100%);
    text-align: center;
    color: #fff;
}

.solutions-final-cta h2 {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 15px;
}

.solutions-final-cta p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 35px;
}

.solutions-final-cta .cta-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* =======================================================
   Responsive Design (تجاوب الشاشات)
   ======================================================= */

@media (max-width: 991px) {
    .impact-grid {
        grid-template-columns: 1fr;
    }

    .comparison-container {
        grid-template-columns: 1fr;
    }

    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .methodology-steps::before {
        display: none;
        /* Hide horizontal line on tablet */
    }

    .methodology-steps {
        flex-wrap: wrap;
        gap: 30px;
    }

    .m-step {
        flex: 0 0 45%;
    }
}

@media (max-width: 768px) {
    .solutions-hero {
        padding: 120px 0 80px;
    }

    .solutions-hero .hero-title {
        font-size: 32px;
    }

    .pillars-grid {
        grid-template-columns: 1fr;
    }

    .m-step {
        flex: 0 0 100%;
    }

    .solutions-final-cta h2 {
        font-size: 26px;
    }
}

/* =======================================================
   Additions for IT Solutions Page (Completeness)
   ======================================================= */

/* --- Why Us / USP Section --- */
.why-us-section {
    padding: 80px 0;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.usp-item {
    text-align: center;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.usp-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.usp-item i {
    font-size: 40px;
    color: #C300B6;
    margin-bottom: 20px;
}

.usp-item h5 {
    font-size: 18px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 10px;
}

.usp-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Subtitle for Sectors */
.sectors-subtitle {
    color: #888;
    margin-bottom: 25px;
    font-size: 16px;
}

/* Responsive for Additions */
@media (max-width: 991px) {
    .usp-grid {
        grid-template-columns: 1fr;
    }
}


/* =======================================================
   Detailed Pillars Cards Styling (Advanced Layout)
   ======================================================= */

.detailed-section {
    padding: 80px 0;
    background-color: #F8F9FB;
}

.pillars-grid-detailed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 أعمدة للشاشات الكبيرة */
    gap: 30px;
}

/* تصميم البطاقة المتقدمة */
.pillar-card-detailed {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
    /* لتنظيف الحواف */
    position: relative;
}

/* الخط العلوي الملون */
.pillar-card-detailed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #C300B6, #FF6A3D);
    opacity: 0;
    /* مخفي افتراضياً */
    transition: opacity 0.3s;
}

.pillar-card-detailed:hover::before {
    opacity: 1;
}

.pillar-card-detailed:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

/* رأس البطاقة (الأيقونة والعنوان) */
.pillar-card-detailed .card-header {
    padding: 30px 30px 20px;
    text-align: center;
    background: #fff;
}

.pillar-card-detailed .icon-wrapper {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: rgba(195, 0, 182, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(195, 0, 182, 0.1);
}

.pillar-card-detailed .icon-wrapper i {
    font-size: 28px;
    color: #C300B6;
    transition: all 0.3s ease;
}

.pillar-card-detailed:hover .icon-wrapper {
    background: #C300B6;
    transform: scale(1.1);
}

.pillar-card-detailed:hover .icon-wrapper i {
    color: #fff;
}

.pillar-card-detailed h4 {
    font-size: 20px;
    font-weight: 800;
    color: #1A002A;
    margin: 0;
    line-height: 1.4;
}

/* جسم البطاقة (النصوص والقوائم) */
.pillar-card-detailed .card-body {
    padding: 0 30px 20px;
    flex-grow: 1;
    /* ليدفع التذييل للأسفل */
}

.card-intro {
    font-size: 15px;
    color: #666;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.6;
}

/* قائمة الميزات (Feature List) */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    position: relative;
    padding: 8px 0;
    padding-inline-start: 25px;
    /* مساحة للأيقونة */
    font-size: 14px;
    color: #444;
    border-bottom: 1px dashed #f0f0f0;
}

.feature-list li:last-child {
    border-bottom: none;
}

/* أيقونة الصح الصغيرة بجانب كل نقطة */
.feature-list li::before {
    content: '\f00c';
    /* Font Awesome Check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset-inline-start: 0;
    top: 9px;
    color: #FF6A3D;
    font-size: 12px;
}

/* تذييل البطاقة (الملاحظة الختامية) */
.card-footer-note {
    background: #FAFAFA;
    padding: 15px 25px;
    margin-top: auto;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-footer-note i {
    color: #C300B6;
    font-size: 14px;
}

.card-footer-note span {
    font-size: 13px;
    color: #777;
    font-style: italic;
    line-height: 1.4;
}

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

@media (max-width: 991px) {
    .pillars-grid-detailed {
        grid-template-columns: repeat(2, 1fr);
        /* عمودين */
    }
}

@media (max-width: 768px) {
    .pillars-grid-detailed {
        grid-template-columns: 1fr;
        /* عمود واحد */
    }

    .pillar-card-detailed .card-header {
        padding: 25px 20px 15px;
    }

    .pillar-card-detailed .card-body {
        padding: 0 20px 15px;
    }

    .card-footer-note {
        padding: 12px 20px;
    }
}


/* 2. شبكة "لماذا نحن" الجديدة (7 عناصر) */
.usp-grid-detailed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 40px;
    text-align: center;
}

.usp-item {
    background: #fff;
    padding: 25px 20px;
    border-radius: 10px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.usp-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: #C300B6;
}

.usp-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: rgba(195, 0, 182, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usp-icon i {
    font-size: 24px;
    color: #C300B6;
    transition: color 0.3s;
}

.usp-item:hover .usp-icon i {
    color: #FF6A3D;
}

.usp-item h5 {
    font-size: 16px;
    font-weight: 700;
    color: #1A002A;
    margin: 0;
    line-height: 1.4;
}

/* Subtitle styling */
.section-subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
}

/* 3. أيقونات منهجية العمل (Methodology) */
.m-step i {
    display: none;
    /* إخفاء أيقونة إن وجدة للاعتماد على الرقم */
}

/* 4. أيقونات الأزرار */
.btn-solution i {
    margin-inline-end: 8px;
    font-size: 18px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.btn-solution:hover i {
    transform: translateX(5px);
    /* حركة السهم أو الأيقونة */
}

html[dir="rtl"] .btn-solution:hover i {
    transform: translateX(-5px);
}

/* Keyframes for Spin */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* =======================================================
   Sectors Page Styling (Challenges vs Solutions)
   ======================================================= */

/* 1. Hero */
.sectors-hero {
    background: linear-gradient(135deg, #1A002A 0%, #460A5D 100%);
    padding: 140px 0 100px;
    color: #fff;
    text-align: center;
    position: relative;
}

/* 2. Grid Layout */
.sectors-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* عمودين للشاشات الكبيرة */
    gap: 30px;
}

/* 3. Sector Card */
.sector-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.sector-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Header */
.sector-header {
    background: #F8F9FB;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #eee;
}

.sector-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #C300B6, #FF6A3D);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

.sector-header h3 {
    margin: 0;
    font-size: 20px;
    color: #1A002A;
    font-weight: 800;
}

/* Content Layout (Split View) */
.sector-content {
    display: flex;
    /* يعرض التحديات والحلول جنبًا إلى جنب */
}

.sector-col {
    flex: 1;
    padding: 25px;
}

.sector-col h5 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Challenges Styling */
.sector-col.challenges {
    background: #FFFAFA;
    /* خلفية حمراء خفيفة جداً */
}

.sector-col.challenges h5 {
    color: #e74c3c;
}

.sector-col.challenges li {
    position: relative;
    padding-inline-start: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
}

.sector-col.challenges li::before {
    content: "•";
    color: #e74c3c;
    position: absolute;
    inset-inline-start: 0;
    font-weight: bold;
}

/* Solutions Styling */
.sector-col.solutions {
    background: #F0FFF4;
    /* خلفية خضراء خفيفة جداً */
}

.sector-col.solutions h5 {
    color: #27ae60;
}

.sector-col.solutions li {
    position: relative;
    padding-inline-start: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
}

.sector-col.solutions li::before {
    content: "✓";
    color: #27ae60;
    position: absolute;
    inset-inline-start: 0;
    font-weight: bold;
}

/* Divider Line */
.sector-divider {
    width: 1px;
    background: #eee;
    margin: 20px 0;
}

/* 4. Coverage Section */
.coverage-section {
    padding: 80px 0;
}

.coverage-desc {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 17px;
    color: #666;
}

.coverage-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.cov-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cov-item i {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #C300B6;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.cov-item span {
    font-weight: 700;
    color: #1A002A;
}

/* =======================================================
   Sectors CTA Updated (Features Grid)
   ======================================================= */

.sectors-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, #1A002A 0%, #C300B6 100%);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

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

.sectors-cta h2 {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 15px;
    position: relative;
}

.cta-intro {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 50px;
    position: relative;
}

/* شبكة المميزات (4 أعمدة) */
.assessment-features-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.assess-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px 20px;
    border-radius: 15px;
    width: 200px;
    /* عرض ثابت للتناسق */
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.assess-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border-color: #FF6A3D;
}

.assess-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 106, 61, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: #FF6A3D;
    font-size: 20px;
}

.assess-item span {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
}

/* زر CTA */
.cta-action {
    position: relative;
    z-index: 2;
}

.btn-solution.btn-lg {
    padding: 18px 45px;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 10px 25px rgba(255, 106, 61, 0.4);
}

.btn-solution.btn-lg:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(255, 106, 61, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .assessment-features-grid {
        gap: 15px;
    }

    .assess-item {
        width: 45%;
        /* عمودين في الجوال */
        padding: 20px 15px;
    }

    .sectors-cta h2 {
        font-size: 28px;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .sectors-wrapper {
        grid-template-columns: 1fr;
    }

    .sector-content {
        flex-direction: column;
        /* تصبح التحديات فوق الحلول في الجوال */
    }

    .sector-divider {
        width: 100%;
        height: 1px;
        margin: 10px 0;
    }
}

/* =======================================================
   Sectors Intro (Transition Section)
   ======================================================= */
.sectors-intro {
    padding: 80px 0 60px;

    /* لون رمادي فاتح جداً به مسحة بنفسجية خفيفة ليربط بين الهيرو الداكن والأبيض */
    background-color: #F8F5FB;

    /* إضافة حواف دائرية علوية لتكسير حدة الانتقال (اختياري ولكنه أنيق) */
    border-radius: 40px 40px 0 0;
    margin-top: -40px;
    /* تداخل بسيط مع الهيرو لعمل منحنى جميل */
    position: relative;
    z-index: 2;
}

.intro-desc {
    font-size: 18px;
    color: #555;
    /* لون نص أغمق قليلاً ليتضح على الخلفية الفاتحة */
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.usp-mini-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.usp-mini-item {
    background: #fff;
    /* بطاقات بيضاء لتبرز على الخلفية الفاتحة */
    padding: 15px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    /* إزالة الحدود الرمادية لتصبح أنظف */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    /* ظل خفيف جداً */
    transition: all 0.3s ease;
}

.usp-mini-item i {
    color: #C300B6;
    font-size: 18px;
}

.usp-mini-item span {
    font-weight: 700;
    font-size: 15px;
    color: #1A002A;
}

.usp-mini-item:hover {
    background: #C300B6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(195, 0, 182, 0.15);
}

.usp-mini-item:hover i,
.usp-mini-item:hover span {
    color: #fff;
}

/* =======================================================
   صفحة من نحن (About Us Page Styles) - احترافية ومحسنة
   ======================================================= */
/* =======================================================
   صفحة من نحن - قسم الهيرو (Interactive Tech Hero)
   ======================================================= */
/* =======================================================
   تحسينات قسم الهيرو (About Hero Refined)
   ======================================================= */
.about-hero {
    position: relative;
    background: linear-gradient(135deg, #070012 0%, #1A002A 100%);
    padding: 180px 0 100px;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

/* العنوان الرئيسي الفخم */
.about-hero .hero-title {
    font-size: 44px;
    font-weight: 900;
    margin-bottom: 25px;
    line-height: 1.3;
}

/* النص التعريفي الرئيسي */
.about-hero .hero-desc {
    font-size: 20px;
    color: #e0e0e0;
    max-width: 900px;
    margin: 0 auto 30px;
    line-height: 1.8;
    font-weight: 500;
}

/* شريط معلومات المقر والانتشار [cite: 135] */
.hero-location-info {
    display: inline-block;
    background: rgba(195, 0, 182, 0.1);
    border: 1px solid rgba(195, 0, 182, 0.2);
    padding: 15px 30px;
    border-radius: 15px;
    margin-top: 20px;
    backdrop-filter: blur(5px);
}

.hero-location-info p {
    margin: 0;
    font-size: 16px;
    color: #fff;
}

.hero-location-info strong {
    color: #FF6A3D;
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .about-hero .hero-title {
        font-size: 28px;
    }

    .about-hero .hero-desc {
        font-size: 16px;
    }

    .hero-location-info {
        padding: 12px 20px;
    }
}

.about-hero {
    position: relative;
    background: linear-gradient(135deg, #0B0014 0%, #1A002A 100%);
    /* خلفية داكنة جداً تبرز الخطوط */
    padding: 190px 0 140px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    z-index: 1;
}

/* شاشة التأثير التفاعلي */
.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: auto;
    /* السماح للماوس بالتفاعل مع الشاشة */
}

.about-hero .container {
    position: relative;
    z-index: 2;
    pointer-events: none;
    /* جعل النصوص لا تعيق حركة الماوس على الشاشة الخلفية */
}

/* شارة التميز */
.about-hero .hero-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    /* الأخضر يرمز للاستقرار والنمو */
    padding: 8px 25px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
    animation: floatBadge 4s ease-in-out infinite;
}

@keyframes floatBadge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* العنوان الرئيسي */
.about-hero .hero-title {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 25px;
    line-height: 1.4;
    letter-spacing: -0.5px;
}

.about-hero .hero-title .highlight {
    background: linear-gradient(90deg, #FF6A3D, #C300B6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* النص الفرعي */
.about-hero .hero-desc {
    font-size: 18px;
    color: #b3b3cc;
    max-width: 850px;
    margin: 0 auto;
    line-height: 1.8;
    font-weight: 400;
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .about-hero {
        padding: 140px 0 100px;
    }

    .about-hero .hero-title {
        font-size: 30px;
        line-height: 1.5;
    }

    .about-hero .hero-desc {
        font-size: 15px;
        padding: 0 15px;
    }
}

/* 2. Story Section (Why Founded) */
.about-story {
    padding: 80px 0;
    background-color: #fff;
}

.story-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 50px;
    align-items: center;
}

.story-content h2 {
    font-size: 32px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 25px;
}

.story-content .lead {
    font-size: 18px;
    color: #555;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.6;
}

.pain-points {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.pain-points li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #444;
    background: #FFF5F5;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid #feeaea;
}

.pain-points li i {
    color: #e74c3c;
    font-size: 18px;
}

.solution-box {
    background: #F8F5FB;
    border-inline-start: 5px solid #C300B6;
    /* دعم الـ RTL */
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}

.solution-box h4 {
    color: #C300B6;
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 800;
}

.solution-box p {
    margin: 0;
    color: #555;
    line-height: 1.7;
    font-size: 15px;
}

/* Visual Card */
.visual-card {
    background: linear-gradient(135deg, #1A002A, #C300B6);
    color: #fff;
    padding: 50px 40px;
    border-radius: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    box-shadow: 0 20px 50px rgba(195, 0, 182, 0.2);
    transition: transform 0.4s ease;
}

.visual-card:hover {
    transform: translateY(-10px);
}

.visual-card i {
    font-size: 65px;
    margin-bottom: 25px;
    color: #FFD700;
}

.visual-card span {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.5;
}

/* 3. Identity Section */
.identity-section {
    padding: 80px 0;
    background-color: #F8F5FB;
    text-align: center;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.value-item {
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #eee;
}

.value-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(195, 0, 182, 0.08);
    border-color: #e0d4e8;
}

.icon-circle {
    width: 80px;
    height: 80px;
    background: rgba(195, 0, 182, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: 0.4s;
}

.value-item:hover .icon-circle {
    background: #C300B6;
}

.icon-circle i {
    font-size: 32px;
    color: #C300B6;
    transition: 0.4s;
}

.value-item:hover .icon-circle i {
    color: #fff;
    transform: scale(1.1);
}

/* 4. Vision & Mission */
.vision-mission-section {
    padding: 80px 0;
    background: #fff;
}

.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.vm-card {
    padding: 50px 40px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #eee;
    transition: 0.3s;
}

.vm-card:hover {
    transform: translateY(-5px);
}

.vm-card.vision {
    background: #1A002A;
    color: #fff;
    box-shadow: 0 15px 40px rgba(26, 0, 42, 0.15);
    border: none;
}

.vm-card.mission {
    background: #F8F5FB;
    color: #1A002A;
}

.vm-card i {
    font-size: 45px;
    margin-bottom: 25px;
    color: #C300B6;
}

.vm-card.vision i {
    color: #FFD700;
}

.vm-card h3 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 20px;
}

.vm-card p {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
}

.vm-card.vision p {
    color: #ccc;
}


/* =======================================================
   قسم البصمة التشغيلية والأرقام (Operational Footprint)
   ======================================================= */
.footprint-section {
    padding: 90px 0;
    background: #fff;
    border-top: 1px solid #f0f0f5;
}

.footprint-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 40px;
}

/* --- الجزء النصي --- */
.footprint-heading {
    font-size: 26px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 20px;
}

.footprint-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

.footprint-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footprint-features li {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f9f9fc;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: 0.3s ease;
}

.footprint-features li:hover {
    background: #fff;
    border-color: #C300B6;
    box-shadow: 0 5px 15px rgba(195, 0, 182, 0.05);
}

.footprint-features .icon-box {
    width: 40px;
    height: 40px;
    background: rgba(195, 0, 182, 0.1);
    color: #C300B6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.footprint-features span {
    font-weight: 700;
    color: #1A002A;
    font-size: 15px;
}

/* --- شبكة الأرقام (KPIs) --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.kpi-card {
    background: #f8f5fb;
    padding: 35px 20px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(195, 0, 182, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* الكارت الثالث يأخذ العرض كاملاً في سطر جديد */
.kpi-card:last-child {
    grid-column: span 2;
}

.kpi-card:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 15px 30px rgba(195, 0, 182, 0.08);
    border-color: #C300B6;
}

.kpi-card.highlight-kpi {
    background: linear-gradient(135deg, #1A002A 0%, #0B0014 100%);
    color: #fff;
    border: none;
    box-shadow: 0 10px 25px rgba(26, 0, 42, 0.15);
}

.kpi-val {
    display: block;
    font-size: 46px;
    font-weight: 900;
    color: #C300B6;
    margin-bottom: 5px;
    line-height: 1;
}

.kpi-card.highlight-kpi .kpi-val {
    color: #2ecc71;
    /* لون أخضر للأرباح وخفض التكاليف */
}

.kpi-val small {
    font-size: 20px;
    font-weight: 700;
    margin-inline-start: 2px;
}

.kpi-label {
    font-size: 14px;
    color: #666;
    font-weight: 700;
    display: block;
    margin-top: 5px;
}

.kpi-card.highlight-kpi .kpi-label {
    color: #e0e0e0;
}

/* --- التجاوب مع الشاشات --- */
@media (max-width: 991px) {
    .footprint-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .kpi-card:last-child {
        grid-column: span 1;
    }
}

/* =======================================================
   قسم جدول المقارنة الشامل (Data Future vs Traditional - النسخة المحصنة 100%)
   ======================================================= */
.comparison-full-section {
    padding: 90px 0;
    background: #f4f4f9 !important;
    /* خلفية تفصل القسم عن ما قبله */
}

.comparison-full-section .section-header {
    margin-bottom: 40px;
}

.comparison-full-section .section-desc {
    max-width: 700px;
    margin: 0 auto;
    font-size: 16px;
    color: #666 !important;
    line-height: 1.6;
}

/* حاوية الجدول */
.comparison-full-section .comparison-table-wrapper {
    overflow-x: auto;
    background: #fff !important;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid #eaeaea !important;
    /* تنسيق سكرول أنيق للمتصفحات الحديثة */
    scrollbar-width: thin;
    scrollbar-color: #C300B6 #f4f4f9;
    -webkit-overflow-scrolling: touch;
}

.comparison-full-section .comparison-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.comparison-full-section .comparison-table-wrapper::-webkit-scrollbar-track {
    background: #f4f4f9;
    border-radius: 10px;
}

.comparison-full-section .comparison-table-wrapper::-webkit-scrollbar-thumb {
    background-color: #C300B6;
    border-radius: 10px;
}

/* ----------------------------------
   إعدادات الجدول (محصنة ضد القالب)
----------------------------------- */
.comparison-full-section table.comp-table {
    width: 100% !important;
    border-collapse: collapse !important;
    min-width: 850px;
    background: #fff !important;
    margin: 0 !important;
}

/* تحييد ألوان الصفوف الافتراضية للقالب */
.comparison-full-section table.comp-table tr {
    background: transparent !important;
}

.comparison-full-section table.comp-table th,
.comparison-full-section table.comp-table td {
    padding: 22px 25px !important;
    border-bottom: 1px solid #f0f0f5 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 15px;
    background: transparent !important;
}

/* الرأس العام (Headers) */
.comparison-full-section table.comp-table thead th {
    background: #fff !important;
    font-size: 18px;
    font-weight: 800 !important;
    color: #1A002A !important;
    border-bottom: 2px solid #eaeaea !important;
    vertical-align: middle;
}

/* العمود الأول (الميزة) */
.comparison-full-section table.comp-table td.feature-name,
.comparison-full-section table.comp-table th:first-child {
    font-weight: 800 !important;
    color: #1A002A !important;
    width: 25%;
}

/* عمود "النموذج التقليدي" (باهت) */
.comparison-full-section table.comp-table .traditional-col {
    color: #999 !important;
    background: #fcfcfc !important;
    text-align: center !important;
    width: 30%;
}

.comparison-full-section table.comp-table .traditional-col i {
    color: #e74c3c !important;
    /* لون أحمر لأيقونة الخطأ إن وُجدت */
    margin-inline-end: 8px;
}

/* ----------------------------------
   عمود "Data Future" (بطل الجدول)
----------------------------------- */
.comparison-full-section table.comp-table .highlight-col {
    background: rgba(195, 0, 182, 0.03) !important;
    color: #1A002A !important;
    font-weight: 700 !important;
    border-inline-start: 2px solid rgba(195, 0, 182, 0.1) !important;
    border-inline-end: 2px solid rgba(195, 0, 182, 0.1) !important;
    width: 45%;
    position: relative;
}

/* ضمان محاذاة النص لسهولة القراءة حسب لغة الموقع */
html[dir="rtl"] .comparison-full-section table.comp-table .highlight-col {
    text-align: right !important;
}

html[dir="ltr"] .comparison-full-section table.comp-table .highlight-col {
    text-align: left !important;
}

/* شارة واسم Data Future في الرأس (الزر الملون) */
.comparison-full-section .df-brand-badge {
    display: inline-block !important;
    background: linear-gradient(135deg, #FF6A3D 0%, #C300B6 100%) !important;
    color: #fff !important;
    padding: 10px 25px !important;
    border-radius: 30px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    box-shadow: 0 5px 15px rgba(195, 0, 182, 0.2) !important;
}

.comparison-full-section .df-brand-badge i {
    color: #FFD700 !important;
    margin-inline-end: 8px;
}

/* أيقونة الصح الخضراء المميزة */
.comparison-full-section table.comp-table .highlight-col .text-success,
.comparison-full-section table.comp-table .highlight-col i {
    color: #2ecc71 !important;
    /* الأخضر الظاهر في الصورة */
    font-size: 18px !important;
    margin-inline-end: 10px !important;
}

/* تفاعل الصف عند المرور (Hover Effect) */
.comparison-full-section table.comp-table tbody tr {
    transition: background 0.3s ease;
}

.comparison-full-section table.comp-table tbody tr:hover {
    background-color: #faf5ff !important;
}

.comparison-full-section table.comp-table tbody tr:hover .highlight-col {
    background: rgba(195, 0, 182, 0.08) !important;
}

/* ----------------------------------
   التجاوب مع الجوال (Mobile & Tablet)
----------------------------------- */
@media (max-width: 991px) {

    /* تثبيت العمود الأول في الجوال أثناء التمرير الأفقي لمنع التشوه */
    .comparison-full-section table.comp-table td.feature-name,
    .comparison-full-section table.comp-table thead th:first-child {
        position: sticky !important;
        inset-inline-start: 0 !important;
        background: #fff !important;
        z-index: 2;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05) !important;
    }
}

/* =======================================================
   قسم الاعتمادات والخبرات التقنية (Accreditations & Expertise)
   ======================================================= */
.accreditations-section {
    padding: 80px 0;
    background: #F8F5FB;
    /* خلفية فاتحة جداً مائلة للبنفسجي لكسر الملل */
    border-top: 1px solid #eee;
}

.acc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* --- 1. قسم الاعتمادات (الجانب الأيمن/الأيسر) --- */
.acc-content h2 {
    font-size: 32px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 20px;
}

.acc-content p {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
}

.acc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.acc-list li {
    background: #fff;
    padding: 18px 25px;
    border-radius: 12px;
    border-inline-start: 4px solid #C300B6;
    /* خط جانبي يتكيف مع اتجاه اللغة */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #444;
    transition: all 0.3s ease;
}

.acc-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    border-color: #FF6A3D;
    /* تغيير لون الخط الجانبي عند الوقوف */
}

.acc-list li i.text-success {
    color: #2ecc71;
    /* لون الصح الأخضر */
    font-size: 18px;
}

.acc-list li strong {
    color: #1A002A;
    font-weight: 800;
}

/* --- 2. صندوق الخبرات التقنية (Technical Expertise) --- */
.tech-expertise {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    text-align: center;
}

.tech-expertise h3 {
    font-size: 24px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 30px;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.tech-tags span {
    background: #f9f9fc;
    padding: 12px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    color: #555;
    border: 1px solid #eaeaea;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
}

.tech-tags span:hover {
    background: linear-gradient(135deg, #1A002A 0%, #C300B6 100%);
    color: #fff;
    border-color: transparent;
    transform: translateY(-4px) scale(1.05);
    /* حركة طفو وتكبير ناعمة */
    box-shadow: 0 8px 20px rgba(195, 0, 182, 0.2);
}

/* --- 3. التجاوب مع شاشات الجوال والتابلت --- */
@media (max-width: 991px) {
    .acc-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tech-expertise {
        padding: 30px 20px;
    }
}


/* 6. USP Grid (Unique Selling Propositions) */
.usp-section {
    padding: 80px 0;
    background: #f9f9fc;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.usp-item {
    background: #fff;
    padding: 25px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #eee;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.usp-item i {
    font-size: 26px;
    color: #FF6A3D;
    flex-shrink: 0;
}

.usp-item span {
    font-weight: 800;
    color: #1A002A;
    font-size: 15px;
    line-height: 1.4;
}

.usp-item:hover {
    border-color: #C300B6;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(195, 0, 182, 0.08);
}

/* 7. Coverage & Risks (Before & After Context) */
.coverage-risks-section {
    padding: 80px 0;
    background: #fff;
}

.cr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.coverage-box,
.risks-box {
    padding: 40px;
    border-radius: 20px;
}

.coverage-box {
    background: #F8F5FB;
    border: 1px solid rgba(195, 0, 182, 0.1);
}

.risks-box {
    background: #FFF5F5;
    border: 1px solid rgba(231, 76, 60, 0.1);
}

.coverage-box h3,
.risks-box h3 {
    font-size: 22px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
}

.coverage-box h3 i {
    color: #C300B6;
}

.risks-box h3 i {
    color: #e74c3c;
}

.risks-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.risks-box li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}

.risks-box li i {
    color: #e74c3c;
    margin-top: 4px;
}

/* استبدال الـ pseudo-element بأيقونة حقيقية */

/* 8. Trust Section */
.trust-section {
    padding: 60px 0;
    text-align: center;
}

.trust-desc {
    font-size: 18px;
    margin-bottom: 35px;
    color: #555;
    font-weight: 600;
}

.trust-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.trust-item {
    background: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    color: #1A002A;
    font-size: 14px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.trust-item i {
    color: #2ecc71;
    font-size: 16px;
}

.trust-item:hover {
    background: #1A002A;
    color: #fff;
    border-color: #1A002A;
}

/* =======================================================
   قسم الدعوة لاتخاذ إجراء (About CTA Section)
   ======================================================= */
.about-cta {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, #1A002A 0%, #C300B6 100%);
    text-align: center;
    color: #fff;
    overflow: hidden;
    margin-top: 40px;
}

/* أشكال هندسية خلفية لكسر الجمود */
.cta-bg-shapes {
    position: absolute;
    top: -50%;
    left: -10%;
    width: 120%;
    height: 200%;
    background: radial-gradient(circle at 80% 20%, rgba(255, 106, 61, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(46, 204, 113, 0.1) 0%, transparent 40%);
    z-index: 0;
    pointer-events: none;
}

.about-cta .relative-z {
    position: relative;
    z-index: 2;
}

.about-cta .cta-title {
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.about-cta .cta-desc {
    font-size: 18px;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ----------------------------------
   أزرار الـ CTA الخاصة بصفحة من نحن
----------------------------------- */
.cta-buttons-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-cta-primary,
.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 35px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* الزر الرئيسي */
.btn-cta-primary {
    background: #FF6A3D;
    /* برتقالي ساطع للفت الانتباه */
    color: #fff;
    box-shadow: 0 8px 25px rgba(255, 106, 61, 0.3);
}

.btn-cta-primary:hover {
    background: #e65c35;
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(255, 106, 61, 0.4);
    color: #fff;
}

/* الزر الثانوي */
.btn-cta-outline {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
}

.btn-cta-outline:hover {
    background: #fff;
    color: #C300B6;
    /* لون النص يتغير للبنفسجي عند الوقوف */
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .about-cta {
        padding: 80px 0;
    }

    .about-cta .cta-title {
        font-size: 30px;
    }

    .about-cta .cta-desc {
        font-size: 16px;
        padding: 0 15px;
    }

    .cta-buttons-group {
        flex-direction: column;
        padding: 0 20px;
    }

    .btn-cta-primary,
    .btn-cta-outline {
        width: 100%;
    }
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .about-hero .hero-title {
        font-size: 36px;
    }

    .story-grid,
    .vm-grid,
    .values-grid,
    .footprint-grid,
    .cr-grid,
    .usp-grid {
        grid-template-columns: 1fr;
    }

    .visual-card {
        display: none;
    }

    .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    /* الحفاظ على 3 كروت في التابلت */
}

@media (max-width: 768px) {
    .about-hero {
        padding: 140px 0 100px;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }

    /* كارت واحد في الجوال */
    .trust-item {
        width: 100%;
        justify-content: center;
    }
}

/* =======================================================
   صفحة اتصل بنا / حجز استشارة (Consultation Page)
   ======================================================= */

/* 1. Hero Section */
.contact-hero {
    background: linear-gradient(135deg, #0B0014 0%, #1A002A 100%);
    padding: 160px 0 80px;
    text-align: center;
    color: #fff;
}

.contact-hero .hero-badge {
    display: inline-block;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

.contact-hero .hero-title {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 20px;
}

.contact-hero .highlight {
    background: linear-gradient(90deg, #FF6A3D, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-hero .hero-desc {
    font-size: 18px;
    color: #ccc;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 2. Split Section (Info & Form) */
.consultation-split {
    padding: 60px 0 100px;
    background: #f4f4f9;
}

.split-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
}

/* Info Side */
.consultation-info h3 {
    font-size: 24px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 20px;
}

.pain-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.pain-list li {
    font-size: 15px;
    color: #444;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pain-list li i {
    color: #FF6A3D;
    font-size: 18px;
}

.info-box {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border-inline-start: 4px solid #C300B6;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.info-box h4 {
    font-size: 18px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 10px;
}

.deliverables-list {
    padding-inline-start: 20px;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

.contact-direct h4 {
    font-size: 18px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 15px;
}

.contact-direct p {
    font-size: 15px;
    color: #555;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-direct p i {
    color: #C300B6;
}

/* Form Side */
.consultation-form-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.form-header h3 {
    font-size: 26px;
    font-weight: 900;
    color: #1A002A;
    margin-bottom: 10px;
}

.privacy-note {
    font-size: 13px;
    color: #2ecc71;
    font-weight: 600;
    margin-bottom: 25px;
    background: rgba(46, 204, 113, 0.1);
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
}

/* تصميم النموذج (Form Styling) */
.df-contact-form .form-row {
    display: flex;
    gap: 20px;
}

.df-contact-form .form-group {
    flex: 1;
    margin-bottom: 20px;
}

.df-contact-form label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
}

.df-contact-form input,
.df-contact-form select,
.df-contact-form textarea {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    transition: 0.3s;
    background: #fdfdfd;
}

.df-contact-form input:focus,
.df-contact-form select:focus,
.df-contact-form textarea:focus {
    border-color: #C300B6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(195, 0, 182, 0.1);
    background: #fff;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, #FF6A3D 0%, #C300B6 100%);
    color: #fff;
    border: none;
    padding: 18px;
    font-size: 16px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(195, 0, 182, 0.3);
}

/* =======================================================
   قسم خطوات العمل (Process Steps)
   ======================================================= */
.process-section {
    padding: 80px 0;
    background: #fff;
}

.process-section .section-title {
    font-size: 32px;
    font-weight: 900;
    color: #1A002A;
    margin-bottom: 15px;
}

.process-section .section-desc {
    color: #666;
    font-size: 16px;
    margin-bottom: 50px;
}

.process-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* خط الربط بين الخطوات */
.process-steps::before {
    content: '';
    position: absolute;
    top: 35px;
    /* منتصف الدائرة */
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, #1A002A 0%, #C300B6 50%, #FF6A3D 100%);
    z-index: 0;
    opacity: 0.2;
}

.process-steps .step {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 0 15px;
    text-align: center;
}

/* تصميم الأيقونات/الأرقام */
.step-icon {
    width: 70px;
    height: 70px;
    background: #fff;
    color: #1A002A;
    font-size: 24px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 4px solid #f4f4f9;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.step:hover .step-icon {
    border-color: #C300B6;
    color: #C300B6;
    transform: translateY(-5px) scale(1.05);
}

.step:last-child .step-icon {
    background: linear-gradient(135deg, #FF6A3D 0%, #C300B6 100%);
    color: #fff;
    border: none;
}

.step h4 {
    font-size: 18px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 10px;
}

.step p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .process-steps {
        flex-direction: column;
        gap: 40px;
    }

    .process-steps::before {
        display: none;
        /* إخفاء الخط في الجوال */
    }

    .process-steps .step {
        padding: 0;
    }
}


/* التجاوب (Responsive) */
@media (max-width: 991px) {
    .split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .process-steps {
        flex-direction: column;
        gap: 30px;
    }

    .process-steps::before {
        display: none;
    }

    .step {
        display: flex;
        align-items: center;
        gap: 20px;
        text-align: start;
    }

    .step-icon {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .df-contact-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .contact-hero .hero-title {
        font-size: 32px;
    }

    .consultation-form-wrapper {
        padding: 30px 20px;
    }
}

/* تنسيقات النموذج الإضافية (Select & Messages) */
.df-contact-form select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23C300B6%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: left 15px top 50%;
    background-size: 12px auto;
}

html[dir="ltr"] .df-contact-form select {
    background-position: right 15px top 50%;
}

.form-message {
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.form-message.success {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.form-message.error {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


/* تصميم وحركة النجاح */
.success-overlay {
    text-align: center;
    padding: 40px 0;
    animation: fadeIn 0.5s ease-out;
}

.success-content h3 {
    color: #1A002A;
    font-size: 24px;
    margin: 20px 0 10px;
    font-weight: 800;
}

.success-content p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* أيقونة الصح المتحركة */
.checkmark-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #2ecc71;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #2ecc71;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 40px #2ecc71;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-outline-small {
    background: none;
    border: 1px solid #ddd;
    padding: 8px 20px;
    border-radius: 50px;
    color: #888;
    cursor: pointer;
    font-family: inherit;
    transition: 0.3s;
}

.btn-outline-small:hover {
    border-color: #C300B6;
    color: #C300B6;
}


/* =======================================================
   تصميم بطاقات التواصل المباشر (الآمنة والاحترافية)
   ======================================================= */
.direct-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    text-decoration: none !important;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

/* التأثير الحركي (طفو ناعم للأعلى) */
.contact-card:hover {
    transform: translateY(-4px);
    border-color: #C300B6;
    box-shadow: 0 8px 20px rgba(195, 0, 182, 0.08);
}

.contact-card.whatsapp:hover {
    border-color: #2ecc71;
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.15);
}

/* الأيقونات */
.card-icon {
    width: 45px;
    height: 45px;
    background: rgba(195, 0, 182, 0.08);
    color: #C300B6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: 0.3s;
    flex-shrink: 0;
}

.contact-card.whatsapp .card-icon {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}

/* تغيير لون الأيقونة عند تمرير الماوس */
.contact-card:hover .card-icon {
    background: #C300B6;
    color: #fff;
}

.contact-card.whatsapp:hover .card-icon {
    background: #2ecc71;
    color: #fff;
}

/* النصوص */
.card-text span {
    display: block;
    font-size: 13px;
    color: #888;
    font-weight: 600;
    margin-bottom: 3px;
}

.card-text strong {
    display: block;
    font-size: 15px;
    color: #1A002A;
    font-weight: 800;
}

.contact-card.location {
    cursor: default;
    /* المقر لا ينقر */
}

.contact-card.location:hover {
    transform: none;
    border-color: #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.contact-card.location:hover .card-icon {
    background: rgba(195, 0, 182, 0.08);
    color: #C300B6;
}

/* =======================================================
   مركز المعرفة (Blog & Knowledge Center)
   ======================================================= */

/* 1. Hero Section */
.blog-hero {
    background: #fdfdfd;
    padding: 100px 0 60px;
    border-bottom: 1px solid #eee;
}

.blog-hero .hero-badge {
    background: rgba(195, 0, 182, 0.1);
    color: #C300B6;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 20px;
}

.blog-hero .hero-title {
    font-size: 40px;
    font-weight: 900;
    color: #1A002A;
    margin-bottom: 20px;
}

.blog-hero .highlight {
    color: #FF6A3D;
}

.blog-hero .hero-desc {
    font-size: 18px;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 2. Framework 5 Pillars */
.framework-section {
    padding: 80px 0;
    background: #f9f9fc;
}

.framework-section .section-header {
    margin-bottom: 50px;
}

.framework-section .section-header h2 {
    font-size: 32px;
    font-weight: 900;
    color: #1A002A;
}

.framework-section .section-header p {
    color: #666;
    font-size: 16px;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.pillar-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    border-bottom: 3px solid transparent;
    transition: 0.3s;
}

.pillar-card:hover {
    transform: translateY(-5px);
    border-bottom-color: #FF6A3D;
    box-shadow: 0 10px 30px rgba(195, 0, 182, 0.08);
}

.pillar-icon {
    font-size: 30px;
    color: #C300B6;
    margin-bottom: 15px;
}

.pillar-card h4 {
    font-size: 16px;
    font-weight: 800;
    color: #1A002A;
    margin-bottom: 10px;
}

.pillar-card p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

/* 3. Categories Tags */
.blog-categories-section {
    padding: 40px 0;
    border-bottom: 1px solid #eee;
}

.categories-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.category-tag {
    background: #fff;
    border: 1px solid #ddd;
    color: #444;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.category-tag:hover {
    background: #C300B6;
    color: #fff;
    border-color: #C300B6;
}

/* 4. Featured Articles Grid */
.featured-articles {
    padding: 80px 0;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.post-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
    transition: 0.3s;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.post-thumb {
    height: 200px;
    background-color: #1A002A;
    /* Fallback */
    background-size: cover;
    background-position: center;
}

.post-content {
    padding: 25px;
}

.post-cat {
    font-size: 12px;
    color: #FF6A3D;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.post-title a {
    font-size: 18px;
    font-weight: 800;
    color: #1A002A;
    text-decoration: none;
    line-height: 1.4;
    transition: 0.3s;
}

.post-title a:hover {
    color: #C300B6;
}

.post-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 15px 0;
}

.read-more {
    font-size: 14px;
    font-weight: 800;
    color: #C300B6;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* 5. Lead Magnet CTA */
.lead-magnet-cta {
    background: linear-gradient(135deg, #1A002A 0%, #0B0014 100%);
    padding: 60px 0;
    color: #fff;
    margin-top: 40px;
}

.lm-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 50px;
    border-radius: 20px;
}

.lm-content {
    flex: 1;
    max-width: 600px;
}

.lm-content h2 {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 15px;
    color: #fff;
}

.lm-content p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
    line-height: 1.6;
}

.lm-actions {
    display: flex;
    gap: 15px;
}

.btn-primary-solid {
    background: #FF6A3D;
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s;
}

.btn-primary-solid:hover {
    background: #e65c35;
    transform: translateY(-2px);
    color: #fff;
}

.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s;
}

.btn-outline-light:hover {
    background: #fff;
    color: #1A002A;
}

/* Responsive */
@media (max-width: 991px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lm-grid {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 30px;
    }

    .lm-actions {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .articles-grid {
        grid-template-columns: 1fr;
    }

    .lm-actions {
        flex-direction: column;
    }
}