/* إعدادات الصفحة الشاملة لمنع التمرير */
body,
html {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
}

/* الهيدر الأحمر */
header {
    background-color: #cf2b36;
    height: 80px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

/* الشعار المتداخل (50% في الهيدر) */
.logo-2 {
    position: absolute;
    left: 50px;
    top: 30px;
    /* يعطي تأثير البروز للأسفل */
    z-index: 200;
}

.logo-2 img {
    width: 75px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* القسم الأوسط الأصفر */
main {
    background-color: #ffe627;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
}

/* حاوية المحتوى */
.content-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    gap: 40px;
    height: 75%;
    /* لضمان عدم ملامسة الهيدر والفوتر */
}

/* الشعار الرئيسي */
.main-logo {
    flex: 1;
    display: flex;
    justify-content: center;
}

.main-logo img {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
}

/* الفاصل العمودي الأخضر */
.vertical-divider {
    width: 5px;
    height: 70%;
    background-color: #009445;
    border-radius: 10px;
    flex-shrink: 0;
}

/* حاوية الخريطة */
.map-box {
    flex: 1;
    height: 100%;
    max-height: 380px;
    border: 6px solid white;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* الفوتر الأحمر */
/* التنسيق الأساسي للفوتر */
footer {
    background-color: #cf2b36;
    min-height: 80px;
    /* تغيير من height إلى min-height ليتوسع مع المحتوى */
    flex-shrink: 0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    /* إضافة padding لضمان وجود مساحة في الجوال */
    z-index: 100;
}

.footer-info {
    display: flex;
    gap: 30px;
    font-weight: bold;
    font-size: 14px;
    flex-wrap: wrap;
    /* يسمح للعناصر بالنزول لسطر جديد إذا لم تكفِ المساحة */
    justify-content: center;
    width: 100%;
}

.footer-info a,
.footer-info span {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    /* يمنع انكسار النص الواحد داخل العنصر */
}

/* حل مشكلة الهاتف (Media Query) */
@media (max-width: 600px) {

    body,
    html {
        overflow-y: auto;
        /* السماح بالسكرول في الجوال لتجنب تداخل العناصر */
        height: auto;
    }

    footer {
        height: auto;
        /* ترك الارتفاع يتحدد تلقائياً بناءً على العناصر */
    }

    .footer-info {
        flex-direction: column;
        /* ترتيب العناصر تحت بعضها */
        gap: 12px;
        /* مسافة مناسبة بين السطور */
        text-align: center;
    }

    /* جعل أيقونات الهاتف تظهر قبل الأرقام بشكل صحيح في الجوال */
    .phone-fix {
        display: inline-block;
        direction: ltr;
    }
}

/* تصحيح اتجاه الأرقام */
.phone-fix {
    direction: ltr;
    unicode-bidi: embed;
}

/* التجاوب مع الجوال (إعادة التمرير عند الحاجة في الشاشات الصغيرة جداً) */
@media (max-width: 850px) {

    body,
    html {
        overflow-y: auto;
        height: auto;
    }

    .content-container {
        flex-direction: column;
        height: auto;
        padding: 40px 0;
    }

    .vertical-divider {
        width: 60%;
        height: 5px;
    }

    .footer-info {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}