.display-transation {
  transition: transform 0.6s ease;
}
.display-transation-1 {
  transition: transform 0.8s ease-in;
}
.display-iphone-14-pro {
  object-position: 0px 16px;
  animation: move-crop-zone-iphone 1s ease;
}
.from-right {
  opacity: 0;
  transform: translateX(200%);
}
.from-left {
  opacity: 0;
  transform: translateX(-200%);
}
.from-bottom {
  opacity: 0;
  transform: translateY(50%);
}
.from-bottom-top {
  opacity: 0;
  transform: translateY(50px);
}
.from-bottom-end {
  opacity: 0;
  transform: translateY(200%);
}
.from-top {
  opacity: 0;
  transform: translateY(-200%);
}
.from-bottom-left {
  opacity: 0;
  transform: translate(-50%, 200%);
}
.from-bottom-top.show {
  opacity: 1;
  transform: translateY(0);
}
.from-bottom-left.show {
  opacity: 1;
  transform: translate(0, 0);
}
.from-left.show {
  opacity: 1;
  transform: translateX(0);
}
.from-right.show {
  opacity: 1;
  transform: translateX(0);
}
.from-top.show {
  opacity: 1;
  transform: translateY(0);
}
.from-bottom.show {
  opacity: 1;
  transform: translateX(0);
}
.from-bottom-end.show {
  opacity: 1;
  transform: translateY(0);
}
.complete-bar {
  height: 5px;
  background-color: #0076ff;
  transition: transform;
  animation: processing-reverse 0.2s forwards;
}
.active .complete-bar {
  animation-name: processing;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
.active .process-title {
  font-weight: 700;
  color: #0076ff;
}
.step-img {
  animation: tran-opacity-reverse 1s forwards;
}
.active .step-img {
  animation: tran-opacity 0.8s forwards;
}
@media screen and (max-width: 1195px) {
  .process-title {
    display: none;
    animation: tran-opacity-reverse 1s forwards;
  }
  .step-img {
    display: none;
    animation: tran-opacity-reverse 1s forwards;
  }
  .active .process-title {
    display: block;
    animation: tran-opacity 1s forwards;
  }
  .active .step-img {
    display: block;
    animation: tran-opacity 1s forwards;
  }
  .item-content {
    display: none;
    animation: tran-opacity-reverse 1s forwards;
  }
  .active.item-content {
    display: block;
    animation: tran-opacity 1s forwards;
  }
}
.delay-animation{
  animation-delay: 1s;
}

@keyframes move-crop-zone-iphone {
  0% {
    object-position: 0px 640px;
  }
  90% {
    object-position: 0px 0px;
  }
  100% {
    object-position: 0px 16px;
  }
}
.fade-out {
  animation: tran-opacity-reverse 3s ease-in;
}
.fade-in {
  animation: tran-opacity 2s ease-in;
}
@keyframes tran-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tran-opacity-reverse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes processing {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes processing-reverse {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

.animation-flying {
  animation-name: flying;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes flying {
  0% {
    transform: translate(0, 0px);
  }
  65% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, 0px);
  }
}

/* block 2 */
.text-trigger h1 {
  color: #0a083a33;
}
.text-trigger.show h1 {
  color: #0076ff;
  font-weight: 700 !important;
}
.text-trigger h5 {
  animation: tran-height-reverse 0.6s forwards;
}
.text-trigger.show h5 {
  animation: tran-height 1s forwards;
}
@keyframes tran-height {
  0% {
    height: 0%;
    opacity: 0;
  }
  100% {
    height: 100%;
    opacity: 1;
  }
}

@keyframes tran-height-reverse {
  0% {
    height: 100%;
    opacity: 1;
  }
  100% {
    height: 0%;
    opacity: 0;
  }
}
.show.trigger-img {
  transition: transform 1s ease;
}
.social-01 {
  opacity: 0;
}
.social-01.show {
  opacity: 1;
}
.show.social-02 {
  opacity: 1;
  animation: social-02-ani 4s infinite;
}
.show.social-03 {
  opacity: 1;
  animation: social-03-ani 4s infinite;
}
.show.social-04 {
  opacity: 1;
  animation: social-04-ani 4s infinite;
}
.show.social-05 {
  opacity: 1;
  animation: social-05-ani 4s infinite;
}
.show.social-06 {
  opacity: 1;
  animation: social-06-ani 4s infinite;
}
.show.social-07 {
  opacity: 1;
  animation: social-06-ani 4s infinite;
}
.show.social-08 {
  opacity: 1;
  animation: social-06-ani 4s infinite;
}
.show.social-09 {
  opacity: 1;
  animation: social-09-ani 4s infinite;
}
.show.social-10 {
  opacity: 1;
  animation: social-10-ani 4s infinite;
}
.show.social-11 {
  opacity: 1;
  animation: social-10-ani 4s infinite;
}
.show.social-12 {
  opacity: 1;
  animation: social-09-ani 4s infinite;
}
@keyframes social-02-ani {
  0% {
    height: auto;
    width: 147px;
    transform: translate(50px,50px);
  }
  50% {
    height: auto;
    width: 247px;
    transform: translate(0,0);
  }
  100% {
    height: auto;
    width: 147px;
    transform: translate(50px,50px);
  }
}
@keyframes social-03-ani {
  0% {
    height: auto;
    width: 75px;
    transform: translate(-50px,50px);
  }
  50% {
    height: auto;
    width: 175px;
    transform: translate(0,0);
  }
  100% {
    height: auto;
    width: 75px;
    transform: translate(-50px,50px);
  }
}
@keyframes social-04-ani {
  0% {
    height: auto;
    width: 50px;
    transform: translate(-50px,-50px);
  }
  50% {
    height: auto;
    width: 150px;
    transform: translate(0,0);
  }
  100% {
    height: auto;
    width: 50px;
    transform: translate(-50px,-50px);
  }
}
@keyframes social-05-ani {
  0% {
    height: auto;
    width: 35px;
    transform: translate(25px,-25px);
  }
  50% {
    height: auto;
    width: 85px;
    transform: translate(0,0);
  }
  100% {
    transform: translate(25px,-25px);
    height: auto;
    width: 35px;
  }
}
@keyframes social-06-ani {
  0% {
    height: auto;
    width: 29px;
  }
  50% {
    height: auto;
    width: 69px;
  }
  100% {
    height: auto;
    width: 29px;
  }
}
@keyframes social-09-ani {
  0% {
    height: auto;
    width: 31px;
  }
  50% {
    height: auto;
    width: 51px;
    transform: translate(0,0);
  }
  100% {
    height: auto;
    width: 31px;
  }
}
@keyframes social-10-ani {
  0% {
    height: auto;
    width: 30px;
  }
  50% {
    height: auto;
    width: 70px;
    transform: translate(0,0);
  }
  100% {
    height: auto;
    width: 30px;
  }
}
.move-crop-zone-left {
  opacity: 0;
  object-position: right;
}
.show .move-crop-zone-left {
  animation: move-crop-zone-left 1s forwards;
}
.apple-watch-block{
  overflow: hidden;
}
.move-crop-zone-top {
  opacity: 0;
  object-position: 0px 640px;
}
.show .move-crop-zone-top {
  animation: move-crop-zone-top 1s forwards;
}
.move-crop-zone-watch {
  object-position: 0px 640px;
  /* transform: rotate(45deg); */
}
.show .move-crop-zone-watch {
  animation: move-crop-zone-watch 1s forwards;
}
.move-ava-2 {
  transform: translateX(-78px);
}
.move-ava-3 {
  transform: translateX(-156px);
}
.move-ava-4 {
  transform: translateX(-234px);
}
.show .move-ava-1 {
  animation: move-ava 1s forwards;
}
.show .move-ava-2 {
  animation: move-ava-2 1s forwards;
}
.show .move-ava-3 {
  animation: move-ava-3 1s forwards;
}
.show .move-ava-4 {
  animation: move-ava-4 1s forwards;
}
@keyframes move-ava-2 {
  0% {
    transform: translateX(-78px);
  }
  80% {
    transform: translateX(12px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes move-ava-3 {
  0% {
    transform: translateX(-156px);
  }
  80% {
    transform: translateX(12px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes move-ava-4 {
  0% {
    transform: translateX(-234px);
  }
  80% {
    transform: translateX(12px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes move-crop-zone-top {
  0% {
    opacity: 0;
    object-position: 0px 640px;
  }
  90% {
    opacity: 1;
    object-position: 0px 0px;
  }
  100% {
    opacity: 1;
    object-position: 0px 32px;
  }
}

@keyframes move-crop-zone-left {
  0% {
    opacity: 0;
    object-position: right;
  }
  90% {
    opacity: 1;
    object-position: 80px;
  }
  100% {
    opacity: 1;
    object-position: -100px;
  }
}

@keyframes move-crop-zone-watch {
  0% {
    object-position: 0px 960px;
    transform: rotate(45deg);
  }
  90% {
    object-position: 0px 0px;
    transform: rotate(-2deg);
  }
  100% {
    object-position: 0px 16px;
    transform: rotate(0deg);
  }
}
.move-from-bottom {
 animation: move-from-bottom 1s;
}
@keyframes move-from-bottom {
  0% {
    opacity: 0;
    transform: translateY(200%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}