@import url(https://fonts.bunny.net/css?family=just-me-again-down-here:400);

:root {
    --primary-color: #1F2A44;
    /* Dark Navy for Corporate feel */
    --accent-color: #C6A75E;
    /* Gold for premium success */
    --text-light: #F8F9FA;
    --text-dark: #333333;
    --bg-gray: #E8DCC8;
    --water-blue: #007BFF;

    --nav-height: -10px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: var(--bg-gray);
    color: var(--text-dark);
    overflow-x: hidden;
}

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

.single-srv-details-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

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

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background: rgba(11, 25, 44, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: 0.3s;
}

.logo h1 {
    color: var(--text-light);
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.logo span {
    color: var(--accent-color);
}



.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.nav-links a:hover {
    color: var(--accent-color);
}

.btn-primary {
    background: var(--accent-color);
    color: var(--primary-color) !important;
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--bg-gray, #E8DCC8);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}


/* --- Dropdown Menu Styles --- */

.nav-links .menu {
    font-size: 1rem;
    color: var(--text-light);
    /* تم التعديل */
    width: fit-content;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links .menu a {
    text-decoration: none;
    color: inherit;
}

.nav-links .menu .link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

/* لون الخلفية عند الـ Hover (الذهبي) */
.nav-links .menu .link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    /* تم التعديل */
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav-links .menu .link svg {
    width: 12px;
    height: 12px;
    fill: var(--text-light);
    /* تم التعديل */
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav-links .menu .item {
    position: relative;
}

/* القائمة المنسدلة نفسها */
.nav-links .menu .item .submenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 100%;
    border-radius: 0 0 10px 10px;
    left: 0;
    min-width: 260px;
    overflow: hidden;
    background-color: var(--primary-color);
    /* تم التعديل لتأخذ لون الموقع الأساسي الداكن */
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1001;
    pointer-events: none;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.nav-links .menu .item:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    border-top: transparent;
    border-color: var(--accent-color);
    /* تم التعديل */
}

.nav-links .menu .item:hover .link {
    color: var(--accent-color);
    /* تم التعديل */
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--accent-color);
    background-color: var(--primary-color);
}

.nav-links .menu .item:hover .link::after {
    transform: scaleX(1);
    transform-origin: right;
}

.nav-links .menu .item:hover .link svg {
    fill: var(--accent-color);
    /* تم التعديل */
    /* transform: rotate(-180deg); */
}

/* تغيير لون النص للعنصر النشط في القائمة المنسدلة عند الـ Hover ليظهر على الخلفية الذهبية */
.submenu .submenu-link.active:hover {
    color: var(--primary-color) !important;
}

.submenu .submenu-item {
    width: 100%;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.submenu .submenu-link {
    display: block;
    padding: 12px 20px;
    width: 100%;
    position: relative;
    text-align: left;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}


.submenu .submenu-item:last-child .submenu-link {
    border-bottom: none;
}

/* تأثير الـ Hover على عناصر القائمة المنسدلة */
.submenu .submenu-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(0);
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    /* تم التعديل */
    z-index: -1;
    transform-origin: left;
    transition: transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.submenu .submenu-link:hover:before {
    transform: scaleX(1);
    transform-origin: right;
}

.submenu .submenu-link:hover {
    color: var(--primary-color);
    /* تم التعديل */
    /* font-weight: 600; */
    /* padding-left: 25px;  */
}

/* تنسيق الرابط النشط (للصفحة المفتوحة حالياً) */
.nav-links a.active {
    color: var(--accent-color) !important;
    text-decoration: underline;
    text-underline-offset: 6px;
    /* لإبعاد الخط عن النص ليكون التصميم أنظف */
    text-decoration-thickness: 2px;
}

/* استثناء زر "تواصل معنا" من الخط السفلي في حال كان هو الصفحة النشطة */
.nav-links a.btn-primary.active {
    text-decoration: underline;
    color: var(--primary-color) !important;

}

/* تعديل بسيط للقائمة المنسدلة لضمان بقاء لون الأيقونة متناسقاً */
.nav-links .menu .link.active svg {
    fill: var(--accent-color);
}


/* تنسيق الرابط المنسدل عندما يكون نشطاً (active) ويتم عمل Hover عليه */
.nav-links .menu .item:hover .link.active {
    background-color: rgba(11, 25, 44, 0.95) !important;
    border: 2px solid var(--accent-color) !important;
    color: var(--accent-color) !important;
    /* للحفاظ على لون النص الذهبي ليظهر على الخلفية الكحلية */
    border-radius: 10px 10px 0 0;
}

/* إخفاء تأثير اللون الذهبي الذي يملأ الخلفية (::after) للرابط النشط فقط */
.nav-links .menu .item:hover .link.active::after {
    display: none;
}

/* التأكد من أن الأيقونة (السهم) تأخذ اللون الذهبي أيضاً عند الـ Hover على الرابط النشط */
.nav-links .menu .item:hover .link.active svg {
    fill: var(--accent-color) !important;
}

/* --- Hamburger Icon Styles --- */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1002;
    /* عشان يفضل فوق القائمة لما تفتح */
}

.hamburger .bar {
    width: 28px;
    height: 3px;
    background-color: var(--text-light);
    border-radius: 5px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* --- Mobile Menu Styles (Screens below 992px) --- */
@media (max-width: 991px) {
    .hamburger {
        display: flex;
        position: relative;
        z-index: 1002;
    }

    .nav-links {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgb(11 25 44);

        display: flex !important;
        flex-direction: column !important;
        justify-content: center;
        align-items: center;

        /* 1. التعديل الأساسي: تأثير الدايرة (ديفولت إنجليزي يمين) */
        clip-path: circle(0px at top right);
        transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1);

        z-index: 1001;
        /* gap: 40px; */
    }

    .nav-links a {
        font-size: 21px;
    }

    /* عكس اتجاه فتح الدايرة في اللغة العربية (عشان تفتح من الشمال) */
    html[lang="ar"] .nav-links {
        clip-path: circle(0px at top left);
    }

    /* كلاس الفتح بيكبر الدايرة لحد ما تغطي الشاشة */
    .nav-links.active {
        clip-path: circle(150vh at top right);
    }

    html[lang="ar"] .nav-links.active {
        clip-path: circle(150vh at top left);
    }

    /* ========================================== */
    /* 2. تأثير التمويجة للينكات (Staggered Wave) */
    /* ========================================== */
    .nav-links li {
        opacity: 0;
        transform: translateY(30px);
        /* بيبدأ مخفي ونازل لتحت شوية */
        /* حركة باونس خفيفة للينكات وهي بتظهر */
        transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* لما القائمة تفتح، اللينكات تظهر وترجع لمكانها الطبيعي */
    .nav-links.active li {
        opacity: 1;
        transform: translateY(0);
    }

    /* تأخير ظهور كل لينك عشان يعمل شكل الموجة (واحدة ورا التانية) */
    .nav-links.active li:nth-child(1) {
        transition-delay: 0.2s;
    }

    .nav-links.active li:nth-child(2) {
        transition-delay: 0.3s;
    }

    .nav-links.active li:nth-child(3) {
        transition-delay: 0.4s;
    }

    .nav-links.active li:nth-child(4) {
        transition-delay: 0.5s;
    }

    .nav-links.active li:nth-child(5) {
        transition-delay: 0.6s;
    }

    /* ========================================== */
    /* باقي كود الهمبرجر والقائمة المنسدلة (بدون تغيير) */
    /* ========================================== */
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background-color: var(--accent-color);
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background-color: var(--accent-color);
    }

    .nav-links .menu .item .submenu {
        position: static;
        min-width: 100%;
        background: transparent;
        border: none;
        /* box-shadow: none; */
        opacity: 1;
        visibility: visible;
        height: auto;
        padding-top: 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
    }

    /* تصغير حجم خط الخدمات الفرعية قليلاً لتمييزها عن اللينكات الرئيسية */
    .nav-links .menu .item .submenu .submenu-link {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
        /* لون أهدى شوية */
        text-align: center;
        border-bottom: none;
        /* إزالة الخط السفلي في الموبايل ليكون الشكل أنظف */
        padding: 8px 20px;
    }

    .nav-links .menu .item .submenu .submenu-link:hover {
        background-color: var(--primary-color) !important;
        color: var(--accent-color) !important;
    }

    /* إخفاء السهم في الموبايل لأن القائمة مفتوحة بالفعل */
    .nav-links .menu .link svg {
        display: none;
    }

    /* إلغاء تأثيرات الـ Hover بتاعت الديسكتوب على الموبايل */
    .nav-links .menu .item:hover .link {
        background: transparent;
        border: none;
    }

    .nav-links .menu .item:hover .link::after {
        display: none;
    }


    .nav-links .menu .item.mobile-open .submenu {
        opacity: 1;
        visibility: visible;
        height: auto;
        padding-top: 15px;
    }


    .nav-links .menu .item:hover .link svg {
        transform: none;
        fill: var(--text-light);
    }

    .nav-links .menu .item.mobile-open .link svg {
        transform: rotate(-180deg);
        fill: var(--accent-color);
    }

    .hero {
        min-height: 112vh !important;
    }

    .hero-content {
        margin-top: -100px !important;
    }

    .hero-badge {
        font-size: 11px !important;
    }

    .value-card-pro {
        padding: 50px 10px !important;
        border-color: rgba(212, 175, 55, 0.4) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(212, 175, 55, 0.05) !important;

    }


    .value-card-pro .icon-box {
        background: var(--accent-color) !important;
        transform: scale(1.1) !important;
    }

    .value-card-pro .icon-box i {
        color: var(--primary-color) !important;
    }

    .value-card-pro .pulse-ring {
        animation: pulseIcon 1.5s ease-out infinite !important;
    }

    .value-card-pro .watermark-number {
        color: rgba(212, 175, 55, 0.08) !important;
        transform: scale(1.1) rotate(-5deg) !important;
    }

}



html[dir="rtl"] .submenu .submenu-link:hover {
    padding-left: 20px;
    padding-right: 25px;
}

html[dir="rtl"] body {
    font-family: 'Tajawal', sans-serif;
}

html[dir="rtl"] .logo h1 {
    font-family: 'Poppins', sans-serif;
}

html[dir="rtl"] .nav-links {
    padding-right: 0;
}

html[dir="rtl"] .hero h2 {
    font-family: 'Tajawal', sans-serif;
    font-weight: 800;
}

html[dir="rtl"] .section-title::after {
    right: 50%;
    transform: translateX(50%);
    left: auto;
}

html[dir="rtl"] .btn-primary {
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
}

html[dir="rtl"] .submenu .submenu-link::before {
    left: auto;
    right: 0;
    transform-origin: right;
}

html[dir="rtl"] .submenu .submenu-link:hover:before {
    transform-origin: left;
}

html[dir="rtl"] .submenu .submenu-link {
    text-align: right;
}

html[dir="rtl"] .nav-links .menu .item .submenu {
    left: auto;
    right: 0;
}


/* عكس ترتيب عناصر القائمة في اللغة العربية */
/* html[lang="ar"] .nav-links {
    flex-direction: row-reverse;
} */


html[lang="ar"] .nav-links .menu .item .submenu {
    text-align: right;
}


/* --- Modern Hero Section --- */
/* --- Hero Section & Video Background --- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: var(--text-light);
    padding: 100px 20px 0;
    overflow: hidden;
    /* مسحنا صورة الخلفية من هنا لأننا هنستخدم فيديو */
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* نضمن إن الفيديو تحت كل حاجة */
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* لضمان إن الفيديو يملأ الشاشة بدون تشوه */
    object-position: center;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* تدرج لوني كحلي قوي ناحية النص ويشف ناحية الفيديو */
    background: linear-gradient(to right, rgba(11, 25, 44, 0.95) 10%, rgba(11, 25, 44, 0.6) 60%, rgba(11, 25, 44, 0.2) 100%);
}

/* رفع المحتوى فوق طبقة الفيديو */
.hero-wrapper,
.scroll-indicator {
    position: relative;
    z-index: 2;
}

/* تعديل التدرج في الموبايل ليكون من الأعلى للأسفل */
@media (max-width: 992px) {
    .video-overlay {
        background: linear-gradient(to bottom, rgba(11, 25, 44, 0.95) 30%, rgba(11, 25, 44, 0.6) 80%, rgba(11, 25, 44, 0.2) 100%);
    }
}

.hero-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 40px;
    z-index: 2;
}

.hero-content {
    max-width: 650px;
}

/* شارة مميزة فوق العنوان */
.hero-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.hero-badge i {
    margin-right: 8px;
}

.hero h2 {
    font-size: 4rem;
    /* تكبير العنوان لجعله أقوى */
    font-weight: 800;
    margin-bottom: 25px;
    color: var(--white);
    line-height: 1.2;
}

/* تلوين جزء من العنوان بالذهبي */
.hero h2 span {
    color: var(--accent-color);
}

.hero p {
    font-size: 1.15rem;
    margin-bottom: 40px;
    line-height: 1.8;
    color: #e0e0e0;
    /* لون رمادي فاتح لراحة العين */
}

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

.btn-outline {
    background: transparent;
    color: var(--text-light);
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid var(--text-light);
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-outline:hover {
    background: var(--text-light);
    color: var(--primary-color);
}

/* --- Glassmorphism Stat Card --- */
.hero-visual {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.glass-stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 30px;
    border-radius: 20px;
    width: 320px;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
    /* حركة الطفو المستمرة */
    animation: float 6s ease-in-out infinite;
}

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

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

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

.stat-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: rgba(212, 175, 55, 0.2);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
}

.stat-info h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 5px;
}

