.proud {
  overflow-x: hidden;
  padding: 100px 0;
}
.proud .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 64px;
  margin-bottom: 56px;
}
.proud .body-lg {
  color: #8B8A8F;
  margin-bottom: 16px;
}
.proud .h2 {
  color: #EDE9EB;
  line-height: 1;
}

.proud-right {
  width: 100%;
  max-width: 534px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.proud-info {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  flex: 0 1 33.333%;
}
.proud-info strong {
  color: #EDE9EB;
}
.proud-info span {
  color: #8B8A8F;
}

.logo-swiper {
  max-width: 1920px;
  width: 100%;
  margin: 16px auto;
  overflow: hidden;
}

.logo-wrapper {
  position: relative;
  min-width: calc(380px * var(--quantity));
  height: 180px;
}

.logo-slide {
  position: absolute;
  left: calc(100% + 8px);
  width: 380px;
  height: 180px;
  background: #1B1B26;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  animation: moveSlider 200s linear infinite;
  animation-delay: calc(-200s / var(--quantity) * (var(--pos) - 1)) !important;
}

.logo-wrapper:hover .logo-slide {
  animation-play-state: paused !important;
}

.logo-wrapper-reverse .logo-slide {
  animation: reverseMoveSlider 200s linear infinite;
}

@keyframes moveSlider {
  0% {
    left: calc(100% + 8px);
  }
  100% {
    left: -388px;
  }
}
@keyframes reverseMoveSlider {
  0% {
    left: -388px;
  }
  100% {
    left: calc(100% + 8px);
  }
}
.client-logo {
  transition: ease 0.5s;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.client-logo svg {
  fill: #DED6DA;
  transition: ease 0.5s;
}
.client-logo:hover {
  background: #4B40F6;
  border-radius: 3px;
}
.client-logo:hover svg {
  fill: #E5DFE2;
}

@media (max-width: 768px) {
  .proud {
    padding: 56px 0;
  }
  .proud .container {
    gap: 32px;
    margin-bottom: 32px;
  }
  .proud-right {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }
  .proud-right .body {
    font-size: 15px;
  }
  .proud-info {
    flex: unset;
  }
  .logo-swiper {
    margin: 8px auto;
  }
  .logo-wrapper {
    min-width: calc(160px * var(--quantity));
    height: 80px;
  }
  .logo-slide {
    width: 160px;
    height: 80px;
  }
  @keyframes moveSlider {
    0% {
      left: calc(100% + 8px);
    }
    100% {
      left: -168px;
    }
  }
  @keyframes reverseMoveSlider {
    0% {
      left: -168px;
    }
    100% {
      left: calc(100% + 8px);
    }
  }
}