body {
    font-family: 'Cairo', sans-serif; /* تعيين خط الصفحة */
    margin: 0; /* إزالة الهوامش الافتراضية من جميع الحواف */
    padding: 0; /* إزالة الحشوات الافتراضية */
    background-image: url('Asset2.jpeg'); /* تعيين صورة الخلفية */
    background-size: cover; /* تغطية الخلفية على كامل الشاشة */
    background-position: center; /* تحديد موضع الصورة في المركز */
    background-attachment: fixed; /* جعل الخلفية ثابتة أثناء التمرير */
    color: rgb(14, 13, 13); /* تعيين لون النص */
}

/* ===== HEADER ===== */
header {
    background: rgba(0, 0, 0, 0.5); /* خلفية مظللة بلون أسود شفاف */
    color: white; /* تعيين لون النص داخل الهيدر */
    text-align: center; /* محاذاة النص إلى المنتصف */
    padding: 80px 20px; /* إضافة حشوة داخلية في الأعلى والأسفل */
    position: relative; /* تعيين موضع العنصر بشكل نسبي */
    overflow: hidden; /* إخفاء المحتوى الذي يتجاوز الحدود */
}

header h1 {
    font-size: 4rem; /* حجم الخط للعناوين */
    margin: 0; /* إزالة الهامش الافتراضي */
    animation: fadeInDown 1s ease-in-out; /* إضافة تأثير الأنيميشن على العنصر */
}

header p {
    font-size: 1.5rem; /* حجم الخط للنصوص */
    margin: 10px 0 20px; /* تعيين الهوامش للنص */
    animation: fadeInUp 1.2s ease-in-out; /* إضافة تأثير الأنيميشن على النص */
}

/* Add logo image */
header img {
    max-width: 150px; /* تعيين أقصى عرض لشعار الموقع */
    margin-bottom: 20px; /* إضافة هامش أسفل الشعار */
    animation: fadeInUp 1.4s ease-in-out; /* إضافة تأثير الأنيميشن عند ظهور الشعار */
}

header::before, header::after {
    content: ''; /* تحديد المحتوى العنصر */
    position: absolute; /* تحديد موضع العنصر بشكل مطلق */
    width: 200px; /* تعيين العرض */
    height: 200px; /* تعيين الارتفاع */
    background: rgba(255, 255, 255, 0.1); /* خلفية شفافة بيضاء */
    filter: blur(100px); /* تطبيق تأثير التمويه على الخلفية */
    border-radius: 50%; /* جعل العنصر دائري */
    animation: floating 5s infinite; /* إضافة تأثير الأنيميشن */
}

header::before {
    top: -50px; /* تحديد موضع العنصر قبل */
    left: -50px; /* تحديد موضع العنصر قبل */
}

header::after {
    bottom: -50px; /* تحديد موضع العنصر بعد */
    right: -50px; /* تحديد موضع العنصر بعد */
}

/* ===== NAVIGATION ===== */
nav {
    background: #333; /* خلفية داكنة للقائمة */
    padding: 10px 0; /* حشوة رأسية للقائمة */
    text-align: center; /* محاذاة النص في القائمة إلى المنتصف */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* إضافة ظل للقائمة */
    position: sticky; /* جعل القائمة ثابتة عند التمرير */
    top: 0; /* تحديد مكان القائمة من الأعلى */
    z-index: 10; /* تحديد ترتيب العنصر بالنسبة لبقية العناصر */
}

nav a {
    color: white; /* تحديد لون النص */
    text-decoration: none; /* إزالة التسطير الافتراضي */
    margin: 0 15px; /* إضافة هوامش بين العناصر */
    font-size: 1.2rem; /* حجم الخط للروابط */
    padding: 10px 15px; /* إضافة حشوة داخلية للروابط */
    border-radius: 5px; /* جعل الحواف مستديرة */
    transition: all 0.3s; /* إضافة تأثير انتقالي */
}

nav a:hover {
    background: #6a11cb; /* تغيير الخلفية عند التمرير */
    color: #fff; /* تغيير لون النص عند التمرير */
}

/* ===== SERVICES SECTION ===== */
.container {
    padding: 40px 20px; /* إضافة حشوة حول المحتوى */
}

h2 {
    font-size: 2.5rem; /* حجم الخط للعناوين */
    text-align: center; /* محاذاة العنوان إلى المنتصف */
    color: #6a11cb; /* تعيين اللون للعناوين */
    margin-bottom: 20px; /* إضافة هامش أسفل العنوان */
}

.services {
    display: flex; /* استخدام Flexbox لترتيب العناصر */
    flex-wrap: wrap; /* السماح للعناصر بالتفاف عند الحاجة */
    gap: 30px; /* تحديد المسافة بين العناصر */
    justify-content: center; /* محاذاة العناصر إلى المنتصف */
}

