/*
Theme Name: DigiCode
Theme URI: https://digicode360.site/
Author: DigiCode Team
Description: Custom Theme for DigiCode Professional Services.
Version: 9.9.9
Text Domain: digicode
*/

/* --- 0. استيراد الخطوط (يجب أن يكون في أول سطر) --- */
/* @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap'); */

/* ==========================================================================
   1. تعريف الخطوط المحلية (Local Fonts Loader)
   ========================================================================== */

@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Questv1';
    src: url('fonts/Questv1 Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Sakkal Majalla';
    src: url('fonts/Sakkal Majalla Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

/* ==========================================================================
   2. متغيرات الهوية الرقمية (Global Variables)
   ========================================================================== */
:root {
    /* لوحة الألوان المعتمدة */
    --primary-blue: #3b71b9;
    --accent-green: #5bc4bf;
    --black-fakhim: #111827;
    --white: #ffffff;
    --bg-light: #f8fafc;
    --text-main: #2d3436;
    --text-dim: #636e72;
    
    /* نظام الخطوط الثلاثة الموحد */
    --font-main: 'Sakkal Majalla', 'Arial', sans-serif;
    --font-headers: 'Cairo', 'Helvetica', sans-serif;
    --font-accent: 'Questv1', sans-serif;
}

/* ==========================================================================
   3. الإعدادات والتهيئة الأساسية (Reset & Base Styles)
   ========================================================================== */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    direction: rtl;
    text-align: right;
    font-family: var(--font-main);
    line-height: 1.6;
    background-color: var(--white);
    color: var(--text-main);
    font-size: 1.5rem;
    overflow-x: hidden;
}

/* ==========================================================================
   4. التوزيع البرمجي الآمن للخطوط (Safe Typography Distribution)
   ========================================================================== */

/* 🅰️ الخط الأول: خط Cairo للعناوين، الأزرار، والروابط الرئيسية ليعطي مظهراً عصرياً وقوياً */
h1, h2, h3, h4, h5, h6, 
.btn-start, 
#site-navigation a,
.footer-title,
.premium-tagline {
    font-family: var(--font-headers) !important;
}

/* 🅱️ الخط الثاني: خط Sakkal Majalla للنصوص الطويلة، الأوصاف، الاقتباسات والقراءة السلسة */
p, li, 
.testimonial-text, 
.premium-lead-desc, 
.p-card-text p, 
.banner-content p {
    font-family: var(--font-main) !important;
}

/* 🎯 الخط الثالث: خط Questv1 التزييني للأرقام، العدادات، الإنجازات، واللمسات البصرية */
.accent-text, 
.counter-wrapper, 
.achieve-number, 
.counter-symbol,
.cta-trust-badge {
    font-family: var(--font-accent) !important;
}


.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}


/* ==========================================================================
   1. الهيدر والشريط العلوي وقائمة التنقل (Header & Navigation)
   ========================================================================== */

/* --- الإعدادات الأساسية --- */
* { box-sizing: border-box; }

.site-header { 
    width: 100%; 
    position: relative; 
    background: var(--white); 
    z-index: 999; 
}

/* --- جعل الهيدر ستيكي (Sticky) للشاشات الكبيرة --- */
@media (min-width: 993px) {
    .site-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
}

/* تنسيق حاوية الهيدر وتقليل الارتفاع */
.header-wrapper {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    padding: 10px 5%; 
    flex-wrap: wrap;
}

/* التحكم في حجم اللوغو لضمان نحافة الهيدر */
.site-branding img, 
.site-branding custom-logo {
    max-height: 80px; 
    width: auto;
    display: block;
}

/* --- القائمة الأساسية (الديسك توب) --- */
#site-navigation ul.menu { 
    display: flex; 
    list-style: none; 
    gap: 25px; 
    margin: 0; 
    padding: 0; 
    flex-wrap: wrap; 
    align-items: center; 
}

#site-navigation a { 
    text-decoration: none; 
    color: var(--primary-blue); 
    font-weight: bold; 
    font-family: var(--font-headers) !important;
}

#site-navigation ul li { position: relative; }

/* عنصر القائمة الذي يحتوي على أبناء */
.menu-item-has-children {
    display: flex !important;
    align-items: center !important;
    gap: 5px;
}

/* أيقونة الأكورديون (+ / -) */
.plus-icon {
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-blue);
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* --- القائمة المنسدلة (الديسك توب) --- */
@media (min-width: 993px) {
    #site-navigation ul li .sub-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        width: 220px !important;
        background: var(--white) !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        box-shadow: 0 8px 15px rgba(0,0,0,0.15) !important;
        z-index: 9999 !important;
        border-top: 3px solid var(--primary-blue) !important;
    }
    #site-navigation ul li:hover > .sub-menu { display: block !important; }
    #site-navigation ul .sub-menu li { display: block !important; width: 100% !important; }
    #site-navigation ul .sub-menu li a { display: block !important; padding: 10px 20px !important; color: var(--black-fakhim) !important; font-weight: 500 !important; text-align: right !important; }
    #site-navigation ul .sub-menu li a:hover { background: #f4f4f4 !important; color: var(--primary-blue) !important; }
    
    #site-navigation ul li:hover > .plus-icon {
        transform: rotate(90deg);
        color: var(--black-fakhim);
    }
}

/* --- زر الهامبرغر للموبايل --- */
.menu-toggle { 
    display: none; 
    background: var(--primary-blue); 
    border: none; 
    padding: 10px; 
    cursor: pointer; 
    border-radius: 5px; 
}
.menu-toggle .hamburger-bar { display: block; width: 25px; height: 3px; background: var(--white); margin: 5px 0; transition: 0.3s; }
.menu-toggle.active .hamburger-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-toggle.active .hamburger-bar:nth-child(2) { opacity: 0; }
.menu-toggle.active .hamburger-bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- زر الحجز والاتصال (CTA) في الهيدر --- */
.btn-start { 
    display: inline-block; 
    background: linear-gradient(to left, var(--black-fakhim), var(--primary-blue));
    color: var(--white) !important; 
    padding: 5px 25px; 
    border-radius: 50px; 
    text-decoration: none; 
    font-weight: bold; 
    font-family: var(--font-headers) !important;
    transition: all 0.3s ease; 
    border: 2px solid var(--primary-blue); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}
.btn-start:hover { 
    background: transparent !important; 
    color: var(--primary-blue) !important; 
    transform: translateY(-2px); 
}

/* --- الشريط العلوي (Top Bar) --- */
.top-bar { 
    width: 100% !important; 
    background: linear-gradient(to left, var(--black-fakhim), var(--primary-blue)) !important;
    margin: 0 !important; 
    padding: 0 !important; 
}
.top-bar-wrapper { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    margin: 0 auto; 
    padding: 3px 0; 
}
.top-phone-link {
    color: var(--white);
    text-decoration: none;
    font-family: Arial, sans-serif; /* يفضل استخدام خط سيستم للأرقام لضمان ثبات الأقواس */
    font-size: 14px;
    display: inline-block;
    direction: ltr; /* إجبار المتصفح على قراءة الرقم من اليسار لليمين لمنع تداخل الأقواس */
    unicode-bidi: embed; /* لضمان استقرار النص الرقمي داخل بيئة الـ RTL */
}

