/* الألوان الأساسية */
:root {
    --primary-color: #1B4C74;
    --cta-color: #449AD7;
    --hover-gold: #FFC647;
    --secone-color: #1A3C61;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* تطبيق الخط على الجسم الرئيسي للموقع */
body {
    font-family: 'Cairo', sans-serif !important;
}

/* تخصيص الأوزان للعناوين (اختياري لضمان الشكل) */
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    /* الوزن العريض اللي ظاهر في الصورة */
}

p,
span,
a {
    font-family: 'Cairo', sans-serif;
    font-weight: 400;
    /* الوزن العادي للقراءة */
}

/* الهيدر */
.navbar {
    background-color: #20466e !important;
    padding-top: 10px !important;
    padding-bottom: 2px !important;
    margin-bottom: 0 !important;
    min-height: 60px !important;
}

.main-logo {
    max-width: 210px;
    width: 210px;
    object-fit: contain;
    max-height: 85px
}

.navbar-nav .nav-link,
.nav-item,
.navbar-brand {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600;
    /* هذا الوزن يعطيك نفس ثقل الخط في الصورة */
    font-size: 16px;
    /* الحجم المثالي للهيدر */
}

/* Adjust navbar for mobile: Logo on the right, Toggler on the left */
@media (max-width: 991px) {
    .navbar .container-fluid {
        display: flex !important;
        flex-direction: row !important;
        /* In RTL, this starts from the right */
        justify-content: space-between !important;
    }

    .navbar-brand {
        order: 1 !important;
        /* Positioned at the start (right in RTL) */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main-logo {
        width: 110px !important;
        max-width: 110px !important;
    }

    .navbar-toggler {
        order: 2 !important;
        /* Positioned at the end (left in RTL) */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* زر "تواصل معنا" في الهيدر */
.btn-outline-light,
.btn-cta {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700;
    /* الزر دائماً يفضل يكون أثقل قليلاً */
}

/* --- Static Wave Divider (أسفل الهيرو) --- */
.hero-wave-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 5;
    pointer-events: none;
}

.hero-wave-divider svg {
    display: block;
    width: 100%;
    height: 100px;
}

/* التنسيق للروابط */
.navbar-nav .nav-link {
    color: #ffffff !important;
    margin: 0 12px;
    font-size: 16px;
    transition: 0.3s ease;
}

.dropdown-toggle::after {
    display: none !important;
}

/* --- التعديل المطلوب: تنسيق الهوفر للقائمة المنسدلة --- */

.dropdown-item {
    color: #ffffff !important;
    padding: 12px 25px !important;
    font-weight: 600 !important;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    /* حركة انسيابية احترافية */
    background: transparent !important;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: var(--hover-gold);
    transition: width 0.3s ease;
}

/* تأثير الهوفر لما الماوس يجي على الخدمة */
.dropdown-item:hover {
    color: var(--hover-gold) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    /* إضاءة خفيفة جداً للخلفية */
    padding-right: 35px !important;
    /* إزاحة النص لإفساح مجال للخط الذهبي */
}

/* تفعيل الخط الذهبي عند الهوفر */
.dropdown-item:hover::before {
    width: 5px;
    /* سمك الخط الجانبي كما في كروت السوشيال */
}

/* تنسيق الخط الفاصل بين العناصر إذا وجد */
.dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--hover-gold) !important;
}

/* الزر (CTA) */
.btn-cta {
    background-color: var(--cta-color) !important;
    color: white !important;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    border: none;
    transition: 0.3s;
}

.btn-cta:hover {
    background-color: #357abd !important;
    transform: translateY(-2px);
}

.dropdown-menu {
    background-color: var(--primary-color) !important;
    /* جعل الخلفية نفس لون الهوية الداكن */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 4px solid var(--hover-gold) !important;
    /* الخط الذهبي العلوي المميز */
    padding: 12px 0 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
    /* ظل عميق لإعطاء فخامة */
    min-width: 280px !important;
    border-radius: 0 0 12px 12px !important;
    overflow: hidden;
}

/* Hero Section Settings */

