#tab-prev.disabled,
#tab-next.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.fade-left {
  animation: fadeLeft 0.4s ease forwards;
}
@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


#page-preloader {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  z-index: 9999;
}
#page-preloader.active {
  display: flex;
}

.vanilla-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.vanilla-slider-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

.vanilla-slide {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 10px;
}

/* Responsive widths */
@media (min-width: 992px) {
  .vanilla-slide { width: 25%; } /* 3 per view */
}
@media (min-width: 768px) and (max-width: 991px) {
  .vanilla-slide { width: 50%; } /* 2 per view */
}
@media (max-width: 767px) {
  .vanilla-slide { width: 100%; } /* 1 per view */
}

.slider-button {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.slider-button button {
  pointer-events: auto;
}

.vanilla-pagination {
  text-align: center;
  margin-top: 10px;
}
.vanilla-pagination span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}
.vanilla-pagination span.active {
  background: #333;
}

.bainer-cs {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.custom-slider {
  position: relative;
  width: 100%;
  height: 75vh; 
}
/* .custom-slider {
  position: relative;
  width: 100%;
  height: 75vh; 
}

.custom-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  opacity: 0;
  transition: opacity 1s ease-in-out;
} 

 .bainer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */
@media(max-width:780px){
	.custom-slider {
		height: 45vh;
	}
}

@media(max-width:580px){
	.custom-slider {
		height: 25vh;
	}
}


.custom-wrapper {
  position: relative;
/*   overflow: hidden; */
}
.custom-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.custom-slide:first-child {
  position: relative;
  opacity: 1; /* ✅ first image visible before JS runs */
}
.bainer-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 6;
  object-fit: cover;
}