.top-phone-link:hover {
    color: var(--accent-green); /* تأثير اختياري عند تمرير الماوس */
}
.top-contact { 
    margin-right: 20px; 
    color: var(--white); 
    padding-left: 20px; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    font-family: var(--font-accent) !important; /* تحويل لخط الأرقام والاتصال لضمان ثبات التنسيق الرقمي */
}
.top-contact a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1; 
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-accent) !important;
}
/* ==========================================================================
   تنسيقات السوشيال ميديا والأشكال السداسية (Micro Social Hexagon)
   ========================================================================== */
.top-social { 
    margin-left: 20px; 
    padding-right: 20px; 
    display: flex; 
    align-items: center; 
    gap: 8px;
}

.mobile-only-social { 
    display: none; 
    gap: 8px; 
    align-items: center;
}

/* الشكل السداسي بأصغر حجم متناسق للموبايل والهيدر */
.social-hex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;  /* حجم ميكرو مصغر جداً */
    height: 34px; /* حجم ميكرو مصغر جداً */
    background: var(--white); /* خلفية بيضاء ثابتة للموبايل والكمبيوتر */
    color: var(--accent-green); /* أيقونة خضراء ثابتة للموبايل والكمبيوتر */
    position: relative;
    text-decoration: none;
    font-size: 0.9rem; /* تصغير الأيقونة لتناسب المساحة الجديدة */
    cursor: pointer;
    
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='20 0 92 116'><path fill='black' d='M110.78,74.78v-32.21c0-6.48-3.41-12.48-8.97-15.8l-26.04-15.56c-5.81-3.47-13.06-3.47-18.88,0l-26.04,15.56c-5.56,3.32-8.97,9.32-8.97,15.8v32.21c0,6.48,3.41,12.48,8.97,15.8l26.04,15.56c5.81,3.47,13.06,3.47,18.88,0l26.04-15.56c5.56-3.32,8.97-9.32,8.97-15.8Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='20 0 92 116'><path fill='black' d='M110.78,74.78v-32.21c0-6.48-3.41-12.48-8.97-15.8l-26.04-15.56c-5.81-3.47-13.06-3.47-18.88,0l-26.04,15.56c-5.56,3.32-8.97,9.32-8.97,15.8v32.21c0,6.48,3.41,12.48,8.97,15.8l26.04,15.56c5.81,3.47,13.06,3.47,18.88,0l26.04-15.56c5.56-3.32,8.97-9.32,8.97-15.8Z'/></svg>");
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.social-hex i,
.social-hex svg {
    transition: transform 0.25s ease;
    z-index: 2;
}

.social-hex::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* تأثير اللمس للموبايل والمرور للكمبيوتر موحد وبنفس الألوان المعتمدة */
.social-hex:hover,
.social-hex:active {
    background: var(--accent-green);
    color: var(--white) !important;
    transform: translateY(-2px);
    filter: drop-shadow(0 3px 6px rgba(91, 196, 191, 0.25)); 
}

.social-hex:hover i,
.social-hex:active i {
    transform: scale(1.05);
}

/* التحكم بالتجاوب والإظهار للموبايل بنفس الأسلوب */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    .mobile-only-social {
        display: flex !important;
        margin-top: 12px;
        justify-content: center;
    }

    /* تطبيق الخلفية البيضاء والأيقونة الخضراء للموبايل بشكل ثابت */
    .mobile-only-social .social-hex {
        background: var(--white) !important;
        color: var(--accent-green) !important;
    }

    /* تأثير عند لمس الزر على الموبايل (يتحول للأخضر والأيقونة بيضاء) */
    .mobile-only-social .social-hex:active,
    .mobile-only-social .social-hex:hover {
        background: var(--accent-green) !important;
        color: var(--white) !important;
    }
}
/* --- استعلامات شاشات الموبايل والتابلت للتنقل --- */
@media (max-width: 992px) {
    .menu-toggle { display: block !important; }

    #site-navigation {
        display: none; 
        width: 100%;
        order: 3; 
        margin-top: 15px;
    }
    
    #site-navigation ul.menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 0;
    }

    #site-navigation ul.menu > li {
        border-bottom: 1px solid #eee;
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap; 
    }

    #site-navigation a {
        display: block;
        padding: 12px 0;
        width: 80%; 
    }

    #site-navigation .sub-menu {
        display: none;
        width: 100% !important;
        overflow: hidden;
        background: #f9f9f9 !important;
        padding: 0 20px !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    #site-navigation .sub-menu li {
        list-style: none;
        border-bottom: 1px solid #f0f0f0;
    }
    #site-navigation .sub-menu li:last-child { border-bottom: none; }
    #site-navigation .sub-menu li a { padding: 10px 0; width: 100%; font-weight: normal; }
}

@media (max-width: 600px) {
    .top-bar-wrapper { flex-direction: column; gap: 8px; align-items: center; justify-content: center; padding: 5px 0; }
    .top-contact, .top-social { display: none; }
    .mobile-only-social { display: flex !important; justify-content: center; align-items: center; gap: 20px; width: 100%; padding: 5px 0; }
    .mobile-only-social a { color: var(--white); font-size: 18px; display: inline-flex; align-items: center; }
}

.top-social a, .mobile-only-social a { transition: all 0.3s ease; }
.top-social a:hover, .mobile-only-social a:hover { color: #e0e0e0 !important; transform: scale(1.1); }


/* ==========================================================================
   2. زر الرجوع إلى الأعلى (Back To Top Button)
   ========================================================================== */

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px; 
    background-color: var(--primary-blue);
    color: var(--white);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none; 
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.back-to-top:hover {
    background-color: var(--black-fakhim);
    transform: translateY(-3px);
}


/* --- 1. حاوية السلايدر (Hero Slider Container) --- */
.hero-slider {
    width: 100%;
    /* النسبة المئوية 50.2% تحافظ على تناسق أبعاد 1428x803 */
    height: 50.2vw; 
    max-height: 803px; 
    position: relative;
    overflow: hidden;
}

.hero-slide-item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex !important;
    align-items: center;
    height: 100%;
    width: 100%;
}

/* طبقة تغشية لضمان تباين النص فوق الصور */
.hero-slide-item::before {
    content: "";
    position: absolute;
    top: 0; 
    right: 0; 
    width: 100%; 
    height: 100%;
    /* تدرج من اللون الغامق الفخم للهوية إلى الشفاف */
    background: linear-gradient(to left, var(--black-fakhim), rgba(17, 24, 39, 0.2));
    opacity: 0.8;
    z-index: 1;
}

.slide-inner { 
    position: relative; 
    z-index: 2; 
    width: 100%; 
}

/* --- 2. محتوى النصوص --- */
.hero-content-box { 
    width: 50%; 
    text-align: right; 
}