.hero-section {
    position: relative;
    z-index: 10;
    background-color: var(--primary-color);
    padding: 0 0 140px 0;
    min-height: auto;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-logo {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    z-index: 2;
    position: relative;
}

.hero-logo,
.hero-btns,
h1,
p {
    position: relative;
    z-index: 10;
}

.hero-section h1 {
    margin-top: 0 !important;
}

/* === خلفية الأنيميشن الفخمة (تأثير الأورورا) === */

/* تغليف الأشكال عشان ما تخرجش بره السكشن وتعمل مشاكل */
/* 1. السكشن الأساسي لازم يكون Relative وعامل Hide لأي حاجة تخرج براه */
/* --- إعدادات سكشن الـ Particle Network --- */


/* طبقة الشبكة التقنية المتحركة */



/* السكشن الأساسي */
.hero-section {
    position: relative;
    background-color: var(--secone-color);
    /* اللون الاحتياطي */
    min-height: 100vh;
    overflow: hidden;
    z-index: 1;
}

/* حاوية المكتبة: تأكد إنها absolute ومالية الشاشة */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* فوق الخلفية السادة */
}

/* حاوية الكلام: لازم تكون أعلى من الكل */
.relative-z {
    position: relative;
    z-index: 10 !important;
    pointer-events: none;
    /* عشان الماوس يوصل للنقط اللي ورا الكلام ويحركها */
}

.hero-btns {
    pointer-events: auto;
    /* رجع الماوس يشتغل للأزرار بس */
}

/* Services Section */
.services-section {
    background-color: var(--primary-color);
}

.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 3px;
    background-color: var(--hover-gold);
}

/* Service Cards */
.service-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 25px;
    color: white;
    height: 100%;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-10px);
    background: rgba(68, 154, 215, 0.2);
    border-color: var(--secondary-color);
}

.service-card h4 {
    color: var(--hover-gold);
    font-size: 1.2rem;
    font-weight: bold;
}

.service-card .card-icon img {
    max-width: 120px;
    height: auto;
}

.active-card {
    border: 2px solid var(--secondary-color);
    background: rgba(68, 154, 215, 0.1);
}

.p-hero {
    padding-top: 15px;
    line-height: 2.0;
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    z-index: 1000;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}





/* تنسيق السكشن العام */
#unique-creative-section {
    background-color: var(--secone-color);
    font-family: 'Cairo', sans-serif;
    color: #fff;
}

#unique-creative-section .creative-main-title {
    color: #FDC057;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 0;
}

#unique-creative-section .creative-card {
    background: linear-gradient(135deg, #2b5682 0%, #3e7ab5 100%);
    border-radius: 15px;
    padding: 2rem;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#unique-creative-section .creative-card h3 {
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}

#unique-creative-section .creative-card ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

#unique-creative-section .creative-card ul li {
    position: relative;
    padding-right: 1.5rem;
    margin-bottom: 0.8rem;
    color: #e0e0e0;
    font-size: 1.1rem;
}

#unique-creative-section .creative-card ul li::before {
    content: '•';
    color: #FDC057;
    font-size: 1.5rem;
    position: absolute;
    right: 0;
    top: -5px;
}

#unique-creative-section .creative-btn {
    background-color: #5587a8;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    width: 100%;
    transition: 0.3s;
}

#unique-creative-section .creative-btn:hover {
    background-color: #6ea0c2;
}

#unique-creative-section .creative-btn.active {
    background-color: #FDC057;
    color: #1A3C61;
    font-weight: bold;
    transform: scale(1.05);
}

#unique-creative-section .creative-float-anim {
    animation: creativeFloat 6s ease-in-out infinite;
}

@keyframes creativeFloat {

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

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

#unique-creative-section .creative-fade-box {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

#unique-creative-section .creative-fade-box.visible {
    opacity: 1;
}

/* موبايل */
@media (max-width: 991px) {
    #unique-creative-section .creative-nav-buttons {
        flex-direction: row !important;
    }
}

/* =========================================
   تنسيقات القسم المميز
   ========================================= */

#unique-creative-section .border-top-custom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#unique-creative-section .path-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

#unique-creative-section .highlight-gold {
    color: #FDC057;
    position: relative;
    display: inline-block;
}

#unique-creative-section .highlight-gold::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #FDC057;
    bottom: 5px;
    left: 0;
    opacity: 0.3;
    border-radius: 2px;
}

#unique-creative-section .path-desc {
    color: #e0e0e0;
    font-size: 1.25rem;
    line-height: 1.8;
    font-weight: 400;
    max-width: 900px;
    margin: 0 auto;
}

#unique-creative-section .img-fluid {
    max-width: 70%;
}

