/* split text animation */
.word-wrap {
  overflow: hidden;
  display: inline-block;
}

/* section slider */


.container-slider {
    width: 100%;
    height: 100%;
    background-color: var(--bg);
}

.badge-tag.centered {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-slider {
    width: 100vw;
    height: 100vh;
}

#services h2 {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}

.card-slider.scroll-slider {
    position: relative;
}

.img-slider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 700px;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-end {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}


/* 3D image slider */
/* area wrapper — tinggi scroll space */
#work {
  position: relative;
  z-index: -1;
  overflow: hidden;
}

.area-slider-3D-img {
  /* height: 650vh; */ /* default jika banyak image nya aktivin yang ini */
  height: 450vh;
  position: relative;
}

.slider-3D-img {
  position: fixed;
  top: 75%;
  left: 30%;
  transform: translate3d(-50%, -50%, 0) rotateX(0deg) rotateY(-25deg) rotateZ(-120deg);
  transform-style: preserve-3d;
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  user-select: none;
  z-index: 9999;
}

.card-3d-img-slider {
  position: relative;
  width: 400px;
  height: 400px;
  transform: rotateX(20deg) rotateY(-10deg) rotateZ(130deg);
  border-radius: 12px;
  overflow: hidden;
  margin: -300px 0;
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  cursor: pointer;
  background-color: rgb(26, 26, 26);
  z-index: 9999;

}

.card-3d-img-slider:hover img {
  opacity: 1;
}

.card-3d-img-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.4;
}

@media (max-width: 768px) {
  .slider-3D-img {
  top: 50%;
  left: 50%;
  }

  .head-slider {
  width: 100vw;
  text-wrap: wrap;
}

.badge-tag.centered{
  text-wrap: nowrap;
}

    .img-slider {
        width: 90vw;
        height: 60vh;
    }
    
    .img-slider img {
        width: 100%;
        object-fit: contain;
    }
}