<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .case-slider{
  background:#0c0f2c;
  padding:90px 0;
  overflow:hidden;
}

.slider-wrapper{
  position:relative;
}

.card-track{
  display:flex;
  gap:25px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:20px 40px;
}

.card-track::-webkit-scrollbar{
  display:none;
}

.case-card{
  min-width:320px;
  height:420px;
  background-size:cover;
  background-position:center;
  border-radius:14px;
  position:relative;
  display:flex;
  align-items:flex-end;
}

.overlay{
  background:rgba(0,200,180,0.55);
  backdrop-filter:blur(6px);
  margin:20px;
  padding:25px;
  border-radius:10px;
  color:white;
}

.overlay h3{
  margin-bottom:10px;
}

.overlay span{
  display:inline-block;
  margin-top:10px;
  font-weight:600;
}

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:white;
  border:none;
  padding:10px 14px;
  cursor:pointer;
  border-radius:6px;
  z-index:10;
}

.left{ left:0; }
.right{ right:0; }

    </style>
</head>
<body>
    <section class="case-slider">
  <div class="container">

    <div class="slider-wrapper">

      <button class="arrow left">&#8592;</button>

      <div class="card-track" id="cardTrack">

        <!-- CARD 1 -->
        <div class="case-card" style="background-image:url('https://images.unsplash.com/photo-1556740738-b6a63e27c4df');">
          <div class="overlay">
            <h3>Digital payment revolution</h3>
            <p>Businesses improved checkout speed and customer experience.</p>
            <span>Read case study →</span>
          </div>
        </div>

        <!-- CARD 2 -->
        <div class="case-card" style="background-image:url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b');">
          <div class="overlay">
            <h3>Next generation card systems</h3>
            <p>Secure and fast payments with modern infrastructure.</p>
            <span>Read case study →</span>
          </div>
        </div>

        <!-- CARD 3 -->
        <div class="case-card" style="background-image:url('https://images.unsplash.com/photo-1521791136064-7986c2920216');">
          <div class="overlay">
            <h3>100K users in 2 years</h3>
            <p>Rapid growth with seamless payment technology.</p>
            <span>Read case study →</span>
          </div>
        </div>

        <!-- CARD 4 -->
        <div class="case-card" style="background-image:url('https://images.unsplash.com/photo-1515168833906-d2a3b82b302a');">
          <div class="overlay">
            <h3>Seamless migration</h3>
            <p>Moved to new platform without disruption.</p>
            <span>Read case study →</span>
          </div>
        </div>

        <!-- CARD 5 -->
        <div class="case-card" style="background-image:url('https://images.unsplash.com/photo-1551281044-8b7d0d6c9c8b');">
          <div class="overlay">
            <h3>Retail transformation</h3>
            <p>Unified payments across all store locations.</p>
            <span>Read case study →</span>
          </div>
        </div>

        <!-- CARD 6 -->
        <div class="case-card" style="background-image:url('https://images.unsplash.com/photo-1563013544-824ae1b704d3');">
          <div class="overlay">
            <h3>Mobile payment success</h3>
            <p>Accept payments anywhere with ease.</p>
            <span>Read case study →</span>
          </div>
        </div>

      </div>

      <button class="arrow right">&#8594;</button>

    </div>
  </div>
</section>

<script>
const track = document.getElementById("cardTrack");

document.querySelector(".right").onclick = () => {
  track.scrollBy({ left:350, behavior:'smooth' });
};

document.querySelector(".left").onclick = () => {
  track.scrollBy({ left:-350, behavior:'smooth' });
};
</script>


</body>
</html>