/* الخلفية الخارجية للصفحة كلها (كلاس صفحة الكونتنت العامة - اتصل بنا / خدماتنا...) */
.relative.py-16.bg-white.flex-1 {
    background: linear-gradient(135deg, rgba(6,4,10,0.92), rgba(1,83,204,0.55)),
                url('https://pub-8fb1661901cb4f30a1578f9c8e499013.r2.dev/bg.png') center/cover no-repeat !important;
    padding: 50px 16px !important;
    /* === إضافة: يضمن إن الصندوق الخارجي نفسه ميقصش المحتوى ويكبر/يصغر تلقائي حسب حجم المحتوى الفعلي === */
    height: auto !important;
    overflow: visible !important;
    /* === إضافة: يضمن إنه ياخد عرض الشاشة/الجهاز بالكامل ومايعملش سكرول أفقي === */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    /* ======================================================================================= */
}

/* الصندوق الداخلي - شفافية 80% عشان تبان الخلفية من وراه */
.relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full {
    background: linear-gradient(135deg, rgba(11,18,32,0.8), rgba(16,32,58,0.8)) !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 auto !important;
    padding: 40px 24px !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px rgba(1,83,204,0.22), 0 10px 25px rgba(250,11,10,0.12) !important;
    text-align: center !important;
    /* === الإضافة الجديدة لحل مشكلة الكلام اللي بيطلع بره الصندوق === */
    height: auto !important;
    overflow: visible !important;
    /* === إضافة: يمنع الـ padding إنه يزود عرض الصندوق عن عرض الشاشة (سبب شائع للسكرول الأفقي) === */
    box-sizing: border-box !important;
    /* === إضافة: بنفعّل container query على الصندوق ده نفسه (relative px-4 sm:px-6 h-full)
       عشان أحجام الخط تتحسب بناءً على عرض الصندوق الفعلي (اللي شايل التكست كامل)
       مش على عرض الشاشة كلها (vw) - ده أدق خصوصًا لو الصندوق يوم يبقى أضيق من الشاشة (زي اللاب) === */
    container-type: inline-size !important;
    /* ================================================================ */
}

/* === إضافة مهمة جدًا: الحاوية اللي بين الصندوق (relative px-4 sm:px-6 h-full) وبين الـ ql-editor
   دي كانت من غير أي عرض متحدد ليها، فكانت بتاخد عرض المحتوى الفعلي (لو طويل) بدل عرض الصندوق نفسه
   ودا كان بيخلي النص "يهرب" بره حدود الصندوق المرئي حتى لو الصندوق نفسه متقفول === */
.relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full .content_container.page_content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}
/* ==================================================================================== */

/* الخط بس (مش اللون) - الألوان سبناها حرة عشان تتحكم فيها من التكست بوكس */
.relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full :is(h1, h2, h3, h4, p, li) {
    font-family: 'Tajawal', sans-serif;
    /* === إضافة: يضمن إن أي فقرة/عنوان طويل يلف جوا عرض الصندوق ومايطلعش بره الشاشة === */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    /* === تعديل: كان word-break: normal + overflow-wrap: break-word
       وده كان بيسمح للمتصفح يقطع جوا الكلمة نفسها (زي SIEMENS) لو مش لاقي مكان
       دلوقتي: القطع بيحصل بس عند المسافات، مش جوا الكلمة === */
    word-break: keep-all !important;
    /* === تعديل تاني: overflow-wrap: break-word هنا بترجع بس كـ"شبكة أمان"
       يعني المتصفح هيحاول الأول يلف الكلام عند المسافات عادي (زي ما بيحصل مع أي نص عربي طبيعي)
       ولو لقى كلمة واحدة (زي SIEMENS من غير مسافات) مش هتسع خالص في عرض السطر
       وقتها بس هيقطعها، بدل ما يخليها تطلع بره الصندوق وتبوظ الشكل === */
    overflow-wrap: break-word !important;
    /* === إضافة مهمة: العناصر دي جوه .ql-editor اللي هو display:flex
       وأي عنصر فليكس افتراضيًا بياخد min-width: auto، يعني بياخد عرض محتواه الطبيعي
       (السطر كامل من غير لف) حتى لو حطينا له width:100%
       فكان النص "بيهرب" بره الصندوق بدل ما يلف عند آخر عرض متاح
       min-width: 0 بيجبره يحترم عرض الصندوق (100%) ويخلي النص يلف طبيعي عند المسافات === */
    min-width: 0 !important;
    /* === إضافة جديدة مهمة جدًا لحل مشكلة قطع الكلمة في نصها ===
       المشكلة كانت بتحصل خصوصًا لما بيبقى في كلمة إنجليزي/لاتيني (زي Service First)
       جوه فقرة عربي، فالمتصفح بيتلخبط في حساب اتجاه واتساع السطر حوالين الجزء ده
       وممكن يقطع كلمة عربي جنبها في نص حروفها
       unicode-bidi: plaintext بيخلي كل سطر يتحسب على حدا حسب أول حرف قوي فيه
       وده بيحل المشكلة دي في أغلب الحالات === */
    direction: rtl !important;
    unicode-bidi: plaintext !important;
    /* ==================================================================================== */
}