.stat-info span {
    font-size: 0.9rem;
    color: #bbb;
}

.glass-divider {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

/* --- Mouse Scroll Indicator --- */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.7;
    transition: 0.3s;
}

.scroll-indicator:hover {
    opacity: 1;
}

.mouse {
    width: 26px;
    height: 42px;
    border: 2px solid var(--text-light);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    padding-top: 5px;
}

.wheel {
    width: 4px;
    height: 8px;
    background: var(--accent-color);
    border-radius: 2px;
    animation: scrollWheel 2s ease infinite;
}

@keyframes scrollWheel {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

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

/* --- Responsive adjustments --- */
@media (max-width: 992px) {
    .hero-wrapper {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    /* في الموبايل نخلي التدرج من فوق لتحت عشان الصورة تظهر تحت النص */
    .hero {
        background: linear-gradient(to bottom, rgba(11, 25, 44, 0.95) 30%, rgba(11, 25, 44, 0.6) 80%, rgba(11, 25, 44, 0.2) 100%),
            url('https://images.unsplash.com/photo-1581094288338-2314dddb7ece?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero h2 {
        font-size: 2.8rem;
    }

    .hero-visual {
        justify-content: center;
        margin-top: 30px;
    }

    .about-bento {
        padding: 25px 0 !important;
    }
}

/* About Section */
/* --- Modern About Section --- */
.about {
    padding: 120px 0;
    background: #ffffff;
    overflow: hidden;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Image Composition (الصور المتداخلة) */
.about-images {
    position: relative;
    padding-right: 40px;
    padding-bottom: 40px;
}

.img-main {
    width: 90%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: 0.5s ease;
}

.img-secondary {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
    border-radius: 20px;
    border: 10px solid #fff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    transition: 0.5s ease;
}

/* تأثير الـ Parallax عند مرور الماوس */
.about-images:hover .img-main {
    transform: scale(1.02);
}

.about-images:hover .img-secondary {
    transform: scale(1.05) translateY(-10px);
}

/* شارة الخبرة الطائرة */
.experience-badge {
    position: absolute;
    top: 30px;
    left: -30px;
    background: var(--primary-color);
    padding: 20px 25px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 30px rgba(11, 25, 44, 0.2);
    border-left: 4px solid var(--accent-color);
    animation: float 5s ease-in-out infinite;
}

.experience-badge .number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-color);
    line-height: 1;
}

.experience-badge .text {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
}

/* Content Styling (تنسيق النصوص والمميزات) */
.sub-title {
    color: var(--accent-color);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title.left-align {
    text-align: left;
    margin-bottom: 25px;
}

.section-title.left-align::after {
    left: 0;
    transform: none;
}

.about-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 30px;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 35px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.feature-icon {
    width: 35px;
    height: 35px;
    background: rgba(212, 175, 55, 0.15);
    color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.mt-4 {
    margin-top: 20px;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
    }

    .experience-badge {
        left: 10px;
        top: 10px;
        padding: 15px;
    }

    .img-secondary {
        width: 50%;
    }
}

/* --- Bento Box About Section --- */
.about-bento {
    padding: 120px 0;
    background: var(--bg-gray);
}

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

.sub-title.justify-center {
    justify-content: center;
}

/* تصميم الشبكة (Grid) */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(200px, auto));
    gap: 20px;
}

/* تنسيق الصناديق العامة */
.bento-box {
    background: #fff;
    border-radius: 24px;
    padding: 35px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bento-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* توزيع أحجام الصناديق */
.intro-box {
    grid-column: span 2;
    grid-row: span 2;
    justify-content: flex-start;
}

.visual-box {
    grid-column: span 1;
    grid-row: span 2;
    padding: 0;
    cursor: pointer;
}

.stat-box {
    grid-column: span 1;
    grid-row: span 1;
}

.quality-box {
    grid-column: span 1;
    grid-row: span 1;
}

.safety-box {
    grid-column: span 2;
    grid-row: span 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* تفاصيل صندوق المقدمة (Intro) */
.intro-box h3 {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1.3;
}

.intro-box h3 span {
    color: var(--accent-color);
}

.intro-box p {
    color: #666;
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 30px;
}

.bento-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.1rem;
    transition: 0.3s;
}

.bento-link:hover {
    color: var(--accent-color);
    gap: 15px;
    /* حركة السهم */
}

/* تفاصيل صندوق الصورة (Visual) */
.visual-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s ease;
}

.visual-box:hover img {
    transform: scale(1.1);
}

.visual-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(11, 25, 44, 0.8), transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-btn-fake {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: 0.3s;
}

.visual-box:hover .play-btn-fake {
    background: var(--accent-color);
    transform: scale(1.1);
}

/* الصناديق الملونة */
.dark-box {
    background: var(--primary-color);
    color: #fff;
}

.dark-box .counter {
    font-size: 3.5rem;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.dark-box .watermark-icon {
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 8rem;
    opacity: 0.05;
    color: #fff;
}

.gold-box {
    background: var(--accent-color);
    color: var(--primary-color);
}

.gold-box .icon-wrapper {
    width: 45px;
    height: 45px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.gold-box h4 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.gold-box p {
    font-size: 0.95rem;
    opacity: 0.9;
}

.safety-content h4 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.safety-icon {
    font-size: 3rem;
    color: #ccc;
    transition: 0.3s;
}

.safety-box:hover .safety-icon {
    color: var(--accent-color);
    transform: rotate(10deg);
}

/* استجابة الشاشات (Responsive) */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .visual-box {
        grid-column: span 2;
        grid-row: span 1;
        height: 300px;
    }

    .safety-box {
        grid-column: span 2;
    }
}

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

    .intro-box,
    .visual-box,
    .stat-box,
    .quality-box,
    .safety-box {
        grid-column: span 1;
        grid-row: auto;
    }
}



/* --- Premium Core Values Section --- */
.values-premium {
    padding: 120px 0;
    background: var(--primary-color);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* الشبكة الهندسية في الخلفية (دليل الدقة) */
.industrial-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 2px, transparent 2px);
    background-size: 40px 40px;
    z-index: -1;
}

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

.values-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

/* تصميم الكارت الاحترافي */
.value-card-pro {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
}

/* تأثير الـ Spotlight (الضوء الذهبي) المخفي وبيظهر مع الـ Hover */
.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    pointer-events: none;
}

