:root {
  --color1: #000000;
  --color2: #6366f1;
}


/* General menu styling 4c4c4c */
.menu {
  background-color: #000000;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed; /* Make the menu fixed */
  top: 0; /* Stick to the top of the page */
  left: 0;
  width: 100%; /* Full width */
  z-index: 1000; /* Ensure it stays above other elements */
  height: 9%;
}

.menu-list {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.menu-link {
  color: #fff !important;              /* Force white text */
  text-decoration: none !important;    /* Remove underline */
  font-size: 1.2rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 4px;
}

.menu-link:hover {
  background-color: var(--color2); /* Hover background color */
  color: #fff; /* Hover text color */
}
.menu-link.active {
  background-color: var(--color2); 
  color: #fff;
}