html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    margin-bottom: 60px;
    overflow-x: hidden;
}


/* ============================================
             Layout style 
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

/* ---- CSS Variables ---- */
:root {
    --nav-red-start: #E63631;
    --nav-red-end: #EF4B47;
    --nav-gradient: linear-gradient( 90deg, #E63631 0%, #E83A35 16.67%, #E93D39 33.33%, #EB413C 50%, #EC4440 66.67%, #EE4844 83.33%, #EF4B47 100% );
    --header-bg: rgba(255, 255, 255, 0.95);
    --border-color: #E5E7EB;
    --text-primary: #1F2937;
    --text-muted: #6B7280;
    --hover-bg: #F3F4F6;
    --shadow-header: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-active: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    --font: 'Cairo', 'Segoe UI', Arial, sans-serif;
    --transition: all 0.25s ease;
    --navbar-height: 65px;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    font-family: 'Cairo', sans-serif;
    background: #F9FAFB;
    color: #1F2937;
}

.demo-content {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 24px;
    text-align: center;
}

    .demo-content h1 {
        font-size: 36px;
        font-weight: 800;
        color: #E63631;
        margin-bottom: 12px;
    }

    .demo-content p {
        font-size: 16px;
        color: #6B7280;
        line-height: 1.8;
    }

.demo-badge {
    display: inline-block;
    background: #FEF2F2;
    color: #E63631;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
    border: 1px solid #FECACA;
}

/* Scroll effect classes (added by JS) */
.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.navbar.nav-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.navbar {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* RTL */
html[dir="rtl"] .contact-item {
    flex-direction: row;
    justify-content: flex-start;
    text-align: right;
}

/* LTR */
html[dir="ltr"] .contact-item {
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: left;
}

.ltr-text {
    direction: ltr;
    unicode-bidi: embed;
}
/* ---- Header ---- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--navbar-height);
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-header);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    direction: rtl;
    font-family: var(--font);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ---- Container ---- */
.nav-container {
    width: 100%;
    max-width: 1280px;
    padding: 0 32px;
    height: 100%; /* خليه ياخد طول الناف بار بالكامل */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* ده هيخلي اللوجو واللينكات والزرار على خط واحد */
    gap: 16px;
}

/* ---- Logo ---- */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 0; /* غيرها من 300px لـ 0 أو مارجن بسيط */
    text-decoration: none;
    flex-shrink: 0;
    transition: var(--transition);
}


.nav-logo-img {
    width: 29px;
    height: 36px;
    flex-shrink: 0;
}

.nav-logo:hover {
    opacity: 0.85;
}

.nav-logo-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.nav-logo-text {
    font-family: var(--font);
    font-size: 22px;
    font-weight: 800;
    color: var(--nav-red-start);
    letter-spacing: -0.3px;
    white-space: nowrap;
    line-height: 1;
}


/* ---- Navigation Links ---- */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1; /* عشان يملأ المساحة اللي في النص ويوسط اللينكات */
    margin: 0;
    padding: 0;
}

    .nav-links li {
        list-style: none;
    }

    .nav-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
        height: 40px;
        font-family: var(--font);
        font-size: 14.5px;
        font-weight: 500;
        color: var(--text-primary);
        text-decoration: none;
        border-radius: 20px;
        white-space: nowrap;
        transition: var(--transition);
        position: relative;
    }

        .nav-links a:hover {
            background: var(--hover-bg);
            color: var(--nav-red-start);
        }

        .nav-links a.active {
            background: var(--nav-gradient);
            color: #ffffff;
            font-weight: 600;
            box-shadow: var(--shadow-active);
        }

            .nav-links a.active:hover {
                color: #ffffff;
                opacity: 0.92;
            }

/* ---- Right Side (Language Button) ---- */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: -10px;
    flex-shrink: 0;
}

.lang-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    height: 40px;
    width: auto;
    min-width: 108px;
    border-radius: 20px;
    border: 1.5px solid var(--border-color);
    background: transparent;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    outline: none;
}

    .lang-btn:hover {
        background: var(--hover-bg);
        border-color: #D1D5DB;
        color: var(--text-primary);
    }

    .lang-btn svg {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
    }

/* ---- Hamburger Button ---- */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 10px;
    padding: 8px;
    transition: var(--transition);
    outline: none;
}

    .hamburger:hover {
        background: var(--hover-bg);
    }

    .hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--text-primary);
        border-radius: 2px;
        transition: var(--transition);
        transform-origin: center;
    }

    /* Hamburger open state */
    .hamburger.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger.is-open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .hamburger.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

/* ---- Mobile Menu ---- */
.mobile-menu {
    position: fixed;
    top: var(--navbar-height);
    right: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 12px 16px 20px;
    z-index: 999;
    direction: rtl;
    font-family: var(--font);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Hidden by default */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease;
}

    .mobile-menu.is-open {
        max-height: 520px;
        opacity: 1;
        padding: 12px 16px 20px;
        pointer-events: auto;
    }

    .mobile-menu a {
        display: flex;
        align-items: center;
        padding: 11px 18px;
        font-family: var(--font);
        font-size: 15px;
        font-weight: 500;
        color: var(--text-primary);
        text-decoration: none;
        border-radius: 12px;
        transition: var(--transition);
    }

        .mobile-menu a:hover {
            background: var(--hover-bg);
            color: var(--nav-red-start);
        }

        .mobile-menu a.active {
            background: var(--nav-gradient);
            color: #ffffff;
            font-weight: 600;
        }

            .mobile-menu a.active:hover {
                color: #ffffff;
                opacity: 0.92;
            }

/* Mobile menu divider */
.mobile-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 4px;
    flex-shrink: 0;
}

/* Mobile language toggle */
.mobile-lang-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: right;
    direction: rtl;
    transition: var(--transition);
    outline: none;
}

    .mobile-lang-btn:hover {
        background: var(--hover-bg);
        color: var(--text-primary);
    }

    .mobile-lang-btn svg {
        width: 17px;
        height: 17px;
        flex-shrink: 0;
    }

/* ---- Page body offset ---- */
body {
    padding-top: var(--navbar-height);
}

/* Footer Base */
.main-footer {
    width: 100%;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    padding-top: 48px;
    display: flex;
    justify-content: center;
}

.footer-container {
    width: 100%;
    max-width: 1280px; /* العرض المحدد في المواصفات */
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Content Area */
.footer-content {
    display: flex;
    flex-direction: row-reverse; /* لترتيب العناصر من اليمين لليسار */
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* لجعلها متجاوبة */
    gap: 40px;
}

.footer-column {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: right;
}

/* Brand Section */
.brand-info .logo-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 10px;
}

.brand-desc {
    color: #6B7280;
    line-height: 1.6;
    font-size: 14px;
    max-width: 384px;
}

/* Typography */
.column-title {
    color: #1E3A8A; /* اللون الأزرق من التصميم */
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

.contact-item {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    color: #374151;
    font-size: 14px;
}

    .contact-item .icon {
        color: #E63631; /* لون الأيقونات أحمر */
        font-size: 16px;
    }

/* =========================
   FOOTER
========================= */
/* Footer Base */
.main-footer {
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    /* تقليل المسافة العلوية والسفلية للفوتر بالكامل */
    padding: 30px 0 10px 0;
    width: 100%;
    /* حذف أي height: 325px كانت موجودة */
    height: auto !important;
    direction: rtl;
}

/* Container */
.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    /* تقليل الفراغ الداخلي */
    padding: 0 20px;
    /* تقليل المسافة بين صف الأعمدة وسطر الحقوق */
    gap: 20px !important;
}

/* Columns Wrapper */
.footer-columns {
    display: flex;
    justify-content: space-between;
    /* تقليل المسافة بين الأعمدة نفسها */
    gap: 20px;
}

/* Individual Column */
.footer-col {
    display: flex;
    flex-direction: column;
    /* تقليل المسافة بين العنوان والباراجرافات (كانت 16px في الفيجما) */
    gap: 8px !important;
    text-align: right;
}
    .footer-col p,
    .footer-col .contact-item {
        margin: 0;
        line-height: 1.4; /* لتقليل الارتفاع الرأسي للسطر */
        font-size: 14px; /* تصغير الخط قليلاً يقلل الحجم الكلي */
        color: #4A5565
    }
.footer-logo {
    height: 45px;
    width: auto;
    /* يضمن عدم وجود هوامش غريبة تضرب المحاذاة */
    margin-inline-start: 0;
}
.footer-title {
    margin-bottom: 5px !important;
    font-size: 16px;
    color: #2E3192;
    font-weight:600;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start; /* يضمن بداية العناصر من اليمين في الـ RTL */
    text-align: right; /* يضمن محاذاة النص لليمين */
    margin-bottom: 10px;
}
    .contact-item i {
        color: #EF4444;
        order: 0; /* الأيقونة هي أول شيء يظهر من اليمين */
    }
    .contact-item span, .contact-item p {
        order: 1;
        margin: 0;
        color: #4A5565;
        /* لضمان ثبات شكل الأرقام والإيميلات */
    }

.ltr-text {
    direction: ltr;
    display: inline-block;
}

.footer-bottom {
    margin-top: 15px;
    padding: 15px 0;
    border-top: 1px solid #E5E7EB;
    text-align: center;
    color: #4A5565
}
    /* --- Media Queries للشاشات الصغيرة --- */
    @media (max-width: 768px) {
        .footer-columns {
            flex-direction: column; /* الأعمدة تيجي تحت بعضها في الموبايل */
            align-items: center;
            text-align: center; /* توسيط الكلام للموبايل أشيك */
        }

        .footer-col {
            width: 100%;
            align-items: center; /* توسيط المحتوى داخل العمود */
        }

        .main-footer {
            margin-top: 40px; /* تقليل المسافة في الموبايل */
        }
    }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet: hide desktop nav, show hamburger */