@media (max-width: 768px) {
    #unique-creative-section .path-title {
        font-size: 1.8rem;
    }

    #unique-creative-section .path-desc {
        font-size: 1rem;
        padding: 0 10px;
    }
}

/* =========================================
   تنسيقات سكشن الإحصائيات (معزول)
   ========================================= */

#stats-section {
    background-color: var(--primary-color);
    font-family: 'Cairo', sans-serif;
    position: relative;
    padding-top: 3rem;
    padding-bottom: 5rem;
}

/* --- النصوص --- */
#stats-section .stats-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 2.2rem;
}

#stats-section .highlight-gold {
    color: #FDC057;
}

#stats-section .stats-desc {
    color: #e0e0e0;
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
}

#stats-section .floating-tablet {
    max-width: 50%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.4));
    /* ظل قوي للواقعية */
    animation: tabletFloat 5s ease-in-out infinite;
}

@keyframes tabletFloat {

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

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

#stats-section .stat-card {
    background: linear-gradient(180deg, #2b5682 0%, #1A3C61 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 2rem 1rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#stats-section .stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border-color: #FDC057;
}

#stats-section .counter-value {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-family: sans-serif;
}

#stats-section .stat-label {
    color: #FDC057;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

@media (max-width: 768px) {
    #stats-section .stats-title {
        font-size: 1.8rem;
    }

    #stats-section .counter-value {
        font-size: 2.2rem;
    }

    #stats-section .floating-tablet {
        max-width: 100%;
    }
}

/* السكشن الرئيسي */
.testimonials-section {
    background-color: #1b4c74;
    /* اللون الأزرق الأساسي للهيرو */
    padding: 80px 0;
    position: relative;
}

/* تنسيق الكارت */
.testimonial-card {
    background-color: #0d3a5d;
    border-radius: 15px;
    padding: 40px 30px;

    /* === الحل هنا === */
    width: 100%;
    /* لضمان أخذ العرض كامل */
    display: flex;
    /* تفعيل الفليكس داخل الكارت */
    flex-direction: column;
    /* ترتيب العناصر عمودياً */
    justify-content: space-between;
    /* توزيع المسافات بين النص والنجوم */
    height: 100%;
    /* إجبار الكارت على أخذ طول السلايد (الأطول بينهم) */
    /* ================ */

    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s ease;
}

.testimonials-slider .swiper-slide {
    height: auto;
    /* يسمح للسلايد بالتمدد */
    display: flex;
    /* يجعل الكارت بداخله يتمدد */
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: var(--hover-gold);
}

.testimonial-text {
    flex-grow: 1;
    /* يجعل النص يستهلك المساحة الزائدة */
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 25px;
}

.client-name {
    color: var(--hover-gold);
    /* اللون الذهبي */
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
}

/* حاوية النجوم (الكبسولة) */
.stars-container {
    display: flex;
    justify-content: center;
}

.stars-pill {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1.5px solid var(--hover-gold);
    padding: 6px 25px;
    border-radius: 50px;
}

.stars-pill i {
    color: var(--hover-gold);
    font-size: 14px;
    margin: 0 2px;
}

/* تنسيق الأسهم (Chevron) */
.custom-arrow {
    color: #ffffff !important;
    opacity: 0.5;
    transition: 0.3s;
}

.custom-arrow:hover {
    opacity: 1;
    color: var(--hover-gold) !important;
}

.custom-arrow::after {
    display: none;
    /* إخفاء سهم سويبر الافتراضي */
}

/* تنسيق النقاط (Dots) */
.swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 0.3;
}

.swiper-pagination-bullet-active {
    background: var(--hover-gold) !important;
    opacity: 1;
}

/* استبدل الكلاس باسم الكلاس اللي عندك للأيقونة أو الرابط */
.whatsapp-float {
    text-decoration: none !important;
    /* هذا السطر يشيل أي شرطة تحت الأيقونة */
    border-bottom: none !important;
    /* احتياطاً لو في برواز سفلي */
    outline: none !important;
}

/* الأماكن الجديدة للأيقونات الإضافية (5-8) لضمان ظهورها ووضوحها */
.icon-pos-5 {
    top: 15%;
    left: 45%;
    animation-delay: 1.5s;
    opacity: 0.6;
}

.icon-pos-6 {
    bottom: 10%;
    left: 30%;
    animation-delay: 2.5s;
    opacity: 0.6;
}

