/* Top navigation bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #008040;
padding: 10px 20px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: inline-block;
}
.navbar a:hover {
background:#FF00FF;
}
/* Menu links (horizontal by default) */
.menu {
display: flex;
}
/* Submenu style */
.submenu {
display: none;
position: absolute;
background:#008040;
margin-top: 10px;
z-index: 1;
}
.submenu a {
display: block;
padding: 10px 20px;

font-size: 15px;
}
/* Parent menu item */
.menu-item {
position: relative;
}
/* Show submenu on hover (desktop) */
@media (min-width: 769px) {
.menu-item:hover .submenu {
display: block;
}
}
/* Hamburger icon - hidden by default */
.hamburger {
display: none;
font-size: 28px;
cursor: pointer;
color: white;
}
/* Responsive (mobile view) */
@media (max-width: 768px) {
.menu {
display: none; /* hide horizontal menu */
flex-direction: column;
width: 100%;
background: #333;
}
.menu a {
text-align: left;
padding: 12px 20px;
}
.menu-item .submenu {
position: static; /* stack under parent */
background: #444;

}
.submenu a {
padding-left: 30px;
}
.hamburger {
display: block; /* show hamburger */

}
.menu.show {
display: flex; /* show when toggled */
}
.submenu.show {
display: block; /* show submenu on click */
}

}