/* CSS styles for menu section */
.menu-section {
  position: fixed;
  top: 0;
  left: -300px; /* Start off-screen */
  width: 300px;
  height: 100%;
  background-color: rgba(34, 34, 34, 0.9); /* Translucent black background */
  transition: left 0.3s ease, transform 0.3s ease; /* Add transform transition */
  z-index: 1000; /* Ensure menu is above other content */
  overflow-y: auto; /* Enable vertical scrolling for menu content */
  padding-top: 60px; /* Add padding for menu header */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add shadow for depth effect */
  transform-origin: left; /* Set transform origin */
}

.menu-section.open {
  left: 0; /* Slide in when menu is open */
  transform: scale(1); /* Scale up when menu is open */
}

/* Additional styles for menu close button */
.menu-close {
  cursor: pointer;
  color: white;
  padding: 10px;
}

.close-icon {
  display: inline-block;
  font-size: 20px;
  margin-right: 10px;
}

/* Blur effect for non-menu content */
.blur {
  filter: blur(5px); /* Apply blur effect */
}

/* Hide overflow when menu is open */
.overflow-hidden {
  overflow: hidden;
}

/* Style for search bar */
.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px; /* Increased padding */
  border-bottom: 0.25px solid rgba(255, 255, 255, 0.2); /* Add border between sections */
}

.search-bar input {
  width: calc(100% - 30px);
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
  padding: 5px;
  font-size: 16px; /* Increased font size */
  font-weight: bold; /* Bold text */
}

.search-icon {
  cursor: pointer;
}

/* Style for menu items */
.menu-item {
  padding: 15px 20px; 
  color: white;
  cursor: pointer;
  border-bottom: 0.25px solid rgba(255, 255, 255, 0.2); 
  transition: background-color 0.3s ease, transform 0.3s ease; 
  font-size: 17px; 
  font-weight: bold; 
  display: flex; 
  justify-content: left;
  align-items: center; 
}

.menu-item:hover {
  background-color: rgba(255, 0, 0, 0.2); /* Red accent on hover */
  transform: scale(1.05); /* Scale up on hover */
}

.menu-item:last-child {
  border-bottom: none; /* Remove border for last item */
}

/* Style for close button */
.menu-close {
  position: absolute;
  top: 4px;
  left: 7px;
  cursor: pointer;
  color: white;
  transition: color 0.3s ease; /* Add color transition */
  font-size: 20px; /* Increased font size */
  font-weight: bold; /* Bold text */
  display: flex;
  align-items: center;
}

.menu-close:hover {
  color: red; /* Red accent on hover */
}

/* Style for main section */
.main-section {
  transition: filter 0.3s ease; /* Add filter transition */
}

.menu-open .main-section {
  filter: blur(5px); /* Blur main section when menu is open */
}

/* CSS styles for dropdowns */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(34, 34, 34, 0.9); /* Translucent black background */
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
  transition: top 0.3s ease, opacity 0.3s ease; /* Add transition for sliding effect and opacity */
  top: calc(100% + 10px); 
}

.dropdown.open .dropdown-content {
  display: block;
  top: 100%; /* Slide below the button when open */
  opacity: 1; /* Show the dropdown content */
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-weight: bold;
  margin-top: auto;
}

.dropdown-content a:hover {
  background-color: rgba(255, 0, 0, 0.2); /* Red accent on hover */
}

.dropdown-submenu {
  display: none;
  padding-left: 20px;
}

.dropdown.clicked .dropdown-content {
  display: block;
}

.dropdown-content .dropdown-submenu {
  display: block;
  position: absolute;
  top: 0;
  left: 100%; /* Position submenu to the right */
  padding-top: 0.5em; /* Add some spacing */
}

.menu-item.clicked + .menu-item {
  margin-top: 150px; 
}