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;
}

/* 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;
}



/* ==========================================================================
   1. الـ Navbar العلوية (Header English LTR)
   ========================================================================== */
.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: ltr;
    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-right: 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-left: -10px;
    margin-right: 0;
    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.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: ltr;
    font-family: var(--font);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    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-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 4px;
    flex-shrink: 0;
}

.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: left;
    direction: ltr;
    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;
    }

body {
    padding-top: var(--navbar-height);
}

/* Footer */
.main-footer {
    width: 100%;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    padding: 30px 0 10px 0;
    display: flex;
    justify-content: center;
    height: auto !important;
    direction: ltr;
}

.footer-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px !important;
}

.footer-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-columns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.footer-column,
.footer-col {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 8px !important;
    text-align: left;
}

.brand-info .logo-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

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

.column-title,
.footer-title {
    color: #2E3192;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px !important;
}

.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;
}

.contact-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
    text-align: left;
    direction: ltr;
    margin-bottom: 10px;
    color: #374151;
    font-size: 14px;
}

    .contact-item .icon,
    .contact-item i {
        color: #EF4444;
        font-size: 16px;
        order: 0;
    }

    .contact-item span,
    .contact-item p {
        order: 1;
        margin: 0;
        color: #4A5565;
    }

.footer-bottom {
    margin-top: 15px;
    padding: 15px 0;
    border-top: 1px solid #E5E7EB;
    text-align: center;
    color: #4A5565;
    direction: ltr;
}
    .footer-bottom,
    .footer-bottom p {
        direction: ltr;
        unicode-bidi: embed;
    }

.ltr-text {
    direction: ltr;
    display: inline-block;
}
.footer-col {
    direction: ltr;
}
.contact-item i {
    margin-right: 8px;
    margin-left: 0;
}
@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: ltr;
    padding: 40px 0;
}

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

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

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

.watermark-center-right {
    width: 168px;
    height: 168px;
    left: 33%;
    right:auto;
    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: .8;
    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: none; /* الحفاظ على اتجاه السهم الأصلي لليمين */
    }

    /* الهوفر لزر المنتجات */
    .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(150px);
        }

/* زرار اليسار (اتصل بنا) */
.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.2; /* كان 1 — يأخذ نسبة أكبر من الـ content */
    width: 100%;
    max-width: 720px;
    aspect-ratio: 4 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    box-shadow: 0px 30px 60px rgba(0, 0, 0, 0.15), 0px 10px 20px rgba(0, 0, 0, 0.08);
}

.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;
}

.hero-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.hero-carousel-slide {
    display: none;
    width: 100%;
    height: 100%;
}

    .hero-carousel-slide.active {
        display: block;
    }

/* Arrows */
.hero-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    z-index: 10;
    transition: background 0.2s;
}

    .hero-carousel-arrow:hover {
        background: rgba(0,0,0,0.7);
    }

.arrow-prev {
    left: 10px;
}

.arrow-next {
    right: 10px;
}

/* Dots */
.hero-carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.2s;
}

    .hero-dot.active {
        background: #fff;
    }

/* الأستيل العام الموحد للـ 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;
    left: -24px; /* بروز جانبي ثابت */
    right: auto;
    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: 80px;
    right: -24px; /* بروز جانبي ثابت */
    left: auto;
    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%;
    direction: ltr;
}

.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 {
        left: 0px;
        right: auto;
        top: -10px;
    }

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

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

    .home-floating-badge {
        transform: scale(0.75); /* تصغير أكتر */
        transform-origin: center;
    }

    .badge-top-right {
        left: -60px;
        right: auto;
        top: -20px;
    }

    .badge-bottom-left {
        right: -60px;
        left: auto;
        bottom: -35px;
    }
}

/*---------------------- 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: ltr;
}

/* 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;
    direction:ltr;
}

/* ديف الأيقونة الملونة جوه الكارد (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: left;
}

/* رابط الإجراء (عرض المنتجات ←) - محاذة كاملة لليمين */
.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: ltr;
}

/* الكونتينر الداخلي */
.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;
    text-align: left;
}

/* بوكس الأيقونة الموحد */
.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;
    text-align: left;
}

.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;
    margin-left: 5px;
}
/* ==========================================================================
   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: ltr;
}

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

.product-main-card {
    display: flex;
    flex-direction: row;
    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-reverse; /* الصورة فوق والتفاصيل تحت في الشاشات الصغيرة */
        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;
}

