:root {
  --primary: #1d71b8; /* Blue 500 */
  --text-main: #1b2848; /* Slate 700 */
  --bg-main: #ffffff; 
  --bg-section: #f8fafc; /* Slate 50 */
}

body {
  color: var(--text-main);
  background-color: var(--bg-main);
  font-family: 'Roboto', sans-serif;
}

/* Carousel animation */
.carousel-container {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: scroll 40s linear infinite;
}

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

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.33%); } /* Because we merged 3 copies */
}