.value-card-pro:hover {
    transform: translateY(-15px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(212, 175, 55, 0.05);
}

.value-card-pro:hover .card-glow {
    opacity: 1;
}

/* تنسيق الأيقونة مع تأثير النبض (Pulse) */
.icon-box {
    position: relative;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: 0.4s ease;
}

.icon-box i {
    font-size: 2rem;
    color: var(--accent-color);
    z-index: 2;
}

.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 2px solid var(--accent-color);
    opacity: 0;
    z-index: 1;
}

.value-card-pro:hover .icon-box {
    background: var(--accent-color);
    transform: scale(1.1);
}

.value-card-pro:hover .icon-box i {
    color: var(--primary-color);
}

.value-card-pro:hover .pulse-ring {
    animation: pulseIcon 1.5s ease-out infinite;
}

@keyframes pulseIcon {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
}

/* تنسيق النصوص داخل الكارت */
.card-content h3 {
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 700;
}

.card-content p {
    color: #a0aabf;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* الرقم المائي (The Out of the Box Touch) */
.watermark-number {
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 8rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    transition: 0.5s ease;
    z-index: -1;
}

.value-card-pro:hover .watermark-number {
    color: rgba(212, 175, 55, 0.08);
    transform: scale(1.1) rotate(-5deg);
}

/* --- SERVICES EXPANSION SECTION --- */
.services-luxury {
    padding: 16px 20px;
    background: var(--bg-gray);
    overflow: hidden;
}

.services-container {
    display: flex;
    width: 100%;
    height: 550px;
    /* ارتفاع ثابت للسكشن يعطي مساحة جيدة للصور */
    margin: 0 auto;
    gap: 15px;
    /* مسافة بسيطة بين الكروت */
}

/* الكارت الأساسي */
.srv-card-expand {
    position: relative;
    flex: 0.5;
    /* الحجم الافتراضي (مغلق) */
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid rgba(11, 25, 44, 0.1);
    background: var(--primary-color);
}

/* صورة الخلفية */
.srv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    filter: grayscale(100%);
    transition: 0.7s;
}

/* محتوى الكارت (الظاهر من تحت) */
.srv-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    background: linear-gradient(to top, rgba(11, 25, 44, 0.95), transparent);
}

/* الأيقونة (فخمة باللون الذهبي) */
.srv-icon {
    font-size: 1.5rem;
    color: var(--text-light);
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: 0.4s ease;
    backdrop-filter: blur(5px);
}

/* العنوان القصير (يظهر عندما يكون الكارت مغلقاً) */
.short-title {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    position: absolute;
    bottom: 120px;
    /* مرفوع قليلاً عن الأيقونة */
    left: 0;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    opacity: 1;
    transition: 0.3s;
    font-weight: 600;
}

/* المعلومات المخفية (تظهر عند التمدد) */
.expanded-info {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease;
    display: none;
    width: 100%;
}

.expanded-info h3 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--accent-color);
    display: inline-block;
    padding-bottom: 5px;
}

.expanded-info p {
    color: #ddd;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.srv-explore {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.srv-explore:hover {
    color: #fff;
    gap: 12px;
}

/* --- INTERACTION (HOVER & ACTIVE) --- */

/* عند الوقوف بالماوس يتمدد الكارت */
.srv-card-expand:hover,
.srv-card-expand.active {
    flex: 3;
    border-color: var(--accent-color);
    box-shadow: 0 10px 40px rgba(11, 25, 44, 0.4);
}

.srv-card-expand:hover .srv-bg,
.srv-card-expand.active .srv-bg {
    opacity: 0.8;
    filter: grayscale(0%);
    transform: scale(1.05);
    /* Zoom in effect */
}

/* إخفاء العنوان القصير */
.srv-card-expand:hover .short-title,
.srv-card-expand.active .short-title {
    opacity: 0;
    transform: translateY(20px);
}

/* إظهار التفاصيل الكبيرة */
.srv-card-expand:hover .expanded-info,
.srv-card-expand.active .expanded-info {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

/* تلوين الأيقونة */
.srv-card-expand:hover .srv-icon,
.srv-card-expand.active .srv-icon {
    color: var(--primary-color);
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.1);
    margin-bottom: 15px;
}

/* --- RESPONSIVE (MOBILE) --- */
/* --- RESPONSIVE (MOBILE) --- */
@media (max-width: 992px) {
    .services-container {
        flex-direction: column;
        gap: 20px;
        /* تم التعديل لتطابق الكود الأول */
        height: auto !important;
        /* تم زيادة الطول هنا عشان يستوعب 5 كروت مع تمدد واحد فيهم لـ 350 بيكسل */
        overflow: hidden;
        padding: 0 10px;
        /* تم التعديل لتطابق الكود الأول */
    }

    .srv-card-expand {
        /* إلغاء الـ flex المبدئي والاعتماد على الارتفاع التلقائي مثل الكود الأول */
        flex: initial;
        height: 140px;
        /* ارتفاع الكارت وهو مغلق */
    }

    .short-title {
        bottom: auto;
        top: 30px;
        right: 80px;
        /* تم التعديل لتطابق الكود الأول */
        left: auto;
        text-align: right;
        width: auto;
    }

    .srv-icon {
        position: absolute;
        top: 20px;
        right: 20px;
        /* تم التعديل لتطابق الكود الأول */
        margin: 0;
    }

    /* عند الضغط في الموبايل (نفس اللوجيك بتاع الكود الأول بالـ height) */
    .srv-card-expand:hover,
    .srv-card-expand:focus,
    .srv-card-expand.active {
        flex: initial;
        /* منع تأثير الديسكتوب */
        height: 655px !important;
        /* يتمدد لطول ثابت */
    }

    .expanded-info {
        margin-top: 140px;
    }

    .clients-section {
        padding: 40px 0 !important;
    }
}

/* --- تعديلات دعم اللغة العربية (عشان تتناسب مع اللوجيك الجديد) --- */
html[lang="ar"] .short-title {
    right: 80px;
    text-align: right;
}

html[lang="ar"] .srv-icon {
    right: 20px;
    left: auto;
}

html[lang="ar"] .srv-explore i {
    transform: rotate(180deg);
}

/* دعم العربية للـ Title في الموبايل */
html[lang="ar"] .short-title {
    left: auto;
    right: 20px;
    text-align: right;
}

html[lang="ar"] .srv-icon {
    right: auto;
    left: 20px;
}

html[lang="ar"] .srv-explore i {
    transform: rotate(180deg);
}


/* --- تصميم صندوق الوصف (Highlighted Info Box) --- */
.desc-box {
    position: relative;
    /* تدرج لوني خفيف جداً يبرز النص */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
    border-left: 3px solid var(--accent-color);
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 0 10px 10px 0;
    backdrop-filter: blur(5px);
}

.desc-box p {
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0;
    /* لإلغاء الهوامش الافتراضية */
}

/* --- تصميم علامات الثقة (Tags / Badges) --- */
.srv-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.tag {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: 0.3s ease;
}

/* حركة بسيطة للـ Tags عند مرور الماوس عليها */
.tag:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.tag i {
    color: var(--accent-color);
    font-size: 0.85rem;
}

/* --- دعم اللغة العربية (RTL) --- */
html[lang="ar"] .desc-box {
    /* عكس اتجاه التدرج والحدود للعربي */
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
    border-left: none;
    border-right: 3px solid var(--accent-color);
    border-radius: 10px 0 0 10px;
}


/* --- Clients & Partners Section --- */
.clients-section {
    padding: 100px 0;
    background: #ffffff;
    /* خلفية بيضاء لتوضيح اللوجوهات */
    overflow: hidden;
}

/* حاوية التمرير مع تأثير التلاشي (Fade-out) على الجوانب */
.marquee-container {
    margin-top: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
    /* إخفاء الأطراف بتدرج شفاف ليعطي إيحاء سينمائي */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    /* حركة لانهائية (20 ثانية) */
    animation: scroll-marquee 25s linear infinite;
    align-items: center;
    gap: 80px;
    /* مسافة بين اللوجوهات */
    padding: 0 40px;
}

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

/* تنسيق اللوجوهات */
.client-logo {
    width: 180px;
    /* عرض موحد */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* تحويل الصور لأبيض وأسود وشفافة قليلاً (احترافية الشركات) */
    /* filter: grayscale(100%) opacity(0.5); */
    transition: all 0.4s ease;
    cursor: pointer;
}

/* عودة الألوان الأصلية عند مرور الماوس */
.client-logo img:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

/* كي فريمز الحركة */
@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        /* بنسحب لنص المسافة بالظبط عشان يتكرر بفضل المجموعة التانية المكررة */
        transform: translateX(calc(-50% - 40px));
    }
}

/* دعم اتجاه الحركة في اللغة العربية */
html[lang="ar"] .marquee-track {
    /* في العربي بنبدأ من الشمال لليمين عشان نعكس الحركة */
    animation: scroll-marquee-rtl 25s linear infinite;
}

@keyframes scroll-marquee-rtl {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(50% + 40px));
    }
}

/* استجابة الموبايل */
@media (max-width: 768px) {
    .client-logo {
        width: 140px;
    }

    .marquee-track {
        gap: 50px;
    }
}



/* Footer */
footer {
    background: var(--primary-color);
    color: var(--text-light);
    padding: 60px 0 20px;
}

footer h2 {
    color: var(--accent-color);
    margin-bottom: 10px;
}

.copyright {
    margin-top: 40px;
    font-size: 0.9rem;
    color: #888;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    /* يمكن إضافة قائمة هامبرغر لاحقاً */
    .hero h2 {
        font-size: 2.5rem;
    }
}

/* --- Language Switcher Button --- */
.lang-switch {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lang-switch:hover {
    background: var(--accent-color);
    color: var(--primary-color) !important;
}





/* ----------------- LUXURY FOOTER SECTION --------------------------- */
.footer-luxury {
    background: var(--primary-color);
    position: relative;
    padding: 100px 0 20px;
    color: var(--text-light);
    overflow: hidden;
    z-index: 1;
}

/* إضاءة ذهبية خفيفة من الأعلى تعطي إحساساً بالفخامة */
.footer-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: radial-gradient(circle, var(--accent-color) 0%, transparent 100%);
    box-shadow: 0 0 30px 2px var(--accent-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 50px;
    margin-bottom: 60px;
}

/* --- العمود الأول (Brand) --- */
.footer-luxury .logo h2 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 20px;
}