.icon-pos-7 {
    top: 45%;
    right: 8%;
    animation-delay: 3.5s;
    opacity: 0.5;
}

.icon-pos-8 {
    bottom: 35%;
    left: 5%;
    animation-delay: 0.5s;
    opacity: 0.5;
}

/* لزيادة وضوح الأيقونات كلها سِنة كمان */
.tech-icon-circle {
    background: rgba(255, 255, 255, 0.1) !important;
    /* خليت الخلفية أوضح */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    /* ضفت توهج ذهبي خفيف */
}

/* صفحه الخدمات */

/* تنسيق السكشن العام */
/* الحاوية الأساسية للسكشن */
/* الحاوية الأساسية للسكشن */
.service-hero-section {
    position: relative;
    /* مسحنا التدرج وحطينا المتغير بتاعك مباشرة */
    background-color: var(--primary-color);
    padding: 120px 0 100px;
    overflow: hidden;
    color: #ffffff;
}

/* خلفية تكنولوجية خفيفة جداً */
.tech-overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* تقدر تحط صورة الشاشات اللي في الخلفية هنا إذا حبيت */
    background: url('../images/tech-bg.png') center/cover no-repeat;
    opacity: 0.1;
    z-index: 1;
}

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

/* تنسيق العنوان */
.hero-main-title {
    font-size: 3rem;
    font-weight: 800;
    font-family: 'Cairo', sans-serif;
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

/* حركة الفرشاة الصفراء تحت العنوان */
.yellow-brush {
    display: block;
    width: 250px;
    height: 18px;
    /* رسمة الفرشاة بالـ SVG لتبدو احترافية */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,5 Q50,0 100,5 Q50,10 0,5 Z' fill='%23ffc107'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
    margin: 5px auto 0;
}

/* تنسيق النصوص الوصفية */
.hero-description {
    font-size: 1.15rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.9);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* زر أكتشف المزيد */
.btn-discover {
    background-color: #2980b9;
    color: #ffffff;
    padding: 12px 35px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.btn-discover:hover {
    background-color: #1a6294;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-discover i {
    font-size: 0.9rem;
    transition: 0.3s;
}

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

/* تجاوب السكشن مع الموبايل */
@media (max-width: 768px) {
    .hero-main-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .yellow-brush {
        width: 180px;
    }

    .service-hero-section {
        padding: 80px 0;
    }
}

/* حاوية الأشكال عشان متخرجش برا السكشن */
.animated-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    /* عشان تفضل ورا الكلام */
    pointer-events: none;
    /* عشان متمنعش الضغط على الزراير */
}

/* التنسيق الأساسي للكرات المضيئة */
.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    /* درجة التمويه عشان تبان كأنها إضاءة مش شكل صلب */
    opacity: 0.5;
    /* شفافية خفيفة */
    animation: floatShape infinite alternate ease-in-out;
}

/* الكرة الأولى: أزرق فاتح (فوق على اليمين) */
.shape-1 {
    width: 350px;
    height: 350px;
    background: #2980b9;
    top: -15%;
    right: -10%;
    animation-duration: 12s;
    /* بتتحرك ببطء على مدار 12 ثانية */
}

/* الكرة الثانية: اللون الذهبي بتاع مكسب (تحت على الشمال) */
.shape-2 {
    width: 300px;
    height: 300px;
    background: var(--hover-gold);
    bottom: -20%;
    left: -10%;
    opacity: 0.3;
    /* خلينا الذهبي أهدى شوية */
    animation-duration: 15s;
    animation-delay: 2s;
    /* تبدأ متأخرة شوية عشان الحركة تبان عشوائية */
}

/* الكرة الثالثة: أزرق متوسط (في النص) */
.shape-3 {
    width: 250px;
    height: 250px;
    background: #3498db;
    top: 40%;
    left: 40%;
    opacity: 0.2;
    animation-duration: 18s;
}

/* كود حركة الطفو (بتكبر وتصغر وتتحرك من مكانها بشكل ناعم) */
@keyframes floatShape {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(50px, -50px) scale(1.2);
    }
}

/* تنسيق السكشن العام */
.services-details-section {
    background-color: var(--secone-color);
    color: #fff;
    overflow: hidden;
}

/* مسافة كبيرة بين كل خدمة والتانية */
.service-row {
    margin-bottom: 120px;
}

