/* GSAP Marquee – overflow-safe CSS (v1.4.5) */

/* 0) Scope: only affect this widget */
.elementor-widget-gsap_marquee,
.elementor-widget-gsap_marquee > .elementor-widget-container { 
  overflow: hidden; /* unblock Elementor wrappers */
}

/* 1) Marquee root: clip left/right, allow vertical overflow for hover scale */
.gsap-marquee {
  position: relative;
  width: 100%;
  padding: 10px 0;
  --marquee-gap: 24px;
  color: #fff;
  overflow: visible;
  --visible: 0;
}

/* 2) Viewport: DO NOT mask or clip; we’ll use overflow-x only */
.gsap-marquee__viewport {
  position: relative;
  isolation: isolate;
  /* Remove any mask/clip left from earlier CSS */
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
  overflow: visible;
}
.gsap-marquee__track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
  transform: translateX(0);
}

.gsap-marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  margin-right: var(--marquee-gap, 24px);
  border-radius: 6px;               /* visual only; doesn't clip children */
  background: rgba(255,255,255,0.08);
  color: inherit;
  font-weight: 600;
  user-select: none;
  flex: 0 0 var(--item-basis, auto);
  position: relative;               /* for z-index on hover */
    flex-basis: calc(
    (100% - (var(--marquee-gap, 24px) * (var(--visible) - 1)))
    / var(--visible)
  );
}
/* NEW — Set your responsive counts (edit numbers as desired) */
@media (max-width: 1024px) { /* Tablet */
  .gsap-marquee { --visible: 3; }  /* e.g., show 3 items */
}
@media (max-width: 767px) { /* Mobile */
  .gsap-marquee { --visible: 2; }  /* e.g., show 2 items */
}

/* Keep hovered item above neighbors so the scale doesn’t get hidden */
.gsap-marquee__item:hover { z-index: 5; }

/* Text item */
.gsap-marquee__item.is-text .gsap-marquee__label {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Image item */
.gsap-marquee__item.is-image {
  background: transparent;
  padding: 0.25rem 0.8rem;
}

/* Image itself: no clipping, smooth scaling */
.gsap-marquee__img {
  display: block;
  height: auto;
  width: auto;
  object-fit: contain;
  object-position: center center;
  image-rendering: -webkit-optimize-contrast;
  transition: transform 0.25s ease, opacity 0.2s ease, filter 0.2s ease;
  transform-origin: center center;
  will-change: transform;
}

/* Link wrapper */
.gsap-marquee__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Focus styles */
.gsap-marquee__item:focus-within,
.gsap-marquee__item:focus {
  outline: 2px solid rgba(255,255,255,0.3);
  outline-offset: 2px;
}