.footer-luxury .logo span {
    color: var(--accent-color);
}

.footer-desc {
    color: #a0aabf;
    line-height: 1.8;
    margin-bottom: 25px;
    max-width: 400px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.social-icons a:hover {
    background: var(--accent-color);
    color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}

/* --- العمود الثاني والثالث (العناوين) --- */
.footer-luxury h3 {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-luxury h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: var(--accent-color);
}

/* --- الروابط السريعة --- */
.footer-links ul {
    list-style: none;
    padding: 0;
}

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

.footer-links ul li a {
    color: #a0aabf;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.footer-links ul li a i {
    font-size: 0.8rem;
    color: var(--accent-color);
    transition: 0.3s;
}

.footer-links ul li a:hover {
    color: var(--accent-color);
    transform: translateX(5px);
}

/* --- معلومات التواصل --- */
.contact-list {
    list-style: none;
    padding: 0;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: rgba(212, 175, 55, 0.1);
    color: var(--accent-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

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

.contact-text strong {
    color: #fff;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 0.95rem;
}

.contact-text span {
    color: #a0aabf;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- الجزء السفلي وحقوق Ternpress --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #888;
    font-size: 0.9rem;
    flex-direction: column;
}

.developer-credit {
    text-transform: capitalize;
}

.ternpress-link {
    color: var(--text-light);
    font-weight: 800;
    text-transform: lowercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: 0.3s;
    font-family: 'Poppins', sans-serif;
    position: relative;
}

/* تأثير لمعان خفيف على اسم Ternpress */
.ternpress-link:hover {
    color: var(--accent-color);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* --- دعم اللغة العربية (RTL) --- */
html[lang="ar"] .footer-luxury h3::after {
    left: auto;
    right: 0;
}

html[lang="ar"] .footer-links ul li a i {
    transform: rotate(180deg);
    /* عكس السهم للعربي */
}

html[lang="ar"] .footer-links ul li a:hover {
    transform: translateX(-5px);
    /* حركة لليسار في العربي */
}

/* --- استجابة الموبايل --- */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

a.contact-link {
    text-decoration: none;
    color: #a0aabf;
}

/****************************************ABOUT-USS************************************* /
 
/* =========================================
   HERO VIDEO SECTION CSS
========================================= */

/* الحاوية الرئيسية للسكشن */
.hero-video-wrapper {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--primary-color);
    /* لون كحلي احتياطي */
}

/* ضبط الفيديو ليملأ الشاشة بالكامل (بدون تشوه) */
.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    z-index: 1;
    object-fit: cover;
}

/* الطبقة الداكنة (تدرج لوني فخم من الكحلي) */
.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(11, 25, 44, 0.6) 0%, rgba(11, 25, 44, 0.9) 100%);
    z-index: 2;
}

/* حاوية النص في المنتصف */
.hero-video-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    padding: 0 20px;
    margin: 0 auto;
    margin-top: 119px;
}

/* تنسيق العنوان الفرعي */
.hero-sub {
    color: var(--accent-color);
    /* اللون الذهبي */
    letter-spacing: 4px;
    margin-bottom: 20px;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 600;
}

/* تنسيق العنوان الرئيسي (اللي بيتكتب) */
.hero-main-title {
    color: #fff;
    font-size: 4.5rem;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.3;
    min-height: 110px;
    /* لضمان عدم اهتزاز الصفحة أثناء الكتابة */
}

/* تنسيق الوصف */
.hero-desc {
    color: #e2e8f0;
    font-size: 1.25rem;
    margin-bottom: 40px;
    line-height: 1.8;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* تنسيق الأزرار (توزيعها في المنتصف) */
.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

/* أنيميشن مؤشر الكتابة (Cursor) */
.cursor {
    color: var(--accent-color);
    font-weight: 300;
    animation: blinkCursor 0.8s infinite;
}

@keyframes blinkCursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* =========================================
   التجاوب مع الشاشات (Responsive)
========================================= */
@media (max-width: 992px) {
    .hero-main-title {
        font-size: 28px !important;
        min-height: 90px;
    }

    .premium-stats-section {
        padding: 45px 0 !important;
    }

}

@media (max-width: 768px) {
    .hero-sub {
        font-size: 19px;
        letter-spacing: 2px;
    }

    .hero-main-title {
        font-size: 2.2rem;
        min-height: 70px;
        margin-bottom: 15px;
    }

    .hero-desc {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    /* في الموبايل الأزرار تملأ العرض */
    .hero-actions a {
        width: 100%;
        text-align: center;
    }

    #about-sec-org {
        padding: 21px 0 !important;
    }

}

/* =========================================
   PREMIUM STATS SECTION (Glassmorphism & Neon)
========================================= */
.premium-stats-section {
    background-image: radial-gradient(circle at center, rgba(11, 25, 44, 1) 0%, rgba(5, 10, 20, 1) 100%);
    padding: 100px 0;
}

.stats-premium-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 50px;
}

/* الكروت الزجاجية (Glassmorphism) */
.stat-premium-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* تأثير التوهج (Neon Glow) عند وقوف الماوس */
.stat-premium-card:hover {
    transform: translateY(-10px);
    border-color: rgba(212, 175, 55, 0.3);
    /* لون ذهبي خفيف */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(212, 175, 55, 0.1) inset;
}

/* =========================================
   تصميم الحلقات الدائرية المضيئة (SVG Rings)
========================================= */
.stat-ring-wrapper {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 25px;
}

.stat-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    /* عشان الرسم يبدأ من فوق مش من الجنب */
}

.ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 4;
}

.ring-progress {
    fill: none;
    stroke: var(--accent-color);
    /* اللون الذهبي */
    stroke-width: 6;
    stroke-linecap: round;
    /* محيط الدائرة = 2 * pi * r = 2 * 3.14 * 45 = 283 تقريباً */
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    /* هتكون مخفية في البداية وتترسم بالجافاسكريبت */
    /* filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6)); توهج النيون */
}

/* =========================================
   النصوص داخل الحلقات
========================================= */
.stat-value-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.stat-value {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    color: var(--accent-color);
}

/* لون متدرج للنص لزيادة الفخامة */
.gradient-text {
    background: linear-gradient(135deg, #fff 0%, #a0aabf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-title {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.stat-desc {
    color: #8892b0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* كارت الهايلايت (المميز) */
.highlight-card {
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(212, 175, 55, 0.2);
}

.highlight-card .ring-progress {
    stroke: #fff;
    /* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); */
}

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

    .stat-premium-card {
        padding: 30px 20px;
    }
}


/* =========================================
   تأثير الأيقونات العائمة في الخلفية (Floating Icons)
========================================= */
.floating-icons-container {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* فوق الخلفية الكحلي وتحت الكروت (الكروت واخدة z-3) */
    overflow: hidden;
    pointer-events: none;
    /* مهم جداً: عشان الماوس ميقفش عليها ويعطل الكروت */
}

.float-icon {
    position: absolute;
    /* لون أبيض مع شفافية 3% بس عشان تكون خفيفة جداً ومريحة للعين */
    color: rgba(255, 255, 255, 0.03);
    animation: floatingAnim 15s infinite ease-in-out;
}

/* توزيع الأيقونات بأحجام وأماكن وسرعات مختلفة عشان تبان طبيعية */
.icon-1 {
    top: 15%;
    left: 10%;
    font-size: 8rem;
    animation-duration: 18s;
}

.icon-2 {
    top: 75%;
    left: 85%;
    font-size: 5rem;
    animation-duration: 22s;
    animation-delay: -5s;
}

.icon-3 {
    top: 45%;
    left: 50%;
    font-size: 12rem;
    animation-duration: 30s;
    animation-delay: -10s;
}

.icon-4 {
    top: 80%;
    left: 15%;
    font-size: 6rem;
    animation-duration: 20s;
    animation-delay: -2s;
}

.icon-5 {
    top: 20%;
    left: 80%;
    font-size: 9rem;
    animation-duration: 25s;
    animation-delay: -8s;
}

.icon-6 {
    top: 55%;
    left: 5%;
    font-size: 7rem;
    animation-duration: 24s;
    animation-delay: -4s;
}

.icon-7 {
    top: 10%;
    left: 45%;
    font-size: 4rem;
    animation-duration: 16s;
    animation-delay: -12s;
}

.icon-8 {
    top: 85%;
    left: 55%;
    font-size: 6.5rem;
    animation-duration: 28s;
    animation-delay: -7s;
}

/* حركة الطفو (طلوع ونزول مع دوران خفيف) */
@keyframes floatingAnim {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    33% {
        transform: translateY(-40px) rotate(15deg);
    }

    66% {
        transform: translateY(20px) rotate(-10deg);
    }

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



/* =========================================
   مشاريع شكلت هويتنا (Featured Masterpieces)
========================================= */
.masterpieces-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;

}

.masterpiece-card {
    position: relative;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* حاوية الصورة الأساسية لعمل الـ Parallax */
.parallax-img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.parallax-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* بنكبر الصورة شوية عشان لما تتحرك يمين وشمال متبينش فراغ */
    transform: scale(1.15);
    transition: transform 0.2s ease-out;
    /* حركة ناعمة وسريعة تتجاوب مع الماوس */
}

/* طبقة اللون المتدرج عشان الكلام يكون واضح */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(11, 25, 44, 0.95) 0%, rgba(11, 25, 44, 0.3) 50%, transparent 100%);
    z-index: 2;
    transition: background 0.4s ease;
}




html[lang="ar"] .card-content {
    text-align: right;
}

html[lang="en"] .card-content {
    text-align: left;
}

.masterpiece-card:hover .card-content {
    transform: translateY(0);
    /* الكارت بيترفع سنة لفوق لما تقفي عليه */
}

