.partner-logos {
  padding: 0;

  position: relative;

  background: var(--dark-charcoal-bg);

  width: 100%;
}

.logo-item {
  height: 76px;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: all 0.3s ease;
}

.logo-item-half {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  width: 98px;
  position: absolute;
  top: 0;
  background: var(--dark-charcoal-bg);
}

.logo-swiper {
  overflow: hidden;
  position: relative;
  padding: 0 98px;
}

.swiper-button-next {
  right: 0;
  top: 27%;
}

.swiper-button-prev {
  left: 0;
  top: 27%;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}

.logo-item img {
  max-width: 67%;

  height: auto;

  transition: opacity 0.3s ease;
}

/* Navigation Arrows */

.logo-nav {
  position: absolute;

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  border: none;

  cursor: pointer;

  z-index: 2;

  padding: 0;
}

/* Arrow Icons - Using clip-path for filled triangles */

.logo-nav::before {
  content: "";

  width: 12px;

  height: 12px;

  background-color: var(--primary-blue);
}

.logo-nav.prev::before {
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.logo-nav.next::before {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Partner Logos Section Responsive Styles */

@media (max-width: 768px) {
  .logo-item-half {
    width: 70px;

    top: 29%;
  }

  .logo-item img {
    max-width: 70%; /* Larger logos on mobile */
  }

  /* Make navigation arrows more touchable */

  .logo-nav {
    width: 44px;

    height: 44px;
  }

  .logo-nav::before {
    width: 14px;

    height: 14px;
  }
}