@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

/* Navbar styling */
.navbar {
  height: 100px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #c8a7c4;
}

.nav-menu-desktop {
  color: black;
  display: flex;
  gap: 1rem;
}

.nav-menu-desktop > a {
  color: #3c2727;
}

.hamburger-menu {
  display: none; /* Hidden on desktop */
  cursor: pointer;
  font-size: 24px;
  color: #504f4f;
  position: absolute;
  top: 35px;
  right: 30px;
  z-index: 1001;
}

.nav-menu-mobile {
  display: none; /* Hidden on desktop by default */
}

@media (max-width: 768px) {
  /* Hide desktop menu on mobile */
  .nav-menu-desktop {
    display: none;
  }

  /* Show hamburger icon on mobile */
  .hamburger-menu {
    display: block;
  }

  /* Mobile Menu (Hidden by Default) */
  .nav-menu-mobile {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    align-items: center;
    padding: 20px 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    z-index: 1000;
  }

  /* Style for mobile menu links */
  .nav-menu-mobile a {
    color: #504f4f;
    font-size: 1rem;
    margin: 10px 0;
    text-decoration: none;
    transition: color 0.3s;
  }

  .nav-menu-mobile a:hover {
    color: #007bff;
  }

  /* Show mobile menu when active */
  .nav-menu-mobile.nav-menu-active {
    display: flex;
  }
}