.carousel {
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    border-radius: 10px;
    background-color: transparent;
}

.carousel-track {
    display: flex;
    animation: scroll 10s linear infinite;
}

.carousel-logo {
    width: 250px;
    height: 80px;
    margin: 10px;
    /* --- ADDED FOR GRAYSCALE --- */
    filter: grayscale(100%); /* Applies a full grayscale filter */
    /* --- Optional: Add a transition for smooth hover effects --- */
    transition: filter 0.3s ease-in-out;
}

/* --- Optional: Revert to color on hover --- */
.carousel-logo:hover {
    filter: grayscale(0%); /* Removes the grayscale filter on hover */
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

  .video-section {
      position: relative;
      width: 100%;
      /* height: auto; */
      overflow: hidden;
    }

    .video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none; /* prevent interaction */
      z-index: -1;
    }

    .video-background iframe {
      width: 100vw;
      height: 56.25vw; /* 16:9 aspect ratio */
      min-height: 100vh;
      min-width: 177.77vh; /* 16:9 aspect ratio */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .video-content {
        position: relative;
      /* z-index: 1; */
      color: black;
      text-align: center;
      top: 0;
      transform: translateY(-50%);
      /* font-family: Arial, sans-serif; */
    }