/* CLIENT SECTION & PORTFOLIO SECTION */
#client-section {
    background-color: var(--secondary-color);
    margin-top: 20vh;
}

#client-section .title {
    background: linear-gradient(150deg, var(--primary-color), #8E4C14);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      /* Per Firefox */
      background-clip: text;
      color: transparent;
}

@keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
}
  
.logos, .portfolio {
    overflow: hidden;
    margin: 60px 0;
    white-space: nowrap;
    position: relative;
    margin-top: 5vh;
  }
  
.logos:before, .logos:after, .portfolio:before, .portfolio:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
}
@media only screen and (max-width: 768px) {
    .logos:before, .logos:after, .portfolio:before, .portfolio:after {
        width: 80px;
    }
}
  
.logos:before, .portfolio:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--secondary-color));
}
  
.logos:after, .portfolio:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--secondary-color));
}
  
.logos:hover .logos-slide, .portfolio:hover .portfolio-slide {
    animation-play-state: paused;
}
  
.logos-slide {
    display: inline-block;
    animation: 120s slide infinite linear;
}

.portfolio-slide {
    display: inline-block;
    animation: 80s slide infinite linear;
}
  
.logos-slide img {
    height: 65px;
    margin: 0 40px;
}

.portfolio-slide img {
  height: 42vh;       
  width: auto;        
  margin-right: 4vw;
  object-fit: contain; 
}


@media only screen and (max-width: 768px) {
    .logos, .portfolio {
        padding: 30px 0 60px;
        margin-top: 0;
    }

    .portfolio-slide img {
        height: 200px;
    }
}