@media (max-width: 1024px) {
    .nav-links a {
        padding: 0 12px;
        font-size: 13.5px;
    }
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    .lang-btn {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-container {
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 0 14px;
    }

    .nav-logo-text {
        font-size: 19px;
    }

    .nav-logo-icon {
        width: 32px;
        height: 32px;
    }
}




/* ==========================================================================
   Home Page Hero Section Styles (Strictly scoped to home-)
   ========================================================================== */

/*--------------------- frist section -----------------------------------*/
:root {
    --home-primary-color: #E63631; /* الأحمر */
    --home-secondary-color: #2E3192; /* الكحلي/الأزرق */
    --home-text-dark: #1F2937;
    --home-text-muted: #4B5563;
    --home-transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* السيكشن الخارجي الكبير - تم تعديل الخلفية لأزرق باهت مأخوذ من درجتك وجعله Full Width */
.home-hero-section {
    position: relative;
    width: 100vw; /* يأخذ عرض الصفحة كاملة */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 880px;
    background-color: #f4f6fc; /* درجة أزرق باهتة جداً ومريحة ومأخوذة من الـ Brand */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    direction: rtl;
    padding: 40px 0;
}

/* العلامات المائية الـ Watermarks الخلفية وثباتها المطلق */
.home-watermark {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.watermark-top-left {
    width: 170px;
    height: 170px;
    left: 10%;
    top: 10%;
    transform: rotate(-27.2deg);
}

.watermark-bottom-left {
    width: 144px;
    height: 144px;
    left: 2%;
    bottom: 8%;
}

.watermark-center-right {
    width: 168px;
    height: 168px;
    right: 33%;
    bottom: 12%;
    transform: rotate(-24.06deg);
}

/* الكونتينر الداخلي الحابس المرن */
.home-hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    padding: 0 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* الجانب الأيمن الخاص بالبيانات */
.home-hero-content {
    flex: 1;
    max-width: 584px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* التاج الصغير الملون فوق العنوان */
.home-hero-badge {
    background: rgba(230, 54, 49, 0.1);
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
    display: inline-block;
}

    .home-hero-badge span {
        color: var(--home-primary-color);
        font-size: 14px;
        font-weight: 600;
    }

/* العنوان الرئيسي - تم تطبيق الـ Gradient المتداخل للألوان هنا */
.home-hero-title {
    font-size: 54px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 20px;
    /* تأثير تداخل الألوان اللي بعته جوه حروف الكلمة */
    background: linear-gradient(180deg, #2E3192 0%, #E63631 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */
    display: inline-block;
}

    /* إلغاء اللون المنفصل للـ span عشان العنوان كله يمتزج بالجريدينت سوا */
    .home-hero-title span {
        color: inherit;
    }

/* البراجراف التعريفي */
.home-hero-description {
    font-size: 18px;
    line-height: 1.6;
    color: var(--home-text-muted);
    margin-bottom: 40px;
}

/* زون الأزرار الحركية */
.home-hero-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
}

/* زرار اليمين (تصفح المنتجات) - تعديل حركة السهم لليمين ومن فوق الكلام */
.home-btn-primary {
    position: relative;
    display: flex;
    flex-direction: row; /* يخلي النص يمين والسهم شمال بشكل طبيعي */
    align-items: center;
    justify-content: center; /* توسيط العناصر جوه الزرار */
    padding: 16px 28px;
    gap: 12px;
    min-width: 217px;
    height: 60px;
    background: #FFFFFF;
    border: 2px solid transparent;
    border-color: var(--home-primary-color); /* إرجاع البوردر كلور القديم */
    border-radius: 16px;
    color: var(--home-secondary-color);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: var(--home-transition-smooth);
    cursor: pointer;
    overflow: hidden; /* عشان الحركة متبوظش أبعاد الزرار الخارجي */
    z-index: 1;
}

    /* السهم الصغير وتأكيد ظهوره فوق أي خلفية أو كلام */
    .home-btn-primary .arrow-icon {
        position: relative;
        z-index: 3; /* يضمن إن السهم يطير فوق النص دايماً ومن غير ما يختفي وراه */
        transition: var(--home-transition-smooth);
        transform: scaleX(-1); /* الحفاظ على اتجاه السهم الأصلي لليمين */
    }

    /* الهوفر لزر المنتجات */
    .home-btn-primary:hover {
        background: var(--home-primary-color) !important;
        border-color: var(--home-primary-color);
        color: #FFFFFF !important;
    }

        .home-btn-primary:hover .arrow-icon {
            /* translateX بالموجب هتحركه لليمين، مع الحفاظ على قلبة السهم scaleX */
            transform: scaleX(1) translateX(140px);
        }

/* زرار اليسار (اتصل بنا) */
.home-btn-secondary {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    min-width: 123px;
    height: 60px;
    background: #FFFFFF;
    border: 2px solid #E5E7EB;
    border-radius: 16px;
    color: var(--home-text-dark);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: var(--home-transition-smooth);
}

    .home-btn-secondary:hover {
        background: var(--home-secondary-color);
        border-color: var(--home-secondary-color);
        color: #FFFFFF;
    }

/* منطقة الأيقونات السفلية */
.home-hero-features {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.home-feature-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.home-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-green {
    background-color: #DCFCE7;
}

.icon-blue {
    background-color: #DBEAFE;
}

.icon-red {
    background-color: #FFE2E2;
}

.home-feature-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .home-feature-text strong {
        font-size: 16px;
        color: var(--home-text-dark);
        font-weight: 700;
    }

    .home-feature-text span {
        font-size: 12px;
        color: var(--home-text-muted);
    }

/* الجانب الأيسر الخاص بصورة الإعلان */
.home-hero-image-wrapper {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: 584px; /* العرض الأقصى المعتمد في تصميمك */
    /* التعديل السحري: نسبة مستطيلة تقلل الارتفاع وتمنع تمدد الصورة */
    aspect-ratio: 16 / 11;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* لقص أطراف الصورة الزائدة برفق والحفاظ على نسب الأبعاد داخلها */
    filter: drop-shadow(0px 25px 50px rgba(0, 0, 0, 0.15));
    border-radius: 24px;
}

/* الأستيل العام الموحد للـ Floating Badges الطايرة */
.home-floating-badge {
    position: absolute;
    background: #FFFFFF;
    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    z-index: 10;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

    .home-floating-badge:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0px 25px 30px -5px rgba(46, 49, 146, 0.15);
    }

/* ==========================================================================
   1. الـ Badge العلوي (اليمين فوق) - Trusted by
   ========================================================================== */
.badge-top-right {
    width: 210px;
    height: 68px;
    right: -24px; /* بروز جانبي ثابت */
    top: -16px; /* محاذة دقيقة مع سقف الارتفاع الجديد */
    padding: 16px;
    display: flex;
    align-items: center;
    direction: ltr;
}

.badge-trusted-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.badge-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.badge-subtitle {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6C757D;
    line-height: 16px;
}

.badge-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #2E3192;
    line-height: 20px;
}

/* ستاك الدوائر الملونة المتداخلة */
.badge-circles-stack {
    position: relative;
    width: 80px;
    height: 32px;
}

    .badge-circles-stack span {
        position: absolute;
        width: 32px;
        height: 32px;
        border: 2px solid #FFFFFF;
        border-radius: 50%;
        top: 0;
    }

.circle-green {
    background: #00C950;
    left: 0px;
    z-index: 3;
}

.circle-red {
    background: #E63631;
    left: 20px;
    z-index: 2;
}

.circle-blue {
    background: #2E3192;
    left: 40px;
    z-index: 1;
}


/* ==========================================================================
   2. الـ Badge السفلي (الشمال تحت) - 24/7 Support
   ========================================================================== */

.badge-bottom-left {
    width: 175px;
    height: 100px;
    left: -24px; /* بروز جانبي ثابت */
    bottom: -16px; /* محاذة دقيقة مع قاع الارتفاع الجديد */
    padding: 16px 20px;
    display: flex;
    align-items: center;
    direction: ltr;
}

.badge-support-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.badge-support-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2E3192;
    line-height: 32px;
}

.badge-support-subtitle {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #6C757D;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-support-icon-box {
    width: 48px;
    height: 48px;
    background-color:white;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
    Responsive Control (Media Queries)
   ========================================================================== */
@media (max-width: 1024px) {
    .home-hero-section {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .home-hero-container {
        flex-direction: column-reverse;
        text-align: center;
        gap: 30px;
    }

    .home-hero-content {
        align-items: center;
    }

    .home-hero-title {
        font-size: 40px;
    }

    .home-hero-actions, .home-hero-features {
        justify-content: center;
    }

    .watermark-center-right {
        display: none;
    }
}
@media (max-width: 1024px) {
    .home-hero-image-wrapper {
        max-width: 460px;
        margin: 0 auto;
    }

    /* سحب الـ Badges للداخل قليلاً في الموبايل لعدم الخروج عن الشاشة */
    .badge-top-right {
        right: 0px;
        top: -10px;
    }

    .badge-bottom-left {
        left: 0px;
        bottom: -10px;
    }
}

@media (max-width: 480px) {
    .home-hero-image-wrapper {
        max-width: 340px;
    }

    .home-floating-badge {
        transform: scale(0.85); /* تصغير متناسق بنسبة 15% لعناصر الموبايل */
    }

    .badge-top-right {
        right: -10px;
        top: -15px;
    }

    .badge-bottom-left {
        left: -10px;
        bottom: -15px;
    }
}
/*---------------------- second section -----------------------*/

/* 1. السيكشن الكبير - full width + خلفية باهتة هادية */
.home-services-section {
    position: relative;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 800px;
    background: linear-gradient(180deg, #FFF 0%, #F9FAFB 50%, #FFF 100%); /* درجة الأزرق الباهتة الهادية مأخوذة من لون لوجو الشركة */
    padding: 80px 0;
    overflow: hidden;
    direction: rtl; /* تظبيط اتجاه عربي تلقائي هندسياً */
}

/* الووتر ماركس (تطير في الخلفية) */
.home-watermark {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.05; /* شفافة جداً عشان تبقا باهتة */
}

.watermark-top-left {
    width: 220px;
    left: 2%;
    top: 5%;
}

.watermark-bottom-right {
    width: 220px;
    right: 2%;
    bottom: 5%;
}

/* 2. الكونتينر الحابس الأساسي */
.services-main-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* 3. الهيدر العلوي الموحد للسيكشن */
.services-header-block {
    display: flex;
    flex-direction: column;
    align-items: center; /* توسيط تلقائي للكلام العربي */
    text-align: center;
    margin-bottom: 64px;
    gap: 16px;
}

/* التاج الصغير (Our Expertise) */
.expertise-badge {
    background: rgba(46, 49, 146, 0.1);
    padding: 8px 16px;
    border-radius: 100px;
    color: #2E3192;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
}

/* العنوان الرئيسي للسيكشن (الخدمات) بالجريدينت */
.services-main-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    background: #2E3192;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */
    display: inline-block;
}

.services-sub-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #64748B;
    max-width: 672px;
    margin: 0 auto;
}

/* 4. شبكة الكروت (Duo Grid) - كارد جنب كارد زي الصورة */
.cards-duo-wrapper {
    display: flex;
    flex-direction: row; /* يمين ويسار */
    justify-content: center; /* توسيط الكارتين في النص */
    align-items: stretch;
    gap: 32px; /* مسافة بينهم */
}

.service-card {
    background: #FFFFFF;
    border: 2px solid #E5E7EB;
    border-radius: 24px;
    padding: 45px 35px; /* زودنا الـ Padding فوق وتحت لـ 45px عشان يدير مساحة أكبر */
    flex: 1;
    max-width: 592px;
    min-height: 320px; /* حد أدنى للارتفاع عشان الكارد يبقا طويل ومتناسق */
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.05);
}

    /* تأثير الهوفر على الكارد باللون الأحمر */
    .service-card:hover {
        border-color: #E63631 !important;
        transform: translateY(-5px);
        box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
    }

/* الهيدر الداخلي للكارد - تم ضبطه ليفهم الـ RTL الافتراضي (الأيقونة يمين خالص) */
.card-inner-header {
    display: flex;
    flex-direction: row; /* رجعناه row عشان يمشى مع اتجاه الصفحة العربي الافتراضي */
    align-items: center;
    justify-content: flex-start; /* يبدأ من اليمين خالص */
    gap: 20px; /* مسافة واضحة بين الأيقونة والعنوان */
    margin-bottom: 28px;
    position: relative;
    width: 100%;
}

/* الديف التجمعي للعنوان والخط لضمان الترتيب الرأسي */
.card-title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

/* عنوان الخدمة جوه الكارد */
.card-service-title {
    font-size: 22px;
    font-weight: 700;
    color: #2E3192;
    margin: 0;
    text-align: right;
}

/* الخط الصغير الملون تحت العنوان */
.title-bottom-line {
    width: 64px;
    height: 4px;
    border-radius: 100px;
    margin-top: 8px;
}

/* ديف الأيقونة الملونة جوه الكارد (80px × 80px) - يمين خالص */
.card-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 16px;
    flex-shrink: 0; /* يضمن إن الأيقونة متصغرش أبدًا وتفضل بأبعادها الثابتة */
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    order: 0; /* يضمن وجودها أول عنصر على اليمين */
}

/* الميزات اللونية الخاصة لكل ثيم */

/* الكارد الأحمر (مكافحة الحرائق) */
.card-red-theme .card-icon-container {
    background: linear-gradient(135deg, #E63631 0%, #EF4B47 100%);
}

.card-red-theme .title-bottom-line {
    background: linear-gradient(90deg, #E63631 0%, rgba(230, 54, 49, 0) 100%);
}

.card-red-theme .card-action-link {
    color: #E63631;
}

/* الكارد الأزرق (إنذار الحريق) */
.card-blue-theme .card-icon-container {
    background: linear-gradient(135deg, #2E3192 0%, #4A52B8 100%);
}

.card-blue-theme .title-bottom-line {
    background: linear-gradient(90deg, #2E3192 0%, rgba(46, 49, 146, 0) 100%);
}

.card-blue-theme .card-action-link {
    color: #2E3192;
}

/* براجراف الوصف جوه الكارد */
.card-service-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #64748B;
    margin-bottom: 32px; /* زيادة المسافة المتروكة قبل الزرار */
    text-align: right;
}

/* رابط الإجراء (عرض المنتجات ←) - محاذة كاملة لليمين */
.card-action-link {
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    align-self: flex-start; /* flex-start في الـ RTL هو اليمين تماماً */
    margin-top: auto; /* يزق الزرار دايماً في قاع الكارد من تحت مهما كان طول النص ثابتاً */
    transition: color 0.3s ease;
}

    .card-action-link:hover {
        text-decoration: underline;
    }

/* الأيقونات الـ SVG */
.card-icon-container svg {
    width: 36px;
    height: 36px;
}

/* ========================================================== */
/* التجاوب للشاشات المختلفة (Media Queries) */
/* ========================================================== */
@media (max-width: 1024px) {
    .cards-duo-wrapper {
        flex-direction: column; /* كارد واحد في السطر للموبايل */
        align-items: center;
    }

    .service-card {
        width: 100%;
        max-width: 500px;
    }
}
/*----------------------- third section -------------------------------- */
/* ==========================================================================
   1. السيكشن الخارجي الكبير (خيارات الخدمة - واخد الجريدينت الكحلي بالكامل)
   ========================================================================== */
.service-options-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 80px 0;
    /* الجريدينت الكحلي الأصلي من الفيجما */
    background: linear-gradient(135deg, #2E3192 0%, #303495 8.33%, #323798 16.67%, #35399B 25%, #373C9F 33.33%, #393FA2 41.67%, #3C42A5 50%, #3E44A8 58.33%, #4047AB 66.67%, #434AAE 75%, #454DB2 83.33%, #484FB5 91.67%, #4A52B8 100%);
    direction: rtl; /* عربي بالكامل */
}

/* الكونتينر الداخلي */
.options-main-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* الهيدر (خيارات الخدمة) */
.options-header-block {
    text-align: center;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.options-main-title {
    font-size: 36px;
    font-weight: 800;
    margin: 0;
}

.options-sub-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* شبكة الكروت (كارد يمين وكارد شمال) */
.options-cards-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 32px;
}

/* الستايل الموحد للكروت الأساسية */
.option-card {
    border-radius: 24px;
    padding: 33px;
    flex: 1;
    max-width: 592px;
    min-height: 410px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}

/* الهيدر الداخلي للكارد (الأيقونة يمين خالص والعنوان يسارها) */
.option-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

.option-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

/* بوكس الأيقونة الموحد */
.option-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .option-icon-box svg, .option-icon-box i {
        width: 28px;
        height: 28px;
        color: #FFFFFF;
        font-size: 24px;
    }

/* نصوص وعناصر القائمة جوه الكروت */
.option-card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 24px;
}

.option-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    font-size: 15px;
}

    .option-feature-item svg {
        color: #E63631; /* علامات الصح الحمراء الديفولت */
        font-size: 16px;
        transition: color 0.4s ease;
    }
.option-feature-item-w p  {
    color: white; 
    font-size: 16px;
    transition: color 0.4s ease;
}
/* ==========================================================================
   2. تفاصيل "الكارد الأول اليمين" (التوريد - شفاف وأيقونة بيضاء)
   ========================================================================== */
.card-right-supply {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .card-right-supply .option-icon-box {
        background: rgba(255, 255, 255, 0.2);
    }

    /* ⚡ هوفر الكارد اليمين (التوريد) */
    .card-right-supply:hover {
        background: #2E3192 !important; /* الخلفية الكحلي الصريحة */
        border-color: #E63631 !important; /* البوردر يتحول للأحمر */
        transform: translateY(-5px);
    }

        .card-right-supply:hover .option-icon-box {
            background: #E63631 !important; /* بوكس الأيقونة يقلب أحمر */
        }


/* ==========================================================================
   3. تفاصيل "الكارد الثاني اليسار" (التوريد والتركيب - شفاف أحمر وأيقونة حمراء)
   ========================================================================== */
.card-left-install {
    background: rgba(230, 54, 49, 0.2);
    border: 1px solid rgba(230, 54, 49, 0.3);
}

    .card-left-install .option-icon-box {
        background: #E63631; /* أيقونة حمراء صريحة ديفولت */
    }

    /* ⚡ هوفر الكارد اليسار (التوريد والتركيب) */
    .card-left-install:hover {
        background: #E63631 !important; /* الخلفية تقلب أحمر كامل */
        border-color: #E63631 !important;
        transform: translateY(-5px);
    }

        .card-left-install:hover .option-icon-box {
            background: #2E3192 !important; /* بوكس الأيقونة يقلب كحلي سحري */
        }

        /* تعديل لون أيقونة الصح جوه الكارد التاني عند الهوفر عشان تليق ع الخلفية الحمرا */
        .card-left-install:hover .option-feature-item i {
            color: #FFFFFF;
        }


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .options-cards-grid {
        flex-direction: column;
        align-items: center;
    }

    .option-card {
        width: 100%;
    }
}

/*---------------------- fourth section ------------------------------*/
/* ==========================================================================
   1. السيكشن الخارجي الكبير والكونتينر الرئيسي
   ========================================================================== */
.product-showcase-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 80px 0;
    background: #FFFFFF;
    direction:rtl; /* اتجاه عربي كامل */
}

.product-showcase-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.product-main-card {
    display: flex;
    flex-direction: row-reverse; /* التعديل السحري هنا لقلب الأماكن */
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    box-sizing: border-box;
    width: 100%;
    min-height: 657px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    border: 1px solid #F3F4F6;
    box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    padding: 48px;
}

/* 2. ضبط محاذاة عناصر الوصف والشهادات والزرار جهة اليسار */
.product-details-block {
    flex: 1;
    max-width: 535px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* يضمن محاذاة كل المحتوى لليسار */
}

/* ضبط اتجاه شبكة الشهادات */
.cert-badges-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start; /* تبدأ البادجات من اليسار */
    gap: 12px;
}

/* 3. في الموبايل يعود الترتيب الطبيعي (الصورة فوق والوصف تحت) */
@media (max-width: 1024px) {
    .product-main-card {
        flex-direction: column; /* الصورة فوق والتفاصيل تحت في الشاشات الصغيرة */
        padding: 40px 24px;
    }
}

/* البادج الصغير فوق اسم المنتج */
.product-top-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: fit-content;
    height: 36px;
    background: rgba(230, 54, 49, 0.1);
    color: #E63631;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* اسم المنتج ووصفه */
.product-main-title {
    font-size: 32px;
    font-weight: 800;
    color: #2E3192; /* اللون الكحلي الأساسي من براند شركتك */
    margin: 0 0 20px 0;
    line-height: 1.4;
    display:flex;
}

.product-main-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #4B5563; /* لون رمادي مريح للقراءة */
    margin: 0 0 32px 0;
    display:flex;
    direction:ltr;
}

/* ==========================================================================
   3. جزء الشهادات المعتمدة (Certificates)
   ========================================================================== */
.product-certifications-zone {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.cert-label-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #E63631;
    font-size: 15px;
    font-weight: 700;
}

    .cert-label-wrapper svg {
        flex-shrink: 0;
    }

/* شبكة البادجات الصغيرة للشهادات */
.cert-badges-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

.cert-badge-item {
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    height: 42px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #2E3192;
}

/* ==========================================================================
   4. زرار عرض تفاصيل المنتج (الأكشن والهوفر السحري)
   ========================================================================== */
.product-action-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 245.69px;
    height: 60px;
    background: transparent;
    border: 2px solid #2E3192;
    color: #2E3192;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .product-action-btn svg {
        transition: transform 0.4s ease;
    }

        .product-action-btn svg path {
            stroke: #2E3192;
            transition: stroke 0.4s ease;
        }

    /* ⚡ هوفر الزرار يقلب أحمر كامل والكلام والأيقونة يقلبوا أبيض */
    .product-action-btn:hover {
        background: #E63631 !important;
        border-color: #E63631 !important;
        color: #FFFFFF !important;
        box-shadow: 0px 10px 20px rgba(230, 54, 49, 0.3);
    }

        .product-action-btn:hover svg {
            transform: translateX(-4px); /* السهم يتحرك لليسار مع اتجاه الكتابة العربي */
        }

            .product-action-btn:hover svg path {
                stroke: #FFFFFF !important; /* السهم يقلب أبيض جوه الهوفر الأحمر */
            }

/* ==========================================================================
   5. الجزء الأيسر: بوكس الصورة والبادج المميز الفوقاني
   ========================================================================== */
.product-image-wrapper {
    position: relative;
    width: 448px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .product-image-wrapper img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* بادج "المنتج المميز" الأحمر فوق الصورة يمين */
.featured-product-tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    gap: 8px;
    position: absolute;
    right: 20px;
    top: -16px;
    background: #E63631;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    z-index: 2;
}

/* ==========================================================================
   Responsive (شاشات الموبايل والتابلت)
   ========================================================================== */
@media (max-width: 1024px) {
    .product-main-card {
        flex-direction: column-reverse; /* الصورة فوق والتفاصيل تحت في الموبايل */
        padding: 40px 24px;
    }

    .product-image-wrapper {
        width: 100%;
        height: auto;
    }

    .product-details-block {
        max-width: 100%;
    }

    .product-action-btn {
        width: 100%; /* الزرار ياخد العرض كامل على الموبايل */
    }
}
/*------------------------- fifth section --------------------------*/
/* ==========================================================================
   سيكشن العلامات التجارية - صفحة الـ Home (محمي بكلاسات خاصة)
   ========================================================================== */
