.app-footer {
    background-color: #1f2021; /* اللون المطلوب للخلفية */
    color: #fff; /* لون النص الأساسي */
    padding: 40px 20px; /* مسافة داخلية علوية وسفلية (40px) وجانبية (20px) */
    font-size: 15px; /* حجم الخط الأساسي للفوتر */
    line-height: 1.6; /* تباعد الأسطر لسهولة القراءة */
    direction: rtl; /* لضمان الاتجاه من اليمين لليسار للمحتوى العربي */
    text-align: right; /* محاذاة النص لليمين افتراضياً */
    margin-top: auto; /* يدفع الفوتر لأسفل الصفحة تلقائياً إذا كان محتوى الصفحة قصير */
}

.footer-content {
    max-width: 1200px; /* أقصى عرض لمحتوى الفوتر */
    margin: 0 auto; /* توسيط محتوى الفوتر في الصفحة */
    display: flex; /* لعرض الأقسام جنباً إلى جنب */
    flex-wrap: wrap; /* للسماح للأقسام بالنزول لسطر جديد في الشاشات الصغيرة */
    justify-content: space-between; /* توزيع الأقسام بمسافات متساوية */
    gap: 30px; /* مسافة بين الأقسام (أفضل من margin في بعض الحالات) */
    padding: 0 15px; /* مسافة داخلية خفيفة على الجانبين لتجنب الالتصاق بحواف الشاشة */
}

.footer-section {
    /* flex-grow: 1; يسمح للأقسام بالنمو لملء المساحة المتاحة */
    /* flex-shrink: 1; يسمح للأقسام بالانكماش إذا لم تكن هناك مساحة كافية */
    flex-basis: 300px; /* يعطي كل قسم حجم أساسي 300px قبل التوزيع */
    /* هذا يضمن أن كل قسم سيحتفظ بحجم معقول ولن يصبح صغيراً جداً على الشاشات المتوسطة */
    text-align: inherit; /* لضمان محاذاة النص داخل القسم كما هي محاذاة الفوتر العام */
}
footer .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}
footer .logo a img {
    height: 100px;
    width: 120px;
}

.footer-section h3 {
    color: #f0f0f0; /* لون أفتح قليلاً للعناوين */
    margin-bottom: 20px;
    font-size: 20px; /* حجم أكبر قليلاً للعناوين */
    position: relative;
    padding-bottom: 10px; /* مسافة للخط السفلي */
    text-align: right; /* محاذاة العناوين لليمين في الشاشات الكبيرة */
}

/* خط تحت عناوين الأقسام */
.footer-section h3::after {
    content: '';
    position: absolute;
    right: 0; /* يبدأ الخط من اليمين بسبب direction: rtl */
    bottom: 0;
    width: 60px; /* طول الخط أصبح أطول قليلاً */
    height: 2px;
    background-color: #007bff; /* لون الخط مميز (أزرق) ليكون أكثر وضوحاً */
}

.footer-section p,
.footer-section ul {
    margin: 0;
    padding: 0;
    list-style: none; /* إزالة النقاط من القوائم */
}

.footer-section ul li {
    margin-bottom: 12px; /* مسافة أكبر بين عناصر القائمة */
}

.footer-section ul li a {
    color: #ccc; /* لون روابط القائمة */
    text-decoration: none; /* إزالة الخط السفلي من الروابط */
    transition: color 0.3s ease; /* تأثير حركة عند المرور بالماوس */
    display: block; /* لجعل منطقة الضغط أكبر للرابط */
    padding: 2px 0; /* مسافة داخلية خفيفة للرابط */
}

.footer-section ul li a:hover {
    color: #fff; /* لون أبيض عند المرور بالماوس */
}

/* تنسيق أيقونات السوشيال ميديا */
.social-icons {
    display: flex; /* لعرض الأيقونات جنباً إلى جنب */
    gap: 15px; /* مسافة بين الأيقونات */
    justify-content: flex-end; /* محاذاة الأيقونات لليمين (بسبب direction: rtl) */
    margin-top: 15px; /* مسافة علوية لتبتعد عن عنوان القسم */
    flex-wrap: wrap;
}

.social-icons a {
    color: #fff; /* لون الأيقونة نفسها */
    font-size: 22px; /* حجم الأيقونة أصبح أكبر قليلاً */
    width: 45px; /* عرض الأيقونة (لجعلها دائرية) */
    height: 45px; /* ارتفاع الأيقونة (لجعلها دائرية) */
    background-color: rgba(255, 255, 255, 0.15); /* خلفية شفافة أكثر قليلاً */
    border-radius: 50%; /* لجعل الأيقونة دائرية */
    display: flex; /* لتوسيط الأيقونة داخل الدائرة */
    align-items: center; /* توسيط عمودي */
    justify-content: center; /* توسيط أفقي */
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease; /* إضافة تأثير حركة التحجيم */
}

.social-icons a:hover {
    background-color: #007bff; /* لون مميز عند المرور (أزرق) */
    transform: translateY(-3px); /* حركة خفيفة للأعلى عند المرور */
}

/* الجزء السفلي من الفوتر (حقوق الطبع والنشر) */
.footer-bottom {
    text-align: center;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* خط فاصل أكثر وضوحاً */
    color: #aaa; /* لون رمادي فاتح للنص */
    font-size: 13px; /* حجم خط أصغر قليلاً لحقوق الطبع والنشر */
}

/* ----------------------------------------------------- */
/* التجاوبية (Responsive Design) - Media Queries */
/* ----------------------------------------------------- */

/* لأجهزة التابلت والشاشات المتوسطة (768px - 1024px) */
@media (max-width: 1024px) {
    .footer-content {
        justify-content: center; /* توسيط الأقسام بدلاً من space-between */
    }

    .footer-section {
        flex-basis: 45%; /* كل قسم يأخذ حوالي نصف العرض على التابلت */
        min-width: 320px; /* زيادة قليلة للحد الأدنى للعرض */
    }

    .footer-section:nth-child(even) {
        /* لتطبيق مسافات معينة بين الأعمدة لو عايز */
    }
}

/* للأجهزة المحمولة الصغيرة والكبيرة (أقل من 768px) */
@media (max-width: 767px) {
    .footer-content {
        flex-direction: column; /* الأقسام تكون فوق بعضها */
        align-items: center; /* توسيط الأقسام في المنتصف */
        text-align: center; /* توسيط النص داخل الأقسام */
        gap: 40px; /* زيادة المسافة بين الأقسام العمودية */
    }

    .footer-section {
        min-width: 90%; /* تأخذ الأقسام 90% من عرض الشاشة لترك مسافة جانبية */
        flex-basis: auto; /* السماح بتحديد الارتفاع تلقائياً */
    }

    .footer-section h3 {
        text-align: center; /* توسيط العناوين في الأجهزة الصغيرة */
    }

    .footer-section h3::after {
        right: 50%; /* توسيط الخط تحت العنوان */
        transform: translateX(50%); /* إزاحة الخط ليتوسط العنوان تماماً */
    }

    .social-icons {
        justify-content: center; /* توسيط أيقونات السوشيال ميديا */
    }

    .footer-bottom {
        padding-top: 20px;
        margin-top: 20px;
    }
}

/* لأصغر الشاشات (أقل من 480px) - إذا كنت تريد تعديلات إضافية */
@media (max-width: 480px) {
    .app-footer {
        padding: 30px 15px; /* تقليل البادينغ في الشاشات الصغيرة جداً */
    }

    .footer-section h3 {
        font-size: 18px; /* تقليل حجم الخط للعناوين */
    }

    .social-icons a {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}