.elementor-7 .elementor-element.elementor-element-388d832{--display:flex;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overflow:hidden;--margin-top:-33px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-7 .elementor-element.elementor-element-655e1d1{--display:flex;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-7 .elementor-element.elementor-element-b8bda28{--display:flex;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:22px;--padding-bottom:22px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-7 .elementor-element.elementor-element-b7499f3 .gallery-item .gallery-caption{text-align:center;}.elementor-7 .elementor-element.elementor-element-3b76dd1{--display:flex;--overflow:hidden;--margin-top:-5px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-7 .elementor-element.elementor-element-badeb6a{--display:flex;--overflow:hidden;--margin-top:-24px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-7 .elementor-element.elementor-element-bb9ed08{--display:flex;--overflow:hidden;--margin-top:-17px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-7 .elementor-element.elementor-element-d23ed74{--display:flex;--overflow:hidden;--margin-top:-17px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-7 .elementor-element.elementor-element-b8bda28{--content-width:1250px;}}@media(max-width:767px){.elementor-7 .elementor-element.elementor-element-388d832{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-f09fc3b *//* إضافة مسافة علوية للموبايل فقط */
@media (max-width: 767px) {
    .ts-home-hero {
        padding-top: 77px !important; /* يمكنك تقليل أو زيادة الرقم حسب ارتفاع الهيدر */
    }
}/* End custom CSS */
/* Start custom CSS for image-gallery, class: .elementor-element-b7499f3 *//* ==========================================================================
   TS Image Gallery - Clean & Minimal Professional Cards
   ========================================================================== */

/* 1. هيكل الشبكة (Grid) النظيف */
.elementor-element-b7499f3 #gallery-1 {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 20px !important;
    margin: 0 !important;
}

/* 2. تصميم كارت اللوجو (نظيف، أبيض، مع إطار رمادي خفيف جداً) */
.elementor-element-b7499f3 .gallery-item {
    margin: 0 !important;
    padding: 24px !important;
    background: #ffffff !important;
    border: 1px solid #eaeaea !important; /* إطار خفيف جداً */
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 130px !important;
    float: none !important;
    transition: all 0.3s ease !important;
}

/* 3. تأثير ناعم عند تمرير الماوس (Hover Effect) */
.elementor-element-b7499f3 .gallery-item:hover {
    transform: translateY(-5px) !important;
    border-color: #9b88ed !important; /* يأخذ لون البراند الخاص بك بخفة */
    box-shadow: 0 10px 30px rgba(155, 136, 237, 0.1) !important; /* ظل خفيف جداً */
}

/* 4. محاذاة الصور داخل الكروت */
.elementor-element-b7499f3 .gallery-icon,
.elementor-element-b7499f3 .gallery-icon a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* 5. تصميم اللوجوهات (رمادي أنيق يتحول لملون عند الماوس) */
.elementor-element-b7499f3 .gallery-icon img {
    max-height: 70px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    border: none !important;
    filter: grayscale(100%) opacity(0.6) !important; /* مظهر موحد واحترافي */
    transition: all 0.3s ease !important;
}

/* استعادة ألوان اللوجو الأصلية وتكبيره قليلاً عند الماوس */
.elementor-element-b7499f3 .gallery-item:hover .gallery-icon img {
    filter: grayscale(0%) opacity(1) !important;
    transform: scale(1.05) !important;
}

/* التجاوب مع الجوال (Mobile Responsive) */
@media (max-width: 768px) {
    .elementor-element-b7499f3 #gallery-1 {
        grid-template-columns: repeat(2, 1fr) !important; /* لوجوهين في كل صف */
        gap: 12px !important;
    }
    .elementor-element-b7499f3 .gallery-item {
        height: 100px !important;
        padding: 15px !important;
    }
    .elementor-element-b7499f3 .gallery-icon img {
        max-height: 50px !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b8bda28 */<section class="parte ts-clients-section" id="clients">
<style>
/* ==========================================================================
   1. ENHANCED ANIMATED BACKGROUND (.parte)
   ========================================================================== */
.parte {
    position: relative !important;
    overflow: hidden !important;
    background-color: #faf9fc !important; /* لون خلفية فاتح يناسب الموقع */
    z-index: 1 !important;
    padding: 80px 0;
    font-family: 'Inter', system-ui, sans-serif;
}

/* الأجرام المضيئة (Glowing Orbs) */
.parte::before,
.parte::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(100px) !important; 
    z-index: 0 !important;
    pointer-events: none !important; 
    animation: ts-bg-float-parte 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform; /* لتحسين الأداء */
}

/* الجرم الأول (بنفسجي) */
.parte::before {
    width: 50vw !important;
    height: 50vw !important;
    max-width: 700px !important;
    max-height: 700px !important;
    background: rgba(155, 136, 237, 0.15) !important; 
    top: -20% !important;
    left: -10% !important;
}

/* الجرم الثاني (وردي/بنفسجي فاتح) */
.parte::after {
    width: 45vw !important;
    height: 45vw !important;
    max-width: 600px !important;
    max-height: 600px !important;
    background: rgba(196, 158, 255, 0.15) !important; 
    bottom: -15% !important;
    right: -10% !important;
    animation-delay: -7s !important; 
    animation-direction: alternate-reverse !important;
}

@keyframes ts-bg-float-parte {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(8vw, 5vh) scale(1.1); }
    100% { transform: translate(-5vw, 10vh) scale(0.9); }
}

/* 2. إضافة طبقة الشبكة (Grid Overlay) لتعميق التصميم */
.parte-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: 
        linear-gradient(rgba(121, 85, 232, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(121, 85, 232, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    pointer-events: none;
}

/* ==========================================================================
   3. CONTENT STYLING (Client Logos)
   ========================================================================== */
.ts-clients-container {
    position: relative !important;
    z-index: 2 !important; /* فوق الخلفية المتحركة والشبكة */
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
    text-align: center;
}

.ts-clients-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 600;
    color: #171421;
    margin-bottom: 10px;
}

.ts-clients-title em {
    font-style: italic;
    background: linear-gradient(135deg, #7955e8 0%, #c49eff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ts-clients-subtitle {
    font-size: 15px;
    color: #666375;
    margin-bottom: 50px;
}

/* 4. The Marquee (شريط الشعارات المتحرك) */
.ts-clients-marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    padding: 20px 0;
}

.ts-clients-track {
    display: flex;
    align-items: center;
    gap: 30px;
    width: max-content;
    animation: ts-marquee-scroll 30s linear infinite;
    will-change: transform;
}

.ts-clients-marquee:hover .ts-clients-track {
    animation-play-state: paused; /* يتوقف عند مرور الماوس */
}

@keyframes ts-marquee-scroll {
    to { transform: translateX(-50%); }
}

/* 5. Glassmorphism Logo Cards */
.ts-client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 90px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(121, 85, 232, 0.05);
    transition: all 0.3s ease;
    padding: 20px;
}

.ts-client-logo:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: #9b88ed;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(121, 85, 232, 0.15);
}

.ts-client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6); /* الشعارات تظهر بالرمادي */
    transition: all 0.3s ease;
}

.ts-client-logo:hover img {
    filter: grayscale(0%) opacity(1); /* يظهر اللون الأصلي عند الهوفر */
    transform: scale(1.05);
}

/* استجابة الموبايل */
@media (max-width: 768px) {
    .parte { padding: 60px 0; }
    .ts-client-logo { width: 140px; height: 70px; padding: 15px; }
}
</style>

<!-- طبقة الشبكة الخلفية -->
<div class="parte-grid-overlay"></div>

<div class="ts-clients-container">
    <!-- عنوان السكشن -->
    <h2 class="ts-clients-title">Trusted by <em>Industry Leaders</em></h2>
    <p class="ts-clients-subtitle">Partnering with businesses to build scalable and secure digital products.</p>

    <!-- شريط الشعارات -->
    <div class="ts-clients-marquee">
        <div class="ts-clients-track">
            
            <!-- المجموعة الأولى من الشعارات (قم بتبديل الروابط بشعاراتك الحقيقية) -->
            <div class="ts-client-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/WordPress_blue_logo.svg/1200px-WordPress_blue_logo.svg.png" alt="WordPress">
            </div>
            <div class="ts-client-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Shopify_logo_2018.svg/1200px-Shopify_logo_2018.svg.png" alt="Shopify">
            </div>
            <div class="ts-client-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" alt="Google">
            </div>
            <div class="ts-client-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1200px-Amazon_logo.svg.png" alt="Amazon">
            </div>
            <div class="ts-client-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1200px-Netflix_2015_logo.svg.png" alt="Netflix">
            </div>

            <!-- المجموعة الثانية (مكررة لعمل Infinite Loop) -->
            <div class="ts-client-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/WordPress_blue_logo.svg/1200px-WordPress_blue_logo.svg.png" alt="WordPress">
            </div>
            <div class="ts-client-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Shopify_logo_2018.svg/1200px-Shopify_logo_2018.svg.png" alt="Shopify">
            </div>
            <div class="ts-client-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" alt="Google">
            </div>
            <div class="ts-client-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1200px-Amazon_logo.svg.png" alt="Amazon">
            </div>
            <div class="ts-client-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1200px-Netflix_2015_logo.svg.png" alt="Netflix">
            </div>

        </div>
    </div>
</div>
</section>/* End custom CSS */