@keyframes animate {
      0% {
        transform: scale(0.6);
        opacity: 1;
      }
      20% {
        transform: scale(0.7);
        opacity: 0.8;
      }
      40% {
        transform: scale(0.8);
        opacity: 0.6;
      }

      60% {
        transform: scale(0.9);
        opacity: 0.4;
      }

      80% {
        transform: scale(1);
        opacity: 0.2;
      }
      
      100% {
        transform: scale(1.1);
        opacity: 0;
      }
  }

  @keyframes translateX {
    0% {
      opacity: 0;
      transform: translateX(60px);
    }
    
    80% {
      transform: translateX(-5px);
    }
  
    100% {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  

  @keyframes growOut {
    0% {
       transform: scale(0)
   }
   80% {
       transform: scale(1.1)
   }
   100% {
       transform: scale(1)
   }
}

@keyframes slidein {
  from {
    margin-top: 100%;
  }

  to {
    margin-top: 0%;
  }
}

@keyframes fadeInAnimation {
  0% { opacity: 0; }
  10% { opacity: 0.; }
  20% { opacity: 0; }
  30% { opacity: 0; }
  40% { opacity: 0; }
  50% { opacity: 0; }
  60% { opacity: 0.6; }
  70% { opacity: 0.7; }
  80% { opacity: 0.8; }
  90% { opacity: 0.9; }
  100% { opacity: 1; }
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}