.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__services{justify-content:center}

.service-cats{display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;align-items:center}

.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:.8rem}
.service-cat__entitle{font-size:var(--fs-14);line-height:1.3;font-family:var(--ff-en);margin-top:.4rem;color:var(--c-primary-350)}


/* ===========================
   Desktop: hover badges (arrow + websima)
   =========================== */
@media (min-width:50em){

  .section--services .heading--center{margin-bottom:6.9rem}

  /* فلش و badge فقط در دسکتاپ */
  .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(../img/bg/badge-arrow-light.svg);
    right:4.4%;
    width:16%;
    height:25%;
    top:50%;
    background-position:right;
    transform:translateY(-50%) rotateY(70deg);
    transform-origin:right;
    transition:1s 0.2s var(--ease5);
  }

  /* badge نوشته websima سمت چپ */
  .service-cat__img::before{
    background-image:url(../img/bg/badge-wbs-light.png);
    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-cat-card:hover .service-cat__img::before{
    transform:rotateY(0deg);
  }

  .service-cat-card:hover .service-cat__img::after{
    transform:translateY(-50%) rotateY(0deg);
  }
}


/* ===========================
   Mobile: show cards (image/video) + only titles
   =========================== */
@media (max-width:49.999em){

  .service-cats{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
  }

  .service-cat-card{
    width:100%;
    max-width:31rem;
    margin-bottom:0;
    padding:0;
  }

  .service-cat-top,
  .service-cat__img{
    display:block !important;
  }

  .service-cat__shadow{
    display:block !important;
    opacity:1;
  }

  .service-cat__img video{
    opacity:0;
  }

  .service-cat__desc{
    display:none !important;
  }

  .service-cat-bottom{
    padding:14px 10px 0 !important;
    text-align:center;
  }

  .service-cat__title{
    margin:0 0 6px !important;
    font-size:18px;
    line-height:1.6;
  }

  .service-cat__entitle{
    margin:0 !important;
    font-size:12px;
    line-height:1.6;
    opacity:.8;
  }
}


/* ===========================
   Desktop fix: force 3 cards in a row
   =========================== */
@media (min-width:768px){

  .section--services .service-cats{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:0 !important;
  }

  .section--services .service-cat-card{
    flex:0 0 26.5% !important;
    max-width:26.5% !important;
    margin-bottom:0 !important;
    padding:0 2rem !important;
  }
}