/* إعدادات عامة للصفحة */
    body {
      margin: 0;
      /* إزالة الهوامش الافتراضية للمتصفح */
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
      /* تحديد نوع الخط الأساسي للنصوص */
      background-color: #f7fdf9;
      /* ضبط لون خلفية الصفحة بلون فاتح مائل للأخضر */
      color: #333;
      /* تعيين لون النص الأساسي (رمادي غامق) */
      line-height: 1.3;
      /* تحديد ارتفاع السطر لزيادة وضوح النص */
    }

    /* تنسيقات الرأس والتذييل */
    header,
    footer {
      background-color: #006233;
      /* تطبيق خلفية خضراء على الهيدر والفوتر */
      color: #fff;
      /* جعل النص باللون الأبيض */
      padding: 4px 6px;
      /* إضافة مسافة داخلية حول النص */
      text-align: center;
      /* محاذاة المحتوى إلى المنتصف */
    }

    /* 👤 قسم الهوية: يحتوي على الشعار والعنوان */
    .branding {
      display: flex;
      /* استخدام نظام Flexbox لترتيب العناصر أفقيًا */
      align-items: center;
      /* محاذاة العناصر عموديًا في المنتصف */
      justify-content: center;
      /* توسيط العناصر أفقيًا في الحاوية */
      gap: 5px;
      /* ترك مسافة صغيرة بين الشعار والنص */
      flex-wrap: wrap;
      /* السماح للعناصر بالانتقال إلى سطر جديد عند ضيق المساحة */
    }

    /* إعدادات صورة الشعار */
    .branding img {
      width: 32px;
      /* تحديد عرض الشعار بالبكسل */
      height: auto;
      /* جعل الارتفاع يتناسب تلقائيًا مع العرض */
    }

    /* إعدادات أيقونة الهوية (إن وجدت) */
    .branding i {
      font-size: 20px;
      /* تكبير حجم الأيقونة داخل الهوية */
    }

    /* إعدادات عنوان الهوية */
    .branding h1 {
      margin: 0;
      /* إزالة أي هامش افتراضي حول العنوان */
      font-size: 1.4em;
      /* تحديد حجم الخط بنسبة إلى الخط الأساسي */
      font-weight: 700;
      /* جعل الخط عريضًا (Bold) */
    }


    /* 📦 أقسام الموقع */
    section {
      background: #fff;
      /* تعيين لون خلفية القسم باللون الأبيض */
      border: 1px solid #cde7da;
      /* إضافة إطار خفيف بلون أخضر باهت حول القسم */
      border-radius: 12px;
      /* جعل الزوايا دائرية لتنعيم المظهر */
      padding: 16px;
      /* مسافة داخلية بين المحتوى وحدود القسم */
      margin: 20px auto;
      /* مسافة خارجية من الأعلى والأسفل وتوسيط القسم أفقيًا */
      max-width: 900px;
      /* تحديد العرض الأقصى للقسم لمنع تمدده الزائد */
      box-shadow: 0 2px 6px rgba(0, 98, 51, .08);
      /* تطبيق ظل خفيف بلون أخضر نصف شفاف أسفل القسم */
      transition: transform .3s ease;
      /* إضافة تأثير حركة سلس عند التغيير في الحجم أو الموضع */
    }

    /* تأثير بصري عند مرور المؤشر على القسم */
    section:hover {
      transform: scale(1.005);
      /* تكبير طفيف جدًا للقسم لتمييزه بصريًا عند المرور */
    }


    /* عناوين الأقسام */
    section h2,
    section h3 {
      background: #f0faf6 !important;
      /* خلفية فاتحة بلون أخضر باهت */
      color: #a52a2a !important;
      /* لون النص بني مائل للأحمر */
      padding: 12px 16px;
      /* مسافة داخلية من جميع الجهات حول النص */
      font-size: 1.05em;
      /* تكبير بسيط لحجم الخط */
      border-radius: 10px;
      /* زوايا ناعمة مستديرة */
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .05);
      /* خط داخلي خفيف أسفل العنوان */
      cursor: pointer;
      /* عند المرور يظهر مؤشر اليد للدلالة على القابلية للنقر */
      display: flex;
      /* تفعيل نظام Flex لترتيب النص والأيقونة أفقيًا */
      justify-content: space-between;
      /* توزيع النص يسارًا والأيقونة يمينًا */
      align-items: center;
      /* محاذاة عمودية في المنتصف */
      transition: background-color .3s ease;
      /* انتقال ناعم عند تغيير لون الخلفية */
    }

    /* تأثير عند مرور المؤشر فوق العنوان */
    section h2:hover {
      background: #cde7da;
      /* تغيير لون الخلفية إلى أخضر فاتح عند المرور */
    }

    /* الأيقونة الصغيرة بجانب العنوان */
    section h2 .toggle-icon {
      transition: transform .4s ease;
      /* حركة دوران ناعمة عند التبديل */
      font-size: 1em;
      /* حجم الأيقونة متوسط */
    }

    /* عند فتح القسم، يتم تدوير الأيقونة لتشير إلى الاتجاه */
    section h2.open .toggle-icon {
      transform: rotate(90deg);
      /* تدوير الأيقونة بمقدار 90 درجة */
    }

    /* 📋 القوائم الداخلية داخل الأقسام */
    ul {
      list-style: none;
      /* إزالة النقاط من القائمة */
      padding: 0 10px;
      /* مسافة داخلية أفقية بسيطة */
      max-height: 0;
      /* إخفاء القائمة افتراضيًا بتحديد ارتفاعها بصفر */
      overflow: hidden;
      /* إخفاء العناصر الزائدة عن الارتفاع المحدد */
      transition: max-height .6s ease, opacity .6s ease;
      /* تأثير فتح وإغلاق ناعم */
      opacity: 0;
      /* جعلها شفافة عند الإغلاق */
    }

    /* عند تفعيل القائمة */
    ul.show {
      max-height: 1000px;
      /* السماح بظهور العناصر داخل القائمة */
      opacity: 1;
      /* جعلها مرئية بالكامل */
    }


    /* عناصر القوائم داخل الأقسام */
    section ul li {
      padding: 8px 4px;
      /* مسافة داخلية عمودية وأفقية بسيطة داخل كل عنصر */
      border-bottom: 1px dashed #ccc;
      /* خط فاصل منقط بلون رمادي فاتح أسفل كل عنصر */
      transition: background .2s ease;
      /* تأثير ناعم عند تغيير لون الخلفية أثناء التفاعل */
      color: #880000;
      /* لون النص داخل العنصر أحمر غامق */
      word-wrap: break-word;
      /* تمكين كسر الكلمات الطويلة لتفادي خروجها عن الإطار */
    }

    /* تأثير عند مرور المؤشر على عنصر القائمة */
    section ul li:hover {
      background: #fdf5f5;
      /* تغيير لون الخلفية إلى وردي فاتح لتمييز العنصر */
    }

    /* 🔗 تنسيق الروابط العامة في الصفحة */
    a {
      color: #a52a2a;
      /* اللون الافتراضي للروابط هو البني المحمر */
      font-weight: 700;
      /* جعل النص داخل الرابط عريضًا */
      text-decoration: none;
      /* إزالة الخط السفلي الافتراضي للرابط */
    }

    /* عند تمرير الفأرة فوق الرابط */
    a:hover {
      color: #880000;
      /* يصبح اللون أحمر غامق عند المرور */
      text-decoration: underline;
      /* يظهر خط أسفل الرابط عند المرور لتوضيح التفاعل */
    }

    /* ألوان الأيقونات المرافقة للعناوين */
    .toggle-icon,
    .count,
    section h2 i,
    section h3 i {
      color: #a52a2a !important;
      /* تعيين لون جميع الأيقونات إلى البني المحمر */
    }

    /* 🔍 تنسيق صندوق البحث الرئيسي */
    #searchBox {
      max-width: 500px;
      /* تحديد أقصى عرض للصندوق ليبقى متناسقًا */
      margin: 20px auto;
      /* ترك مسافة عمودية وتوسيطه أفقيًا في الصفحة */
      display: flex;
      /* استخدام Flex لتسهيل محاذاة العناصر داخله */
      justify-content: center;
      /* توسيط عناصر البحث أفقيًا */
    }

    /* حقل إدخال النص داخل صندوق البحث */
    #searchInput {
      width: 90%;
      /* جعل عرض الحقل يشغل أغلب المساحة المتاحة */
      max-width: 600px;
      /* تحديد حد أقصى للعرض للحفاظ على التناسق */
      padding: 10px;
      /* مسافة داخلية مريحة للمستخدم */
      border-radius: 10px;
      /* جعل زوايا الحقل دائرية لتصميم عصري */
      border: 1px solid #ccc;
      /* إطار رمادي خفيف حول الحقل */
      box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
      /* ظل خفيف أسفل الحقل لإبرازه بصريًا */
      font-size: 1em;
      /* حجم خط قياسي مناسب للقراءة */
    }

    /* ⬆️ زر العودة إلى أعلى الصفحة */
    #scrollTopBtn {
      position: fixed;
      /* إبقاء الزر ثابتًا في موضعه عند التمرير */
      bottom: 80px;
      /* وضعه على بعد 80 بكسل من أسفل الشاشة */
      left: 20px;
      /* وضعه على بعد 20 بكسل من يسار الشاشة */
      background: #006233;
      /* خلفية خضراء داكنة للزر */
      color: #fff;
      /* لون أيقونة الزر أبيض لتباين جيد */
      border: none;
      /* إزالة أي إطار افتراضي */
      padding: 12px 16px;
      /* مساحة داخلية حول الأيقونة */
      border-radius: 50%;
      /* جعل الزر دائري الشكل */
      font-size: 20px;
      /* حجم أيقونة السهم داخل الزر */
      cursor: pointer;
      /* مؤشر الفأرة يتحول إلى يد عند المرور */
      display: none;
      /* الزر مخفي افتراضيًا حتى يبدأ التمرير */
      box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
      /* ظل خفيف أسفل الزر لرفعه بصريًا */
      z-index: 9999;
      /* ضمان بقاء الزر فوق كل العناصر الأخرى */
    }

    /* 📱 تحسين العرض على الشاشات الصغيرة */
    @media (max-width: 768px) {

      /* تطبيق هذه القواعد عندما يكون عرض الشاشة أقل من 768 بكسل */
      body {
        font-size: .95em;
        /* تقليل حجم النص قليلاً ليظهر مناسبًا على الهواتف */
      }

      .branding h1 {
        font-size: 1em;
        /* تصغير عنوان الهوية */
      }

      header h1 {
        font-size: 1.0em;
        /* تصغير العنوان الرئيسي في الهيدر */
      }

      section h2,
      section h3 {
        font-size: 1em;
        /* تقليل حجم عناوين الأقسام */
        padding: 8px;
        /* تقليل المسافات الداخلية */
      }

      ul li {
        font-size: .95em;
        /* تصغير حجم النص في عناصر القوائم */
        padding: 4px 0;
        /* تقليل التباعد العمودي */
      }

      #searchInput {
        font-size: .95em;
        /* تقليل حجم النص داخل حقل البحث */
        padding: 8px;
        /* تقليل المسافة الداخلية */
      }

      #scrollTopBtn {
        font-size: 24px;
        /* تكبير أيقونة السهم قليلاً للهواتف */
        padding: 14px;
        /* زيادة حجم الزر لتسهيل اللمس */
      }
    }

    /* ✨ حركة نابضة للأيقونات */
    @keyframes pulse {
      0% {
        transform: scale(1);
        /* الحالة الابتدائية: الحجم الطبيعي */
      }

      50% {
        transform: scale(1.1);
        /* في منتصف الحركة: تكبير بنسبة 10% */
      }

      100% {
        transform: scale(1);
        /* العودة للحجم الأصلي */
      }
    }

    /* تطبيق تأثير النبض على الأيقونات داخل عناصر ذات حواف دائرية عند المرور */
    div[style*="border-radius"] i:hover {
      animation: pulse .6s ease-in-out infinite;
      /* تشغيل الحركة بشكل مستمر بنعومة */
    }

    /* 📰 حركة شريط الأخبار من اليسار إلى اليمين */
    @keyframes scrollNewsLTR {
      0% {
        transform: translateX(-100%);
        /* بدء النص من خارج الجهة اليسرى */
      }

      100% {
        transform: translateX(100%);
        /* إنهاء الحركة بخروج النص من الجهة اليمنى */
      }
    }

    /* خصائص شريط الأخبار المتحرك */
    #newsTicker {
      display: inline-block;
      /* جعله ضمن سطر واحد */
      white-space: nowrap;
      /* منع انقسام النص إلى أسطر متعددة */
      min-width: 100%;
      /* التأكد من امتداد النص على عرض الحاوية */
      animation: scrollNewsLTR 70s linear infinite;
      /* تشغيل حركة التمرير بشكل مستمر وسلس */
    }

    /* إيقاف حركة الشريط مؤقتًا عند مرور الفأرة */
    #newsTickerContainer:hover #newsTicker {
      animation-play-state: paused;
      /* توقف الأنيميشن عند التمرير فوقه */
    }

    /* 🎯 إعادة ضبط القيم الافتراضية */
    * {
      box-sizing: border-box;
      /* جعل الحواف والحشوات محسوبة ضمن العرض والارتفاع الكلي للعناصر */
      margin: 0;
      /* إزالة جميع الهوامش الافتراضية من كل العناصر */
      padding: 0;
      /* إزالة جميع الحشوات الافتراضية */
    }

    /* 🖼️ أنماط عامة للصفحة */
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      /* تحديد الخط الافتراضي للنصوص */
      background-color: #f7fdf9;
      /* تعيين خلفية الصفحة بلون فاتح مائل للأخضر */
      color: #333;
      /* ضبط لون النص الأساسي بالرمادي الداكن */
      line-height: 1.6;
      /* تحديد تباعد الأسطر لتحسين القراءة */
      padding: 8px;
      /* مسافة داخلية حول حواف الصفحة */
    }

    /* 🟩 صندوق الترحيب الرئيسي */
    .welcome-section {
      text-align: center;
      /* توسيط النصوص والعناصر بداخل الصندوق */
      background: linear-gradient(135deg, #f0f9f5 0%, #e6f4ed 100%);
      /* تطبيق تدرج لوني ناعم من الأخضر الفاتح للأفتح */
      padding: 16px 13px;
      /* مسافة داخلية مناسبة حول المحتوى */
      border-radius: 16px;
      /* زوايا دائرية لتعزيز المظهر العصري */
      margin: 7px auto;
      /* ترك مسافة عمودية وتوسيط العنصر أفقيًا */
      max-width: 1000px;
      /* تحديد عرض أقصى للحفاظ على تناسق التصميم */
      box-shadow: 0 5px 15px rgba(0, 98, 51, 0.1);
      /* تطبيق ظل ناعم بلون أخضر باهت أسفل الصندوق */
      position: relative;
      /* لجعل العناصر الداخلية المطلقة تتمركز بالنسبة له */
      overflow: hidden;
      /* إخفاء أي عناصر تتجاوز حدود الصندوق */
    }

    /* 🔼 لضمان ظهور النص فوق الطبقات الخلفية */
    .welcome-content {
      position: relative;
      /* وضع النص في طبقة مستقلة فوق الخلفية */
      z-index: 1;
      /* إبقاؤه في المقدمة */
    }

    /* 🖼️ شعارات مصغرة */
    img.logo {
      width: 26px;
      /* تحديد عرض الشعار الصغير */
      height: 26px;
      /* تحديد ارتفاع الشعار */
      object-fit: contain;
      /* ضمان الحفاظ على نسبة الطول إلى العرض داخل الإطار */
      margin-left: 5px;
      /* ترك مسافة صغيرة من الجهة اليسرى */
      vertical-align: middle;
      /* محاذاة الشعار عموديًا مع النص */
    }

    /* 🖼️ الشعار الرئيسي في صندوق الترحيب */
    .welcome-logo {
      max-width: 120px;
      /* تحديد أقصى عرض للشعار الكبير */
      margin: 0 auto 10px;
      /* توسيطه أفقيًا مع ترك مسافة أسفله */
      display: block;
      /* عرضه كعنصر كتلي منفصل */
      filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.1));
      /* إضافة ظل خفيف خلف الشعار */
    }

    /* 📝 عنوان الترحيب */
    .welcome-title {
      color: #006233;
      /* لون أخضر داكن يرمز للهوية البصرية */
      font-size: 1.5em;
      /* حجم خط متوسط كبير لجذب الانتباه */
      font-weight: bold;
      /* جعل النص عريضًا لتأكيد الأهمية */
      margin-bottom: 10px;
      /* ترك مسافة أسفل العنوان */
      line-height: 1.1;
      /* تقليل المسافة بين الأسطر لإبقاء النص مدمجًا */
    }

    /* 📖 وصف قصير أسفل العنوان */
    .welcome-description {
      font-size: 0.9em;
      /* حجم خط أصغر من العنوان */
      color: #333;
      /* لون نص داكن لسهولة القراءة */
      max-width: 800px;
      /* تحديد أقصى عرض للسطر لتسهيل القراءة */
      margin: 0 auto 18px;
      /* توسيط النص وإضافة مسافة أسفله */
      line-height: 1.4;
      /* تباعد أسطر مريح للقراءة */
    }

    /* 📊 حاوية الإحصائيات */
    .welcome-stats {
      display: flex;
      /* استخدام Flexbox لترتيب البطاقات أفقيًا */
      flex-wrap: wrap;
      /* السماح للبطاقات بالانتقال إلى سطر جديد عند ضيق العرض */
      justify-content: center;
      /* توسيط جميع البطاقات أفقيًا */
      gap: 8px;
      /* ترك مسافة بين البطاقات */
      margin: 6px 0;
      /* مسافة عمودية بسيطة أعلى وأسفل */
    }

    /* 📊 البطاقة الإحصائية الواحدة */
    .stat-box {
      background-color: rgba(255, 255, 255, 0.9);
      /* خلفية شبه شفافة باللون الأبيض */
      padding: 13px 10px;
      /* مساحة داخلية متناسقة حول المحتوى */
      border-radius: 10px;
      /* زوايا دائرية لطابع ناعم وحديث */
      min-width: 80px;
      /* تحديد عرض أدنى للبطاقة */
      flex: 1;
      /* جعل البطاقة تتمدد لتملأ المساحة المتاحة */
      max-width: 120px;
      /* تحديد عرض أقصى لكل بطاقة */
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
      /* ظل خفيف أسفل البطاقة */
      transition: transform 0.3s ease;
      /* تأثير حركة ناعم عند التفاعل */
    }

    /* تأثير بصري عند المرور على البطاقة */
    .stat-box:hover {
      transform: translateY(-3px);
      /* رفع البطاقة قليلًا للأعلى عند المرور */
    }

    /* أيقونة داخل البطاقة */
    .stat-icon {
      color: #006233;
      /* تلوين الأيقونة بالأخضر */
      font-size: 1.3em;
      /* تكبير الأيقونة لتبرز بوضوح */
      margin-bottom: 6px;
      /* ترك مسافة أسفل الأيقونة قبل النص */
    }

    /* عنوان البطاقة (مثل "الخدمات" أو "المواطنين") */
    .stat-title {
      font-weight: bold;
      /* جعل العنوان بخط عريض */
      color: #006233;
      /* لون مطابق للهوية */
      margin-bottom: 3px;
      /* ترك مسافة صغيرة أسفل العنوان */
      font-size: 0.90em;
      /* حجم خط أصغر لتناسب المساحة */
    }

    /* القيمة الرقمية داخل البطاقة */
    .stat-value {
      font-size: 1.4em;
      /* تكبير الرقم لجعله العنصر الأبرز */
      font-weight: bold;
      /* إبراز القيمة بخط عريض */
      color: #a52a2a;
      /* لون بني يميز الأرقام عن النصوص */
    }

    /* 🔘 زر المشاركة */
    .share-button {
      background-color: #d40000;
      /* خلفية حمراء لجذب الانتباه */
      color: white;
      /* نص أبيض لزيادة التباين */
      padding: 8px 11px;
      /* مساحة داخلية مريحة */
      border: none;
      /* إزالة الإطار الافتراضي */
      border-radius: 6px;
      /* زوايا مستديرة */
      font-size: 0.9em;
      /* حجم خط متوسط */
      cursor: pointer;
      /* تحويل المؤشر إلى يد عند المرور */
      transition: background-color 0.3s, transform 0.2s;
      /* تأثير ناعم للتفاعل */
      box-shadow: 0 3px 6px rgba(212, 0, 0, 0.2);
      /* ظل خفيف أسفل الزر */
      margin-top: 2px;
      /* ترك مسافة بسيطة فوق الزر */
    }

    /* تأثير عند تمرير المؤشر على الزر */
    .share-button:hover {
      background-color: #a30000;
      /* جعل اللون أكثر عمقًا عند المرور */
      transform: scale(1.04);
      /* تكبير طفيف للزر لإبراز التفاعل */
    }


    /* 🟦 شريط التنقل */
    .nav-scroller {
      position: relative;
      /* تحديد موضع العنصر بالنسبة للعناصر المطلقة داخله */
      z-index: 2;
      /* وضعه فوق الطبقات الأخرى */
      height: 58px;
      /* تحديد ارتفاع الشريط */
      overflow: hidden;
      /* إخفاء أي محتوى يتجاوز الإطار */
      margin: 20px 0;
      /* مسافة عمودية حول الشريط */
      direction: ltr;
      /* جعل اتجاه الحركة من اليسار إلى اليمين */
      background: rgba(255, 255, 255, 0.8);
      /* خلفية شبه شفافة باللون الأبيض */
      border-radius: 12px;
      /* زوايا مستديرة لتصميم ناعم */
      padding: 5px;
      /* مسافة داخلية بسيطة */
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      /* ظل خفيف أسفل الشريط */
    }

    /* الحاوية الداخلية لشريط التنقل */
    .nav-scroller-inner {
      display: flex;
      /* استخدام Flex لترتيب العناصر أفقيًا */
      flex-wrap: nowrap;
      /* منع العناصر من الانتقال إلى سطر جديد */
      padding-bottom: 5px;
      /* ترك مسافة صغيرة أسفل العناصر */
      animation: scrollBanner 20s linear infinite;
      /* تشغيل حركة تمرير مستمرة للشريط */
    }

    /* كل عنصر داخل الشريط */
    .nav-item {
      flex: 0 0 auto;
      /* الحفاظ على عرض ثابت لكل عنصر */
      margin: 0 5px;
      /* ترك مسافة أفقية بين العناصر */
    }

    /* الروابط داخل الشريط */
    .nav-link {
      display: flex;
      /* تفعيل Flex لترتيب الأيقونة والنص */
      flex-direction: column;
      /* ترتيب العناصر عموديًا */
      align-items: center;
      /* محاذاة للمركز أفقيًا */
      justify-content: center;
      /* محاذاة عمودية في المنتصف */
      background: white;
      /* خلفية بيضاء للرابط */
      color: #006233;
      /* لون النص أخضر داكن */
      text-decoration: none;
      /* إزالة الخط السفلي الافتراضي */
      border-radius: 10px;
      /* زوايا ناعمة للرابط */
      padding: 7px 9px;
      /* مسافة داخلية حول النص والأيقونة */
      width: 65px;
      /* تحديد عرض ثابت لكل رابط */
      height: 45px;
      /* تحديد ارتفاع الرابط */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
      /* ظل خفيف أسفل العنصر */
      transition: all 0.4s ease;
      /* تأثير ناعم عند التفاعل */
      font-size: 0.73em;
      /* حجم خط صغير */
      font-weight: bold;
      /* نص عريض */
      text-align: center;
      /* توسيط النص داخل الرابط */
    }

    /* تأثير التفاعل عند المرور بالفأرة */
    .nav-link:hover {
      background: #006233;
      /* تغيير الخلفية إلى الأخضر */
      color: white;
      /* جعل النص أبيض لتباين واضح */
      transform: translateY(-2px);
      /* رفع العنصر قليلاً للأعلى */
      box-shadow: 0 4px 8px rgba(0, 98, 51, 0.2);
      /* ظل أقوى لتمييز العنصر */
    }

    /* أيقونة الرابط */
    .nav-icon {
      font-size: 9px;
      /* حجم صغير للأيقونة فوق النص */
    }

    /* 🎞️ تعريف حركة التمرير الأفقية */
    @keyframes scrollBanner {
      0% {
        transform: translateX(0);
      }

      /* بداية الحركة من موضعها الطبيعي */
      100% {
        transform: translateX(-100%);
      }

      /* نهاية الحركة بعد تحريك النصف الأيسر */
    }

    /* إيقاف الحركة عند مرور المؤشر */
    .nav-scroller:hover .nav-scroller-inner {
      animation-play-state: paused;
      /* تجميد الأنيميشن أثناء المرور */
    }

    /* 📱 تعديل التصميم على الشاشات بعرض ≤ 768px */
    @media (max-width: 768px) {
      .nav-scroller {
        height: 65px !important;
        /* زيادة الارتفاع لتناسب اللمس */
        padding: 8px !important;
        /* توسيع المسافة الداخلية */
      }

      .nav-link {
        height: 70px !important;
        /* زيادة ارتفاع الروابط */
        font-size: 0.6em !important;
        /* تصغير النص داخلها */
      }

      .nav-icon {
        font-size: 12px !important;
        /* تكبير الأيقونات */
      }
    }

    /* 📱 تحسين العرض الإضافي للشاشات الصغيرة */
    @media (max-width: 768px) {
      .welcome-title {
        font-size: 1.3em;
      }

      /* تصغير عنوان الترحيب */
      .welcome-description {
        font-size: 0.85em;
        padding: 0 5px;
      }

      /* تقليل الحجم والمسافات */
      .stat-box {
        min-width: 90px;
        padding: 12px 8px;
      }

      /* تصغير البطاقات */
      .stat-value {
        font-size: 1.2em;
      }

      .stat-title {
        font-size: 0.8em;
      }

      .nav-link {
        width: 65px;
        height: 45px;
        font-size: 0.6em;
      }

      .nav-icon {
        font-size: 12px;
      }

      .nav-scroller {
        height: 45px;
      }
    }

    /* 📱 تحسين إضافي للشاشات الصغيرة جدًا (≤480px) */
    @media (max-width: 480px) {
      .welcome-section {
        padding: 15px 10px;
      }

      /* تقليل المسافات الداخلية */
      .welcome-title {
        font-size: 1.2em;
      }

      /* تصغير العنوان */
      .welcome-stats {
        gap: 8px;
      }

      /* تقليل المسافات بين البطاقات */
      .stat-box {
        min-width: 80px;
        padding: 10px 6px;
      }

      .stat-icon {
        font-size: 1.3em;
      }

      .stat-value {
        font-size: 1.1em;
      }

      .nav-scroller {
        height: 48px;
      }

      .nav-link {
        width: 80px;
        height: 60px;
        font-size: 0.85em;
      }

      .nav-icon {
        font-size: 18px;
      }

      .share-button {
        padding: 8px 18px;
        font-size: 0.85em;
      }
    }

    /* 📱 ضبط إضافي جدًا للشاشات الصغيرة جدًا (≤360px) */
    @media (max-width: 360px) {
      .welcome-logo {
        max-width: 120px;
      }

      /* تقليص الشعار */
      .stat-box {
        min-width: 70px;
        padding: 8px 5px;
      }

      .stat-title {
        font-size: 0.75em;
      }

      .nav-link {
        width: 55px;
        font-size: 0.6em;
      }
    }


    /* تأثير خط أحمر كالبرق تحت الروابط */
    a.lightning {
      position: relative;
      /* تمكين إنشاء عناصر شبهية فوق وتحت الرابط */
      z-index: 0;
      /* وضع الرابط أسفل التأثير */
      text-decoration: none;
      /* إزالة الخط السفلي التقليدي للرابط */
    }

    /* الخط المتحرك تحت الرابط (عنصر pseudo-element) */
    a.lightning::after {
      content: "";
      /* إنشاء عنصر افتراضي */
      position: absolute;
      /* تموضعه أسفل النص مباشرة */
      left: 0;
      right: 0;
      bottom: -4px;
      /* تحديد المسافة بين النص والخط */
      height: 3px;
      /* سمك الخط */
      background: linear-gradient(90deg,
          transparent 0%,
          #ff0022 35%,
          #ff7a7a 55%,
          transparent 100%);
      /* تدرج لوني من الأحمر الفاتح إلى الغامق */
      transform-origin: left center;
      /* تحديد نقطة انطلاق الحركة */
      transform: scaleX(0) skewX(-12deg);
      /* تصغير الخط وتحريكه بميل أولي */
      filter: drop-shadow(0 0 6px rgba(255, 0, 34, 0.65));
      /* توهج أحمر حول الخط */
      z-index: -1;
      /* إبقاؤه خلف النص */
      transition: transform .35s cubic-bezier(.2, .9, .2, 1), opacity .2s;
      /* حركة ناعمة */
      opacity: 0.98;
      /* شفافية طفيفة */
    }

    /* حركة البرق عند مرور المؤشر */
    @keyframes lightningFlash {
      0% {
        transform: scaleX(0) skewX(-18deg) translateX(-8%);
      }

      /* بداية الحركة */
      45% {
        transform: scaleX(1.15) skewX(2deg) translateX(0);
      }

      /* تمدد سريع */
      70% {
        transform: scaleX(0.95) skewX(-6deg) translateX(6%);
      }

      /* تراجع بسيط */
      100% {
        transform: scaleX(1) skewX(0) translateX(0);
      }

      /* استقرار الخط */
    }

    /* تشغيل تأثير البرق عند المرور أو التركيز */
    a.lightning:hover::after,
    a.lightning:focus::after {
      transform: scaleX(1) skewX(0);
      /* تمدد كامل */
      animation: lightningFlash .45s ease-out;
      /* تشغيل الأنيميشن */
    }

    /* دوران مستمر لأي عنصر يحمل الفئة .spin */
    .spin {
      animation: spin 1s linear infinite;
      /* دوران متواصل */
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }

      /* بداية الدوران */
      to {
        transform: rotate(360deg);
      }

      /* دورة كاملة */
    }

    /* تعريف ألوان رئيسية متغيرة عبر CSS Variables */
    :root {
      --primary-color: #006233;
      /* الأخضر الداكن */
      --danger: #d40000;
      /* الأحمر الخطر */
      --white: #fff;
      /* الأبيض */
    }

    /* إعدادات أساسية للصفحة */
    html,
    body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      /* منع التمرير الأفقي */
    }

    /* تثبيت الهيدر أعلى الصفحة */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: var(--primary-color);
      color: var(--white);
      z-index: 1000;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
      box-sizing: border-box;
      min-height: 30px;
      /* الارتفاع الأدنى للهيدر */
      padding: 4px 6px;
      /* تقليل المسافة الداخلية */
    }

    /* الهوية داخل الهيدر */
    .branding {
      gap: 3px;
    }

    .branding h1 {
      font-size: 0.8rem;
    }

    .branding .logo {
      width: 22px;
      height: 22px;
    }


    /* صندوق الطقس في الهيدر */
    #weatherBox {
      display: flex;
      /* توزيع أفقي */
      align-items: center;
      /* محاذاة عمودية في المنتصف */
      justify-content: center;
      /* توسيط المحتوى */
      gap: 5px;
      /* مسافة بين العناصر */
      color: #fff;
      /* نص أبيض */
      font-size: 0.8rem;
      /* حجم نص صغير */
      margin: 2px 0;
      /* مسافة عمودية بسيطة */
    }

    #weatherIcon {
      width: 24px;
      height: 24px;
      /* حجم أيقونة الطقس */
    }

    /* منطقة البحث داخل الهيدر */
    #searchArea {
      padding: 0 9px 2px 9px;
      /* تقليل المسافة السفلية */
      margin-bottom: 0;
    }


    #searchBox {
      flex: 1;
      /* يشغل العرض المتاح */
    }

    #searchBox input {
      width: 100%;
      /* عرض كامل داخل الصندوق */
      padding: 8px;
      /* مسافة داخلية */
      border-radius: 6px;
      /* زوايا دائرية */
      border: 1px solid #ccc;
      /* إطار رمادي */
      font-size: 0.9rem;
      /* حجم نص مناسب */
    }

    /* زر تثبيت التطبيق */
    #install-button {
      background-color: var(--danger);
      /* أحمر */
      color: #fff;
      /* نص أبيض */
      padding: 8px 18px;
      /* مسافة داخلية */
      margin: 8px 14px;
      /* مسافة خارجية */
      border: none;
      /* بدون إطار */
      border-radius: 6px;
      /* زوايا دائرية */
      font-size: 14px;
      /* حجم النص */
      cursor: pointer;
      /* مؤشر يد */
    }

    #install-button i {
      font-size: 0.85em;
      /* حجم الأيقونة داخل الزر */
    }

    /* تفاعل الزر عند المرور */
    #install-button:hover {
      background-color: #a30000;
      /* لون أغمق عند المرور */
      transform: scale(1.04);
      /* تكبير طفيف */
    }

    /* شريط الأخبار */
    #newsBar {
      background-color: var(--primary-color);
      /* خلفية خضراء */
      color: #fff;
      /* نص أبيض */
      padding: 3px 4px;
      /* مسافة داخلية صغيرة */
      font-weight: bold;
      /* خط عريض */
      font-size: 0.85rem;
      /* حجم متوسط للنص */
      overflow: hidden;
      /* إخفاء النص الزائد */
      margin-top: 2px;
      /* كانت المسافة الافتراضية أكبر */
    }

    #newsTickerContainer {
      overflow: hidden;
      /* إخفاء المحتوى الزائد */
    }

    #newsTicker a {
      color: #ff0;
      /* لون أصفر للروابط */
      text-decoration: underline;
      /* خط أسفل النص */
    }


    /* 🔘 تنسيق الزر العام */
    .share-btn {
      display: inline-flex;
      /* جعل العنصر مرنًا ليسهل توسيط المحتوى داخله */
      align-items: center;
      /* محاذاة المحتوى عموديًا في المنتصف */
      justify-content: center;
      /* محاذاة المحتوى أفقيًا في المنتصف */
      width: 44px;
      /* تحديد عرض ثابت للزر */
      height: 44px;
      /* تحديد ارتفاع ثابت للزر */
      border-radius: 50%;
      /* جعل الزر دائري الشكل */
      background: #fff;
      /* خلفية بيضاء للزر */
      cursor: pointer;
      /* تحويل المؤشر إلى يد عند المرور */
      overflow: hidden;
      /* إخفاء أي محتوى يتجاوز حدود الدائرة */
      transition: transform 0.2s, box-shadow 0.2s;
      /* تأثيرات انتقال ناعمة للحركة والظل */
    }

    /* مسافة بين زر المشاركة وأيقونات التواصل الاجتماعي */
    .share-button {
      margin-bottom: 10px;
      /* ترك مسافة أسفل الزر لتباعد بصري جيد */
    }

    /* 📷 أيقونة داخل زر المشاركة */
    .share-btn img {
      width: 70%;
      /* جعل الأيقونة تشغل 70% من مساحة الزر */
      height: auto;
      /* الحفاظ على النسبة بين العرض والارتفاع */
      display: block;
      /* عرض الأيقونة كعنصر كتلي لتوسيطها بدقة */
    }

    /* ✨ تأثير عند تمرير الفأرة على الزر */
    .share-btn:hover {
      transform: scale(1.1);
      /* تكبير الزر بنسبة 10% عند المرور */
    }

    .share-button {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* إضافة ظل خفيف أسفل الزر لإبرازه */

    /* التبديل للوضع الليلي */
    body.dark-mode {
      background-color: #121212;
      color: #e0e0e0;
    }

    body.dark-mode section {
      background-color: #1e1e1e;
      border-color: #333;
      box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
    }

    body.dark-mode header,
    body.dark-mode footer {
      background-color: #333 !important;
      color: #fff !important;
    }

    body.dark-mode a {
      color: #80cbc4;
    }

    body.dark-mode a:hover {
      color: #4db6ac;
    }

    @font-face {
      font-family: 'CustomFont';
      src: url('fonts/CustomFont.woff2') format('woff2');
      font-display: swap;
    }

    * {
      font-display: swap;
    }

    header {
      transition: transform 0.25s ease;
    }

    header.hide-header {
      transform: translateY(-100%);
    }