.service-row:last-child {
    margin-bottom: 0;
}

/* تنسيق النصوص */
.service-text-content {
    padding: 0 20px;
}

.service-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.4;
}

.service-title span {
    color: var(--hover-gold);
    position: relative;
}

/* خط تجميلي تحت الكلمة الذهبية */
.service-title span::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 50%;
    height: 3px;
    background: var(--hover-gold);
    border-radius: 2px;
}

.service-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 30px;
}

/* تنسيق القوائم (المميزات) */
.list-title {
    color: var(--hover-gold);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

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

.service-features-list li {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    line-height: 1.6;
}

.service-features-list li i {
    color: var(--hover-gold);
    font-size: 1.2rem;
    margin-left: 10px;
    /* المسافة بين الأيقونة والنص */
    margin-top: 4px;
}

/* =========================================
   تنسيق الصور والأنيميشن (الطفو والإضاءة)
   ========================================= */
.illustration-box {
    position: relative;
    text-align: center;
    padding: 20px;
}

.glow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: rgba(255, 193, 7, 0.15);
    /* إضاءة ذهبية خفيفة ورا الصورة */
    filter: blur(60px);
    z-index: 0;
    border-radius: 50%;
}

.illustration-box img {
    position: relative;
    z-index: 1;
    max-width: 85%;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.3));
    /* ظل احترافي للصورة */
}

/* أنيميشن الطفو للصور */
.floating-element {
    animation: floaty 5s ease-in-out infinite;
}

/* طفو عكسي للصورة اللي في النص عشان ميكونش كله بيتحرك في نفس الاتجاه */
.floating-element-reverse {
    animation: floatyReverse 6s ease-in-out infinite;
}

@keyframes floaty {
    0% {
        transform: translateY(0);
    }

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

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

@keyframes floatyReverse {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(15px);
    }

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

/* تجاوب مع الموبايل */
@media (max-width: 991px) {
    .service-row {
        margin-bottom: 80px;
        text-align: center;
    }

    .service-title span::after {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: 80px;
    }

    .service-features-list li {
        text-align: right;
    }

    /* للحفاظ على ترتيب القائمة */
    .service-text-content {
        padding: 0;
    }
}

/* footer */

/* =========================================
   تنسيق الفوتر (Footer)
   ========================================= */
.maksab-footer {
    background-color: var(--secone-color);
    color: #ffffff;
    padding-top: 80px;
    position: relative;
    border-top: 4px solid var(--hover-gold);
}

/* === التعديل هنا لضبط الصورة على نفس مستوى العناوين === */
.footer-logo {
    max-width: 180px;
    margin-top: -12px;
    /* تم رفع اللوجو قليلاً ليتوازى مع النصوص */
}

.footer-slogan {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.05rem;
    line-height: 1.8;
}

.text-gold {
    color: var(--hover-gold) !important;
}

/* === التعديل هنا لضبط العناوين === */
.footer-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
    color: #ffffff;
    margin-top: 8px;
    /* تم خفض العنوان قليلاً ليوازي منتصف اللوجو */
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 3px;
    background-color: var(--hover-gold);
    border-radius: 2px;
}

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

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

.footer-contact-list li {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
}

/* التعديل هنا لضمان ترتيب الأيقونات بشكل مستقيم */
.footer-contact-list li i {
    color: var(--hover-gold);
    font-size: 1.2rem;
    margin-left: 12px;
    width: 20px;
    text-align: center;
}

.footer-links a,
.footer-contact-list a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.footer-links a i {
    font-size: 0.8rem;
    margin-left: 8px;
    color: var(--hover-gold);
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

/* حركة الروابط عند تمرير الماوس */
.footer-links a:hover {
    color: var(--hover-gold);
    transform: translateX(-8px);
}

.footer-links a:hover i {
    opacity: 1;
    transform: translateX(0);
}

/* أيقونات السوشيال ميديا */
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links a:hover {
    background-color: var(--hover-gold);
    color: #0b1c2c;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
}

/* شريط حقوق النشر السفلي */
.footer-bottom {
    background-color: var(--secone-color);
    padding: 20px 0;
    margin-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

/* الأزرار العائمة */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    transition: 0.3s;
    text-decoration: none !important;
}

.floating-whatsapp:hover {
    transform: scale(1.1);
    color: white;
}

.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 45px;
    height: 45px;
    background-color: var(--hover-gold);
    color: #0b1c2c;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: 0.3s;
    text-decoration: none !important;
    opacity: 0;
    pointer-events: none;
}

