.animate__fadeInLeftSlight {
  opacity: 0;
  animation: fadeInLeftSlight 1s forwards;
}

@keyframes fadeInLeftSlight {
  from {
    opacity: 0;
    transform: translateX(-10px); /* Adjust this value for the desired distance */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate__fadeInRightSlight {
  opacity: 0;
  animation: fadeInRightSlight 1s forwards;
}

@keyframes fadeInRightSlight {
  from {
    opacity: 0;
    transform: translateX(10px); /* Adjust this value for the desired distance */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes MoveUpDown {
  0%, 100% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes FloatIcon {
  0%, 100% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-10px);
  }
}


@keyframes FloatAnt {
  0%, 100% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes moveAround {
  0%, 100% {
    top: calc(100% - 17px);
    left: -10px;
  }
  25% {
    top: calc(100% - 17px);
    left: calc(100% - 10px);
  }
  50% {
    top: -17px;
    left: calc(100% - 10px);
  }
  75% {
    top: -17px;
    left: -10px;
  }
}

@keyframes moveAroundCircle {
  75% {
    top: calc(100% - 9px);
    left: -9px;
  }
  50% {
    top: calc(100% - 9px);
    left: calc(100% - 9px);
  }
  25% {
    top: -9px;
    left: calc(100% - 9px);
  }
  0%, 100% {
    top: -9px;
    left: -9px;
  }
}

@keyframes moveAroundSquare {
  75% {
    top: calc(100% - 9px);
    left: -9px;
  }
  50% {
    top: calc(100% - 9px);
    left: calc(100% - 9px);
  }
  25% {
    top: -9px;
    left: calc(100% - 9px);
  }
  0%, 100% {
    top: -9px;
    left: -9px;
  }
}

@keyframes rotateArrow {
  0%{
    transform: rotate(90deg);
  }
  25% {
    transform: rotate(90deg);
  }
  26% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  51% {
    transform: rotate(-90deg);
  }
  75% {
    transform: rotate(-90deg);
  }
  76% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.zoom-in-out-box {
  animation: zoom-in-zoom-out 2s ease infinite;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: translate(-50%, -50%) scale(1, 1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1, 1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1, 1);
  }
}

@keyframes NormalRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

@keyframes rotateReverse {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(-360deg);
  }
}

@keyframes MultiColorMoveOne {
  0% {
    transform: translateX(-50%) translateY(-50%);
  }
  /*50% {
    transform: translateX(-50%) translateY(10px);
  }*/
  100% {
    transform: translateX(-50%) translateY(0%);
  }
}

@keyframes MultiColorMoveTwo {
  0% {
    transform: translateX(-50%) translateY(-50%);
  }
  /*50% {
    transform: translateX(-50%) translateY(-20px);
  }*/
  100% {
    transform: translateX(-50%) translateY(0%);
  }
}

@keyframes MultiShapeMoveOne {
  0% {
    transform: translateX(-52%) translateY(-10px);
  }
  50% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-52%) translateY(-10px);
  }
}

@keyframes MultiShapeMoveTwo {
  0% {
    transform: translateX(-50%) translateY(-15px);
  }
  50% {
    transform: translateX(-50%) translateY(-30px);
  }
  100% {
    transform: translateX(-50%) translateY(-15px);
  }
}

@keyframes MultiShapeMoveThree {
  0% {
    transform: translateX(-48%) translateY(-10px);
  }
  50% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-48%) translateY(-10px);
  }
}

@keyframes HalfCircleTwo {
  0% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(-57%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes HalfCircleOne {
  0% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(-45%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/*half circle opacity*/
@keyframes HalfCircleOpcityTwo {
  0% {
    transform: translateX(-50%);
    opacity: 1;
  }
  50% {
    transform: translateX(-60%);
    opacity: 0.5;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}

@keyframes HalfCircleOpcityOne {
  0% {
    transform: translateX(-50%);
    opacity: 1;
  }
  50% {
    transform: translateX(-45%);
    opacity: 0.6;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}

/* CSS animation for fade-in effect */
@keyframes fadeInEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.banner-para {
  opacity: 0;
}

.fadeInEffect{
  animation: fadeInEffect 1s ease-in-out forwards;
}