/* animation */
/* service cards */


/* hero section animation */
.focus-in-contract {
    -webkit-animation: focus-in-contract 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-contract 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes focus-in-contract {
    0% {
        letter-spacing: 1em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes focus-in-contract {
    0% {
        letter-spacing: 1em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

/* hero-section button animation */
.bounce-top {
    -webkit-animation: bounce-top 3s both;
    animation: bounce-top 3s both;
}

@-webkit-keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }

    24% {
        opacity: 1;
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    25%,
    55%,
    75%,
    87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

@keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }

    24% {
        opacity: 1;
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    25%,
    55%,
    75%,
    87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

/* about us section animation */
.tracking-in-expand {
    -webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}


/* boxes section animation */
.text-focus-in {
    -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

/* service section animation */
.flip-in-hor-bottom {
	-webkit-animation: flip-in-hor-bottom 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: flip-in-hor-bottom 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


 @-webkit-keyframes flip-in-hor-bottom {
        0% {
          -webkit-transform: rotateX(80deg);
                  transform: rotateX(80deg);
          opacity: 0;
        }
        100% {
          -webkit-transform: rotateX(0);
                  transform: rotateX(0);
          opacity: 1;
        }
      }
      @keyframes flip-in-hor-bottom {
        0% {
          -webkit-transform: rotateX(80deg);
                  transform: rotateX(80deg);
          opacity: 0;
        }
        100% {
          -webkit-transform: rotateX(0);
                  transform: rotateX(0);
          opacity: 1;
        }
      }
      
      

      /* second third serive card animation */
      .slide-in-elliptic-top-fwd {
	-webkit-animation: slide-in-elliptic-top-fwd 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-elliptic-top-fwd 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
 @-webkit-keyframes slide-in-elliptic-top-fwd {
        0% {
          -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
                  transform: translateY(-600px) rotateX(-30deg) scale(0);
          -webkit-transform-origin: 50% 100%;
                  transform-origin: 50% 100%;
          opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0) rotateX(0) scale(1);
                  transform: translateY(0) rotateX(0) scale(1);
          -webkit-transform-origin: 50% 1400px;
                  transform-origin: 50% 1400px;
          opacity: 1;
        }
      }
      @keyframes slide-in-elliptic-top-fwd {
        0% {
          -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
                  transform: translateY(-600px) rotateX(-30deg) scale(0);
          -webkit-transform-origin: 50% 100%;
                  transform-origin: 50% 100%;
          opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0) rotateX(0) scale(1);
                  transform: translateY(0) rotateX(0) scale(1);
          -webkit-transform-origin: 50% 1400px;
                  transform-origin: 50% 1400px;
          opacity: 1;
        }
      }
      
      /* engagement section animation */
      .scale-up-bottom {
	-webkit-animation: scale-up-bottom 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-bottom 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

 @-webkit-keyframes scale-up-bottom {
        0% {
          -webkit-transform: scale(0.5);
                  transform: scale(0.5);
          -webkit-transform-origin: 50% 100%;
                  transform-origin: 50% 100%;
        }
        100% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-transform-origin: 50% 100%;
                  transform-origin: 50% 100%;
        }
      }
      @keyframes scale-up-bottom {
        0% {
          -webkit-transform: scale(0.5);
                  transform: scale(0.5);
          -webkit-transform-origin: 50% 100%;
                  transform-origin: 50% 100%;
        }
        100% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-transform-origin: 50% 100%;
                  transform-origin: 50% 100%;
        }
      }
      
      /* about page animation */
      .tracking-in-expand-fwd-bottom {
	-webkit-animation: tracking-in-expand-fwd-bottom 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand-fwd-bottom 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
 @-webkit-keyframes tracking-in-expand-fwd-bottom {
        0% {
          letter-spacing: -0.5em;
          -webkit-transform: translateZ(-700px) translateY(500px);
                  transform: translateZ(-700px) translateY(500px);
          opacity: 0;
        }
        40% {
          opacity: 0.6;
        }
        100% {
          -webkit-transform: translateZ(0) translateY(0);
                  transform: translateZ(0) translateY(0);
          opacity: 1;
        }
      }
      @keyframes tracking-in-expand-fwd-bottom {
        0% {
          letter-spacing: -0.5em;
          -webkit-transform: translateZ(-700px) translateY(500px);
                  transform: translateZ(-700px) translateY(500px);
          opacity: 0;
        }
        40% {
          opacity: 0.6;
        }
        100% {
          -webkit-transform: translateZ(0) translateY(0);
                  transform: translateZ(0) translateY(0);
          opacity: 1;
        }
      }