nav {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin: 0 10px;
}

.nav-links a {
  color: #ff729f;
  text-decoration: none;
  font-weight: bold;
  margin: 0 10px;
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  transition: background 0.3s;
  cursor: url("../static/cursor.cur"), auto; /* Custom cursor for clickable elements */
}

.nav-links a:hover {
  cursor: url("../static/cursor.cur"), auto; /* Custom cursor for clickable elements */
  color: #fff;
}

.hamburger-menu {
  display: none;
  cursor: url("../static/cursor.cur"), auto; /* Custom cursor for clickable elements */
}

.hamburger-menu i {
  font-size: 1.5em;
  color: #ff729f;
}

.hamburger-menu:hover i {
  color: #fff; /* Change the color on hover */
  transform: scale(1.2); /* Optionally, scale up the icon on hover */
  transition: color 0.3s, transform 0.3s; /* Smooth transition for color and transform */
  cursor: url("../static/cursor.cur"), auto; /* Custom cursor for clickable elements */
}

/* Media queries for responsiveness */
@media (max-width: 646px) {
  .nav-links {
    max-height: 0; /* Start with hidden state */
    overflow: hidden; /* Hide overflow */
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #ffccd5;
    padding: 0 0; /* Remove padding initially */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensure the nav links are above other elements */
    opacity: 0; /* Start with hidden state */
    transform: translateY(-20px); /* Start with hidden state */
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease; /* Smooth transition for max-height, opacity, and transform */
  }

  .nav-links.show {
    max-height: 500px; /* Set a max-height to allow for the dropdown */
    padding: 10px 0; /* Add padding when shown */
    opacity: 1; /* Show state */
    transform: translateY(0); /* Show state */
  }

  .nav-links li {
    margin: 10px 0;
    margin-bottom: -10px; /* Adjusted margin to reduce spacing */
  }

  .hamburger-menu {
    display: block; /* Show the hamburger menu */
  }
}