/* أنماط عامة */
body {
    font-family: 'Tajawal', sans-serif, Arial, sans-serif; /* نوع الخط */
    background-color: #F6F6F6; /* لون خلفية الصفحة */
    color: #101E33; /* لون النص */
    line-height: 1.6; /* ارتفاع السطر */
    direction: rtl; /* يجعل الاتجاه من اليمين لليسار */
    text-align: right; /* النص يبدأ من اليمين */
    margin: 0; /* إزالة الهوامش الافتراضية */
    padding: 0; /* إزالة الحشوة الافتراضية */
}

/* أنماط الهيدر */
header {
    background-color: #101E33; /* لون خلفية الهيدر */
    color: white; /* لون النص في الهيدر */
    padding: 10px 30px; /* مسافة من الحواف */
    display: flex;
    justify-content: space-between; /* لضمان وجود الشعار على اليمين والقائمة في المنتصف */
    align-items: center;
}

.header-content {
    margin-bottom: 20px; /* مسافة أسفل محتوى الهيدر */
}

.logo {
    max-width: 150px; /* عرض الشعار الأقصى */
}

.app-name {
    font-size: 24px; /* حجم خط اسم التطبيق */
    margin: 10px 0; /* مسافة حول اسم التطبيق */
}

/* أنماط القائمة */
nav {
    flex-grow: 1; /* لجعل المساحة الوسطى تمتد */
    display: flex;
    justify-content: center; /* لتوسيط القائمة */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* لتوسيط الروابط داخل القائمة */
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}

/* أنماط البانر */
.banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
    background-color: #F49321; /* لون خلفية البانر */
    color: white; /* لون النص في البانر */
}

.banner-text {
    max-width: 50%;
}

.banner h1 {
    font-size: 48px; /* حجم خط العنوان في البانر */
    margin-bottom: 10px; /* مسافة أسفل العنوان */
}

.banner p {
    font-size: 20px; /* حجم خط الفقرة في البانر */
    margin-bottom: 20px; /* مسافة أسفل الفقرة */
}

.app-buttons a img {
    width: 150px; /* عرض الأزرار في البانر */
    margin-right: 10px; /* مسافة بين الأزرار */
}

.banner-image img {
    max-width: 400px; /* عرض الصورة في البانر */
    width: 100%; /* عرض الصورة بالكامل */
}

/* أنماط محتويات التطبيق */
.app-features, .app-importance {
    padding: 30px; /* حشوة داخل أقسام الميزات والأهمية */
    background-color: white; /* لون خلفية الأقسام */
    margin-bottom: 30px; /* إضافة مسافة أسفل كل قسم لتفادي التداخل */
}

.app-features h2, .app-importance h2 {
    font-size: 32px; /* حجم خط العناوين في الأقسام */
    margin-bottom: 20px; /* مسافة أسفل العنوان */
}

.app-features ul {
    list-style: none; /* إزالة النقاط من القائمة */
    padding: 0; /* تأكد من أن الحشو هو 0 */
    margin: 30px 0; /* إضافة مسافة من الحواف الخارجية للقسم */
}

.app-features ul li {
    font-size: 20px; /* حجم خط العناصر في قائمة الميزات */
    margin-bottom: 10px; /* مسافة أسفل كل عنصر */
    color: #101e33; /* لون النص في العناصر */
}

.app-importance h3 {
    font-size: 24px; /* حجم الخط لعناوين الأقسام */
    margin-top: 20px; /* مسافة أعلى العنوان */
    margin-bottom: 10px; /* مسافة أسفل العنوان */
    color: #101E33; /* لون العنوان */
}

.app-importance p {
    font-size: 18px; /* حجم الخط للنصوص */
    margin-bottom: 15px; /* مسافة بين الفقرات */
}

/* أنماط نموذج الدعم الفني */
main {
    padding: 20px; /* حشوة حول المحتوى الرئيسي */
    max-width: 800px; /* عرض أقصى للمحتوى */
    margin: auto; /* محاذاة المحتوى في المنتصف */
    background-color: white; /* لون خلفية المحتوى الرئيسي */
    border-radius: 8px; /* زوايا مستديرة للمحتوى */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* ظل خفيف حول المحتوى */
}

