
.rotate-container {
    width: 400px; 
  }
  
  .rotate-hero {
    gap: 10px;
    background-color: #fafafa;
    
  }
  .rotate-info-text {
    margin: 20px 0px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #54595F ;
  }
  
  .rotate-sliders.slider1 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="205" viewBox="0 0 400 205" fill="none"><g filter="url(%23filter0_d_3037_2257)"><path fill-rule="evenodd" clip-rule="evenodd" d="M-14.0391 14.8548C-13.4917 13.3084 -11.8524 12.5263 -10.226 12.7407C51.0378 20.8155 114.916 24.0743 180.477 21.9347C261.212 18.2995 335.333 9.87615 402.987 -2.8012C404.371 -3.06041 405.819 -2.59632 406.595 -1.42241C408.173 0.963342 409.131 3.80178 409.231 6.87029L414.709 174.75C414.919 181.165 411.321 186.821 405.952 189.547C405.353 189.851 404.676 189.947 404.007 189.883C336.934 183.459 263.309 181.315 182.722 183.945C120.944 185.961 60.9691 192.639 3.54278 203.446C2.97908 203.552 2.39726 203.543 1.84872 203.375C-4.51451 201.43 -9.23435 195.614 -9.46349 188.592L-14.9421 20.7129C-15.0092 18.6586 -14.6859 16.6821 -14.0391 14.8548Z" fill="white"/></g><defs><filter id="filter0_d_3037_2257" x="-18.9512" y="-4.87109" width="437.669" height="214.387" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feColorMatrix type="matrix" values="0 0 0 0 0.271333 0 0 0 0 0.290922 0 0 0 0 0.308333 0 0 0 0.04 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3037_2257"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3037_2257" result="shape"/></filter></defs></svg>') no-repeat center center;
    background-size: cover;
    background-position: center;
    padding: 10px 10px 0px 0px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .rotate-sliders.slider2 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="220" viewBox="0 0 400 220" fill="none"><g filter="url(%23filter0_d_3124_11213)"><path fill-rule="evenodd" clip-rule="evenodd" d="M-1.53564e-07 1.61379C-9.79299e-08 0.34048 1.20515 -0.519696 2.45869 -0.296163C58.3056 9.66255 116.835 14.9575 177.14 14.9575C257.447 14.9575 330.254 9.11235 395.869 -1.84587C397.914 -2.18747 399.937 -0.907869 399.994 1.16508C399.998 1.31416 400 1.46375 400 1.61382L400 220.747C400 229.583 392.837 236.747 384 236.747L228.119 236.747C217.459 236.412 206.737 236.243 195.958 236.243C185.179 236.243 174.457 236.412 163.797 236.747L16 236.747C7.16344 236.747 -1.0114e-05 229.583 -9.72796e-06 220.747L-1.53564e-07 1.61379V1.61379Z" fill="white"/></g><defs><filter id="filter0_d_3124_11213" x="-4" y="-5.90088" width="408" height="246.647" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2"/><feColorMatrix type="matrix" values="0 0 0 0 0.271333 0 0 0 0 0.290922 0 0 0 0 0.308333 0 0 0 0.08 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3124_11213"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3124_11213" result="shape"/></filter></defs></svg>') no-repeat center center;
    background-size: cover;
    background-position: center;
    padding: 10px 0px 0px 0px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  @keyframes logo1 {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes logo2 {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  .rotate-logos {
    overflow: hidden;
    padding: 24px 0px;
    white-space: nowrap;
    position: relative;
  }
  
  .rotate-logos:before,
  .rotate-logos:after {
    position: absolute;
    top: 0;
    content: "";
    width: 250px;
    height: 100%;
    z-index: 2;
  }
  
  .rotate-logos:before {
    left: 0;
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0),
      rgb(255, 255, 255,0.1)
    );
  }
  
  .rotate-logos:after {
    right: 0;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgb(255, 255, 255, 0.1)
    );
  }
  
  .rotate-logo_items {
    display: inline-block;
    animation: 15s logo1 infinite linear;
  
  }
  
  .rotate-logo_items2 {
    display: inline-block;
    animation: 15s logo2 infinite linear reverse;
    
  }
  
  .rotate-logos:hover .rotate-logo_items {
    animation-play-state: paused;
  }
  
  .rotate-logos:hover .rotate-logo_items2 {
    animation-play-state: paused;
  }
  
  .rotate-logo_items img {
    height: 100px;
    border-left: 1.5px dashed #E8E3E3;
  }
  
  .rotate-logo_items2 img {
    height: 100px;
    border-right: 1.5px dashed #E8E3E3;
  }
  
  .rotate-line {
    width: 2px;
    height: 100px; 
    background: none; 
    border-left: 2px dashed #E8E3E3
    ;;
    margin: 20px auto;
  }
  
  