body {
      font-family: "Playfair Display", serif;
    }
    .content-font {
      font-family: "Inter", sans-serif;
    }
* { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #fff; overflow-x: hidden; }

        /* Yeh section utna hi bada hoga jitna animation space chahiye */
        .gallery-section {
            position: relative;
            height: 100vh; /* Sirf 100vh rakhein repetition rokne ke liye */
            background-color: #fff; /* Scroll karne ke liye extra space niche di hai */
        }

        

.scroll-container {
  position: relative;
  height: 100vh;
}

.image-wrapper {
  position: absolute;
  opacity: 0;
}

.center-img {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 1;
}

.side-img img {
  width: 260px;
  height: 180px;
  object-fit: cover;
  border-radius: 16px;
}

/* positions */
.top-left { top: 5%; left: 10%; }
.top-right { top: 5%; right: 10%; }
.left { top: 50%; left: 3%; transform: translateY(-50%); }
.right { top: 50%; right: 3%; transform: translateY(-50%); }
.bottom-left { bottom: 8%; left: 10%; }
.bottom-right { bottom: 8%; right: 10%; }
.card:hover .hover-box {
  transform: translateY(0);
}
.card:hover .hover-box {
  transform: translateY(0);
}