.home-brands-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 80px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
    direction: rtl; /* اتجاز عربي بالكامل */
}

/* الكونتينر الأساسي بيرتب العناصر عمودياً (فوق بعض) */
.home-brands-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex !important;
    flex-direction: column !important; /* يضمن ترتيب الهيدر ثم الكروت ثم الزرار */
    align-items: center !important; /* يوسطن كل العناصر في نص الشاشة */
    gap: 48px;
    width: 100%;
    box-sizing: border-box;
}

/* الهيدر العلوي */
.home-brands-intro {
    width: 100%;
    text-align: center !important;
}

.home-brands-main-title {
    font-size: 32px;
    font-weight: 800;
    color: #2E3192;
    margin: 0 0 16px 0;
}

.home-brands-lead-text {
    font-size: 16px;
    color: #4B5563;
    margin: 0;
}

/* الجريد المخصص للكروت فقط (أفقي تماماً في سطر واحد) */
.home-brands-flex-grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /* يمنع الكروت تماماً من النزول تحت بعض */
    gap: 20px;
    width: 100%;
}

/* الكارد المربع المظبوط الحامي نفسه من المطة العمودية */
.home-brand-item-card {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    /* الأبعاد المربعة الهندسية الفيجما */
    width: 165px !important;
    height: 165px !important;
    flex-shrink: 0 !important; /* يمنع الكارد من الانكماش العشوائي */
    align-self: center !important; /* يلغي خاصية الـ stretch ويمنع المطة الطولية */

    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

    /* تأثير الهوفر السحري (البوردر الملون المتداخل مع شادو خفيف) */
    .home-brand-item-card:hover {
        transform: translateY(-5px);
        border-color: transparent;
        box-shadow: 0px 15px 30px -10px rgba(46, 49, 146, 0.2), 0px 10px 20px -10px rgba(230, 54, 49, 0.15);
        /* الـ Gradient المزدوج للبوردر الدائري السليم */
        background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #2E3192 0%, #E63631 100%);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        border: 1px solid transparent;
    }

/* بوكس اللوجو الداخلي */
.home-brand-logo-holder {
    width: 100%;
    height: 75px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden;
}

    /* منع مطة اللوجوهات نهائياً والحفاظ على أبعادها */
    .home-brand-logo-holder img {
        max-width: 90% !important;
        max-height: 90% !important;
        object-fit: contain !important; /* التريكة المانعة لأي تمطيط أو تشويه في الصور */
    }

/* اسم الشركة أسفل اللوجو */
.home-brand-label-name {
    font-size: 14px !important;
    font-weight: 600;
    color: #4B5563;
    margin-top: 12px !important;
    text-align: center;
    width: 100%;
    transition: color 0.3s ease;
}

.home-brand-item-card:hover .home-brand-label-name {
    color: #2E3192;
}

/* الزرار السفلي الخارجي */
.home-brands-btn-container {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
}

.home-brands-action-button {
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 252.19px;
    height: 56px;
    background: linear-gradient(90deg, #2E3192 0%, #303495 8.33%, #4A52B8 100%);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 16px;
    border: none;
    box-shadow: 0px 4px 10px rgba(46, 49, 146, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}



/* دمج الـ Responsive للموبايل */
@media (max-width: 1024px) {
    .home-brands-flex-grid {
        flex-wrap: wrap !important; /* يسمح لهم بالنزول تحت بعض بشكل منظم في الشاشات الصغيرة جداً */
        justify-content: center !important;
        gap: 16px;
    }
}
/*----------------------- sith section ------------------------------*/

/* ==========================================================================
   سيكشن المميزات - صفحة الـ Home (كلاسات حصرية لمنع التداخل)
   ========================================================================== */
.home-features-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 80px 0;
    background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
    direction: rtl; /* دعم كامل للاتجاه العربي */
}

.home-features-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 64px; /* المسافة بين الهيدر والكروت تبعا للـ Figma */
}

/* الهيدر العلوي */
.home-features-header {
    width: 100%;
    text-align: center;
}

.home-features-title {
    font-size: 32px;
    font-weight: 800;
    color: #2E3192;
    margin: 0 0 16px 0;
}

.home-features-subtitle {
    font-size: 16px;
    color: #4B5563;
    margin: 0;
}

/* شبكة توزيع الكروت (مفرودة أفقيًا جمب بعض بالمسطرة) */
.home-features-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 32px; /* المسافات الهندسية البينية */
    width: 100%;
}

/* الكارد الأبيض الرئيسي */
.home-feature-card {
    box-sizing: border-box;
    flex: 1; /* يخلي الـ 3 كروت متساويين تماماً في العرض */
    max-width: 384px;
    height: 280px; /* طول مريح لاستيعاب المحتوى والأيقونة */
    background: #FFFFFF;
    border: 1px solid #F3F4F6;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.05), 0px 4px 6px -4px rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center; /* يوسطن الأيقونة والكلام جوه الكارد */
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* تريكة رفع الكارد وزيادة الشادو عند الهوفر العام */
    .home-feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

/* بوكس الأيقونة الافتراضي (الشفاف المتدرج) */
.home-feature-icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 24px;
    margin-bottom: 20px;
    transition: all 0.35s ease; /* لتنعيم حركة قلب الألوان */
}

/* تدرجات الأيقونات الافتراضية تبعاً للـ Figma المرفق */
.icon-red-gradient {
    background: linear-gradient(135deg, rgba(230, 54, 49, 0.15) 0%, rgba(230, 54, 49, 0.05) 100%);
    color: #E63631;
}

.icon-blue-gradient {
    background: linear-gradient(135deg, rgba(46, 49, 146, 0.15) 0%, rgba(46, 49, 146, 0.05) 100%);
    color: #2E3192;
}

.home-feature-icon-box svg {
    /* تريكة سحرية: تجعل الـ SVG يقبل الألوان الممررة له من الـ CSS */
    stroke: currentColor !important;
    /* تنعيم حركة تحول اللون (Transition) */
    transition: stroke 0.35s ease, fill 0.35s ease, transform 0.35s ease;
}

/* حالة الـ Hover العام على الكارد */
.home-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0px 20px 25px -5px rgba(46, 49, 146, 0.1), 0px 10px 10px -5px rgba(230, 54, 49, 0.1);
    background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #2E3192 0%, #E63631 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
}


    .home-feature-card:hover .home-feature-icon-box {
        background: #E63631 !important; 
        color: #FFFFFF !important; 
    }


        .home-feature-card:hover .home-feature-icon-box svg path {
            stroke: #FFFFFF !important; 
        }

/* العناوين والوصف جوه الكروت */
.home-feature-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #2E3192;
    margin: 0 0 12px 0;
}

.home-feature-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #6B7280;
    margin: 0;
}