.product-image-wrapper {
    position: relative;
    box-shadow: 0 30px 60px rgba(46, 49, 146, 0.15), 0 12px 20px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    background-color: #fff;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
    transform: translateY(-15px);
}

    .product-image-wrapper img {
        display: block;
        width: max();
        height: auto;
        border-radius: 12px; 
        object-fit: cover;
    }


        /* ==========================================================================
   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:510px;
    height: 400px;
    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;
    left: 20px;
    right: auto;
    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: 24px 16px; /* تقليل الـ padding */
        gap: 20px; /* تقليل المسافة بين الصورة والتفاصيل */
        min-height: unset; /* إلغاء الـ min-height الثابتة */
    }

    .product-image-wrapper {
        width: 100%;
        height: 200px; /* تصغير الصورة */
    }

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

    .product-main-title {
        font-size: 22px; /* تصغير العنوان */
        margin-bottom: 12px;
    }

    .product-main-desc {
        font-size: 14px;
        margin-bottom: 20px;
        /* تحديد عدد الأسطر الظاهرة */
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-certifications-zone {
        margin-bottom: 24px;
        gap: 10px;
    }

    .product-action-btn {
        width: 100%;
        height: 52px;
    }

    .featured-product-tag {
        font-size: 12px;
        padding: 8px 16px;
        height: auto;
    }
}
/* ==========================================================================
   سيكشن العلامات التجارية - صفحة الـ 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-wrapper {
        padding: 0 16px;
        gap: 32px;
    }

    .home-brands-flex-grid {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px;
    }

    .home-brand-item-card {
        width: 160px !important; /* عرض ثابت بدل الـ calc */
        height: 160px !important;
    }
}
/*----------------------- 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;
    direction:ltr;
}

/* 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;
    right: 10%; /* تحريكها لجهة اليسار */
    left: auto;
    transform: rotate(-15deg); /* تمييل الأيقونة قليلاً */
}

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

/* تأكد من جعل الـ 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-end;
    text-align: left;
}

.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;
    direction:ltr;
}

.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: ltr;
    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;
    width:100%;

}

.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%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 80px 0;
    background: #FFFFFF;
    direction: ltr;
}

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

.info-card {
    flex: 1;
    min-height: 339px;
    border-radius: 24px;
    border: 1px solid #F3F4F6;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease;
}

/* Card Backgrounds */
.mission-card {
    background: rgba(46, 49, 146, 0.05);
}

.vision-card {
    background: rgba(230, 54, 49, 0.05);
}

/* Content */
.card-content {
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Icons */
.icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    align-self: flex-start;
    transition: background-color 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: #E63631;
}

/* Text */
.text-reveal {
    transition: all 0.4s ease;
}

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

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

/* Hover - Mission */
.mission-card:hover {
    background: #2E3192;
}

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

/* Hover - Vision */
.vision-card:hover {
    background: #E63631;
}

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

/* Text Color on Hover */
.info-card:hover h2,
.info-card:hover p {
    color: #FFFFFF;
}

/* Mobile */
@media (max-width: 768px) {
    .mission-container {
        flex-direction: column;
    }

    .info-card {
        min-height: auto;
    }

    .card-content {
        padding: 24px;
    }

    .info-card h2 {
        font-size: 24px;
    }

    .info-card p {
        font-size: 14px;
    }
}
/***-------------- 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: ltr;
}

.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: left;
}

/* أيقونة الحالة الافتراضية (شفافة) */
.icon-container {
    position: absolute;
    width: 56px;
    height: 56px;
    left: 33px;
    right: auto;
    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; /* البادينج الأساسي للصفحة */
    direction:ltr;
}

/* توسيط وتقليل المسافة بين العنوانين الرئيسيين */
.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: left;
    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: 250px;
    }

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

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

/*------------------------- 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;
        direction: ltr;
    }

/* تنسيق كروت الإحصائيات */
.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;
    }
}
/*------------------------- seventh 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-sub-heading {
    color: #6B7280;
    font-size: 18px;
    line-height: 1.6;
    direction: ltr;
}

.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;
    direction:ltr;
}

/* التجاوب مع الموبايل */
@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: ltr; /* مفعّلة وجاهزة للغة الإنجليزية */
    padding: 80px 0;
}

.hero-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 👈 تم التغيير من flex-end لتبدأ العناصر من اليسار */
    text-align: left;
    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%;
}

/* ---- مؤشرات السلايدر ---- */
.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;
    right: 60px; /* 👈 تحولت من left إلى right */
    transform: rotate(15deg);
}

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

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

    .watermark-bottom {
        left: 180px; /* 👈 تحولت من right إلى left لتناسب الشاشات المتوسطة */
    }
}

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

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

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

    .watermark-left {
        top: 10px;
        right: 10px; /* 👈 تحولت إلى right */
        width: 120px;
        height: 120px;
    }

    .watermark-bottom {
        bottom: 20px;
        left: 40px; /* 👈 تحولت إلى left */
        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;
}

/* ---- تصميم الكارد المفرد ---- */
.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;
    position: relative;
    text-decoration: none;
    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;
    left: 0; /* 👈 تم التغيير من right إلى left لتناسب الهيدر الإنجليزي */
    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;
    right: 0; /* 👈 تم التغيير من left إلى right لتكون في نهاية الكارد من اليمين */
    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: left; /* 👈 تم التغيير من right إلى left */
    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: left; /* 👈 تم التغيير من right إلى left */
    width: 100%;
}

