.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 {
        text-transform: uppercase;
font-weight: 500;
line-height: normal;
letter-spacing: 1.6px;
}
/* Adjust the suggestions container to align with the search input */
#suggestions-container {
        text-transform: uppercase;
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;
}