/* ========================================
   CONTAINER
======================================== */

#marquee-section .marquee-bar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ========================================
   AMBIENT BACKGROUND
======================================== */

#marquee-section .marquee-ambient {
  position: absolute;
  inset: 0;

  z-index: 1;

  overflow: hidden;

  pointer-events: none;
}

/* ========================================
   BLOBS
======================================== */

#marquee-section .ambient-blob {
  position: absolute;

  width: 45%;
  height: 180%;

  top: -40%;

  border-radius: 50%;

  filter: blur(45px);

  will-change: transform;

  pointer-events: none;
}

/* Blob 1 */

#marquee-section .ambient-blob-1 {
  left: -25%;

  background: rgba(255, 255, 255, 0.7);

  opacity: 0.8;

  animation: ambientOne 8s ease-in-out infinite alternate;
}

/* Blob 2 */

#marquee-section .ambient-blob-2 {
  left: 25%;

  width: 35%;

  background: rgba(255, 255, 255, 0.45);

  opacity: 0.4;

  animation: ambientTwo 11s ease-in-out infinite alternate;
}

/* Blob 3 */

#marquee-section .ambient-blob-3 {
  left: 65%;

  width: 30%;

  background: #73bdef;

  opacity: 0.4;

  animation: ambientThree 13s ease-in-out infinite alternate;
}

/* ========================================
   MARQUEE
======================================== */

#marquee-section .werbung-marquee {
  position: relative;

  z-index: 10;

  width: 100%;

  overflow: hidden;
}

/* ========================================
   TRACK
======================================== */

#marquee-section .werbung-marquee-track {
  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  flex-wrap: nowrap !important;

  width: max-content !important;

  min-width: max-content !important;
  /* هون بتغير سرعة النص  */
  animation: werbungMarquee 70s linear infinite !important;

  will-change: transform;
}

/* ========================================
   GROUP
======================================== */

#marquee-section .werbung-marquee-group {
  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  flex-wrap: nowrap !important;

  flex-shrink: 0 !important;

  width: max-content !important;

  min-width: max-content !important;

  gap: 40px !important;

  padding-right: 40px !important;
}

/* ========================================
   TEXT
======================================== */

#marquee-section .werbung-marquee-text {
  display: block !important;

  flex: 0 0 auto !important;

  width: max-content !important;

  white-space: nowrap !important;

  margin: 0 !important;

  font-size: 1.125rem;

  font-weight: 700;
}

/* ========================================
   IMAGE
======================================== */

#marquee-section .werbung-marquee-image {
  display: block !important;

  flex: 0 0 auto !important;

  width: auto !important;

  height: 96px !important;

  max-width: none !important;

  object-fit: contain !important;

  margin: 0 !important;
}

/* ========================================
   MARQUEE ANIMATION
======================================== */

@keyframes werbungMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ========================================
   AMBIENT ANIMATIONS
======================================== */

@keyframes ambientOne {
  0% {
    transform: translate3d(-20%, 0, 0) scale(0.85) rotate(-10deg);
  }

  50% {
    transform: translate3d(40%, 0, 0) scale(1.15) rotate(5deg);
  }

  100% {
    transform: translate3d(100%, 0, 0) scale(0.9) rotate(12deg);
  }
}

@keyframes ambientTwo {
  0% {
    transform: translate3d(60%, 0, 0) scale(0.9) rotate(10deg);
  }

  50% {
    transform: translate3d(0%, 0, 0) scale(1.2) rotate(-5deg);
  }

  100% {
    transform: translate3d(-70%, 0, 0) scale(0.9) rotate(-12deg);
  }
}

@keyframes ambientThree {
  0% {
    transform: translate3d(50%, 0, 0) scale(0.8) rotate(-8deg);
  }

  50% {
    transform: translate3d(-20%, 0, 0) scale(1.15) rotate(8deg);
  }

  100% {
    transform: translate3d(-100%, 0, 0) scale(0.85) rotate(15deg);
  }
}