.services__wrapper-slide {
  position:relative;
  max-width: 800px;
  width: 70vw;
}

.services__wrapper-slide .splide{
  padding: 30px 0px;
}

.services__slide__border {
	position: absolute;
	top: 53px;
	left: -31px;
	width: 100%;
	height: 75%;
	border: 2px solid #fff;
	border-radius: 64px;
}

.services__wrapper-slide .splide__slide {
  display: flex;
  align-items: center;
  gap: 50px;
}

.services__wrapper-slide .splide__pagination {
	top: 350px;
	left: 140px;
	padding: 0 1em;
	position: absolute;
	right: auto;
	z-index: 1;
}

.services__wrapper-slide .splide__pagination li .splide__pagination__page {
  opacity: 1;
}

.services__wrapper-slide .splide__arrow {
  background-color: transparent;
}

.services__wrapper-slide .splide__arrow--next {
  right: -1em;
}

.services__wrapper-slide .splide__arrow--prev {
  left: -6em;
}

.services__slide__wrapper-image {
  max-width: 358px;
}

.services__slide__wrapper-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.services__slide__wrapper-text__wrapper-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.services__slide__wrapper-text-wrapper-image {
  max-width: 36px;
}

.services__slide__wrapper-text-wrapper-image.--numbers-text {
  font-size: clamp(2.4rem , 10vw, 3.2rem);
  font-weight: bold;
  color: #141414;
}
 
.services__slide__wrapper-text h3 {
  font-size: clamp(2.4rem , 10vw, 3.2rem);
  color: #141414;
}

.services__slide__wrapper-text__list {
  max-width: 310px;
  margin-bottom: 16px;
}

.services__slide__wrapper-text__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
  font-size: 1.4rem;
  line-height: clamp(1.6rem, 10vw, 2rem);
  color: #141414;
  text-align: left;
}

.services__slide__wrapper-text__list li span {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.services-list-separator {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
}

.services__slide__wrapper-text__list li img {
  max-width: 24px;
}

.services-slide-separator {
  position: absolute;
  width: 45%;
  height: 2px;
  margin-left: -40px;
  /* left: 0px; */
  background-color: #fff;
}

.services__slide__wrapper-text__list .services-slide-button {
  display: block;
  margin-top: 20px;
}

.services-slide-button {
  max-width: max-content;
  margin: 0 auto;
  padding: 2px 12px;
  font-family: 'Kanit', sans-serif;
  font-size: clamp(2rem, 3vw, 2rem);
  font-weight: 700;
  color: #141414;
  background-color: #fff; 
  border-radius: 16px;
  border: 1px solid #0084ff;
  transition: all .3s;
  overflow: hidden;
}

.services-slide-button:hover {
  color: #fff;
  background-color: #0084ff;
  border: 1px solid #fff
}

@media(max-width: 1048px) {
  .services__wrapper-slide {
    max-width: 400px;
    width: 80vw;
  }

  .services__wrapper-slide .splide{
    padding: 0px 0px;
  } 
  
  .services__slide__border {
    position: absolute;
    top: 50px;
    left: 0px;
    width: 100%;
    height: 95%;
    border: 2px solid #fff;
    border-radius: 64px;
  }

  .services__wrapper-slide .splide__pagination {
    top: 265px;
    bottom: auto;
    left: 0;
    right: 0;
    padding: 0 1em;
    position: absolute;
    z-index: 1;
  }  

  .services__wrapper-slide .splide__arrow--next {
    right: -4em;
  }
  
  .services__wrapper-slide .splide__arrow--prev {
    left: -4em;
  }
  
  .services__wrapper-slide .splide__slide {
    flex-direction: column;
  }

  .services__slide__wrapper-image {
    max-width: 240px;
  }

  .services__slide__wrapper-text__list li span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: initial;
    -webkit-box-orient: vertical;
  }

}

@media (max-width: 512px) {
  .services__wrapper-slide {
    max-width: 400px;
    width: 90vw;
  }

  /* .services__wrapper-slide__timeline-number {
    top: -40px;
    left: 0px;
    max-width: 100px;
  } */

  .services__slide__border {
    border-radius: 36px;
  }

  .services__wrapper-slide .splide__arrow {
    display: none
  }
}