/* Dropdown menu styles */
/* Base styles for the dropdown */
.dropdown {
  position: absolute;
  width: 46%;
  max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  border: 1px solid #ccc;
  background-color: #fff;
  right: 0; /* Align to the right side of the page */
}

/* Style for each item in the dropdown */
.dropdown-item {
  padding: 10px;
  cursor: pointer;
}

@media (max-width: 600px) {
  .dropdown {
    width: 100%; /* Make the dropdown full width on mobile */
    right: 5%; /* Add some padding on the right */
     max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  border: 1px solid #ccc;
  background-color: #fff;
  right: 0; /* Align to the right side of the page */
  }
}
#searchContainer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  position: relative;
  width: 100%; /* Ensure the container takes the full width */
}

/* Base styles for the search input */
#searchInput {
  width: 40%; /* Default width for larger screens */
  transition: width 0.3s ease; /* Smooth transition for width change */
}

/* Media query for tablets and mobile devices */
@media (max-width: 1024px) {
  #searchInput {
    width: 70%; /* Increase width on tablets */
  }
}

@media (max-width: 600px) {
  #searchInput {
    width: 80%; /* Increase width on mobile devices */
  }
}

/* Additional styles */
#closeSymbol {
  width: 2%;
  cursor: pointer;
}

/* Hover effect for dropdown items */
.dropdown-item:hover {
  background-color: #f0f0f0;
}
/* Optional: Adjust the style of the search button */
#searchButton {
  padding: 15px;
  border: none;
  cursor: pointer;
}
.close-symbol {
    display: none;
    cursor: pointer;
    margin-left: 5px;
    color: red;
    font-size: 2.5em; /* Increase font size */
}