/* ------------------------- Components ® Code by Reza -------------------------------------------------- */

/* ------------------------- Default Header -------------------------------------------------- */

.default-header {
  padding-top: calc(var(--section-padding) * 2);
  padding-bottom: calc(var(--section-padding) * 1);
}

.default-header .row {
  justify-content: center;
  align-items: center;
}

.default-header .row .flex-col {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
}

.default-header .row .btn-row {
  justify-content: center;
}

.default-header .row .flex-col {
  width: unset;
}

.default-header h1 {
  padding-top: 5%;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  .default-header.one-line {
    padding-top: calc(var(--section-padding) * 2.25);
    padding-bottom: calc(var(--section-padding) * 1.25);
  }
}

/* ------------------------- Intro -------------------------------------------------- */

.intro {
  padding: calc(var(--section-padding) * 0.4);
}

/* ------------------------- Span Lines -------------------------------------------------- */

.span-lines {
  margin-top: -0.1em;
}

.span-lines .span-line {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: -0.35em -0.05em -0.35em -0.05em;
  font-weight: inherit;
}

.span-lines .span-line .span-line-inner {
  padding: 0.25em 0.05em;
  position: relative;
  display: block;
  transform-origin: left bottom;
  font-weight: inherit;
}

/* ------------------------- Single - Vimeo Background -------------------------------------------------- */

.single-vimeo-background {
  --aspect-ratio-w: 16;
  --aspect-ratio-h: 9;
  --parent-height: 100;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--parent-height) * 1vh);
  overflow: hidden;
  background: var(--color-dark);
  transform: translateZ(0);
  isolation: isolate;
  pointer-events: none;
}

