@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;
      }
    }