.search-outer-wrap{
     position: relative;
     z-index: 9;
     width: 100%;
     margin-top: 100px;
     clear: both; 
}

.search-inner-content{
    max-width: 500px;
    margin: auto;
    padding: 25px;
    box-sizing: border-box;
}

@media(min-width:550px){
    .search-inner-content{
        margin: 0 auto;
        padding: 35px 0px;
    }
}

@media (min-width: 1100px) {
  .search-outer-wrap{
     margin-top: 25px;
    }
}


/* FORCE ALL SEARCH ELEMENTS TO CONFORM */
.search-form * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

/* HIDE THE LABEL AND EXTRA TEXT SHOWN IN IMAGE */
.form-wrap label[for^="search_"], .search-container p {
    display: none !important;
}

/* USE FLEXBOX FOR PERFECT ALIGNMENT */
.search-form {
    display: flex !important;
    width: 90% !important; /* Flexible width: 90% of the screen width */
    max-width: 500px !important; /* Maximum boundary: Stops growing after 600px */
    margin: 0 auto !important; /* Centers the form horizontally */
    align-content: center !important;
    justify-content:center !important;
}

/* INPUT FIELD STYLING */
.search-form input[type="search"] {
    flex-grow: 1 !important;
    padding: 10px !important;
    font-size: 14px !important;
    border: 1px solid #ccc !important;
    border-radius: 3px 0 0 3px !important;
    background: #ffffff;
    height: 38px !important;
    min-width: 0 !important;
    color: #303B5B !important;
}

/* SUBMIT BUTTON STYLING */
.search-form input.search-submit-button {
    width: auto !important; /* PREVENTS STRETCHING */
    padding: 10px 15px !important;
    background: #d3d3d3 !important;
    color: #303B5B !important;
    border: 1px solid #d3d3d3 !important;
    border-radius: 0 3px 3px 0 !important;
    height: 38px !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    
    padding: 10px 15px !important; /* Adds padding around the text */
    line-height: normal !important; /* Forces text to sit in the middle of the height */
    text-align: center !important; /* Ensures horizontal centering */
    vertical-align: middle !important; /* Ensures vertical centering */
    display: inline-block !important; /* Ensures alignment properties work correctly */
}

.search-form::after{
    display:none;
}

/* Ensure the main form aligns */
.search-form form {
    gap: 0 !important; /* Removes gap if using flexbox */
}

/* Change placeholder text color for most browsers */
.search-form input[type="search"]::placeholder { /* Targets Chrome, Firefox, Safari, Edge */
    color: #d3d3d3 !important; /* A light gray color */
    opacity: 1 !important; /* Ensures it is not transparent in Firefox */
}

/* Specific CSS for Internet Explorer 10+ */
.search-form input[type="search"]:-ms-input-placeholder { /* Targets IE 10+ */
    color: #d3d3d3 !important;
}