@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

body {
    margin: 0;
    font-family: 'Tajawal', sans-serif;
}

.hero-section {
    /* تحديد ارتفاع العنصر ليملأ الشاشة */
    height: 100vh; /* 100% من ارتفاع نافذة العرض */

    /* * هذا هو الكود الأساسي لتحقيق التأثير:
     * نحدد طبقتين للخلفية، مفصولة بفاصلة.
     * الطبقة الأولى (العلوية) هي التدرج اللوني.
     * الطبقة الثانية (السفلية) هي الصورة.
    */
    background-image: 
        /* الطبقة العلوية: التدرج */
        linear-gradient(
            to bottom,  /* الاتجاه: من الأعلى إلى الأسفل */
            rgba(135, 206, 235, 0.7), /* لون سماوي (Sky Blue) مع 70% شفافية */
            rgba(255, 255, 255, 0)   /* يتلاشى إلى شفاف بالكامل */
        ),
        
        /* الطبقة السفلية: الصورة */
        url('bg1.jpg'); /* <-- ضع رابط صورتك هنا */

    
    /* خصائص إضافية لضمان ظهور الصورة بشكل جيد */
    background-size: cover;      /* لجعل الصورة تغطي كامل العنصر */
    background-position: center; /* لتوسيط الصورة */
    background-repeat: no-repeat; /* لمنع تكرار الصورة */

    /* (اختياري) لتنسيق النص الداخلي ليبدو أفضل */
    color: white;
    text-align: center;
    padding-top: 25px; /* لإعطاء مساحة للنص من الأعلى */
}