.container {
   max-width: 1200px;
   width: 95%;
}

/* Slider wrapper styles */
.slider-wrapper {
   position: relative;
}

.slider-wrapper .slide-button {
   position: absolute;
   top: 50%;
   outline: none;
   border: none;
   height: 50px;
   width: 50px;
   z-index: 5;
   color: #fff;
   display: flex;
   cursor: pointer;
   font-size: 2.2rem;
   background: #000;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transform: translateY(-50%);
}

.slider-wrapper .slide-button:hover {
   background: #404040;
}

.slider-wrapper .slide-button#prev-slide {
   left: -25px;
   display: none;
}

.slider-wrapper .slide-button#next-slide {
   right: -25px;
}

.slider-wrapper .image-list {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   gap: 18px;
   font-size: 0;
   list-style: none;
   margin-bottom: 30px;
   overflow-x: auto;
   scrollbar-width: none;
}

.slider-wrapper .image-list::-webkit-scrollbar {
   display: none;
}

.slider-wrapper .image-list .image-item {
   width: 325px;
   height: 400px;
   object-fit: cover;
}

/* Slider scrollbar styles */
.container .slider-scrollbar {
   height: 24px;
   width: 100%;
   display: flex;
   align-items: center;
}

.slider-scrollbar .scrollbar-track {
   background: #ccc;
   width: 100%;
   height: 2px;
   display: flex;
   align-items: center;
   border-radius: 4px;
   position: relative;
}

.slider-scrollbar:hover .scrollbar-track {
   height: 4px;
}

.slider-scrollbar .scrollbar-thumb {
   position: absolute;
   background: #000;
   top: 0;
   bottom: 0;
   width: 50%;
   height: 100%;
   cursor: grab;
   border-radius: inherit;
}

.slider-scrollbar .scrollbar-thumb:active {
   cursor: grabbing;
   height: 8px;
   top: -2px;
}

.slider-scrollbar .scrollbar-thumb::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -10px;
   bottom: -10px;
}

/* Full-screen overlay styles */
.fullscreen-overlay {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.fullscreen-image {
    max-width: 90%;
    max-height: 90%;
}

.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: red;
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Styles for mobile and tablets */
@media only screen and (max-width: 1023px) {
   .slider-wrapper .slide-button {
     display: none !important;
   }

   .slider-wrapper .image-list {
     gap: 10px;
     margin-bottom: 15px;
     scroll-snap-type: x mandatory;
   }

   .slider-wrapper .image-list .image-item {
     width: 280px;
     height: 380px;
   }

   .slider-scrollbar .scrollbar-thumb {
     width: 20%;
   }
}


/* ... (Your existing CSS styles) ... */

/* Slider wrapper styles */
.slider-wrapper {
   position: relative; /* Keep position relative on the wrapper */
   overflow: hidden; /* Initially, hide overflow to prevent layout issues */
}

/* Slide button styles */
.slider-wrapper .slide-button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   outline: none;
   border: none;
   height: 50px;
   width: 50px;
   z-index: 5;
   color: #fff;
   display: flex;
   cursor: pointer;
   font-size: 2.2rem;
   background-color: #000;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: background-color 0.3s ease; /* Add smooth transition for hover effect */
}

.slider-wrapper .slide-button:hover {
   background-color: #404040; 
}

.slider-wrapper .slide-button#prev-slide {
   left: 10px; /* Adjust position for visibility */
}

.slider-wrapper .slide-button#next-slide {
   right: 10px; /* Adjust position for visibility */
}

/* Image list styles */
.slider-wrapper .image-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 18px;
   font-size: 0;
   list-style: none;
   margin-bottom: 30px;
   transition: transform 0.5s ease; 
}


/* Image item styles */
.slider-wrapper .image-list .image-item {
   width: 100%;
   height: 400px;
   object-fit: cover;
   cursor: pointer; 
}

/* ... rest of the styles ... */


















/* Responsive Styles */

/* 1024px to 912px (Tablets and smaller laptops) */
@media (max-width: 1024px) {
   .slider-wrapper {
       overflow-x: auto; 
       scroll-snap-type: x mandatory;
   }

   .slider-wrapper .image-list {
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 10px; /* Reduced gap */
   }

   .slider-wrapper .image-list .image-item {
       height: 350px; 
   }

   .slider-wrapper .slide-button, .slider-scrollbar {
       display: none;
   }
}

/* 912px to 692px (Smaller tablets) */
@media (max-width: 912px) {
   .slider-wrapper .image-list {
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }
   
   .slider-wrapper .image-list .image-item {
       height: 300px; 
   }
}

/* 692px to 472px (Large phones) */
@media (max-width: 692px) {
   .slider-wrapper {
       overflow-x: auto; 
       scroll-snap-type: x mandatory;
   }

   .slider-wrapper .image-list {
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 10px;
   }

   .slider-wrapper .image-list .image-item {
       height: 350px; 
   }

}

/* Below 472px (Smaller phones) */
@media (max-width: 472px) {
   .slider-wrapper {
       overflow-x: auto; 
       scroll-snap-type: x mandatory;
   }

   .slider-wrapper .image-list {
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Single row on small phones */
       gap: 10px;
   }
}

/* Full-screen overlay styles */
.fullscreen-overlay {
   display: none; /* Initially hidden */
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8); 
   z-index: 1000; /* Ensure it's above other elements */
}

.fullscreen-overlay.active { /* Show the overlay when active */
   display: flex;
   justify-content: center;
   align-items: center;
}

/* ... (Rest of your CSS) ... */

/* ... (Your existing CSS styles) ... */

/* Below 476px (Smaller phones) */
@media (max-width: 476px) { 
   .slider-wrapper .image-list {
       grid-template-columns: 1fr; /* Force a single column */
       gap: 10px; 
   }

   .slider-wrapper .image-list .image-item {
       width: 100%; /* Make image take full width of the container */
       height: auto; /* Let image height adjust automatically */
   }
}



















/* Full-screen overlay styles */
.fullscreen-overlay {
   display: none; /* Initially hidden */
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
   justify-content: center;
   align-items: center;
   z-index: 1000;
}

.fullscreen-overlay.active {
   display: flex;
}

.fullscreen-image {
   max-width: 90%;
   max-height: 90%;
}

.close-button {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: red;
   color: white;
   border-radius: 50%;
   font-size: 1.5rem;
   cursor: pointer;
}

.nav-button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(255, 255, 255, 0.5);
   color: black;
   border-radius: 50%;
   font-size: 1.5rem;
   cursor: pointer;
   z-index: 1001;
}

#prev-image {
   left: 20px;
}

#next-image {
   right: 20px;
}