/* Efeito Mouno: hover-rotate3d-direction (adaptado ao loop de servicos) */
#loop-servicos .each-service {
  position: relative;
}

#loop-servicos .each-service.hover-rotate3d-direction {
  perspective: 400px;
  overflow: hidden;
  isolation: isolate;
}

#loop-servicos .each-service.hover-rotate3d-direction > * {
  position: relative;
  z-index: 1;
  transition: color 0.28s ease;
}

#loop-servicos .each-service.hover-rotate3d-direction > .direction-item {
  z-index: 0;
}

#loop-servicos .each-service.hover-rotate3d-direction .direction-item {
  transform: rotate3d(1, 0, 0, 90deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s linear;
}

#loop-servicos .each-service.hover-rotate3d-direction:hover .direction-item {
  opacity: 1;
}

#loop-servicos .each-service .direction-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--if-services-hover-bg, #FF7019);
}

#loop-servicos .each-service.hover-rotate3d-direction:hover {
  color: #ffffff !important;
}

#loop-servicos .each-service.hover-rotate3d-direction:hover * {
  color: #ffffff !important;
}

#loop-servicos .each-service.hover-rotate3d-direction svg,
#loop-servicos .each-service.hover-rotate3d-direction svg * {
  transition: fill 0.28s ease, stroke 0.28s ease, color 0.28s ease;
}

#loop-servicos .each-service.hover-rotate3d-direction:hover svg,
#loop-servicos .each-service.hover-rotate3d-direction:hover svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

@keyframes if-rotate3d-in-top {
  from {
    transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes if-rotate3d-in-right {
  from {
    transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes if-rotate3d-in-bottom {
  from {
    transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes if-rotate3d-in-left {
  from {
    transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes if-rotate3d-out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 180deg);
  }
}

@keyframes if-rotate3d-out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 180deg);
  }
}

@keyframes if-rotate3d-out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 180deg);
  }
}

@keyframes if-rotate3d-out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 180deg);
  }
}

#loop-servicos .each-service.rotate3d-in-top .direction-item {
  transform-origin: 50% 0%;
  animation: if-rotate3d-in-top 0.3s linear 0ms 1 forwards;
}

#loop-servicos .each-service.rotate3d-in-right .direction-item {
  transform-origin: 100% 0%;
  animation: if-rotate3d-in-right 0.3s linear 0ms 1 forwards;
}

#loop-servicos .each-service.rotate3d-in-bottom .direction-item {
  transform-origin: 50% 100%;
  animation: if-rotate3d-in-bottom 0.3s linear 0ms 1 forwards;
}

#loop-servicos .each-service.rotate3d-in-left .direction-item {
  transform-origin: 0% 0%;
  animation: if-rotate3d-in-left 0.3s linear 0ms 1 forwards;
}

#loop-servicos .each-service.rotate3d-out-top .direction-item {
  transform-origin: 50% 0%;
  animation: if-rotate3d-out-top 0.3s linear 0ms 1 forwards;
}

#loop-servicos .each-service.rotate3d-out-right .direction-item {
  transform-origin: 100% 50%;
  animation: if-rotate3d-out-right 0.3s linear 0ms 1 forwards;
}

#loop-servicos .each-service.rotate3d-out-bottom .direction-item {
  transform-origin: 50% 100%;
  animation: if-rotate3d-out-bottom 0.3s linear 0ms 1 forwards;
}

#loop-servicos .each-service.rotate3d-out-left .direction-item {
  transform-origin: 0% 0%;
  animation: if-rotate3d-out-left 0.3s linear 0ms 1 forwards;
}