.step-move {
    animation: move 0.5s linear forwards;
}

.step-move.m0 {
    animation-name: move-0;
}

@keyframes move-0 {
    from {
        width: 0%;
    }

    to {
        width: 0%;
    }
}

.step-move.m10 {
    animation-name: move-10;
}

@keyframes move-10 {
    from {
        width: 0%;
    }

    to {
        width: 10%;
    }
}

.step-move.m20 {
    animation-name: move-20;
}

@keyframes move-20 {
    from {
        width: 10%;
    }

    to {
        width: 20%;
    }
}

.step-move.m30 {
    animation-name: move-30;
}

@keyframes move-30 {
    from {
        width: 20%;
    }

    to {
        width: 30%;
    }
}

.step-move.m40 {
    animation-name: move-40;
}

@keyframes move-40 {
    from {
        width: 30%;
    }

    to {
        width: 40%;
    }
}

.step-move.m50 {
    animation-name: move-50;
}

@keyframes move-50 {
    from {
        width: 40%;
    }

    to {
        width: 50%;
    }
}

.step-move.m60 {
    animation-name: move-60;
}

@keyframes move-60 {
    from {
        width: 50%;
    }

    to {
        width: 60%;
    }
}

.step-move.m70 {
    animation-name: move-70;
}

@keyframes move-70 {
    from {
        width: 60%;
    }

    to {
        width: 70%;
    }
}

.step-move.m80 {
    animation-name: move-80;
}

@keyframes move-80 {
    from {
        width: 70%;
    }

    to {
        width: 80%;
    }
}

.step-move.m90 {
    animation-name: move-90;
}

@keyframes move-90 {
    from {
        width: 80%;
    }

    to {
        width: 90%;
    }
}

.step-move.m100 {
    animation-name: move-100;
}

@keyframes move-100 {
    from {
        width: 90%;
    }

    to {
        width: 100%;
    }
}

.form-buttons button:hover .phone-ring {
    animation: ring 0.5s ease forwards;
}

@keyframes ring {
    0% {
        transform: translateX(-3px) rotate(-2deg);
    }

    50% {
        transform: translateX(3px) rotate(2deg);
    }

    100% {
        transform: none;
    }
}

.steps::before {
    animation: fadein 0.5s ease forwards;
}

@keyframes fadein {
    from {
        opacity: 1;
        z-index: 0;
    }

    to {
        opacity: 0;
        z-index: -1;
    }
}

.pop-slide {
    animation: pop-slide 0.5s ease forwards;
}

@keyframes pop-slide {
    0% {
        transform: translateX(500px) scale(0.5);
    }

    70% {
        transform: translate(0px) scale(0.5);
    }

    100% {
        transform: translate(0px) scale(1);
    }
}

.thankyou-circle {
    animation: circle 0.5s linear forwards;
}

@keyframes circle {
    0% {
        clip-path: circle(0%);
    }

    100% {
        clip-path: circle(100%);
    }
}

/*tick animation*/

@keyframes rotate-circle {
    25% {
        border-left-color: rgb(34, 208, 136);
    }

    50% {
        border-left-color: rgb(34, 208, 136);
        border-top-color: rgb(34, 208, 136);
    }

    75% {
        border-left-color: rgb(34, 208, 136);
        border-top-color: rgb(34, 208, 136);
        border-right-color: rgb(34, 208, 136);
    }

    100% {
        transform: rotate(360deg);
        border-color: rgb(34, 208, 136);
    }
}

@keyframes rotate-error-circle {
    25% {
        border-left-color: rgb(255, 0, 0);
    }

    50% {
        border-left-color: rgb(255, 0, 0);
        border-top-color: rgb(255, 0, 0);
    }

    75% {
        border-left-color: rgb(255, 0, 0);
        border-top-color: rgb(255, 0, 0);
        border-right-color: rgb(255, 0, 0);
    }

    100% {
        transform: rotate(360deg);
        border-color: rgb(255, 0, 0);
    }
}

@keyframes tick-icon {
    0% {
        font-size: 0;
        opacity: 1;
        top: 50%;
    }

    20% {
        font-size: 10px;
        top: 45%;
    }

    40% {
        font-size: 20px;
        top: 40%;
    }

    70% {
        font-size: 200px;
        top: 0;
    }

    100% {
        font-size: 50px;
        opacity: 1;
        top: 30%;
    }
}

.from-top {
    animation: from-top 0.5s ease forwards;
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translateX(-300px) scale(0.5);
    }

    70% {
        transform: translateX(0px) scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

.coming-soon::before {
    animation: wipe-up forwards 0.5s ease 0.5s;
}

@keyframes wipe-up {
    100% {
        transform: translateX(-100%);
    }
}

.coming-soon::after {
    animation: wipe-down forwards 0.5s ease 0.5s;
}

@keyframes wipe-down {
    100% {
        transform: translateX(100%);
    }
}

.fade-down {
    animation: fade-down 0.3s linear forwards 1s;
    opacity: 0;
}

@keyframes fade-down {
    0% {
        opacity: 0;
        transform: translateY(-100%) scale(0.5);
    }

    70% {
        opacity: 1;
        transform: translateY(0) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-up {
    animation: fade-up 0.3s linear forwards 1s;
    opacity: 0;
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(100%) scale(0.5);
    }

    70% {
        opacity: 1;
        transform: translateY(0) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}