.full-width-bar {
  position: fixed;
  width: 100%;
  height: 55px;
  top: 160px; /* Adjust according to the height of your navbar */
  z-index: 1000;
  background-color: #ffffff; /* White background for the entire bar */
  padding: 9px 5% 9px 5%; /* Symmetrical padding for a balanced layout */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow for depth */
}

.search-bar-container {
  position: absolute; /* Position it absolutely within the fixed full-width-bar */
  right: 5%; /* Align it to the right with a margin */
  margin-top: 0; /* Remove any top margin as it's now within a bar */
  width: 30%; /* Maintain the width for the search part */
}

/* Ensure the form fills the search bar container */
.search-bar-container form {
  display: flex;
  width: 100%;
}
.form-control {
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1.6px;
}
/* Adjust the suggestions container to align with the search input */
#suggestions-container {
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1.6px;
  position: absolute;
  background: #ffffff;
  width: calc(100% - 30px); /* Adjust width considering padding */
  border: 1px solid #ccc;
  border-top: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 5;
  max-height: 500px;
  overflow-y: auto;
  border-radius: 0 0 4px 4px;
  top: 45px; /* Adjust based on the input height */
}

/* Style adjustments for responsiveness and interactivity */
.suggestion-item {
  padding: 10px 15px;
  cursor: pointer;
  line-height: 1.5;
}

.suggestion-item:hover,
.suggestion-item:focus {
  background-color: #f8f9fa;
}

.selected {
  background-color: #f0f0f0;
}