@keyframes animation-pop {
    50% {
        transform: scale(1.2);
    }
}


@keyframes btntopicon {
    0%{
        transform: translateY(-13px);
    }
    100%{
        transform: translateY(13px);
    }
}


@keyframes animation-scaleLeftRight {
    0% { 
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}
@keyframes animation-top-to-bottom {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
@keyframes animation-bottom-to-top {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
@keyframes animation-bottom-to-right {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
@keyframes animation-scaleRightLeft {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

@keyframes animation-blur {
    0%{
        filter: blur(20px);
    }
    100%{
        filter: blur(0);
    }
}

/* top to bottom */
@keyframes animation-scale {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes animation-topToBottom {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes animation-scalezoom {
    0% {
        opacity: 0;
        transform: scale(5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes animation-leftToright {
    0% {
        opacity: 0;
        transform: scale(2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes animation-rightToleft {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }   
}
/* topp and bottom (both) */
@keyframes animation-topAndbottom {
    0% {
        transform: translateY(7px);
    }
   
    100% {
        transform: translateY(-7px);
    }
}



/* top to bottom */
@keyframes animation-scaleReveal {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    50%{
        opacity: 1;
        transform: scale(1.15);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulsate-btn {
    0% {
        transform: scale(0.6, 0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}
@keyframes spinnerRotate {
    0% {
        transform: rotate(0deg) translateX(57px);
    }
    
    100% {
        transform: rotate(360deg) translateX(57px);
    }
}

/* right To left */
.revealleft{    
    transform: translate(50%,50%);
    opacity: 0;
    transition: all 1s ease;
}


.revealleft.active{
    transform: translate(0%,0%);
    opacity: 1;
}

/* left To right */
.revealright{    
    transform: translate(-50%,50%);
    opacity: 0;
    transition: all 1s ease;
    }
.revealright.active{
    transform: translate(0%,0%);
    opacity: 1;
}
/* .reveal-whyus{    
    opacity: 0;
    transition: all 1s ease;
}
.reveal-whyus.active{
    animation: animation-scaleReveal 1s ease forwards;
    opacity: 0;
} */