/* General Navbar Styles (Desktop view) */
nav {
	background-color: var(--background-color); /* rgba(193, 195, 198, 0.7) */
	border-bottom-left-radius: 35px;
	border-bottom-right-radius: 35px;
	padding: 5px;
	position: relative;
	display: flex;
	justify-content: center; /* Center the elements */
	align-items: center;
}

nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex; /* Horizontal menu in desktop */
	justify-content: center;
}

nav ul li {
	text-align: center;
	margin: 1vh 5vw; /* Space between tabs in desktop */
}

nav ul li a {
	text-decoration: none;
	color: var(--primary-color); /* #000000 */
	font-weight: 700;
	font-size: 2vw; /* Scale the font size based on viewport width */
}

nav ul li a.active {
	text-decoration: underline;
}

nav ul li a:hover {
	text-decoration: underline;
}

/* Mobile Menu Icon (Hamburger Button) */
.menu-icon {
	display: none; /* Hidden on larger screens */
	font-size: 40px;
	color: var(--primary-color); /* #000000 */
	cursor: pointer;
	z-index: 1000;
}

/* Responsive Navbar */
@media (max-width: 1180px) {
	nav {
		flex-direction: column;
	}

	/* Show the hamburger menu and hide the full nav in mobile */
	.menu-icon {
		display: block; /* Show hamburger icon on mobile */
	}

	nav ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: none; /* Initially hidden */
		justify-content: center;
		transition: max-height 0.5s ease-out; /* Animation for dropdown */
		overflow: hidden; /* Hide elements when collapsed */
		max-height: 0; /* Initially collapsed */
		flex-direction: column;
	}

	nav ul.active {
		display: flex;
		max-height: 500px; /* Large enough to show all items */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		z-index: 1000;
	}
	/* When the menu is active (clicked) */

	nav ul li {
		width: 100%;
		margin: 10px 0;
	}
}