.logo-scroller {
  position: relative;
   display: block;
  width:100%;  /* Will fit parent container at 100% */
  margin:0 auto;
}

.logo-scroller-content {
  padding: 70px 0;
}

.logo-scroller-items {
  margin: -58px 0;
  overflow: hidden;
  cursor: default;
}

.logo-scroller-row {
  display: flex;
  position: relative;
  white-space: nowrap;
  justify-content: space-around; /* Ensures logos have space around them */
  gap: 40px; /* Adds consistent space between logos */
}

.logo-scroller-item {
  position: relative;
  flex: 1 1 auto; /* Flexible sizing */
  min-width: 150px; /* Prevent logos from getting too small */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-scroller-item div {
  position: relative;
  display: inline-block;
  z-index: 1;
}

/* Default logo size */
.logo-scroller-item div img {
  max-width: 100%;  /* Ensure the logo doesn't overflow horizontally */
  max-height: 100px;  /* Set consistent max height for logos */
  object-fit: contain;  /* Ensure logos maintain aspect ratio */
  display: block;  /* Remove inline spacing issues */
}

/* For larger screens (desktop) */
@media (min-width: 1024px) {
  .logo-scroller-item div img {
    max-height: 110px;  /* Larger height for big screens */
  }
}

/* For smaller screens (tablets) */
@media (max-width: 768px) {
  .logo-scroller-item {
    min-width: 100px; /* Adjust minimum width for smaller screens */
  }
  .logo-scroller-item div img {
    max-height: 80px;  /* Smaller height for tablets */
  }
}

/* For very small screens (phones) */
@media (max-width: 480px) {
  .logo-scroller-item {
    min-width: 80px; /* Adjust minimum width for mobile phones */
  }
  .logo-scroller-item div img {
    max-height: 60px;  /* Even smaller size for mobile phones */
  }
}