.top-badge {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--accent-green);
    color: var(--white);
    font-family: var(--font-headers) !important;
    font-weight: 700;
    border-radius: 50px;
    margin-bottom: 20px;
    font-size: 1.1rem;
    text-rendering: optimizeLegibility;
}

.hero-title {
    font-family: var(--font-headers) !important;
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--white);
    margin-bottom: 20px;
    text-rendering: optimizeLegibility;
}

.hero-title .highlight { 
    color: var(--accent-green); 
}

.hero-subtitle {
    font-family: var(--font-main) !important;
    font-size: 1.6rem;
    color: #e2e8f0;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* --- 3. الأزرار التفاعلية (Buttons) --- */
.hero-btns { 
    display: flex; 
    gap: 15px; 
}

.btn {
    padding: 15px 35px;
    border-radius: 12px;
    font-family: var(--font-headers) !important;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.btn-main { 
    background-color: var(--accent-green); 
    color: var(--white); 
}

.btn-main:hover { 
    background-color: var(--white); 
    color: var(--black-fakhim) !important; /* إجبار تغير اللون للخط الفخم عند الحوم لمنع الاختفاء */
}

.btn-sec { 
    background-color: transparent; 
    border: 2px solid var(--white); 
    color: var(--white); 
}

.btn-sec:hover { 
    background-color: var(--white); 
    color: var(--primary-blue) !important; /* إجبار تغير اللون للأزرق الهوية عند الحوم */
}

/* --- 4. التجاوب مع الشاشات المتعددة (Mobile Responsive) --- */
@media (max-width: 1024px) {
    .hero-content-box { width: 70%; }
    .hero-title { font-size: 3rem; }
}

@media (max-width: 768px) {
    .hero-slider { 
        height: 60vh; 
        max-height: none; 
    }

    /* زيادة قوة التغشية على كامل السلايدر في الموبايل */
    .hero-slide-item::before {
        background: rgba(0, 0, 0, 0.6); 
        opacity: 1; 
    }

    /* تحرير صندوق النص من أي خلفية إضافية ليكون شفافاً وأنيقاً */
    .hero-content-box { 
        width: 90%; 
        margin: 0 auto; 
        text-align: center;
        background: transparent; 
        padding: 0;
    }
    
    .hero-btns { 
        justify-content: center; 
    }
    
    .hero-title { 
        font-size: 2.2rem; 
        color: var(--white);
        text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* إبراز النص فوق صور الخلفية المتغيرة */
    }
    
    .hero-subtitle { 
        font-size: 1.4rem; 
        color: #e2e8f0;
        margin-bottom: 25px;
    }
}

/* ==========================================================================
   5. تنسيق بطاقات الخدمات (Service Cards)
   ========================================================================== */

.services-wrapper {
    padding: 80px 0;
    /* إضافة صورة الخلفية */
    background-image: url('./images/bc-4.webp'); 
    background-size: cover;          /* تغطية كامل المساحة */
    background-position: center;     /* تمركز الصورة */
    background-repeat: no-repeat;    /* عدم تكرار الصورة */
    background-attachment: fixed;    /* تأثير البارالاكس الجميل عند التمرير */
    position: relative;
    background-color: var(--white);
}

/* طبقة تغشية (Overlay) لضمان وضوح البطاقات فوق الصورة */
.services-wrapper::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* لون أبيض شفاف لتفتيح الخلفية */
    z-index: 0;
}

/* التأكد من أن محتوى القسم يظهر فوق طبقة التغشية */
.services-wrapper .container {
    position: relative;
    z-index: 1;
}

/* تنسيق هيدر القسم المضاف للسيو والمظهر الجمالي */
.services-section-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 15px;
    position: relative;
    z-index: 3;
}

.services-section-header .sub-title {
    color: var(--accent-green);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
    letter-spacing: 1px;
    font-family: var(--font-headers) !important;
}

.services-section-header .main-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 15px;
    font-family: var(--font-headers) !important; /* تحويل لخط Cairo لتوحيد مظهر العناوين القوي */
}

.services-section-header .section-desc {
    font-size: 1.5rem;
    color: #5a6772;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-family: var(--font-main) !important;
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; 
    justify-content: center;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- تنسيق البطاقة النظيفة --- */
.service-clean-card {
    flex: 0 0 calc(33.333% - 20px); 
    position: relative;
    background-color: var(--white); 
    border-radius: 20px;
    padding: 35px 25px; 
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    border: 1px solid #e1e8ed;
    z-index: 1; 
    display: flex;
    flex-direction: column;
}

.card-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('./images/bc-2.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.18; 
    z-index: 2; 
    pointer-events: none; 
}

.card-body {
    position: relative;
    z-index: 3; 
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-icon img {
    width: 75px;
    height: auto;
    margin-bottom: 25px;
}

/* تنسيق عنوان الخدمة الداخلي */
.service-clean-card h3 {
    font-family: var(--font-headers) !important; /* تحويل لخط Cairo للحفاظ على تباين الهوية البصرية */
    color: var(--primary-blue) !important;
    font-size: 1.9rem;
    margin-bottom: 15px;
    font-weight: 700;
}

/* الخط الزخرفي أسفل العنوان */
.service-clean-card h3::after {
    content: "";
    display: block;
    width: 45px;
    height: 3px;
    background-color: var(--accent-green);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* تنسيق وصف الخدمة */
.service-clean-card p {
    font-family: var(--font-main) !important;
    color: #5a6772;
    font-size: 1.45rem;
    line-height: 1.6;
    margin-top: 15px;
}

/* تأثير التفاعل عند التحويم فوق البطاقة */
.service-clean-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(59, 113, 185, 0.15);
    border-color: var(--primary-blue);
}

/* --- شاشات التابلت والموبايل (Responsive Grid) --- */
@media (max-width: 992px) {
    .service-clean-card {
        flex: 0 0 calc(50% - 15px); /* بطاقتين في الصف على التابلت */
    }
    .services-section-header .main-title { font-size: 2.4rem; }
}

@media (max-width: 768px) {
    .services-wrapper { padding: 50px 0; background-attachment: scroll; } /* إيقاف البارالاكس على الموبايل لرفع الأداء */
    .service-clean-card {
        flex: 0 0 100%; /* بطاقة واحدة كاملة العرض على الموبايل */
        padding: 25px 20px;
    }
    .services-section-header .main-title { font-size: 2rem; }
    .services-section-header .section-desc { font-size: 1.3rem; }
}

/* ==========================================================================
   6. الخدمات الـ 7 التفاعلية (Interactive Services Grid)
   ========================================================================== */

/* الحاوية الرئيسية للشبكة التفاعلية */
section#services {
    background-color: var(--white);
}
.services-interactive-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* الكارت المربع التفاعلي المتحرك */
.digi-service-slide-card {
    flex: 0 0 calc(25% - 23px); /* توزيع متناسق رباعي على الشاشات الكبيرة */
    min-width: 280px;
    height: 340px;   /* الارتفاع المثالي لاستيعاب المحتوى المخفي وأبعاد الصورة */
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: var(--black-fakhim);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.digi-service-slide-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* صندوق الصورة داخل الكارت */
.service-graphic-box {
    width: 100%;
    height: 100%;
    position: relative;
}

.service-graphic-box img.service-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ملء المربع بالكامل دون تشويه أبعاد الصورة */
}

/* شعار الواترمارك التزييني فوق الصورة */
.card-watermark-logo {
    position: absolute;
    top: 15px;
    left: 15px;
    opacity: 0.6;
    z-index: 3;
}

/* صندوق المعلومات المنزلق من الأسفل */
.service-sliding-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* الارتفاع الافتراضي (يظهر العنوان فقط في البداية) */
    background: var(--white);
    padding: 20px 15px;
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    text-align: center;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* عند تمرير الماوس: يتمدد الصندوق للأعلى ليكشف باقي التفاصيل */
.digi-service-slide-card:hover .service-sliding-info { 
    height: 100%; /* تغطية كامل الكارت لتجربة بصرية فريدة وقراءة واضحة */
    justify-content: center;
}

.service-title {
    font-family: var(--font-headers) !important; /* إلزام الكلاس بخط Cairo */
    color: var(--primary-blue);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 15px;
}

/* العناصر الداخلية المخفية قبل التحويم */
.sliding-content-inner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.digi-service-slide-card:hover .sliding-content-inner { 
    opacity: 1; 
    visibility: visible;
}

.service-excerpt-text {
    font-family: var(--font-main) !important; /* إلزام الكلاس بخط Sakkal Majalla للفقرات */
    font-size: 1.3rem;
    color: #5a6772;
    margin-bottom: 20px;
    line-height: 1.5;
    text-align: center;
}

/* تنسيق زر المزيد والمتابعة */
.digi-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--accent-green);
    color: var(--white) !important;
    border-radius: 30px;
    text-decoration: none;
    font-family: var(--font-headers) !important; /* ربط الأزرار بخط Cairo */
    font-weight: 700;
    font-size: 1.25rem;
    border: 2px solid var(--accent-green);
    transition: all 0.3s ease;
    margin: 0 auto;
    width: fit-content;
}

