/* 
 * Logo Ribbon Styles
 * Basic styling for the scrolling logo ribbon
 */

:root {
  --logo-ribbon-scroll-time: 20s; /* Specific variable for logo ribbon only */
}

/* Title styling for the logo ribbon section */
.logo-ribbon-title {
  font-size: 24px;
  color: #333333;
  margin-bottom: 15px;
  font-weight: 600;
}

/* Custom media queries for the title responsive behavior */
@media (max-width: 767px) {
  .logo-ribbon-title {
    font-size: 20px;
  }
}

/* Container for the entire ribbon section */
.logo-ribbon-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 10px 0;
}

/* Individual ribbon tracks */
.logo-ribbon-track {
  display: flex;
  width: fit-content;
  padding: 5px 0;
}

/* Animation class applied after delay */
.logo-ribbon-track.animate {
  animation-name: logo-ribbon-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--logo-ribbon-scroll-time);
}

/* First track scrolls left to right */
.logo-ribbon-track.logo-ribbon-row1.animate {
  animation-direction: normal;
}

/* Second track scrolls right to left */
.logo-ribbon-track.logo-ribbon-row2.animate {
  animation-direction: reverse;
}

/* Hide second row on desktop */
@media (min-width: 768px) {
  .logo-ribbon-track.logo-ribbon-row2 {
    display: none;
  }
}

/* Show both rows on mobile */
@media (max-width: 767px) {
  .logo-ribbon-track.logo-ribbon-row2 {
    display: flex;
  }
}

/* Individual logo items */
.logo-ribbon-item {
  flex: 0 0 auto;
  padding: 0 15px;
}

/* Scrolling animation definition */
@keyframes logo-ribbon-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}