.scroll-top-btn.show {
    opacity: 1;
    pointer-events: auto;
}

.scroll-top-btn:hover {
    background-color: #ffffff;
    color: var(--primary-color);
    transform: translateY(-5px);
}

/* === تعديلات الموبايل (لتوسيط محتوى الفوتر بالكامل) === */
@media (max-width: 767px) {

    /* توسيط النصوص في كل الأعمدة */
    .maksab-footer .col-lg-4,
    .maksab-footer .col-lg-3,
    .maksab-footer .footer-brand {
        text-align: center;
        margin-bottom: 30px;
        /* مسافة إضافية بين الأقسام في الموبايل */
    }

    /* توسيط اللوجو */
    .footer-logo {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    /* توسيط الخط الذهبي تحت العناوين */
    .footer-title::after {
        right: 50%;
        transform: translateX(50%);
    }

    /* توسيط أيقونات التواصل (الهاتف والإيميل) */
    .footer-contact-list li {
        justify-content: center;
    }

    /* توسيط روابط الصفحات والخدمات */
    .footer-links a {
        justify-content: center;
    }

    /* توسيط أيقونات السوشيال ميديا وتظبيط المسافات بينها */
    .social-links {
        display: flex;
        justify-content: center;
    }

    .social-links a {
        margin: 0 5px;
        /* توزيع المسافات يمين ويسار الأيقونة */
    }
}

/* === توسيط "روابط سريعة" و "خدماتنا" في جميع الشاشات === */

/* 1. توسيط العناوين */
.footer-title {
    text-align: center !important;
}

/* 2. توسيط الخط الذهبي اللي تحت العنوان بالظبط */
.footer-title::after {
    right: 50% !important;
    transform: translateX(50%) !important;
}

/* 3. توسيط القائمة بالكامل تحت العنوان */
.footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 4. التأكد إن السطر واخد العرض كله عشان التوسيط يظبط */
.footer-links li {
    width: 100%;
}

/* 5. توسيط الأيقونة (السهم) مع الكلام */
.footer-links a {
    justify-content: center;
}

/* === التوسيط الدقيق والنهائي للفوتر (حل مشكلة المساحة الزائدة) === */
.footer-links {
    padding: 0 !important;
    /* مسح أي مسافة افتراضية للقائمة من اليمين */
    margin: 0 !important;
}

.footer-links li {
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

.footer-links a {
    display: inline-flex !important;
    justify-content: center !important;
    width: fit-content !important;
    margin: 0 auto !important;
}

/* إخفاء الأيقونة المخفية في الموبايل لأنها تزاحم النص وتلغي التوسيط */
@media (max-width: 767px) {

    .footer-links a i {
        display: none !important;
    }
}

/* صفحه السوشيال فرعيه */

/* الحاوية الرئيسية */
.sub-hero-social {
    position: relative;
    background-color: var(--primary-color);
    padding: 150px 0 100px;
    overflow: hidden;
    color: #ffffff;
    text-align: center;
}

/* --- أنيميشن الأيقونات العائمة في الخلفية --- */
.floating-social-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.icon-orb {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: floatAround infinite alternate ease-in-out;
}

/* توزيع الأيقونات في الخلفية كما في الصورة */
.fb-orb {
    top: 15%;
    right: 10%;
    animation-duration: 8s;
    font-size: 40px;
}

.ig-orb {
    top: 60%;
    left: 8%;
    animation-duration: 10s;
    background: rgba(225, 48, 108, 0.1);
}

.tw-orb {
    top: 20%;
    left: 15%;
    animation-duration: 7s;
}

.snap-orb {
    bottom: 15%;
    right: 20%;
    animation-duration: 9s;
    background: rgba(255, 252, 0, 0.05);
}

@keyframes floatAround {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(30px, -40px) rotate(15deg);
    }
}

/* --- تنسيق المحتوى --- */
.relative-z {
    position: relative;
    z-index: 5;
}

.service-main-title {
    font-size: 3.5rem;
    font-weight: 850;
    margin-bottom: 20px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.tit {
    color: white;
}

.yellow-brush-v2 {
    display: block;
    width: 300px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,5 Q50,0 100,5 Q50,10 0,5 Z' fill='%23ffc107'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
    margin: 5px auto 0;
}

.service-main-desc {
    font-size: 1.2rem;
    line-height: 2;
    max-width: 950px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.9);
}

.service-sub-desc {
    font-size: 1.1rem;
    color: #ffc107;
    margin-top: 20px;
}

/* --- الزر العصري --- */
.btn-social-cta {
    background: #007bff;
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.4s;
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3);
    display: inline-flex;
    align-items: center;
}

