.groupSlider {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		place-items: center;
		margin: 0px;
		padding: 0px;
		list-style-type: none;
		gap: 0px;
		cursor: grab;
		user-select: none;
		touch-action: pan-y;
	}
	.groupSlider .slide {
        flex: 1 1 16%;
        height: 90vh;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin: 0 4px;
        position: relative;
        visibility: hidden; /* Initially hidden */
        opacity: 0; /* Fully transparent */
        overflow: hidden;
        
      }
	@media (min-width: 1024px) {
		.in-view .groupSlider .slide{
			transition: opacity 0.6s ease, flex 0.6s ease; /* Faster transition */
			animation: preloadAnimation 3s cubic-bezier(0.42, 0, 0.58, 1) forwards;
			animation-delay: calc(
				var(--slide-index) * 0.3s
			); /* Stagger the animation */
		}

		/* Keyframes for smooth animation */
		@keyframes preloadAnimation {
			0% {
				visibility: visible; /* Slide becomes visible when animation starts */
				transform: perspective(1200px) scale(1) rotateY(-90deg);
				opacity: 0;
			}
			25% {
				transform: perspective(1200px) scale(1) rotateY(-30deg);
				opacity: 0.3;
			}
			40% {
				transform: perspective(1200px) scale(1) rotateY(-15deg);
				opacity: 0.6;
			}
			60% {
				visibility: visible; /* Ensures visibility persists */
				transform: perspective(1200px) scale(1) rotateY(0deg);
				opacity: 1;
			}
			80% {
				visibility: visible; /* Ensures visibility persists */
				transform: perspective(1200px) scale(1) rotateY(-3deg);
				opacity: 1;
			}
			100% {
				visibility: visible; /* Ensures visibility persists */
				transform: perspective(1200px) scale(1) rotateY(0deg);
				opacity: 1;
			}
		}      
	}
	/* Ensures slides remain visible after animation */
      .slide-loaded {
        visibility: visible !important;
        opacity: 1 !important;
        transform: perspective(1200px) scale(1) rotateY(0deg) !important;
      }
      .loaded.groupSlider .slide {
        visibility: visible; /* Ensure slides are not visible initially */
        opacity: 1; /* Fully transparent */
      }
.groupSlider .slide.selected,
.groupSlider .slide.active {
    flex: 1.5 1 20%; /* Make the active slide larger */
    opacity: 1;
}

.groupSlider .slide {
    background-size: cover;
    background-position: center;
}

.groupSlider .slide:hover {
    opacity: 1;
}

.groupSlider .slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.groupSlider .slide::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(33, 33, 33);
    opacity: 0.5;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.groupSlider .slick-slide.slick-current.slick-active:after,
.groupSlider .slide:hover::after {
    opacity: 0;
}

.bottom_img {
    position: absolute;
    bottom: 30px;
    width:100%;
    text-align: center;
}
.bottom_img img {
    width: 100px;
}
.slick-list.draggable,
.slick-track {
height: 90vh;
}

@media (max-width: 1024px) {
.groupSlider .slide {
display:inline-block;
	height: 80vh;
}
.groupSlider {
padding: 0px;
}
.groupSlider .bottom_img img {
width: 50px !important;
	display:inline-block;
}
}

@media (max-width: 768px) {
.groupSlider .slide.slick-slide.slick-current.slick-active {
z-index: 10;
opacity: 1;
}
.slick-slider .slick-prev {
left: 16px;
z-index: 99;
}
.slick-slider .slick-next {
right: 16px;
}
.groupSlider .slick-list .slide {

}
.groupSlider .slick-track {
	display:inline-block;
}
.slick-dots {
bottom: 10px;
}
}