/* إعدادات المتغيرات وتطابق الألوان بدقة */
:root {
    --bg-dark: #05040a;
    --bg-card: #0c0b18;
    --text-white: #ffffff;
    --text-gray: #a1a3b5;
    --neon-pink: #ff2a5f;
    --neon-purple: #9d30ff;
    --neon-cyan: #00f0ff;
    --neon-orange: #ff9100;
    --neon-red: #ff3333;
    --neon-yellow: #ffea00;
    font-family:'Alexandria',sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{

background:

radial-gradient(circle at 30% 50%,rgba(0,70,255,.08),transparent 30%),

radial-gradient(circle at 70% 40%,rgba(255,0,180,.12),transparent 35%),

radial-gradient(circle at 50% 100%,rgba(140,0,255,.18),transparent 40%),

#05040a;

}

.container {
    width: 92%;
    max-width: 1450px;
    margin: 0 auto;
}

/* الأزرار الاحترافية */
.btn {
  padding:

15px 34px;

font-size:17px;

font-weight:700;

border-radius:50px;

box-shadow:

0 0 25px rgba(255,0,170,.35);

}

.btn-solid-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: linear-gradient(135deg, #ff2a5f, #9d30ff);
    color: #ffffff;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(255, 42, 95, 0.4);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-solid-gradient:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 42, 95, 0.6);
}

/* أيقونة السهم داخل الزر */
.btn-solid-gradient .arrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.btn-solid-gradient:hover .arrow-icon {
    transform: translateX(-5px); /* حركة خفيفة للسهم عند التمرير */
}

.btn-outline-glow:hover {
    background: var(--neon-purple);
    box-shadow: 0 0 15px rgba(157, 48, 255, 0.6);
}

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 20px 0;
    background: transparent; /* خلفية شفافة تماماً */
}

.nav-container {
    max-width: 1400px;
    width: 92%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo-img{

width:80px;
display:block;

}

.nav-menu{

display:flex;
align-items:center;
gap:38px;

}

.nav-menu a{

text-decoration:none;
color:#d9d9d9;
font-size:16px;
font-weight:500;
transition:.3s;

}

.nav-menu a:hover,
.nav-menu .active{

color:#ff2a9d;

}

/* تعديل زر الاستشارة ليكون متطابقاً مع الصورة */
.btn-outline-glow {
    padding: 12px 28px;
    border-radius: 8px; /* حواف حادة قليلاً وليست دائرية بالكامل طبقاً للصورة */
    border: none;
    background: linear-gradient(90deg, #ff2a5f, #9d30ff);
    color: white;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: 0.3s ease;
    box-shadow: 0 0 15px rgba(157, 48, 255, 0.4);
}

.btn-outline-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 42, 95, 0.6);
}


.logo{

margin-left:40px;

}

.brand-logo-img{

width:75px;

height:auto;

display:block;

}

.logo-icon {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 1rem;
    font-weight: 800;
}

.brand-sub {
    font-size: 0.55rem;
    color: var(--text-gray);
    letter-spacing: 1px;
}




/* قسم الهيرو (Hero Section) الثلاثي */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 120px; /* لمنع تداخل النافبار مع المحتوى */
    padding-bottom: 60px;
}

.hero-container {
    display: grid;
    /* تقسيم مرن يتناسب مع أحجام الشاشات المختلفة */
    grid-template-columns: 1.2fr 1.8fr 1fr; 
    align-items: center;
    gap: 30px;
    width: 92%;
    max-width: 1440px;
    margin: 0 auto;
}

/* القسم الأيمن (النصوص) */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* محاذاة النص لليمين */
    text-align: right;
    gap: 15px;
    z-index: 5;
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
}

/* فاصل النجمة واسم البراند */
.brand-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

/* النجمة المتوهجة */
.sparkle-icon {
    font-size: 20px;
    color: #00f0ff; /* لون نيون أزرق سماوي مذهل */
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
    animation: pulse 2s infinite ease-in-out;
}

/* اسم البراند Frame X */
.brand-name {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
}

/* النص الوصفي باللون الرمادي الهادئ المريح للعين */
.hero-description {
    font-size: 16px;
    line-height: 1.8;
    color: #b3b5c6; /* لون رمادي ناعم لجعل التركيز على العنوان */
    max-width: 480px;
    margin: 0;
}

/* تمييز الكلمات الأخيرة باللون الأبيض الناصع والخط العريض */
.highlight-text {
    color: #ffffff;
    font-weight: 700;
    border-bottom: 2px dashed #9d30ff; /* خط متقطع أرجواني تحت "أنت تبيع!" */
    padding-bottom: 2px;
}