.btn-social-cta:hover {
    background: #0056b3;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 123, 255, 0.5);
    color: white;
}

/* تجاوب الموبايل */
@media (max-width: 768px) {
    .service-main-title {
        font-size: 2.2rem;
    }

    .icon-orb {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* تنسيق قسم الأهمية */
.importance-section {
    background-color: var(--primary-color);
    color: white;
}

.importance-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 35px 25px;
    border-radius: 20px;
    text-align: center;
    height: 100%;
    transition: 0.4s;
}

.importance-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-10px);
    border-color: var(--hover-gold);
}

.card-icon-circle {
    width: 70px;
    height: 70px;
    background: var(--hover-gold);
    color: #1b4c74;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
    box-shadow: 0 10px 20px rgba(255, 193, 7, 0.3);
}

/* تنسيق الـ 6 خطوات */
.bg-dark-blue {
    background-color: var(--secone-color);
}

.feature-box {
    position: relative;
    padding: 40px 30px;
    background: #1b4c74;
    border-radius: 15px;
    border-right: 4px solid var(--hover-gold);
    height: 100%;
    transition: 0.3s;
}

.feature-box:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.step-number {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05);
    /* رقم باهت في الخلفية */
}

.feature-box h4 {
    color: var(--hover-gold);
    font-weight: 700;
    margin-bottom: 15px;
}

/* تنسيق قسم العناصر الاستراتيجية */
/* تنسيق قسم العناصر الاستراتيجية */
.bg-gradient-blue {
    background: linear-gradient(180deg, #1b4c74 0%, #0d2335 100%);
}

.strategic-list {
    border-right: 2px solid rgba(255, 193, 7, 0.3);
    padding-right: 30px;
}

.strat-item {
    margin-bottom: 30px;
    position: relative;
}

.strat-item::before {
    content: '';
    position: absolute;
    right: -36px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: var(--hover-gold);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--hover-gold);
}

.strat-item h5 {
    color: var(--hover-gold);
    font-weight: 700;
}

/* تنسيق قسم الفوائد */
.benefits-wrapper {
    background: rgba(255, 255, 255, 0.03);
    padding: 60px 40px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.benefit-check-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 15px;
    padding: 15px 25px;
    border-radius: 12px;
    transition: 0.3s;
}

.benefit-check-item:hover {
    background: rgba(255, 193, 7, 0.1);
    transform: scale(1.02);
}

.benefit-check-item i {
    color: var(--hover-gold);
    font-size: 1.5rem;
    margin-left: 20px;
}

.benefit-check-item p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.final-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    max-width: 900px;
    margin: 0 auto;
}

/* حاوية الخط الزمني */
.strategic-timeline {
    position: relative;
    padding-right: 30px;
    /* مسافة للخط والنقاط */
    border-right: 2px solid rgba(255, 193, 7, 0.2);
    /* الخط الرأسي الباهت */
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* النقطة الذهبية المضيئة */
.timeline-dot {
    position: absolute;
    right: -37px;
    /* لتقع بالضبط فوق الخط الرأسي */
    top: 5px;
    width: 14px;
    height: 14px;
    background-color: var(--hover-gold);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--hover-gold);
    /* تأثير الإضاءة للنقطة */
    z-index: 2;
}

.timeline-item h5 {
    color: var(--hover-gold);
    font-weight: 800;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.timeline-item p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-bottom: 0;
}

/* تنسيق الصورة العائمة في الجانب الآخر */
.strategy-visual-wrapper {
    position: relative;
    text-align: center;
}

.glow-orb-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.15) 0%, transparent 70%);
    filter: blur(50px);
    z-index: 0;
}

/* السكشن باللون الأساسي */
/* السكشن باللون الأساسي للموقع */
.benefits-rtl-section {
    background-color: var(--primary-color);
    /* التأكد من استخدام اللون الأساسي */
    padding: 90px 0;
    direction: rtl;
    /* تأكيد اتجاه السطو من اليمين لليسار */
}