/* Responsive لشاشات الموبايل والتابلت عشان الكروت متنزلش بشكل عشوائي */
@media (max-width: 1024px) {
    .home-features-grid {
        flex-direction: column; /* يرص الكروت تحت بعض في الشاشات الصغيرة */
        gap: 24px;
    }

    .home-feature-card {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}
/* ============================================
             About Page style 
   ============================================ */
/*-------------- fist section styles--------------- */
.about-section {
    position: relative;
    width: 100%;
    min-height: 600px;
    background: #fcfbfb; /* خلفية بيضاء سادة بدون مربعات */
    display: flex;
    justify-content: center;
    align-items: center;
    direction: rtl; /* ضمان الاتجاه من اليمين للشمال */
    padding: 60px 33px;
    overflow: hidden;
}

/* التنسيق المشترك للأيقونات الخلفية */
.bg-icon {
    position: absolute;
    z-index: 0; /* خلف المحتوى الرئيسي */
    pointer-events: none; /* عشان متبقاش عائق للضغط بالماوس */
    opacity: 0.1; /* جعلها باهتة جداً كما في الصورة */
}

/* الأيقونة الأولى (أعلى اليسار) */
.icon-top-left {
    top: 50px;
    left: 10%; /* تحريكها لجهة اليسار */
    transform: rotate(-15deg); /* تمييل الأيقونة قليلاً */
}

/* الأيقونة الثانية (التي تظهر في الأسفل) */
.icon-bottom-center {
    bottom: 50px;
    left: 60%;
    transform: rotate(5deg);
    opacity: 0.08; /* باهتة أكثر */
}

/* تأكد من جعل الـ container أعلى من الأيقونات */
.about-container {
    position: relative;
    z-index: 1;
    
}

/* تصغير الأيقونات في الموبايل عشان متزحمش الشاشة */
@media (max-width: 768px) {
    .bg-icon svg {
        width: 120px;
        height: auto;
    }
}

.about-container {
    width: 100%;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    /* محاذاة كل العناصر لليمين */
    align-items: flex-start;
    text-align: right;
}

.shield-box {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #2E3192 0%, #1F2261 100%);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    /* وضع الأيقونة في اليمين */
    margin-right: 0;
}

.about-title {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(40px, 8vw, 42px);
    font-weight: 800;
    /* حل مشكلة قص الكلمة من الأسفل */
    line-height: 1.3;
    padding-bottom: 10px;
    margin: 0;
    /* التدرج اللوني */
    background: linear-gradient(135deg, #2E3192 0%, #1F2261 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-line {
    width: 120px;
    height: 6px;
    background: linear-gradient(90deg, #1F2261 12%, #E63631 88%);
    border-radius: 50px;
    margin: 20px 0 30px 0;
}

.about-paragraph {
    max-width: 768px;
    font-size: 18px;
    line-height: 1.8;
    color: #4B5563;
    margin-bottom: 40px;
}

.decoration-dots {
    display: flex;
    gap: 12px;
    /* وضع النقاط في اليمين */
    justify-content: flex-start;
}

    .decoration-dots span {
        width: 8px;
        height: 8px;
        background: linear-gradient(135deg, #2E3192 0%, #1F2261 100%);
        border-radius: 50%;
    }

/* التجاوب للموبايل */
@media (max-width: 768px) {
    .about-container {
        align-items: center;
        text-align: center;
    }

    .decoration-dots {
        justify-content: center;
    }
}

/*-------------- second section styles--------------- */

/* Container Settings */
.services-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 715px; /* حسب المواصفات */
    background: #FFFFFF;
    padding: 80px 0;
    display: flex;
    justify-content: center;
    direction: rtl;
    padding-bottom: revert-layer
}

.services-container {
    width: 100%;
    max-width: 1280px;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Headings */
.main-heading {
    color: #2E3192;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 16px;
}

.sub-heading {
    color: #6B7280;
    font-size: 20px;
    margin-bottom: 32px;
}

.description-text, .footer-note {
    max-width: 896px;
    font-size: 16px;
    line-height: 1.8;
    color: #4B5563;
    margin-bottom: 48px;
}

/* Cards Area */
.cards-wrapper {
    display: flex;
    gap: 32px;
    margin-bottom: 48px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.service-card {
    width: 496px;
    height: 210px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
    cursor: pointer;
    padding: 24px;
}

/* الحالة الافتراضية للكروت */
.red-card {
    background: linear-gradient(135deg, #E63631 0%, #EF4B47 100%);
    color: white;
}

.blue-card {
    background: #F0F1F9;
    border: 1px solid rgba(46, 49, 146, 0.2);
    color: #2E3192;
}

    .blue-card .supply-icon {
        background-color: #2E3192 !important;
        color: white !important;
    }

    .blue-card:hover .supply-icon {
        background-color: #E63631 !important;
        color: white;
    }

    /* 🔥 Hover Effect Logic 🔥 */
    /* عند الوقوف على الكارت الأزرق، يتحول للأحمر */
    .blue-card:hover {
        background: #2E3192;
        color: white;
        border-color: transparent;
        transform: translateY(-5px);
    }

/* عند الوقوف على الكارت الأحمر، يتحول للشكل الهادئ (أو العكس حسب رغبتك) */
.red-card:hover {
    background: #F0F1F9;
    color: #2E3192;
    border: 1px solid rgba(46, 49, 146, 0.2);
    transform: translateY(-5px);
}

    /* عند الوقوف بالماوس على الكارد الكبيرة */
    .red-card:hover .installation-icon {
        background-color: #2E3192 !important; /* اللون المطلوب عند الهوفر */
        transition: background-color 0.3s ease; /* لجعل الحركة ناعمة */
    }

        /* تأكد من أن لون الأيقونة يتغير للأبيض إذا لزم الأمر ليظهر بوضوح */
        .red-card:hover .installation-icon svg path {
            stroke: #FFFFFF;
        }

/* Icons within cards */
.icon-box {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}


.service-card h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
    .service-card {
        width: 100%;
        max-width: 496px;
    }
}

/***-------------- third section styles--------------- */

.mission-vision-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 499px;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    padding: 80px 0;
    direction: rtl;
}

.mission-container {
    max-width: 1280px;
    width: 100%;
    display: flex;
    gap: 32px;
    padding: 0 32px;
}

.info-card {
    position: relative;
    flex: 1;
    height: 339px;
    border-radius: 24px;
    border: 1px solid #F3F4F6;
    overflow: hidden; /* ضروري لإخفاء الترانزيشن الخارج عن الحدود */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* الألوان الافتراضية للباك جراوند */
.mission-card {
    background-color: rgba(46, 49, 146, 0.05);
}
/* #2E31920D */
.vision-card {
    background-color: rgba(230, 54, 49, 0.05);
}
/* #E636310D */

/* طبقة الهوفر (Overlay) التي تظهر من الركن */
.hover-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-radius: 0 24px 0 100%; /* شكل انسيابي من الزاوية */
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.mission-card .hover-overlay {
    background-color: #2E3192;
}

.vision-card .hover-overlay {
    background-color: #E63631;
}

/* عند الهوفر على الكارت */
.info-card:hover .hover-overlay {
    width: 150%; /* تغطية المساحة بالكامل */
    height: 150%;
    border-radius: 0;
}

.card-content {
    position: relative;
    z-index: 2; /* ليبقى النص فوق طبقة الهوفر */
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: color 0.4s ease;
}

/* الأيقونات */
.icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    align-self: flex-end; /* وضع الأيقونة في اليسار بالنسبة لـ RTL */
    transition: all 0.4s ease;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ألوان الأيقونات الافتراضية */
.mission-icon {
    background: linear-gradient(135deg, #2E3192 0%, rgba(230, 54, 49, 0.8) 100%);
}

.vision-icon {
    background: linear-gradient(135deg, #E63631 0%, #EF4B47 100%);
}

/* تحول الأيقونة عند الهوفر */
.vision-card:hover .vision-icon {
    background: #2E3192;
}

.mission-card:hover .mission-icon {
    background: #E63631;
}

/* تغيير ألوان النصوص عند الهوفر */
.info-card:hover h2,
.info-card:hover p {
    color: #FFFFFF !important;
}

.info-card h2 {
    font-size: 28px;
    font-weight: 700;
    color: #2E3192;
    margin-bottom: 16px;
}

.info-card p {
    font-size: 16px;
    line-height: 1.8;
    color: #4B5563;
}

.mission-vision-section {
    padding: 80px 0;
    background: #FFFFFF;
    direction: rtl;
}

.mission-container {
    display: flex;
    gap: 32px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.info-card {
    position: relative;
    flex: 1;
    height: 339px;
    border-radius: 24px;
    overflow: hidden;
    transition: background-color 0.5s ease;
    cursor: pointer;
    border: 1px solid #F3F4F6;
}

/* الألوان الابتدائية الهادئة */
.mission-card {
    background-color: #2E31920D;
}

.vision-card {
    background-color: #E636310D;
}

.card-content {
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* المحاذاة لليمين */
}

/* محاذاة الأيقونة لليمين */
.icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    align-self: flex-start; /* أيقونة على اليمين في RTL */
    transition: all 0.5s ease;
    z-index: 3;
}

.mission-icon {
    background: linear-gradient(135deg, #2E3192 0%, rgba(230, 54, 49, 0.8) 100%);
}

.vision-icon {
    background: #E63631;
}

/* تأثير اختفاء وظهور النص من الكورنر */
.text-reveal {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top left; /* النقطة التي يبدأ منها الظهور */
}

/* الحالة الافتراضية للنصوص */
.info-card h2 {
    color: #2E3192;
    font-size: 24px;
    margin-bottom: 12px;
}

.info-card p {
    color: #4B5563;
    line-height: 1.6;
}

/* 🔥 هوفر كارت المهمة (الأزرق) 🔥 */
.mission-card:hover {
    background-color: #2E3192;
}

    .mission-card:hover .text-reveal {
        animation: revealFromCorner 0.3s forwards;
        color: white;
    }

    .mission-card:hover .mission-icon {
        background: #E63631; /* تغيير لون الأيقونة عند الهوفر */
    }

/* 🔥 هوفر كارت الرؤية (الأحمر) 🔥 */
.vision-card:hover {
    background-color: #E63631;
}

    .vision-card:hover .text-reveal {
        animation: revealFromCorner 0.3s forwards;
        color: white;
    }

    .vision-card:hover .vision-icon {
        background: #2E3192; /* تغيير لون الأيقونة عند الهوفر */
    }

/* الأنييميشن الخاص بظهور الكلام من الزاوية */
@keyframes revealFromCorner {
    0% {
        opacity: 0;
        transform: scale(0);
        clip-path: circle(0% at 0% 0%);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        clip-path: circle(150% at 0% 0%);
    }
}

/* لضمان تحول لون النص للأبيض فوراً */
.info-card:hover h2,
.info-card:hover p {
    color: #FFFFFF;
}

/* 📱 الموبايل */
@media (max-width: 768px) {
    .mission-container {
        flex-direction: column;
    }

    .info-card {
        height: auto;
    }
}

/***-------------- fourth section styles--------------- */

.values-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 624px;
    background: #F0F1F9;
    padding: 80px 0;
    display: flex;
    justify-content: center;
    direction: rtl;
}

.values-container {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 0 32px;
}

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

    .values-header h2 {
        color: #2E3192;
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 0px;
    }

.cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

/* التنسيق الأساسي الموحد لكل الكروت */
.value-card {
    position: relative;
    width: 280px;
    height: 316px;
    background: #FFFFFF; /* الحالة الافتراضية بيضاء دائماً */
    border: 1px solid #DEE2E6;
    border-radius: 16px;
    padding: 33px;
    transition: all 0.4s ease;
    text-align: right;
}

/* أيقونة الحالة الافتراضية (شفافة) */
.icon-container {
    position: absolute;
    width: 56px;
    height: 56px;
    right: 33px;
    top: 33px;
    background: rgba(230, 54, 49, 0.1); /* اللون الشفاف الافتراضي */
    color: #E63631;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

/* نصوص الكارد */
.value-card h3 {
    margin-top: 80px;
    color: #2E3192;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.value-card p {
    color: #6B7280;
    font-size: 15px;
    line-height: 1.7;
}

/* 🔥 تأثير الهوفر الموحد للجميع 🔥 */
.value-card:hover {
    border-color: #2E3192; /* تحول البوردر للأزرق عند الهوفر */
    box-shadow: 0px 15px 30px rgba(46, 49, 146, 0.1);
    transform: translateY(-8px);
}

    .value-card:hover .icon-container {
        background: #E63631; /* تحول خلفية الأيقونة للأحمر الصريح */
        color: #FFFFFF; /* تحول الأيقونة للأبيض */
    }

/* حذفنا أي استايلات ثابتة لـ active-hover لضمان التماثل */

/* الكارد النشط (Active) */
.active-hover {
    border-color: #2E3192;
    box-shadow: 0px 15px 30px rgba(46, 49, 146, 0.1);
}

    .active-hover .icon-container {
        background: #E63631;
        color: #FFFFFF;
    }

/* التحكم بـ SVG */
.icon-container svg path {
    stroke: currentColor;
}


/*------------------------- fifth section styles--------------- */
/* القسم الرئيسي - محاذاة مع بادينج الصفحة */
.timeline-section {
    padding: 80px 0;
    background: #FFFFFF;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.timeline-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px; /* البادينج الأساسي للصفحة */
}

/* توسيط وتقليل المسافة بين العنوانين الرئيسيين */
.timeline-header {
    text-align: center;
    margin-bottom: 64px;
}

    .timeline-header .main-heading {
        margin-bottom: 8px; /* تقليل المسافة بين العنوان الرئيسي والفرعي */
    }

    .timeline-header .sub-heading {
        margin-top: 0;
        font-size: 18px;
    }

.timeline-wrapper {
    position: relative;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* الخط المركزي - ثابت في السنتر */
.central-line {
    position: absolute;
    width: 2px;
    background: #DEE2E6;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
}

.timeline-item {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start; /* يبدأ من اليمين */
}

/* تصغير الدوت والحلقة المحيطة */
.timeline-dot {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 12px;
    height: 12px;
    background: #2E3192;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 0.5px #E63631;
}

/* الكارد - ملاصق للبادينج (32px من اليمين) */
.timeline-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 24px;
    /* الحساب البرمجي لعرض الكارد ليصل للبادينج */
    /* الصفحة 100%، نطرح منها الـ 50% (جهة اليسار) ونطرح الـ 32px (البادينج) */
    width: calc(50% - 40px);
    max-width: 568px;
    background: #FFFFFF;
    border: 1px solid #DEE2E6;
    border-radius: 16px;
    /* لضمان ثباته على اليمين تماماً مع احترام مسافة الخط */
    margin-right: 0;
    text-align: right;
    transition: 0.3s ease;
}

    .timeline-content h3 {
        color: #2E3192;
        font-size: 19px;
        margin: 0 0 4px 0;
    }

    .timeline-content p {
        color: #6B7280;
        font-size: 14px;
        line-height: 1.4;
        margin: 0;
    }

.timeline-year {
    color: #E63631;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 2px;
}

/* تحسين الهوفر */
.timeline-content:hover {
    border-color: #2E3192;
    box-shadow: 0 8px 25px rgba(46, 49, 146, 0.06);
}

/* الموبايل */
@media (max-width: 768px) {
    .central-line, .timeline-dot {
        left: 20px;
    }

    .timeline-item {
        padding-right: 40px;
    }

    .timeline-content {
        width: 100%;
    }
}

/*------------------------- sixth section styles--------------- */

.features-section {
    padding: 100px 0;
    /* التدرج اللوني الدقيق كما في Figma مع إضافة لمسة الأحمر الشفاف */
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 40%, rgba(230, 54, 49, 0.05) 70%, /* هذا هو اللون #E636310D */
    #EFF6FF 100% );
    position: relative;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.features-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
}

.features-header {
    max-width: 896px;
    margin: 0 auto 64px auto;
}

    .features-header .main-heading {
        color: #2E3192;
        font-size: 40px;
        margin-bottom: 16px;
    }

    .features-header .sub-heading {
        color: #6B7280;
        font-size: 18px;
        line-height: 1.6;
    }

/* تنسيق كروت الإحصائيات */
.stats-wrapper {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.stat-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 33px;
    width: 277px;
    height: 146px;
    /* خلفية بيضاء شبه شفافة لإظهار التدرج خلفها */
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #F3F4F6;
    backdrop-filter: blur(10px); /* تأثير زجاجي بسيط */

    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    transition: transform 0.3s ease;
}

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

.stat-number {
    color: #E63631; /* اللون الأحمر للأرقام */
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 8px;
}

.stat-label {
    color: #2E3192; /* اللون الأزرق للوصف */
    font-size: 16px;
    font-weight: 500;
}

/* الموبايل */
@media (max-width: 768px) {
    .stats-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .stat-card {
        width: 100%;
        max-width: 350px;
    }
}

/*------------------------- sixth section styles--------------- */
.team-section {
    padding: 80px 0;
    background: #FFFFFF;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.team-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.team-header {
    text-align: center;
    margin-bottom: 64px;
}

.team-cards-wrapper {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.expert-card {
    background: #F0F1F9;
    width: 384px;
    height: 268px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

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

/* حاوية الأيقونة */
.expert-icon-box {
    width: 80px;
    height: 80px;
    border-radius: 50%; /* border-radius: 3.35544e+07px; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    transition: background-color 0.4s ease;
}

/* الألوان الأساسية */
.bg-blue {
    background-color: #2E3192;
}

.bg-red {
    background-color: #E63631;
}

/* تأثيرات الهوفر الخاصة بالألوان */
/* الكارت الأول والثالث: أزرق يتحول لأحمر */
.expert-card:hover .expert-icon-box.bg-blue {
    background-color: #E63631;
}

/* الكارت الثاني: أحمر يتحول لأزرق */
.expert-card:hover .expert-icon-box.bg-red {
    background-color: #2E3192;
}

.expert-card h3 {
    color: #2E3192;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.expert-card p {
    color: #6B7280;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

/* التجاوب مع الموبايل */
@media (max-width: 1200px) {
    .expert-card {
        width: calc(33.33% - 22px);
    }
}

@media (max-width: 992px) {
    .expert-card {
        width: calc(50% - 16px);
    }
}

@media (max-width: 768px) {
    .expert-card {
        width: 100%;
        height: auto;
        padding: 40px 20px;
    }
}

/* ============================================
             Trademarks Page style 
   ============================================ */

/*------------------------- first section styles--------------- */

/* ---- PageHero Main Component ---- */
.page-hero {
    position: relative;
    width: 100%;
    min-height: 520px;
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 50%, #F9FAFB 100%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    direction: rtl;
    padding: 80px 0;
}

.hero-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    z-index: 5;
}

/* ---- البادج العلوي ---- */
.hero-header-badge {
    display: flex;
    margin-bottom: 24px; /* مسافة متناسقة قبل العنوان */
}

.badge-icon-holder {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #2E3192 0%, #1F2261 100%);
    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- العنوان والخط الملون المائل ---- */
.hero-title {
    font-size: 42px;
    font-weight: 800;
    color: #1F2261;
    margin: 0 0 16px 0; /* مسافة مريحة بين العنوان والخط */
    width: 100%;
}

/* الخط الملون المائل تحت العنوان مباشرة */
.badge-gradient-line {
    width: 120px;
    height: 6px;
    background: linear-gradient(90deg, #1F2261 12.98%, #E63631 47.6%);
    border-radius: 100px;
    margin-bottom: 24px; /* مسافة قبل الباراجراف */
}

/* ---- الباراجراف ---- */
.hero-description {
    font-size: 18px;
    color: #4B5563;
    line-height: 1.6;
    max-width: 768px;
    margin: 0 0 48px 0;
    width: 100%;
}

/* ---- مؤشرات السلايدر (الـ Dots البرتقالي بالكامل) ---- */
.hero-slider-dots {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    justify-content: flex-start;
}

.trad-dot {
    width: 8px;
    height: 8px;
    background: #E63631;
    border-radius: 50%;
    transition: all 0.3s ease;
}


/* ---- العلامات المائية الخلفية ---- */
.hero-watermark {
    position: absolute;
    pointer-events: none;
    opacity: 0.08;
    z-index: 1;
}

/* الأيقونة الشمال فوق */
.watermark-left {
    top: 40px;
    left: 60px;
    transform: rotate(-15deg);
}

/* الأيقونة اليمين تحت (طفاية الحريق) تم زحزحتها لليسار */
.watermark-bottom {
    bottom: 40px;
    right: 320px; /* 👈 غيرناها من 141px إلى 320px عشان تتزحزح شمال وتبعد عن بداية النص */
    transform: rotate(12deg);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .hero-container {
        padding: 0 40px;
    }

    .watermark-bottom {
        right: 180px; /* زحزحة متناسقة على الشاشات المتوسطة */
    }
}

@media (max-width: 768px) {
    .hero-container {
        padding: 0 20px;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-description {
        font-size: 16px;
    }

    .watermark-left {
        top: 10px;
        left: 10px;
        width: 120px;
        height: 120px;
    }

    .watermark-bottom {
        bottom: 20px;
        right: 40px;
        width: 100px;
        height: 100px;
    }
}

/*-------------- second section styles--------------- */
/* ---- الحاوية الرئيسية ---- */
.brands-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #FFFFFF;
    padding: 64px 0;
    display: flex;
    justify-content: center;
}
.brands-section-inner {
    max-width: 1216px;
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.brands-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    /* ✅ شيل max-width و padding من هنا لأنهم انتقلوا للـ inner */
}

/* ---- تصميم الكارد المفرد ---- */
.brand-card {
    box-sizing: border-box;
    width: 100%;
    min-height: 340px; /* 👈 زودنا الطول الإجمالي شوية ليعطي مساحة مريحة للمحتوى */
    background: #FFFFFF;
    border: 1px solid #DEE2E6;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    position: relative; /* 👈 أساسي لتثبيت العناصر الداخلية */
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

    /* هوفر الكارد وتلاشي البوردر الافتراضي */
    .brand-card:hover {
        box-shadow: 0px 12px 24px rgba(224, 32, 32, 0.08);
        border-color: transparent;
    }

    /* البوردر المتدرج الخارجي للهوفر */
    .brand-card::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(135deg, #CC0000 0%, #701470 40%, #1A44A0 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .brand-card:hover::after {
        opacity: 1;
    }

/* ---- حاوية الهيدر (أصبحت بارتفاع ثابت لضمان المساحة) ---- */
.card-header-row {
    position: relative;
    width: 100%;
    height: 101px; /* 👈 نفس ارتفاع كونتينر الصورة عشان تحافظ على مساحتها */
    margin-bottom: 24px;
}

/* 💥 حاوية صوره اللوجو (مدمجة Absolute ومثبتة يميناً بشكل قاطع) 💥 */
.brand-img-holder {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0; /* 👈 يجبرها تلزق يمين مهما كان اتجاه المتصفح */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 109px;
    height: 101px;
    background: #FFFFFF;
    border: 1px solid #DEE2E6;
    border-radius: 16px;
    padding: 8px;
    transition: border-color 0.3s ease;
}

    .brand-img-holder img {
        width: 65px;
        height: 89px;
        object-fit: contain;
    }

    /* البوردر المتدرج لحاوية اللوجو */
    .brand-img-holder::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(135deg, #CC0000 0%, #1A44A0 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

.brand-card:hover .brand-img-holder {
    border-color: transparent;
}

    .brand-card:hover .brand-img-holder::after {
        opacity: 1;
    }

/* 💥 أيقونة اللينك الخارجي (مدمجة Absolute ومثبتة شمالاً بشكل قاطع) 💥 */
.icon-external {
    position: absolute;
    top: 0; /* محاذاة علوية مع اللوجو */
    left: 0; /* 👈 يجبرها تلزق شمال مهما حصل */
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6C757D;
    transition: color 0.3s ease;
    z-index: 2;
}

.brand-card:hover .icon-external {
    color: #CC0000;
}

/* ---- محتوى تفاصيل الكارد ---- */
.card-body-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    width: 100%;
    flex-grow: 1;
}

/* اسم البراند بالعربي */
.brand-name {
    font-size: 20px;
    font-weight: 700;
    color: #1F2261;
    margin: 0 0 12px 0;
    width: 100%;
    transition: color 0.3s ease;
}

.brand-card:hover .brand-name {
    color: #CC0000;
}

/* الوصف المترجم للعربي */
.brand-desc {
    font-size: 14px;
    color: #6C757D;
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: right;
    width: 100%;
}

/* ---- البادجات السفلية ---- */
.badge-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    margin-top: auto;
    margin-inline-start: auto; /* بتدفع البادج لأقصى اليسار تلقائياً */
}

.brand-badge {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 4px 12px;
    height: 28px;
    background: #F8F9FA;
    border-radius: 4px;
    border: 1px solid #DEE2E6;
    color: #1F2261;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
}

/* ---- شاشات الريسبونسيف ---- */
@media (max-width: 992px) {
    .brands-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 600px) {
    .brands-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .brand-card {
        padding: 20px;
        min-height: auto;
    }
}
<!--
/*--------------------------- third section ----------------------------------- */
/* ---- السكشن الخارجي الكبير ---- */
.cta-help-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* سنتر العناصر أفقياً */
    justify-content: center; /* سنتر العناصر رأسياً */
    padding: 64px 20px; /* الـ padding العلوي 64px حسب الفيجما، والجانبي مرن للشاشات */
    width: 100%;
    min-height: 324px; /* الارتفاع الإجمالي من الفيجما */
    background: #F8F9FA; /* الخلفية الرمادية الفاتحة من البيانات */
}

/* ---- الحاوية الداخلية (الكونتينر) ---- */
.cta-help-container {
    box-sizing: border-box;
    max-width: 1280px; /* العرض الأقصى من الفيجما */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* جلب كل المحتوى في المنتصف تماماً */
    text-align: center;
}

/* ---- العنوان الرئيسي (Heading 2) ---- */
.cta-help-title {
    font-size: 28px; /* حجم مناسب ومطابق لنسب الصورة */
    font-weight: 700;
    color: #1F2261; /* الكحلي المعتمد في التصميم */
    margin: 0 0 16px 0; /* مسافة سفلية تفصله عن البراجراف */
    line-height: 1.3;
}

/* ---- الوصف (Paragraph) ---- */
.cta-help-desc {
    max-width: 672px; /* العرض الثابت من الفيجما للحفاظ على السطور */
    width: 100%;
    font-size: 16px;
    color: #6C757D; /* الرمادي الخاص بالنصوص الثانوية */
    line-height: 1.6;
    margin: 0 0 32px 0; /* مسافة سفلية تفصله عن الزرار */
}

/* ---- الزرار (Link) وتأثير الهوفر المطلوب ---- */
.cta-help-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 148.55px; /* العرض بالظبط من الفيجما */
    height: 56px; /* الارتفاع بالظبط من الفيجما */
    border-radius: 4px; /* البوردر ريديس من الفيجما */

    background: transparent; /* في الحالة العادية الخلفية شفافة ليظهر الجريدينت */
    color: #1F2261; /* لون النص كحلي في الحالة العادية */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

    /* صنع البوردر المتدرج (Gradient Border) للزرار في الحالة العادية */
    .cta-help-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 4px;
        padding: 1px; /* سمك البوردر */
        background: linear-gradient(135deg, #CC0000 0%, #1A44A0 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        transition: opacity 0.3s ease;
        z-index: -1;
    }

    /* 💥 تأثير الهوفر المطلوب (Hover State) 💥 */
    .cta-help-btn:hover {
        background-color: #E63631; /* الباك جراوند تتحول للأحمر المطلوب */
        color: #FFFFFF; /* لون النص يتحول للأبيض */
        border-color: #E63631;
    }

        /* إخفاء البوردر المتدرج عند الهوفر عشان ما يداخلش مع اللون الأحمر */
        .cta-help-btn:hover::after {
            opacity: 0;
        }

/* ---- شاشات الموبايل (Responsive) ---- */
@media (max-width: 768px) {
    .cta-help-title {
        font-size: 22px;
    }

    .cta-help-desc {
        font-size: 14px;
        padding: 0 10px;
    }

    .cta-help-section {
        padding: 48px 20px;
        min-height: auto;
    }
}

/* ============================================
             Certificates Page style 
   ============================================ */

/*------------------------- first section styles--------------- */
/* ---- السكشن الخارجي الملون ---- */
.page-hero-section {
    box-sizing: border-box;
    width: 100%;
    height: 620px; /* الارتفاع الكلي المعتمد بالفيجما */
    background: background: linear-gradient(135deg, #F9FAFB 0%, #FFF 50%, #F9FAFB 100%);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 128px; /* بداية ظهور الحاوية من الأعلى */
    position: relative;
    overflow: hidden; /* لمنع حدوث سكرول جانبي بسبب الووتر مارك */
    direction: rtl; /* 👈 توجيه الصفحة بالكامل من اليمين للشمال */
}

/* ---- الحاوية الداخلية للمحتوى ---- */
.hero-content-container {
    box-sizing: border-box;
    max-width: 1280px;
    width: 100%;
    padding: 0 32px 0 352px; /* المسافات الجانبية بالملي من الفيجما */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* لزق كل العناصر باليمين تماماً */
    text-align: right; /* محاذاة النص لليمين */
    position: relative;
}

/* ---- حاوية الأيقونة الزرقاء السيركل ---- */
.hero-icon-holder {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #2E3192 0%, #1F2261 100%);
    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px; /* مسافة تفصلها عن العنوان */
}

/* ---- العنوان الرئيسي H1 ---- */
.hero-main-title {
    font-size: 40px; /* حجم فخم ومناسب للـ Hero */
    font-weight: 800;
    color: #1F2261;
    margin: 0 0 24px 0;
    line-height: 1.2;
    width: 100%;
}

/* ---- الخط الملون المتدرج تحت العنوان ---- */
.hero-gradient-line {
    width: 120px;
    height: 6px;
    background: linear-gradient(90deg, #1F2261 12.98%, #E63631 47.6%);
    border-radius: 10px;
    margin-bottom: 32px; /* مسافة تفصله عن الباراجراف */
}

/* ---- الباراجراف الوصفي ---- */
.hero-paragraph-certi-desc {
    max-width: 768px; /* العرض الأقصى للسطور من الفيجما */
    font-size: 18px;
    color: #4A4A4A;
    line-height: 1.7;
    margin: 0 0 48px 0; /* مسافة تفصله عن الدوتس */
}

/* ---- حاوية النقاط (Dots) ---- */
.hero-dots-certi-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-end;
}

.hero-dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #2E3192 0%, #1F2261 100%);
    border-radius: 50%;
}

/* =======================================================
   💥 مناطق العلامات المائية (Watermarks) كخلفيات ثابتة 💥
   ======================================================= */

/* 1. الووتر مارك العلوية (شمال فوق) */
.watermark-top-left {
    position: absolute;
    top: 52px;
    left: 40px; /* مرمية في أقصى اليسار فوق */
    transform: rotate(108.816deg); /* الدوران المذكور في الفيجما */
    opacity: 0.15; /* تقليل الشفافية لتظهر كخلفية مائية ناعمة */
    pointer-events: none; /* عشان ما تمنعش الضغط على أي عنصر تحتها */
}

/* 2. الووتر مارك السفلية (تحت الباراجراف) */
.watermark-bottom-content {
    position: absolute;
    bottom: -40px;
    right: 200px; /* منسقة لتظهر خلف المحتوى وأسفل النص تماماً */
    opacity: 0.15;
    pointer-events: none;
}

/* ==========================================
   📱 شاشات الموبايل والتابلت (Responsive)
   ========================================== */
@media (max-width: 1024px) {
    .hero-content-container {
        padding: 0 40px; /* إلغاء البادينج الضخم على الشاشات المتوسطة لعدم خروج النص */
    }

    .watermark-bottom-content {
        right: 100px;
    }
}

@media (max-width: 768px) {
    .page-hero-section {
        height: auto;
        padding: 80px 20px 48px;
    }

    .hero-content-container {
        padding: 0;
    }

    .hero-main-title {
        font-size: 32px;
    }

    .hero-paragraph-desc {
        font-size: 16px;
    }

    .watermark-top-left, .watermark-bottom-content {
        opacity: 0.08; /* تقليل الشفافية أكتر على الموبايل عشان ما تغطيش على الكلام */
    }
}

/*------------------------- second section styles--------------- */
/*.institutional-certs-section {
    background-color: #FFF;
}*/

/* ---- سكشن الشهادات الخارجي ---- */
.institutional-certs-section {
    box-sizing: border-box;
    background: #FFFFFF;
    padding: 80px 0;
    display: flex;
    justify-content: center;
    direction: ltr; /* اتجاه اليسار لليمن بشكل أساسي ومريح */

    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Container الداخلي للسكشن */
.certs-main-container {
    max-width: 1280px;
    width: 100%;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* ---- حاوية الهيدر (تطبيق مقاسات الفيجما الدقيقة بـ خط Cairo و Segoe UI) ---- */
.certs-header-wrapper {
    width: 100%;
    max-width: 1216px;
    min-height: 84px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    text-align: center;
    box-sizing: border-box;
}

.certs-section-title {
    max-width: 335px;
    width: 100%;
    font-family: 'Cairo', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    color: #2E3192; /* اللون الأزرق من الفيجما */
    margin: 0;
}

.certs-section-subtitle {
    max-width: 672px;
    width: 100%;
    font-family: 'Cairo', Tahoma, Geneva, Verdana, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #6C757D; /* اللون الرمادي من الفيجما */
    margin: 0;
}

/* ---- شبكة عرض الكروت (تثبيت كاردين جنب بعض لـ 4 كروت) ---- */
.certs-grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 👈 يضمن وجود كاردين فقط جنب بعض في كل صف */
    gap: 24px; /* مسافة بينية مريحة جداً */
}

/* ---- كارت الشهادة المطور والمريح بصرياً ---- */
.cert-card {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.cert-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.cert-meta-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.cert-year-badge {
    font-size: 12px;
    font-weight: 700;
    color: #2E3192;
    background: #2E31921A;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.cert-title {
    font-size: 20px;
    font-weight: 700;
    color: #1F2261;
    margin: 4px 0 0 0;
}

.cert-subtitle {
    font-size: 13px;
    color: #E63631;
    font-weight: 500;
}

.cert-icon-box {
    width: 56px;
    height: 56px;
    background: rgba(230, 54, 49, 0.06);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

    .cert-icon-box svg path {
        transition: stroke 0.3s ease;
    }

.cert-body-description {
    font-size: 14px;
    color: #4A5568;
    line-height: 1.6;
    text-align: left;
    margin: 20px 0;
    flex-grow: 1;
}

.cert-card-footer {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.cert-type-tag {
    font-size: 12px;
    font-weight: 600;
    color: #4A5568;
    background: #F7FAFC;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #EDF2F7;
}

/* ---- تأثيرات الـ Hover الملوّنة والشادو الفخم ---- */
.cert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 20px 35px rgba(46, 49, 146, 0.08);
    border-color: transparent;
}

.cert-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, #2E3192 0%, #E63631 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

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

.cert-card:hover .cert-icon-box {
    background: #2E3192;
}

    .cert-card:hover .cert-icon-box svg path {
        stroke: #FFFFFF;
    }

.cert-card:hover .cert-year-badge {
    background: #E63631;
    color: #FFFFFF;
}

/* ---- Responsive للتوافق مع الموبايل والشاشات الصغيرة ---- */
@media (max-width: 992px) {
    .certs-grid-container {
        grid-template-columns: 1fr; /* يقلب كارد واحد تحت التاني في الشاشات الصغيرة لتجنب الضغط */
        gap: 20px;
    }
}

/*------------------------- third section styles---------------------------- */

/* ---- السكشن الخارجي للشهادات ---- */
.product-certs-section {
    box-sizing: border-box;
    background: #F0F1F9; /* لون الخلفية المريح المطلوب في الفيجما */
    padding: 80px 0; /* مسافة مريحة من الأعلى والأسفل */
    display: flex;
    justify-content: center;
    direction: ltr; /* التوجيه الافتراضي للكروت الأجنبية */

    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* حاوية السكشن الداخلية */
.product-certs-container {
    max-width: 1280px; /* العرض الثابت المتناسق للكونتينر */
    width: 100%;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 64px; /* مسافة ثابتة ومريحة جداً بين الهيدر والكروت */
}

/* ---- حاوية الهيدر (العنوان الرئيسي والفرعي في المنتصف تماماً) ---- */
.product-certs-header {
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

/* شهادات المنتجات */
.product-certs-title {
    max-width: 277px;
    width: 100%;
    font-family: 'Cairo', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    color: #2E3192; /* لون البراند المعتمد */
    margin: 0;
}

/* العنوان الفرعي الشارح */
.product-certs-subtitle {
    font-family: 'Cairo', Tahoma, Geneva, Verdana, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    color: #6C757D;
    margin: 0;
}

/* ---- شبكة الكروت (Grid System) ---- */
.product-certs-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 كروت في الصف بالتساوي */
    gap: 24px; /* مسافة مريحة تمنع التداخل */
}

/* ---- كارد الشهادة المطور ---- */
.product-cert-card {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #DEE2E6;
    border-radius: 16px;
    padding: 24px;
    min-height: 126px; /* الطول المطلوب في الفيجما */
    display: flex;
    flex-direction: row; /* يضمن بقاء الصورة على اليمين والنصوص على اليسار */
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* حاوية النصوص الداخلية للكارد */
.prod-cert-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 6px;
    flex-grow: 1;
}

/* اسم الشهادة داخل الكارد */
.prod-cert-name {
    font-family: 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1F2261;
    margin: 0;
}

/* الوصف القصير للشهادة */
.prod-cert-desc {
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #6C757D;
    line-height: 1.4;
    margin: 0;
}

/* ---- حاوية الصورة/اللوجو المظبوطة بالظبط ---- */
.prod-cert-img-box {
    box-sizing: border-box;
    width: 64px;
    height: 64px;
    background: #F8F9FA;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* يمنع انضغاط الصورة مهما صغر حجم الكارد */
    transition: all 0.3s ease;
}

    /* تنسيق الصورة الداخلية الثابت */
    .prod-cert-img-box img {
        width: 46px;
        height: 46px;
        object-fit: contain; /* يضمن عدم تشوه اللوجو ويحافظ على أبعاده */
    }

/* ========================================================
   ✨ تأثير الـ Hover الذكي والفاخر ✨
   ======================================================== */
.product-cert-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 12px 24px rgba(46, 49, 146, 0.06);
    border-color: #2E3192; /* تحول البوردر الخارجي خفيفاً للون البراند الأزرق */
}

    .product-cert-card:hover .prod-cert-img-box {
        background: #FFFFFF;
        border-color: #2E3192;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.04);
    }

/* ========================================================
   📱 Responsive المتجاوب تماماً مع الشاشات
   ======================================================== */
@media (max-width: 1200px) {
    .product-certs-grid {
        grid-template-columns: repeat(2, 1fr); /* كاردين في الصف لشاشات التابلت الكبيرة */
    }
}

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

    .product-certs-container {
        padding: 0 16px;
        gap: 40px;
    }

    .product-certs-title {
        font-size: 28px;
    }
}

/*------------------------- fourth section styles---------------------------- */
/* ---- السكشن الخارجي الممتد ---- */
.official-certs-section {
    box-sizing: border-box;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
    padding: 80px 0;
    display: flex;
    justify-content: center;
    direction: ltr; /* لضمان التوزيع الصحيح للشبكة الافتراضية للـ Grid */
}

/* حاوية السكشن الأساسية */
.official-certs-container {
    max-width: 1280px;
    width: 100%;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* ---- حاوية الهيدر (العناوين متمركزة تماماً بمقاسات الفيجما) ---- */
.official-certs-header {
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.official-certs-title {
    max-width: 462px;
    width: 100%;
    font-family: 'Cairo', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    color: #2E3192;
    margin: 0;
}

.official-certs-subtitle {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #6C757D;
    margin: 0;
}

/* ---- شبكة عرض الكروت (Grid لـ 5 كروت بطريقة انسيابية) ---- */
.official-certs-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 كروت في الصف بشكل متناسق جداً */
    gap: 20px;
}

/* ---- الـ Card الأساسي المطور عمودياً ---- */
.official-cert-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 230.39px; /* نفس عرض الفيجما بالظبط */
    height: 346.52px;    /* نفس ارتفاع الفيجما بالظبط */
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}



/* ---- 1. حاوية الصورة العلوية الرمادية ---- */
.official-card-img-wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 304.52px; /* الارتفاع الدقيق من الفيجما */
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    overflow: hidden;
}

/* أيقونة التثبيت/التميز العلوية في الكورنر الشمال فوق */
.official-corner-badge {
    position: absolute;
    width: 32px;
    height: 32px;
    left: 9px;
    top: 9px;
    background: #2E3192; /* الخلفية الزرقاء الافتراضية */
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: all 0.3s ease;
}

.official-corner-badge svg path {
    transition: all 0.3s ease;
}

/* الصورة الحقيقية للشهادة المتمركزة بالداخل */
.official-main-img {
    width: 192.39px;
    height: 268.51px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
}

/* ---- 2. حاوية اسم الشهادة السفلية البيضاء ---- */
.official-card-footer-box {
    box-sizing: border-box;
    width: 100%;
    height: 42px; /* المتبقي المظبوط لارتفاع الكارد */
    background: #FFFFFF;
    border-top: 1px solid #F3F4F6;
    display: flex;
    flex-direction: row-reverse; /* 👈 لتبدأ النصوص من اليمين (العربي) بشكل متزن وبسيط */
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
    position: relative;
}

/* نص اسم الشهادة */
.official-cert-name {
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #4A5568; /* لون رمادي داكن افتراضي مريح للعين */
    margin: 0;
    text-align: right;
    width: 100%;
    transition: all 0.3s ease;
}

.official-cert-card-link {
    cursor: pointer;
}

/* أيقونة التحميل المخفية وتظهر في اليسار بالأسفل */
.official-download-icon {
    cursor: pointer;
    position: absolute;
    left: 14px;
    opacity: 0; /* مخفية افتراضياً */
    transform: translateX(-10px); /* حركة إزاحة خفيفة تظهر عند الهوفر */
    display: flex;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.official-main-pdf-viewer {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    /* تريكة لمنع المتصفح من إظهار الخلفية السوداء */
    object-fit: cover;
}


/* ========================================================
   ⚡ حركات السحر والتفاعل عند الـ Hover (مظبوطة بالملي) ⚡
   ======================================================== */

/* أ. تغيير البوردر الخارجي للكارد ليتحول للون البراند الملون */
.official-cert-card:hover {
    border-color: #2E3192;
    transform: translateY(-6px);
    box-shadow: 0px 20px 25px -5px rgba(46, 49, 146, 0.1);
}



/* ب. تغيير لون خلفية الأيقونة العلوية لتصبح حمراء ملوكة عند الهوفر */
.official-cert-card:hover .official-corner-badge {
    background: #E63631; /* تحول اللون للأحمر الفخم */
}

/* جـ. تغيير لون خط اسم الشهادة للأزرق ويتحرك لليسار قليلاً لإفساح مجال للأيقونة */
.official-cert-card:hover .official-cert-name {
    color: #2E3192;
    padding-right: 4px; /* زحزحة خفيفة جداً لإبراز الحركة */
}

/* د. ظهور أيقونة التحميل في الكورنر الشمال تحت بسلاسة فائقة */
.official-cert-card:hover .official-download-icon {
    opacity: 1;
    transform: translateX(0);
}


/* ========================================================
   📱 Responsive متجاوب بالكامل في الشاشات المختلفة
   ======================================================== */
@media (max-width: 1200px) {
    .official-certs-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 كروت في الصف للتابلت الكبيرة */
        justify-items: center;
    }
}

@media (max-width: 768px) {
    .official-certs-grid {
        grid-template-columns: repeat(2, 1fr); /* كاردين في الصف للموبايل */
        gap: 16px;
    }
    .official-certs-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .official-certs-grid {
        grid-template-columns: 1fr; /* كارد واحد كامل العرض للشاشات الصغيرة جداً */
    }
}
/*------------------------- fifth section styles---------------------------- */
/* إعدادات السكشن الأساسية */
.quality-commitment-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #FFFFFF;
    padding: 80px 0;
    direction: rtl; /* 🎯 إجبار الاتجاه من اليمين لليسار للواجهة العربية */
    font-family: 'cairo', Tahoma, Geneva, Verdana, sans-serif;
}

/* الحاوية المركزية المقيدة بمقاس الفيجما */
.quality-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

/* الهيدر العلوي (العناوين) */
.quality-header {
    text-align: center;
    margin-bottom: 64px;
}

.quality-title {
    font-size: 32px;
    font-weight: 700;
    color: #2E3192; /* الأزرق الفخم الخاص بالشركة */
    margin: 0 0 12px 0;
}

.quality-subtitle {
    font-size: 16px;
    color: #777777;
    margin: 0;
}

/* شبكة المميزات التفاعلية */
.quality-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 كروت في الصف تلقائياً */
    gap: 48px 32px; /* مسافة عمودية وأفقية مريحة للعين */
}

/* الكارد الفردي لكل ميزة */
.quality-feature-item {
    display: flex;
    flex-direction: row; /* يضمن الأيقونة على اليمين والكلام على اليسار */
    align-items: flex-start;
    gap: 16px;
}

/* حاوية الأيقونة */
.feature-icon-wrapper {
    flex-shrink: 0;
    margin-top: 4px; /* موازنة أوتوماتيكية مع السطر الأول للعنوان */
}

    .feature-icon-wrapper svg {
        display: block;
        width: 24px;
        height: 24px;
    }

/* النصوص الداخلية للميزة */
.feature-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left; /* 🎯 لأن نصوص المميزات بالإنجليزية فمحاذاتها لليسار */
    direction: ltr; /* إجبار النصوص الإنجليزية تقرأ من اليسار لليمين بشكل سليم */
}

.feature-title {
    font-size: 18px;
    font-weight: 600;
    color: #2E3192;
    margin: 0 0 8px 0;
}

.feature-desc {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}

/* ==========================================
   📱 شاشة متجاوبة (Responsive) لجميع الأجهزة
   ========================================== */

/* للشاشات المتوسطة (التابلت واللابتوب الصغير) */
@media (max-width: 992px) {
    .quality-features-grid {
        grid-template-columns: repeat(2, 1fr); /* كارتين بس في الصف */
        gap: 32px 24px;
    }
}

/* للشاشات الصغيرة (الموبايل) */
@media (max-width: 600px) {
    .quality-commitment-section {
        padding: 40px 0;
    }

    .quality-header {
        margin-bottom: 40px;
    }

    .quality-title {
        font-size: 26px;
    }

    .quality-features-grid {
        grid-template-columns: 1fr; /* كارت واحد مفرود بالكامل */
        gap: 28px;
    }
}
/*-------------------- sixth section--------------------*/

.docs-availability-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 80px 0;
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 50%, #EFF6FF 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    direction: rtl; /* اتجاه عربي صارم */
    font-family: 'cairo', Tahoma, Geneva, Verdana, sans-serif;
}

.docs-card-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* تحول لـ column لأن الأيقونة أصبحت مدمجة داخلياً */
    padding: 40px;
    max-width: 896px;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid #F3F4F6;
    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.05), 0px 8px 10px -6px rgba(0, 0, 0, 0.05);
    border-radius: 24px;
}

.docs-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 🎯 الحاوية الجديدة لسطر العنوان والأيقونة */
.docs-title-with-icon {
    display: flex;
    flex-direction: row;
    align-items: center; /* تضمن السنترة الرأسية للأيقونة مع الكلمة */
    gap: 16px; /* مسافة مناسبة بين المربع الأحمر والكلام */
    margin-bottom: 4px;
}

/* العنوان الرئيسي باللون الأزرق */
.docs-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #2E3192;
    margin: 0;
}

/* 🎯 المربع الملون الجديد باللون الأحمر المطلوب */
.docs-icon-red-box {
    flex-shrink: 0;
    width: 56px; /* صغرنا الحجم قليلاً لتتناسق بصرياً في سطر العنوان */
    height: 56px;
    background: linear-gradient(135deg, #3B3F9A 0%, #79386E 50%, #E63631 100%);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* ظل أحمر خفيف ناعم يعطي عمق للمربع */
    box-shadow: 0px 8px 16px -4px rgba(230, 54, 49, 0.3);
}

    .docs-icon-red-box svg {
        width: 28px;
        height: 28px;
    }

.docs-card-desc {
    font-size: 15px;
    color: #4B5563;
    line-height: 1.7;
    margin: 0;
}

.docs-card-subdesc {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.7;
    margin: 0;
}

/* ==========================================
   📱 Responsive
   ========================================== */
@media (max-width: 600px) {
    .docs-card-container {
        padding: 32px 20px;
        margin: 0 16px;
    }

    .docs-title-with-icon {
        gap: 12px;
    }

    .docs-card-title {
        font-size: 20px;
    }

    .docs-icon-red-box {
        width: 48px;
        height: 48px;
    }

        .docs-icon-red-box svg {
            width: 24px;
            height: 24px;
        }
}

/*-------------------- seventh section--------------------*/

/* السكشن بالكامل وبداية التنسيق */
.compliance-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #FFFFFF;
    padding: 80px 0;
    direction: rtl; /* 🎯 إجبار التوجه العربي العام للسكشن */
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

/* حاوية السكشن الرئيسية */
.compliance-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

/* الهيدر العلوي المتناسق مع الفيجما بالملي */
.compliance-header {
    text-align: center;
    margin-bottom: 64px;
}

.compliance-main-title {
    font-size: 36px;
    line-height: 40px;
    font-weight: 700;
    color: #2E3192;
    margin: 0 0 16px 0;
}

.compliance-subtitle {
    font-size: 20px;
    line-height: 28px;
    color: #6C757D;
    max-width: 768px;
    margin: 0 auto;
}

/* حاوية تجميع الكروت (تضمن التوزيع الأفقي المتساوي) */
.compliance-cards-wrapper {
    display: flex;
    flex-direction: row; /* الكروت جنب بعض (السعودي أولاً ثم الدولي) */
    gap: 32px;
    width: 100%;
}

/* الاستايل المشترك للكروت */
.compliance-card {
    box-sizing: border-box;
    flex: 1; /* الكاردين يقسموا المساحة بالنص بالظبط */
    min-height: 210px;
    padding: 32px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 🎯 كارد المعايير السعودية (أحمر) */
.card-saudi {
    background: #FEF2F2;
    border: 1px solid rgba(230, 54, 49, 0.2);
}

/* 🎯 كارد المعايير الدولية (أزرق/بنفسجي) */
.card-international {
    background: #F0F1F9;
    border: 1px solid rgba(46, 49, 146, 0.2);
}

/* عناوين الكروت الداخلية */
.compliance-card-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.card-saudi .compliance-card-title {
    color: #E63631; /* أحمر متناسق */
}

.card-international .compliance-card-title {
    color: #2E3192; /* أزرق براند */
}

/* القوائم الداخلية */
.compliance-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* السطر الفردي داخل القائمة */
.compliance-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end; /* 🎯 تريكة قوية: تضمن محاذاة السطر لليمين بالرغم من أن النص إنجليزي */
    gap: 12px;
    width: 100%;
}

/* نصوص المعايير الإنجليزية */
.compliance-text {
    font-size: 15px;
    color: #4B5563;
    font-weight: 500;
    text-align: right; /* المحاذاة لليمين بجانب علامة الصح */
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* حاوية الأيقونة لتثبيت الأبعاد */
.compliance-icon-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .compliance-icon-box svg {
        display: block;
        width: 20px;
        height: 20px;
    }


/* ==========================================
   📱 الاستجابة الذكية للشاشات والموبايل (Responsive)
   ========================================== */
@media (max-width: 992px) {
    .compliance-cards-wrapper {
        flex-direction: column; /* الكروت تحت بعض في الشاشات الصغيرة */
        gap: 24px;
    }

    .compliance-main-title {
        font-size: 30px;
    }

    .compliance-subtitle {
        font-size: 18px;
    }
}

@media (max-width: 600px) {
    .compliance-container {
        padding: 0 16px;
    }

    .compliance-card {
        padding: 24px;
    }
}

/* ============================================
             projects Page style 
   ============================================ */


/* ============================================
             Products Page style 
   ============================================ */

/*-------------------------first section ----------------------------*/
/* الأنماط الأساسية لقسم الـ Hero */
.page-hero {
    position: relative; /* ضروري جداً لتموضع العلامات المائية المطلقة */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 628px;
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 50%, #F9FAFB 100%);
    padding: 0px 0 32px 0;
    direction: rtl; /* 🎯 تظبيط التوجه العربي العام للسكشن */
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    box-sizing: border-box;
    overflow: hidden; /* تمنع خروج العلامات المائية عن إطار الصفحة */
}

/* الحاوية الداخلية وضمان مرونتها وانسيابيتها يميناً */
.hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 🎯 محاذاة كافة المحتويات لليمين مباشرة */
    text-align: right;
    box-sizing: border-box;
    position: relative;
    z-index: 2; /* لتكون المحتويات فوق العلامات المائية */
}

/* حاوية الأيقونة العلوية الاحترافية */
.hero-icon-wrapper {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #2E3192 0%, #1F2261 100%);
    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

    .hero-icon-wrapper svg {
        width: 32px;
        height: 32px;
        display: block;
    }

/* عنوان الكتالوج الرئيسي */
.hero-title {
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    color: #2E3192;
    margin: 0 0 16px 0;
}

/* بار التدرج اللوني أسفل الـ H1 */
.hero-gradient-bar {
    width: 120px;
    height: 6px;
    background: linear-gradient(90deg, #1F2261 12.98%, #E63631 47.6%);
    border-radius: 100px;
    margin-bottom: 32px;
}

/* الفقرة النصية المفسرة */
.hero-paragraph {
    font-size: 20px;
    line-height: 32px;
    color: #6C757D;
    max-width: 768px;
    margin: 0 0 48px 0;
}

/* حاوية نقاط التنقل التبادلية (Dots) */
.dots-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: auto;
    align-self: flex-start;
    margin-right: 0;
}
/* تصميم نقطة الـ Dot الفردية */
.prod-dot {
    width: 8px;
    height: 8px;
    background: #1F2261;
    border-radius: 50%;
    transition: all 0.3s ease;
}



/* ==========================================
   🧩 التحكم في تموضع العلامات المائية (Watermarks)
   ========================================== */
.watermark {
    position: absolute;
    pointer-events: none; /* تمنع التداخل مع أي ضغطات للماوس */
    opacity: 0.06; /* شفافة وخفيفة جداً للحفاظ على مقروئية النصوص */
    z-index: 1;
}

/* العلامة المائية الأولى (أعلى يسار الصفحة) */
.watermark-top-left {
    top: 40px;
    left: 40px;
}

/* العلامة المائية الثانية (أسفل المحتوى جهة اليسار) */
.watermark-bottom-content {
    bottom: 0px;
    left: 15%;
}


/* ==========================================
   📱 تجاوب السكشن بالكامل مع شاشات الموبايل
   ========================================== */
@media (max-width: 992px) {
    .page-hero {
        min-height: auto;
        padding: 96px 0 48px 0;
    }

    .hero-title {
        font-size: 38px;
        line-height: 46px;
    }

    .hero-paragraph {
        font-size: 18px;
        line-height: 28px;
    }

    .watermark {
        opacity: 0.03; /* تقليل الشفافية أكثر في الشاشات الصغيرة لتفادي زحام الخلفية */
    }
}

@media (max-width: 600px) {
    .hero-container {
        padding: 0 20px;
    }

    .hero-title {
        font-size: 32px;
        line-height: 40px;
    }

    .watermark-top-left {
        top: 20px;
        left: -20px;
    }
}

/*------------------------ second section ---------------------------------*/
/* الأنماط العامة للموديول المخصص (بدون لمس الـ body الخارجي) */
.products-module-wrapper {
    box-sizing: border-box;
    direction: rtl; /* تفعيل اتجاه اليمين محلياً وبشكل صارم */
    text-align: right;
    width: 100%;
}

    .products-module-wrapper * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

/* ========================================== */
/* 1. ضبط أبعاد الـ Header العلوي والبادنج من فيجما */
/* ========================================== */
.projects-page-header {
    width: 100vw;
    position: relative;
    right: calc(-50vw + 50%);
    left: auto;
    margin-left: 0;
    margin-right: 0;
    /* جعل الارتفاع مرن لو الأزرار نزلت سطر جديد في الشاشات المتوسطة */
    height: auto;
    min-height: 142px;
    padding: 20px 123px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.frame-8 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 16px;
    width:100%;
    height: 64px;
}

.all-brands-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* مسافة ثابتة بين أيقونة اليمين والنص */
    gap: 12px;
    /* تزويد الـ padding الجانبي ليعطي مساحة مريحة للـ wrapper الجديد */
    padding: 0px 12px 0px 24px;
    width: 250px; /* كبرنا العرض من 213 لـ 250 ليناسب الأيقونتين والنص بشكل مريح */
    height: 64px;
    background: linear-gradient(90deg, #E63631 0%, #E23530 12.5%, #DF332E 25%, #DB322D 37.5%, #D7302C 50%, #D42F2B 62.5%, #D02E29 75%, #CD2C28 87.5%, #C92B27 100%);
    box-shadow: 0 20px 25px -5px rgba(230, 54, 49, 0.30), 0 8px 10px -6px rgba(230, 54, 49, 0.30);
    border-radius: 20px;
    border: none;
    cursor: pointer;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 16px;
}

/* حاوية الأيقونة اليمنى (المبنى) بالخلفية الشفافة والـ Radius المطلوبة */
.brand-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.20);
    flex-shrink: 0; /* منع انضغاط الأيقونة */
}

/* نص الزرار */
.btn-text {
    white-space: nowrap;
}

/* حركة سحرية في الـ RTL: دفع السهم تماماً لأقصى اليسار المتاح */
.arrow-down-icon {
    margin-right: auto;
    flex-shrink: 0;
}

    .all-brands-btn:hover {
        background-color: #2E3192;
    }

.brands-options-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    white-space: nowrap;
    flex-grow: 1;
}

.brand-opt-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 26px;
    /* إلغاء الـ width الثابت (97px) عشان ما يقسمش الكلمة */
    width: auto;
    min-width: 97px; /* أقل عرض للزرار */
    height: 64px;
    /* السطر السحري لمنع انقسام اسم البراند على سطرين */
    white-space: nowrap;
    background: #FFFFFF;
    border: 2px solid #E5E7EB;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    color: #4B5563;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

    .brand-opt-btn:hover {
        border: 2px solid #2E3192;
        color: #2E3192;
        box-shadow: 0 20px 25px 0 rgba(0, 0, 0, 0.10), 0 8px 10px 0 rgba(46, 49, 146, 0.10);
    }

.brands-options-row::-webkit-scrollbar {
    display: none; /* إخفاء سكرول بار المتصفح لشكل أنظف */
}

    .brand-opt-btn.active {
        border: 2px solid #E63631;
        color: #E63631;
        background-color: rgba(230, 54, 49, 0.05);
    }

/* ========================================== */
/* 2. الـ Layout الرئيسي والدروب داون الجانبي الشجري الموجه لليمن */
/* ========================================== */
.main-content-container {
    display: flex;
    flex-direction: row;
    gap: 32px;
    max-width: 1562px;
    margin: 40px auto;
    padding: 32px;
}

.sidebar-tree-filter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    width: 288px;
    height: max-content;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.05);
    border-radius: 20px;
    flex-shrink: 0;
}

.tree-root-btn {
    width: 100%;
    height: 48px;
    background: linear-gradient(90deg, #E63631 0%, #2E3192 100%);
    box-shadow: 0px 4px 12px rgba(230,54,49,0.3);
    border-radius: 14px;
    border: none;
    color: white;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 12px;
    text-align: center;
    transition: opacity 0.2s;
}

    .tree-root-btn:hover {
        opacity: 0.9;
    }

    .tree-root-btn.active-tree-item {
        box-shadow: 0px 4px 16px rgba(46,49,146,0.35);
    }

.tree-dropdowns-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.tree-system-node {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    transition: border-color 0.2s;
}

    .tree-system-node.open {
        border-color: #2E3192;
    }

.tree-system-trigger {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    width: 100%;
    height: 48px;
    background: #F9FAFB;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    text-align: right;
    transition: background 0.2s, color 0.2s;
    box-sizing: border-box;
}

    .tree-system-trigger:hover {
        background: rgba(46,49,146,0.06);
        color: #2E3192;
    }

.tree-system-node.open .tree-system-trigger {
    background: rgba(46,49,146,0.08);
    color: #2E3192;
    border-bottom: 1px solid #E5E7EB;
}

.tree-system-trigger .arrow-icon {
    font-size: 10px;
    transition: transform 0.3s ease;
    color: #9CA3AF;
}

.tree-system-node.open .arrow-icon {
    transform: rotate(90deg);
    color: #2E3192;
}

.tree-categories-dropdown {
    display: none;
    flex-direction: column;
    padding: 6px 8px;
    background: #fff;
    gap: 2px;
}

.tree-system-node.open .tree-categories-dropdown {
    display: flex;
}

.tree-category-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    width: 100%;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: #6B7280;
    font-weight: 500;
    font-size: 13.5px;
    transition: background 0.15s, color 0.15s;
    box-sizing: border-box;
}

    .tree-category-item:hover {
        background: rgba(46,49,146,0.07);
        color: #2E3192;
    }

    .tree-category-item.active-category {
        background: rgba(46,49,146,0.12);
        color: #2E3192;
        font-weight: 600;
    }

/* ========================================== */
/* 3. شبكة المنتجات وتفاصيل الكروت من فيجما */
/* ========================================== */
.products-display-section {
    flex-grow: 1;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(282.66px, 1fr));
    gap: 24px;
}

.product-card {
    position: relative;
    width: 282.66px;
    height: 462.67px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto; /* للتوسيط في الشاشات الصغيرة */
}

.image-container {
    position: relative;
    width: 100%;
    height: 280.66px;
}

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

.brand-lbl {
    position: absolute;
    display: flex;
    flex-direction: row;
    display: flex;
    width: 74px;
    height: 28px;
    padding: 4px 12px;
    align-items: flex-start;
    right: 12px;
    top: 12px;
    border-radius: 33554400px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    font-size: 11px;
    font-weight: bold;
    color: #2E3192;
}

.product-title {
    display: block; 
    text-align: center; 
    width: 240.66px;
    margin: 6px auto 0 auto; 

    font-size: 18px; 
    font-style: normal;
    font-weight: 600;
    line-height: 26px; 
    color: #2E3192;
    white-space: normal; 
    overflow: visible;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 52px; 
}

.product-desc {
    position: absolute;
    width: 240.66px;
    right: 21px;
    top: 337.66px;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.4;
    /* Truncation - سطرين بس */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 36.4px; /* line-height(1.4) × font-size(13px) × 2 lines */
}

.view-details-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    position: absolute;
    width: 240.66px;
    height: 48px;
    right: 21px;
    top: 393.67px;
    border: 1px solid #E63631;
    border-radius: 37px;
    color: #E63631;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s;
}

    .view-details-btn:hover {
        background-color: #E63631;
        color: white;
    }

/* ========================================== */
/* 4. كود الـ Popup المعزول والمضمون للظهور بالمنتصف تماماً */
/* ========================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.brands-popup-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: 360px;
    height: max-content;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04);
    border-radius: 24px;
    overflow: hidden;
}

.popup-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    width: 100%;
    height: 59px;
    background: linear-gradient(90deg, #2E3192 0%, #E63631 100%);
    color: white;
    box-sizing: border-box;
}

    .popup-header h2 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
    }

.close-popup {
    background: none;
    border: none;
    color: white;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
}

.popup-body {
    width: 100%;
    padding: 16px 24px;
    box-sizing: border-box;
}

.popup-buttons-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.popup-brand-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    width: 100%;
    height: 40px;
    background: rgba(46, 49, 146, 0.08);
    border-radius: 16px;
    border: none;
    cursor: pointer;
    text-align: right;
    font-weight: 600;
    font-size: 14px;
    color: #2E3192;
    transition: all 0.2s;
    box-sizing: border-box;
}

    .popup-brand-item:hover {
        background-color: #E63631;
        color: white;
    }
.page-btn {
    min-width: 38px;
    height: 38px;
    border: 0.5px solid #ddd;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

    .page-btn:hover:not(:disabled) {
        background: #f0f0f0;
    }

    .page-btn.active-page {
        background: #E63631;
        color: #fff;
        border-color: #E63631;
    }

    .page-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

/* ========================================================== */
/* 5. الميديا كويري لضمان تجاوب التصميم بالكامل (Responsive Queries) */
/* ========================================================== */

/* شاشات اللاب توب المتوسطة والتابلت الكبيرة (أقل من 1200px) */
@media (max-width: 1200px) {
    .projects-page-header {
        padding: 0px 40px;
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .frame-8 {
        width: 100%;
        justify-content: space-between;
    }

    .main-content-container {
        padding: 0 40px;
        gap: 20px;
    }
}

/* شاشات التابلت (أقل من 992px) */
@media (max-width: 992px) {
    .main-content-container {
        flex-direction: column; /* نقل الفلتر الجانبي ليكون بالأعلى */
        align-items: center;
    }

    .sidebar-tree-filter {
        width: 100%; /* الفلتر ياخد عرض الصفحة بالكامل في التابلت والموبايل */
        max-width: 500px;
    }

    .products-display-section {
        width: 100%;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* تصغير مرن بسيط للكروت */
    }
}

/* شاشات الموبايل (أقل من 768px) */
@media (max-width: 768px) {
    .projects-page-header {
        padding: 16px;
    }

    .frame-8 {
        flex-direction: column; /* جعل الأزرار فوق بعضها في الموبايل */
        height: auto;
        width: 100%;
        gap: 12px;
    }

    .all-brands-btn {
        width: 100%; /* زر جميع البراندات يأخذ العرض كاملاً لجذب الانتباه */
        height: 54px;
    }

    .brands-options-row {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto; /* تفعيل السحب اللمسي للأزرار الأفقية السريعة */
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .brand-opt-btn {
        height: 54px;
        padding: 10px 20px;
    }

    .main-content-container {
        padding: 0 16px;
        margin: 20px auto;
    }

    .sidebar-tree-filter {
        width: 100%;
        max-width: 100%;
    }

    /* تهيئة البوب آب ليتناسب مع شاشة الموبايل الصغيرة جداً دون خروج */
    .brands-popup-container {
        width: 90%;
        max-width: 320px;
        height: 80vh; /* تحديد الطول بنسبة من الشاشة لمنع الاختفاء السفلية */
    }

    .popup-header {
        width: 100%;
    }

    .popup-buttons-list {
        height: calc(80vh - 90px);
    }

    .popup-brand-item {
        width: 100%;
    }
}
/* ============================================
             Product Details  Page style 
   ============================================ */
/*---------------------- first section --------------------*/


.back-navigation-bar {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 16px 80px;
    width: 100%;
    min-height: 59px;
    background: #F8F9FA;
    border-bottom: 1px solid #DEE2E6;
    box-sizing: border-box;
    max-width: 1280px;
}

.back-nav-container {
    display: flex;
    width: 100%;
    max-width: 1280px;
    height: 26px;
}

.back-to-products-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #E63631;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.2s;
}

    .back-to-products-btn:hover {
        transform: translateX(4px);
    }

.product-details-main-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 48px 80px;
    width: 100%;
    background: #FFFFFF;
    box-sizing: border-box;
}

.product-info-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1280px;
    gap: 64px;
}

