.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1rem 2rem;
 background: rgba(10, 10, 10, 0.7);
 backdrop-filter: blur(15px);
 position: sticky;
 top: 5px;
 z-index: 1000;
 border: 2px solid rgba(138, 43, 226, 0.5);
 border-radius: 20px;
 margin: 0 1rem;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.logo {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 1.5rem;
 font-weight: bold;
 color: #8a2be2;
 text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}
.logo-img {
 width: 38px;
 height: 38px;
}
.nav-links {
 display: flex;
 align-items: center;
 gap: 1.5rem;
}
.nav-links a {
 color: #fff;
 text-decoration: none;
 transition: color 0.3s;
}
.nav-links a:hover {
 color: #8a2be2;
}
.nav-links select {
 padding: 0.5rem;
 border-radius: 5px;
 background: rgba(68, 68, 68, 0.8);
 color: #fff;
 border: none;
 cursor: pointer;
 transition: transform 0.3s;
}
.nav-links select:focus {
 outline: none;
}
.nav-links option[selected] {
 background-color: #4caf50;
 color: #fff;
}
.hamburger {
 display: none;
 flex-direction: column;
 gap: 5px;
 background: none;
 border: none;
 cursor: pointer;
}
.hamburger span {
 width: 25px;
 height: 3px;
 background: #fff;
 transition: transform 0.3s, opacity 0.3s;
}
@media (max-width: 768px) {
 .nav-links {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 60px;
  right: 0;
  background: rgba(10, 10, 10, 0.9);
  width: 100%;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 .nav-links.active {
  display: flex;
 }
 .hamburger {
  display: flex;
 }
}