/* The outer container */
.partners-ribbon {
  width: 100%;
  overflow: hidden;          /* Hide items that scroll out of view */
  position: relative;
  margin: 50px auto;         /* Center the container on the page */
}

/* The scrolling track with twice as many items */
.ribbon-track {
  display: flex;             /* Items in a row */
  width: 200%;               /* Double the width so duplicates fit side-by-side */
  animation: scrollL2R 500s linear infinite;
  /* 
     10s = duration of one full cycle
     linear = constant speed
     infinite = loop forever 
  */
}

.partners-ribbon:hover .ribbon-track {
    animation-play-state: paused;
  }

.partner-item {
  flex: 0 0 auto;            
  width: 200px;              
  height: 200px;             
  margin-right: 40px;        
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  /* Optional styling for clarity */
  border-radius: 8px;
}

/* Keyframes: Start so that the second half is shown, move to show the first half */
@keyframes scrollL2R {
  0% {
    transform: translateX(-1000%); 
    /* We start by showing the second half of the track */
  }
  100% {
    transform: translateX(0);    
    /* End with the first half fully in view */
  }
}