Form - Search

                    
                      <!-- Search -->
                      <div class="container">
                        <div class="row justify-content-md-between align-items-md-center">
                          <div class="col-md-5 mb-3 mb-md-0">
                            <h2 class="h5 mb-0">24 Results <small class="text-body">for "Developer tools"</small></h2>
                          </div>

                          <div class="col-md-7 col-lg-6 text-md-right">
                            <!-- Input -->
                            <form class="input-group input-group-merge">
                              <input type="search" class="form-control" placeholder="Search an app" aria-label="Search an app" aria-describedby="searchApp">
                              <div class="input-group-append">
                                <span class="input-group-text" id="searchApp">
                                  <i class="fas fa-search"></i>
                                </span>
                              </div>
                            </form>
                            <!-- End Input -->
                          </div>
                        </div>
                      </div>
                      <!-- End Search -->
                    
                  

                    
                      <!-- Search Section -->
                      <div class="bg-dark">
                        <div class="bg-img-hero-center" style="background-image: url(../assets/svg/components/abstract-shapes-19.svg);">
                          <div class="container space-1">
                            <div class="w-lg-80 mx-lg-auto">
                              <!-- Input -->
                              <form class="input-group input-group-merge input-group-borderless">
                                <div class="input-group-prepend">
                                  <span class="input-group-text" id="askQuestions">
                                    <i class="fas fa-search"></i>
                                  </span>
                                </div>
                                <input type="search" class="form-control" placeholder="Search for answers" aria-label="Search for answers" aria-describedby="askQuestions">
                              </form>
                              <!-- End Input -->
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Search Section -->
                    
                  

                    
                      <!-- Hero Section -->
                      <div class="gradient-x-three-sm-primary">
                        <div class="container space-2">
                          <!-- Card -->
                          <div class="card p-2 mb-3">
                            <!-- Input Group -->
                            <div class="form-row input-group-borderless">
                              <div class="col-sm mb-2 mb-md-0">
                                <div class="input-group input-group-merge input-group-borderless">
                                  <div class="input-group-prepend">
                                    <div class="input-group-text">
                                      <i class="fas fa-search"></i>
                                    </div>
                                  </div>

                                  <input type="text" class="form-control" placeholder="Job title, skills, or company" aria-label="Job title, skills, or company">
                                </div>
                              </div>

                              <div class="col-sm d-sm-none">
                                <hr class="my-0">
                              </div>
                              
                              <div class="col-sm column-divider-sm mb-2 mb-md-0">
                                <div class="input-group input-group-merge input-group-borderless">
                                  <div class="input-group-prepend">
                                    <div class="input-group-text">
                                      <i class="fas fa-map-marker-alt"></i>
                                    </div>
                                  </div>

                                  <input type="text" class="form-control" placeholder="City, state, or zip" aria-label="City, state, or zip" value="London, UK">
                                </div>
                              </div>

                              <div class="col-md-auto">
                                <button type="button" class="btn btn-block btn-primary px-5">Search</button>
                              </div>
                            </div>
                            <!-- End Input Group -->
                          </div>
                          <!-- End Card -->

                          <div class="row align-items-center">
                            <div class="col-md-auto mr-n3 mb-3 mb-lg-0">
                              <h6 class="mb-0">Limit search to:</h6>
                            </div>

                            <div class="col-md mb-3 mb-lg-0">
                              <!-- Checkbox -->
                              <ul class="list-inline mb-0">
                                <li class="list-inline-item">
                                  <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="searchJobTitleCheck" checked>
                                    <label class="custom-control-label" for="searchJobTitleCheck">Job title</label>
                                  </div>
                                </li>

                                <li class="list-inline-item">
                                  <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="searchSkillsCheck">
                                    <label class="custom-control-label" for="searchSkillsCheck">Skills</label>
                                  </div>
                                </li>

                                <li class="list-inline-item">
                                  <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="searchCompaniesCheck">
                                    <label class="custom-control-label" for="searchCompaniesCheck">Companies</label>
                                  </div>
                                </li>

                                <li class="list-inline-item">
                                  <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="searchStudyFieldCheck">
                                    <label class="custom-control-label" for="searchStudyFieldCheck">Filed of study</label>
                                  </div>
                                </li>
                              </ul>
                              <!-- End Checkbox -->
                            </div>

                            <div class="col-lg-auto">
                              <!-- Checkbox Switch -->
                              <label class="toggle-switch d-flex align-items-center" for="remoteOnlySwitch">
                                <input type="checkbox" class="toggle-switch-input" id="remoteOnlySwitch">
                                <span class="toggle-switch-label">
                                  <span class="toggle-switch-indicator"></span>
                                </span>
                                <span class="toggle-switch-content">
                                  <span class="d-block">Remote only</span>
                                </span>
                              </label>
                              <!-- End Checkbox Switch -->
                            </div>
                          </div>
                          <!-- End Row -->
                        </div>
                      </div>
                      <!-- End Hero Section -->