body {
    font-family: 'Cairo', sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease; /* تأثير التغيير في الخلفية */
    direction: rtl; /* اتجاه النص من اليمين إلى اليسار */
}

header {
    background-color: white; /* تغيير خلفية الهيدر إلى الأبيض */
    color: #4CAF50; /* تغيير لون النص إلى الأخضر */
    padding: 10px;
    text-align: center;
    position: relative;
}

.logo {
    position: absolute;
    left: 10px; /* الشعار في أقصى اليسار */
    top: 10px;
    width: 80px; /* حجم الشعار */
}

.nav-link {
    margin: 0 10px;
    color: #4CAF50; /* لون النص في روابط التنقل */
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* ظل خفيف للنص */
}

section {
    margin: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease; /* تأثير التغيير في الخلفية */
    text-align: center; /* توسيط النص */
}

h2 {
    text-align: center;
    font-size: 28px; /* تكبير الخط للعناوين */
    color: #4CAF50; /* نفس اللون الأخضر */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* ظل خفيف للنص */
    animation: flicker 1.5s infinite; /* إضافة تأثير الفليكر */
}

p {
    font-size: 20px; /* تكبير الخط في الفقرات */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* ظل خفيف للنص */
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #4CAF50; /* اللون الجديد */
    color: white;
}

.slider {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
    border-radius: 8px; /* زوايا دائرية للسلايدر */
}

.slide {
    display: none;
    width: 100%; /* تأكد من أن السلايدر يغطي كامل العرض */
    height: 400px; /* تحديد ارتفاع السلايدر */
}

.slide img {
    width: 100%; /* تأكد من أن الصورة تغطي كامل عرض السلايدر */
    height: 100%; /* تأكد من أن الصورة تغطي كامل ارتفاع السلايدر */
    object-fit: cover; /* ملاءمة الصورة ضمن الإطار */
}

/* إضافة استجابة على الشاشات الصغيرة */
@media only screen and (max-width: 600px) {
    .slide {
        height: 250px; /* ضبط ارتفاع السلايدر على الشاشات الصغيرة */
    }
}

/* تحسين حجم السلايدر للأجهزة اللوحية */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .slide {
        height: 350px; /* ضبط ارتفاع السلايدر على الأجهزة اللوحية */
    }
}

.projects-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-item {
    background-color: #f0f0f0; /* اللون السابق للخلفية */
    border: 2px solid #4CAF50; /* إطار أخضر */
    border-radius: 5px;
    margin: 10px;
    padding: 20px;
    width: 80%; /* عرض العنصر */
    text-align: center; /* نص في المنتصف */
    transition: transform 0.2s; /* تأثير التحريك */
}

.project-item:hover {
    transform: scale(1.05); /* تكبير عند التمرير */
    cursor: pointer; /* تغيير المؤشر */
}

.project-item a {
    text-decoration: none;
    color: #4CAF50; /* لون النص */
    font-weight: bold;
}

/* تأثير خلفية القسم */
section {
    background-color: #ffffff; /* اللون الأبيض */
}

section:hover {
    background-color: #4CAF50; /* اللون الجديد عند التمرير */
}

/* تأثير الفليكر */
@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}
.map-container {
    margin: 20px auto;
    max-width: 800px; /* يمكنك تعديل العرض حسب الحاجة */
    border-radius: 8px; /* زوايا دائرية */
    overflow: hidden; /* لحفظ الشكل */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* ظل خفيف */
}