/* عمود التفاصيل - اليمين */
.details-content-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    direction: rtl;
    text-align: right;
}

.product-brand-tag {
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
    font-weight: 700;
    color: #E63631;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.product-main-title {
    font-size: 32px;
    font-weight: 800;
    color: #2E3192;
    line-height: 1.3;
    margin-bottom: 16px;
    width: 100%;
    direction: ltr; /* للأسماء الإنجليزية تبقى LTR */
    text-align: right;
}

.system-badge-container {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 16px;
    background: #F8F9FA;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    margin-bottom: 32px;
}

.system-badge-text {
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
}

.whatsapp-quote-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    background: linear-gradient(90deg, #E63631 0%, #EF4B47 100%);
    box-shadow: 0px 8px 20px rgba(230, 54, 49, 0.25);
    border-radius: 16px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: opacity 0.2s, transform 0.2s;
    margin-bottom: 40px;
}

    .whatsapp-quote-btn:hover {
        opacity: 0.93;
        transform: translateY(-2px);
    }

.certificates-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    border-top: 1.5px solid #E5E7EB;
    padding-top: 28px;
    gap: 14px;
    direction: rtl;
}

.certificates-title {
    font-size: 16px;
    font-weight: 700;
    color: #1F2937;
}

.certificates-badges-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

