/* Base styles for the search component */
.samplesearch form .inner-form {
    background: #fff;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 8px 20px 0 rgba(0,0,0,.15);
    border-radius: 3px;
}

.samplesearch form .inner-form .input-field input {
    height: 100%;
    background: 0 0;
    border: 0;
    display: block;
    width: 100%;
    padding: 5px 5px;
    font-size: 16px;
    color: #555;
}

.samplesearch {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: poppins, sans-serif;
    background-size: cover;
    background-position: center center;
    padding: 15px;
}

.samplesearch form .inner-form .input-field {
    height: 40px;
}

.samplesearch form .inner-form .input-field.third-wrap {
    width: 74px;
}

.samplesearch form .inner-form .input-field.third-wrap .btn-search {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    color: #fff;
    border: 0;
    cursor: pointer;
    background: #ee1e11;
    transition: all .2s ease-out, color .2s ease-out;
}

.samplesearch form .inner-form .input-field.third-wrap .btn-search svg {
    width: 16px;
}

.search-icon-black {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.search-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\'16\' height=\'16\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'white\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'feather feather-search\'><circle cx=\'11\' cy=\'11\' r=\'8\'/><line x1=\'21\' y1=\'21\' x2=\'16.65\' y2=\'16.65\'/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}


/* Responsive adjustments for screens 43em (688px) or smaller */
@media screen and (max-width: 43em) {
    .samplesearch form .inner-form {
        flex-direction: row;
        align-items: stretch; /* Make sure items stretch to the full width */
    }
.samplesearch{
	    padding-top: 20px;
    padding-bottom: 0px;
}
    .samplesearch form .inner-form .input-field {
        height: auto; /* Adjust height to fit content */
        /*margin-bottom: 10px;  Space between input and button */
    }

    .samplesearch form .inner-form .input-field.second-wrap {
        width: 100%; /* Make the input field take full width */
    }

    .samplesearch form .inner-form .input-field.third-wrap {
        width: 100%; /* Make the button take full width */
    }

    .samplesearch form .inner-form .input-field.third-wrap .btn-search {
        width: 100%; /* Ensure the button takes full width */
    }

    .samplesearch form .inner-form .input-field input {
        padding: 10px;
        font-size: 14px; /* Slightly smaller font size for smaller screens */
		width:200px;
    }
	
	
}