.step-move
{
    animation: move 0.5s linear forwards;
}
.step-move.m25
{
    animation-name: move-25;
}
@keyframes move-25
{
    from
    {
        width: 25%;
    }
    to
    {
        width: 0%;
    }
}
.step-move.m50
{
    animation-name: move-50;
}
@keyframes move-50
{
    from
    {
        width: 0%;
    }
    to
    {
        width: 25%;
    }
}
.step-move.m75
{
    animation-name: move-75;
}
@keyframes move-75
{
    from
    {
        width: 25%;
    }
    to
    {
        width: 50%;
    }
}
.step-move.m100
{
    animation-name: move-100;
}
@keyframes move-100
{
    from
    {
        width: 50%;
    }
    to
    {
        width: 75%;
    }
}
.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 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%;
  }
}