.certificate-pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(230, 54, 49, 0.07);
    border-radius: 100px;
    color: #E63631;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid rgba(230, 54, 49, 0.15);
}

    .certificate-pill svg {
        flex-shrink: 0;
    }

/* عمود الصورة - اليسار */
.details-image-column {
    flex-shrink: 0;
    width: 520px;
}

.product-large-img-container {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #F8F9FA;
    border: 1px solid #E5E7EB;
    border-radius: 24px;
    overflow: hidden;
    padding: 32px;
}

.main-details-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.details-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #9CA3AF;
}

/* Responsive */
@media (max-width: 1024px) {
    .product-info-block {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .details-content-column,
    .details-image-column {
        width: 100%;
    }

    .product-large-img-container {
        aspect-ratio: 1 / 1;
    }

    .back-navigation-bar,
    .product-details-main-wrapper {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 640px) {
    .product-main-title {
        font-size: 24px;
    }

    .whatsapp-quote-btn {
        font-size: 14px;
    }
}
/*------------------------- second section ---------------------*/
.product-description-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* الـ Padding من فيجما: 49px فوق ويمين وشمال، وخلينا تحت 49px عشان التناسق عند التمدد */
    padding: 49px 49px 49px;
    gap: 24px;
    width: 100%;
    max-width: 1216px;
    /* السحر هنا: إلغاء الارتفاع الثابت (469px) وجعله مرن بالكامل على قد الكلام */
    height: max-content !important;
    min-height: auto;
    /* خلفية الـ Gradient الفخمة والـ Shadows والـ Border من فيجما بالملي */
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 50%, #F9FAFB 100%);
    border: 1px solid #E5E7EB;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    /* مسافة خارجية تفصل السيكشن عن اللي فوقه */
    margin-top: 40px;
}

/* عنوان "وصف المنتج" */
.description-heading {
    width: 100%;
    height: auto;
    font-size: 24px;
    font-weight: 700;
    color: #2E3192; /* اللون الأزرق الانيق المتناسق مع الهوية */
    text-align: right;
    margin: 0;
}

/* حاوية جلب نص الوصف */
.description-content {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #4B5563; /* لون نص مريح وقابل للقراءة */
    line-height: 1.8; /* مسافة مريحة بين السطور كالصورة تماماً */
    text-align: right;
    white-space: pre-line;
}

    .description-content p {
        margin: 0 0 16px 0; /* مسافة بين الفقرات لو النص كذا فقرة */
    }

        .description-content p:last-child {
            margin-bottom: 0;
        }

/* ستايل في حالة عدم وجود وصف */
.no-desc-text {
    color: #9CA3AF;
    font-style: italic;
}

/* توافق السيكشن مع الشاشات الصغيرة والموبايل */
@media (max-width: 768px) {
    .product-description-section {
        padding: 24px; /* تقليل المسافات الداخلية على الموبايل */
        gap: 16px;
    }

    .description-heading {
        font-size: 20px;
    }

    .description-content {
        font-size: 14px;
    }
}
/*-------------------- third section -------------------*/
.technical-specs-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
    max-width: 1216px;
    margin-top: 48px; /* مسافة تفصله عن سيكشن الوصف اللي فوقه */
}

