@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-BoldItalic.woff2') format('woff2'),
      url('fonts/OpenSans-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-ExtraBold.woff2') format('woff2'),
      url('fonts/OpenSans-ExtraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
      url('fonts/OpenSans-ExtraBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Medium.woff2') format('woff2'),
      url('fonts/OpenSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}



@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-MediumItalic.woff2') format('woff2'),
      url('fonts/OpenSans-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
      url('fonts/OpenSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Bold.woff2') format('woff2'),
      url('fonts/OpenSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic.woff2') format('woff2'),
      url('fonts/OpenSans-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-SemiBold.woff2') format('woff2'),
      url('fonts/OpenSans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-SemiBoldItalic.woff2') format('woff2'),
      url('fonts/OpenSans-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}


  
  body {
    background: #ffffff;
  }
  /* #f2f2f2 */

  
  .client span{
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size: 2.1rem;
    font-weight: 900;
    padding-bottom: 10px;
  }

  
  @keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  .logos {
    overflow: hidden;
    padding: 60px 0;
    background: #ffffff;
    white-space: nowrap;
    position: relative;
  height:fit-content;
  }
  
  .logos:before,
  .logos:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
  }
  
  .logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
  }
  
  .logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  }
  
  .logos:hover .logos-slide {
    animation-play-state: paused;
  }
  
  .logos-slide {
    display: inline-block;
    animation: 35s slide infinite linear;
  }
  
  .logos-slide img {
    height: 80px;
  padding: 5px 10px;
    margin: 0 30px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
  border-radius: 5px;
  
  }
  .logos-slide img:hover{
  
  height: 85px;
  transition: 0.2s linear;
  }
  
  
  
  
  
  
  @keyframes slide-left {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }
  
  .logos-left {
    overflow: hidden;
    padding: 60px 0;
    background: white;
    white-space: nowrap;
    position: relative;
  height:fit-content;
  }
  
  .logos-left:before,
  .logos-left:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
  }
  
  .logos-left:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
  }
  
  .logos-left:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  }
  
  .logos-left:hover .logos-slide-left {
    animation-play-state: paused;
  }
  
  .logos-slide-left {
    display: inline-block;
    animation: 35s slide-left infinite linear;
  }
  
  .logos-slide-left img {
    height: 80px;
  padding: 5px 10px;
    margin: 0 30px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
  border-radius: 5px;
  
  }
  .logos-slide-left img:hover{
  
  height: 85px;
  transition: 0.2s linear;
  }


  @media screen and (max-width: 768px) {
    .logos-left {
      
      padding: 30px 0;
      
    height:fit-content;
    }

    .logos-slide-left img {
      height: 50px;
    padding: 5px 10px;
      margin: 0 15px;
   
    
    }


    .logos-left:before {
      left: 0;
      background: none;
    }
    
    .logos-left:after {
      right: 0;
      background: none;
    }

    .logos {
      
      padding: 30px 0;
      
    height:fit-content;
    }

    .logos-slide img {
      height: 50px;
    padding: 5px 10px;
      margin: 0 15px;
   
    
    }


    .logos:before {
      left: 0;
      background: none;
    }
    
    .logos:after {
      right: 0;
      background: none;
    }
    .client span{
      font-size: 1.5rem;
    }
  }