.digi-more-btn:hover {
    background: transparent;
    color: var(--accent-green) !important;
}

/* ==========================================================================
   7. التجاوب الخاص بالخدمات التفاعلية (Responsive Design)
   ========================================================================== */

/* شاشات التابلت والأجهزة المتوسطة */
@media (max-width: 992px) {
    .digi-service-slide-card { 
        flex: 0 0 calc(50% - 15px); /* كرتين في السطر */
    }
}

/* شاشات الموبايل والجوال المتقدم */
@media (max-width: 768px) {
    /* إخفاء شعارات العلامات المائية لتجنب الازدحام */
    .hide-on-mobile {
        display: none !important;
    }

    /* تحويل الحاوية التفاعلية إلى شريط تمرير أفقي ناعم */
    .services-interactive-grid.mobile-scroll-smooth {
        display: flex;
        flex-wrap: nowrap; /* منع انكسار العناصر لأسفل */
        justify-content: flex-start;
        overflow-x: auto; /* تفعيل التمرير الأفقي بسحب اليد */
        padding: 15px 20px 25px 20px;
        gap: 20px;
        scroll-snap-type: x mandatory; /* توجيه الكارت ليقف في المنتصف تلقائياً */
        -webkit-overflow-scrolling: touch; /* تمرير مرن وسلس لشاشات آيفون */
        scrollbar-width: none; /* إخفاء شريط التمرير الافتراضي لفيرفوكس */
    }

    .services-interactive-grid.mobile-scroll-smooth::-webkit-scrollbar {
        display: none; /* إخفاء شريط التمرير الافتراضي لكروم وسفاري */
    }

    .digi-service-slide-card { 
        flex: 0 0 82%; /* إظهار كرت واحد بشكل رئيسي مع طرف الكرت التالي للتشجيع على السحب */
        height: 320px;
        scroll-snap-align: center;
    }

    /* إلغاء تأثير الـ Hover وتثبيت المحتوى النصي بشكل دائم على الموبايل لسهولة النقر */
    .service-sliding-info {
        height: 135px; /* مساحة مناسبة وثابتة لإظهار المكونات بدون تداخل */
        padding: 12px;
    }
    
    .digi-service-slide-card:hover .service-sliding-info {
        height: 135px; 
    }

    .service-title {
        font-size: 1.4rem;
        margin-bottom: 5px;
    }

    .sliding-content-inner {
        opacity: 1;
        visibility: visible;
    }

    .service-excerpt-text {
        font-size: 1.15rem;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* اقتصاص النص الطويل ووضع (...) لجمالية التصميم */
    }

    .digi-more-btn {
        padding: 6px 18px;
        font-size: 1.1rem;
    }
}


/* ==========================================================================
   8. قسم مميزات الهوية - لماذا نحن (Premium Why Us Section)
   ========================================================================== */

.digi-premium-why-us {
    padding: 120px 0;
    
    color: var(--primary-blue);
    overflow: hidden;
    background-color: var(--white);
}

.premium-why-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- النصوص والعناوين --- */
.premium-tagline {
    color: var(--accent-green);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-size: 1.3rem;
    font-family: var(--font-headers) !important; /* ربط الخط بـ Cairo */
}

.premium-main-title {
    font-size: 3rem;
    line-height: 1.3;
    margin-bottom: 30px;
    font-weight: 900;
    font-family: var(--font-headers) !important; /* ربط الخط بـ Cairo */
}

.premium-main-title span { 
    color: var(--black-fakhim); 
}

.premium-lead-desc {
    font-size: 1.45rem; /* تحسين الحجم ليتناسب مع Sakkal Majalla */
    color: #5a6772;    /* درجة مقروءة وواضحة فوق الخلفية الداكنة */
    line-height: 1.8;
    margin-bottom: 50px;
    font-family: var(--font-main) !important; /* ربط الخط بـ Sakkal */
}

/* --- بطاقات الميزات (Features) --- */
.premium-features-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 35px; 
}

.premium-feature-card {
    display: flex;
    gap: 25px;
    padding: 20px;
    border-radius: 20px;
    transition: all 0.4s ease-in-out;
    border: 1px solid transparent;
}

.premium-feature-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateX(-10px); /* التحرك لليمين تماشياً مع اتجاه الخط العربي RTL */
}

.p-card-icon {
    width: 60px;
    height: 60px;
    background: rgba(91, 196, 191, 0.1);
    color: var(--accent-green);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: 0.3s ease;
}

.premium-feature-card:hover .p-card-icon {
    background: var(--accent-green);
    color: var(--white);
}

.p-card-text h3 { 
    margin: 0 0 10px 0; 
    font-size: 1.5rem; 
    font-weight: 700;
    color: var(--primary-blue);
    font-family: var(--font-headers) !important; /* ربط الخط بـ Cairo */
}

.p-card-text p { 
    color: #5a6772; 
    font-size: 1.35rem; 
    line-height: 1.7; 
    font-family: var(--font-main) !important; /* ربط الخط بـ Sakkal */
}

