/* The outer container hides everything outside the screen width */
.golo-slider {
  overflow: hidden;
  padding: 40px 0;
  background: #ffffff; /* Change to your background color */
  position: relative;
  width: 100%;
}

/* Optional: Adds a nice gradient fade on the left and right edges */
.golo-slider::before,
.golo-slider::after {
  background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  content: "";
  height: 100%;
  position: absolute;
  width: 100px;
  z-index: 2;
  top: 0;
}
.golo-slider::before { left: 0; }
.golo-slider::after { right: 0; transform: rotate(180deg); }

/* The moving track holding all 26 slides */
.golo-slide-track {
  display: flex;
  width: calc(250px * 26); /* 250px width per slide * 26 total slides */
  animation: scroll 40s linear infinite;
}

/* Individual slide styling */
.golo-slide {
  width: 250px; /* Fixed width prevents shrinking */
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px; /* Spacing between golos */
}

/* Ensures golos never distort or get trimmed */
.golo-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; 
}

/* Animation: Moves exactly half of the total track width (the firt 13 golos) */
@keyframes scroll{
  0%{
    transform : translateX(0);
  }
  100% {
    transform: translateX(calc(-250px *13)); */Width of 13 golos */
  }
}
/* Optional: Pauses the slider when someone hovers over it */
.golo-slider:hover .golo-slide-track {
  animation-play-state: paused;
}