/* ============================================================================ MOZZAT — واجهة الهيرو على الجوال فقط (Hero mobile) ---------------------------------------------------------------------------- الملف ده مسؤول عن: إظهار صورة الهيرو الرأسية على الجوال بدل الخلفية الداكنة الصمّاء، مع تدرّج ناعم يخلي الكتابة مقروءة، وضبط الكتابة على الطرف وترتيب الزر تحت النص من غير تداخل. ⚠️ كل اللي جوّه الملف متلفّف في @media (max-width: 767px) — الديسكتوب والتابلت الكبير ما بيتأثروش ولا بحرف واحد. ولازم يتربط في الـ بعد css/hero-v2.css و css/carousel-uniform-fix.css عشان يغلبهم في الترتيب. الاتجاه (عربي/إنجليزي) شغال أوتوماتيك من نفس المتغيرات الموجودة أصلاً على #mozzat-hero-bg في كل صفحة: • index.html → --mzh-photo-flip: 1 + --mzh-scrim-dir: 90deg (صورة يمين، كتابة شمال) • index-ar.html → --mzh-photo-flip: -1 + --mzh-scrim-dir: 270deg (صورة شمال، كتابة يمين) يعني مفيش أي كود مكرر للعربي — نفس القواعد بتقلب نفسها. ============================================================================ */ @media (max-width: 767px) { /* (1) الحاوية: نلغي صورة الديسكتوب المتحطوطة inline كـbackground-image، وسايبين لون داكن تحتها كـfallback لو الصورة اتأخرت في التحميل. */ #mozzat-hero-bg { position: relative; background-image: none !important; background-color: #0A0F0C !important; overflow: hidden; } /* (2) طبقة الصورة الرأسية. الصورة مصمّمة بحيث نصها الأول داكن والأكل على الجنب، ومقاسها (1080×2340 ≈ نسبة 0.46) قريب جدًا من نسبة شاشة الجوال — يعني cover مش هيقص منها حاجة تُذكر والتكوين بيفضل زي ما هو. scaleX(var(--mzh-photo-flip)) هي اللي بتقلب الصورة في الصفحة العربية. */ #mozzat-hero-bg .mzh-photo { display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; /* ★ الصورة الأولى متحطوطة على العنصر نفسه عن قصد — يعني هي "الأساس" اللي بيظهر دايمًا. حتى لو الصورة التانية ما اتحمّلتش لأي سبب (اسم غلط، امتداد مختلف، ملف ناقص)، اللي هيبان هو الصورة الأولى — مستحيل تطلع شاشة سودا. */ background-image: url("../images/hero/hero-mobile.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; transform: scaleX(var(--mzh-photo-flip, 1)); transform-origin: center center; opacity: 1 !important; } /* (2-ب) الصورة التانية: طبقة واحدة فوق الأولى بـopacity، عشان التبديل يبقى تلاشي ناعم (crossfade) مش قطع مفاجئ. الطبقة دي بتظهر لما js/hero-mobile-slides.js يحط data-mzh-active="1" على #mozzat-hero-bg (يعني لما الشريحة رقم 1 تبقى هي النشطة). ★ عايز تضيف صورة تالتة؟ كلّمني — محتاجة طبقة إضافية وبلوك [data-mzh-active="2"]. ★ */ #mozzat-hero-bg .mzh-photo::after { content: "" !important; position: absolute !important; inset: 0 !important; background-image: url("../images/hero/hero-mobile-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; opacity: 0; transition: opacity .9s ease !important; will-change: opacity; pointer-events: none; } #mozzat-hero-bg[data-mzh-active="1"] .mzh-photo::after { opacity: 1; } /* (3) طبقة التعتيم (scrim) — تدرّجين فوق بعض: • تدرّج أفقي: بيغطّي عمود الكتابة كامل بعتمة قوية وبعدين يفتح تدريجيًا ناحية الأكل. النِسَب هنا (0% / 48% / 80% / 100%) متظبطة عشان الشريط الداكن يمشي مع الكتابة لحد طرف الشاشة بالظبط، مش يقف في النص. اتجاهه بيتقلب لوحده حسب --mzh-scrim-dir (90deg إنجليزي / 270deg عربي). • تدرّج رأسي خفيف: بيغمق أعلى الشاشة (تحت الهيدر) وأسفلها، عشان الشعار والقائمة والزر يفضلوا واضحين فوق أي جزء من الصورة. المتغيرات --mzh-scrim-1..4 هي نفسها المستخدمة في الديسكتوب، فأي تعديل ليها من المحرر المرئي بيتطبق هنا كمان. */ #mozzat-hero-bg .mzh-scrim { position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(to bottom, rgba(10, 15, 12, .70) 0%, rgba(10, 15, 12, .26) 16%, rgba(10, 15, 12, .10) 44%, rgba(10, 15, 12, .42) 86%, rgba(10, 15, 12, .68) 100%), linear-gradient(var(--mzh-scrim-dir, 90deg), var(--mzh-scrim-1, rgba(10, 15, 12, 1)) 0%, var(--mzh-scrim-2, rgba(10, 15, 12, .85)) 48%, var(--mzh-scrim-3, rgba(10, 15, 12, .15)) 80%, var(--mzh-scrim-4, rgba(10, 15, 12, 0)) 100%) !important; opacity: 1 !important; } /* (4) المحتوى فوق الطبقتين. */ #mozzat-hero-bg > #home { position: relative; z-index: 2; } /* الشريط الجانبي الديكوري (01 · QUALITY · RELIABILITY) بيزحم الشاشة الصغيرة — بيتخفي على الجوال زي التصميم المرجعي. */ #mozzat-hero-bg .mzh-rail { display: none !important; } /* ========================================================================== (5) ★ إصلاح: الكتابة على الطرف مش في النص ★ السبب: العنصر الداخلي عليه كلاس mx-auto (margin-inline: auto). ولمّا #home بيبقى flex container، الهوامش الـauto دي بتمتص المساحة الفاضية على الجنبين وبتوسّط العمود كله في نص الشاشة — وده اللي كان مزحلق الكتابة للنص. الحل: نلغي الهوامش الـauto ونخلي العمود ياخد عرض الشاشة كامل، فالكتابة ترجع تبدأ من الطرف (والمسافة الجانبية تفضل من px-8 = 32px بس). ========================================================================== */ #mozzat-hero-bg > #home { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding-top: 92px !important; padding-bottom: 48px !important; } #mozzat-hero-bg > #home > div { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } #mozzat-hero-bg > #home > div > div { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================================== (6) ★ إصلاح: زر DISCOVER MORE كان بيتداخل مع آخر سطرين من الفقرة ★ السبب: شرائح الهيرو (.mzh-slide-text) متحطوطة فوق بعض بـposition:absolute جوّه .mzh-slide-stack، والـstack بياخد ارتفاع ثابت مظبوط على الديسكتوب. على الجوال النص بيطول أكتر من الارتفاع ده، فبيطلع بره الـstack والزر (اللي بعده) بيركب فوقه. الحل: الشريحة النشطة بس ترجع position:relative — يعني تبقى جوّه التدفق الطبيعي والـstack ياخد ارتفاعها الحقيقي مهما طال النص، والزر ينزل تحتها تلقائيًا. الشرائح غير النشطة تفضل absolute (مخفية) فمش بتأثر على الارتفاع ولا بتكسر أنيميشن التبديل بين الشرائح. ========================================================================== */ #mozzat-hero-bg .mzh-slide-stack { position: relative !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } #mozzat-hero-bg .mzh-slide-extra-wrap { position: static !important; } #mozzat-hero-bg .mzh-slide-text { position: absolute !important; top: 0; left: 0; right: 0; pointer-events: none; } #mozzat-hero-bg .mzh-slide-text.mzh-slide-active { position: relative !important; /* hero-v2.css بيحط inset: 0 على الشرائح. مع position:relative القيم دي بتتحوّل لإزاحة بدل تحديد مكان، فبنصفّرها كلها عشان الشريحة تقعد في مكانها الطبيعي بالظبط. */ top: auto; right: auto; bottom: auto; left: auto; pointer-events: auto; } /* (7) الزر: مسافة جانبية مطابقة للنص بالظبط. النص عنده px-8 (32px) وحاوية الزر عندها pl-6/pr-8 — margin-inline-start بيتعامل مع الاتجاهين تلقائيًا (شمال في الإنجليزي، يمين في العربي). */ #mozzat-hero-bg .mzh-cta { margin-inline-start: 8px !important; margin-top: 22px !important; } html[dir="rtl"] #mozzat-hero-bg .mzh-cta { margin-inline-start: 0 !important; } /* (8) أحجام النصوص على الجوال — مطابقة للتصميم المرجعي. */ #mozzat-hero-bg .mzh-eyebrow { font-size: 11.5px !important; letter-spacing: .16em !important; line-height: 1.9 !important; } #mozzat-hero-bg .mzh-h1 { font-size: 52px !important; line-height: 1.06 !important; } #mozzat-hero-bg .mzh-sub { font-size: 15px !important; letter-spacing: .10em !important; } #mozzat-hero-bg .mzh-body { font-size: 15.5px !important; line-height: 1.72 !important; width: 100% !important; max-width: 32ch; } #mozzat-hero-bg .mzh-rule { width: 72px !important; margin-inline-start: 32px !important; margin-inline-end: 0 !important; } /* (9) وضوح النص فوق الصورة — ظل خفيف جدًا، مش بيغيّر أي لون. */ #mozzat-hero-bg .mzh-h1, #mozzat-hero-bg .mzh-sub, #mozzat-hero-bg .mzh-body, #mozzat-hero-bg .mzh-eyebrow { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); } /* (10) الصفحة العربية: dir="rtl" بيتكفّل بمحاذاة النص ناحية اليمين، ودي بتمنع الفقرة (اللي عليها max-width) إنها تتزحلق ناحية الشمال. */ html[dir="rtl"] #mozzat-hero-bg .mzh-body { margin-left: auto !important; margin-right: 0 !important; } } /* على الشاشات القصيرة (جوالات صغيرة) نصغّر العنوان شوية عشان الواجهة تفضل داخلة في الشاشة من غير ما المستخدم يضطر ينزل. */ @media (max-width: 767px) and (max-height: 720px) { #mozzat-hero-bg .mzh-h1 { font-size: 42px !important; } #mozzat-hero-bg .mzh-body { font-size: 14.5px !important; line-height: 1.65 !important; } #mozzat-hero-bg > #home { padding-top: 80px !important; } } /* ============================================================================ ★ الأجهزة اللوحية (768px – 1023px) — آيباد وما شابه ★ ---------------------------------------------------------------------------- المشكلة: css/hero-v2.css في نطاق @media (max-width: 1023px) بيحوّل طبقة التعتيم لتدرّج **رأسي** بيغطي عرض الشاشة كله: linear-gradient(180deg, .85 → .55 → .78) يعني الأسود بيتحط فوق الصور والمنتجات نفسها، مش على جهة الكتابة بس. وده اللي كان مخلي الهيرو على الآيباد شكله مختلف تمامًا عن الجوال والديسكتوب. الحل هنا حاجتين: (1) نرجّع التدرّج **أفقي** ومربوط بـ--mzh-scrim-dir زي الجوال والديسكتوب بالظبط — التعتيم على جهة الكتابة، وجهة الصور تفضل نضيفة تمامًا. والاتجاه بيتقلب لوحده في الصفحة العربية (270deg) زي كل حتة تانية. (2) نثبّت نفس صورتي الجوال الرأسيتين على الشريحتين. من غير ده، الشريحة الأولى كانت بتاخد الصورة الرأسية والتانية بتاخد صورة الديسكتوب العريضة (1920×700) اللي بتتقص لـ40% من عرضها على شاشة الآيباد فتبان مكبّرة جدًا — فكان شكل الهيرو بيتغيّر كل 6 ثواني. ⚠️ مفيش هنا أي تعديل على التخطيط أو أحجام النصوص — هيرو الآيباد بيفضل محافظ على مقاساته الحالية من hero-v2.css. التعديل على التعتيم والصور بس. ============================================================================ */ /* ============================================================================ ★ صور الهيرو المخصّصة للأجهزة اللوحية (768px – 1279px) ★ ---------------------------------------------------------------------------- صورتين بنسبة 4:3 (1800×1350) متصمّمتين مخصوص للمقاسات دي: • hero-tablet.jpg → الشريحة 0 (المائدة الكاملة) • hero-tablet-2.jpg → الشريحة 1 (الستيك) ليه صور منفصلة أصلًا؟ عشان كل مقاس له نسبة مختلفة تمامًا، و`cover` بيقص الزيادة عشان يملا الإطار: • صورة الديسكتوب 1920×700 (نسبة 2.74) على آيباد → بيتقص منها ~60% من العرض، فتبان مكبّرة جدًا والتكوين بيضيع. • صورة الجوال 1080×2340 (نسبة 0.46) على آيباد → بيتقص منها أكتر من نص الارتفاع. الصور دي نسبتها 1.333 وهي أقرب حاجة لنسبة شاشة الآيباد في الوضعين، فالقص بيبقى بسيط والتكوين (الجانب الداكن للكتابة + الأكل على الجنب) بيفضل سليم. النطاق لحد 1279px عشان يغطي الآيباد برو في الوضع الأفقي (1194px و1366px بيقعوا فوق 1024 فكانوا بياخدوا صورة الديسكتوب العريضة). ============================================================================ */ @media (min-width: 768px) and (max-width: 1279px) { /* الصورة الأساسية — !important عشان تغلب الصورة اللي بيحطها js/hero-v2-slides.js inline على العنصر عند تبديل الشرائح. */ #mozzat-hero-bg .mzh-photo { background-image: url("../images/hero/hero-tablet.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; /* بنلغي تلاشي الطبقة كلها اللي بيعمله الجافاسكريبت — التبديل بقى من الطبقة اللي تحت (::after) وهي أنعم لأنها بتبدّل الصورة نفسها بس. */ opacity: 1 !important; } /* الصورة التانية: طبقة تلاشي فوق الأولى، بتظهر لما الشريحة رقم 1 تبقى نشطة (data-mzh-active بيحطها js/hero-mobile-slides.js). لو التانية ما اتحمّلتش لأي سبب، الأولى تفضل ظاهرة — مستحيل تطلع شاشة سودا. */ #mozzat-hero-bg .mzh-photo::after { content: "" !important; position: absolute !important; inset: 0 !important; background-image: url("../images/hero/hero-tablet-2.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; opacity: 0; transition: opacity .9s ease !important; will-change: opacity; pointer-events: none; } #mozzat-hero-bg[data-mzh-active="1"] .mzh-photo::after { opacity: 1; } } @media (min-width: 768px) and (max-width: 1023px) { /* التعتيم: أفقي ومربوط بالاتجاه — جهة الكتابة معتّمة، وجهة الصور نضيفة. النِسَب هنا أضيق من قبل (45% / 75% بدل 55% / 85%): التعتيم بقى أخف وملموم ناحية الكتابة أكتر، فمساحة أكبر من الصورة بتبان بألوانها الطبيعية. ده شغّال مع تحديد عرض الفقرة تحت — الاتنين مع بعض. لو ضيّقنا التعتيم بس من غير ما نضيّق النص، آخر سطور الفقرة كانت هتقع فوق الصورة الفاتحة. */ #mozzat-hero-bg .mzh-scrim { background-image: linear-gradient(var(--mzh-scrim-dir, 90deg), var(--mzh-scrim-1, rgba(10, 15, 12, 1)) 0%, var(--mzh-scrim-2, rgba(10, 15, 12, .85)) 45%, var(--mzh-scrim-3, rgba(10, 15, 12, .15)) 75%, var(--mzh-scrim-4, rgba(10, 15, 12, 0)) 100%); } /* عرض الفقرة: الكلاس md:w-9/12 في الـHTML بيدي الفقرة 75% من عرض الشاشة على الأجهزة اللوحية (تخطيط العمودين مابيشتغلش تحت 1024px، فالعمود بياخد العرض كله). ده كان بيخلي السطور تمتد لحد منطقة الصورة. بنقلّلها لـ52% عشان الكلام يفضل كله جوّه المنطقة المعتّمة — والكلمات الزيادة تنزل للسطر اللي تحت بدل ما تكمل ناحية الصورة. ملاحظة: بنستخدم width مش max-width عشان نغلب w-9/12 من Tailwind (اللي بيحدد width: 75%) — max-width لوحدها مكانتش هتلغيها. */ #mozzat-hero-bg .mzh-body { width: 52% !important; max-width: 52% !important; } } /* ============================================================================ ★ المقاسات الوسطى (768px – 1279px) — كل اللي بين الجوال والديسكتوب ★ ---------------------------------------------------------------------------- ثلاث مشاكل كانت بتظهر في النطاق ده بس: (أ) النص مزاح بعيد عن طرف الشاشة. السبب: كلاس `container` من Tailwind بيحدّد عرض ثابت حسب نقطة التوقف (768px عند md، و1024px عند lg) مش عرض الشاشة الفعلي، و`mx-auto` بيوسّطه. فعلى شاشة 950px مثلًا الحاوية بتفضل 768px والباقي (182px) بيتقسم فراغ ميت على الجنبين — والكتابة بتبان بعيدة عن الطرف. على الجوال المشكلة دي مش بتحصل (الحاوية 100%)، وعلى الشاشات الكبيرة التصميم متظبط عليها. النطاق الوسط بس هو المتأثر. الحل: الحاوية تاخد العرض كامل، والمسافة الجانبية تيجي من حشو ثابت 32px زي الجوال بالظبط. (ب) التظليل مش ماشي مع الكتابة. ده نتيجة مباشرة لـ(أ): الطبقة نفسها بتغطي عرض الشاشة كله من الأول، فلما الكتابة اتزاحت للنص، التدرّج بقى مبدوء من مكان تاني غير مكانها. أول ما الكتابة رجعت للطرف، التظليل بقى ماشي معاها تلقائيًا. (ج) زر DISCOVER MORE بيركب على آخر سطر من الفقرة. السبب: hero-v2.css بيحجز للشرائح ارتفاع ثابت `min-height: clamp(300px, 40vw, 430px)` والشرائح نفسها `position: absolute`. لو النص طلع أطول من الارتفاع المحجوز (وده بيحصل في النطاق ده لأن الشاشة أضيق فالسطور بتزيد)، بيفيض بره الصندوق والزر اللي بعده بيركب فوقه. ============================================================================ */ /* ---- (ج) إصلاح تداخل الزر — لكل المقاسات من 768px وطالع ---- الشريحة النشطة بس بترجع للتدفّق الطبيعي، فالصندوق بياخد ارتفاع النص الحقيقي والزر ينزل تحته. بنسيب min-height بتاعة hero-v2.css زي ما هي، فالصندوق بياخد الأكبر من الاتنين: المساحة المحجوزة أو ارتفاع النص. يعني على الشاشات الكبيرة (اللي النص فيها أقصر من المحجوز) مفيش أي تغيير في الشكل إطلاقًا. */ @media (min-width: 768px) { #mozzat-hero-bg .mzh-slide-stack.mzh-slides-multi .mzh-slide-text.mzh-slide-active { position: relative; top: auto; right: auto; bottom: auto; left: auto; } } @media (min-width: 768px) and (max-width: 1279px) { /* ---- (أ) الحاوية تاخد عرض الشاشة كامل ---- */ #mozzat-hero-bg > #home, #mozzat-hero-bg > #home > div { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* المسافة الجانبية الموحّدة: 32px من ناحية الكتابة، وصفر من ناحية الصورة. padding-inline-start بيتعامل مع الاتجاهين تلقائيًا — شمال في الإنجليزي، يمين في العربي — فمفيش كود مكرر للصفحة العربية. */ #mozzat-hero-bg > #home > div > div { padding-inline-start: 32px !important; padding-inline-end: 0 !important; } /* بنصفّر الحشو والهوامش اللي على العناصر نفسها (px-8 / ml-8 / md:ml-4 / md:mr-4) عشان ماتتجمّعش فوق الـ32px بتاعة العمود وتزيح الكلام تاني. */ #mozzat-hero-bg .mzh-eyebrow, #mozzat-hero-bg .mzh-h1, #mozzat-hero-bg .mzh-sub, #mozzat-hero-bg .mzh-body, #mozzat-hero-bg .mzh-rule { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } #mozzat-hero-bg .mzh-rule { margin-top: 18px !important; margin-bottom: 6px !important; } /* حاوية الزر + النص الإضافي (اللي بيظهر بعد الضغط على Discover More). عليها pl-6 (إنجليزي) و pr-8 (عربي) + md:ml-4 — مجموعهم 40px حشو زيادة كان بيزيح الزر والنص الإضافي لجوّه، فيبانوا مش متحاذيين مع الفقرة اللي فوقهم. ⚠️ كنا بنستخدم :has() هنا، لكن سفاري الآيباد الأقدم من 15.4 مش داعمها — وساعتها القاعدة كلها بتتجاهل والإزاحة بترجع. فبقينا بنعتمد على كلاس ثابت `mzh-cta-wrap` مضاف في الـHTML، وده شغّال في كل المتصفحات بدون استثناء. */ #mozzat-hero-bg .mzh-cta-wrap { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } /* الفقرة الإضافية وزر "عرض أقل" ياخدوا نفس بداية الكلام اللي فوقهم بالظبط */ #mozzat-hero-bg .mzh-cta-wrap .mzh-body, #mozzat-hero-bg .mzh-cta-close, #mozzat-hero-bg .mzh-cta { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* شريط التقدّم والنقاط تحت الزر ياخدوا نفس المحاذاة */ #mozzat-hero-bg .mzh-slidebar, #mozzat-hero-bg .mzh-dots { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } } /* ---- (ب) التظليل في نطاق 1024–1279 ---- من 1024px بيشتغل تخطيط العمودين (عمود نص + عمود فاضي للصورة)، وبعد ما الحاوية بقت بعرض الشاشة كامل، عمود النص بقى نص العرض بالظبط. فبنوسّع التدرّج شوية عشان يغطي العمود ده كله لحد نهايته. */ @media (min-width: 1024px) and (max-width: 1279px) { #mozzat-hero-bg .mzh-scrim { background-image: linear-gradient(var(--mzh-scrim-dir, 90deg), var(--mzh-scrim-1, rgba(10, 15, 12, 1)) 0%, var(--mzh-scrim-2, rgba(10, 15, 12, .85)) 46%, var(--mzh-scrim-3, rgba(10, 15, 12, .15)) 78%, var(--mzh-scrim-4, rgba(10, 15, 12, 0)) 100%); } } /* ============================================================================ ★ أقسام "رؤيتنا" و"مهمتنا" على الأجهزة اللوحية (768px – 1279px) ★ ---------------------------------------------------------------------------- القسمين الاتنين عبارة عن صف من عمودين: صورة + نص. المسافة اللي بينهم جاية من حشو فيزيائي على عمود واحد بس (md:pr-10 في قسم المهمة، و lg:pr-10 في قسم الرؤية اللي مابيشتغلش أصلًا تحت 1024px). النتيجة إن المسافة بتبقى صفر في النطاق ده، فالكلام بيلزق في الصورة ويبان متداخل معاها — خصوصًا في الصفحة العربية لأن الحشو الفيزيائي بيقع على الناحية الغلط مع اتجاه RTL. الحل: مسافة صريحة بـcolumn-gap على الحاوية نفسها. الـgap مالوش اتجاه، فبيشتغل صح في العربي والإنجليزي من غير أي كود مكرر، ومابيعتمدش على أي كلاس Tailwind. ============================================================================ */ @media (min-width: 768px) and (max-width: 1279px) { #our-vision, #mission > .container { column-gap: 44px; align-items: center; } /* الصور ما تتخطاش عرض عمودها لو الشاشة ضيّقت */ #our-vision img, #mission img { max-width: 100%; height: auto !important; } /* بنلغي الحشو الفيزيائي القديم عشان ما يتجمعش فوق الـgap ويبوّظ التوازن */ #our-vision > div, #mission > .container > div { padding-left: 0 !important; padding-right: 0 !important; } }