/* Basic styling for the navbar */
body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}

.navbar {
	display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 50px 10px 25%;
  background-color: #ebebeb;
  height: 50px; /* Maximum height for the navbar */
  width: 100%;
  color: rgb(85, 85, 85);
  position: relative; /* Allows logo to overlap */
  z-index: 1;
}


.logo {
  position: fixed;
  top: 27px; /* Adjusts overlap above navbar */
  left: 20px; /* Positions logo in the top-left corner */
  z-index: 0; /* Ensures logo is above other elements */
  height: 150px; /* Logo height */
 // width: 100%;
}


.name {
font-family: 'Montserrat';
color: rgb(87, 87, 87);
font-size: 18px;
margin: 0;
position: absolute;
top: 40px;
left: 200px;
transform: translate(-20%, -50%);
}

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

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

.nav-links a {
	color: rgb(85, 85, 85);
	text-decoration: none;
	padding: 8px 12px;
	display: block;
	
}

.nav-links a:hover {
	background-color: rgba(117, 117, 116, 0.988);
	border-radius: 4px;
	color: rgba(229, 229, 229, 1)
}

.nav-links a:visited {
	background-color: rgba(117, 117, 116, 0.988);
	border-radius: 4px;
	color: rgba(128, 20, 20, 1)
}

/* Dropdown menu styling */
.dropdown {
	position: relative;
	background-color: rgb(76, 74, 74));
}

.nav-links-lang a {
	color: rgb(186, 60, 81);
}

.nav-links-lang-footer a {
	color: rgb(85,85,85);
}

.dropdown-content {
	display: none;
	position: absolute;
	//background-color: #333;
	background-color: rgb(117, 117, 116);
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 2;
}

.dropdown-content a {
	color: rgb(230, 221, 221);
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	background-color: #e1e1e1;
	color: rgb(76,74,74);
}

.dropdown-content a:visited {
	background-color: #e1e1e1;
	color: rgb(229, 197, 197);
}

.dropdown:hover .dropdown-content {
	display: block;
}



/* Hamburger menu icon */
.menu-icon {
	display: none;
	flex-direction: column;
	cursor: pointer;
}

.menu-icon .bar {
	width: 25px;
	height: 3px;
	background-color: rgb(222, 49, 34);
	margin: 4px 0;
}

/* Media queries for responsiveness */

	@media screen and (max-width: 768px) {
	.navbar {
		flex-wrap: wrap;
		justify-content: flex-start;
		background-color: rgb(76, 74, 74));
	}
	
	.nav-links {
		display: none;
		width: 100%;
		background-color: #ebebeb; //hamburger menu background
		order: 3; /* Push nav-links to the bottom */
	}
	
	.nav-links li {
		text-align: left;
		margin: 10px 0 10px 20px;
		background-color: rgb(76, 74, 74));
	}
	
	.menu-icon {
		display: flex;
		margin-left: auto; /* Push the icon to the right */
		order: 2; /* Position the icon after the logo */
	}
	
	.nav-links.active {
		display: flex;
		flex-direction: column;
		
	}
	
	.logo img{
		width: 60px;
	}
	
	//added CSS
	
		/* ... existing styles ... */
	
		.dropdown-content {
			display: none;
			position: static;
			background-color: #444;
			box-shadow: none;
		}
	
		.dropdown.active .dropdown-content {
			display: block;
		}
	
		.dropdown-content a {
			padding-left: 30px;
			
		}
	@media screen and (max-width: 600px) {
		.logo img{
			width: 40px;
		}