:root {
  --slider-time: 1s;
  --slider-interval: 3000ms; /* Auto-slide interval */
}
.slider-wrapper {
  background: transparent;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%; /* Adjust this based on your preferred height */
}

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

.slider__inner {
  display: flex;
  transition: transform var(--slider-time) ease-in-out;
  background-color: transparent;
  width: 100%;
  height: 100%;
}

.slider__item {
  flex: 0 0 100%;
  box-sizing: border-box;
  position: relative;
}

.slider__image {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
}

.slider__controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.slider__control-left, .slider__control-right {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 2px;
  cursor: pointer;
  font-size: 1.5rem;
  border: none;
  outline: none;
}

.slider__control-left {
  left: 0;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.slider__control-right {
  right: 0;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.extensions {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
}

.slider-wrapper .explore {
background: var(--color-success-bg);
  color: white;
  border: none;
  padding:5px;
  cursor: pointer;
  font-size: 1.2rem;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 9pt;
  text-decoration: none;
  height: 25px;
  width: 120px;
  text-align: center;
  justify-content: center;
  text-transform: capitalize;
}
/* Animations */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-left {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slide-right {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes fade-slide {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes zoom-in {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes zoom-out {
  from { transform: scale(1.2); opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes rotate {
  from { transform: rotate(90deg); opacity: 0; }
  to { transform: rotate(0deg); opacity: 1; }
}

@keyframes flip-horizontal {
  from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
  to { transform: perspective(400px) rotateY(0); opacity: 1; }
}

@keyframes flip-vertical {
  from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
  to { transform: perspective(400px) rotateX(0); opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes bounce-in {
  from { transform: translateY(-100%); opacity: 0; }
  50% { transform: translateY(10%); }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}