/* ---- البادجات السفلية ---- */
.badge-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    margin-top: auto;
    margin-left: 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;
}
.card-link-area {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
/* ---- شاشات الريسبونسيف ---- */
@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;
    width: 100%;
    min-height: 324px;
    background: #F8F9FA;
    direction: ltr; /* 👈 تأكيد الاتجاه للنسخة الإنجليزية */
}

/* ---- الحاوية الداخلية (الكونتينر) ---- */
.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; /* الارتفاع الكلي المعتمد بالفيجما */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 128px;
    position: relative;
    overflow: hidden;
    direction: ltr; /* 👈 تحويل توجيه الصفحة بالكامل إلى اليسار */
}

/* ---- الحاوية الداخلية للمحتوى ---- */
.hero-content-container {
    box-sizing: border-box;
    max-width: 1280px;
    width: 100%;
    /* 👈 تم عكس البادينج الجانبي بالملي: دفع المسافة الكبيرة لليمين 352px والمسافة الصغيرة لليسار 32px */
    padding: 150px 352px 0 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 👈 لزق كل العناصر باليسار تماماً */
    text-align: left; /* 👈 محاذاة النص لليسار */
    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;
    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;
    right: 40px; /* 👈 تم التغيير من left إلى right لتصبح في أقصى اليمين */
    transform: rotate(108.816deg);
    opacity: 0.15;
    pointer-events: none;
}

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

/* ==========================================
    📱 شاشات الموبايل والتابلت (Responsive)
   ========================================== */
@media (max-width: 1024px) {
    .hero-content-container {
        padding: 120px 10px !important;
    }

    .watermark-bottom-content {
        left: 100px; /* 👈 تم التغيير من right إلى left */
    }
}

@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-certi-desc { /* 👈 تم تعديل اسم الكلاس هنا ليتطابق مع الستايل الأساسي فوق للـ Desc */
        font-size: 16px;
    }

    .watermark-top-left, .watermark-bottom-content {
        opacity: 0.08;
    }
}

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

/* ---- سكشن الشهادات الخارجي ---- */
.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;
}

/* ---- حاوية الهيدر ---- */
.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;
}

/* ---- شبكة عرض الكروت ---- */
.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;
}

/* ---- شبكة الكروت ---- */
.product-certs-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    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;
}

/* حاوية السكشن الأساسية */
.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;
}

/* ---- شبكة عرض الكروت ---- */
.official-certs-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* ---- الـ Card الأساسي المطور عمودياً ---- */
.official-cert-card {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    height: auto;
    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);
    aspect-ratio: 230 / 346;
}

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

/* أيقونة التثبيت/التميز العلوية (نقلت للكورنر اليمين فوق تماشياً مع التصميم الإنجليزي) */
.official-corner-badge {
    position: absolute;
    width: 32px;
    height: 32px;
    right: 9px; /* 👈 تحولت من left إلى right */
    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 {
    border-radius: 8px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
    width: 100%;
    height: 100%;
    max-width: 192.39px;
    object-fit: cover;
}

/* ---- 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; /* 👈 تم تعديلها لتسير طبيعياً من اليسار لليمين */
    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: left; /* 👈 تحولت من right إلى left */
    width: 100%;
    transition: all 0.3s ease;
}

.official-cert-card-link {
    cursor: pointer;
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* أيقونة التحميل وتظهر في أقصى اليمين بالأسفل عند الهوفر */
.official-download-icon {
    cursor: pointer;
    position: absolute;
    right: 14px; /* 👈 تحولت من left إلى right لتلائم اتجاه الانتهاء الإنجليزي */
    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-left: 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);
        justify-items: center;
    }
}

@media (max-width: 768px) {
    .official-certs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

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

    .official-certs-container {
        gap: 32px;
        padding: 0 16px;
    }

    .official-certs-section {
        padding: 48px 0;
    }
}

@media (max-width: 480px) {
    .official-certs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .official-cert-card {
        border-radius: 12px;
    }
}

/*------------------------- 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: ltr; /* 👈 تم تحويل اتجاه السكشن بالكامل لليسار للواجهة الإنجليزية */
    font-family: 'Segoe UI', 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);
    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; /* 👈 محاذاة طبيعية لليسار */
}

.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;
    text-align: left;
    direction: ltr;
}

/* ---- 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: ltr; /* 👈 تم التغيير من rtl إلى ltr */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .docs-card-container {
        box-sizing: border-box;
        display: flex;
        flex-direction: 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: ltr; /* 👈 تم التغيير من rtl إلى ltr */
    font-family: '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-start; /* 👈 تم التغيير من flex-end لتبدأ من اليسار بانتظام مع الأيقونة */
    gap: 12px;
    width: 100%;
}

