/* Logo Scroller */

.logo-carousel {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );
}

    #logo-carousel {
        background: #0D1114;
        position: relative;
    }

    .title-carousel { 
        color:#ffffff !important;
        text-align: center;
        width:100%;
        position: absolute;
        top: 15px;
        font-size: 1.4em;
     }

    .logo-carousel {
      background: #0D1114;
      padding: 4rem 0 2rem;
      overflow: hidden;
      position: relative;
      max-width: 1280px;
    }

    .logo-track {
      display: flex;
      width: calc(200%);
      animation: scroll linear infinite;
      margin: 15px 0;
    }

    .logo-item {
      flex: 0 0 auto;
      padding: 0.5rem 1.5rem;
      width: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      transition: opacity 0.3s ease;
      background-color: #ffffff;
      border-radius: 10px;
      margin: 0 0.5rem;
    }

    .logo-item:hover {
      opacity: 1;
    }

    .logo-item img {
      max-height: 50px;
      width: auto;
      object-fit: contain;
      transition: transform 0.3s ease;
      filter: grayscale(1);
    }

    .logo-item:hover img {
      transform: translateY(-3px);

      filter: none;
    }

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (max-width: 991px) {
    .logo-item { width: auto; }
  }