.project-location {
    display: inline-block;
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.project-title {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
}

.project-metric {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 8px 15px;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* استجابة الموبايل */
@media (max-width: 992px) {
    .masterpieces-grid {
        grid-template-columns: 1fr;
    }

    .masterpiece-card {
        height: 350px;
    }
}



/* =========================================
   الهيكل التنظيمي (Cyber-Node Structure)
========================================= */
.cyber-tree-container {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    /* عشان لو الشاشة صغيرة يعمل سكرول بالعرض بدل ما يتلخبط */
    padding: 20px 0 50px;
    direction: ltr;
}

/* تنسيق خطوط الشجرة */
.cyber-tree ul {
    padding-top: 30px;
    position: relative;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    padding-left: 0;
}

.cyber-tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 30px 10px 0 10px;
    transition: all 0.5s;
}

/* الخطوط الرأسية والأفقية */
.cyber-tree li::before,
.cyber-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    /* لون الخط العادي */
    width: 50%;
    height: 30px;
    transition: border-color 0.4s ease;
}

.cyber-tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.cyber-tree li:only-child::after,
.cyber-tree li:only-child::before {
    display: none;
}

.cyber-tree li:only-child {
    padding-top: 0;
}

.cyber-tree li:first-child::before,
.cyber-tree li:last-child::after {
    border: 0 none;
}

.cyber-tree li:last-child::before {
    border-right: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 5px 0 0;
}

.cyber-tree li:first-child::after {
    border-radius: 5px 0 0 0;
}

/* الخط النازل للابن */
.cyber-tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    width: 0;
    height: 30px;
    transform: translateX(-50%);
    transition: border-color 0.4s ease;
}

/* =========================================
   تصميم كبسولات البيانات (Data Nodes)
========================================= */
.org-node {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 25px;
    border-radius: 12px;
    display: inline-block;
    min-width: 200px;
    position: relative;
    cursor: default;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* نقطة النظام التفاعلية (System Status Dot) */
.node-status-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background-color: #2ecc71;
    /* لون أخضر (Online) */
    border-radius: 50%;
    box-shadow: 0 0 10px #2ecc71;
    animation: pulseDot 2s infinite;
}

html[lang="en"] .node-status-dot {
    right: auto;
    left: 10px;
}

@keyframes pulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

.org-node h3 {
    color: #fff;
    font-size: 1.1rem;
    margin: 10px 0 5px;
    font-weight: 700;
}

.org-node p {
    color: var(--accent-color);
    font-size: 0.85rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* كبسولة المدير العام */
.leader-node {
    border-color: rgba(212, 175, 55, 0.4);
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    min-width: 250px;
    padding: 25px 30px;
}

.leader-node .node-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--accent-color);
}

.leader-node h3 {
    font-size: 1.3rem;
}

/* تأثير الهوفر: لما تقفي على كارت، الكارت والخطوط اللي فوقه بتنور دهبي */
.org-node:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 175, 55, 0.2) inset;
}

.cyber-tree li:hover>.org-node {
    border-color: var(--accent-color);
}

.cyber-tree li:hover>.org-node p {
    color: #fff;
}

.cyber-tree li:hover::before,
.cyber-tree li:hover::after,
.cyber-tree li:hover>ul::before,
.cyber-tree li:hover>ul>li::before,
.cyber-tree li:hover>ul>li::after {
    border-color: var(--accent-color);
    /* الخطوط بتنور معاك */
}

/* استجابة الموبايل: تحويل الشجرة لقائمة عادية بشكل شيك */
@media (max-width: 992px) {
    .cyber-tree ul {
        display: flex;
        flex-direction: column;
        padding-top: 0;
    }

    .cyber-tree li {
        padding: 15px 0 0 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cyber-tree li::before,
    .cyber-tree li::after,
    .cyber-tree ul ul::before {
        display: none;
    }

    .org-node {
        width: 100%;
        max-width: 300px;
    }

    .org-node {
        border-color: var(--accent-color) !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 175, 55, 0.2) inset !important;
    }

    .cyber-tree li>.org-node {
        border-color: var(--accent-color) !important;
    }

    .cyber-tree li>.org-node p {
        color: #fff !important;
    }

    .cyber-tree li::before,
    .cyber-tree li::after,
    .cyber-tree li>ul::before,
    .cyber-tree li>ul>li::before,
    .cyber-tree li>ul>li::after {
        border-color: var(--accent-color) !important;
    }

    .cine-card-content {
        padding: 9px 18px !important;
    }

    .cine-title {
        font-size: 25px !important;
    }


    .cine-desc {
        font-size: 15px !important;
        ;
    }



}




/* المحتوى النصي داخل الكارت */
.card-content-about {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    z-index: 3;
    transform: translateY(10px);
    transition: transform 0.4s ease;
}


#about-sec-org {
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 2px, transparent 2px);
    background-size: 40px 40px;
    z-index: -1;
    background-color: var(--primary-color);
    padding: 100px 0;
}

/*********************servicesssssssssssss********************************/

/* =========================================
   مقدمة الخدمات (Services Hero Intro)
========================================= */
.services-hero-intro {
    /* ضفنا 80px كقيمة بديلة لو المتغير مش موجود عشان السكشن ميبوظش */
    min-height: 119vh;
    width: 100%;
    display: flex;
    align-items: center;
    /* بيسنتر المحتوى بالطول */
    justify-content: center;
    /* بيسنتر المحتوى بالعرض */
    position: relative;
    background: url('https://images.unsplash.com/photo-1581094488379-6a10d04c0f04?w=1200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8ZW5naW5lZXJ8ZW58MHx8MHx8fDA%3D') center/cover no-repeat fixed;
    /* بنزق الكلام لتحت شوية عشان الناف بار ميغطيش عليه */
    padding-top: var(--nav-height, 80px);
    padding-bottom: 50px;
    overflow: hidden;
}

/* ضيفي الكلاس ده عشان نضمن إن الحاوية واخده عرض الشاشة وبتتجاوب مع الـ Flexbox */
.services-hero-intro .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.services-hero-intro .hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(11, 25, 44, 0.95) 0%, rgba(11, 25, 44, 0.7) 100%);
    z-index: 1;
}

