/**********
  Logo Marquee (Smooth & Continuous)
***********/

/* Scale the Clients heading and its icon */
.service-container .section-heading .sub-title {
  font-size: 30px !important; /* Adjusted heading text size */
  font-weight: 700 !important;
}

.service-container .section-heading .sub-title img {
  width: 32px !important; /* Adjusted hammer icon size */
  height: auto !important;
}

.logo-marquee-container {
  overflow: hidden;
  padding: 50px 0 !important;
  background: #fff !important;
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  /* Premium fade gradient at the left & right edges to soften transitions (increased to 20%) */
  mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%) !important;
}

.logo-marquee-track {
  display: flex !important;
  width: max-content !important;
  align-items: center !important;
  /* Reduced duration to 50s to increase speed of scrolling further */
  animation: marquee-ltr 50s linear infinite !important;
}

.logo-marquee-item {
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 70px !important;  /* Reduced padding between logos from 100px to 70px */
  height: 340px !important;    /* Increased height to accommodate the 270px logos */
}

.logo-marquee-item img {
  height: 270px !important;    /* Increased height for even larger logos (was 220px) */
  width: auto !important;
  max-width: 500px !important; /* Prevent wide logos from stretching too much */
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.logo-marquee-item:hover img {
  transform: scale(1.08) !important; /* Premium hover transition */
}

/* Specific scaling for tall/square logos to keep them in visual proportion */
.logo-marquee-item img[src*="particip.png"],
.logo-marquee-item img[src*="eupkbn.jpg"] {
  height: 150px !important;
}

@keyframes marquee-ltr {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}