@-webkit-keyframes rotated {
  0%   {-webkit-transform: rotate(0);transform: rotate(0);}
  50% {-webkit-transform: rotate(175deg);transform: rotate(175deg);}
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes rotated {
  0%   {-webkit-transform: rotate(0);transform: rotate(0);}
  50% {-webkit-transform: rotate(175deg);transform: rotate(175deg);}
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

@-webkit-keyframes testimonial-zoom-in-out {
  0%   {-webkit-transform: scale(0.3);transform: scale(0.3);}
  40%  {-webkit-transform: scale(0.6);transform: scale(0.6);}
  100% {-webkit-transform: scale(0.3);transform: scale(0.3);}
}
@keyframes testimonial-zoom-in-out {
  0%   {-webkit-transform: scale(0.3);transform: scale(0.3);}
  40%  {-webkit-transform: scale(0.6);transform: scale(0.6);}
  100% {-webkit-transform: scale(0.3);transform: scale(0.3);}
}

@keyframes cs-zoom-in-out {
  0%   {-webkit-transform: scale(0.3);transform: scale(0.3);}
  40%  {-webkit-transform: scale(1);transform: scale(1);}
  100% {-webkit-transform: scale(0.3);transform: scale(0.3);}
}

@-webkit-keyframes down-up-one {
    0% {-webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px)}
    50% {-webkit-transform: rotateX(0deg) translateY(18px);transform: rotateX(0deg) translateY(18px)}
    100% {-webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px)}

}

@-webkit-keyframes down-up-two {
    0% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
    50% {-webkit-transform: translate(0px, 18px);transform: translate(0px, 18px);}
    100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}

}

@keyframes down-up-two {
    0% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
    50% {-webkit-transform: translate(0px, 18px);transform: translate(0px, 18px);}
    100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}

}



