.services {
  background: #050505;

  color: white;
}

.services-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 25px;
}

.service-box {
  position: relative;

  height: 550px;

  overflow: hidden;

  border-radius: 20px;

  cursor: pointer;
}

.service-box img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 1s;
}



.service-overlay {
  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 40px;

  transition: 0.5s;
}

.service-overlay h3 {
  font-family: "Bebas Neue";

  font-size: 3rem;

  letter-spacing: 3px;

  color: white;
}

.service-overlay p {
  color: #ddd;

  margin-top: 10px;
}



.service-box:hover img {
  transform: scale(1.15);
}

.service-box:hover .service-overlay {
  background: rgba(0, 0, 0, 0.75);
}

.service-box::before {
  content: "";

  position: absolute;

  bottom: 0;
  left: 0;

  width: 0;

  height: 4px;

  background: #c00000;

  z-index: 5;

  transition: 0.5s;
}

.service-box:hover::before {
  width: 100%;
}


.service-flip-card {
  position: relative;
  perspective: 1600px;
  -webkit-perspective: 1600px;
  transform-style: preserve-3d;
}

.service-flip-card__inner {
  position: relative;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  transition:
    transform 0.75s
    cubic-bezier(0.2, 0.75, 0.25, 1);

  will-change: transform;
}

.service-flip-card__face {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  -webkit-font-smoothing: antialiased;
}

.service-flip-card__front {
  z-index: 2;

  transform:
    rotateY(0deg)
    translateZ(1px);

  -webkit-transform:
    rotateY(0deg)
    translateZ(1px);
}

.service-flip-card__back {
  z-index: 1;

  transform:
    rotateY(180deg)
    translateZ(1px);

  -webkit-transform:
    rotateY(180deg)
    translateZ(1px);
}

.service-flip-card.is-flipped
.service-flip-card__inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}




@media (max-width: 650px) {

  .service-flip-card {
    width: 100%;

    height: 580px;

    perspective: 1400px;
    -webkit-perspective: 1400px;

    overflow: visible;
  }

  .service-flip-card__inner {
    width: 100%;
    height: 100%;

    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
  }

  .service-flip-card__face {
    position: absolute !important;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  .service-flip-card__front {
    transform:
      rotateY(0deg)
      translateZ(2px) !important;

    -webkit-transform:
      rotateY(0deg)
      translateZ(2px) !important;
  }

  .service-flip-card__back {
    transform:
      rotateY(180deg)
      translateZ(2px) !important;

    -webkit-transform:
      rotateY(180deg)
      translateZ(2px) !important;
  }

  .service-flip-card.is-flipped
  .service-flip-card__inner {
    transform:
      rotateY(180deg) !important;

    -webkit-transform:
      rotateY(180deg) !important;
  }


  

  .service-flip-card.is-flipped
  .service-flip-card__front {
    pointer-events: none;
  }


  

  .service-flip-card__back {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 32px 26px;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(192, 0, 0, 0.18),
        transparent 30%
      ),
      linear-gradient(
        145deg,
        #171416,
        #0c0c0e 65%
      );
  }

  .service-flip-card__back-number {
    top: 22px;
    right: 22px;

    font-size: 88px;

    opacity: 0.7;
  }

  .service-flip-card__back-label {
    font-size: 9px;
    letter-spacing: 2.4px;
  }

  .service-flip-card__back h3 {
    margin: 12px 0 15px;

    font-size: clamp(
      48px,
      15vw,
      62px
    );

    line-height: 0.92;
  }

  .service-flip-card__line {
    margin-bottom: 20px;
  }

  .service-flip-card__back > p {
    font-size: 12px;

    line-height: 1.75;
  }

  .service-flip-card__back ul {
    margin: 21px 0 15px;

    gap: 10px;
  }

  .service-flip-card__back li {
    font-size: 11px;
  }

  .service-flip-card__return {
    margin-top: 18px;

    color:
      rgba(
        255,
        255,
        255,
        0.55
      );
  }

}




@media (max-width: 390px) {

  .service-flip-card {
    height: 550px;
  }

  .service-flip-card__back {
    padding:
      28px
      22px;
  }

  .service-flip-card__back h3 {
    font-size: 50px;
  }

  .service-flip-card__back > p {
    font-size: 11px;
  }

  .service-flip-card__back li {
    font-size: 10px;
  }

}