/*----------------------- animation css ------------------------*/
@keyframes float {
    50% {
       transform: translate(0, 20px);
    }
}
@-webkit-keyframes pulse-ring {
    0% {
      -webkit-transform: scale(0.33);
              transform: scale(0.33);
    }
    80%, 100% {
      opacity: 0;
    }
}
  
@keyframes pulse-ring {
    0% {
      -webkit-transform: scale(0.33);
              transform: scale(0.33);
    }
    80%, 100% {
      opacity: 0;
    }
}
@-webkit-keyframes pulse-dot {
    0% {
      -webkit-transform: scale(0.8);
              transform: scale(0.8);
    }
    50% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    100% {
      -webkit-transform: scale(0.8);
              transform: scale(0.8);
    }
}
@keyframes pulse-dot {
    0% {
      -webkit-transform: scale(0.8);
              transform: scale(0.8);
    }
    50% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    100% {
      -webkit-transform: scale(0.8);
              transform: scale(0.8);
    }
}
@keyframes particles-1 {
    from {
      transform: scale(1);
      visibility: visible;
    }
    to {
      left: 188px;
      top: 109px;
      transform: scale(0);
      visibility: hidden;
    }
  }
  .active .hero-btn .particles-circle:nth-of-type(1) {
    animation: particles-1 1.5s 0.025s;
  }
  @keyframes particles-2 {
    from {
      transform: scale(1);
      visibility: visible;
    }
    to {
      left: -204px;
      top: -225px;
      transform: scale(0);
      visibility: hidden;
    }
  }
  .active .hero-btn .particles-circle:nth-of-type(2) {
    animation: particles-2 1.5s 0.05s;
  }
  @keyframes particles-3 {
    from {
      transform: scale(1);
      visibility: visible;
    }
    to {
      left: 18px;
      top: -133px;
      transform: scale(0);
      visibility: hidden;
    }
  }
  .active .hero-btn .particles-circle:nth-of-type(3) {
    animation: particles-3 1.5s 0.075s;
  }
  @keyframes particles-4 {
    from {
      transform: scale(1);
      visibility: visible;
    }
    to {
      left: -158px;
      top: -1px;
      transform: scale(0);
      visibility: hidden;
    }
  }
  .active .hero-btn .particles-circle:nth-of-type(4) {
    animation: particles-4 1.5s 0.1s;
  }
  @keyframes particles-5 {
    from {
      transform: scale(1);
      visibility: visible;
    }
    to {
      left: -171px;
      top: 197px;
      transform: scale(0);
      visibility: hidden;
    }
  }
  .active .hero-btn .particles-circle:nth-of-type(5) {
    animation: particles-5 1.5s 0.125s;
  }
  @keyframes particles-6 {
    from {
      transform: scale(1);
      visibility: visible;
    }
    to {
      left: -177px;
      top: 225px;
      transform: scale(0);
      visibility: hidden;
    }
  }
  .active .hero-btn .particles-circle:nth-of-type(6) {
    animation: particles-6 1.5s 0.15s;
  }
  @keyframes particles-7 {
    from {
      transform: scale(1);
      visibility: visible;
    }
    to {
      left: -228px;
      top: 189px;
      transform: scale(0);
      visibility: hidden;
    }
  }
  .active .hero-btn .particles-circle:nth-of-type(7) {
    animation: particles-7 1.5s 0.175s;
  }
  @keyframes particles-8 {
    from {
      transform: scale(1);
      visibility: visible;
    }
    to {
      left: -135px;
      top: -171px;
      transform: scale(0);
      visibility: hidden;
    }
  }
  .active .hero-btn .particles-circle:nth-of-type(8) {
    animation: particles-8 1.5s 0.2s;
  }
  @keyframes particles-9 {
    from {
      transform: scale(1);
      visibility: visible;
    }
    to {
      left: -47px;
      top: 133px;
      transform: scale(0);
      visibility: hidden;
    }
  }
  .active .hero-btn .particles-circle:nth-of-type(9) {
    animation: particles-9 1.5s 0.225s;
  }
  @keyframes particles-10 {
    from {
      transform: scale(1);
      visibility: visible;
    }
    to {
      left: -141px;
      top: 162px;
      transform: scale(0);
      visibility: hidden;
    }
  }

@-webkit-keyframes mover {
    0% { transform: translateX(0); }
    100% { transform: translateX(-20px); }
}
@keyframes mover {
    0% { transform: translateX(0); }
    100% { transform: translateX(-20px); }
}

@keyframes fly {
    0% {
      top: -28%;   
    }
    100% {
      top: -40%;
      right: 0%
    }
}

@keyframes movelefttoright {
    0% {
      left: 10%;  
      bottom:-20%; 
    }
    100% {
        left: 25%;
        bottom: -40%;
    }
}


/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
    16.65% {
      -webkit-transform: translateX(8px);
      transform: translateX(8px);
    }
    33.3% {
      -webkit-transform: translateX(-6px);
      transform: translateX(-6px);
    }
    49.95% {
      -webkit-transform: translateX(4px);
      transform: translateX(4px);
    }
    66.6% {
      -webkit-transform: translateX(-2px);
      transform: translateX(-2px);
    }
    83.25% {
      -webkit-transform: translateX(1px);
      transform: translateX(1px);
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  @keyframes hvr-wobble-horizontal {
    16.65% {
      -webkit-transform: translateX(8px);
      transform: translateX(8px);
    }
    33.3% {
      -webkit-transform: translateX(-6px);
      transform: translateX(-6px);
    }
    49.95% {
      -webkit-transform: translateX(4px);
      transform: translateX(4px);
    }
    66.6% {
      -webkit-transform: translateX(-2px);
      transform: translateX(-2px);
    }
    83.25% {
      -webkit-transform: translateX(1px);
      transform: translateX(1px);
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }


@keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.2);
        opacity: 0;
    }
}

.hovicon.services_icon:hover:after {
    -webkit-animation: spinAround 9s linear infinite;
    -moz-animation: spinAround 9s linear infinite;
    animation: spinAround 9s linear infinite;
}

@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

  .hvr-wobble-horizontal {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }

  /* Buzz */
@-webkit-keyframes hvr-buzz {
    50% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg);
    }
    100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg);
    }
  }
  @keyframes hvr-buzz {
    50% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg);
    }
    100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg);
    }
  }
.hvr-buzz {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
    -webkit-animation-name: hvr-buzz;
    animation-name: hvr-buzz;
    -webkit-animation-duration: 0.15s;
    animation-duration: 0.15s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}



/* .star {
    fill: none;
    stroke: #fff;
    stroke-width: 10px;

    stroke-dasharray: 1353px;
    stroke-dashoffset: 1353px;
    animation: move 3s linear infinite;   
    animation-fill-mode: forwards;
    stroke-miterlimit:10;stroke-width:2px;
}

@keyframes move {
    100% {
        stroke-dashoffset: 0;
    }
} */


@-webkit-keyframes slide {
  0% { opacity:1; transform: translateX(-1vw); }	
 50% { opacity:1; transform: translateX(0vw); }	
100% { opacity:0; transform: translateX(1vw); }	
}
@keyframes slide {
  0% { opacity:1; transform: translateX(-1vw); }	
  50% { opacity:1; transform: translateX(0vw); }	
 100% { opacity:0; transform: translateX(1vw); }
}

@-moz-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}

@keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}