/* نصوص المعايير */
.compliance-text {
    font-size: 15px;
    color: #4B5563;
    font-weight: 500;
    text-align: left; /* 👈 تم التغيير من right إلى left */
    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;
    order: -1; /* 👈 تضمن ظهور الأيقونة (علامة الصح) على يسار النص الإنجليزي أولاً */
}

    .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 — English (LTR)
   ============================================ */

/* ═══════════════════ Base ═══════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
}

.pub-wrap {
    font-family: 'Inter', 'Segoe UI', sans-serif; /* ← Latin font */
    direction: ltr; /* ← LTR */
}

/* ═══════════════════ Hero ═══════════════════ */
.pub-hero {
    background: #f8f9fa;
    padding: 50px 6% 40px;
    border-bottom: 1px solid #edf2f7;
}

.pub-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2e3192, #1f2261);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.pub-hero-title {
    font-size: 38px;
    font-weight: 700;
    background: linear-gradient(135deg, #2e3192, #1f2261);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
    display: inline-block;
}

    /* Underline bar — anchored LEFT in LTR */
    .pub-hero-title::after {
        content: "";
        display: block;
        width: 40px;
        height: 3px;
        background: linear-gradient(90deg, #2e3192 50%, #e02020 50%);
        margin: 6px auto 0 0; /* ← was "0 0 0 auto" (right-aligned) */
        border-radius: 2px;
    }

.pub-hero-sub {
    max-width: 600px;
    font-size: 16px;
    color: #64748b;
    margin-top: 8px;
}

/* ═══════════════════ Stats ═══════════════════ */
.pub-stats {
    background: #f8f9fa;
    padding: 20px 6% 45px;
    border-bottom: 1px solid #edf2f7;
}

.pub-stats-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.pub-stat {
    flex: 1;
    text-align: center;
    min-width: 80px;
}

.pub-stat-n {
    font-size: 34px;
    font-weight: 700;
    color: #e32626;
    line-height: 1;
    margin-bottom: 6px;
}

.pub-stat-l {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* ═══════════════════ Filter ═══════════════════ */
.pub-filter {
    background: #fff;
    padding: 35px 6%;
}

.pub-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.pub-filter-icon {
    width: 34px;
    height: 34px;
    background: #1a237e;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    flex-shrink: 0;
}

.pub-filter-info {
    display: flex;
    flex-direction: column;
}

.pub-filter-lbl {
    font-size: 13px;
    font-weight: 700;
    color: #2d3748;
}

.pub-filter-cnt {
    font-size: 11px;
    color: #a0aec0;
    margin-top: 1px;
}

.pub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pub-tab {
    height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #2d3748;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .2s;
    font-family: 'Inter', 'Segoe UI', sans-serif; /* ← Latin font */
}

    .pub-tab:hover {
        background: #f8fafc;
        border-color: #cbd5e0;
    }

    .pub-tab.active {
        background: #e32626;
        border-color: #e32626;
        color: #fff;
        box-shadow: 0 6px 12px rgba(227, 38, 38, .15);
    }

/* ═══════════════════ Grid ═══════════════════ */
.pub-grid-sec {
    background: #fff;
    padding: 10px 6% 60px;
}

.pub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* ═══════════════════ Card ═══════════════════ */
.pub-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    display: flex;
    flex-direction: column;
}

    .pub-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
    }

.pub-card-img-wrap {
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
    background: #edf2f7;
}

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

.pub-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #a0aec0;
    font-size: 12px;
}

.pub-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    text-align: left; /* ← left */
    flex: 1;
}

.pub-card-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pub-tag-cat {
    background: #ffeaea;
    color: #e32626;
    font-size: 13px;
    font-weight: 500;
    padding: 3px 12px;
    border-radius: 6px;
}

.pub-tag-yr {
    background: #eef2f6;
    color: #4a5568;
    font-size: 13px;
    font-weight: 500;
    padding: 3px 12px;
    border-radius: 6px;
}

.pub-card-name {
    font-size: 20px;
    font-weight: 600;
    color: #2e3192;
    line-height: 1.3;
    margin-bottom: 6px;
}

.pub-card-loc {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 12px;
}

.pub-card-desc {
    font-size: 14px;
    color: #2d3748;
    line-height: 1.6;
    margin-bottom: 16px;
}

.pub-sys-lbl {
    font-size: 13px;
    font-weight: 600;
    color: #718096;
    margin-bottom: 8px;
}

.pub-sys-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pub-sys-tag {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #2e3192;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
}

/* ═══════════════════ Pagination ═══════════════════ */
.pub-pag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 0 8px;
    flex-wrap: wrap;
}

.pub-pag-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #2d3748;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    font-family: 'Inter', 'Segoe UI', sans-serif; /* ← Latin font */
}

    .pub-pag-btn:hover:not(:disabled) {
        background: #f8fafc;
        border-color: #cbd5e0;
    }

    .pub-pag-btn.active {
        background: #e32626;
        border-color: #e32626;
        color: #fff;
    }

    .pub-pag-btn:disabled {
        opacity: .35;
        cursor: default;
    }

