body {
    margin: 0;
    height: 2000px; /* Make the body tall enough to scroll */
    background-color: #f4f4f4; /* bg colour */
}

.image-container {
    position: fixed; /* Stay in place while scrolling */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the container */
    /* Adjust width and height as needed */
    width: 600px;
    height: 400px;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Make images fill the container */
    height: 100%;
    opacity: 0; /* Initially hide all images */
    transition: opacity 0.5s ease-in-out, z-index 0.5s; /* Smooth fade-in */
}

.image-container img:first-child {
    opacity: 1; /* Make the first image visible initially */
    z-index: 1;
}

/* Add this to your style.css or stylev2.css */
::-webkit-scrollbar {
    width: 0px; /* For vertical scrollbars */
    height: 0px; /* For horizontal scrollbars */
  }
  
  ::-webkit-scrollbar-thumb {
    background: transparent; /* Or any color you want to hide it */
  }
  
  ::-webkit-scrollbar-track {
    background: transparent; /* Or any color you want to hide it */
  }