/* Additional styles for the navigation links */
.nav-links {
  display: none;
}
/* Show the navigation links when the button is toggled */
#navLinks.open {
  display: block;
}
body {
  font-family: "Montserrat", sans-serif;
}
#card-img {
  border-radius: 0.5rem;
}
.hide {
  display: none;
}
.visible {
  display: block;
}
/* Adjusted animation timing and easing function */
.animate-forward {
  transform: translateX(-100%);
  opacity: 1;
  transition: transform 0.8s ease-in-out; /* Adjusted duration and easing */
}

.animate-forward.animate {
  transform: translateX(0%);
}

.animate-backward {
  transform: translateX(100%);
  opacity: 1;
  transition: transform 0.8s ease-in-out; /* Adjusted duration and easing */
}
.animate-backward.animate {
  transform: translateX(0%);
}

/* Add these styles to your existing CSS */

.floating-label {
  position: absolute;
  top: 16px;
  left: 12px;
  color: gray;
  pointer-events: none;
  transition: all 0.2s ease;
}

.input-field:focus + .floating-label,
.input-field:not(:placeholder-shown) + .floating-label {
  top: -22px;
  left: 1px;
  font-size: 12px;
  color: white;
}