/* Container for the whole mega menu */
.mega-menu {
  display: none; /* Hidden by default */
  position: absolute;
  left: 0;
  width: 450px;
  background: #fff;
  box-shadow: 0px 8px 16px rgba(255, 169, 169, 0.1);
  display: flex none; /* Horizontal alignment */
  border: 1px solid #ddd;
}

.nav-item:hover .mega-menu {
  display: flex;
}

/* Left Sidebar (Major Categories) */
.major-categories {
  width: 200px;
  list-style: none;
  padding: 0;
  background: #f8f9fa;
  border-right: 1px solid #eee;
}

.cat-item {
  padding: 15px 20px;
  cursor: pointer;
  transition: background 0.3s;
}

.cat-itemx:hover {
  background: #007bff;
  color: white;
}

/* Right Content Area (Subcategories) */
.subcategory-panels {
  flex: 1; /* Takes up remaining space */
  padding: 20px;
}

.sub-panel {
  display: none; /* Hide all by default */
}

/* Logic to show panel on hover of category */
.cat-item:hover + .subcategory-panels .sub-panel,
.cat-item:nth-child(1):hover ~ .subcategory-panels #cat-1,
.cat-item:nth-child(2):hover ~ .subcategory-panels #cat-2,
.cat-item:nth-child(3):hover ~ .subcategory-panels #cat-3,
.cat-item:nth-child(4):hover ~ .subcategory-panels #cat-4 {
  display: block;
}