/* ==========================================
   Infinite Loop Slider
   Author: Ihtesham
   ========================================== */

:root {
  --icon-size: 120px;   /* icon height */
  --gap: 20px;          /* consistent spacing between icons */
  --bg: transparent;    /* background color */
  --hover-scale: 1.1;   /* zoom on hover */
}

/* Wrapper */
.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

/* Moving track */
.marquee-content {
  display: flex;
  align-items: center;
  will-change: transform;
}

/* Each image */
.marquee-content img {
  height: var(--icon-size);
  width: auto;
  flex: 0 0 auto;
  margin: 0 20px !important;  /* consistent gap always visible */
  filter: grayscale(100%);
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
  user-select: none;
}

/* Maintain edge spacing so images don't touch viewport sides */
.marquee-content img:first-child {
  margin-left: calc(var(--gap));      /* start buffer */
}
.marquee-content img:last-child {
  margin-right: calc(var(--gap));     /* end buffer */
}

/* Hover effect */
.marquee-content img:hover {
  transform: scale(var(--hover-scale));
  opacity: 1;
  filter: none;
}

/* Responsive sizes */
@media (max-width: 1024px) {
  :root {
    --icon-size: 100px;
    --gap: 60px;
  }
}

@media (max-width: 768px) {
  .marquee-content img {
    margin: 0 12px !important;
  }
}

@media (max-width: 480px) {
  .marquee-content img {
    margin: 0 8px !important;
  }
}