############################################################# HTML:

<form method="get" action="{{route('search')}}" class="search" id="main-search-form">
        {{--{{ csrf_field() }}--}}
        <div class="search-bar">
            <div class="search-forms">
                <div class="search-1">
                    <input type="text" value="{{request()->get('q')}}" id="main-search" name="q"
                           placeholder="Kërkoni...">
                </div>
                <div class="vertical-line"></div>
                <div class="search-2">
                    <select name="country" id="vendndodhja">
                        <option value="default" selected disabled>Vendndodhja</option>
                        <option value="">Cdo Shtet</option>
                        @foreach($countries as $country)
{{--                            <option value="{{$city->id}}">{{$city->name}}</option>--}}
                            <option value="{{$country->id}}" {{ (request()->get("country") == $country->id ? "selected":"")}}>{{$country->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="vertical-line"></div>
                <div class="search-3">
                    <select name="category" id="kategoria">
                        <option value="" selected disabled>Kategoria</option>
                        <option value="">Cdo Kategori</option>
                        @foreach($categories_main as  $category)
                            <option style="background: rgba(148,148,148,0.3);: #929292;"
                                    label="{{$category->name}}" value="{{$category->slug}}"></option>

                            @foreach($category->children as $children)
                                <option value="{{$children->slug}}">{{$children->name}}</option>
                            @endforeach
                        @endforeach
                    </select>
                    {{--<p>Kategoria</p>--}}
                </div>
            </div>
            <div class="buton-div">
                <button id="buton-kerko" type="submit">
                    <p><i class="fas fa-search mr-1"></i>Kërko</p>
                </button>
            </div>
        </div>
    </form>

####################################################### CSS:

#main-search-form {
    margin-top: 2rem;
}
.search-bar {
    justify-content: center;
    margin-bottom: 2rem;
}
.search-bar, .search-forms {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}
.search-forms {
    /* display: grid; */
    /* grid-template-columns: 40% 30% 30%; */
    border-radius: 5px;
    border: 1px solid var(--light-gray);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    /* margin-right: 1em; */
    overflow: hidden;
    background: #ffffff;
    align-items: center;
    /* padding: 5px 0; */
    width: 65%;
    height: 42px;
}
.search-1, .search-2, .search-3 {
    font-family: NexaLight, sans-serif;
    color: var(--med-gray);
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    padding-top: 3px;
    width: 33%;
    font-size: 18px;
}
.search-1 {
    padding-left: 10px;
}
.search-forms .vertical-line {
    width: 2px;
    background: var(--light-gray);
    height: 80%;
    align-self: center;
}
#main-search {
    background-color: #27272700;
    border: none;
    color: var(--font-color);
    border-right: 1px solid #fff;
}
#vendndodhja {
    border: none;
    background: #27272700;
    /* padding: 10px; */
    color: #91878d;
    width: 100%;
    height: 100%;
}
#kategoria {
    border: none;
    background: #27272700;
    /* padding: 10px; */
    color: #91878d;
    width: 100%;
    height: 100%;
}
#kategoria option {
    font-family: NexaLight, sans-serif;
    font-size: 18px;
}
#buton-kerko {
    border-radius: 5px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    background-color: var(--main-color);
    display: block;
    border: none;
    height: 100%;
    padding: 0 25px;
    color: #FFFFFF;
    font-family: 'NexaLight', sans-serif;
}
.search p {
    color: white;
    /* margin-bottom: 5px; */
}