/* === إضافة جديدة حاسمة: الداشبورد (Quill editor) بيحفظ حجم الخط اللي بتختاره
   مش على الـ <p>/<h1>... نفسها، لكن على <span style="font-size:...px"> جوه كل فقرة
   فكان الـ clamp() بتاعنا بيتطبق على الـ p الفاضية، والنص الفعلي (اللي جوه الـ span)
   فاضل شايل الحجم الثابت الكبير القديم جاي من الداشبورد => نفس مشكلة الكسر بترجع تاني
   الحل: نجبر أي عنصر جوه الفقرة/العنوان (زي span, strong, b, a...) يورث المقاس بتاع الأب
   بدل ما ياخد المقاس الثابت المكتوب inline، ده بيلغي مشكلة الخط الكبير تمامًا مهما كان
   الداشبورد كاتب فيه أي حجم */
.relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full :is(h1, h2, h3, h4, p, li) * {
    font-size: inherit !important;
    line-height: inherit !important;
}
/* ==================================================================================== */

/* === تعديل: حجم خط العنوان الرئيسي بيبقى مرن (بيصغر تلقائي في الشاشات الضيقة)
   عشان كلمة زي SIEMENS (من غير مسافات) تتكتب كاملة في سطر واحد من غير ما تتقطع نص كلمة
   خليت الحد الأدنى أصغر شوية (18px بدل 22px) عشان يدي هامش أكبر للتصغير قبل ما يحتاج يلف === */
.relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full h1 {
    font-size: clamp(15px, 5.5vw, 34px) !important;
    line-height: 1.35 !important;
    /* === إضافة: العنوان الرئيسي (قصير غالبًا) نخليه سطر واحد دايمًا، والخط يصغر لحد ما يسع === */
    white-space: nowrap !important;
}
/* ==================================================================================== */

/* === إضافة جديدة: نفس فكرة الـ h1 بس لباقي عناصر النص (h2, h3, h4, p, li)
   المشكلة كانت إن حجم الخط بييجي ثابت (px) من الداشبورد نفسه (inline style)
   ودا حجم مايصغرش تلقائي، فلو الشاشة ضيقة، مفيش قدام المتصفح غير إنه يقطع الكلمة عشان يسعها
   الحل: نفرض حجم مرن بالـ clamp() بديل الحجم الثابت، ودا بيغلب حتى الـ inline style
   لأن !important في الـ CSS الخارجي بيكسب عليه
   === مهم: رجعنا نستخدم vw بدل cqw ===
   لأن cqw (container query units) لو مش مدعومة في متصفح/ويب-فيو المستخدم
   المتصفح بيرفض الخاصية كلها ويتجاهلها، فيرجع الحجم الأصلي الكبير وتتكرر المشكلة
   vw مدعومة من كل المتصفحات من سنين طويلة، وبما إن عرض الصندوق تقريبًا نسبة من عرض الشاشة
   فـ vw بيدي نتيجة قريبة جدًا من cqw من غير مخاطرة التوافق
   ملحوظة مهمة: الفقرات الطويلة (جمل كاملة) مستحيل فعليًا تتحط في سطر واحد ومتبقاش مقروءة
   فهنا بنسمح لها تلف لأكتر من سطر بشكل طبيعي، وبس بنضمن إنها متتقطعش نص كلمة === */
.relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full h2 {
    font-size: clamp(14px, 4.8vw, 27px) !important;
    line-height: 1.4 !important;
}
.relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full h3 {
    font-size: clamp(13px, 4.4vw, 23px) !important;
    line-height: 1.4 !important;
}
.relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full h4 {
    font-size: clamp(13px, 4vw, 20px) !important;
    line-height: 1.4 !important;
}
.relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full p,
.relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full li {
    /* === تقليل الحد الأدنى لأصغر قيمة معقولة عشان أي كلمة منفردة (زي SIEMENS) تسع جوه السطر
       من غير ما تحتاج تتقطع، حتى لو الجملة كلها هتلف على أكتر من سطر (وده طبيعي وصح) === */
    font-size: clamp(12px, 3.8vw, 18px) !important;
    line-height: 1.6 !important;
}
/* ==================================================================================== */