/* عنوان المواصفات الفنية */
.specs-heading {
    width: 100%;
    font-size: 24px;
    font-weight: 700;
    color: #2E3192; /* نفس درجة الأزرق المعتمدة للهيدرز */
    text-align: right;
    margin: 0;
}

/* الصندوق الرمادي الكبير الحاضن للمواصفات */
.specs-container-box {
    box-sizing: border-box;
    width: 100%;
    padding: 33px 33px 24px; /* أبعاد البادينج من فيجما للتناسق */
    background: #F8F9FA;
    border: 1px solid #DEE2E6;
    border-radius: 16px;
}

/* نظام الجريد السحري لتوزيع المواصفات في عمودين متساويين */
.specs-grid-layout {
    display: grid;
    /* بيعمل عمودين متساويين كحد أقصى وعينهم على مساحة الـ 559px من فيجما */
    grid-template-columns: repeat(2, minmax(0, 559px));
    justify-content: space-between; /* يوزع العمودين يمين وشمال بالظبط */
    column-gap: 32px; /* المسافة الأفقية الفاصلة بين العمودين */
    row-gap: 0px; /* السطور هتحكم مسافاتها بالـ padding الداخلي */
}

/* ستايل السطر الواحد للميزة وقيمتها */
.spec-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* يرمي اسم الميزة شمال وقيمتها يمين */
    align-items: center;
    padding: 12px 0px; /* الـ padding الفيرتيكال من فيجما */
    height: 49px;
    border-bottom: 1px solid #DEE2E6; /* الخط الفاصل الرفيع من فيجما */
}

/* ستايل وخط الكلمة المفتاحية (مثل: Pump Type) */
.spec-label {
    font-size: 15px;
    font-weight: 500;
    color: #1F2937; /* لون داكن صريح وقابل للقراءة */
}

/* ستايل وخط القيمة الفنية للميزة (مثل: 88 - 335 PSI) */
.spec-value {
    font-size: 15px;
    font-weight: 600;
    color: #4B5563; /* لون رمادي فني منظم */
    text-align: right;
}

/* التجاوب الذكي مع الشاشات الصغيرة (الموبايل والتابلت) */
@media (max-width: 992px) {
    .specs-grid-layout {
        /* تحويل الجدول لعمود واحد مفرود لو المساحة صغرت عشان الكلام ميداخلش */
        grid-template-columns: 100%;
    }

    .specs-container-box {
        padding: 20px 20px 12px;
    }

    .spec-item {
        height: auto;
        padding: 16px 0;
    }
}
/*---------------------- fourth section ---------------------------*/
/* ========================================================== */
/* ستايل سيكشن عرض تفاصيل الـ Datasheet (RTL & Flexbox) */
/* ========================================================== */

.datasheet-section-wrapper {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 33px;
    gap: 32px;
    width: 100%;
    max-width: 1216px;
    height: auto; /* يجعل الحاوية مرنة على حسب الشاشات والمحتوى */
    min-height: 604px;
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
    border: 1px solid #E5E7EB;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    margin-top: 48px;
}

/* 1. الهيدر العلوي */
.datasheet-header-block {
    display: flex;
    flex-direction: row-reverse; /* يجعل الأيقونة في أقصى اليمين في بيئة الـ RTL */
    align-items: center;
    gap: 24px;
    width: 100%;
}

.datasheet-icon-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #E63631 0%, #E83A35 16.67%, #E93D39 33.33%, #EB413C 50%, #EC4440 66.67%, #EE4844 83.33%, #EF4B47 100%);
    box-shadow: 0px 10px 15px -3px rgba(230, 54, 49, 0.2), 0px 4px 6px -4px rgba(230, 54, 49, 0.1);
    border-radius: 16px;
    flex-shrink: 0;
}

.datasheet-titles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left; /* نصوص الداتا شيت بالإنجليزية كما بالصورة */
    width: 100%;
}

.datasheet-main-title {
    font-size: 24px;
    font-weight: 700;
    color: #2E3192; /* الأزرق الداكن الانيق لعلامة القوائم */
    margin: 0 0 6px 0;
}

.datasheet-sub-title {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    margin: 0;
}

/* 2. الصف الأوسط الحاضن للكروت الفنية */
.datasheet-cards-row {
    display: flex;
    flex-direction: row-reverse; /* اليمين (محتويات الشيت) والشمال (معلومات الشيت) */
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 24px;
}

