/* Main dropdown container */
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.9);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  z-index: 10;

  /* Animate using scaleY instead of max-height */
  transform-origin: top;
  transform: translateX(-50%) scaleY(0);
  transition: transform 0.3s ease;
}

/* Show dropdown */
.dropdown-content.show {
  transform: translateX(-50%) scaleY(1);
}

/* Dropdown links */
.dropdown-content a {
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background: rgba(255,0,0,0.6);
}

/* Submenus */
.submenu {
  position: relative;
}

/* Flyout submenu */
.submenu-content {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 180px;
  background: rgba(20,20,20,0.95);
  border-radius: 8px;
  z-index: 20;
}
.submenu:hover > .submenu-content {
  display: block;
}

/* Hamburger bars */
.dropbtn { cursor: pointer; padding: 10px; }
.bar1, .bar2, .bar3 {
  width: 30px; height: 4px; background-color: white; margin: 6px 0; transition: 0.4s;
}
.change .bar1 { transform: rotate(-45deg) translate(-7px,6px); }
.change .bar2 { opacity: 0; }
.change .bar3 { transform: rotate(45deg) translate(-7px,-6px); }