/* تصميم الهيدر */
            
            header {
                background: rgba(10, 12, 16, 0.45);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
                width: 100%;
                max-width: 100vw;
                /* ضمان أن لا يتجاوز عرض الهيدر عرض الشاشة */
                /* backdrop-filter: blur(0); */
                /* transition: backdrop-filter 0.5s ease-in-out; */
                display: flex;
                justify-content: space-between;
                /* توزيع العناصر */
                align-items: center;
                justify-content: center;
                /* توسيط العناصر أفقيًا */
                /* تمركز عمودي */
                /* padding: 10px 20px; */
                /* background: rgba(255, 255, 255, 0.1); */
                /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
                /* backdrop-filter: blur(10px); */
                /* تأثير التمويه */
                /* border: 1px solid rgba(255, 255, 255, 0.1); */
                color: #E8E3D7;
                position: sticky;
                top: 0;
                z-index: 1000;
                height: 180px;
                /* ارتفاع الهيدر */
                /* border-bottom: 2px solid #555; */
                /* خط الفاصل */
            }
            
            body.loaded header {
                /* backdrop-filter: blur(10px); */
            }
            /* الشعار في المنتصف */
            
            .logo {
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
                /* display: flex; */
                /* align-items: center; */
                /* width: 140px; */
                height: 100px;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }
            
            .logo img {
                /* height: 100px; */
                /* width: 100px; */
                /* object-fit: cover; */
                /* تكبير الشعار */
                /* max-width: 50px; */
                /* background-size: cover; */
                /* الحد الأقصى للعرض */
            }
            /* القائمة الرئيسية (الشاشات الكبيرة) */
            /* إخفاء القائمة الرئيسية على الموبايل */
            
            .main-nav {
                align-items: center;
                display: block;
            }
            
            .main-nav ul {
                list-style: none;
                display: flex;
                gap: 60px;
                /* مسافة بين العناصر */
                margin: 0;
                padding: 0;
            }
            
            .main-nav ul li a {
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
                color: #E8E3D7;
                text-decoration: none;
                font-size: 1.2rem;
                /* تكبير حجم النص */
                transition: color 0.3s ease;
                /* اجعل النص شفافًا */
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 1), /* ظل داكن للحفر */
                -1px -1px 2px rgba(255, 255, 255, 0.2);
                /* إضاءة خفيفة من الأعلى */
                background: linear-gradient(135deg, #ffffff, #c0c0c0);
                /* خلفية للنص */
                -webkit-background-clip: text;
                /* قص الخلفية على النص */
                background-clip: text;
                animation: float 1s infinite alternate;
            }
            
            .main-nav ul li a:hover {
                color: #E8E3D7;
                /* تغيير اللون عند التمرير */
            }
            
            .mobile-nav ul li a::after {
                content: "";
                position: absolute;
                bottom: -5px;
                /* المسافة بين الكلمة والخط السفلي */
                left: 0;
                width: 100%;
                /* امتداد الخط على عرض العنصر */
                height: 1px;
                background-color: #555;
                transition: background-color 0.3s ease;
            }
            
            .mobile-nav ul li a:hover::after {
                background-color: #E8E3D7;
                /* تغيير لون الخط عند التمرير */
            }
            
            .main-nav ul li a:hover {
                color: #E8E3D7;
            }
            /* زر القائمة (للموبايل) */
            
            .menu-icon {
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
                display: none;
                align-items: center;
                font-size: 1.8rem;
                cursor: pointer;
                color: #E8E3D7;
                margin: 15px 15px 15px 15px;
            }
            /* القائمة المنسدلة للموبايل */
            
            .mobile-nav {
                display: none;
                position: absolute;
                top: 90px;
                /* تحت الهيدر */
                left: 0;
                width: 100%;
                background: rgba(0, 0, 0, 0.7);
                /* خلفية شفافة وغامقة */
                backdrop-filter: blur(10px);
                /* تأثير الزجاج */
                -webkit-backdrop-filter: blur(10px);
                /* دعم Safari */
                overflow: hidden;
                height: 0;
                /* مخفية افتراضيًا */
                transition: height 0.5s ease;
                /* تأثير الانزلاق */
                /* border-top: 1px solid rgba(255, 255, 255, 0.2); */
                /* خط فاصل شفاف */
                transition: height 0.5s ease;
                /* تأثير الانزلاق */
                /* border-top: 1px solid #555; */
                /* border-bottom: 2px solid #555; */
                /* خط فاصل */
            }
            
            .mobile-nav.open ul {
                opacity: 1;
                /* ظهور العناصر */
            }
            
            .mobile-nav.open {
                height: 200px;
                /* ضبط الارتفاع الكافي لعرض الروابط */
            }
            
            .mobile-nav ul {
                list-style: none;
                padding: 10px 20px;
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            
            .mobile-nav ul li {
                position: relative;
            }
            
            .mobile-nav ul li a {
                /* font-family: 'Oswald'; */
                display: block;
                color: #E8E3D7;
                text-decoration: none;
                font-size: 1.1rem;
                padding: 15px 15px;
                /* التحكم بالمسافة العمودية */
                text-align: left;
                position: relative;
                /* ضروري لإظهار ::after */
                /* اجعل النص شفافًا */
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 1), /* ظل داكن للحفر */
                -1px -1px 2px rgba(255, 255, 255, 0.2);
                /* إضاءة خفيفة من الأعلى */
                background: linear-gradient(135deg, #ffffff, #c0c0c0);
                /* خلفية للنص */
                -webkit-background-clip: text;
                /* قص الخلفية على النص */
                background-clip: text;
                animation: float 1s infinite alternate;
            }
            
            .mobile-nav ul li a:hover {
                color: #E8E3D7;
                border-bottom-color: #E8E3D7;
                /* تغيير لون الخط عند التمرير */
            }
            /* تصميم متجاوب للشاشات الصغيرة */
            /* تنسيق الأيقونات اللغوية */
            
            
            
            .language-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                /* أيقونات دائرية */
                background: rgba(255, 255, 255, 0.1);
                transition: background 0.3s ease;
            }
            
            .language-icon .flag-icon {
                width: 24px;
                height: 18px;
                border-radius: 3px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }
            
            .language-icon:hover {
                background: rgba(255, 255, 255, 0.3);
            }
            /*desktop أزرار اللغة للشاشات الكبيرة */
            /* تصميم زر اللغة */
            .language-options-desktop{
                display: flex;
                flex-direction: column;
                /* ترتيب عمودي */
                position: absolute;
                right: 20px;
                /* الجهة اليمنى */
                top: 0px;
                /* المسافة من الأعلى */
                gap: 10px;
                /* مسافة بين الأيقونات */
                z-index: 1000;
            }
          

            .language-btn ,.language-btn-mobile {
                background: transparent;
                border: none;
                color: #E8E3D7;
                font-size: 1.5rem;
                cursor: pointer;
                padding: 10px;
            }

            .language-btn:hover,.language-btn-mobile:hover {
                color: #E8E3D7;
            }

            /* تصميم القائمة المنسدلة */
            .language-menu {
                display: none;
                position: absolute;
                top: 50px;
                z-index: 1000;
            }

            /* إظهار القائمة عند النقر */
            .language-options-desktop.active .language-menu {
                display: block;
            }

            /* تنسيق الأعلام */
            .flag-icon {
                width: 20px;
                height: 15px;
                border-radius: 3px;
            }
          
            /* أزرار اللغة داخل ناف الموبايل */
            /* جعل القائمة أفقية */
          .language-options-mobile{
                display: flex;
                flex-direction: column;
                /* ترتيب عمودي */
                position: absolute;
                right: 20px;
                /* الجهة اليمنى */
                top: 10px;
                /* المسافة من الأعلى */
                gap: 10px;
                /* مسافة بين الأيقونات */
                z-index: 1000;
            }
            .language-menu-mobile{
                display: none;
                position: absolute;
                top: 0; /* المسافة بين الزر والقائمة */
                right: 50px;
                z-index: 1000;
                white-space: nowrap; /* منع الانتقال للسطر الجديد */
                gap: 10px; /* مسافة بين العناصر */
            }

          

            .language-menu-mobile .language-item:hover {
                background: rgba(255, 255, 255, 0.2);
            }

            /* إظهار القائمة عند النقر */
            .language-options-mobile.active .language-menu-mobile {
                display: flex;
            }

            /* تنسيق الأعلام */
            .flag-icon {
                width: 20px;
                height: 15px;
                border-radius: 3px;
            }

           
            
            @media (max-width: 768px) {
                header {
                    height: 90px;
                    justify-content: space-between;
                }
                .mobile-nav {
                    display: block;
                }
                
                .language-options-desktop {
                    display: none;
                }

                .main-nav {
                    display: none;
                    /* إخفاء القائمة الرئيسية */
                }
                .menu-icon {
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
                    display: flex;
                    /* إظهار زر القائمة */
                    /* زر القائمة يظهر */
                }
                .logo {
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
                    /* width: 110px; */
                    height: 70px;
                }
            }
            /* تحسين التنسيق للشاشات الكبيرة */
            
            @media (min-width: 995px) {
                header {
                    height: 180px;
                }
                .logo {
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
                    margin: 100px;
                    
                    
                }
               
                .main-nav ul li a {
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
                    font-size: 1.5rem;
                    /* تكبير حجم النص أكثر */
                }
                .mobile-nav {
                    display: none;
                }
            }