/* الروابط (زرار التليفون) */
.relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full a[href^="tel:"] {
    display: inline-block !important;
    background: linear-gradient(135deg, #fa0b0a, #0153cc) !important;
    color: #fff !important;
    padding: 12px 26px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

/* ============================================
   شبكة الصور (اللوجوهات وأي صور تتحط في التكست بوكس)
   - 5 صور في السطر ع اللاب، 2 في الفون
   - المسافات بينهم ثابتة ومتساوية (أفقي ورأسي)
   - كل صورة بتاخد عرض العمود بس، والارتفاع بيتحسب تلقائي
     حسب نسبة أبعاد الصورة الأصلية (3:1 أو 1:1 أو أي نسبة) من غير تشويه
   - الفريم/الخلفية مفيهاش مقاس تاني زيادة، بتاخد قد الصورة بالظبط
   ============================================ */
/* الفليكس بيتطبق هنا على .ql-editor لأنه هو فعلاً الأب المباشر لكل <p> بتوع الأسطر
   (مش .relative.px-4...h-full اللي هي جد أبعد بـ 3 مستويات وسيطة) */
.relative.py-16.bg-white.flex-1 .content_container.page_content .ql-editor {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 20px !important;
    /* === إضافة: يضمن إن الشبكة بتاخد عرض الصندوق المتاح بالظبط، مش عرض المحتوى نفسه === */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* أي نص (عنوان/فقرة/رابط) لازم ياخد عرض السطر كامل عشان ميدخلش في شبكة الصور
   ملاحظة: الشرط ":not(:has(img))" بيستثني أي <p> فيها صور عشان القاعدة اللي تحت تتحكم فيها بدل كده */
.relative.py-16.bg-white.flex-1 .content_container.page_content .ql-editor > :is(h1, h2, h3, h4, ul, ol, a[href^="tel:"]),
.relative.py-16.bg-white.flex-1 .content_container.page_content .ql-editor > p:not(:has(img)) {
    flex: 0 0 100% !important;
}

/* الإديتور بيحط كل سطر جوه <p> واحدة، سواء فيها صورة واحدة أو أكتر (أو حتى صورة + نص)
   فبنخلي أي <p> فيها صورة (مهما كان عددها) "تختفي" من حسابات الفليكس (display: contents)
   عشان كل صورة جواها تتحسب مباشرة كعنصر منفصل في شبكة الصور، مش الـ p نفسها كبلوك واحد */
.relative.py-16.bg-white.flex-1 .content_container.page_content .ql-editor > p:has(img) {
    display: contents !important;
}

.relative.py-16.bg-white.flex-1 .content_container.page_content .ql-editor img {
    display: block !important;
    flex: 0 0 calc((100% - (4 * 20px)) / 5) !important;
    max-width: calc((100% - (4 * 20px)) / 5) !important;
    width: calc((100% - (4 * 20px)) / 5) !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 18px !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.45) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    box-sizing: border-box !important;
}

.relative.py-16.bg-white.flex-1 .content_container.page_content .ql-editor img:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.55) !important;
}

/* إخفاء عنوان الصفحة التلقائي (الشبح) */
.relative.py-16.bg-white.flex-1 .mt-2.block.text-3xl.text-center.leading-8.font-extrabold.tracking-tight.text-gray-900.sm\:text-4xl {
    display: none !important;
}

/* موبايل: صورتين في السطر بدل 5 */
@media (max-width: 768px) {
    .relative.py-16.bg-white.flex-1 {
        padding: 30px 8px !important;
    }
    .relative.py-16.bg-white.flex-1 .relative.px-4.sm\:px-6.h-full {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        padding: 28px 16px !important;
        border-radius: 20px !important;
    }
    .relative.py-16.bg-white.flex-1 .content_container.page_content .ql-editor {
        gap: 14px !important;
    }
    .relative.py-16.bg-white.flex-1 .content_container.page_content .ql-editor img {
        flex: 0 0 calc((100% - 14px) / 2) !important;
        max-width: calc((100% - 14px) / 2) !important;
        width: calc((100% - 14px) / 2) !important;
    }
}

.ps-desktop-nav-link.ps-nav-top-item {
    font-family: 'Tajawal', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}