/* Logo Carousel Styles */
.logo-carousel-section {
  background-color: #ffffff;
  color: #000000;
  position: relative;
  padding: 48px 0;
}

.logo-carousel-container {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
}

.logo-carousel-overflow {
  overflow: hidden;
}

.logo-carousel-track {
  display: flex;
  animation: logoScroll 25s linear infinite;
  transform: translateX(0);
  width: calc(200% + 160px); /* Accommodate for duplicated content */
}

.logo-carousel-wrapper {
  display: flex;
  flex-shrink: 0;
  min-width: calc(100% + 80px);
}

.logo-item {
  flex-shrink: 0;
  margin-left: 80px;
}

.logo-item:first-child {
  margin-left: 0;
}

.logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  width: 170px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.company-logo {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: clip;
  aspect-ratio: auto;
}

/* Background decoration elements */
.carousel-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.decoration-gradient-top {
  position: absolute;
  right: -80px;
  top: 0;
  width: 256px;
  height: 256px;

  border-radius: 9999px;
  filter: blur(64px);
  pointer-events: none;
}

.decoration-gradient-bottom {
  position: absolute;
  left: -80px;
  bottom: -160px;
  width: 320px;
  height: 320px;

  border-radius: 9999px;
  filter: blur(64px);
  pointer-events: none;
}

/* Animation keyframes */
@keyframes logoScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 80px));
  }
}

/* Hover effects */
.logo-container:hover {
  transform: scale(1.05);
}

.logo-container:hover .company-logo {
  filter: brightness(1.1);
}

/* Create infinite loop effect by duplicating content */
.logo-carousel-track::after {
  content: '';
  display: flex;
  flex-shrink: 0;
}

/* Responsive design */
@media (max-width: 768px) {
  .logo-carousel-section {
    padding: 32px 0;
  }
   .logo-carousel-track {
      animation: logoScroll 5s linear infinite;
  }
  .logo-container {
    height: 96px;
    width: 240px;
  }
  
  .logo-item {
    margin-left: 60px;
  }
  
  .company-logo {
    max-width: 240px;
  }
}

@media (max-width: 480px) {
  .logo-carousel-section {
    padding: 24px 0;
  }
  
  .logo-container {
    height: 80px;
    width: 200px;
  }
  
  .logo-item {
    margin-left: 40px;
  }
  
  .company-logo {
    max-width: 200px;
  }
}

/* Performance optimizations */
.logo-carousel-track {
  will-change: transform;
}

.company-logo {
  will-change: transform, filter;
}

/* Ensure smooth animation on all devices */
@media (prefers-reduced-motion: reduce) {
  .logo-carousel-track {
    animation-duration: 120s;
  }
}

/* Fix for webkit browsers */
.logo-carousel-container {
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
}