/* === PARTNERS MARQUEE STYLES === */
.partners-section {
  padding: 80px 20px;
  background-color: transparent; /* Blends into your existing dark background */
  text-align: center;
  overflow: hidden;
}

.partners-title {
  color: #ffffff;
  font-size: 1.5rem;
  margin-bottom: 50px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* The wrapper creates the faded edges using a CSS mask */
.marquee-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}

/* The track holds the logos and physically moves them */
.marquee-track {
  display: flex;
  align-items: center;
  gap: 80px; /* Space between each logo */
  width: max-content;
  /* 35s is the speed. Lower = faster, Higher = slower */
  animation: scrollMarquee 35s linear infinite;
}

/* Optional: Pauses the scroll if a user hovers their mouse over it */
.marquee-track:hover {
  animation-play-state: paused;
}

/* Logo styling: Grayscale and semi-transparent by default */
.partner-logo {
  height: 60px; /* Keeps all logos a uniform height */
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.4);
  transition: all 0.4s ease;
  cursor: pointer;
}

#investec-logo {
  fill: white;
}

#pty_ltd {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  border: none;
}

/* Full color and slight zoom on hover */
.partner-logo:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1);
}

/* The actual scroll animation */
@keyframes scrollMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Scrolls exactly halfway through the track (1 full set) to loop */
    transform: translateX(calc(-50% - 40px));
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .partner-logo {
    height: 45px; /* Slightly smaller on phones */
  }
  .marquee-track {
    gap: 50px;
  }
}