<div class="position-relative">
    <div class="pt-2 page-title bg-overlay"
         style="background-image: url('../../../images/BG2.jpg');background-size: cover;background-position: center">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb text-light mb-0 p-0">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Agencies</li>
                </ol>

            </nav>
            <h1 class="fs-32 mb-0 text-white font-weight-500 text-center pt-10 pb-9 lh-17 mxw-478">Most Trusted <br>
                Real Estate Agencies</h1>
        </div>
    </div>
    <div class="bg-secondary">
        <div class="container">
            <div class="py-2">
                <form class="d-none d-md-flex row no-gutters px-n1 flex-wrap align-items-end">
                    <div class="form-group py-1 col-md-3 px-1 mb-0">
                        <label for="region02" class="sr-only">Region</label>
                        <select class="form-control selectpicker" name="region"
                                id="region02" data-style="bg-white btn-lg rounded-lg" title="Region">
                            <option>Austin</option>
                            <option>Boston</option>
                            <option>Chicago</option>
                            <option>Denver</option>
                            <option>Los Angeles</option>
                            <option>New York</option>
                            <option>San Francisco</option>
                        </select>
                    </div>

                    <div class="form-group py-1 col-md-7 px-1 mb-0">
                        <label for="search02" class="sr-only">Search</label>
                        <div class="input-group input-group-lg">
                            <div class="input-group-prepend mr-n1">
                        <span class="fs-18 input-group-text bg-white border-0"><i
                                class="fal fa-search"></i></span>
                            </div>
                            <input type="text" id="search02" name="search"
                                   class="form-control border-0 bg-white shadow-none"
                                   placeholder="Search by agent’s name…">

                        </div>
                    </div>
                    <div class="col-md-2 py-1 px-1">
                        <button type="submit" class="btn btn-primary btn-lg btn-block">
                            Search
                        </button>
                    </div>
                </form>
                <form class="d-block d-md-none">
                    <div class="d-flex align-items-center">
                        <a class="text-white hover-primary d-inline-block fs-24 lh-1 mr-5" data-toggle="collapse"
                       href="#collapseMobileSearch-02"
                       role="button" aria-expanded="false" aria-controls="collapseMobileSearch-02">
                            <i class="fal fa-cog"></i>
                        </a>
                        <div class="form-group mb-0 w-100">
                            <label for="search04" class="sr-only">Search</label>
                            <div class="input-group input-group-lg">
                                <input type="text" id="search04"
                                       class="form-control border-0 bg-white shadow-none"
                                       placeholder="Search by agent’s name…" name="search">
                                <div class="input-group-append ml-n1">
                        <span class="fs-18 input-group-text bg-white border-0"><i
                                class="fal fa-search"></i></span>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="collapse" id="collapseMobileSearch-02">
                        <div class="card card-body border-0 pr-0 pl-8 bg-transparent">
                            <div class="form-group">
                                <label for="region04" class="sr-only">Region</label>
                                <select class="form-control selectpicker" name="region"
                                        id="region04" title="Region" data-style="bg-white btn-lg rounded-lg">
                                    <option>Austin</option>
                                    <option>Boston</option>
                                    <option>Chicago</option>
                                    <option>Denver</option>
                                    <option>Los Angeles</option>
                                    <option>New York</option>
                                    <option>San Francisco</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary btn-lg btn-block">
                                Search
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>