/*========================================*/
/*--------------- [_Clients] -------------*/
/*========================================*/
.client-items,
.client-items2 {
  .client-item {
    padding: 20px;
    opacity: 0.7;
    filter: grayscale(1);
    @include transition(all 300ms ease-out 0s);
    img {
      @include transition(all 300ms ease-out 0s);
    }
    &:hover {
      opacity: 1;
      filter: grayscale(0);
    }
  }
  &.opacity_1 {
    .client-item {
      opacity: 1;
    }
  }
}
.client-items3 {
  .client-item {
    padding: 30px;
    background: var(--bg-silver);
    filter: grayscale(0);
    border-radius: 8px;
    opacity: 1;
    img {
      width: 156px;
      filter: grayscale(1);
      margin: 0 auto;
    }
    &:hover {
      img {
        filter: grayscale(0);
        transform: scale(1.05);
      }
    }
  }
}
.client-section {
  position: relative;
  &:after {
    position: absolute;
    height: 0;
    width: 100%;
    bottom: 0;
    right: 0;
    border-style: solid;
    border-width: 0 275px 25px 0;
    border-color: transparent transparent var(--webex-primary-color2) transparent;
    content: "";
  }
}

.client-item-full-right {
  position: relative;
  display: block;
  margin-top: -90px;
  .client-item-full-right-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 75px 45px;
    background: var(--gradient-color1);
    overflow: hidden;
    border-radius: 8px;
    @media only screen and (max-width: 1024px) {
      padding: 45px 60px 45px;
    }
    &:after {
      content: "";
      background-image: url(../images/about/wave2.png);
      background-size: cover;
      background-position: center left;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      opacity: 0.35;
      filter: brightness(1);
      animation: heartbeat 1.5s infinite alternate;
    }
  }
}