/*span i navBar button*/
@keyframes span1 {
  0% {
    width: 90%;
  }
  50% {
    width: 45%;
  }
  100% {
    width: 90%;
  }
}

/*square spin in home*/
@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*logo in offcanvas nav bar*/
@keyframes logoAnimation {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/*all list item in offcanvas*/
@keyframes show {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*square*/
@keyframes Square {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/*flash in carousel item*/
@keyframes Flash {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*zoom in carousel item */
@keyframes zoom {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/*Animation to header elements*/
@keyframes animationOfHeader {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*animation of about (transform translate Y )*/
@keyframes topAndBottom {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

/*Badge rotate*/
@keyframes rotateBadge {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*Badge transformTranslate*/
@keyframes BadgeTransformTranslate {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0px);
  }
}

/*animation on loading page*/
@keyframes rotateTop {
  0%,
  100% {
    transform: rotateY(-90deg);
    opacity: 0;
  }
  40%,
  60% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

/*animation on loading page*/
@keyframes rotateBottom {
  0%,
  100% {
    transform: rotateY(90deg);
    opacity: 0;
  }
  40%,
  60% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

/*spin in loading page*/
@keyframes spinLoad {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*animation of progress*/
@keyframes Progress {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}