.hero::after {
  animation-duration: 50s;
  animation-name: rotateBadgeImg;
  animation-iteration-count: infinite;
}
.hero-text__badge svg {
  animation-duration: 50s;
  animation-name: rotateBadgeArrow;
  animation-iteration-count: infinite;
}
.main-services__item:not(:first-of-type):hover .services-img1{
  animation-duration: 3s;
  animation-fill-mode: forwards;
  -webkit-animation-name: grow;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
  animation-name: blurServicesImg;
}
.main-services__item:not(:first-of-type):hover .services-img2{
  animation-duration: 3s;
  animation-fill-mode: forwards;
  -webkit-animation-name: grow;
  -webkit-animation-duration: 5s;
  -webkit-animation-fill-mode: forwards;
  animation-name: blurServicesImg;
}

.about-img__bg2 {
  animation-duration: 10s;
  animation-name: about-img__bg2;
  animation-iteration-count: infinite;
}
.about-img__bg3 {
  animation-duration: 10s;
  animation-name: about-img__bg3;
  animation-iteration-count: infinite;
}
.about-img__bg4 {
  animation-duration: 10s;
  animation-name: about-img__bg4;
  animation-iteration-count: infinite;
}
.about-img__bg5 {
  animation-duration: 10s;
  animation-name: about-img__bg5;
  animation-iteration-count: infinite;
}
.main-contact::before{
  animation-duration: 25s;
  animation-name: bg-footer;
  animation-iteration-count: infinite;
}


@media (max-width: 767px){
  .main-services__item.slick-current .services-img1{
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
    animation-name: blurServicesImg;
  }
  .main-services__item.slick-current .services-img2{
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 5s;
    -webkit-animation-fill-mode: forwards;
    animation-name: blurServicesImg;
  }
}



@keyframes rotateBadgeImg {
  0% {
    transform: rotate(0deg) translateY(0px);
  }

  25% {
    transform: rotate(90deg) translate(120px, 50px);
  }

  50% {
    transform: rotate(140deg) translate(180px, -160px);
  }

  75% {
    transform: rotate(90deg) translate(120px, 50px);
  }

  100%{
    transform: rotate(0deg) translateY(0px);
  }
}

@keyframes rotateBadgeArrow {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-360deg);
  }

  100%{
    transform: rotate(0);
  }
}
@keyframes blurServicesImg{
  from {
    filter: blur(0);
  }

  to {
    filter: blur(1.5px) brightness(0.6);   
  }
}

@keyframes about-img__bg2{
  0% {
    top: 18%;
  }

  50% {
    top: 22%;
  }

  100%{
    top: 18%;
  }
}

@keyframes about-img__bg3{
  0% {
    left: 47%;
  }

  50% {
    left: 44%;
  }

  100%{
    left: 47%;
  }
}


@keyframes about-img__bg4{
  0% {
    top: 73%;
  }

  50% {
    top: 69%;
  }

  100%{
    top: 73%;
  }
}

@keyframes about-img__bg5{
  0% {
    left: 6%;
  }

  50% {
    left: 10%;
  }

  100%{
    left: 6%;
  }
}


@keyframes bg-footer{
  0% {
    background-position-y: center;
  }
  50%{
    background-position-y: top;
  }
  100%{
    background-position-y: center;
  }
}