.brand-scroll {
  width: 100%;
  overflow: hidden;
  display: flex;
  white-space: nowrap;
  align-items: center;
}

.brand-scroll .brand-name {
  display: flex;            /* Keeps child elements cleanly aligned horizontally */
  align-items: center;
  flex-shrink: 0;           /* CRITICAL: Stops flexbox from squishing the track */
  animation: marquee 30s linear infinite;
}

.brand-scroll .brand-name span {
  display: inline-flex;
  align-items: center;
  margin-left: 20px;
  margin-right: 20px;
}

/* Constrain image sizes so they don't blow out layout */
.brand-scroll .brand-name img {
  max-height: 60px;         /* Adjust logo height as needed */
  width: auto;              /* Keeps aspect ratio intact */
  display: block;
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}