/* --- الجانب البصري (Visual Layout) --- */
.premium-why-visual { 
    position: relative; 
    perspective: 1000px; 
}

.visual-container {
    position: relative;
    width: 100%;
    height: 550px;
    border-radius: 30px;
}

.premium-image-frame {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    transition: transform 0.6s ease;
}

/* تأثير التدوير ثلاثي الأبعاد الطفيف عند الهوفر */
.premium-why-visual:hover .premium-image-frame {
    transform: rotateY(5deg) scale(1.02); /* تعديل الدرجة لتتناسب مع التمرير العربي */
}

/* الشعار العائم بتأثير الزجاج الاحترافي */
.floating-glass-logo {
    position: absolute;
    bottom: -40px;
    right: -40px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); /* دعم متصفحات سفاري وآبل */
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.logo-inner-circle {
    width: 90px;
    height: 90px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.logo-inner-circle img { 
    width: 55px; 
    height: auto;
}

/* الإضاءة المحيطة الخلفية المتوهجة */
.ambient-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    background: var(--primary-blue);
    filter: blur(120px);
    opacity: 0.3;
    top: 50px;
    left: 50px;
    z-index: -1;
    animation: glow-pulse 6s infinite alternate ease-in-out;
}

@keyframes glow-pulse {
    from { opacity: 0.2; transform: scale(1); }
    to { opacity: 0.4; transform: scale(1.15); }
}

/* ==========================================================================
   9. شاشات التجاوب لقسم لماذا نحن (Responsive Design)
   ========================================================================== */

@media (max-width: 1024px) {
    .premium-why-wrapper { gap: 40px; }
    .premium-main-title { font-size: 2.5rem; }
    .visual-container { height: 450px; }
}

@media (max-width: 768px) {
    .digi-premium-why-us { padding: 65px 0; }
    .premium-why-wrapper { grid-template-columns: 1fr; gap: 50px; }
    .premium-main-title { font-size: 2rem; }
    .premium-lead-desc { font-size: 1.3rem; margin-bottom: 35px; }
    
    /* ضبط الحاوية البصرية والموقع العائم للشعار في الجوال */
    .visual-container { height: 380px; }
    .floating-glass-logo { 
        bottom: 15px; 
        right: 15px; 
        padding: 15px;
    }
    .logo-inner-circle { width: 70px; height: 70px; }
    .logo-inner-circle img { width: 40px; }
    
    .premium-feature-card:hover { transform: translateY(-5px); } /* تفضيل الصعود لأعلى بدلاً من الإزاحة الجانبية في الجوال */
}


/* --- قسم الإنجازات (Achievements Section) --- */
/* --- قسم الإنجازات: تصميم سداسي بزوايا منحنية (Rounded) --- */
/* =========================
   قسم الإنجازات
========================= */
/* ==========================================================================
   10. قسم العدادات والإنجازات الهندسي (Achievements Section)
   ========================================================================== */

.digi-achievements-section {
    padding: 80px 0;
    /* توحيد التدرج البصري مع الهوية الرقمية للموقع */
    background: linear-gradient(to left, var(--black-fakhim), var(--primary-blue));
}

/* --- تنسيق منفصل ومطور لهيدر القسم (Header Typography) --- */
.achievements-header {
    text-align: center !important;
    direction: rtl !important;
    max-width: 800px;
    margin: 0 auto 55px auto !important;
    padding: 0 20px;
}

.achievements-header h2 {
    color: var(--white) !important;
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    margin: 0 0 16px 0 !important;
    font-family: var(--font-headers) !important; /* ربط ميكانيكي بخط Cairo */
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
}

.achievements-header p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.2rem !important;
    line-height: 1.85 !important;
    font-weight: 500 !important;
    font-family: var(--font-main) !important;
    margin: 0 !important;
}

/* تمييز كلمة DigiCode باللون الأخضر والسمك المرتفع */
.achievements-header .brand-highlight {
    color: var(--accent-green) !important;
    font-weight: 800 !important;
}

/* --- شبكة التوزيع (Grid Structure) --- */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px;
    justify-items: center;
}

/* --- الهيكل الهندسي السداسي (Hexagon Item) --- */
.achievement-item {
    position: relative;
    width: 100%;
    max-width: 210px;
    aspect-ratio: 95 / 88;
    background-color: var(--white);

    /* تطبيق القناع السداسي لزوايا دائرية منتظمة */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='20 0 92 116'><path fill='black' d='M110.78,74.78v-32.21c0-6.48-3.41-12.48-8.97-15.8l-26.04-15.56c-5.81-3.47-13.06-3.47-18.88,0l-26.04,15.56c-5.56,3.32-8.97,9.32-8.97,15.8v32.21c0,6.48,3.41,12.48,8.97,15.8l26.04,15.56c5.81,3.47,13.06,3.47,18.88,0l26.04-15.56c5.56-3.32,8.97-9.32,8.97-15.8Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='20 0 92 116'><path fill='black' d='M110.78,74.78v-32.21c0-6.48-3.41-12.48-8.97-15.8l-26.04-15.56c-5.81-3.47-13.06-3.47-18.88,0l-26.04,15.56c-5.56,3.32-8.97,9.32-8.97,15.8v32.21c0,6.48,3.41,12.48,8.97,15.8l26.04,15.56c5.81,3.47,13.06,3.47,18.88,0l26.04-15.56c5.56-3.32,8.97-9.32,8.97-15.8Z'/></svg>");
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

/* --- تأثيرات التحويم والتفاعل (Hover Effects) --- */
.achievement-item:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.3);
}

/* --- الأيقونة المعروضة داخل السداسي --- */
.achieve-icon-img {
    margin: 0;
    line-height: 0;
}

.achieve-icon-img img {
    width: 44px;
    height: auto;
    display: block;
}

/* --- محاذاة وتنسيق الأرقام والرموز --- */
.counter-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--primary-blue);
    font-family: var(--font-accent) !important; /* ربط الأرقام بخط الأرقام الثابت منعا للالتواء */
}

/* تحسين موضع ومسافة الرموز (+ أو %) بجانب الأعداد */
.counter-symbol {
    font-size: 1.8rem;
    color: var(--accent-green); /* توحيد لون الرموز الرياضية بالأخضر البريميوم الجذاب */
    margin-inline-start: 3px;
    font-family: var(--font-accent) !important;
}

.achieve-number {
    line-height: 1;
    font-family: var(--font-accent) !important;
}

/* --- النص التعريفي للعداد --- */
.achieve-label {
    font-family: var(--font-headers) !important; /* ربط التسمية بخط Cairo العريض */
    font-size: 1rem;
    font-weight: 700;
    color: var(--black-fakhim);
    line-height: 1.4;
    margin: 0;
    max-width: 145px;
    padding: 0 10px;
}

/* ==========================================================================
   11. شاشات التجاوب لقسم العدادات (Responsive Media Queries)
   ========================================================================== */

