/* الخلفية الخارجية للصفحة كلها (كلاس صفحة الكونتنت العامة - اتصل بنا / خدماتنا...) */
.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;
}

/* الصندوق الداخلي - شفافية 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;
}

/* الخط بس (مش اللون) - الألوان سبناها حرة عشان تتحكم فيها من التكست بوكس */
.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;
}

/* الروابط (زرار التليفون) */
.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;
}

/* أي نص (عنوان/فقرة/روابط) لازم ياخد عرض السطر كامل عشان ميدخلش في شبكة الصور
   ملاحظة: الشرط ":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;
}

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