/* تأثير نبض بسيط للنجمة لتعطي حياة للواجهة */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
        filter: drop-shadow(0 0 15px rgba(0, 240, 255, 1));
    }
}
.gradient-text {
    background: linear-gradient(135deg, #ff2a5f, #ff9100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    filter: drop-shadow(0 0 15px rgba(255, 42, 95, 0.3));
}


.text-glow-gradient {
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.hero-brand {
    color: var(--neon-cyan);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.hero-desc {
    color: var(--text-gray);
    font-size: 1rem;
    margin-bottom: 30px;
    max-width: 360px;
}

/* تنسيق الحاوية التي تجمع الزر وصور العملاء */
.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* محاذاة لليمين */
    gap: 20px;
    margin-top: 25px;
}

.user-avatars {
    display: flex;
    flex-direction: row-reverse; /* لجعل الصور تتداخل بالطريقة الصحيحة للغة العربية */
    align-items: center;
}
.user-avatars {
    display: flex;
    direction: ltr;
}

.avatar-placeholder {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--bg-dark);
    margin-right: -10px;
}

.avatar-placeholder.pink { background-color: var(--neon-pink); }
.avatar-placeholder.purple { background-color: var(--neon-purple); }
.avatar-placeholder.blue { background-color: var(--neon-cyan); }

/* حاوية العملاء بالكامل */
.satisfied-users {
    display: flex;
    align-items: center;
    gap: 18px; /* مسافة مريحة بين الصور والنص */
    margin-top: 8px;
}

/* حاوية الصور المتداخلة */
.user-avatars {
    display: flex;
    flex-direction: row-reverse; /* ترتيب عكسي ذكي ليتداخلوا بشكل لائق مع اللغة العربية */
    align-items: center;
}

/* تصميم الآفاتار الدائري الكبير والواضح */
.avatar-img {
    width: 46px;                /* حجم أكبر ومميز للعين */
    height: 46px;
    border-radius: 50%;         /* دائرية مثالية */
    border: 3px solid #05040a;  /* إطار سميك ونظيف بنفس لون الخلفية لفصل الصور باحترافية */
    margin-left: -15px;         /* تداخل متناسق مع الحجم الجديد */
    object-fit: cover;          /* لضمان عدم تمدد أو تشوه وجوه الأشخاص داخل الدائرة */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* ظل قوي وواضح يعطي عمقاً فخماً */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* حركة مرنة عند التمرير */
    cursor: pointer;
}

/* حركة تفاعلية ممتعة عند مرور الماوس فوق أي صورة */
.avatar-img:hover {
    transform: translateY(-6px) scale(1.15); /* ترتفع للأعلى وتكبر قليلاً */
    z-index: 10; /* تظهر فوق بقية الصور عند تحديدها */
    border-color: var(--neon-pink); /* يضيء إطار الصورة باللون الوردي النيون */
    box-shadow: 0 0 15px rgba(255, 42, 95, 0.5);
}

/* تنسيق النص الجانبي "+200 عميل راضٍ" */
.users-text {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* ظل خفيف للنص ليزيد من وضوحه فوق الخلفية */
}
.hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.neon-box {
    width: 100%;
    max-width: 650px; /* حجم متناسق للصورة الوسطى */
    display: flex;
    justify-content: center;
    align-items: center;
}

.neon-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(157, 48, 255, 0.3)); /* إعطاء توهج إضافي للصورة */
}

.glowing-x {
    font-size: 8rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 42, 95, 0.8), 0 0 30px rgba(157, 48, 255, 0.8);
}


/* القسم الأيسر (القائمة الجانبية للخدمات) */
.hero-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 380px; /* العرض المثالي طبقاً للتصميم */
    z-index: 5;
}

.sidebar-item {
    background: rgba(12, 11, 24, 0.6); /* خلفية داكنة شفافة */
    backdrop-filter: blur(12px); /* تأثير زجاجي ضبابي احترافي */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05); /* إطار رقيق جداً */
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}
.sidebar-item:hover {
    transform: translateX(-6px); /* إزاحة طفيفة لليمين/اليسار لتأثير تفاعلي */
    background: rgba(18, 17, 34, 0.85);
    border-color: rgba(157, 48, 255, 0.4);
    box-shadow: 0 5px 15px rgba(157, 48, 255, 0.15);
}
.sidebar-info {
    flex-grow: 1;
    text-align: right;
    margin-right: 15px; /* مسافة مريحة بين الأيقونة والكلام */
    margin-left: 15px;
}

.sidebar-info h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 3px;
}

.sidebar-info p {
    color: #a1a3b5;
    font-size: 11px;
    font-weight: 400;
}

.sidebar-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.3s ease;
}
.sidebar-item:hover .sidebar-icon {
    transform: scale(1.1); /* تكبير الأيقونة قليلاً عند المرور */
}
/* الألوان المتوهجة للأيقونات بالتدرجات */
.icon-cyan {
    background: rgba(0, 240, 255, 0.1);
    color: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.icon-pink {
    background: rgba(255, 42, 95, 0.1);
    color: #ff2a5f;
    box-shadow: 0 0 10px rgba(255, 42, 95, 0.2);
}

.icon-orange {
    background: rgba(255, 145, 0, 0.1);
    color: #ff9100;
    box-shadow: 0 0 10px rgba(255, 145, 0, 0.2);
}

.icon-red {
    background: rgba(255, 51, 51, 0.1);
    color: #ff3333;
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.2);
}

.icon-yellow {
    background: rgba(255, 234, 0, 0.1);
    color: #ffea00;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.2);
}

.icon-blue {
    background: rgba(0, 240, 255, 0.1);
    color: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

/* ==========================================================================
   تنسيقات قسم العروض المخصص (Sectors Section)
   ========================================================================== */
.sectors-custom-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.sectors-custom-header {
    text-align: center;
    margin-bottom: 60px;
}

.sectors-custom-header .sect-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #ff2a5f;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.sectors-custom-header .sect-title {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.sectors-custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    position: relative;
    z-index: 2;
}

