body {
    font-family: 'Cairo', sans-serif !important;
}
/* تعريف فئة CSS خاصة لصفحتك */
.landing-page-font-cairo * {
    font-family: 'Cairo', sans-serif !important; /* تطبيق الخط على جميع العناصر داخل الحاوية */
}

.landing-page-font-cairo .mud-chip {
    /* left: -12px !important;  هذا قد يحتاج لـ "right: -12px !important;" في LTR */
    /* right: auto !important; */
}

.landing-page-font-cairo .mud-list-item-icon {
    /* margin-left: 8px !important; هذه الهوامش قد تحتاج للعكس في LTR */
    /* margin-right: 0 !important; */
}

.landing-page-font-cairo .mud-text-align-center {
    text-align: center !important;
}

/* فئة CSS إضافية لضمان تمدد MudItem */
.flex-item-stretch {
    display: flex;
    flex-direction: column;
}
/* فئة CSS إضافية لضمان تمدد MudCard داخل MudItem */
.mud-card-stretch {
    flex-grow: 1; /* تجعل البطاقة تتمدد لملء المساحة الرأسية المتاحة */
}

/* نمط خاص للصورة في الهيدر */
.hero-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* لإعطاء الصورة حواف مدورة تتناسب مع MudPaper */
    box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* لإضافة ظل أعمق للصورة */
    margin-top: 32px; /* مسافة من النص أعلاه */
    margin-bottom: 32px; /* مسافة من القسم التالي */
    transition: transform 0.3s ease-in-out; /* تأثير التحويل عند التمرير */
}

    .hero-image:hover {
        transform: scale(1.01); /* تكبير طفيف عند التمرير */
    }

/* تحسينات بسيطة للفوتر */
.footer-links a {
    color: var(--mud-palette-text-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

    .footer-links a:hover {
        color: var(--mud-palette-primary); /* لون مختلف عند التمرير */
    }

/* لتحديد مكان زر تغيير اللغة */
.language-switcher-container {
    position: absolute;
    top: 20px; /* مسافة من الأعلى */
    z-index: 1000; /* لضمان ظهوره فوق العناصر الأخرى */
}

/* صورة شعار PayPal */
.paypal-logo {
    max-height: 32px;
    margin-top: 6px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}




/* Media Query لتقليل حجم الخط على الموبايل */
@media (max-width: 768px) {
    .hero-title-responsive {
        font-size: 2rem !important; /* حجم العنوان الرئيسي */
    }

    .hero-subtitle-responsive {
        font-size: 1.5rem !important; /* حجم العنوان الفرعي */
    }

    .hero-description-responsive {
        font-size: 1rem !important; /* حجم الوصف */
        line-height: 1.5; /* تحسين المسافة بين الأسطر لسهولة القراءة */
    }

    /* تنسيق العناوين والأزرار الأخرى */
    .section-title-responsive {
        font-size: 1.8rem !important;
    }

    .feature-title-responsive {
        font-size: 1rem !important;
    }

    .pricing-plan-title-responsive {
        font-size: 1.3rem !important;
    }

    .pricing-plan-price-responsive {
        font-size: 2.5rem !important;
    }

    /* حجم الأزرار الرئيسية */
    .hero-cta-button {
        font-size: 1rem !important; /* حجم النص في الزر */
        padding: 10px 24px !important; /* حجم الزر نفسه */
    }

    .cta-button {
        font-size: 1rem !important;
        padding: 10px 24px !important;
    }

    .section-title-responsive {
        font-size: 1.8rem !important; /* هذا هو التعديل الجديد */
    }

    .result-number-responsive {
        font-size: 2.5rem !important; /* حجم الخط للأرقام */
    }

    .result-description-responsive {
        font-size: 0.9rem !important; /* حجم الخط للوصف */
    }



    .feature-description-responsive {
        font-size: 0.9rem !important;
    }

    .pricing-list-item-responsive {
        font-size: 0.9rem !important; /* حجم خط أصغر ليتناسب مع الشاشة */
    }


    .cta-subtitle-responsive {
        font-size: 1.2rem !important; /* عنوان فرعي أصغر */
    }

    .footer-links-responsive {
        font-size: 0.8rem !important; /* حجم أصغر قليلاً للروابط على الموبايل */
        line-height: 1.5; /* تباعد أفضل بين الأسطر */
    }

        .footer-links-responsive a {
            color: white !important; /* يجعل لون الروابط أبيض */
            text-decoration: none; /* يزيل الخط الموجود تحت الروابط */
            transition: color 0.3s; /* لإضافة تأثير ناعم عند التمرير */
        }

            /* تنسيق الروابط عند التمرير عليها بالماوس */
            .footer-links-responsive a:hover {
                color: var(--mud-palette-primary) !important; /* يتغير اللون إلى اللون الأساسي عند التمرير */
            }
}