/* شاشات التابلت والأجهزة المتوسطة */
@media (max-width: 1024px) {
    .achievements-header h2 { font-size: 2rem !important; }
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr); /* تحويل لعمودين متناسقين هندسياً */
        gap: 20px;
    }
    .achievement-item {
        max-width: 210px;
    }
}

/* شاشات الموبايل والأجهزة الصغيرة */
@media (max-width: 600px) {
    .digi-achievements-section { padding: 50px 0; }
    .achievements-header { margin-bottom: 35px !important; }
    .achievements-header h2 { font-size: 1.75rem !important; padding-bottom: 10px; }
    .achievements-header p { font-size: 1.05rem !important; line-height: 1.7; }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 5px;
    }

    .achievement-item {
        max-width: 165px; /* تكييف هندسي ممتاز يمنع الخروج عن الشاشة */
    }

    .achieve-icon-img img {
        width: 36px; /* منع تصادم الأيقونة مع حدود القناع السداسي */
    }

    .counter-wrapper {
        font-size: 1.7rem;
    }
    .counter-symbol {
        font-size: 1.4rem;
    }

    .achieve-label {
        font-size: 0.88rem;
        line-height: 1.3;
    }
}
/* ==========================================================================
   12. قسم آراء وشهادات العملاء (Testimonials Section)
   ========================================================================== */

/* ==========================================================================
   11. تنسيق قسم آراء العملاء بنظام البوكس المحصور (Boxed Testimonials)
   ========================================================================== */
.digi-testimonials-section {
    padding: 60px 0;
    width: 100%;
    display: block;
    clear: both;
    background-color: var(--white);
}

/* البوكس الداخلي الحاضن للخلفية والتأثيرات والمقيد بحدود الـ container */
.testimonial-box-inside {
    position: relative;
    width: 100%;
    padding: 60px 40px;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    z-index: 1;
}

/* طبقة تظليل بيضاء شبه شفافة محصورة بدقة وفخامة داخل حدود البوكس فقط */
.testimonial-box-inside::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(255, 255, 255, 0.96); /* خلفية بيضاء لتفتيح التصميم وضمان المقروئية */
    z-index: -1;
}

/* --- تنسيق هيدر القسم (العنوان والشرح) --- */
.testimonials-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.testimonials-header h2 {
    font-family: var(--font-headers) !important;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary-blue, #3b71b9);
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 12px;
    display: inline-block;
}

/* خط الهوية الأخضر الفاخر أسفل العنوان */
.testimonials-header h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%; /* تحريك البداية لمنتصف الكلمة */
    transform: translateX(-50%); /* إزاحة عكسية لضبط السنتر بدقة */
    width: 50px;
    height: 4px;
    background-color: var(--accent-green, #5bc4bf);
    border-radius: 2px;
}

.testimonials-header p {
    font-family: var(--font-main) !important;
    font-size: 1.4rem;
    color: #5a6772;
    margin: 0;
}

/* --- شبكة التوزيع الرباعية للبطاقات --- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    position: relative;
    z-index: 2;
}

/* --- بطاقة الرأي (Testimonial Card) --- */
.testimonial-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(59, 113, 185, 0.12);
    border-color: rgba(59, 113, 185, 0.2);
}

/* علامة الاقتباس التزيينية */
.quote-icon {
    font-size: 3rem;
    color: var(--accent-green, #5bc4bf);
    line-height: 1;
    margin-bottom: 10px;
    font-family: serif;
    text-align: right;
}

/* نص رأي العميل */
.testimonial-text {
    font-size: 1.35rem; 
    line-height: 1.6;
    color: #5a6772;    
    margin-bottom: 25px;
    flex-grow: 1;
    font-family: var(--font-main) !important;
    text-align: justify;
}

/* بيانات العميل */
.client-info {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #edf2f7;
    padding-top: 15px;
}

.client-img img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.client-details h4 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-blue, #3b71b9);
    font-family: var(--font-headers) !important;
}

.client-details span {
    display: block;
    font-size: 1rem; 
    color: #718096;
    font-family: var(--font-main) !important;
}

/* ==========================================================================
   13. شاشات التجاوب لقسم الشهادات البوكسد (Responsive Design)
   ========================================================================== */

/* شاشات التابلت والأجهزة المتوسطة */
@media (max-width: 1100px) {
    .testimonials-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px;
    }
}

/* شاشات الموبايل والجوال الذكي المفلترة للتمرير المرن وبأبعاد آمنة */
@media (max-width: 680px) {
    .testimonial-box-inside {
        padding: 35px 20px;
        border-radius: 20px;
    }

    .testimonials-header h2 {
        font-size: 1.8rem;
    }
    
    .testimonials-header p {
        font-size: 1.3rem;
    }

    .testimonials-grid { 
        display: flex;
        flex-wrap: nowrap; 
        justify-content: flex-start;
        overflow-x: auto; 
        padding: 10px 5px 20px 5px;
        gap: 15px;
        margin-right: 0;
        margin-left: 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
    }

    .testimonials-grid::-webkit-scrollbar {
        display: none; 
    }

    .testimonial-card { 
        flex: 0 0 88%; 
        padding: 20px; 
        scroll-snap-align: center;
    }
    
    .testimonial-text { 
        font-size: 1.3rem; 
        margin-bottom: 15px;
    }
}
/*لوغو سلايدر */

/* ==========================================================================
   14. قسم شريط شركاء النجاح المتحرك (Logos Slider Section)
   ========================================================================== */

.digi-logos-slider-section {
    padding: 60px 0;
    /* توحيد التدرج البصري المعتمد للهوية الرقمية */
    background: linear-gradient(to left, var(--black-fakhim), var(--primary-blue));
    overflow: hidden;
}

/* تنسيق وتوسيط النصوص والوصف */
.banner-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto; 
    padding: 0 20px;
    color: var(--bg-light);
}

.banner-content h1 {
    color: var(--white) !important;
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 15px;
    font-family: var(--font-headers) !important; /* ربط العنوان بخط Cairo */
}

.banner-content p {
    color: rgba(255, 255, 255, 0.9) !important; 
    font-size: 1.45rem; /* حجم خط مثالي ومقروء */
    line-height: 1.8;
    font-family: var(--font-main) !important; /* ربط الوصف بخط Sakkal Majalla */
}

/* حاوية السلايدر الرئيسية */
.logos-slider-wrapper {
    width: 100%;
    margin: auto;
    overflow: hidden;
    position: relative;
    direction: ltr !important; /* إجبار الاتجاه اليساري لضمان انسيابية حركة الدوران */
    padding: 25px 0; /* مساحة علوية وسفلية مريحة لمنع قص أطراف الظلال */
}

/* مسار السلايدر السريع */
.logos-slide-track {
    display: flex;
    width: max-content; 
    animation: infiniteScrollRTL 25s linear infinite; 
}

