/* Basic Menu Styling */
.nav-links, .submenu {
  list-style: none !important;
  margin: 0; 
  padding: 0;
}

.nav-links {
  display: flex;
  background: #333;
}

/* Active State Highlighting */
.nav-links li.active > a {
  background-color: #555; 
  color: #ffcc00;         
  font-weight: bold;
}

.nav-links li { position: relative; }

.nav-links li a {
  font-family: Arial, Helvetica, sans-serif;  
  font-size: 13px;  
  font-weight: bold;  
  padding: 8px 15px;
  display: block;
  color: white;
  text-decoration: none;
}

/* 1. HIDE the submenu by default */
.submenu {
  display: none; 
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;
  min-width: 150px;
  z-index: 9999; /* Boosted to ensure it stays on top */
}

/* 2. SHOW the submenu on hover (Fixed the broken comment here) */
.dropdown:hover .submenu {
  display: block !important;
}

.submenu li a:hover { background: #555; }

.arrow {
  font-size: 9px;         
  vertical-align: middle; 
  margin-left: 5px;       
  opacity: 0.7;           
}

/* This changes the background color of 'About', 'Products', or 'Contact' on hover */
.nav-links li:hover > a {
    background-color: #444; /* A slightly lighter shade than the main bar */
    color: #ffcc00;         /* Optional: makes the text gold on hover too */
}

/* This ensures that if a page is already 'active', it keeps its color on hover */
.nav-links li.active:hover > a {
    background-color: #555; /* Keeps the active grey */
}

/* This handles the hover color for the items INSIDE the dropdown */
.submenu li a:hover {
    background-color: #666 !important;
    color: #ffffff;
}