.banner-img{
    animation: fadeInRight 2s ease both;
}
.animate__shakeX {
    animation: shakeX 2s ease both;
}
.animate__zoomIn{
    animation: zoomIn 2s ease both;
}
.animate__fadeInUp {
    animation: fadeInUp 2s ease both;
}
.has-scale-animation {
    animation: smallScale 3s infinite;
}
.has-delay-short {
    animation-delay: 0.5s;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
/* topp and bottom (both) */
@keyframes animation-topAndbottom {
    0% {
        transform: translateY(9px);
        filter: brightness(400.2%);
    }
   
    100% {
        transform: translateY(-9px);
        filter: brightness(100%);

    }
}
/* topp and bottom (both) */
@keyframes animation-svg {
    0% {
        filter:  brightness(150.6%);
    }
   
    100% {
        filter: brightness(100%);

    }
}
@keyframes shakeX {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes smallScale {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes MoveCircleSmall {
    0% {
        transform: rotate(0deg) translate(-10%) rotate(0deg);
        -webkit-transform: rotate(0deg) translate(-10%) rotate(0deg);
    }
    
    100% {
        transform: rotate(360deg) translate(-10%) rotate(-360deg);
        -webkit-transform: rotate(360deg) translate(-10%) rotate(-360deg);
    }
}
@keyframes MoveCircleSmall2 {
    0% {
        transform: rotate(0deg) translate(10%) rotate(0deg);
        -webkit-transform: rotate(0deg) translate(10%) rotate(0deg);
    }
    
    100% {
        transform: rotate(-360deg) translate(10%) rotate(360deg);
        -webkit-transform: rotate(360deg) translate(10%) rotate(-360deg);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translatex(170%);
    }
}
@keyframes marquee-img {
    from {
        transform: translateX(0);
    }
   
    to {
        transform: translateX(-100%);
    }
}
@keyframes zoom-fade {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}
@keyframes spinnerRotate {
    0% {
        transform: rotate(0deg) translateX(57px);
    }
    
    100% {
        transform: rotate(360deg) translateX(57px);
    }
}