/* --- تنسيق المسدس الهندسي المعتمد لشعارات الشركاء --- */
.logo-item {
    width: 150px;           /* حجم متناسق ومربع تماماً ليتناسب مع قناع الـ SVG */
    height: 150px;         
    padding: 15px;          /* مساحة حماية داخلية تمنع تلامس الشعارات مع الحواف المقطوعة */
    margin: 0 20px;         /* مسافة تباعد جانبية ثابتة */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    
    /* تطبيق قناع الـ SVG المخصص لقص الزوايا بشكل سداسي دائري ناعم */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='20 0 92 116'><path fill='black' d='M110.78,74.78v-32.21c0-6.48-3.41-12.48-8.97-15.8l-26.04-15.56c-5.81-3.47-13.06-3.47-18.88,0l-26.04,15.56c-5.56,3.32-8.97,9.32-8.97,15.8v32.21c0,6.48,3.41,12.48,8.97,15.8l26.04,15.56c5.81,3.47,13.06,3.47,18.88,0l26.04-15.56c5.56-3.32,8.97-9.32,8.97-15.8Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='20 0 92 116'><path fill='black' d='M110.78,74.78v-32.21c0-6.48-3.41-12.48-8.97-15.8l-26.04-15.56c-5.81-3.47-13.06-3.47-18.88,0l-26.04,15.56c-5.56,3.32-8.97,9.32-8.97,15.8v32.21c0,6.48,3.41,12.48,8.97,15.8l26.04,15.56c5.81,3.47,13.06,3.47,18.88,0l26.04-15.56c5.56-3.32,8.97-9.32,8.97-15.8Z'/></svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* إضافة تأثير الظل الساقط المحيط بالقناع الهندسي */
    filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.22));
    
    opacity: 1 !important; 
    flex-shrink: 0; 
    transition: all 0.3s ease-in-out;
}

/* التأثير التفاعلي الانسيابي عند تمرير الماوس */
.logo-item:hover {
    transform: translateY(-6px) scale(1.05); /* إزاحة خفيفة للأعلى مع تكبير ناعم */
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.35)); /* تعميق كثافة الظل لبيان البعد الثالث */
}

/* إعدادات الصور الداخلية للشعارات */
.logo-item img {
    max-width: 88%; 
    max-height: 88%;
    height: auto;
    object-fit: contain; /* حماية أبعاد اللوغو الأصلي من التموج أو التشويه */
}

/* --- حركة التمرير المستمر للشاشات الكبيرة --- */
@keyframes infiniteScrollRTL {
    0% { 
        transform: translateX(0); 
    }
    100% { 
        /* الحسابات الرياضية الدقيقة للمسار: 150px عرض + 40px هوامش = 190px للعنصر الواحد */
        /* 190px * 6 شعارات أصلية في الدورة = -1140px */
        transform: translateX(-1140px); 
    }
}

/* ==========================================================================
   15. شاشات التجاوب والأنميشن الخاص بالموبايل (Responsive Design)
   ========================================================================== */

@media (max-width: 768px) {
    .banner-content h1 { font-size: 1.8rem; }
    .banner-content p { font-size: 1.3rem; }
    
    .logo-item { 
        width: 110px;       /* حجم متجاوب ومتناسق جداً للموبايل */
        height: 110px;
        padding: 10px;      
        margin: 0 15px;
    }
    
    /* استدعاء أنميشن منفصل تماماً للموبايل لمنع حدوث قفزات أو انكسار في الحركة الدائرية */
    .logos-slide-track {
        animation: infiniteScrollMobile 20s linear infinite;
    }
}

/* أنميشن الموبايل بحسابات أبعاد الجوال التجاوبية (110px عرض + 30px هوامش = 140px) */
/* 140px * 6 شعارات = -840px */
@keyframes infiniteScrollMobile {
    0% { 
        transform: translateX(0); 
    }
    100% { 
        transform: translateX(-840px); 
    }
}
/* ==========================================================================
   16. قسم الاتصال السريع والدعوة للإجراء (CTA Contact Section)
   ========================================================================== */

.digi-cta-contact-section {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* تأثير البارالاكس الثابت عند التمرير */
    text-align: center;
    color: var(--white);
    overflow: hidden;
}

/* طبقة التدرج اللوني الذكي فوق الخلفية لضمان وضوح نصوص الأزرار والدعوة */
.cta-overlay-gradient {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* دمج متغير اللون الفخم مع الأزرق الرئيسي بنسب شفافة احترافية */
    background: linear-gradient(135deg, rgba(59, 113, 185, 0.9), rgba(18, 26, 37, 0.95));
}

.cta-contact-wrapper {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
}

.cta-contact-text h2 {
    font-size: 2.6rem;
    margin-bottom: 20px;
    line-height: 1.3;
    font-weight: 800;
    font-family: var(--font-headers) !important; /* ربط العنوان بخط Cairo */
}

.brand-highlight { 
    color: var(--accent-green); 
}

.cta-contact-text p {
    font-size: 1.45rem; /* ضبط مثالي لخط Sakkal Majalla */
    margin-bottom: 40px;
    opacity: 0.95;
    line-height: 1.6;
    font-family: var(--font-main) !important; /* ربط الوصف بخط Sakkal */
}

/* --- أزرار الاتصال السريع (Action Controls) --- */
.cta-action-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.cta-action-controls a {
    display: flex;
    align-items: center;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    gap: 8px;
    font-family: var(--font-headers) !important; /* ربط نصوص الأزرار بخط Cairo */
}

.start-project-btn { 
    background: var(--accent-green); 
    color: var(--white) !important; /* رفع التباين اللوني لراحة العين والـ Accessibility */
}

.whatsapp-call-btn { 
    background: #25d366; 
    color: var(--white) !important; 
}

.direct-call-btn { 
    background: var(--white); 
    color: var(--primary-blue) !important; 
}

/* تأثير التفاعل والتحويم للأزرار */
.cta-action-controls a:hover {
    transform: translateY(-5px);
    filter: brightness(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* --- شارة الثقة السفلية --- */
.cta-trust-badge {
    background: rgba(0, 0, 0, 0.25);
    display: inline-block;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-headers) !important; /* ربط الشارة بخط Cairo */
}

/* ==========================================================================
   17. شاشات التجاوب لقسم CTA (Responsive Design)
   ========================================================================== */

@media (max-width: 768px) {
    .digi-cta-contact-section { 
        padding: 70px 0; 
        background-attachment: scroll; /* إلغاء التثبيت على الجوال لرفع أداء المتصفح */
    }
    
    .cta-contact-text h2 { 
        font-size: 1.9rem; 
    }
    
    .cta-contact-text p { 
        font-size: 1.3rem; 
        margin-bottom: 30px;
    }
    
    /* تحويل الأزرار لتكون تحت بعضها بكامل العرض المتناسق في الموبايل */
    .cta-action-controls { 
        flex-direction: column; 
        align-items: center; 
        gap: 12px;
    }
    
    .cta-action-controls a { 
        width: 100%; 
        max-width: 290px; 
        justify-content: center; 
        padding: 10px 20px;
        font-size: 1.15rem;
    }
    
    .cta-trust-badge {
        font-size: 0.95rem;
        padding: 8px 18px;
    }
}
/* استدعاء خط Cairo العالمي والفاخر الحامي للتصميم */
/* ==========================================================================
   18. التنسيق الطباعي واللوني المتناسق لذيل الصفحة (Footer Match with Header)
   ========================================================================== */

/* ==========================================================================
   تنسيقات الفوتر المتقدمة والمتجاوبة (Advanced Site Footer - Ultra Pixel Perfect)
   ========================================================================== */

.site-footer { 
    background: var(--white) !important; 
    padding: 70px 0 0 0 !important;
    direction: rtl !important; 
    text-align: right !important; 
    color: var(--black-fakhim) !important; 
    border-top: 1px solid #e2e8f0 !important; 
    position: relative;
    font-family: var(--font-headers) !important;
    box-sizing: border-box;
}

.footer-container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    max-width: 1300px; 
    margin: 0 auto; 
    padding: 0 5%; 
    gap: 40px;
    box-sizing: border-box;
}