.sect-card {
    background: rgba(12, 11, 24, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* تأثير التوهج الخلفي لكل كارت */
.sect-glow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(157, 48, 255, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.sect-card:hover .sect-glow-bg,
.sect-card.active .sect-glow-bg {
    opacity: 1;
}

/* تصميم تجويف الأيقونات النيون */
.sect-icon-box {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.sect-card:hover .sect-icon-box,
.sect-card.active .sect-icon-box {
    transform: translateY(-5px) scale(1.05);
}

/* درجات الألوان المتوهجة للأيقونات */
.cyan-neon-glow { color: #00f0ff; text-shadow: 0 0 10px rgba(0, 240, 255, 0.5); }
.pink-neon-glow { color: #ff2a5f; text-shadow: 0 0 10px rgba(255, 42, 95, 0.5); }
.purple-neon-glow { color: #9d30ff; text-shadow: 0 0 10px rgba(157, 48, 255, 0.5); }
.orange-neon-glow { color: #ff9100; text-shadow: 0 0 10px rgba(255, 145, 0, 0.5); }
.red-neon-glow { color: #ff3333; text-shadow: 0 0 10px rgba(255, 51, 51, 0.5); }

/* نصوص وعناوين الكروت */
.sect-card-title {
    font-size: 14px;
    font-weight: 500;
    color: #a1a3b5;
    line-height: 1.6;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.sect-card-title .highlight {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    display: block;
    margin-top: 5px;
}

.sect-desc {
    font-size: 12px;
    color: #838596;
    line-height: 1.8;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

/* تأثيرات التمرير الجمالية (Hover Classes) */
.text-cyan-hover:hover, .text-cyan-hover.active { border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 10px 30px rgba(0, 240, 255, 0.15); }
.text-pink-hover:hover, .text-pink-hover.active { border-color: rgba(255, 42, 95, 0.3); box-shadow: 0 10px 30px rgba(255, 42, 95, 0.15); }
.text-purple-hover:hover, .text-purple-hover.active { border-color: rgba(157, 48, 255, 0.3); box-shadow: 0 10px 30px rgba(157, 48, 255, 0.15); }
.text-orange-hover:hover, .text-orange-hover.active { border-color: rgba(255, 145, 0, 0.3); box-shadow: 0 10px 30px rgba(255, 145, 0, 0.15); }
.text-red-hover:hover, .text-red-hover.active { border-color: rgba(255, 51, 51, 0.3); box-shadow: 0 10px 30px rgba(255, 51, 51, 0.15); }

.sect-card:hover .sect-card-title .highlight {
    background: linear-gradient(90deg, #ffffff, #dcdcdc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ==========================================================================
   تنسيقات قسم خطوات العمل المخصص (Process Section)
   ========================================================================== */
.process-custom-section {
    padding: 100px 0;
    position: relative;
}

.process-custom-header {
    text-align: center;
    margin-bottom: 80px;
}

.process-custom-header .proc-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #9d30ff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.process-custom-header .proc-title {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
}

.process-custom-timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    position: relative;
}

/* خط تتبع الخطوات الإبداعي الخلفي */
.timeline-connecting-line {
    position: absolute;
    top: 60px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(0, 240, 255, 0.4) 0%, 
        rgba(255, 42, 95, 0.4) 25%, 
        rgba(157, 48, 255, 0.4) 50%, 
        rgba(255, 145, 0, 0.4) 75%, 
        rgba(0, 230, 118, 0.4) 100%
    );
    z-index: 1;
}

.proc-step-card {
    text-align: center;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.proc-step-card:hover {
    transform: translateY(-8px);
}

/* شارات الأرقام المتوهجة */
.proc-number-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #0c0b18;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    z-index: 3;
}

/* دوائر الأيقونات */
.proc-icon-container {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: #0c0b18;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 25px;
    position: relative;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

.proc-step-card:hover .proc-icon-container {
    transform: scale(1.1);
}

/* توهج الحلقات الملونة للخطوات */
.cyan-glow-ring { border-color: #00f0ff; color: #00f0ff; box-shadow: 0 0 15px rgba(0, 240, 255, 0.25), inset 0 0 15px rgba(0, 240, 255, 0.1); }
.pink-glow-ring { border-color: #ff2a5f; color: #ff2a5f; box-shadow: 0 0 15px rgba(255, 42, 95, 0.25), inset 0 0 15px rgba(255, 42, 95, 0.1); }
.purple-glow-ring { border-color: #9d30ff; color: #9d30ff; box-shadow: 0 0 15px rgba(157, 48, 255, 0.25), inset 0 0 15px rgba(157, 48, 255, 0.1); }
.orange-glow-ring { border-color: #ff9100; color: #ff9100; box-shadow: 0 0 15px rgba(255, 145, 0, 0.25), inset 0 0 15px rgba(255, 145, 0, 0.1); }
.green-glow-ring { border-color: #00e676; color: #00e676; box-shadow: 0 0 15px rgba(0, 230, 118, 0.25), inset 0 0 15px rgba(0, 230, 118, 0.1); }

.proc-step-title {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.proc-step-desc {
    font-size: 13px;
    color: #a1a3b5;
    line-height: 1.7;
    padding: 0 10px;
}

/* ==========================================================================
   التوافقية مع الشاشات الصغيرة (Responsive Design)
   ========================================================================== */
@media (max-width: 992px) {
    .process-custom-timeline {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .timeline-connecting-line {
        display: none; /* إخفاء الخط الخلفي في الشاشات الطولية لتجنب تداخل العناصر */
    }
    .proc-step-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 350px;
        margin: 0 auto;
    }
}
/* ==========================================================================
   تنسيقات قسم أعمالنا تتكلم عنا (النسخة المطابقة للصورة)
   ========================================================================== */
.our-works-section {
    padding: 80px 0;
    background: #000000; /* خلفية سوداء داكنة تطابق الهوية */
    position: relative;
    overflow: hidden;
}

.works-relative-container {
    position: relative;
    padding: 0 50px; /* مساحة جانبية للأسهم */
}

.works-header {
    text-align: center;
    margin-bottom: 40px;
}

.works-title {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    position: relative;
    display: inline-block;
}

/* حاوية السلايدر المخفية الأطراف */
.works-slider-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 15px 0;
}

/* مسار حركي للكروت */
.works-slider-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* تصميم الكارت الفردي */
.work-slide-card {
    flex: 0 0 calc(25% - 15px); /* يعرض 4 كروت في الشاشة الكبيرة */
    min-width: 250px;
    border-radius: 16px;
    overflow: hidden;
    background: #0f0e17;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.4s ease;
}

.work-card-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 1.5 / 1; /* أبعاد تناسب الصورة المصغرة للفيديو */
    overflow: hidden;
}

.work-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* الغطاء الشفاف فوق الكارت */
.work-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    transition: background 0.3s ease;
}

/* أيقونة التشغيل البسيطة في المنتصف */
.work-play-btn {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.work-play-btn i {
    margin-left: 2px; /* لتوسيط أيقونة التشغيل بصرياً */
}

/* عنوان الكارت في الأسفل */
.work-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    position: absolute;
    bottom: 15px;
    margin: 0;
}

/* تأثير التمرير والتوهج للبطاقة النشطة (مثل فيديو موشن بالصورة) */
.work-slide-card.active-glow,
.work-slide-card:hover {
    border-color: #00f0ff;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
    transform: translateY(-5px);
}

.work-slide-card.active-glow .work-play-btn,
.work-slide-card:hover .work-play-btn {
    background: #00f0ff;
    color: #000000;
    border-color: #00f0ff;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}

.work-slide-card:hover .work-poster {
    transform: scale(1.05);
}

/* أسهم التنقل الجانبية */
.slider-arrow {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    background: #ffffff;
    color: #000000;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.prev-arrow {
    right: 0px; /* الاتجاه الأيمن للتصفح بالعربية */
}

.next-arrow {
    left: 0px;
}

/* ==========================================================================
   مشغل فيديو منبثق (Lightbox)
   ========================================================================== */

.works-video-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    padding: 20px; /* مسافة أمان لضمان عدم ملامسة الشاشة على الموبايل */
}

.works-video-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.works-lightbox-content {
    width: 100%;
    max-width: 1000px; /* تكبير الحد الأقصى لتجربة مشاهدة أفضل */
    max-height: 85vh;  /* عدم تجاوز ارتفاع الشاشة */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000; /* خلفية سوداء للمناطق الفارغة حول الفيديو إن وجدت */
}

.works-lightbox-content video {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain; /* يضمن إظهار الفيديو كاملاً 100% دون أي قص */
    display: block;
}

.works-lightbox-close {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 35px;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
    z-index: 11001;
}

.works-lightbox-close:hover {
    color: #ff2a5f;
}

.works-lightbox-close:hover {
    color: #ff2a5f;
}

/* التجاوب مع مقاسات الشاشات */
@media (max-width: 1024px) {
    .work-slide-card {
        flex: 0 0 calc(50% - 10px); /* عرض كارتين في الأجهزة اللوحية */
    }
}

@media (max-width: 600px) {
    .work-slide-card {
        flex: 0 0 100%; /* كارت واحد في الموبايل */
    }
    .works-relative-container {
        padding: 0 35px;
    }
}
/* ==========================================================================
   تنسيقات قسم العدادات مع ميديا مباشرة (فيديو أو صورة)
   ========================================================================== */
.stats-video-section {
    padding: 60px 0;
    background: #000000;
}

.stats-video-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    align-items: center;
}



/* تنسيق الفيديو المباشر */
.direct-promo-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* لملء الحاوية بالكامل بدون حواف سوداء */
    display: block;
}

/* تنسيق الصورة المباشرة (في حال استخدام صورة بديلة) */
.direct-promo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}


/* ==========================================================================
   قسم الفيديو الترويجي (عرض كامل بدون قص)
   ========================================================================== */
.promo-media-box {
    position: relative;
    width: 100%;
    max-width: 1000px; /* أو الحجم المناسب لتصميمك */
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #000; /* خلفية سوداء للمساحات الفارغة إن وجدت */
    display: flex;
    justify-content: center;
    align-items: center;
}

.promo-media-box video {
    width: 100%;
    height: auto;
    max-height: 80vh; /* يمنع الفيديو من التمدد بشكل أطول من الشاشة */
    object-fit: contain; /* يضمن عرض الفيديو كاملاً 100% دون أي قص */
    display: block;
}

/* زر التحكم بالصوت */
.video-controls-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px; /* أو right: 20px حسب رغبتك */
    z-index: 10;
}

.sound-toggle-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.sound-toggle-btn:hover {
    background: #00f0ff;
    color: #000;
    border-color: #00f0ff;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

/* ==========================================================================
   تنسيقات شبكة العدادات (ثابتة ومتناسقة)
   ========================================================================== */
.stats-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.stat-box {
    background: linear-gradient(135deg, rgba(20, 18, 33, 0.8) 0%, rgba(10, 8, 15, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.stat-box.full-width-stat {
    grid-column: span 2;
}

.stat-number {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

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

/* قسم الآراء وحفلة التخرج */
.reviews-and-banner {
    padding: 60px 0;
}

.split-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 30px;
}

.section-sub-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: whitesmoke;
}


.reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.review-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.stars {
    color: var(--neon-orange);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.review-text {
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-bottom: 15px;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #333;
}

.reviewer-info h5 {
    font-size: 0.8rem;
    font-weight: 700;
}

.reviewer-info span {
    font-size: 0.7rem;
    color: var(--text-gray);
}

/* ==========================================================================
   بطاقة حفلة التخرج الأنيقة (تعديل موضع ومظهر علامة الصح)
   ========================================================================== */
.graduation-banner {
    background: linear-gradient(135deg, rgba(157, 48, 255, 0.12), rgba(255, 42, 95, 0.12));
    border: 1px solid var(--neon-purple);
    border-radius: 20px;
    padding: 30px;
    position: relative; /* تفعيل الموضع النسبي لتثبيت العناصر الطائرة بداخلها */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px; /* ضمان مساحة مريحة للكارت */
    transition: all 0.4s ease;
}

/* تأثير تحويم ناعم على الكارت */
.graduation-banner:hover {
    box-shadow: 0 0 25px rgba(157, 48, 255, 0.2);
    border-color: rgba(157, 48, 255, 0.5);
}

.banner-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: var(--neon-pink);
    color: #fff;
    padding: 10px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 0 15px rgba(255, 42, 95, 0.4);
}

.banner-content {
    text-align: right; /* محاذاة النص لليمين */
}

.banner-content h4 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--neon-cyan);
    margin-bottom: 12px;
}

.banner-content p {
    font-size: 0.82rem;
    color: var(--text-gray);
    margin-bottom: 20px;
    max-width: 75%; /* تقليص العرض قليلاً لكي لا يمر النص خلف علامة الصح */
    line-height: 1.6;
}

.banner-content .sub-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--neon-pink);
    margin-bottom: 5px;
}

/* رفع علامة الصح للأعلى وفصلها تماماً عن مسار النص */
.banner-image-placeholder {
    position: absolute;
    top: 25px; /* رفعها للأعلى */
    left: 25px; /* وضعها في أقصى اليسار لمنع ضغط النصوص */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.graduation-banner:hover .banner-image-placeholder {
    transform: scale(1.15) rotate(8deg); /* حركة تفاعلية ممتعة عند التحويم */
}

/* علامة الصح باللون الأخضر الهادئ والمريح للعين */
.grad-visual {
    font-size: 3.2rem;
    color: #2ecc71; /* أخضر هادئ وراقي جداً (Emerald Green) */
    display: flex;
    align-items: center;
    justify-content: center;
    /* توهج أخضر نيون ناعم يندمج مع تدرج البنفسجي */
    filter: drop-shadow(0 0 12px rgba(46, 204, 113, 0.6)) 
            drop-shadow(0 0 25px rgba(157, 48, 255, 0.2));
}

/* شاشات الاستجابة والتجاوب */
@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
    }
    .split-layout {
        grid-template-columns: 1fr;
    }
    .sectors-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .process-line-container {
        grid-template-columns: repeat(3, 1fr);
    }
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }
    .sectors-grid, .process-line-container, .portfolio-grid, .reviews-grid {
        grid-template-columns: 1fr;
    }
}



/* ================== تنسيقات قسم خدماتنا ================== */
.services-custom-section {
    padding: 100px 0;
    position: relative;
}

.services-custom-header {
    text-align: center;
    margin-bottom: 60px;
}

.serv-subtitle {
    color: var(--neon-cyan);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 12px;
}

.serv-title {
    color: var(--text-white);
    font-size: 38px;
    font-weight: 800;
}

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

.serv-card {
    background: rgba(12, 11, 24, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

.serv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 60%, rgba(255, 255, 255, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.serv-card:hover::before {
    opacity: 1;
}

.serv-icon-container {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

/* تخصيص التوهج والألوان لكل كارت */
.cyan-glow .serv-icon-container { background: rgba(0, 240, 255, 0.1); color: var(--neon-cyan); }
.cyan-glow:hover { box-shadow: 0 10px 30px rgba(0, 240, 255, 0.15); border-color: rgba(0, 240, 255, 0.3); }

.pink-glow .serv-icon-container { background: rgba(255, 42, 95, 0.1); color: var(--neon-pink); }
.pink-glow:hover { box-shadow: 0 10px 30px rgba(255, 42, 95, 0.15); border-color: rgba(255, 42, 95, 0.3); }

.orange-glow .serv-icon-container { background: rgba(255, 145, 0, 0.1); color: var(--neon-orange); }
.orange-glow:hover { box-shadow: 0 10px 30px rgba(255, 145, 0, 0.15); border-color: rgba(255, 145, 0, 0.3); }

.red-glow .serv-icon-container { background: rgba(255, 51, 51, 0.1); color: var(--neon-red); }
.red-glow:hover { box-shadow: 0 10px 30px rgba(255, 51, 51, 0.15); border-color: rgba(255, 51, 51, 0.3); }

.yellow-glow .serv-icon-container { background: rgba(255, 234, 0, 0.1); color: var(--neon-yellow); }
.yellow-glow:hover { box-shadow: 0 10px 30px rgba(255, 234, 0, 0.15); border-color: rgba(255, 234, 0, 0.3); }

.blue-glow .serv-icon-container { background: rgba(157, 48, 255, 0.1); color: var(--neon-purple); }
.blue-glow:hover { box-shadow: 0 10px 30px rgba(157, 48, 255, 0.15); border-color: rgba(157, 48, 255, 0.3); }

.serv-card:hover {
    transform: translateY(-8px);
}

.serv-card-title {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.serv-desc {
    color: var(--text-gray);
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.serv-link {
    color: var(--text-white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s ease;
    margin-top: auto;
}

.serv-link i {
    font-size: 11px;
}

.serv-card:hover .serv-link {
    color: var(--neon-pink);
    gap: 12px;
}

@media (max-width: 768px) {
    .services-custom-header .serv-title {
        font-size: 28px;
    }
}


/*======================================
            خدماتنا (بحجم متناسق)
======================================*/

.services-section{
    position: relative;
    padding: 80px 8%; /* تم تقليل الـ Padding الرأسي من 120px */
    background: linear-gradient(180deg,#0d0d14 0%,#131320 100%);
    overflow: hidden;
}

.services-section::before{
    content: "";
    position: absolute;
    width: 400px; /* تم تقليل قطر الإضاءة الخلفية */
    height: 400px;
    background: radial-gradient(circle,#9c6bff15 0%,transparent 70%);
    top: -150px;
    right: -150px;
    pointer-events: none;
}

.services-section::after{
    content: "";
    position: absolute;
    width: 350px; /* تم تقليل قطر الإضاءة الخلفية */
    height: 350px;
    background: radial-gradient(circle,#00d9ff18 0%,transparent 70%);
    bottom: -150px;
    left: -150px;
    pointer-events: none;
}

/*============================*/

.section-heading{
    max-width: 680px; /* تم تقليله قليلاً لتركيز النص */
    margin: auto;
    text-align: center;
    margin-bottom: 45px; /* تم تقليله من 70px */
}

.section-tag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px; /* تقليص الحواف */
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: #d8c5ff;
    font-size: .85rem; /* تم تصغير الخط */
    backdrop-filter: blur(15px);
}

.section-heading h2{
    color: #fff;
    font-size: 2.2rem; /* تم تصغير العنوان الرئيسي من 3rem ليناسب باقي الأقسام */
    margin: 18px 0 12px; /* تقليل المسافات */
    line-height: 1.3;
    font-weight: 800;
}

.section-heading p{
    color: #a7a7b8;
    font-size: .95rem; /* تم تصغيره من 1.05rem */
    line-height: 1.8;
}

/*============================*/

.services-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px; /* تقليص الفراغات بين الكروت من 30px */
}

/*============================*/

.service-card{
    position: relative;
    padding: 28px; /* تقليص حجم الحشوة الداخلية للكارت من 35px */
    border-radius: 20px; /* زوايا أنعم وأصغر متناسقة */
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    transition: .45s;
    overflow: hidden;
}

.service-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.08),
    transparent);
    transition: .7s;
}

.service-card:hover::before{
    left: 120%;
}

.service-card:hover{
    transform: translateY(-8px); /* حركة صعود أنعم وأقل حدة */
    border-color: #9b6dff;
    box-shadow:
    0 15px 35px rgba(0,0,0,.3),
    0 0 20px rgba(155,109,255,.15);
}

/*============================*/

.service-icon{
    width: 68px; /* تم تصغير حجم الأيقونة من 82px ليتلاءم التصميم */
    height: 68px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 22px; /* تقليص الفراغ */
    background: linear-gradient(135deg,#7c4dff,#4f8cff);
    box-shadow: 0 8px 20px rgba(124,77,255,.25);
    transition: .4s;
}

.service-icon i{
    font-size: 26px; /* تصغير حجم الرمز الداخلي من 34px */
    color: #fff;
}

.service-card:hover .service-icon{
    transform: rotate(-6deg) scale(1.05);
}

/*============================*/

.service-card h3{
    color: #fff;
    font-size: 1.25rem; /* تصغير عنوان الخدمة من 1.45rem */
    margin-bottom: 10px;
}

.service-card p{
    color: #b5b5c3;
    line-height: 1.8;
    font-size: .9rem; /* تصغير حجم نص الشرح */
    margin-bottom: 20px; /* تقليص الفراغ */
}

/*============================*/

.service-card a{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: .3s;
}

.service-card a i{
    font-size: 0.85rem;
    transition: .3s;
}

.service-card:hover a{
    color: #b98cff;
}

.service-card:hover a i{
    transform: translateX(-4px);
}

/*============================*/

.featured{
    background: linear-gradient(135deg,#7b42ff,#5d2cff);
    border: none;
}

.featured h3,
.featured p,
.featured a{
    color: #fff;
}

.featured .service-icon{
    background: #fff;
    box-shadow: none;
}

.featured .service-icon i{
    color: #6b39ff;
}

.featured:hover{
    box-shadow: 0 20px 45px rgba(110,70,255,.35);
}

/*============================*/

.service-badge{
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff;
    color: #6b39ff;
    font-size: .75rem;
    padding: 5px 12px;
    border-radius: 30px;
    font-weight: 700;
}

/*=========================================
            Contact Section (تواصل معنا بحجم متناسق)
=========================================*/

.contact-section{
    padding: 80px 8%; /* تم تقليله من 120px بالتناسق مع قسم الخدمات */
    background: #0f1118;
    position: relative;
    overflow: hidden;
}

.contact-section::before{
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle,#8b5cf620 0%,transparent 70%);
    top: -120px;
    right: -120px;
}

.contact-section::after{
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle,#00d4ff18 0%,transparent 70%);
    bottom: -120px;
    left: -120px;
}

/*=======================*/

.contact-container{
    max-width: 1200px; /* تم تصغيره من 1400px ليصبح متلائماً */
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px; /* تقليل المسافة الفاصلة بين الجانبين */
    align-items: center;
}

/*=======================*/

.contact-tag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #a78bfa;
    font-size: .85rem;
    margin-bottom: 20px;
}

.contact-info h2{
    color: #fff;
    font-size: 2.2rem; /* تقليص العنوان ليتناسق تماماً مع عنوان قسم الخدمات */
    margin-bottom: 15px;
    line-height: 1.3;
}

.contact-info p{
    color: #a8acb8;
    line-height: 1.8;
    font-size: .95rem;
    margin-bottom: 30px; /* تقليص المسافة */
}

/*=======================*/

.contact-items{
    display: flex;
    flex-direction: column;
    gap: 18px; /* تقليص الفراغات بين كروت الاتصال */
}

.contact-item{
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    padding: 16px 20px; /* تصغير المساحة الداخلية للكارت */
    border-radius: 16px;
    transition: .35s;
}

.contact-item:hover{
    transform: translateY(-4px);
    border-color: #8b5cf6;
    box-shadow: 0 10px 25px rgba(139,92,246,.12);
}

.contact-icon{
    width: 52px; /* تصغير الأيقونة الجانبية من 65px */
    height: 52px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,#8b5cf6,#3b82f6);
}

.contact-icon i{
    color: #fff;
    font-size: 20px; /* تصغير الأيقونة */
}

.contact-item h4{
    color: #fff;
    font-size: 1rem;
    margin-bottom: 4px;
}

.contact-item span{
    color: #b4b4c5;
    font-size: 0.9rem;
}

/*=======================*/

.contact-social{
    margin-top: 30px;
    display: flex;
    gap: 12px;
}

.contact-social a{
    width: 46px; /* تصغير أزرار السوشيال ميديا من 55px */
    height: 46px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 0.95rem;
    transition: .35s;
}

.contact-social a:hover{
    background: linear-gradient(135deg,#8b5cf6,#3b82f6);
    transform: translateY(-4px);
}

/*=======================*/

.contact-form-box{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px; /* زوايا أنعم */
    padding: 35px; /* تقليص الحشو الداخلي للفورم من 45px */
    backdrop-filter: blur(18px);
}

.input-group{
    margin-bottom: 18px; /* تقليص الفراغات بين الحقول */
}

.input-group input,
.input-group textarea,
.input-group select{
    width: 100%;
    padding: 14px 16px; /* تصغير الفراغ الداخلي للحقول من 18px */
    border: none;
    outline: none;
    border-radius: 12px;
    background: #181b25;
    color: #fff;
    font-size: 14px; /* تصغير حجم خط الكتابة */
    transition: .3s;
}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{
    border: 1px solid #8b5cf6;
    box-shadow: 0 0 12px rgba(139,92,246,.18);
}

.input-group textarea{
    resize: none;
}

/*=======================*/

.contact-btn{
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 14px; /* تقليل سماكة الزرار */
    border-radius: 12px;
    font-size: 15px; /* تصغير حجم الخط */
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg,#8b5cf6,#3b82f6);
    transition: .35s;
}

.contact-btn i{
    margin-left: 6px;
}

.contact-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(139,92,246,.25);
}

/*=========================================
            شاشات التجاوب (Media Queries)
=========================================*/

@media(max-width:1100px){
    .services-grid{
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }
}

@media(max-width:992px){
    .contact-container{
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .contact-info{
        text-align: center;
    }
    .contact-social{
        justify-content: center;
    }
}

@media(max-width:768px){
    .services-section{
        padding: 60px 20px;
    }
    .section-heading h2{
        font-size: 1.8rem;
    }
    .services-grid{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .service-card{
        padding: 24px;
    }
    .service-icon{
        width: 60px;
        height: 60px;
    }
    .service-icon i{
        font-size: 24px;
    }
    
    .contact-section{
        padding: 60px 20px;
    }
    .contact-info h2{
        font-size: 1.8rem;
    }
    .contact-form-box{
        padding: 25px 20px;
    }
    .contact-item{
        flex-direction: column;
        text-align: center;
    }
    .contact-icon{
        margin-bottom: 8px;
    }
}

/* ==========================================
   تنسيقات قسم الباقات والمميزات - Frame X
=========================================== */
.packages-section {
    padding: 80px 20px;
    background-color: #0d0d11;
    color: #fff;
    direction: rtl;
}

.section-title {
    margin-bottom: 40px;
}

.section-title h2 {
    font-size: 2.5rem;
    font-weight: 800;
}

.section-title h2 span {
    color: #ff007f;
}

.section-title p {
    color: #aaa;
    font-size: 1.1rem;
    margin-top: 10px;
}

/* شريط الملاحظة والتوصية */
.custom-budget-note {
    background: linear-gradient(135deg, rgba(255, 0, 127, 0.1), rgba(0, 229, 255, 0.1));
    border: 1px solid rgba(255, 0, 127, 0.3);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 900px;
    margin: 0 auto 50px auto;
}

.note-icon {
    font-size: 2rem;
}

.note-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #ddd;
}

.note-text strong {
    color: #00e5ff;
}

/* الشبكة الخاصة بالكروت */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    align-items: stretch;
}

/* تصميم كرت الباقة */
.package-card {
    background: #16161e;
    border: 1px solid #2a2a38;
    border-radius: 20px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.3s ease;
}

.package-card:hover {
    transform: translateY(-8px);
    border-color: #ff007f;
    box-shadow: 0 10px 30px rgba(255, 0, 127, 0.2);
}

/* الباقة الأكثر طلباً (Gold) */
.package-card.popular {
    border-color: #ff007f;
    background: #1c1827;
    box-shadow: 0 5px 20px rgba(255, 0, 127, 0.15);
}

.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff007f;
    color: #fff;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
}

/* الباقة العليا (Taj) */
.package-card.vip {
    border-color: #ffd700;
    background: linear-gradient(180deg, #1f1b11, #16161e);
}

.vip-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffd700;
    color: #000;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
}

.package-header h3 {
    font-size: 1.8rem;
    margin: 0;
    color: #fff;
}

.package-subtitle {
    font-size: 0.85rem;
    color: #888;
    display: block;
    margin-bottom: 15px;
}

.package-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: #00e5ff;
    margin-bottom: 15px;
}

.package-price span {
    font-size: 0.85rem;
    color: #aaa;
    font-weight: normal;
}

.package-target {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.5;
    margin-bottom: 20px;
}

.package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.package-features li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: #ddd;
}

/* الأزرار داخل الكروت */
.package-btn {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    background: #252533;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.package-btn:hover {
    background: #333346;
}

.package-btn.primary {
    background: #ff007f;
}

.package-btn.primary:hover {
    background: #e0006f;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.4);
}

.package-btn.vip-btn {
    background: #ffd700;
    color: #000;
}

.package-btn.vip-btn:hover {
    background: #e6c200;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* قسم المميزات الإضافية */
.framex-advantages {
    margin-top: 80px;
    background: #13131a;
    border-radius: 20px;
    padding: 40px 25px;
    border: 1px solid #222230;
}

.advantages-title {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 35px;
}

.advantages-title span {
    color: #ff007f;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.adv-card {
    background: #1a1a24;
    padding: 20px;
    border-radius: 15px;
    text-align: right;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.adv-icon {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.adv-card h4 {
    font-size: 1.1rem;
    color: #00e5ff;
    margin-bottom: 10px;
}

.adv-card p {
    font-size: 0.88rem;
    color: #aaa;
    line-height: 1.6;
    margin: 0;
}








/* ==========================================
   مساعد Frame X الذكي - جهة اليسار
   ========================================== */

/* غلاف الزر للتأطير (جهة اليسار) */
.ai-toggle-wrapper {
    position: fixed;
    bottom: 25px;
    left: 25px; /* تم التغيير لليسار */
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* زر الفتح العائم */
.ai-chat-toggle {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff007f, #7928ca);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.5), 0 0 40px rgba(121, 40, 202, 0.3);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-chat-toggle:hover {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 30px rgba(255, 0, 127, 0.8), 0 0 50px rgba(121, 40, 202, 0.5);
}

/* شريط التنبيه العائم للزبون */
.ai-chat-badge {
    background: rgba(18, 18, 24, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 0, 127, 0.4);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    animation: floatBadge 3s ease-in-out infinite;
}

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

/* نافذة المحادثة (جهة اليسار) */
.ai-chat-box {
    position: fixed;
    bottom: 95px;
    left: 25px; /* تم التغيير لليسار */
    width: 380px;
    height: 520px;
    background: rgba(18, 18, 24, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 20px rgba(121, 40, 202, 0.2);
    transition: all 0.3s ease;
}

.hidden {
    display: none !important;
}


/* باقي التنسيقات الداخلية (الهيدر، الرسائل، المدخلات) */
.ai-chat-header {
    background: linear-gradient(90deg, rgba(255, 0, 127, 0.2), rgba(121, 40, 202, 0.2));
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.ai-status-dot {
    width: 8px;
    height: 8px;
    background: #00ff87;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ff87;
}

#ai-chat-close {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #a0a0ab;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ai-chat-close:hover {
    background: rgba(255, 0, 127, 0.2);
    color: #ff007f;
}

.ai-chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-msg {
    padding: 12px 18px;
    border-radius: 18px;
    max-width: 82%;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}

.ai-msg.user {
    background: linear-gradient(135deg, #ff007f, #7928ca);
    margin-right: auto;
    color: #fff;
    border-bottom-left-radius: 4px;
    box-shadow: 0 4px 15px rgba(255, 0, 127, 0.2);
}

.ai-msg.bot {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-left: auto;
    color: #e4e4e7;
    border-bottom-right-radius: 4px;
}

.ai-chat-input {
    display: flex;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 10px;
    align-items: center;
}

.ai-chat-input input {
    flex: 1;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.ai-chat-input input:focus {
    border-color: #ff007f;
}

.ai-chat-input button {
    padding: 12px 20px;
    background: linear-gradient(135deg, #ff007f, #7928ca);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}


/* زر الواتساب التفاعلي والمجهز بنصوص مخصصة */
.ai-whatsapp-btn {
    display: inline-block;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s ease;
}

.ai-whatsapp-btn:hover {
    transform: scale(1.05);
}