/* Container for the search bar */
#homepage-hero-search {
    position: relative;
    width: 100%;
    max-width: 477px; /* Adjust the width as needed */
}

/* Input field styling */
#homepage-hero-search-input {
    width: 100% !important;
    padding-right: 50px; /* Add space for the button */
    height: 40px;
    box-sizing: border-box; /* Ensures padding doesn't affect the overall width */
    border-radius: 7px;
    border: 2px solid #001F5B;
    font-family: Gotham;
    font-size: 20px;
    font-weight: 700;
    line-height: 50px;
    text-align: left;
    color: #001F5B;
    max-width: 477px;
    padding: 25px 20px;
}

#homepage-hero-search-input:focus {
    outline: 1px solid #001F5B;
}
/* Button styling */
#homepage-hero-search-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    border: none;
    background-color: #d11f3e; /* Customize button color */
    color: white; /* Button text color */
    padding: 11px 15px; /* Add padding for button content */
    cursor: pointer; /* Change cursor to pointer */
    font-size: 20px; /* Adjust font size as needed */
    font-family: Gotham;
    font-weight: 700;
    line-height: 23px;
    text-align: left;
    text-transform: capitalize;
    border-radius: 4px;
}
@media (max-width: 768px) {
    #homepage-hero-search-input {
        font-size: 16px;
    }
    /* Button styling */
    #homepage-hero-search-btn {
        position: absolute;
        right: 5px;
        top: 5px;
        bottom: 5px;
        border: none;
        background-color: #d11f3e; /* Customize button color */
        color: white; /* Button text color */
        padding: 11px 15px; /* Add padding for button content */
        cursor: pointer; /* Change cursor to pointer */
        font-size: 16px; /* Adjust font size as needed */
        font-family: Gotham;
        font-weight: 700;
        line-height: 23px;
        text-align: left;
        text-transform: capitalize;
        border-radius: 4px;
    }

}