.pop-right
{
 animation: pop-right 0.5s ease forwards;
 opacity: 0;
} 

@keyframes pop-right{
 0% {
   opacity: 0;
   transform: translateX(300px) scale(0.5);
 }
   70% {
   opacity: 1;
   transform: translateX(0px) scale(0.5);
 }

 100% {
   
   transform: scale(1.0);
   opacity: 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%;
  }
}