@-webkit-keyframes rotate3d {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
@keyframes rotate3d {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}







@-webkit-keyframes animationRoundTopBottom{
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
            transform:  translate(0px,0px)  rotate(0deg) ;
  }
  25% {
    -webkit-transform:  translate(0px,150px)  rotate(90deg) ;
            transform:  translate(0px,150px)  rotate(90deg) ;
  }
  50% {
    -webkit-transform:  translate(150px,150px)  rotate(180deg) ;
            transform:  translate(150px,150px)  rotate(180deg) ;
  }
  75% {
    -webkit-transform:  translate(150px,0px)  rotate(270deg) ;
            transform:  translate(150px,0px)  rotate(270deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(360deg) ;
            transform:  translate(0px,0px)  rotate(360deg) ;
  }
}







@keyframes animationRoundTopBottom{
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
            transform:  translate(0px,0px)  rotate(0deg) ;
  }
  25% {
    -webkit-transform:  translate(0px,150px)  rotate(90deg) ;
            transform:  translate(0px,150px)  rotate(90deg) ;
  }
  50% {
    -webkit-transform:  translate(150px,150px)  rotate(180deg) ;
            transform:  translate(150px,150px)  rotate(180deg) ;
  }
  75% {
    -webkit-transform:  translate(150px,0px)  rotate(270deg) ;
            transform:  translate(150px,0px)  rotate(270deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(360deg) ;
            transform:  translate(0px,0px)  rotate(360deg) ;
  }
}
@-webkit-keyframes animationRoundTopBottomTwo{
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
            transform:  translate(0px,0px)  rotate(0deg) ;
  }
  25% {
    -webkit-transform:  translate(150px,0px)  rotate(90deg) ;
            transform:  translate(150px,0px)  rotate(90deg) ;
  }
  50% {
    -webkit-transform:  translate(150px,150px)  rotate(180deg) ;
            transform:  translate(150px,150px)  rotate(180deg) ;
  }
  75% {
    -webkit-transform:  translate(0px,150px)  rotate(270deg) ;
            transform:  translate(0px,150px)  rotate(270deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(360deg) ;
            transform:  translate(0px,0px)  rotate(360deg) ;
  }
}
@keyframes animationRoundTopBottomTwo{
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
            transform:  translate(0px,0px)  rotate(0deg) ;
  }
  25% {
    -webkit-transform:  translate(150px,0px)  rotate(90deg) ;
            transform:  translate(150px,0px)  rotate(90deg) ;
  }
  50% {
    -webkit-transform:  translate(150px,150px)  rotate(180deg) ;
            transform:  translate(150px,150px)  rotate(180deg) ;
  }
  75% {
    -webkit-transform:  translate(0px,150px)  rotate(270deg) ;
            transform:  translate(0px,150px)  rotate(270deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(360deg) ;
            transform:  translate(0px,0px)  rotate(360deg) ;
  }
}



@keyframes group-border-infinite{
  100%{
    transform: translateY(-400px);
  }
}


/* =====animate.min.css overright ====*/
.customFadeInUp {
  -webkit-animation-name: customFadeInUp;
  animation-name: customFadeInUp;
}
@-webkit-keyframes customFadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes customFadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.customFadeInLeft {
  -webkit-animation-name: customFadeInLeft;
  animation-name: customFadeInLeft;
}
@-webkit-keyframes customFadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes customFadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.customFadeInRight {
  -webkit-animation-name: customFadeInRight;
  animation-name: customFadeInRight;
}
@-webkit-keyframes customFadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes customFadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes shapeAnimationOne {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
            transform:  translate(0px,0px)  rotate(0deg) ;
  }
  25% {
    -webkit-transform:  translate(0px,150px)  rotate(90deg) ;
            transform:  translate(0px,150px)  rotate(90deg) ;
  }
  50% {
    -webkit-transform:  translate(150px,150px)  rotate(180deg) ;
            transform:  translate(150px,150px)  rotate(180deg) ;
  }
  75% {
    -webkit-transform:  translate(150px,0px)  rotate(270deg) ;
            transform:  translate(150px,0px)  rotate(270deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(360deg) ;
            transform:  translate(0px,0px)  rotate(360deg) ;
  }
}
@keyframes shapeAnimationTwo {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
            transform:  translate(0px,0px)  rotate(0deg) ;
  }
  25% {
    -webkit-transform:  translate(-150px,-0px)  rotate(270deg) ;
            transform:  translate(-150px,-0px)  rotate(270deg) ;
  }
  50% {
    -webkit-transform:  translate(-150px,-150px)  rotate(180deg) ;
            transform:  translate(-150px,-150px)  rotate(180deg) ;
  }
  75% {
    -webkit-transform:  translate(-0px,-150px)  rotate(90deg) ;
            transform:  translate(-0px,-150px)  rotate(90deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(360deg) ;
            transform:  translate(0px,0px)  rotate(360deg) ;
  }
}
@keyframes shapeAnimationThree {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
            transform:  translate(0px,0px)  rotate(0deg) ;
  }
  25% {
    -webkit-transform:  translate(50px,150px)  rotate(90deg) ;
            transform:  translate(50px,150px)  rotate(90deg) ;
  }
  50% {
    -webkit-transform:  translate(150px,150px)  rotate(180deg) ;
            transform:  translate(150px,150px)  rotate(180deg) ;
  }
  75% {
    -webkit-transform:  translate(150px,50px)  rotate(270deg) ;
            transform:  translate(150px,50px)  rotate(270deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(360deg) ;
            transform:  translate(0px,0px)  rotate(360deg) ;
  }
}
@keyframes shapeAnimationFour {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
            transform:  translate(0px,0px)  rotate(0deg) ;
  }
  25% {
    -webkit-transform:  translate(-150px -50px)  rotate(90deg) ;
            transform:  translate(-150px -50px)  rotate(90deg) ;
  }
  50% {
    -webkit-transform:  translate(-150px,-150px)  rotate(180deg) ;
            transform:  translate(-150px,-150px)  rotate(180deg) ;
  }
  75% {
    -webkit-transform:  translate(-50px,-150px)  rotate(270deg) ;
            transform:  translate(-50px,-150px)  rotate(270deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(360deg) ;
            transform:  translate(0px,0px)  rotate(360deg) ;
  }
}

@keyframes shapeAnimationFive {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
            transform:  translate(0px,0px)  rotate(0deg) ;
  }
  25% {
    -webkit-transform:  translate(-100px -100px)  rotate(90deg) ;
            transform:  translate(-100px -100px)  rotate(90deg) ;
  }
  50% {
    -webkit-transform:  translate(100px, 50px)  rotate(180deg) ;
            transform:  translate(100px, 50px)  rotate(180deg) ;
  }
  75% {
    -webkit-transform:  translate(-100px,150px)  rotate(270deg) ;
            transform:  translate(-100px,150px)  rotate(270deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(360deg) ;
            transform:  translate(0px,0px)  rotate(360deg) ;
  }
}


@keyframes animPulse {
    0%, 40%, 60%, 100%{
        transform: translate(0)
    }
    30% {
        transform: translate(20px,40px);
    }
    50% {
        transform: translate(40px,80px);
    }
    80% {
        transform: translate(80px,100px);
    }
}

@keyframes landingBubble {
    0%, 40%, 60%, 100%{
        transform: translate(0)
    }
    30% {
        transform: translate(10px,-40px);
    }
    50% {
        transform: translate(40px,-80px);
    }
    80% {
        transform: translate(80px,-100px);
    }

}



.delay-0-1s {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.delay-0-2s {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.delay-0-3s {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.delay-0-4s {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.delay-0-5s {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.delay-0-6s {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.delay-0-7s {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.delay-0-8s {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.delay-0-9s {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.delay-1s {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.delay-1-2s {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.delay-1-3s {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.delay-1-4s {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.delay-1-5s {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.delay-1-6s {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.delay-1-7s {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}


/*** 
====================================================================
       start shape animation
====================================================================
 ***/


/* big-shape */
.big-shape {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 30%;
  animation: shapeAnimationOne 20s infinite linear;
  animation-delay: 0s
}
.big-shape.shape1 {
  left: 50%;
  top: 30%;
  animation: shapeAnimationOne 20s infinite linear;
}
.big-shape.shape2 {
  left: 90%;
  top: 55%;
  -webkit-animation: shapeAnimationTwo 20s infinite linear;
          animation: shapeAnimationTwo 20s infinite linear;
    animation-delay: 1s;
}
.big-shape.shape3 {
  left: 90%;
  top: 75%;
  -webkit-animation: shapeAnimationThree 20s infinite linear;
          animation: shapeAnimationThree 20s infinite linear;
    animation-delay: 0.5s;
}
.big-shape.shape4 {
  left: 65%;
  top: 65%;
  -webkit-animation: shapeAnimationFour 20s infinite linear;
          animation: shapeAnimationFour 20s infinite linear;
}
.big-shape.shape5 {
  left: 75%;
  top: 75%;
  -webkit-animation: shapeAnimationFive 20s infinite linear;
          animation: shapeAnimationFive 20s infinite linear;
}
.big-shape.shape6 {
  left: 88%;
  top: 35%;
  -webkit-animation: shapeAnimationFive 20s infinite linear;
          animation: shapeAnimationFive 20s infinite linear;
}
.big-shape.shape7 {
  left: 80%;
  top: 50%;
  -webkit-animation: shapeAnimationThree 20s infinite linear;
          animation: shapeAnimationThree 20s infinite linear;
    animation-delay: 0.5s;
}
.big-shape.shape8 {
  left: 40%;
  top: 80%;
  -webkit-animation: shapeAnimationFive 20s infinite linear;
          animation: shapeAnimationFive 20s infinite linear;
}
.big-shape.shape9 {
  left: 8%;
  top: 50%;
  -webkit-animation: shapeAnimationFive 20s infinite linear;
          animation: shapeAnimationFive 20s infinite linear;
}

/* .service-section .shape */
.big-shape.shape10 {
  left: 10%;
  top: 5%;
  -webkit-animation: shapeAnimationThree 20s infinite linear;
          animation: shapeAnimationThree 20s infinite linear;
    animation-delay: 0.5s;
}

.big-shape.shape11 {
  left: 10%;
  top: 100%;
  -webkit-animation: shapeAnimationFive 20s infinite linear;
          animation: shapeAnimationFive 20s infinite linear;
}

.big-shape.shape12 {
  left: 85%;
  top: 50%;
  -webkit-animation: shapeAnimationFive 20s infinite linear;
          animation: shapeAnimationFive 20s infinite linear;
}


/* ========case-study shape ============*/
.big-shape.shape13 {
  left: 10%;
  top: 0%;
  animation: rotated 20s infinite linear;
}
.big-shape.shape14 {
  left: 90%;
  top: 10%;
  animation: cs-zoom-in-out 20s infinite linear;
}
.big-shape.shape15 {
  left: 10%;
  top: 10%;
  animation: cs-zoom-in-out 20s infinite linear;
}
.big-shape.shape16 {
  left: 90%;
  top: 10%;
  animation: rotated 20s infinite linear;
}
.big-shape.shape17 {
  left: 10%;
  top: 0%;
  animation: rotated 20s infinite linear;
}
.big-shape.shape18 {
  left: 90%;
  top: 65%;
  animation: rotated 20s infinite linear;
}
/* shape */
.live-shape1 svg {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 5%;
    left: 10%;
}
.live-shape1 svg .muz{
    stroke: #ff8aac;
    stroke-width:1px;
    fill: transparent;
    stroke-dasharray:122;
    stroke-dashoffset:122;
    animation: footer-animate 5s ease-out infinite;
}

@keyframes footer-animate
{
    to{
    stroke-dashoffset:0;
    }
}
.live-shape1 svg .muz2{
    fill: #ff8aac;
}



/* ==================== end big-shape =====================*/



/* ====================small-shape =====================*/

/* single service small shape */
.small-shape {
  position: absolute;
  z-index: 2;
}
.small-shape.sp1 {
  left: 45%;
  top: 13%;
  animation: shapeAnimationOne 20s infinite linear;
}
.small-shape.sp2 {
  left: 40%;
  top: 27%;
  animation: shapeAnimationTwo 20s infinite linear;
}
.small-shape.sp3 {
  left: 58%;
  top: 29%;
  animation: shapeAnimationThree 10s infinite linear;
}
.small-shape.sp4 {
  left: 64%;
  top: 21%;
  animation: shapeAnimationFour 20s infinite linear;
}

.small-shape.wt1 {
  left: 38%;
  top: 36%;
  animation: shapeAnimationFive 30s infinite linear;
}
.small-shape.wt2 {
  left: 63%;
  top: 32%;
  animation: shapeAnimationFour 20s infinite linear;
}
.small-shape.wt3 {
  left: 51%;
  top: 13%;
  animation: shapeAnimationThree 10s infinite linear;
}
.small-shape.wt4 {
  left: 40%;
  top: 16%;
  animation: shapeAnimationFive 20s infinite linear; 
}
.small-shape.uiux1 {
  left: 61%;
  top: 9%;
  animation: shapeAnimationThree 30s infinite linear;
}
.small-shape.uiux2 {
  left: 44%;
  top: 13%;
  animation: shapeAnimationFive 20s infinite linear;
}
.small-shape.uiux3 {
  left: 55%;
  top: 30%;
  animation: shapeAnimationOne 30s infinite linear;
}
.small-shape.wd1 {
  left: 45%;
  top: 12%;
  animation: shapeAnimationOne 30s infinite linear;
}
.small-shape.wd2 {
  left: 35%;
  top: 23%;
  animation: shapeAnimationTwo 20s infinite linear;
}
.small-shape.wd3 {
  left: 54%;
  top: 29%;
  animation: shapeAnimationFour 10s infinite linear;
}
.small-shape.cm1 {
  left: 42%;
  top: 16%;
  animation: shapeAnimationOne 10s infinite linear;
}

.small-shape.cm2 {
  left: 58%;
  top: 18%;
  animation: shapeAnimationFive 20s infinite linear;
}

.small-shape.cm3 {
  left: 38%;
  top: 31%;
  animation: shapeAnimationThree 10s infinite linear;
}

.small-shape.cm4 {
  left: 8%;
  top: 50%;
  animation: shapeAnimationOne 20s infinite linear;
}

.small-shape.ba1 {
  left: 41%;
  top: 13%;
  animation: shapeAnimationFive 10s infinite linear;
}
.small-shape.ba2 {
  left: 45%;
  top: 29%;
  animation: shapeAnimationThree 20s infinite linear;
}






/*** 
====================================================================
       end shape animation
====================================================================
 ***/