/* Custom CSS for the ::after pseudo-element */
.nav-link {
  position: relative;
  display: inline-block; /* Ensure the link is treated as a block for positioning */
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.5s ease, left 0.5s ease;
}

/* Animation keyframes */
@keyframes border-grow {
  0% {
    width: 0;
    left: 50%;
  }
  100% {
    width: 100%;
    left: 0;
  }
}

/* Apply animation on page load */
.nav-link.animate-border::after {
  animation: border-grow 0.5s ease forwards;
}