/* الاستايل المشترك للكارتين من فيجما */
.datasheet-info-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px;
    gap: 16px;
    width: 563px; /* العرض الثابت الدقيق لفيجما */
    min-height: 346px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
}

.card-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1F2937;
    margin: 0 0 8px 0;
}

/* كارت اليمين: قائمة المحتويات وعلامات الصح الحمراء */
.datasheet-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .datasheet-features-list li {
        display: flex;
        /* التعديل السحري */
        flex-direction: row-reverse; /* يخلي النص الأول وبعده الأيقونة على الشمال */
        justify-content: flex-end; /* يزق السطر بالكامل يخليه يبدأ وينتهي في جهة الشمال */
        align-items: center;
        gap: 10px; /* مسافة شيك بين النص وعلامة الصح */
        width: 100%;
        font-size: 14px;
        font-weight: 500;
        color: #4B5563;
        text-align: left; /* محاذاة النص نفسه لليسار */
    }
/* أيقونة الـ Check المميزة باللون الأحمر */
.check-icon-red {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14.5341 6.66666C14.8385 8.16086 14.6215 9.71428 13.9193 11.0679C13.2171 12.4214 12.072 13.4934 10.6751 14.1049C9.27816 14.7164 7.71382 14.8305 6.24293 14.4282C4.77205 14.026 3.48353 13.1316 2.59225 11.8943C1.70097 10.657 1.26081 9.15148 1.34518 7.62892C1.42954 6.10635 2.03332 4.65872 3.05583 3.52744C4.07835 2.39616 5.45779 1.64961 6.96411 1.4123C8.47043 1.17498 10.0126 1.46123 11.3334 2.22333' stroke='%23E63631' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 7.33341L8 9.33341L14.6667 2.66675' stroke='%23E63631' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

/* كارت اليسار: جدول البيانات وحجم السطور الفاخرة */
.doc-info-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.doc-info-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0px;
    border-bottom: 1px solid #E5E7EB;
}

    .doc-info-row:last-child {
        border-bottom: none;
    }

.info-lbl-right {
    font-size: 14px;
    font-weight: 500;
    color: #9CA3AF;
}

.info-val-left {
    font-size: 14px;
    font-weight: 700;
    color: #1F2937;
}

/* 3. حاوية الأزرار السفلية (محاذية على اليمين تماماً في الـ RTL) */
.datasheet-footer-buttons {
    display: flex;
    flex-direction: row-reverse; /* ترتيب الأزرار لتبدأ من جهة اليمين */
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin-top: 12px;
}

/* زر التحميل الرئيسي */
.btn-download-sheet {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 321.94px; /* الأبعاد الدقيقة من فيجما */
    height: 60px;
    background: linear-gradient(90deg, #E63631 0%, #E83A35 16.67%, #E93D39 33.33%, #EB413C 50%, #EC4440 66.67%, #EE4844 83.33%, #EF4B47 100%);
    box-shadow: 0px 10px 15px -3px rgba(230, 54, 49, 0.2);
    border-radius: 20px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: opacity 0.2s, transform 0.2s;
}

/* زرار الواتس الأبيض */
.btn-whatsapp-sheet {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 259.47px; /* الأبعاد الدقيقة من فيجما */
    height: 60px;
    background: #FFFFFF;
    border: 2px solid #D1D5DC;
    border-radius: 20px;
    color: #374151;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.2s, transform 0.2s;
}

    /* حركات التفاعل (Hover Effects) */
    .btn-download-sheet:hover, .btn-whatsapp-sheet:hover {
        transform: translateY(-2px);
    }

.btn-download-sheet:hover {
    opacity: 0.95;
}

.btn-whatsapp-sheet:hover {
    background: #F9FAFB;
}

/* الاستجابة والتجاوب الذكي مع الشاشات الصغيرة */
@media (max-width: 1200px) {
    .datasheet-cards-row {
        flex-direction: column;
        align-items: center;
    }

    .datasheet-info-card {
        width: 100%;
    }

    .datasheet-footer-buttons {
        flex-direction: column-reverse;
        width: 100%;
    }

    .btn-download-sheet, .btn-whatsapp-sheet {
        width: 100%; /* تفرش بكامل العرض على الموبايل لشكل هندسي مريح */
    }

    .datasheet-header-block {
        flex-direction: column;
        text-align: center;
    }

    .datasheet-titles {
        align-items: center;
        text-align: center;
    }
}
/*-------------------- fifth section -----------------------*/
.technical-support-cta {
    width: 100%;
    max-width: 1216px;
    margin: 48px auto 0 auto; /* توسيط السيكشن ومسافة شيك من فوق */
    box-sizing: border-box;
}

.support-cta-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 292px; /* الارتفاع الدقيق من فيجما */
    padding: 40px 24px; /* بادينج داخلي يضمن التجاوب وعدم خروج الكلام */

    background: #2E3192; /* الأزرق الداكن الفخم من فيجما */
    border-radius: 16px;
    text-align: center;
}

/* عنوان: هل تحتاج مساعدة فنية؟ */
.support-cta-title {
    font-family: 'Cairo', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    color: #FFFFFF;
    margin: 0 0 16px 0; /* مسافة مريحة تحت العنوان */
}

/* نص الوصف الصغير الحاضن */
.support-cta-desc {
    font-family: 'Cairo', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.9); /* أبيض هادئ ومريح للعين */
    max-width: 600px; /* تحجيم السطر عشان ينزل بروقان زي التصميم */
    margin: 0 0 32px 0; /* مسافة تفصله عن الزرار اللي تحته */
}

/* زرار: اتصل بفريقنا الأحمر */
.btn-support-contact {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 148.55px; /* العرض الفعلي بالملي من فيجما */
    height: 56px; /* الارتفاع الفعلي من فيجما */

    background: #E63631; /* اللون الأحمر الناري الجذاب */
    border-radius: 4px; /* الحواف الخفيفة من التصميم */

    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Cairo', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}

    /* تأثير حركات الماوس عند الـ Hover */
    .btn-support-contact:hover {
        background: #c92c27; /* درجة أغمق سيكا للأكشن */
        transform: translateY(-2px); /* رفعة خفيفة فخمة */
        color:aliceblue;
    }

/* التجاوب السلس مع الشاشات والموبايل */
@media (max-width: 768px) {
    .support-cta-container {
        min-height: auto;
        padding: 32px 16px;
    }

    .support-cta-title {
        font-size: 24px;
        line-height: 30px;
    }

    .support-cta-desc {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 24px;
    }
}

/* ============================================
             Contact Us  Page style 
   ============================================ */

/* الحاوية العامة الموحدة لضمان محاذاة بكسل بكسل مع باقي صفحات الموقع */
page-hero-section {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 1562px;
    height: 620px;
    margin: 0 auto;
    /* الجرايد وووترمارك الخلفية الخفيفة المذكورة في كودك */
    background: linear-gradient(180deg, #E63631 0.16%, rgba(0, 0, 0, 0) 0.16%), linear-gradient(90deg, #E63631 0.06%, rgba(0, 0, 0, 0) 0.06%), linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 50%, #F9FAFB 100%);
    background-size: 40px 40px; /* تكرار شيك لشبكة الجرايد الخفيفة */
    opacity: 1; /* جعل الأوباستي 1 للكونتينر والـ 0.03 للشبكة فقط لعدم اختفاء السيكشن */
    overflow: hidden;
    direction: rtl; /* لضبط اتجاه النصوص والكونتينر للغة العربية */
}

/* 2. كونتينر الـ Auto Layout الحاضن الأساسي */
.hero-main-wrapper {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* أبعاد البادينج الدقيقة المقفلة يمين وشمال من الكود */
    padding: 128px 32px 0px 352px;
    width: 1280px;
    height: 620px;
    left: 141px;
    top: 0px;
}

/* 3. بلوك المحتوى الداخلي الحاضن الصريح */
.hero-inner-content {
    position: relative;
    box-sizing: border-box;
    width: 896px;
    height: 364px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    z-index: 5;
}

/* 4. الأيقونة الحمراء (64px × 64px) */
.hero-icon-box {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    left: 832px; /* لتستقر في أقصى اليمين تماماً علوياً */
    top: 0px;
    background: linear-gradient(135deg, #E63631 0%, #C92B27 100%);
    /* تأثير الظل الاحترافي الصادر من فيجما */
    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
}
.watermark {
    position: absolute;
    pointer-events: none; 
    z-index: 1; 
    opacity: 0.04; 
}
    .watermark svg path {
        stroke: #E63631 !important;
    }
/* 5. العنوان الرئيسي (Heading 1) */
.hero-heading-title {
    position: absolute;
    width: 896px;
    height: 72px;
    left: 0px;
    top: 96px; /* نازل تحت الأيقونة بالظبط */

    font-family: 'Cairo', Tahoma, sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #1F2261;
    text-align: right; /* محاذاة النص لليمين */
    margin: 0;
    direction: rtl;
}

/* 6. الخط الملون الذكي */
.hero-divider-line {
    position: absolute;
    width: 120px;
    height: 6px;
    left: 776px; /* يمين متناسق تحت بداية التايتل */
    top: 160px;
    background: linear-gradient(90deg, #1F2261 12.98%, #E63631 47.6%);
    border-radius: 30px;
}

/* 7. الفقرة النصية (Paragraph) */
.hero-paragraph-desc {
    position: absolute;
    width: 768px;
    height: 78px;
    left: 128px; /* ترحيل شيك لليسار لترك مساحة اليمين متناسقة */
    top: 190px;
    font-family: 'Cairo', Tahoma, sans-serif;
    font-size: 18px;
    line-height: 30px;
    color: #4B5563;
    text-align: right;
    margin: 0;
    direction: rtl;
}

/* 8. حاوية الـ Dots التلقائية (أسفل اليمين) */
.hero-dots-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px 0px 0px 840px; /* بتزق النقط لليمين بالملي */
    gap: 16px;
    position: absolute;
    width: 896px;
    height: 8px;
    left: 0px;
    top: 270px; /* مستقرة في القاع تماماً لبلوك الـ 364px */
}

    /* الـ Dot المفردة */
    .hero-dots-container .dot {
        width: 8px;
        height: 8px;
        background: linear-gradient(135deg, #E63631 0%, #C92B27 100%);
        border-radius: 50%;
        flex: none;
        flex-grow: 0;
    }


/* ========================================================== */
/* روقان التجاوب مع الشاشات المختلفة (Media Queries) */
/* ========================================================== */
@media (max-width: 1599px) {
    .page-hero-section {
        max-width: 100%;
    }

    .hero-main-wrapper {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 1280px) {
    .hero-main-wrapper {
        width: 100%;
        left: 0;
        transform: none;
        padding: 100px 40px 0px 40px; /* تحويل البادينج الضخم لتناسب الشاشات المتوسطة */
    }

    .hero-inner-content, .hero-heading-title, .hero-paragraph-desc, .hero-dots-container {
        width: 100%;
    }

    .hero-icon-box {
        left: auto;
        right: 0;
    }

    .hero-divider-line {
        left: auto;
        right: 0;
    }

    .hero-dots-container {
        padding-left: 0;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .page-hero-section {
        height: auto;
        min-height: 550px;
    }

    .hero-main-wrapper {
        padding: 60px 20px;
        height: auto;
    }

    .hero-inner-content {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero-icon-box, .hero-heading-title, .hero-divider-line, .hero-paragraph-desc, .hero-dots-container {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    .hero-heading-title, .hero-paragraph-desc {
        text-align: center;
        height: auto;
    }

    .hero-divider-line {
        margin: 16px 0;
    }

    .hero-paragraph-desc {
        width: 100%;
    }

    .hero-dots-container {
        justify-content: center;
        margin-top: 24px;
    }
}

/* ==========================================================================
           2. السيكشن الرئيسي للتواصل (النموذج والبيانات بجانب بعضهما)
           ========================================================================== */
.contact-main-section {
    position: relative;
    width: 100vw;
    /* إلغاء كل المارجنز والـ left/right القدام تماماً */
    left: 50%;
    right: auto;
    margin-left: -50vw;
    margin-right: -25vw;
    /* السحر كله هنا: بيجبر العنصر يتسنتر في نص الشاشة بالظبط أياً كان الاتجاه */
    transform: translateX(0);
    background-color: #FFFFFF;
    padding-top: 60px;
    padding-bottom: 60px;
    direction: rtl;
    box-sizing: border-box;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    width: 100%;
    box-sizing: border-box;
}

/* --- أرسل لنا رسالة (الجانب الأيسر بالتصميم الجديد) --- */
.contact-form-block {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.block-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #1A2E5A; /* لون داكن يطابق التصميم */
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #1A2E5A;
}

.label-required {
    color: #E32626;
    margin-right: 3px;
}

.form-input {
    width: 100%;
    height: 50px;
    background-color: #F8FAFC;
    border: 1px solid #EEF2F6;
    border-radius: 6px;
    padding: 0 16px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: #2D3748;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

    .form-input::placeholder, .form-textarea::placeholder {
        color: #A0AEC0;
    }

    .form-input:focus, .form-textarea:focus {
        outline: none;
        border-color: #2E3192;
        background-color: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(46, 49, 146, 0.05);
    }

.form-textarea {
    width: 100%;
    min-height: 140px;
    background-color: #F8FAFC;
    border: 1px solid #EEF2F6;
    border-radius: 6px;
    padding: 14px 16px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: #2D3748;
    box-sizing: border-box;
    resize: vertical;
    transition: all 0.3s ease;
}

.btn-submit-form {
    width: 100%;
    height: 50px;
    background-color: #E53E3E;
    border: none;
    border-radius: 6px;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
    margin-bottom: 20px;
}

    .btn-submit-form:hover {
        background-color: #C53030;
    }

    .btn-submit-form svg {
        width: 18px;
        height: 18px;
        fill: white;
        transform: rotate(180deg); /* لضبط اتجاه سهم الإرسال مع الـ RTL */
    }

/* صندوق الواتساب */
.whatsapp-box {
    background-color: #EEFBF4;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #E1F7EC;
}

.whatsapp-text-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.whatsapp-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #1A2E5A;
}

.whatsapp-desc {
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: #718096;
}

.btn-whatsapp-link {
    background-color: #25D366;
    color: white;
    text-decoration: none;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s;
}

    .btn-whatsapp-link:hover {
        background-color: #1BD75E;
    }

    .btn-whatsapp-link svg {
        width: 18px;
        height: 18px;
        fill: white;
    }


/* --- معلومات الاتصال والخريطة (الجانب الأيمن بالتصميم الجديد) --- */
.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

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

.info-icon-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #FFF5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .info-icon-circle svg {
        width: 20px;
        height: 20px;
        fill: #E53E3E;
    }

.info-content {
    display: flex;
    flex-direction: column;
    text-align: right;
    gap: 4px;
}

.info-label {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #1A2E5A;
}

.info-value {
    font-family: 'Cairo', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #718096;
    line-height: 1.6;
    white-space: pre-line;
}

/* صندوق ساعات العمل */
.business-hours-box {
    background-color: #F8FAFC;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hours-header {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #1A2E5A;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: #4A5568;
    font-weight: 500;
}

/* حاوية الخريطة الاحترافية لتطابق التصميم الدارك/الأزرق في الصورة */
.map-wrapper {
    width: 100%;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #3A3D99 0%, #222566 100%); /* خلفية زرقاء داكنة تطابق الصورة */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.2s;
}

    .map-wrapper:hover {
        transform: translateY(-2px);
    }

.map-icon {
    width: 36px;
    height: 36px;
    fill: white;
    margin-bottom: 8px;
}

.map-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.map-subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    opacity: 0.7;
}


/* ==========================================================================
           3. سيكشن الدعم الهندسي السفلي (Engineering Support)
           ========================================================================== */
.engineering-support-section {
    position: relative;
    width: 100vw;
    left: 50%;
    right: auto;
    margin-left: -50vw;
    margin-right: 0;
    background-color: #F8F9FA;
    padding-top: 45px;
    padding-bottom: 45px;
    text-align: center;
    border-top: 1px solid #EDF2F7;
    box-sizing: border-box;
}

.support-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #1A2E5A;
    margin-bottom: 12px;
}

.support-desc {
    max-width: 750px;
    margin: 0 auto;
    font-family: 'Cairo', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    color: #64748B;
}

/* ==========================================================================
           4. التجاوب الكامل مع الشاشات المتنوعة الجوال والأجهزة اللوحية
           ========================================================================== */
@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr; /* تحويل لصف عمودي واحد في الشاشات الصغيرة */
        gap: 40px;
    }

    .hero-title {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .whatsapp-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .btn-whatsapp-link {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}