body {
    font-family: 'Cairo', 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #1a1d21; /* خلفية تناسب ألوان الهيدر */
    color: #ffffff;
}
header, footer {
    background: #1a1d21;
    color: #ffffff;
    padding: 15px;
    text-align: center;
}
/* التأثيرات العامة */
p, h2, h3, h1 {
    direction: rtl; /* جعل الاتجاه الافتراضي من اليمين لليسار */
    unicode-bidi: embed; /* ترتيب النصوص المختلطة */
    text-align: justify; /* تحسين المحاذاة للنصوص العادية */
}

/* استثناء النصوص بالصنف no-style */
.no-style {
    direction: rtl !important; /* التعامل مع النصوص الإنجليزية */
    unicode-bidi: normal !important; /* منع تعديل النصوص المختلطة */
    text-align: center !important; /* إبقاء النص في المنتصف */
}
/* استثناء الفوتر من التأثيرات */
footer p, footer h2, footer h3, footer h1 {
    direction: unset !important; /* إلغاء الاتجاه */
    unicode-bidi: unset !important; /* إلغاء ترتيب النصوص المختلطة */
    text-align: unset !important; /* إلغاء المحاذاة */
}
/* النصوص التي تحتاج أن تبقى في المنتصف */
.text-center {
    text-align: center !important; /* إجبار النص على البقاء في المنتصف */
    direction: rtl; /* التعامل مع النص العربي */
    unicode-bidi: embed; /* منع انقلاب النصوص المختلطة */
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.feature {
    background: linear-gradient(145deg, #3b4b51, #1a1d21); /* ألوان متناسقة مع الهيدر */
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s;
}
.feature:hover {
    transform: scale(1.05);
}
.feature h3 {
    margin-bottom: 10px;
    font-size: 1.5em;
    color: #3a9ad9; /* لون مميز للعناوين */
}
.feature p {
    font-size: 1.1em;
    color: #d1d5db; /* لون النص */
}
.coming-soon {
    font-size: 1.2em;
    margin-top: 10px;
    background: #3a9ad9; /* لون الأزرار */
    color: #1a1d21;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
}
.features-center {
    display: flex;
    justify-content: center;
    gap: 20px;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animated {
    animation: fadeIn 1s ease-in-out;
}