body {
      margin: 0;
      /* لإزالة أي هوامش افتراضية من المتصفح */
      font-family: sans-serif;
      /* خط افتراضي للمثال */
  }

  .site-header {

      color: white;
      padding: 15px 20px;
      text-align: center;
  }

  .full-width-video-section {
      width: 100%;
      overflow: hidden;
      position: relative;

      /* الأنيميشن */
      opacity: 0;
      /* يبدأ شفافاً */
      transform: translateY(50px);
      /* يبدأ مزاحاً للأسفل قليلاً */
      animation: fadeInUp 1s ease-out forwards;
      animation-delay: 0.3s;
      /* تأخير بسيط لبدء الأنيميشن */
      bottom: 0;
  }

  .full-width-video-section {
      width: 100%;
      height: 500px;
      overflow: hidden;
      position: relative;

  }

  /* عنصر الفيديو نفسه */
  .full-width-video-section video {
      display: block;
      /* لإزالة أي مسافات إضافية أسفل الفيديو */
      width: 100%;
      /* اجعل الفيديو يملأ عرض السكشن الحاوي */
      height: 100%;
      /* اجعل الفيديو يملأ ارتفاع السكشن الحاوي */
      object-fit: cover;
      /* هذه هي الخاصية السحرية! */
      /* - تحافظ على نسبة أبعاد الفيديو. */
      /* - تجعل الفيديو يغطي كامل مساحة العنصر (500px ارتفاع وعرض كامل). */
      /* - إذا لزم الأمر، يتم قص أجزاء من الفيديو لتناسب المساحة دون تشويه. */

      /* احذف هذه الأسطر: */
      /* width: 3700px;   */
      /* margin-left: -1200px; */
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(50px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* محتوى توضيحي بعد الفيديو */
  .content-after-video {
      padding: 20px;
      text-align: center;
  }