.toast-notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  background-color: #4CAF50;
  color: white;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 16px;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.toast-notification.show {
  transform: translateX(-50%) translateY(0);
}


@keyframes slideUp {
  from {
    transform: translateX(-50%) translateY(150%);
  }
  to {
    transform: translateX(-50%) translateY(0);
  }
}


@keyframes slideDown {
  from {
    transform: translateX(-50%) translateY(0);
  }
  to {
    transform: translateX(-50%) translateY(150%);
  }
}