/* Service Logo Component Styles */

.c-service-logo {
  margin-block: 16px;
}
@media screen and (min-width: 60em) {
  .c-service-logo {
    margin-block: 30px;
  }
}

.c-service-logo__inner {
  overflow: hidden;
  display: flex;
}

.c-service-logo__items {
  min-width: unset;
  display: flex;
  gap: 32px;
  -webkit-animation: loopGalleryLeft var(--gallery-second, 50s) linear infinite;
  animation: loopGalleryLeft var(--gallery-second, 50s) linear infinite;
}

.c-service-logo.c-service-logo--scroll-left .c-service-logo__items {
  -webkit-animation: loopGalleryRight var(--gallery-second, 50s) linear infinite !important;
  animation: loopGalleryRight var(--gallery-second, 50s) linear infinite !important;
}

@media screen and (min-width: 60em) {
  .c-service-logo__items {
    gap: 48px;
  }
}

.c-service-logo__items + .c-service-logo__items {
  margin-left: 32px;
}

@media screen and (min-width: 60em) {
  .c-service-logo__items + .c-service-logo__items {
    margin-left: 48px;
  }
}

.c-service-logo__item img {
  max-width: unset;
  width: auto;
  height: 40px;
}
@media screen and (min-width: 60em) {
.c-service-logo__item img {
  height: 80px;
}
}

/* Animation Keyframes */
@-webkit-keyframes loopGalleryLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loopGalleryLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loopGalleryRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}