.single-vimeo-background iframe {
  width: 100vw;
  height: calc(
    var(--aspect-ratio-h) / var(--aspect-ratio-w) * (var(--parent-height) * 1vw)
  );
  min-height: calc(var(--parent-height) * 1vh);
  min-width: calc(
    var(--aspect-ratio-w) / var(--aspect-ratio-h) * (var(--parent-height) * 1vh)
  );
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Placeholder */

.single-vimeo-background .vimeo-overlay-placeholder {
  background: var(--color-dark);
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.single-vimeo-background[data-vimeo-status-activated="true"][data-vimeo-status-loaded="true"]
  .vimeo-overlay-placeholder {
  opacity: 0;
}

@media screen and (max-width: 1024px) {
  .single-vimeo-background {
    --parent-height: 100;
  }
}

/* ------------------------- Single - Vimeo Player -------------------------------------------------- */

.single-vimeo-player {
  position: relative;
  width: 100%;
  padding-bottom: 56.24%;
  overflow: hidden;
  background: var(--color-dark);
  border-radius: var(--border-radius);
  transform: translateZ(0);
  isolation: isolate;
}

.single-vimeo-player iframe,
.single-vimeo-player object,
.single-vimeo-player embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.single-vimeo-player[data-vimeo-player-target] {
  cursor: pointer;
}

/* Placeholder */

.single-vimeo-player .vimeo-overlay-placeholder {
  background: var(--color-dark);
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.single-vimeo-player[data-vimeo-status-activated="true"][data-vimeo-status-loaded="true"]
  .vimeo-overlay-placeholder {
  opacity: 0;
}

/* Overlay Dark */

.single-vimeo-player .vimeo-overlay-dark {
  background: var(--color-dark);
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.single-vimeo-player[data-vimeo-status-activated="true"] .vimeo-overlay-dark {
  opacity: 0;
}

.single-vimeo-player[data-vimeo-status-activated="true"][data-vimeo-status-loaded="true"]
  .vimeo-overlay-dark {
  opacity: 0;
}

@media (hover: hover) {
  .single-vimeo-player:hover .vimeo-overlay-dark {
    opacity: 0 !important;
  }
}

/* Interface */

.single-vimeo-player .vimeo-overlay-interface {
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.single-vimeo-player[data-vimeo-status-activated="true"][data-vimeo-status-play="false"]
  .vimeo-overlay-interface {
  opacity: 1;
}

@media (hover: hover) {
  .single-vimeo-player[data-vimeo-status-activated="true"]
    .vimeo-overlay-interface {
    opacity: 0;
  }

  .single-vimeo-player[data-vimeo-status-activated="true"][data-vimeo-status-play]:hover
    .vimeo-overlay-interface {
    opacity: 1 !important;
  }
}

.single-vimeo-player .vimeo-overlay-interface * {
  pointer-events: all;
}

.single-vimeo-player .vimeo-mute {
  height: 1.5em;
  position: absolute;
  right: max(1em, 3vw);
  bottom: max(1em, 3vw);
  aspect-ratio: 1/1;
}

.single-vimeo-player .vimeo-mute svg {
  width: 100%;
  display: block;
}

.single-vimeo-player .vimeo-mute svg path {
  fill: var(--color-white);
}

.single-vimeo-player .vimeo-mute svg:nth-child(2) {
  display: none;
}

.single-vimeo-player[data-vimeo-status-muted="true"]
  .vimeo-mute
  svg:nth-child(1) {
  display: none;
}

.single-vimeo-player[data-vimeo-status-muted="true"]
  .vimeo-mute
  svg:nth-child(2) {
  display: block;
}

.single-vimeo-player .vimeo-duration {
  position: absolute;
  left: max(1em, 3vw);
  bottom: max(1em, 3vw);
  height: 1.5em;
  display: flex;
  align-items: baseline;
}

.single-vimeo-player .vimeo-duration span {
  color: var(--color-light);
  font-weight: 600;
}

/* Icon (Play + Pause) */

.single-vimeo-player .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(4em, 8vw);
  transform: scale(1) rotate(0.001deg);
  transition: opacity 0.3s ease-in-out;
  background: var(--color-secondary);
  border-radius: 50%;
  aspect-ratio: 1/1;
}

.single-vimeo-player .icon svg {
  width: 60%;
}

/* Play */

.single-vimeo-player .vimeo-overlay-play {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
}

.single-vimeo-player[data-vimeo-status-play="true"] .vimeo-overlay-play {
  opacity: 0;
}

.single-vimeo-player .vimeo-overlay-play .icon svg path {
  fill: var(--color-light);
}

.single-vimeo-player .vimeo-overlay-play h3 {
  color: var(--color-light);
  display: none;
}

@media (hover: hover) {
  .single-vimeo-player .vimeo-overlay-play h3 {
    display: block;
  }
}

/* Pause */

.single-vimeo-player .vimeo-overlay-pause {
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.single-vimeo-player[data-vimeo-status-play="true"] .vimeo-overlay-pause {
  display: flex;
}

.single-vimeo-player .vimeo-overlay-pause .icon {
  opacity: 0;
}

.single-vimeo-player .vimeo-overlay-pause .icon svg path {
  stroke: var(--color-secondary);
}

@media (hover: hover) {
  .single-vimeo-player[data-vimeo-status-play="true"]
    .vimeo-overlay-pause
    .icon {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .single-vimeo-player[data-vimeo-status-play="true"]:hover
    .vimeo-overlay-pause
    .icon {
    opacity: 1;
  }
}

/*  Loading */

.single-vimeo-player .vimeo-overlay-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
  transition: all 0.3s ease-in-out 0.5s;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(var(--color-dark-rgb), 0.5);
}

.single-vimeo-player[data-vimeo-status-play="true"] .vimeo-overlay-loading {
  opacity: 1;
}

.single-vimeo-player[data-vimeo-status-play="true"][data-vimeo-status-loaded="true"]
  .vimeo-overlay-loading {
  opacity: 0;
}

.single-vimeo-player .vimeo-overlay-loading svg {
  width: 8em;
}

.single-vimeo-player .vimeo-overlay-loading svg path {
  fill: var(--color-white);
}

/*  Custom */

@media (hover: hover) {
  [data-vimeo-control="pause"] .icon,
  [data-vimeo-control="play"] .icon {
    display: none;
  }
}

/* ------------------------- Single - Vimeo Lightbox -------------------------------------------------- */

.vimeo-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: circle(0% at 50% 50%);
  /* clip-path: circle(0% at var(--click-percent-left) var(--click-percent-top)); */
  transition: all 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}

.vimeo-lightbox[data-vimeo-status-activated="true"] {
  /* clip-path: circle(140% at var(--click-percent-left) var(--click-percent-top)); */
  clip-path: circle(80% at 50% 50%);
}

/* Lightbox Background */

.vimeo-lightbox .vimeo-lightbox-background {
  background: var(--color-dark-dark);
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Player */

.vimeo-lightbox .single-vimeo-lightbox {
  --aspect-ratio: 56.25%;
  position: relative;
  width: 100%;
  padding-bottom: var(--aspect-ratio);
  overflow: hidden;
  background: var(--color-dark);
  border-radius: var(--border-radius);
  transform: translateZ(0);
  isolation: isolate;
  pointer-events: none;
}

.vimeo-lightbox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.vimeo-lightbox[data-vimeo-player-target] {
  cursor: pointer;
}

.vimeo-lightbox .vimeo-append-content {
  z-index: 0;
}

/* Placeholder */

.vimeo-lightbox .vimeo-overlay-placeholder {
  background: var(--color-dark);
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.vimeo-lightbox[data-vimeo-status-loaded="true"] .vimeo-overlay-placeholder {
  transition: all 0.3s ease-in-out 0.5s;
  opacity: 0;
}

/* Overlay Dark */

.vimeo-lightbox .vimeo-overlay-dark {
  background: var(--color-dark);
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.vimeo-lightbox[data-vimeo-status-activated="true"] .vimeo-overlay-dark {
  opacity: 0.5;
}

.vimeo-lightbox[data-vimeo-status-activated="true"][data-vimeo-status-loaded="true"]
  .vimeo-overlay-dark {
  opacity: 0;
}

@media (hover: hover) {
  .vimeo-lightbox:hover .vimeo-overlay-dark {
    opacity: 0.3 !important;
  }
}

/* Interface */

.vimeo-lightbox .vimeo-overlay-interface {
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.vimeo-lightbox[data-vimeo-status-activated="true"][data-vimeo-status-play="false"]
  .vimeo-overlay-interface {
  opacity: 1;
}

@media (hover: hover) {
  .vimeo-lightbox[data-vimeo-status-activated="true"] .vimeo-overlay-interface {
    opacity: 0;
  }

  .vimeo-lightbox[data-vimeo-status-activated="true"][data-vimeo-status-play]:hover
    .vimeo-overlay-interface {
    opacity: 1 !important;
  }
}

.vimeo-lightbox .vimeo-overlay-interface * {
  pointer-events: all;
}

.vimeo-lightbox .vimeo-mute {
  height: 1.5em;
  position: absolute;
  right: max(1em, 3vw);
  bottom: max(1em, 3vw);
  aspect-ratio: 1/1;
}

.vimeo-lightbox .vimeo-mute svg {
  width: 100%;
  display: block;
}

.vimeo-lightbox .vimeo-mute svg path {
  fill: var(--color-white);
}

.vimeo-lightbox .vimeo-mute svg:nth-child(2) {
  display: none;
}

.vimeo-lightbox[data-vimeo-status-muted="true"] .vimeo-mute svg:nth-child(1) {
  display: none;
}

.vimeo-lightbox[data-vimeo-status-muted="true"] .vimeo-mute svg:nth-child(2) {
  display: block;
}

.vimeo-lightbox .vimeo-duration {
  position: absolute;
  left: max(1em, 3vw);
  bottom: max(1em, 3vw);
  height: 1.5em;
  display: flex;
  align-items: baseline;
}

.vimeo-lightbox .vimeo-duration span {
  color: var(--color-light);
  font-weight: 600;
}

/* Icon (Play + Pause) */

.vimeo-lightbox .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(4em, 8vw);
  transform: scale(1) rotate(0.001deg);
  transition: opacity 0.3s ease-in-out;
  background: var(--color-white);
  border-radius: 50%;
  aspect-ratio: 1/1;
}

.vimeo-lightbox .icon svg {
  width: 60%;
}

@media (hover: hover) {
  .vimeo-lightbox .icon {
    opacity: 0 !important;
  }
}

/* Play */

.vimeo-lightbox .vimeo-overlay-play {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
}

.vimeo-lightbox[data-vimeo-status-play="true"] .vimeo-overlay-play {
  opacity: 0;
}

.vimeo-lightbox .vimeo-overlay-play .icon svg path {
  fill: var(--color-dark);
}

/* Pause */

.vimeo-lightbox .vimeo-overlay-pause {
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.vimeo-lightbox[data-vimeo-status-play="true"] .vimeo-overlay-pause {
  display: flex;
}

.vimeo-lightbox .vimeo-overlay-pause .icon {
  opacity: 0;
}

.vimeo-lightbox .vimeo-overlay-pause .icon svg path {
  stroke: var(--color-dark);
}

@media (hover: hover) {
  .vimeo-lightbox[data-vimeo-status-play="true"] .vimeo-overlay-pause .icon {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .vimeo-lightbox[data-vimeo-status-play="true"]
    .single-vimeo-lightbox:hover
    .vimeo-overlay-pause
    .icon {
    opacity: 1;
  }

  .vimeo-lightbox[data-vimeo-status-loaded="false"][data-vimeo-status-play="true"]
    .single-vimeo-lightbox
    .vimeo-overlay-pause
    .icon {
    opacity: 0;
  }
}

/*  Loading */

.vimeo-lightbox .vimeo-overlay-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
  transition: all 0.3s ease-in-out 0.5s;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(var(--color-dark-rgb), 0.5);
}

.vimeo-lightbox[data-vimeo-status-play="true"] .vimeo-overlay-loading {
  opacity: 1;
}

.vimeo-lightbox[data-vimeo-status-play="true"][data-vimeo-status-loaded="true"]
  .vimeo-overlay-loading {
  opacity: 0;
}

.vimeo-lightbox .vimeo-overlay-loading svg {
  width: 8em;
}

.vimeo-lightbox .vimeo-overlay-loading svg path {
  fill: var(--color-white);
}

/*  Close Button */

.vimeo-close-button {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: var(--color-secondary);
  position: absolute;
  top: var(--gap-padding);
  right: var(--gap-padding);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  display: none;
}

.vimeo-close-button svg {
  width: 50%;
}

.vimeo-close-button svg path {
  stroke: var(--color-light);
}

.vimeo-lightbox[data-vimeo-status-activated="true"] .vimeo-close-button {
  display: flex;
}

@media (hover: hover) {
  .vimeo-lightbox[data-vimeo-status-activated="true"] .vimeo-close-button {
    display: none;
  }
}

/* ------------------------- Single Case Thumbnail -------------------------------------------------- */

.cases-grid .single-case .thumb {
  width: 100%;
  position: relative;
  background: var(--color-inactive);
  overflow: hidden;
}

.cases-grid .single-case .thumb::before {
  content: "";
  display: block;
  padding-top: 125%;
}

.cases-grid .single-case .thumb .hover-circle {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(100%) rotate(0.001deg);
  width: 100%;
  background: var(--color-primary);
  border-radius: 50% 50% 0 0;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.5, 0);
}

.cases-grid .single-case .thumb .hover-circle::before {
  content: "";
  padding-top: 100%;
  display: block;
}

.cases-grid .single-case .overlay-video {
  transition: var(--animation-primary);
}

.cases-grid .single-case .overlay-image {
  transition: var(--animation-primary);
}

.cases-grid .single-case .dark-overlay {
  background: var(--color-dark-dark);
  background: linear-gradient(30deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%);
  opacity: 0.8;
  transition: var(--animation-primary);
}

.cases-grid .single-case .thumb-info {
  position: absolute;
  bottom: 3%;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: calc(var(--gap-padding) * 1.5) calc(var(--gap-padding) * 3);
  transition: var(--animation-primary);
  gap: 1em;
}

.cases-grid .single-case .thumb-info h3 {
  color: var(--color-light);
}

@media screen and (min-width: 1024px) {
  .cases-grid .single-case .thumb-info h3 {
    font-size: calc(var(--title-size) * 0.21);
  }
}

@media screen and (min-width: 991px) and (max-width: 1200px) {
  .p-work-all{
    padding: 0px !important;
  }
}

@media screen and (min-width: 1200px) {
  .p-work-all{
    padding: 50px !important;
  }
}

.cases-grid .single-case .thumb-info p {
  color: var(--color-light);
  opacity: 1;
  font-weight: 700;
}

.cases-grid .single-case .new-badge {
  position: absolute;
  top: calc(var(--gap-padding) * 1.5);
  right: calc(var(--gap-padding) * 1.5);
  font-size: 1.25em;
  transition: var(--animation-primary);
  transform: scale(1) rotate(0.001deg);
}

/* Hover */

@media (hover: hover) {
  .cases-grid .single-case a:hover .overlay-image {
    transform: scale(1.04);
  }

  .cases-grid .single-case a:hover .thumb.has-video .overlay-video {
    transform: scale(1.04);
  }

  .cases-grid .single-case a:hover .thumb .hover-circle {
    transform: translateY(50%) rotate(0.001deg);
    transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.3, 1);
  }

  .cases-grid .single-case a:hover .thumb-info {
    bottom: 0%;
  }

  .cases-grid .single-case a:hover .thumb.has-video .overlay-image {
    opacity: 0;
  }

  .cases-grid .single-case a:hover .new-badge {
    transform: scale(0) rotate(0.001deg);
  }
}

@media (hover: none) {
  .cases-grid .single-case.is-selected a .thumb .hover-circle {
    transform: translateY(50%) rotate(0.001deg);
    transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.3, 1);
  }

  .cases-grid .single-case.is-selected a .thumb-info {
    bottom: 5%;
  }
}

@media screen and (max-width: 540px) {
  .cases-grid .single-case .new-badge {
    font-size: 1em;
    top: calc(var(--gap-padding) * 1);
    right: calc(var(--gap-padding) * 1);
  }
}

/* ------------------------- Wide Image -------------------------------------------------- */

.wide-image .wide-image-block {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.wide-image .wide-image-block::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.wide-image .wide-image-block .overlay-image {
  background: var(--color-inactive);
}

/* ------------------------- Row - Split 2 -------------------------------------------------- */

.row.split-2 {
  gap: calc(var(--gap-padding) * 4);
  flex-wrap: nowrap;
}

.row.split-2 .flex-col {
  width: 50%;
}

@media screen and (max-width: 1024px) {
  .row.split-2 {
    gap: calc(var(--gap-padding) * 2);
  }
}

@media screen and (max-width: 540px) {
  .row.split-2 {
    gap: calc(var(--gap-padding) * 1);
  }
}

/* ------------------------- Row - Split 2 -------------------------------------------------- */

.row.split-3 {
  gap: calc(var(--gap-padding) * 4);
  flex-wrap: nowrap;
}

.row.split-3 .flex-col {
  width: 33.333%;
}

.row.split-3 h4 {
  margin-bottom: 0.8em;
}

@media screen and (max-width: 1024px) {
  .row.split-3 {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-padding) * 3);
  }

  .row.split-3 .flex-col {
    width: unset;
    max-width: 32em;
  }
}

@media screen and (max-width: 540px) {
}

/* ------------------------- Double Image -------------------------------------------------- */

.section.double-image {
  padding-top: 0;
  padding-bottom: 0;
}

.double-image .double-image-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
}

.double-image .double-image-block {
  position: relative;
  width: 50%;
}

.double-image .double-image-block::before {
  content: "";
  display: block;
  padding-top: 66.666%;
}

.double-image .double-image-block .overlay-image {
  background: var(--color-light);
}

@media screen and (max-width: 768px) {
  .double-image .double-image-block::before {
    padding-top: 75%;
  }
}

@media screen and (max-width: 540px) {
  .double-image .double-image-block::before {
    padding-top: 100%;
  }
}

/* ------------------------- Title + Text -------------------------------------------------- */

.title-text h2 {
  margin-bottom: 0.5em;
}

/* ------------------------- Nieuw Badge -------------------------------------------------- */

.new-badge {
  position: relative;
  width: 2.5em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  flex-shrink: 0;
  background: var(--color-primary);
  border-radius: 50%;
}

.new-badge::before {
  display: block;
  content: "";
  padding-top: 100%;
}

.new-badge h4 {
  font-size: 0.6em;
  position: absolute;
  z-index: 1;
  color: var(--color-light);
  text-transform: uppercase;
}

/* ------------------------- Marquee -------------------------------------------------- */

.marquee-group {
  position: relative;
}

.marquee {
  position: relative;
}

.marquee .marquee-scroll {
  position: relative;
  display: flex;
  width: 140%;
  margin-left: -20%;
}

.marquee .marquee-content {
  position: relative;
  display: flex;
}

.marquee .marquee-item {
  width: 40vw;
  width: unset;
}

.marquee .marquee-item h2 {
  white-space: nowrap;
  margin-right: 0.3em;
  display: flex;
  align-items: center;
  color: var(--color-dark);
}

.marquee .marquee-item h2 span {
  font-weight: inherit;
  margin-right: 0.3em;
}

.marquee .marquee-item img {
  font-size: 1em;
  width: 0.6em;
  transform: translateY(20%) translateX(-10%) rotate(0.001deg);
  transition: var(--animation-primary);
}

.marquee[data-marquee-direction="left"][data-marquee-status="inverted"]
  .marquee-item
  img,
.marquee[data-marquee-direction="right"][data-marquee-status="normal"]
  .marquee-item
  img {
  transform: translateY(20%) translateX(10%) rotate(90deg);
}

.marquee .marquee-item img path {
  stroke: var(--color-secondary);
}

/* ------------------------- Flickity Slider - Setup -------------------------------------------------- */

.flickity-slider-group {
  width: 100%;
  position: relative;
  --gap: 2em;
  --columns: 3;
}

.flickity-slider-group .flickity-carousel {
  display: flex;
}

.flickity-slider-group .flickity-slide {
  width: calc(
    (100% / var(--columns)) -
      (var(--gap) * ((var(--columns) - 1) / var(--columns)))
  );
  margin-right: var(--gap);
  flex-shrink: 0;
  display: block;
}

/* Turn Flickity ON */
.flickity-slider-group .flickity-carousel::after {
  content: "flickity";
  display: none;
}

/* Remove Flex from for Flickity */
.flickity-slider-group .flickity-carousel {
  display: block;
}

.flickity-slider-group .flickity-viewport {
  overflow: visible;
  width: 100%;
}