/* Marquee Styles */
.marquee-style {
  overflow: hidden;
  min-width: clamp(220px, 24vw, 360px);
  max-width: 100%;
  padding: 0 !important;
  background: linear-gradient(90deg, #7ac943, #5fbf2a);
  border-radius: 999px;
}

header.header-seven .header-top-wrapper .left .marquee-style.single-component {
  flex: 1 1 320px;
  min-width: 0;
}

header.header-seven .header-top-wrapper .left .marquee-style.single-component::after {
  display: none;
}

.marquee-track {
  display: flex;
  width: max-content;
  padding: 0.65rem 1.4rem;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: topbarMarquee 8s linear infinite;
}

.marquee-track span {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-right: 2.5rem;
}

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

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

@media only screen and (max-width: 767px) {
  .marquee-style {
    min-width: 100%;
  }

  .marquee-track {
    padding: 0.6rem 1rem;
    animation-duration: 14s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}