
.fzt-marquee-animation-mixed-container {
  --marquee-gap: 40px;
  display: flex;
  flex-flow: row nowrap;
  gap: var(--marquee-gap);
  overflow-x: clip;
  position: relative;
}

.fzt-marquee-animation-mixed-container .fzt-marquee-animation-mixed-list {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: var(--marquee-gap);
  justify-content: space-around;
}

.fzt-marquee-animation-mixed-container .fzt-marquee-animation-mixed-list .fzt-text {
  color: var(--nexira-heading-color);
  font-family: var(--nexira-h2-font-family);
  font-size: clamp(2.5rem, 1.75rem + 3.75vw, 6.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: inherit;
  text-transform: uppercase;
  text-wrap: balance;
}

.fzt-marquee-animation-mixed-container .fzt-marquee-animation-mixed-item {
  vertical-align: middle;
}

.fzt-marquee-animation-mixed-container:hover .fzt-marquee-animation-mixed-list {
  animation-play-state: paused !important;
}

.fzt-marquee-animation-mixed-container .fzt-marquee-animation-mixed-item.fzt-image {
  display: inline-flex;
  height: fit-content;
}

.fzt-marquee-animation-mixed-container .fzt-marquee-animation-mixed-item.fzt-image img {
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.fzt-element-in-viewport .fzt-marquee-animation-mixed-container .fzt-marquee-animation-mixed-item.fzt-image img {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.fzt-marquee-animation-mixed-container.horizontal .fzt-marquee-animation-mixed-list {
  animation: text-marquee-horizontal 20s linear infinite;
}

.fzt-marquee-animation-mixed-container.horizontal.reverse .fzt-marquee-animation-mixed-list {
  animation: text-marquee-horizontal-reverse 20s linear infinite;
}

@keyframes text-marquee-horizontal {
  from{
    transform: translate3d(-100%, 0, 0);
  }to{
    transform: translatez(0);
  }
}

@keyframes text-marquee-horizontal-reverse {
  from{
    transform: translateZ(0);
  }to{
    transform: translate3d(-100%,0,0);
  }
}

/* Type 1 */

.fzt-marquee-animation-mixed-container.type-1:before,
.fzt-marquee-animation-mixed-container.type-1:after {
  content: "";
  inset:0;
  position: absolute;
  width: 30rem;
  z-index: 1;
}

.fzt-marquee-animation-mixed-container.type-1:before {
  background-image: linear-gradient(90deg, var(--nexira-body-background-color), transparent);
  left: 0;
  right: auto;
}

.fzt-marquee-animation-mixed-container.type-1:after {
  background-image: linear-gradient(270deg, var(--nexira-body-background-color), transparent);
  left: auto;
  right: 0;
}

.fzt-marquee-animation-mixed-container.type-1 .fzt-marquee-animation-mixed-list .fzt-text {
  color: var(--nexira-primary-color);
}

/* Type 2 */

.fzt-marquee-animation-mixed-container.type-2 {
  background: var(--nexira-primary-color);
  padding: 25px 0;
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
}

.fzt-marquee-animation-mixed-container.type-2:before {
  background: rgba(var(--nexira-primary-color-rgb), 0.5);
  content: "";
  inset: 0;
  position: absolute;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -1;
}

.fzt-marquee-animation-mixed-container.type-2 .fzt-marquee-animation-mixed-list .fzt-text {
  color: var(--nexira-teritary-color);
  font-size: clamp(2.5rem, 1.8rem + 3.5vw, 6rem);
  letter-spacing: 3.84px;
}

.fzt-marquee-animation-mixed-container .fzt-marquee-animation-mixed-item.fzt-image img {
  height: 110px;
  object-fit: scale-down;
  width: 110px;
}

/* Fzt With Gradient - Marquee Text */

.fzt-with-gradient .fzt-marquee-animation-mixed-container.type-2 {
  background-image: linear-gradient(90deg, var(--nexira-gradient-color) 20%, var(--nexira-primary-color) 100%);
  transform: none;
}

.fzt-with-gradient .fzt-marquee-animation-mixed-container.type-2:before {
  background: #7918EE;
  opacity: 0.5;
}

.fzt-with-gradient .fzt-marquee-animation-mixed-container.type-2 .fzt-marquee-animation-mixed-list .fzt-text {
  color: var(--nexira-heading-color);
}