/* تحديد النقطة الخضراء */
    .green-dot {
      width: 15px;          /* حجم النقطة */
      height: 15px;         /* حجم النقطة */
      background-color: green;  /* اللون الأخضر */
      border-radius: 50%;      /* تحويل الشكل إلى دائرة */
      animation: fadeInOut 2s infinite; /* تأثير التلاشي المتكرر */

      /* محاذاة النقطة في المنتصف */
      position: absolute; /* لجعل العنصر قابلاً للتحرك */
     /* top: 50%;*/ /* تحديد المسافة من أعلى الصفحة */
      left: 50%; /* تحديد المسافة من يسار الصفحة */
      transform: translate(-50%, -50%); /* نقل العنصر إلى المنتصف تماماً */
    }

    /* تعريف تأثير التلاشي */
    @keyframes fadeInOut {
      0% {
        opacity: 0;  /* يبدأ التلاشي */
      }
      50% {
        opacity: 1;  /* النقطة تظهر بالكامل */
      }
      100% {
        opacity: 0;  /* النقطة تختفي مرة أخرى */
      }
    }