/* إعدادات عامة */
body {
    /* font-family:  الخط الافتراضي */
    margin: 0; /* إزالة الهامش الافتراضي */
    padding: 0; /* إزالة الحواف الداخلية */
    direction: rtl; /* اتجاه النص من اليمين إلى اليسار */
    background-color: #f4f4f4; /* لون خلفية الصفحة */
    font-family: "Tajawal", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* شريط العنوان */
.header {
    background-color: #4caf50; /* لون خلفية الشريط */
    color: white; /* لون النص */
    padding: 20px; /* حواف داخلية */
    text-align: center; /* توسيط النص */
    display: flex; /* استخدام flexbox للتنسيق */
    justify-content: space-between; /* توزيع العناصر بالتساوي */
    align-items: center; /* محاذاة العناصر عموديًا */
}

.header h1 {
    margin: 0; /* إزالة الهامش الافتراضي للعنوان */
}

.back-btn {
    background-color: #fff; /* لون خلفية الزر */
    color: #4caf50; /* لون النص */
    border: none; /* إزالة حدود الزر */
    padding: 10px; /* حواف داخلية للزر */
    cursor: pointer; /* مؤشر الفأرة عند التمرير على الزر */
}

/* أقسام الأبطال */
.hero-section, .med-section{
    padding: 20px; /* حواف داخلية للقسم */
}

.hero-category ,.med{
    margin-bottom: 30px; /* مسافة أسفل كل قسم */
}

.hero-category h2 {
    text-align: center; /* توسيط النص */
    color: #333; /* لون النص */
}

.hero-list , .med{
    display: flex; /* استخدام flexbox لتوزيع البطاقات */
    flex-wrap: wrap; /* السماح بالانتقال لصف جديد عند امتلاء الصف */
    gap: 18px; /* مسافة بين العناصر */
    justify-content: center; /* توسيط العناصر أفقياً */
    font-size: 20px;
    align-items: center;
}

.hero-card {
    width: 135px; /* عرض البطاقة */
    height: 70px; /* ارتفاع البطاقة */
    background-color: #ddd; /* لون خلفية البطاقة */
    display: flex; /* استخدام flexbox لتوسيط النص */
    justify-content: center; /* توسيط النص أفقياً */
    align-items: center; /* توسيط النص عمودياً */
    cursor: pointer; /* تغيير شكل المؤشر عند التمرير */
    border-radius: 5px; /* زوايا مستديرة للبطاقة */
    transition: transform 0.3s; /* تأثير الانتقال عند التحويم */
}

.hero-card:hover {
    transform: scale(1.1); /* تكبير البطاقة عند التحويم */
}

/* نافذة منبثقة */
.modal {
    display: none; /* إخفاء النافذة المنبثقة بشكل افتراضي */
    position: fixed; /* تثبيت النافذة بالنسبة للشاشة */
    top: 0; /* جعلها تبدأ من أعلى الشاشة */
    left: 0; /* جعلها تبدأ من يسار الشاشة */
    width: 100%; /* جعل النافذة تمتد على عرض الشاشة بالكامل */
    height: 100%; /* جعل النافذة تمتد على ارتفاع الشاشة بالكامل */
    background: rgba(0, 0, 0, 0.7); /* خلفية شفافة معتمة لتعطيل العناصر الخلفية */
    justify-content: center; /* محاذاة المحتوى أفقيًا إلى الوسط */
    align-items: center; /* محاذاة المحتوى رأسيًا إلى الوسط */
    z-index: 1000; /* وضع النافذة فوق كل العناصر الأخرى */
}

.modal-content {
    background-color: white; /* لون خلفية محتوى النافذة */
    padding: 11px; /* مسافة داخلية حول المحتوى */
    border-radius: 10px; /* زوايا مستديرة للنافذة */
    text-align: center; /* محاذاة النص داخل النافذة إلى المنتصف */
    max-width: 400px; /* الحد الأقصى لعرض النافذة */
    width: 90%; /* عرض النافذة كنسبة مئوية من الشاشة */
    position: relative; /* وضع النسبي للسماح بوضع العناصر بداخله باستخدام المواضع النسبية */
}

.modal img {
    max-width: 40%; /* ضبط العرض الأقصى للصورة ليكون متناسبًا مع النافذة */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع للصورة */
    margin-bottom: 15px; /* إضافة مسافة أسفل الصورة */
}

.modal h3 {
    font-size: 20px; /* حجم النص */
    color: #333; /* لون النص */
    margin: 10px 0; /* مسافة عمودية حول النص */
}



.modal-content p {
    font-size: 18px; /* تعيين حجم الخط إلى 16 بكسل */
    line-height: 1.6; /* تعيين ارتفاع السطر (المسافة بين الأسطر) إلى 1.6 */
    color: #555; /* تعيين لون النص إلى اللون الرمادي الداكن (#555) */
    text-align: justify; /* محاذاة النص ليكون مبرراً (يتم توزيع النص بشكل متساوي بين الحواف) */
    margin-bottom: 15px; /* إضافة مسافة بمقدار 15 بكسل أسفل الفقرة */
}

.close-btn {
    position: absolute; /* تثبيت الزر داخل النافذة */
    top: 10px; /* المسافة من أعلى النافذة */
    right: 10px; /* المسافة من يمين النافذة */
    background-color: red; /* لون خلفية الزر */
    color: white; /* لون النص داخل الزر */
    border: none; /* إزالة الحدود من الزر */
    padding: 5px 10px; /* مسافة داخلية حول النص */
    border-radius: 50%; /* جعل الزر دائري الشكل */
    cursor: pointer; /* تغيير مؤشر الماوس عند التمرير فوق الزر */
}


#hero-description {
    font-weight: bold;  /* جعل النص في الوصف الأول بالخط العريض (Bold) ليبرز */
}

#hero-extra-description,
#hero-third-description,
#hero-four-description,
#hero-five-description,
#hero-six-description,
#hero-seven-description {
    font-style: italic;  /* جعل الأوصاف الثانية والثالثة بالخط المائل (Italic) لتفريقها عن الوصف الأول */
    font-size: 17px; /* حجم النص */
    font-weight: bold;
}