h1 {
    font-size: 24px; /* حجم خط العنوان الرئيسي */
    text-align: center; /* محاذاة العنوان في المنتصف */
    color: #ffffff; /* لون العنوان */
    margin-bottom: 20px; /* مسافة أسفل العنوان */
}
h2 {
    font-size: 24px; /* حجم خط العنوان الرئيسي */
    text-align: center; /* محاذاة العنوان في المنتصف */
    color: #101e33; /* لون العنوان */
    margin-bottom: 20px; /* مسافة أسفل العنوان */
}

form {
    display: flex; /* استخدام نظام الفليكس */
    flex-direction: column; /* وضع العناصر عمودياً */
}

label {
    margin-bottom: 5px; /* مسافة أسفل كل تسمية */
}

input, textarea {
    margin-bottom: 15px; /* مسافة أسفل الحقول */
    padding: 10px; /* حشوة داخل الحقول */
    border: 1px solid #ccc; /* إطار خفيف حول الحقول */
    border-radius: 4px; /* زوايا مستديرة للحقول */
}

button {
    padding: 10px; /* حشوة داخل الزر */
    background-color: #101e33; /* لون خلفية الزر */
    color: white; /* لون النص في الزر */
    border: none; /* إزالة الإطار الافتراضي */
    border-radius: 4px; /* زوايا مستديرة للزر */
    cursor: pointer; /* تغيير شكل المؤشر عند التحويم */
}

button:hover {
    background-color: #0056b3; /* لون الخلفية عند التحويم */
}

/* أنماط الفوتر */
footer {
    background-color: #101E33; /* لون الخلفية */
    color: white; /* لون النص */
    padding: 20px; /* مسافة داخلية */
    display: flex; /* استخدام الفليكس */
    justify-content: space-between; /* توزيع المحتوى بالتساوي */
    align-items: flex-start; /* محاذاة العناصر في الأعلى */
}

.footer-container {
    display: flex; /* استخدام الفليكس لتوزيع العناصر */
    justify-content: space-between; /* توزيع الفقرات بالتساوي */
    width: 100%; /* عرض كامل */
    flex-wrap: wrap; /* السماح بلف العناصر في حال كانت الشاشة صغيرة */
}

.footer-logo {
    text-align: right; /* محاذاة الشعار إلى اليمين */
}

.footer-logo img {
    max-width: 100%; /* التأكد من أن الشعار لا يتجاوز حده الأقصى */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
}

.footer-logo p {
    margin: 0; /* إزالة أي مسافات افتراضية */
    max-width: 300px; /* تعيين حد أقصى لعرض النص */
}

.quick-links {
    text-align: center; /* محاذاة الروابط إلى الوسط */
}

.quick-links h3, .contact-info h3 {
    margin-bottom: 10px; /* مسافة أسفل العنوان */
}

.quick-links-columns {
    display: flex; /* استخدام Flexbox لتوزيع القائمتين */
    justify-content: center; /* محاذاة القائمتين في المنتصف */
}

.quick-links-list {
    list-style: none; /* إزالة النقاط من القائمة */
    padding: 0; /* إزالة المسافة الداخلية */
    margin: 0 10px; /* إضافة مسافة جانبية بين القائمتين */
}

.quick-links-list a {
    color: white; /* لون النص في الروابط إلى الأبيض */
    text-decoration: none; /* إزالة التسطير من الروابط */
}

.quick-links-list a:hover {
    text-decoration: underline; /* إضافة التسطير عند التحويم */
}

.contact-info {
    text-align: right; /* محاذاة النص إلى اليمين */
}

.contact-info p {
    margin: 5px 0; /* مسافة بين الفقرات */
}

.contact-info a {
    color: white; /* لون النص في معلومات الاتصال إلى الأبيض */
    text-decoration: none; /* إزالة التسطير من الروابط */
}

.contact-info a:hover {
    text-decoration: underline; /* إضافة التسطير عند التحويم */
}

.social-media-icons a {
    margin-right: 10px; /* مسافة بين الأيقونات */
}

/* Responsive Design */
@media (max-width: 768px) {
    .banner {
        flex-direction: column;
        text-align: center;
    }

    .banner-image {
        margin-top: 20px; /* مسافة أعلى الصورة في البانر */
    }

    .app-buttons a img {
        width: 120px; /* عرض الأزرار في البانر للنسخ الصغيرة */
        margin-right: 5px; /* تقليل المسافة بين الأزرار */
    }

    .footer-container {
        flex-direction: column; /* وضع عناصر الفوتر في عمود */
        align-items: center; /* محاذاة العناصر في المنتصف */
    }
}