.pub-pag-info {
    font-size: 12px;
    color: #64748b;
    margin: 0 8px;
}

.pub-empty {
    text-align: center;
    padding: 60px 20px;
    color: #a0aec0;
    font-size: 14px;
    grid-column: span 2;
}

/* ═══════════════════ Responsive ═══════════════════ */
@media (max-width: 900px) {
    .pub-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pub-stats-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        gap: 8px;
    }

    .pub-stat {
        min-width: unset;
        flex: 1;
    }

    .pub-stat-n {
        font-size: 24px;
    }

    .pub-stat-l {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .pub-stats-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px;
    }

    .pub-stat-n {
        font-size: 20px;
    }

    .pub-stat-l {
        font-size: 10px;
    }
}


/* ============================================
             Products Page style — English (LTR)
   ============================================ */

/*------------------------- first section ----------------------------*/
.page-hero {
    position: relative;
    width: 100vw;
    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: ltr; /* ← LTR */
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif; /* ← Latin-optimized font stack */
    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: left; /* ← left */
    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;
}

.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-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: auto;
    align-self: flex-start;
    margin-left: 0; /* ← was margin-right: 0 */
}

.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 1 — top RIGHT (mirrored from top-left in RTL) */
.watermark-top-left {
    top: 40px;
    right: 40px; /* ← flipped */
    left: auto;
}

/* Watermark 2 — bottom content, right side */
.watermark-bottom-content {
    bottom: 0px;
    right: 60%;
    left: auto;
}


/* ==========================================
   Responsive
   ========================================== */
@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;
        right: -20px; /* ← flipped */
        left: auto;
    }
}


/*------------------------ second section ---------------------------------*/
.products-module-wrapper {
    box-sizing: border-box;
    direction: ltr; /* ← LTR */
    text-align: left; /* ← left */
    width: 100%;
}

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

/* ==========================================================================
   1. Page Header
   ========================================================================== */
.projects-page-header {
    width: 100vw !important;
    position: relative;
    left: 50% !important; /* ← flipped from right */
    right: auto !important;
    transform: translateX(-50%) !important; /* ← negative for LTR */
    height: auto;
    min-height: 142px;
    padding: 39px 0px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5) !important;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    z-index: 10;
}

.frame-8 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 1562px !important;
    margin: 0 auto !important;
    padding: 0 160px !important;
    height: 64px;
}

.all-brands-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0px 24px 0px 12px; /* ← swapped: icon on left now */
    width: 250px;
    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;
}

.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;
}

/* Arrow pushed to the far RIGHT in LTR */
.arrow-down-icon {
    margin-left: auto; /* ← was 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: 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);
}

.brands-options-row {
    cursor: grab;
    user-select: none;
}

/* ==========================================================================
   2. Sidebar Tree Filter — LTR
   ========================================================================== */
.main-content-container {
    display: flex;
    flex-direction: row;
    gap: 32px;
    max-width: 1562px;
    margin: 40px auto;
    padding: 0 32px;
    box-sizing: border-box;
}

.sidebar-tree-filter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    width: 288px;
    height: max-content;
    background-color: transparent;
    border-radius: 0;
    flex-shrink: 0;
}

.tree-root-btn {
    width: 100%;
    height: 48px;
    background-color: transparent;
    border: none;
    color: #2E3192;
    font-weight: 700;
    font-size: 24px;
    cursor: pointer;
    margin-bottom: 12px;
    text-align: left;
    padding: 0 16px;
    box-sizing: border-box;
    position: relative;
    transition: opacity 0.2s;
}

    .tree-root-btn:hover {
        opacity: 0.85;
        color: #2E3192;
    }

    .tree-root-btn.active-tree-item {
        color: #2E3192;
        font-weight: 700;
    }

    .tree-root-btn::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 16px;
        right: 16px;
        height: 2px;
        background: #E63631;
    }

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

.tree-system-node {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ced1d5;
    border-radius: 0;
}

.tree-system-label {
    padding: 8px 8px 4px 8px;
    font-weight: 700;
    font-size: 15px;
    color: #2E3192;
}

.tree-categories-dropdown {
    display: flex;
    flex-direction: column;
    padding: 4px 0 12px 0;
    background: transparent;
    gap: 2px;
    overflow-x: hidden;
}

.tree-category-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    width: 100%;
    height: 44px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e5e6e9;
    position: relative;
    cursor: pointer;
    color: #4B5563;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.15s, border-color 0.15s;
    box-sizing: border-box;
    flex-shrink: 0;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    min-height: 44px;
    height: auto;
}

    .tree-category-item:hover {
        color: #E63631;
    }

.tree-categories-dropdown .tree-category-item:last-child {
    border-bottom: none;
}