.footer-col { 
    flex: 1; 
    min-width: 220px; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    text-align: right;
    box-sizing: border-box;
}

/* عمود الهوية والشعار */
.footer-col.brand-info {
    flex: 1.4;
}

.footer-logo-box {
    margin-bottom: 15px;
}

.footer-logo {
    max-height: 80px; 
    width: auto;
    display: block;
    object-fit: contain;
}

.footer-brand-name {
    display: block; 
    font-size: 1.6rem !important; 
    font-weight: bold !important;
    color: var(--primary-blue) !important; 
    margin-bottom: 14px;
    font-family: var(--font-headers) !important;
}

.footer-desc {
    font-family: var(--font-headers) !important; 
    font-size: 1.1rem !important; 
    line-height: 1.8 !important; 
    color: #555555 !important; 
    max-width: 360px;
    margin: 0;
    font-weight: 500;
}

/* --- العناوين الرئيسية للأعمدة الجانبية --- */
.footer-title { 
    display: block;
    color: var(--primary-blue) !important; 
    font-size: 1.35rem !important; 
    font-weight: bold !important;
    margin-bottom: 25px; 
    position: relative;
    padding-bottom: 12px;
    font-family: var(--font-headers) !important;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35px;
    height: 3px;
    background: var(--accent-green);
    border-radius: 2px;
}

/* --- تنسيق الروابط والقوائم --- */
.footer-list, .footer-services-grid { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important;
    width: 100%;
}

.footer-list li { 
    margin-bottom: 14px; 
}

.footer-list li a {
    color: var(--black-fakhim) !important; 
    text-decoration: none !important;
    font-size: 0.98rem !important; 
    font-weight: bold !important; 
    font-family: var(--font-accent) !important;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-list li a:hover {
    color: var(--accent-green) !important; 
    transform: translateX(5px); 
}

/* عمود الخدمات لشاشات الـ Desktop */
.footer-col.services-column {
    flex: 1.6;
}

.footer-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 14px 24px; 
}

.footer-services-grid li a {
    color: var(--black-fakhim) !important;
    text-decoration: none !important;
    font-size: 0.98rem !important;
    font-weight: bold !important;
    font-family: var(--font-accent) !important;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-services-grid li a:hover {
    color: var(--accent-green) !important;
    transform: translateX(5px);
}

/* --- صندوق تواصل معنا --- */
.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 18px; 
    width: 100%;
}

.contact-item {
    font-family: var(--font-accent) !important; 
    font-size: 0.98rem !important;
    color: var(--black-fakhim) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: bold;
}

.contact-item a {
    color: var(--black-fakhim) !important;
    text-decoration: none !important;
    font-family: var(--font-accent) !important;
    font-size: 0.98rem;
    transition: color 0.3s ease;
}

.contact-item .phone-link,
.footer-contact-info a[href^="mailto:"] {
    direction: ltr !important;
    unicode-bidi: embed;
    display: inline-block;
}

.contact-item:hover a {
    color: var(--accent-green) !important;
}

.contact-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f1f5f9; 
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-item:hover .contact-icon-wrapper {
    background: var(--primary-blue);
    color: var(--white);
    transform: scale(1.05);
}

/* --- شريط الحقوق السفلي --- */
.footer-copyright { 
    background: linear-gradient(to left, var(--black-fakhim), var(--primary-blue)) !important; 
    color: var(--white) !important; 
    text-align: center !important; 
    padding: 22px 15px !important; 
    margin-top: 60px; 
    font-size: 1.1rem !important; 
    font-weight: bold !important;
    font-family: var(--font-headers) !important;
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
}

.brand-copyright.green-text {
    color: var(--accent-green) !important; 
    text-decoration: none !important; 
    display: inline-block;
    padding: 0 4px;
    font-weight: 800 !important; 
}

/* ==========================================================================
   إصلاح شاشات التجاوب التام لتدعم المقاس المطلوب (912 بكسل وما حولها)
   ========================================================================== */

/* ميديا كويري احترافية ومحكمة لمقاس تابلت Surface والـ iPad عريض الشاشة */
@media (max-width: 1025px) {
    .footer-container { 
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* تقسيم السطر السفلي لـ 3 أعمدة متساوية المساحة تماماً */
        gap: 30px 40px !important;
    }
    
    .footer-col { 
        width: 100% !important;
        min-width: 0 !important; /* إلغاء الـ min-width القديم المسبب للمشكلة */
    }
    
    /* جعل قسم الهوية والشعار يمتد على السطر الأول كاملاً لإعطائه فخامة ومساحة مريحة للعين */
    .footer-col.brand-info {
        grid-column: span 3 !important; 
        max-width: 100% !important;
        border-bottom: 1px dashed #e2e8f0; /* فاصل ناعم جداً تحت الهوية لشكل جمالي متناسق */
        padding-bottom: 20px;
    }
    
    .footer-desc {
        max-width: 100% !important; /* جعل الوصف يأخذ راحته في العرض لمنع هبوط الكلام الكثيف */
    }

    /* جعل الخدمات تظهر كعمود قائمة رأسي واحد منتظم بدلاً من شبكة عمودين مزدحمة لمنع التداخل */
    .footer-services-grid { 
        grid-template-columns: 1fr !important; 
        gap: 14px !important;
    }
}

/* ميديا كويري مخصصة بالكامل للهواتف المحمولة والموبايل الضيق */
@media (max-width: 768px) {
    .site-footer { 
        padding-top: 50px !important; 
        text-align: center !important; 
    }
    
    .footer-container { 
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important; 
        gap: 35px !important;
    }
    
    .footer-col { 
        width: 100% !important; 
        align-items: center !important; 
        text-align: center !important;
    }
    
    .footer-col.brand-info {
        border-bottom: none !important;
        padding-bottom: 0;
    }
    
    .footer-title::after {
        right: 50% !important;
        transform: translateX(50%) !important; 
    }
    
    .footer-services-grid { 
        grid-template-columns: 1fr 1fr !important; /* العودة لعمودين على الموبايل لسهولة اللمس والوضوح */
        justify-items: center;
    }
    
    .footer-list li a:hover,
    .footer-services-grid li a:hover {
        transform: translateY(-2px) !important; 
    }
    
    .contact-item { 
        justify-content: center !important; 
    }
}