.hero-intro-content {
    max-width: 900px;
    margin: 0 auto;
    /* أنيميشن دخول ناعم من تحت لفوق */
    animation: introFadeUp 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.intro-main-title {
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.intro-desc {
    color: #a0aabf;
    font-size: 1.25rem;
    line-height: 1.9;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* --- تصميم حركة الماوس (Scroll Indicator) --- */
.scroll-indicator-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    opacity: 0;
    /* تأخير ظهور الماوس ثانية عشان يظهر بعد النص ما يكتمل */
    animation: fadeInOpacity 1s ease 1s forwards;
}

.scroll-text {
    font-size: 0.85rem;
    color: #8c9bb4;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.mouse-icon {
    width: 28px;
    height: 46px;
    border: 2px solid var(--accent-color, #d4af37);
    border-radius: 20px;
    position: relative;
}

.mouse-wheel {
    width: 4px;
    height: 8px;
    background-color: var(--accent-color, #d4af37);
    border-radius: 4px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    /* أنيميشن العجلة بتنزل لتحت وتختفي */
    animation: scrollWheelAnim 1.8s infinite;
}

/* --- الأنيميشن --- */
@keyframes introFadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes fadeInOpacity {
    to {
        opacity: 1;
    }
}

@keyframes scrollWheelAnim {
    0% {
        top: 6px;
        opacity: 1;
    }

    100% {
        top: 22px;
        opacity: 0;
    }
}

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

    .intro-desc {
        font-size: 1.05rem;
    }
}


/* =========================================
   الخدمات (Split Screen & Vertical Wipe)
========================================= */
.cinematic-split-section {
    background-color: var(--primary-color, #0b192c);
    position: relative;
}

.cine-split-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* --- الجانب الأيسر: الصور (Visual Column) --- */
.cine-visual-col {
    width: 50%;
    position: sticky;
    top: 0;
    height: 100vh;
}

.cine-visual-sticky {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* تأثير الـ Vertical Wipe */
.cine-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* يبدأ مقصوص بالكامل من تحت */
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 1;
}

.cine-img.active {
    /* يظهر بالكامل ويمسح لفوق */
    clip-path: inset(0 0 0 0);
    z-index: 2;
}

.cine-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cine-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(11, 25, 44, 0.1) 0%, rgba(11, 25, 44, 0.95) 100%);
    z-index: 2;
}

/* --- الجانب الأيمن: النصوص (Text Column) --- */
.cine-text-col {
    width: 50%;
    position: relative;
    z-index: 3;
}

.cine-step-card {
    min-height: calc(100vh - var(--nav-height));
    display: flex;
    align-items: center;
    /* توسيط الكلام في نص الشاشة بالضبط */
    justify-content: center;
    /* padding: 5% 10%;  */

    opacity: 0.1;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.cine-step-card.active-step {
    /* حالة التفعيل (نشط في منتصف الشاشة) */
    opacity: 1;
    transform: translateY(0);
}

.cine-card-content {
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    /* خلفية شبه شفافة */
    backdrop-filter: blur(10px);
    /* تأثير زجاجي خفيف */
    -webkit-backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 15px;
    border: 2px solid transparent;
    transition: all 0.5s ease;
    transform: scale(0.94);
    margin-top: 41px;
}

.cine-step-card.active-step .cine-card-content {
    border-color: var(--accent-color);
    /* يظهر البوردر الذهبي */
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
}

.cine-title {
    color: #fff;
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.cine-desc {
    color: #a0aabf;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: justify;
}

.cine-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cyber-tag {
    background: rgba(212, 175, 55, 0.1);
    color: var(--accent-color);
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

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

.cine-list li {
    color: #e2e8f0;
    margin-bottom: 12px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* استجابة الموبايل */
@media (max-width: 992px) {
    .cine-split-container {
        flex-direction: column;
    }

    .cine-visual-col {
        width: 100%;
        position: fixed;
        /* الخلفية تفضل ثابتة ورا في الموبايل */
        top: 0;
        height: 100vh;
        z-index: 0;
    }

    .cine-text-col {
        width: 100%;
        /* نعمل حساب الناف بار من فوق في الموبايل */
        padding-top: var(--nav-height);
    }

    .cine-overlay {
        background: rgba(11, 25, 44, 0.85);
    }

    .cine-step-card {
        padding: 5%;
    }
}

/*********************************custom services*****************************************/

/* =========================================
   Ultra Cinematic Hero (115vh)
========================================= */
.cinematic-ultra-hero {
    /* طلبك الأساسي: ارتفاع 115vh دايماً */
    height: 115vh;
    min-height: 115vh;
    background-color: var(--primary-color);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- 1. الصورة بتأثير التوسع السحري --- */
.ultra-image-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* الصورة بتاخد 100vh والـ 15vh الباقية للشريط */
    overflow: hidden;
    /* التأثير: الصورة بتبدأ مقصوصة كشريط في النص وبعدين تتفتح */
    clip-path: inset(40% 10% 40% 10% round 20px);
    animation: expandMask 1s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards;
    z-index: 1;
}

.ultra-image-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* حركة زوم بطيئة جداً للصورة لا تتوقف */
    transform: scale(1.2);
    animation: slowZoom 20s linear infinite alternate forwards;
}

.ultra-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(11, 25, 44, 0.6) 0%, rgba(11, 25, 44, 0.9) 100%);
}

/* --- 2. المحتوى الفاخر --- */
.ultra-content {
    position: relative;
    z-index: 2;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: calc(var(--nav-height, 80px) + 20px);
    padding-bottom: 40px;
    margin-top: 150px;
}

.ultra-top-bar {
    opacity: 0;
    animation: fadeUp 1s ease 2s forwards;
    /* يظهر بعد ما الصورة تفتح */
    text-align: center;
}

/* النص العملاق (Giant Typography) */
.ultra-center-title {
    text-align: center;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUp 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.5s forwards;
}

.giant-text {
    font-size: 90px;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -2px;
    margin: 0;
}

/* تأثير الـ Outline للكلمة الأولى */
.outline-text {
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.8);
}

.solid-text {
    color: var(--accent-color);
    text-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* زر دائري عصري */
.ultra-bottom-action {
    display: flex;
    justify-content: center;
    opacity: 0;
    animation: fadeUp 1s ease 2.5s forwards;
}

.explore-circle {
    width: 100px;
    height: 100px;
    border: 1px solid rgba(198, 167, 94, 0.5);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    text-decoration: none;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}

.explore-circle i {
    font-size: 1.5rem;
    margin-top: 5px;
    animation: bounce 2s infinite;
}

.explore-circle:hover {
    background: var(--accent-color);
    color: var(--primary-color);
    transform: scale(1.1);
}

/* --- 3. شريط السلطة اللانهائي (15vh) --- */
.infinite-marquee-container {
    height: 19vh;
    background-color: var(--primary-color);
    border-top: 1px solid rgba(198, 167, 94, 0.2);
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

.marquee-track {
    display: flex;
    white-space: nowrap;
    /* الأنيميشن بيلف للأبد */
    animation: scrollMarquee 35s linear infinite;
}

.marquee-content {
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.marquee-content span {
    font-size: 1.8rem;
    font-weight: 800;
    color: rgba(248, 249, 250, 0.05);
    /* نص شفاف جداً */
    -webkit-text-stroke: 1px rgba(248, 249, 250, 0.3);
    /* حواف النص فقط */
    text-transform: uppercase;
    margin: 0 30px;
    letter-spacing: 2px;
}

.marquee-content i {
    font-size: 1.2rem;
    color: var(--accent-color);
}

/* --- الأنيميشنات الأساسية --- */
@keyframes expandMask {
    0% {
        clip-path: inset(40% 10% 40% 10% round 20px);
    }

    100% {
        clip-path: inset(0 0 0 0 round 0px);
    }
}

@keyframes slowZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

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

@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* -50% عشان إحنا مكررين الديف مرتين */
}

@keyframes bounce {

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

    40% {
        transform: translateY(8px);
    }

    60% {
        transform: translateY(4px);
    }
}

/* ========================================= */
/* --- RESPONSIVE DESIGN (التابلت والموبايل) --- */
/* ========================================= */

/* استجابة الشاشات المتوسطة (التابلت) */
/* ========================================= */
/* --- RESPONSIVE DESIGN (التابلت والموبايل) --- */
/* ========================================= */

/* استجابة الشاشات المتوسطة (التابلت) */
@media (max-width: 992px) {
    .ultra-content {
        margin-top: 100px;
    }

    .giant-text {
        font-size: 65px;
    }

    .ultra-top-bar {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    /* تصغير الـ cyber-tag للتابلت */
    .cyber-tag {
        font-size: 0.9rem;
        padding: 8px 16px;
    }

    .outline-text {
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
    }

    .marquee-content span {
        font-size: 1.4rem;
        margin: 0 20px;
    }


}

/* استجابة شاشات الموبايل الصغيرة */
@media (max-width: 768px) {
    .ultra-content {
        margin-top: 80px;
        padding-top: calc(var(--nav-height, 60px) + 20px);
        justify-content: center;
        gap: 59px;
    }

    .ultra-center-title {
        padding: 0 15px;
    }

    .giant-text {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .solid-text {
        text-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    }

    /* تظبيط الـ cyber-tag للموبايل (تصغير الخط والهوامش) */
    .cyber-tag {
        font-size: 0.75rem;
        /* خط أصغر ليناسب الموبايل */
        padding: 6px 12px;
        letter-spacing: 1px;
        /* السطرين دول عشان لو النص اللي جاي من الـ PHP طويل، يلف على سطرين بشكل مرتب بدل ما يخرج برا الشاشة */
        white-space: normal;
        line-height: 1.5;
        display: inline-block;
    }

    /* تصغير الأيقونة اللي جوه التاج */
    .cyber-tag i {
        font-size: 0.8rem;
    }

    .explore-circle {
        width: 80px;
        height: 80px;
    }

    .explore-circle .circle-text {
        font-size: 0.8rem;
    }

    .explore-circle i {
        font-size: 1.2rem;
        margin-top: 2px;
    }

    .infinite-marquee-container {
        height: 10vh;
        min-height: 60px;
    }

    .marquee-content span {
        font-size: 1.1rem;
        margin: 0 15px;
    }

    .editorial-title-wrapper {
        align-items: center !important;
    }

    .editorial-desc-box.light-theme-box {
        padding: 30px !important;
    }

    .srv-desc-text {
        font-size: 17px !important;
        text-align: left !important;
    }

    .single-srv-gallery {
        padding: 0px 0px !important;
    }
}

/* =========================================
   1. Single Service Hero
========================================= */
.single-srv-hero {
    position: relative;
    padding: 18vh 0 12vh;
    min-height: 60vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 119vh;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(11, 25, 44, 0.6) 0%, rgba(11, 25, 44, 0.9) 100%);
    z-index: 1;
}

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

.srv-breadcrumb {
    font-size: 0.95rem;
    color: rgba(248, 249, 250, 0.7);
    /* text-light مع شفافية */
    letter-spacing: 1px;
    margin-top: 25px;
}

.srv-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.srv-breadcrumb a:hover {
    color: var(--accent-color);
}

.srv-breadcrumb span {
    margin: 0 12px;
    color: rgba(248, 249, 250, 0.4);
}

/* =========================================
   2. Details & Slider Section
========================================= */
.single-srv-details {
    /* خلفية السكشن كحلي عشان يبرز الصور واللون الذهبي */
    background-color: var(--primary-color);
    padding: 80px 0;
}

.srv-desc-text {
    color: rgba(248, 249, 250, 0.85);
    /* أبيض مطفي لراحة العين */
    font-size: 1.1rem;
    line-height: 2;
    /* تباعد أسطر ممتاز للقراءة */
    text-align: justify;
    margin-bottom: 40px;
}

/* مميزات الخدمة */
.srv-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.srv-feature-list li {
    display: flex;
    align-items: center;
    color: var(--text-light);
    margin-bottom: 18px;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 16px 20px;
    border-radius: 10px;
    /* نعومة في الحواف */
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
}

.srv-feature-list li:hover {
    transform: translateX(8px);
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.icon-box {
    /* دمج لون الـ accent مع شفافية لخلفية الأيقونة */
    background: rgba(198, 167, 94, 0.15);
    color: var(--accent-color);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 18px;
    font-size: 1.1rem;
    transition: transform 0.4s ease;
}

.srv-feature-list li:hover .icon-box {
    transform: scale(1.1);
    background: var(--accent-color);
    color: var(--primary-color);
}

html[lang="ar"] .icon-box {
    margin-right: 0;
    margin-left: 18px;
}

html[lang="ar"] .srv-feature-list li:hover {
    transform: translateX(-8px);
}

/* Swiper Slider Customization */
.srvMainSlider {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    /* ظل فخم حوالين السلايدر */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.srv-slider-img {
    width: 100%;
    height: 500px;
    /* زيادة طول الصورة شوية للفخامة */
    object-fit: cover;
}

/* أزرار السلايدر */
.swiper-button-next,
.swiper-button-prev {
    color: var(--accent-color) !important;
    background: rgba(31, 42, 68, 0.8);
    /* Primary color background */
    width: 45px;
    height: 45px;
    border-radius: 50%;
    backdrop-filter: blur(5px);
    transition: background 0.3s ease, transform 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--accent-color);
    color: var(--primary-color) !important;
    transform: scale(1.1);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

.swiper-pagination-bullet-active {
    background: var(--accent-color) !important;
}

/* =========================================
   3. Service Gallery Grid
========================================= */
.single-srv-gallery {
    /* لون الخلفية هنا هيكون الـ bg-gray بتاعك عشان يعمل كونتراست مع السكشن الكحلي اللي فوقه */
    background-color: var(--bg-gray);
    padding: 80px 0;
}

/* تعديل ألوان النصوص في الجاليري عشان تليق مع الخلفية الفاتحة (bg-gray) */
.single-srv-gallery .text-white {
    color: #E8DCC8 !important;
}

.single-srv-gallery .text-muted {
    color: #E8DCC8 !important;
    opacity: 0.7;
}

.srv-grid-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* مساحة أكبر للصور */
    gap: 25px;
    padding: 0 43px;
}

.gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    height: 280px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    /* ظل ناعم على الخلفية الفاتحة */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* تعتيم بلون الـ Primary */
    background: rgba(31, 42, 68, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.15);
    /* زوم أعمق */
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* تنسيق التاج (Cyber Tag) ليتماشى مع الألوان */
.cyber-tag {
    background: rgba(198, 167, 94, 0.15);
    color: var(--accent-color);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(198, 167, 94, 0.3);
    letter-spacing: 0.5px;
}

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


/* =========================================
   Animations: Fade Up & Word Reveal
========================================= */

/* 1. تأثير الظهور من الأسفل (Fade Up) للعناصر ككل */
.fade-up-element {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-up-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 2. تأثير ظهور الكلمات كلمة بكلمة (Word-by-Word) */
.word-span {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    /* الحركة دي هتتفعل من الجافاسكريبت بتأخيرات مختلفة لكل كلمة */
    animation: wordFadeIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

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

/* =========================================
   تنسيقات السكشن الموحد (الخلفية البيج)
========================================= */
.single-srv-details-full {
    background-color: var(--bg-gray, #E8DCC8);
    position: relative;
    /* رفع الـ z-index ليغطي على أي تأثيرات من السكشن اللي قبله */
    z-index: 10;
}

/* تحديد أقصى عرض للنصوص عشان القراءة تكون مريحة للعين */
.editorial-full-width {
    max-width: 2000px;
    margin: 0 auto;

}

.dark-text {
    color: var(--primary-color) !important;
    /* لون كحلي للنصوص */
}

/* --- 1. العناوين (Editorial Titles) --- */
.editorial-title-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    /* خط سفلي داكن وشفاف ليناسب الخلفية الفاتحة */
    border-bottom: 1px solid rgba(31, 42, 68, 0.15);
    padding-bottom: 12px;
    margin: 30px 0;
}

.editorial-title-wrapper.mt-spacing {
    margin-top: 60px;
}

.chapter-number {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: monospace;
}

.editorial-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    margin: 30px 0;
    color: var(--bg-gray);
}

.editorial-subtitle {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    color: var(--accent-color);
}

/* --- 2. مربع الوصف (Description Box للثيم الفاتح) --- */
.editorial-desc-box.light-theme-box {
    position: relative;
    padding: 30px 40px;
    /* خلفية بيضاء شفافة فوق البيج */
    background: linear-gradient(to right, rgba(198, 167, 94, 0.1), rgba(255, 255, 255, 0.6));
    border-left: 4px solid var(--accent-color);
    border-radius: 0 15px 15px 0;
    box-shadow: inset 20px 0 30px -20px rgba(198, 167, 94, 0.15);
}

html[lang="ar"] .editorial-desc-box.light-theme-box {
    border-left: none;
    border-right: 4px solid var(--accent-color);
    border-radius: 15px 0 0 15px;
    background: linear-gradient(to left, rgba(198, 167, 94, 0.1), rgba(255, 255, 255, 0.6));
    box-shadow: inset -20px 0 30px -20px rgba(198, 167, 94, 0.15);
}

.srv-desc-text {
    font-size: 1.2rem;
    line-height: 2;
    text-align: left;
    margin: 0;
    font-weight: 500;
}

/* --- 3. شبكة المميزات (Bento Grid للثيم الفاتح) --- */
.capabilities-bento-grid.full-grid {
    display: grid;
    /* الكروت هتاخد مساحة أوسع لأن الشاشة مش مقسومة */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.bento-card.light-card {
    position: relative;
    display: flex;
    align-items: center;
    padding: 25px;
    background: #ffffff;
    /* كروت بيضاء نقية لتبرز فوق البيج */
    border: 1px solid rgba(31, 42, 68, 0.05);
    border-radius: 15px;
    overflow: hidden;
    cursor: default;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    /* ظل ناعم جداً */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bento-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(198, 167, 94, 0.15), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

html[lang="ar"] .bento-glow {
    left: auto;
    right: -100%;
    transform: skewX(20deg);
    transition: right 0.6s ease;
}

.bento-card.light-card:hover {
    transform: translateY(-8px);
    border-color: rgba(198, 167, 94, 0.5);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08), 0 0 15px rgba(198, 167, 94, 0.05) inset;
}

.bento-card.light-card:hover .bento-glow {
    left: 200%;
}

html[lang="ar"] .bento-card.light-card:hover .bento-glow {
    left: auto;
    right: 200%;
}

.bento-icon {
    font-size: 2rem;
    color: var(--accent-color);
    margin-right: 25px;
    filter: drop-shadow(0 4px 6px rgba(198, 167, 94, 0.2));
    transition: transform 0.4s ease;
}

html[lang="ar"] .bento-icon {
    margin-right: 0;
    margin-left: 25px;
}

.bento-card.light-card:hover .bento-icon {
    transform: scale(1.15) rotate(5deg);
}

.bento-text {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
}

/* --- 4. السلايدر بالعرض الكامل --- */
.slider-full-wrap {
    margin: 80px 0;
}

.srvMainSlider {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(31, 42, 68, 0.15);
    /* ظل كحلي ناعم للسلايدر */
    border: none;
}

.srv-slider-img {
    width: 100%;
    height: 600px;
    /* خلينا الصورة أطول لأنها بالعرض الكامل دلوقتي */
    object-fit: cover;
}




@property --rotate {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

/* السكشن الأساسي */
.codepen-gallery-section {
    /* خلينا الطول ديناميكي: كل كارت بياخد 60vh عشان السكرول ياخد وقته والصور تلف بهدوء */
    height: calc(var(--cards) * 70vh + 100vh);
    background-color: transparent !important;
    position: relative;

    /* ربط الدوران بالسكرول الأصلي للمتصفحات الداعمة */
    animation: gallery-spin linear;
    animation-timeline: view();

    /* التعديل الجوهري هنا: يبدأ لما السكشن يثبت، ويخلص بالظبط قبل ما السكشن يبدأ يتحرك لفوق */
    animation-range: entry 100% exit 0%;
}

@keyframes gallery-spin {
    0% {
        --rotate: 0;
    }

    100% {
        --rotate: 1;
    }
}

.gallery-sticky-area {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.gallery-title-overlay {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 100%;
}

/* الحاوية الدائرية */
.codepen-gallery-section .wrapper {
    --card-width: max(180px, 18vw);
    --card-height: calc(var(--card-width) * 1.4);
    /* حساب نصف قطر الدائرة بناءً على عرض الكارت وعددهم */
    --radius: calc(var(--card-width) * var(--cards) / 5.5);

    position: absolute;
    left: 50%;
    /* دفع مركز الدائرة لأسفل لكي يظهر الكارت العلوي في منتصف الشاشة */
    top: calc(50% + var(--radius) - 5vh);

    /* الدوران العكسي للدائرة بالكامل بناءً على قيمة --rotate */
    transform: translate(-50%, -50%) rotate(calc(var(--rotate) * -360deg));
}

/* الكروت الفردية */
.codepen-gallery-section .wrapper>div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--card-width);
    height: var(--card-height);
    margin-top: calc(var(--card-height) / -2);
    margin-left: calc(var(--card-width) / -2);

    border-radius: 15px;
    border: 4px solid var(--primary-color);
    box-shadow: 0 20px 40px rgba(31, 42, 68, 0.3);

    /* حساب الزاوية الثابتة للكارت على الدائرة */
    --angle: calc(360deg / var(--cards) * var(--card-i));
    /* حساب الزاوية الحالية في العالم (أين يقع الكارت الآن أثناء الدوران) */
    --world-angle: calc(var(--angle) - (var(--rotate) * 360deg));
    /* دالة cos تعطي 1 عندما يكون الكارت في الأعلى (12 o'clock) و -1 في الأسفل */
    --topness: cos(var(--world-angle));

    /* حساب الشفافية (يظهر فقط الكروت التي تقترب من القمة) */
    --card-opacity: clamp(0, calc((var(--topness) - 0.7) * 4), 1);
    opacity: var(--card-opacity);

    /* حساب الضبابية والألوان للكروت البعيدة */
    --blur: clamp(0px, calc((1 - var(--topness)) * 10px), 10px);
    filter: blur(var(--blur)) grayscale(calc(1 - var(--topness)));

    /* وضع الكارت في مكانه على محيط الدائرة */
    transform: rotate(var(--angle)) translateY(calc(var(--radius) * -1));
    transition: opacity 0.1s linear, filter 0.1s linear;
}

.codepen-gallery-section .wrapper>div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* الماوس */
.codepen-gallery-section .mouse {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: mouseBounce 1.5s infinite;
}

@keyframes mouseBounce {

    0%,
    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, 15px);
        opacity: 0.5;
    }
}

@media(max-width: 768px) {
    .codepen-gallery-section .wrapper {
        --card-width: max(140px, 40vw);
    }

    .editorial-full-width {
        padding: 0 0 !important;
    }
}

/* =========================================
   2. سكشن التفاصيل والسلايدر (شبكة هندسية وإضاءة)
========================================= */
/* إعطاء السكشن بالكامل الخلفية البيج مع تجهيزه للطبقات */
.single-srv-details-full {
    background-color: var(--bg-gray, #E8DCC8);
    position: relative;
    z-index: 10;
    overflow: hidden;
    padding-bottom: 60px;
}

/* الطبقة الأولى: شبكة هندسية (Blueprint Grid) */
.single-srv-details-full::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(31, 42, 68, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 42, 68, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -2;
    pointer-events: none;
}

/* الطبقة الثانية: إضاءات ناعمة (Ambient Glow) ذهبي وكحلي */
.single-srv-details-full::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 15% 20%, rgba(198, 167, 94, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 85% 80%, rgba(31, 42, 68, 0.08) 0%, transparent 50%);
    z-index: -1;
    pointer-events: none;
    animation: ambientGlow 12s ease-in-out infinite alternate;
}

/* حركة تنفس للإضاءة */
@keyframes ambientGlow {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.1) translate(30px, 30px);
        opacity: 1;
    }
}


/* =========================================
   3. سكشن القدرات/المميزات (خلفية كحلي مع نقط ذهبي)
========================================= */
/* تحويل السكشن لـ Block مستقل بشياكة */
.single-srv-details-full .editorial-full-width.mt-spacing {
    background-color: var(--primary-color);
    /* تأثير النقط (Polka Dots) باستخدام الـ Accent Color مع شفافية خفيفة */
    background-image: radial-gradient(rgba(198, 167, 94, 0.25) 2px, transparent 2px);
    background-size: 30px 30px;
    /* مساحة توزيع النقط */

    padding: 60px 50px;
    border-radius: 30px;
    /* حواف ناعمة */
    margin: 80px auto;
    /* فصل السكشن عن اللي قبله */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
    /* ظل عميق */
    max-width: 1800px;
    /* عشان ميكونش لازق في الشاشة من بره */
}

/* تفتيح عنوان السكشن فقط عشان يظهر بوضوح فوق الكحلي (بدون ما نبوظ لون النصوص جوه الكروت البيضاء) */
.single-srv-details-full .editorial-full-width.mt-spacing>.editorial-title-wrapper .dark-text {
    color: var(--text-light) !important;
}

/* تفتيح الخط السفلي للعنوان في السكشن الكحلي */
.single-srv-details-full .editorial-full-width.mt-spacing .editorial-title-wrapper {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* تظبيط الموبايل للسكشن ده */
@media (max-width: 768px) {
    .single-srv-details-full .editorial-full-width.mt-spacing {
        padding: 28px 13px !important;
        border-radius: 20px;
        margin: 50px -14px !important;
    }

    .editorial-subtitle {
        font-size: 27px !important;
    }
}


/* =========================================
   4. سكشن الجاليري (خلفية Tech أنيقة)
========================================= */
.single-srv-gallery {
    background-color: var(--primary-color);
    /* قلبنا السكشن لكحلي ليتماشى مع التايتل الأبيض */

    /* دمج إضاءة علوية مع خطوط زجاجية قطرية (Diagonal Tech Lines) */
    background-image:
        radial-gradient(circle at top center, rgba(198, 167, 94, 0.1), transparent 60%),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.02) 0px,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px,
            transparent 20px);
    position: relative;
    padding-bottom: 0;
    /* لأن الجاليري بياخد مساحة الدوران */
}

/* إخفاء الخلفية البيج القديمة من على الحاوية الدائرية عشان تندمج مع سكشن الجاليري المخطط */
.codepen-gallery-section {
    background-color: transparent !important;
}


/*****************************contact*******************************/
/* =========================================
   1. Contact Hero Section
========================================= */
.contact-hero {
    position: relative;
    /* padding: 20vh 0 15vh; */
    background: url('https://plus.unsplash.com/premium_photo-1681487748082-839c7c0ee0c4?w=1200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Y29udGFjdHxlbnwwfHwwfHx8MA%3D%3D') center/cover no-repeat fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 119vh;
    text-align: center !important;
}

.contact-hero .hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(31, 42, 68, 0.95), rgba(31, 42, 68, 0.8));
    z-index: 0;
}

.mb-spacing {
    margin-bottom: 25px;
}

.mt-spacing {
    margin-top: 25px;
}

/* =========================================
   2. Contact Command Grid
========================================= */
.contact-command-section {
    background-color: var(--bg-gray, #E8DCC8);
    padding: 100px 0;
    position: relative;
    z-index: 2;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    /* تقسيم الشاشة لـ ثلث وثلثين */
    gap: 50px;
    align-items: start;
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        /* تحت بعض في الموبايل */
    }

    .contact-hero {
        min-height: 100vh;
    }

    .contact-grid {
        display: inline !important;
    }

    .container-mob {
        padding: 0 10px !important;
    }

    .contact-command-section {
        padding: 15px 0 !important;
    }

    .cyber-submit-btn {
        font-size: 17.5px !important;
    }
}

/* --- Contact Info Cards (Bento Style) --- */
.contact-bento {
    margin-bottom: 20px;
    padding: 25px;
    align-items: flex-start;
}

.contact-icon-box {
    background: rgba(198, 167, 94, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    margin-right: 20px;
    font-size: 1.4rem;
}

html[lang="ar"] .contact-icon-box {
    margin-right: 0;
    margin-left: 20px;
}

.contact-text-box h5 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.contact-text-box p {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
}

/* --- Contact Form (Engineering Glass UI) --- */
.contact-form-side {
    position: relative;
}

.form-glass-container {
    background-color: var(--primary-color);
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(31, 42, 68, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.engineering-form {
    display: flex;
    flex-direction: column;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .form-glass-container {
        padding: 30px 20px;
    }
}

.input-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.input-group label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ستايل الحقول (Inputs) */
.input-group input,
.input-group select,
.input-group textarea {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px 20px;
    color: var(--accent-color);
    font-size: 1.05rem;
    font-family: inherit;
    outline: none;
    transition: all 0.3s ease;
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* تأثير النور اللي بيمشي تحت الـ Input لما العميل يكتب */
.input-focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.4s ease;
}

.input-group input:focus~.input-focus-border,
.input-group select:focus~.input-focus-border,
.input-group textarea:focus~.input-focus-border {
    width: 100%;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(198, 167, 94, 0.3);
}

/* تغيير خلفية الـ Select نفسه (لو حابة تلغي تأثير الزجاج منه وتخليه لون صريح) */
.input-group select {
    background-color: var(--primary-color);
}

/* تغيير خلفية القائمة المنسدلة (الخيارات) لما تفتح */
.input-group select option {
    background-color: var(--primary-color);
    color: var(--text-light);
    /* أو ممكن تستخدمي var(--accent-color) لو عايزاها باللون الذهبي */
    padding: 10px;
    /* لإعطاء مساحة تنفس للنص */
}

/* زر الإرسال (Submit Button) */
.cyber-submit-btn {
    align-self: flex-start;
    background: var(--accent-color);
    color: var(--primary-color);
    border: none;
    padding: 16px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(198, 167, 94, 0.3);
    background: #fff;
    /* يتغير للأبيض للفت الانتباه */
}

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

.cyber-submit-btn:hover i {
    transform: translateX(5px) translateY(-5px);
    /* أيقونة الصاروخ تطير */
}

html[lang="ar"] .cyber-submit-btn:hover i {
    transform: translateX(-5px) translateY(-5px);
}


/***************************our visionnnnn*****************************/

/* =========================================
   1. Vision Hero Section
========================================= */
.vision-hero {
    position: relative;
    padding: 22vh 0 15vh;
    /* صورة خلفية توحي بالمستقبل أو التوسع اللوجستي */
    background: url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=1600&q=80') center/cover no-repeat fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.vision-hero .hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* تدرج كحلي للأسود */
    background: linear-gradient(135deg, rgba(31, 42, 68, 0.95), rgba(10, 15, 25, 0.85));
    z-index: 0;
}

/* =========================================
   2. Vision Pillars Section
========================================= */
.vision-pillars-section {
    background-color: var(--bg-gray, #E8DCC8);
    padding: 33px 0 120px;
    position: relative;
    z-index: 2;
}

/* تقسيم الكروت (3 أعمدة في الديسكتوب، عمود في الموبايل) */
.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    align-items: stretch;
    /* عشان كل الكروت تاخد نفس الطول بالضبط */
}

@media (max-width: 992px) {
    .vision-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* --- تصميم كارت الرؤية (Vision Card) --- */
.vision-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 35px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(31, 42, 68, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

/* الخط الذهبي اللي بيظهر تحت الكارت عند الـ Hover */
.v-card-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 5px;
    background-color: var(--accent-color);
    transition: width 0.5s ease;
}

.vision-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(31, 42, 68, 0.12);
    border-color: rgba(198, 167, 94, 0.3);
}

.vision-card:hover .v-card-line {
    width: 100%;
}

/* الجزء العلوي في الكارت (الرقم والأيقونة) */
.v-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.v-number {
    font-family: monospace;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.v-icon {
    font-size: 2.5rem;
    color: rgba(31, 42, 68, 0.15);
    /* لون كحلي باهت جداً في البداية */
    transition: all 0.4s ease;
}

.vision-card:hover .v-icon {
    color: var(--accent-color);
    /* ينور ذهبي عند الـ Hover */
    transform: scale(1.15) rotate(-5deg);
}

/* نصوص الكارت */
.v-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.v-desc {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555 !important;
    text-align: justify;
    margin: 0;
    /* بيخلي النص ياخد باقي المساحة عشان الكروت تفضل متساوية */
    flex-grow: 1;
}

/* دمج مسافات الموبايل */
@media (max-width: 768px) {
    .vision-card {
        padding: 30px 20px;
    }

    .vision-hero {
        padding: 18vh 0 10vh;
    }

    .editorial-title {
        font-size: 2.5rem !important;
    }

    .vision-card {
        box-shadow: 0 20px 40px rgba(31, 42, 68, 0.12) !important;
        border-color: rgba(198, 167, 94, 0.3) !important;
    }

    .vision-card .v-card-line {
        width: 100% !important;
    }

    .vision-card .v-icon {
        color: var(--accent-color) !important;
        /* ينور ذهبي عند الـ Hover */
        transform: scale(1.15) rotate(-5deg) !important;
    }

}

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

/* =========================================
   تنسيق مقدمة صفحة الرؤية (توسيط في منتصف الشاشة)
========================================= */

.vision-intro {
    /* بديل text-center */
    text-align: center;

    /* توسيط العناصر بداخلها باستخدام Flexbox لضمان الدقة */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* مسافة سفلية تفصلها عن الكروت (بديل mb-5) */
    margin-bottom: 60px;
}

/* مسافة تحت العنوان (بديل mb-3) */
.vision-intro .editorial-title {
    margin-bottom: 20px;
}

/* تنسيق البرجراف ليكون في المنتصف ولا يتخطى عرض معين (بديل mx-auto) */
.vision-intro-desc {
    max-width: 800px;
    /* بيجيب البلوك كله في النص بالظبط */
    margin: 0 auto;
}