.menu {
  position: relative;
  
}

.menu-button {
  font-size: 32px;
  background: none;
  border: none;
  cursor: pointer;
  display: block; 
  color:#fff;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Inline menu for larger screens */
  position: relative;
  width: 100%;
  flex-wrap: wrap;
  left: 60%;
}

.menu-list li {
  padding: 10px 15px;
  cursor: pointer;
  white-space: nowrap; /* Prevents text from breaking */
}




    .dropdown-menu {
        background-color: #444;
    }

    .dropdown-item {
        color: #fff;
    }

    .dropdown-item:hover {
        background-color: #555;
        color: #fff;
    }

  /* Show dropdown on hover */
    .nav-item:hover .dropdown-menu {
        display: block;
    }

   

/* Submenu styles */
.submenu {
  position: relative;
}

.submenu .submenu-list {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%; /* Align below parent menu item */
  left: 0;
  background-color: #c49e6c;
  padding: 0;
  border: 1px solid #ccc;
  list-style: none;
  width: 200px;
  z-index: 1000; /* Ensure it appears above other elements */
}

.submenu:hover .submenu-list,
.submenu.active .submenu-list {
  display: block;
}

.submenu-list li {
  padding: 10px;
  color: white;
}

.submenu-list li:hover {
  background-color: #a87c48;
}

/* Responsive Styles */
@media (max-width: 768px) {
  /* Show the menu button for smaller screens */
  .menu-button {
    display: block;
    margin: 10px;
  }

  /* Hide the menu list initially on small screens */
  .menu-list {
    display: none;
    flex-direction: column; /* Stack menu items vertically */
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
  }

  .menu-list li {
    padding: 15px;
    border-bottom: 1px solid #eee;
  }

  .submenu .submenu-list {
    position: relative; /* Align submenu items under the main menu */
    top: 0;
    left: 0;
    width: 100%;
  }

  .submenu-list li {
    padding-left: 20px; /* Indent submenu items */
  }
}

@media (max-width: 480px) {
  .menu-list li {
    font-size: 14px;
    padding: 12px;
  }

  .submenu-list li {
    padding-left: 15px;
    font-size: 13px;
  }
}

/* Style Menu */

        /* Main menu container */
        .styledmenu {
            display: none;
            background-color: #f7f7f7;
            /*height: 100vh;
            overflow-y: auto;*/
        }

        /* Left section (main menu items) */
        .styledmenu-menu-left {
            width: 200px;
            background-color: white;
        }

        /* Menu items */
        .styledmenu-menu-left a {
            display: block;
            padding: 15px 20px;
            text-decoration: none;
            color: black;
            font-size: 16px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }

        .styledmenu-menu-left a:hover {
            background-color: #e0f0ff;
        }

        .styledmenu-menu-left a.green {
            color: #28a745;
        }

        .styledmenu-menu-left a.orange {
            color: #ff8c00;
        }

        .styledmenu-menu-left a.red {
            color: #dc3545;
        }

        /* Right section (submenu) */
        .styledmenu-menu-right {
            flex: 1;
            background-color: #c29d74; /* Matches the screenshot color */
            padding: 20px;
            color: white;
            display: none; /* Hidden by default */
        }

        .styledmenu-menu-right.active {
            display: block; /* Display when active */
        }

        .styledmenu-menu-right h2 {
            font-size: 20px;
            margin-bottom: 15px;
            color: white;
        }

        .styledmenu-menu-right ul {
            list-style: none;
            padding: 0;
        }

        .styledmenu-menu-right li {
            margin-bottom: 10px;
            font-size: 16px;
        }