.service {
    background: #222; /* خلفية داكنة للعناصر */
    border-radius: 10px; /* حواف مستديرة */
    overflow: hidden; /* إخفاء المحتوى الذي يتجاوز الحدود */
    width: 300px; /* تحديد عرض العنصر */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* إضافة ظل للعناصر */
    transition: transform 0.3s; /* إضافة تأثير عند التمرير */
}

.service:hover {
    transform: scale(1.05); /* تكبير العنصر عند التمرير */
}

.service img {
    width: 100%; /* تعيين عرض الصورة لتغطية العنصر بالكامل */
    height: 200px; /* تحديد ارتفاع الصورة */
    object-fit: cover; /* ضبط الصورة لتغطية المساحة بشكل مناسب */
}

.service h3 {
    background: #6a11cb; /* خلفية لون مميز للعناوين داخل الخدمة */
    color: white; /* تحديد لون النص */
    margin: 0; /* إزالة الهوامش */
    padding: 15px; /* إضافة حشوة داخلية */
    text-align: center; /* محاذاة النص إلى المنتصف */
    font-size: 1.5rem; /* تحديد حجم الخط */
}

.service p {
    padding: 15px; /* حشوة داخلية للنص */
    color: #ddd; /* لون النص */
    font-size: 1rem; /* حجم الخط */
}

/* ===== SOCIAL MEDIA SECTION ===== */
.social-media {
    padding: 5px 5px; /* حشوة حول المحتوى */
    text-align: center; /* محاذاة النص إلى المنتصف */
    
}

.social-media h2 {
    font-size: 2.5rem; /* حجم الخط للعناوين */
    color: rgb(0, 0, 0); /* لون النص */

}

.social-icons {
    display: flex; /* استخدام Flexbox لترتيب الأيقونات */
    justify-content: center; /* محاذاة الأيقونات إلى المنتصف */
    gap: 20px; /* تحديد المسافة بين الأيقونات */
}

.social-icon {
    width: 50px; /* تحديد عرض الأيقونة */
    height: 50px; /* تحديد ارتفاع الأيقونة */
    border: none; /* إزالة الحدود */
    background-color: transparent; /* خلفية شفافة */
    transition: transform 0.3s ease, opacity 0.3s ease; /* تأثير الانتقال عند التمرير */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* إضافة ظل للأيقونات */
}

.social-icon:hover {
    transform: scale(1.1); /* تكبير الأيقونة عند التمرير */
    opacity: 0.8; /* تقليل الشفافية عند التمرير */
}

/* ===== FOOTER ===== */
footer {
    background: #333; /* خلفية داكنة للتذييل */
    color: white; /* لون النص */
    text-align: center; /* محاذاة النص إلى المنتصف */
    padding: 20px; /* إضافة حشوة حول التذييل */
    margin-top: 40px; /* إضافة هامش أعلى التذييل */
}

footer a {
    color: #6a11cb; /* لون الرابط */
    text-decoration: none; /* إزالة التسطير الافتراضي */
    transition: color 0.3s; /* تأثير انتقالي لتغيير اللون عند التمرير */
}

footer a:hover {
    color: #fff; /* تغيير لون الرابط عند التمرير */
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px); /* تحريك العنصر من الأعلى */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* العودة إلى الموضع الطبيعي */
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* تحريك العنصر من الأسفل */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* العودة إلى الموضع الطبيعي */
    }
}

@keyframes floating {
    0%, 100% {
        transform: translateY(0); /* حركة خفيفة للأعلى والأسفل */
    }
    50% {
        transform: translateY(20px); /* حركة للأسفل */
    }
}

.location {
    text-align: center; /* محاذاة النص إلى المنتصف */
    margin: 20px auto; /* إضافة هامش حول العنصر */
    
}

.location h2 {
    color: #0077cc; /* لون العنوان */
    margin-bottom: 10px; /* إضافة هامش أسفل العنوان */
}

.map-link {
    display: inline-block; /* جعل الرابط في سطر واحد */
    background-color: #0077cc; /* خلفية ملونة للرابط */
    color: #080808; /* لون النص */
    padding: 10px 15px; /* إضافة حشوة داخلية للرابط */
    text-decoration: none; /* إزالة التسطير */
    border-radius: 5px; /* حواف مستديرة */
    transition: background-color 0.3s ease; /* تأثير عند التمرير */
}

.test{
    display: inline-block; /* جعل الرابط في سطر واحد */
    background-color: #0077cc; /* خلفية ملونة للرابط */
    color: #080808; /* لون النص */
    padding: 10px 15px; /* إضافة حشوة داخلية للرابط */
    text-decoration: none; /* إزالة التسطير */
    border-radius: 5px; /* حواف مستديرة */
    transition: background-color 0.3s ease;   
}