/**************************/
/*services*/
/**************************/
/* head */

.ws-circle-shape {
  width: 3.4rem;
  height: 3.4rem;
  border: 2px solid var(--c-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}
.ws-circle-shape .dot {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: var(--c-primary);
}
.services__typography {
  max-width: 11rem;
}
/* btns */
.btns__services {
  justify-content: center;
}
/* layout */
.service-cats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
/* card */
.service-cat__img {
  -webkit-clip-path: url(#serviceCardCurve);
  clip-path: url(#serviceCardCurve);
  position: relative;
  display: block;
  transform-style: preserve-3d;
  perspective: 18vw;
  background-color: var(--c-neutral-150);
}

.service-cat-card {
  max-width: 31rem;
  flex: none;
  margin-bottom: 4rem;
}
.service-cat-card:last-child {
  margin-bottom: 0;
}
.service-cat__img video,
.service-cat__img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
  object-fit: cover;
}
.service-cat__img video {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
}
.service-cat__img .poster-img {
  position: relative;
  z-index: 1;
}
.service-cat-top {
  position: relative;
  isolation: isolate;
}
.service-cat__shadow {
  position: absolute;
  background-image: url(../../img/bg/gradient-card-2.svg);
  bottom: -6rem;
  width: 100%;
  height: 40%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: scaleX(2);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: 1s var(--ease5);
}
.service-cat-card:hover .service-cat__shadow {
  opacity: 1;
}
.service-cat-top:before {
  content: "";
  position: absolute;
  width: 90%;
  height: 50%;
  background: var(--c-neutral-350);
  -webkit-filter: blur(26px);
  filter: blur(15px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.service-cat-bottom {
  padding: 2rem 2rem 0;
}
.mobile .service-cat-bottom {
  text-align: center;
}
.service-cat__title {
  font-size: var(--fs-24);
  line-height: 1.5;
}
.service-cat__desc {
  text-align: justify;
  line-height: 2;
  font-size: var(--fs-16);
  margin-top: 0.8rem;
}
.service-cat__entitle {
  font-size: var(--fs-14);
  line-height: 1.3;
  font-family: var(--ff-en);
  margin-top: 0.4rem;
  color: var(--c-primary-350);
}
/**************************/
/* BELOW 360px */
/**************************/
@media (min-width: 22.5em) {
}
/**************************/
/* BELOW 576px */
/**************************/
@media (min-width: 36em) {
}

/**************************/
/* ABOVE 800px */
/**************************/

@media (min-width: 50em) {
  .section--services .heading--center {
    margin-bottom: 6.9rem;
  }
  .service-cat-card {
    max-width: 26.5%;
    padding: 0 2rem;
    max-width: 26.5%;
  }
  .service-cat-card {
    margin-bottom: 0;
  }

  .service-cat-card:hover .service-cat__img::before {
    transform: translateX(0%);
  }
  .service-cat-card:hover .service-cat__img::after {
    transform: rotateY(0deg) translateY(-50%);
  }
  .service-cat__img::after,
  .service-cat__img::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 4;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .service-cat__img::after {
    background-image: url(../../../assets/img/bg/badge-arrow-light.svg);
    right: 4.4%;
    width: 16%;
    height: 25%;
    top: 50%;
    background-position: right;
    transform: translateY(-50%);
    transform: translateY(-50%) rotateY(70deg);
    transform-origin: right;
    transition: 1s 0.2s var(--ease5);
  }
  .service-cat__img::before {
    background-image: url(../../../assets/img/bg/badge-wbs-light.svg);
    left: 4.4%;
    width: 14%;
    height: 46%;
    top: 29%;
    background-position: left;
    transform-origin: left;
    transform: rotateY(120deg);
    transition: 1s 0.15s var(--ease5);
  }
  .service-cats {
    flex-direction: row;
    align-items: unset;
  }
}