.tree-category-item.active-category {
    background: transparent;
    color: #E63631;
    font-weight: 600;
}

    .tree-category-item.active-category::after {
        content: '';
        position: absolute;
        bottom: -1px;
        right: 0;
        left: 8px;
        height: 1.5px;
        background: linear-gradient(90deg, #E63631 0%, #2E3192 100%);
    }

    .tree-category-item.active-category::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        background: linear-gradient(180deg, #E63631 0%, #2E3192 100%);
        border-radius: 0 4px 4px 0;
    }


/* ==========================================================================
   3. Products Grid & Cards
   ========================================================================== */
.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 label — top LEFT corner in LTR */
.brand-lbl {
    position: absolute;
    display: flex;
    width: 74px;
    height: 28px;
    padding: 4px 12px;
    align-items: center;
    justify-content: center;
    left: 12px; /* ← flipped from right */
    right: auto;
    top: 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 15px -3px 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-weight: 600;
    line-height: 26px;
    color: #2E3192;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 52px;
}

/* Product desc — anchored from LEFT in LTR */
.product-desc {
    position: absolute;
    width: 240.66px;
    left: 21px; /* ← flipped from right */
    right: auto;
    top: 337.66px;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 36.4px;
}

/* CTA button — anchored from LEFT in LTR */
.view-details-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    position: absolute;
    width: 240.66px;
    height: 48px;
    left: 21px; /* ← flipped from right */
    right: auto;
    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. Brands Modal / 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: left; /* ← left */
    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 {
        background: #E63631;
        color: #fff;
        border-color: #E63631;
    }

    .page-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }
.page-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #6B7280;
    font-weight: 600;
    letter-spacing: 1px;
}
.pagination-wrapper {
    display: flex;
    flex-wrap: nowrap; /* منع الكسر لسطر تاني */
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%; /* يملا العرض المتاح */
    overflow-x: auto; /* لو الشاشة صغيرة يسكرول بدل ما يكسر */
}
/* ==========================================================================
   5. Responsive
   ========================================================================== */
@media (max-width: 1200px) {
    .frame-8 {
        padding: 0 40px;
    }

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

@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));
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .product-card {
        box-sizing: border-box !important;
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        display: flex !important;
        flex-direction: column !important;
        background: #FFFFFF !important;
        border: 1px solid #E5E7EB !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        padding-bottom: 12px !important;
    }

    .image-container {
        width: 100% !important;
        height: 180px !important;
    }

    .product-title {
        width: 90% !important;
        font-size: 14px !important;
        line-height: 20px !important;
        height: 40px !important;
        margin: 8px auto 0 auto !important;
    }

    .product-desc {
        position: static !important;
        width: 90% !important;
        margin: 4px auto 12px auto !important;
        font-size: 11px !important;
        height: 32px !important;
    }

    .view-details-btn {
        position: static !important;
        width: 90% !important;
        height: 38px !important;
        margin: 8px auto 0 auto !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .projects-page-header {
        padding: 16px 0;
    }

    .frame-8 {
        flex-direction: column;
        height: auto;
        width: 100%;
        gap: 12px;
        padding: 0 16px !important;
    }

    .all-brands-btn {
        width: 100%;
        height: 54px;
        padding: 0px 16px !important;
    }

    .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 — English (LTR)
   ============================================ */

/*---------------------- 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;
}

    /* Nudge LEFT on hover in LTR (toward back) */
    .back-to-products-btn:hover {
        transform: translateX(-4px); /* ← flipped from +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 column — LEFT in LTR */
.details-content-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    direction: ltr; /* ← LTR */
    text-align: left; /* ← left */
}

/* Brand tag — left-aligned */
.product-brand-tag {
    display: flex;
    justify-content: flex-start; /* ← flipped from 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%;
    text-align: left; /* ← left */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    direction: ltr; /* ← LTR */
}

.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: ltr; /* ← LTR */
}

.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;
    }

/* Image column — RIGHT in LTR */
.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; /* ← image on top, details below (natural LTR reading) */
        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;
    gap: 24px;
    width: 100%;
    max-width: 1216px;
    height: max-content !important;
    min-height: auto;
    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: left; /* ← left */
    margin-top: 40px;
    margin-bottom: 0px;
    font-family: 'Inter', 'Segoe UI', sans-serif; /* ← Latin font */
}

.description-content {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #4B5563;
    line-height: 1.8;
    text-align: left; /* ← left */
    white-space: pre-line;
    unicode-bidi: plaintext;
    direction: ltr; /* ← LTR */
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

    .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: left; /* ← left */
    margin: 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.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;
    grid-template-columns: repeat(2, minmax(0, 559px));
    justify-content: space-between;
    column-gap: 32px;
    row-gap: 0px;
}

.spec-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0px;
    height: 49px;
    border-bottom: 1px solid #DEE2E6;
    direction: ltr; /* ← LTR */
    unicode-bidi: embed;
}

