/* NivAk Technologies — Digital Showcase Studio */

.apps-v3-hero {
  overflow: hidden;
}

.apps-v3-universe {
  position: relative;
  isolation: isolate;
  height: 390px;
  min-width: 0;
  overflow: hidden;
  background: radial-gradient(
    ellipse at center,
    rgba(36,112,211,.20),
    transparent 68%
  );
}

.apps-v3-universe__orbit {
  display: none !important;
}

.apps-v3-universe__phone {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  z-index: 3;
  transform: translate(-50%,-50%) rotate(-7deg);
  animation: showcasePhone 6s ease-in-out infinite !important;
}

.apps-v3-universe__floating,
.apps-v3-universe__floating--one,
.apps-v3-universe__floating--two,
.apps-v3-universe__floating--three,
.apps-v3-universe__floating--four {
  position: absolute !important;
  z-index: 4;
  width: 135px;
  max-width: 135px;
  min-height: 54px;
  margin: 0 !important;
  offset-path: none !important;
  offset-distance: auto !important;
  offset-rotate: 0deg !important;
  transform: translate3d(0,0,0);
  animation: showcaseCard 5s ease-in-out infinite alternate !important;
}

.apps-v3-universe__floating--one {
  left: 2% !important;
  top: 12% !important;
  right: auto !important;
  bottom: auto !important;
  animation-delay: -1s !important;
}

.apps-v3-universe__floating--two {
  right: 2% !important;
  top: 12% !important;
  left: auto !important;
  bottom: auto !important;
  animation-delay: -3s !important;
}

.apps-v3-universe__floating--three {
  left: 2% !important;
  bottom: 12% !important;
  right: auto !important;
  top: auto !important;
  animation-delay: -2s !important;
}

.apps-v3-universe__floating--four {
  right: 2% !important;
  bottom: 12% !important;
  left: auto !important;
  top: auto !important;
  animation-delay: -4s !important;
}

@keyframes showcasePhone {
  0%,100% {
    transform: translate(-50%,-50%) rotate(-7deg) translateY(0);
  }
  50% {
    transform: translate(-50%,-50%) rotate(-4deg) translateY(-10px);
  }
}

@keyframes showcaseCard {
  0% {
    transform: translate3d(0,5px,0);
    opacity: .88;
  }
  100% {
    transform: translate3d(0,-13px,0);
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .apps-v3-universe {
    height: 340px;
  }

  .apps-v3-universe__floating,
  .apps-v3-universe__floating--one,
  .apps-v3-universe__floating--two,
  .apps-v3-universe__floating--three,
  .apps-v3-universe__floating--four {
    width: 102px;
    max-width: 102px;
    font-size: 10px;
    padding: 7px;
  }

  .apps-v3-universe__floating img {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apps-v3-universe__phone {
    animation: none !important;
  }

  .apps-v3-universe__floating {
    animation: none !important;
    opacity: 1;
  }
}