<!-- Hero Section -->
            <div class="gradient-overlay-half-white-v2 bg-img-hero" style="background-image: url(../../assets/img/demo/hotel/jumbotron.jpg);">
              <div class="d-lg-flex align-items-lg-center flex-lg-column pb-sm-6">
                <div class="container space-2 space-3--sm space-4--lg">
                  <!-- Title -->
                  <div class="w-lg-50 mb-4 mb-sm-9 pb-1">
                    <h6 class="text-uppercase text-gray-700 font-weight-medium letter-spacing-0_06 mb-3">Welcome to Space Hotel</h6>
                    <h2 class="display-4 font-size-48--md-down mb-3">Enjoy your stay,<br class="d-none d-lg-inline-block"> feels like at <strong class="text-primary">home</strong></h2>
                    <p>Enjoy the new experiences that we offer and we'll guarantee<br class="d-none d-md-inline-block"> you that this one would be an awesome occasion</p>
                  </div>
                  <!-- End Title -->

                  <form class="bg-white rounded shadow-sm p-5" action="#">
                    <div class="row">
                      <div class="col-md-6 col-lg-3">
                        <div class="form-group mb-3">
                          <label class="text-uppercase font-weight-medium">Check-in</label>
                          <div id="datepickerWrapperFrom" class="u-datepicker input-group">
                            <div class="input-group-prepend">
                              <div id="calendarFromLabel" class="input-group-text">
                                <i class="svg-icon svg-icon-xs text-muted">
                                  <svg viewBox="0 0 24 24" width="24" height="24" class="stroke-gray-200" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                                </i>
                              </div>
                            </div>

                            <input class="js-range-datepicker form-control bg-white text-muted" type="text" placeholder="mm/dd/yyyy" aria-label="From" aria-describedby="calendarFromLabel"
                                   data-rp-wrapper="#datepickerWrapperFrom"
                                   data-rp-date-format="D, M d">
                          </div>
                        </div>
                      </div>

                      <div class="col-md-6 col-lg-3">
                        <div class="form-group mb-3">
                          <label class="text-uppercase font-weight-medium">Check-out</label>
                          <div id="datepickerWrapperTo" class="u-datepicker input-group">
                            <div class="input-group-prepend">
                              <div id="calendarToLabel" class="input-group-text">
                                <i class="svg-icon svg-icon-xs text-muted">
                                  <svg viewBox="0 0 24 24" width="24" height="24" class="stroke-gray-200" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                                </i>
                              </div>
                            </div>

                            <input class="js-range-datepicker form-control bg-white text-muted" type="text" placeholder="mm/dd/yyyy" aria-label="To" aria-describedby="calendarToLabel"
                                   data-rp-wrapper="#datepickerWrapperTo"
                                   data-rp-date-format="D, M d">
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-6">
                        <div class="row align-items-end">
                          <div class="col-9">
                            <div class="form-group mb-3">
                              <label class="text-uppercase font-weight-medium">Guests</label>
                              <div class="dropdown">
                                <div class="u-guests input-group position-relative" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="group">
                                  <div class="input-group-prepend z-index-2">
                                    <div class="input-group-text">
                                      <i class="svg-icon svg-icon-2xs text-muted">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18">
                                          <path d="M14.286,18H1.715A1.7,1.7,0,0,1,0,16.313V14.85a4.768,4.768,0,0,1,4.8-4.725h.6a6.307,6.307,0,0,0,5.207,0h.6A4.769,4.769,0,0,1,16,14.85v1.462A1.7,1.7,0,0,1,14.286,18ZM8,9A4.541,4.541,0,0,1,3.429,4.5a4.572,4.572,0,0,1,9.142,0A4.541,4.541,0,0,1,8,9Z" fill="#000000" />
                                        </svg>
                                      </i>
                                    </div>
                                  </div>

                                  <input class="js-string-unifier u-guests__input form-control bg-white text-muted" type="text" value="1 Guest" readonly
                                         data-su-options='{
                                           "data": [
                                             {
                                               "title": "Guest",
                                               "titleMultiplier": "s",
                                               "target": ["#adultsQty", "#childrenQty"]
                                             },
                                             {
                                               "title": "Infant",
                                               "titleMultiplier": "s",
                                               "target": ["#infantsQty"]
                                             }
                                           ]
                                         }'>

                                  <svg class="u-guests__input-i" xmlns="http://www.w3.org/2000/svg" width="11.964" height="6.974" viewBox="0 0 11.964 6.974">
                                    <g data-name="chevron down" transform="translate(-0.018 -0.013)">
                                      <path d="M5.517,6.789.193,1.675a.614.614,0,0,1,0-.893l.621-.6a.677.677,0,0,1,.929,0l4.24,4.053L10.222.184a.677.677,0,0,1,.929,0l.621.6a.614.614,0,0,1,0,.893L6.447,6.789A.677.677,0,0,1,5.517,6.789Z" transform="translate(0.018 0.013)" />
                                    </g>
                                  </svg>
                                </div>

                                <div class="dropdown-menu dropdown-menu-right font-size-base u-guests-options p-4 shadow">
                                  <div class="d-flex justify-content-between mb-3">
                                    <div class="u-guests-options__label font-weight-medium">
                                      Adults
                                      <em class="small u-guests-options__label-info">Above 12</em>
                                    </div>

                                    <div class="js-quantity u-guests-options__data d-flex align-items-center"
                                         data-min-val="1">
                                      <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>

                                      <span id="adultsQty" class="js-result u-guests-options__value">1</span>

                                      <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                              <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>
                                    </div>
                                  </div>

                                  <div class="d-flex justify-content-between mb-3">
                                    <div class="u-guests-options__label font-weight-medium">
                                      Children
                                      <em class="small u-guests-options__label-info">Ages 2–12</em>
                                    </div>

                                    <div class="js-quantity u-guests-options__data d-flex align-items-center">
                                      <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>

                                      <span id="childrenQty" class="js-result u-guests-options__value">0</span>

                                      <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                              <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>
                                    </div>
                                  </div>

                                  <div class="d-flex justify-content-between mb-3">
                                    <div class="u-guests-options__label font-weight-medium">
                                      Infants
                                      <em class="small u-guests-options__label-info">Under 2</em>
                                    </div>

                                    <div class="js-quantity u-guests-options__data d-flex align-items-center">
                                      <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>

                                      <span id="infantsQty" class="js-result u-guests-options__value">0</span>

                                      <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                              <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>
                                    </div>
                                  </div>

                                  <div class="text-right">
                                    <a class="u-guests-options__apply" href="javascript:;">Apply</a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="col-3 pl-0 pl-sm-3">
                            <button type="submit" class="btn btn-primary d-block w-100 mb-3 px-2 px-sm-3">
                              <i class="svg-icon svg-icon-2xs text-white">
                                <svg xmlns="http://www.w3.org/2000/svg" width="17.998" height="17.967" viewBox="0 0 17.998 17.967">
                                  <g transform="translate(0 0)">
                                    <path  d="M16.161,17.967a.839.839,0,0,1-.6-.248l-3.506-3.5a.838.838,0,0,1-.246-.6v-.572a7.3,7.3,0,1,1,1.265-1.264h.573a.842.842,0,0,1,.6.246l3.506,3.5a.848.848,0,0,1,0,1.193l-1,.993A.83.83,0,0,1,16.161,17.967ZM7.312,2.807a4.491,4.491,0,1,0,4.5,4.491A4.5,4.5,0,0,0,7.312,2.807Z" fill="#000000"/>
                                  </g>
                                </svg>
                              </i>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- End Hero Section -->