/* الكارت الزجاجي الاحترافي */
.benefits-glass-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 35px;
    padding: 60px 45px;
}

.benefits-main-title {
    color: #fff;
    font-weight: 850;
    font-size: 2.3rem;
    margin-bottom: 15px;
}

.benefits-lead {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
}

/* === ضبط السطر ليكون على اليمين دائماً === */
.benefit-item-right {
    display: flex;
    align-items: center;
    /* ضبط النص والأيقونة على خط واحد */
    background: rgba(255, 255, 255, 0.05);
    padding: 18px 25px;
    border-radius: 15px;
    margin-bottom: 15px;
    transition: 0.3s all ease;
    border-right: 4px solid transparent;
    /* إضافة خط جانبي يظهر عند الـ Hover */
}

.benefit-item-right:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(-10px);
    /* يتحرك لليسار قليلاً عند الوقوف عليه */
    border-right-color: var(--hover-gold);
}

/* تنسيق الأيقونة على اليمين */
.benefit-item-right i {
    color: var(--hover-gold);
    font-size: 1.4rem;
    margin-left: 15px;
    /* مسافة بين الأيقونة والنص من جهة اليسار (لأننا في RTL) */
}

.benefit-item-right p {
    margin: 0;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: right;
    /* تأكيد محاذاة النص لليمين */
}

/* تنسيق الختام والزرار */
.footer-note {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 850px;
    margin: 0 auto;
}

.cta-highlight {
    color: var(--hover-gold);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 25px;
}

.btn-primary-gold {
    background-color: var(--hover-gold);
    color: var(--primary-color);
    padding: 14px 45px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
}

.btn-primary-gold:hover {
    background-color: #ffffff;
    color: var(--primary-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* حاوية الشريط الأساسية - هنا هنشغل الحركة */
.partners-marquee {
    display: flex;
    width: max-content;
    animation: scroll-rtl 35s linear infinite;
    will-change: transform;
    /* أمر للمتصفح إنه يفضل مركز مع العنصر ده */
}

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

/* المجموعات - شيلنا منها الأنيميشن وضيفنا تسريع كارت الشاشة */
.marquee-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-left: 2rem;
    /* عشان اللحام بين المجموعتين يكون نفس مقاس الـ gap */
    flex-shrink: 0;

    /* السطرين دول هم الحل السحري لمشكلة اختفاء الصور */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* بوكس اللوجو الزجاجي (زي ما هو بدون تغيير) */
.partner-logo-box {
    width: 160px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    /* كانت 0.02 - بقت أوضح */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* كانت 0.05 - بقت أوضح */
    border-radius: 15px;
    transition: all 0.4s ease;
    padding: 15px;
}

.partner-logo-box:hover {
    background: rgba(255, 255, 255, 0.08);
    /* إضاءة البوكس بتزيد */
    border-color: rgba(212, 175, 55, 0.6);
    /* الإطار الذهبي أوضح */
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.partner-logo-box img {
    max-width: 100%;
    max-height: 100%;
    filter: grayscale(60%) opacity(0.85);
    transition: all 0.4s ease;
}

.partner-logo-box:hover img {
    filter: grayscale(0%) opacity(1) brightness(1.1);
}

/* الأنيميشن المظبوط للأب (استخدمنا translate3d عشان نجبر كارت الشاشة يشتغل) */
@keyframes scroll-rtl {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(50%, 0, 0);
    }

    /* 50% لأنهم مجموعتين بالضبط */
}

.service-hero-section {
    position: relative;
    background-color: var(--primary-color);
    padding: 120px 0 100px;
    overflow: hidden;
    color: #ffffff;
    min-height: 80vh;
    /* تأكد من وجود طول كافي للرسم */
    display: flex;
    align-items: center;
}

/* الكلاس بتاعك بعد تعديله لخدمة الأنيميشن الجديد */
.tech-overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    /* رفعنا الشفافية عشان الجزيئات تبان */
    z-index: 1;
    pointer-events: none;
    /* عشان ميغطيش على الزراير */
}

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

.hero-section {
    /* رفعنا الدرجة لـ 0.82 عشان الصورة تبقى هادية جداً والكلام يبقى بطل المشهد */
    background: linear-gradient(rgba(21, 42, 63, 0.82), rgba(21, 42, 63, 0.82)), url('../images/gemini.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 85vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-section .relative-z {
    z-index: 2;
}