/* Label on LEFT, value on RIGHT — natural in LTR */
.spec-label {
    font-size: 15px;
    font-weight: 500;
    color: #1F2937;
    unicode-bidi: plaintext;
    direction: ltr; /* ← LTR */
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.spec-value {
    font-size: 15px;
    font-weight: 600;
    color: #4B5563;
    text-align: right;
    unicode-bidi: plaintext;
    direction: ltr; /* ← LTR */
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

@media (max-width: 992px) {
    .specs-grid-layout {
        grid-template-columns: 100%;
    }

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

    .spec-item {
        height: auto;
        padding: 12px 0;
        flex-direction: column;
        align-items: flex-start; /* ← left-aligned on mobile */
        gap: 4px;
    }

    .spec-label {
        font-size: 13px;
        color: #6B7280;
    }

    .spec-value {
        font-size: 15px;
        font-weight: 700;
        color: #1F2937;
        text-align: left; /* ← left */
        direction: ltr;
    }
}


/*---------------------- fourth section ---------------------------*/
.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;
}

/* Header — icon on LEFT in LTR */
.datasheet-header-block {
    display: flex;
    flex-direction: row; /* ← natural LTR: icon left, text right */
    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;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.datasheet-sub-title {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    margin: 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* Cards row — natural LTR left-to-right */
.datasheet-cards-row {
    display: flex;
    flex-direction: row; /* ← natural LTR (was 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;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* Features list — icon LEFT, text RIGHT in LTR */
.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; /* ← natural LTR: icon left, text right */
        justify-content: flex-end; /* ← left-anchored */
        align-items: center;
        gap: 10px;
        width: 100%;
        font-size: 14px;
        font-weight: 500;
        color: #4B5563;
        text-align: left; /* ← left */
        font-family: 'Inter', 'Segoe UI', sans-serif;
    }

.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%;
    direction:rtl;
}

.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;
    }

/* Label LEFT, value RIGHT — natural in LTR */
.info-lbl-right {
    font-size: 14px;
    font-weight: 500;
    color: #9CA3AF;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.info-val-left {
    font-size: 14px;
    font-weight: 700;
    color: #1F2937;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* Footer buttons — left-anchored in LTR */
.datasheet-footer-buttons {
    display: flex;
    flex-direction: row; /* ← natural LTR (was row-reverse) */
    justify-content: flex-end; /* ← anchored left */
    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;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    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;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    transition: background 0.2s, transform 0.2s;
}

    .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; /* ← natural stacking in LTR */
        width: 100%;
    }

    .btn-download-sheet,
    .btn-whatsapp-sheet {
        width: 100%;
    }

    .datasheet-header-block {
        flex-direction: row; /* ← keep horizontal on tablet */
        text-align: left;
    }

    .datasheet-titles {
        align-items: flex-start; /* ← left-aligned */
        text-align: left;
    }
}


/*-------------------- 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: 'Inter', 'Segoe UI', Tahoma, sans-serif; /* ← Latin font */
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    color: #FFFFFF;
    margin: 0 0 16px 0;
}

.support-cta-desc {
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif; /* ← Latin font */
    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: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}

    .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;
    }
}


/* ── Thumbnails ── */
.public-thumbnails {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.public-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: #f5f5f5;
    transition: border-color .2s;
    flex-shrink: 0;
}

    .public-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 4px;
    }

    .public-thumb:hover {
        border-color: #E63631;
        opacity: .85;
    }

    .public-thumb.active {
        border-color: #E63631;
    }


/* ============================================
             Contact Us Page style — English (LTR)
   ============================================ */

/* ==========================================================================
   1. Hero Section
   ========================================================================== */
.page-hero-section {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 620px;
    margin: 0;
    padding: 0;
    background-size: 40px 40px;
    overflow: hidden;
    background-color: white;
    direction: ltr; /* ← LTR */
}

.hero-main-wrapper {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    height: 620px;
    padding: 128px 32px 0px 32px;
}

.hero-inner-content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 896px;
    height: 364px;
    z-index: 5;
}

/* Icon box — top LEFT in LTR */
.hero-icon-box {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    left: 0px; /* ← flipped from right */
    right: auto;
    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;
    }

/* Heading — left-aligned */
.hero-heading-title {
    position: absolute;
    width: 100%;
    max-width: 896px;
    height: 72px;
    left: 0px; /* ← flipped from right */
    right: auto;
    top: 96px;
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif; /* ← Latin font */
    font-size: 42px;
    font-weight: 700;
    color: #1F2261;
    text-align: left; /* ← left */
    margin: 0;
    direction: ltr; /* ← LTR */
}

