/* Timeline Slider - Services Slider */
.timeline-wrapper {
  position: relative;
  padding: 20px;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  border-radius: 24px;
  overflow: hidden;
}
.timelineControls {
    margin-bottom: 25px !important;
}
/* TRACK */
.timeline-track {
  position: absolute;
  top: 48px;
  left: 40px;
  right: 40px;
  height: 4px;
  background: #28498624;
  border-radius: 4px;
}

/* PROGRESS FILL */
.timeline-progress {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #57c548, #22c55e);
  border-radius: 4px;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}

/* MOVING DOT */
.timeline-dot {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #57c548;
  display: grid;
  place-content: center;
  color: white;
  font-weight: 700;
  font-size: 18px;
  transition: left .6s cubic-bezier(.2,1,.3,1);
  transform .3s ease;
  z-index: 5;
  cursor: grab;
  touch-action: none;
}
.timeline-content h2 {
    font-size: 24px;
}
.timeline-dot:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.15);
}


/* SLIDER */
.timeline {
  overflow: hidden;
}

/* CONTENT */
.timeline-content {
  max-width: 1100px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: .6s cubic-bezier(.4,0,.2,1);
}

.swiper-slide-active .timeline-content {
  opacity: 1;
  transform: translateY(0);
}

/* NAV */
.timeline-nav {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.timeline-nav .swiper-button-next,
.timeline-nav .swiper-button-prev {
  position: static;
  color: #222222;
}
.timeline-nav .swiper-button-next:hover, .timeline-nav .swiper-button-prev:hover {
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
}
.timeline-image img {
    filter: grayscale(1);
    border-radius: 20px;
}
/* MOBILE */
@media (max-width: 1024px) {
  .timeline-content {
    grid-template-columns: 1fr;
    text-align: left;
  }
}



/*end of Timeline slider - Services slider */