/* Divider — anchored from LEFT */
.hero-divider-line {
    position: absolute;
    width: 120px;
    height: 6px;
    left: 0px; /* ← flipped from right */
    right: auto;
    top: 180px;
    background: linear-gradient(90deg, #1F2261 12.98%, #E63631 47.6%);
    border-radius: 30px;
}

/* Paragraph — anchored from LEFT */
.hero-paragraph-desc {
    position: absolute;
    width: 100%;
    max-width: 768px;
    height: 78px;
    left: 0px; /* ← flipped from right */
    right: auto;
    top: 205px;
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif; /* ← Latin font */
    font-size: 18px;
    line-height: 30px;
    color: #4B5563;
    text-align: left; /* ← left */
    margin: 0;
    direction: ltr; /* ← LTR */
}

/* Dots — anchored from LEFT */
.hero-dots-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    position: absolute;
    height: 8px;
    left: 0px; /* ← flipped from right */
    right: auto;
    top: 310px;
}

    .hero-dots-container .dot {
        width: 8px;
        height: 8px;
        background: linear-gradient(135deg, #E63631 0%, #C92B27 100%);
        border-radius: 50%;
    }


/* ==========================================================================
   2. Contact Section (Form + Info)
   ========================================================================== */
.contact-main-section {
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    padding-top: 60px;
    padding-bottom: 60px;
    direction: ltr; /* ← LTR */
    box-sizing: border-box;
}

.contact-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

/* Grid: info block first (left), form second (right) — natural LTR reading order */
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* ← swapped columns order */
    gap: 60px;
    width: 100%;
    box-sizing: border-box;
}

.contact-form-block {
    display: flex;
    flex-direction: column;
    text-align: left; /* ← left */
}

.block-title {
    font-family: 'Inter', 'Segoe UI', sans-serif; /* ← Latin font */
    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: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #1A2E5A;
}

/* Required asterisk — LEFT of label text in LTR */
.label-required {
    color: #E32626;
    margin-left: 3px; /* ← flipped from margin-right */
    margin-right: 0;
}

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

    .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: 'Inter', 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #2D3748;
    box-sizing: border-box;
    resize: vertical;
    transition: all 0.3s ease;
    text-align: left; /* ← left */
}

.btn-submit-form {
    width: 100%;
    height: 50px;
    background-color: #E53E3E;
    border: none;
    border-radius: 6px;
    font-family: 'Inter', 'Segoe UI', 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;
    }

    /* Arrow points RIGHT (send direction) in LTR — remove rotation */
    .btn-submit-form svg {
        width: 18px;
        height: 18px;
        fill: white;
        transform: rotate(0deg); /* ← removed 180deg flip */
    }

.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: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #1A2E5A;
}

.whatsapp-desc {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #718096;
}

.btn-whatsapp-link {
    background-color: #25D366;
    color: white;
    text-decoration: none;
    font-family: 'Inter', 'Segoe UI', 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: left; /* ← left */
    gap: 4px;
}

.info-label {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #1A2E5A;
}

.info-value {
    font-family: 'Inter', 'Segoe UI', 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: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #1A2E5A;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Inter', 'Segoe UI', 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: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.map-subtitle {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 12px;
    opacity: 0.7;
}


/* ==========================================================================
   3. Engineering Support Section
   ========================================================================== */
.engineering-support-section {
    position: relative;
    width: 100%;
    background-color: #F8F9FA;
    padding: 45px 20px;
    text-align: center;
    border-top: 1px solid #EDF2F7;
    box-sizing: border-box;
}

.support-title {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #1A2E5A;
    margin-bottom: 12px;
}

.support-desc {
    max-width: 750px;
    margin: 0 auto;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    color: #64748B;
}


/* ==========================================================================
   4. Toast — anchored RIGHT in LTR (more natural for notifications)
   ========================================================================== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px; /* ← flipped from left */
    left: auto;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 600;
    min-width: 280px;
    max-width: 360px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    animation: toastIn 0.3s ease;
    direction: ltr; /* ← LTR */
}

    /* Border accent on LEFT side in LTR */
    .toast.success {
        background: #fff;
        border-left: 4px solid #22c55e; /* ← flipped from border-right */
        border-right: none;
        color: #166534;
    }

    .toast.error {
        background: #fff;
        border-left: 4px solid #e53e3e; /* ← flipped from border-right */
        border-right: none;
        color: #991b1b;
    }

.toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.toast-msg {
    flex: 1;
}

.toast-close {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0;
    line-height: 1;
}

    .toast-close:hover {
        opacity: 1;
    }

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(16px);
    }
}


/* ==========================================================================
   5. Responsive
   ========================================================================== */
@media (max-width: 1280px) {
    .hero-main-wrapper {
        padding: 100px 40px 0px 40px;
    }

    .hero-icon-box,
    .hero-divider-line {
        right: auto;
        left: 0; /* ← stays left */
    }

    .hero-dots-container {
        justify-content: flex-start; /* ← flipped from flex-end */
    }
}

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@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: flex-start; /* ← left-aligned */
        text-align: left; /* ← left */
    }

    .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;
        margin-bottom: 15px;
    }

    .hero-heading-title,
    .hero-paragraph-desc {
        text-align: left; /* ← left */
        height: auto;
    }

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

    .hero-dots-container {
        justify-content: flex-start; /* ← flipped from center toward left */
        margin-top: 24px;
    }
}

@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;
    }
}