@@include('header.htm', {
  "title": "Destination Countries & Cities - Star Travel",
  "parents": "pages",
  "active": "destination-cities"
})

@@include('page-title.htm', {
  "title": "Destinations",
  "title-border": "title-border",
  "text": "",
  "bg-image": "assets/img/pages/page-title-bg3.jpg"
})

<!-- ====================================
———	SEARCH SECTION
===================================== -->
<section class="py-10">
  <div class="container">
    <div class="bg-dark-light rounded p-6 mb-10">
      <div class="row align-items-center">
        <div class="col-xl-3">
          <div class="section-title-bg mb-1 mb-lg-3 mb-xl-0">
            <h1 class="text-white text-uppercase mb-0">Search</h1>
            <h2 class="text-white text-uppercase font-weight-bold mb-0">your <span class="text-primary">tours</span></h2>
          </div>
        </div>
  
        <div class="col-xl-9">
          <form method="GET" action="index.html">
            <div class="row">
              <div class="col-lg-10">
                <div class="row">
                  <div class="col-md-6 col-lg-3">
                    <div class="select-dropdown">
                      <div class="form-group mb-lg-0">
                        <div class="select-default select-search-box">
                          <select class="select-option">
                            <option>Destinations</option>
                            <option>USA</option>
                            <option>UK</option>
                            <option>Canada</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
  
                  <div class="col-md-6 col-lg-3">
                    <div class="form-group form-group-icon mb-lg-0">
                      <i class="fa fa-calendar" aria-hidden="true"></i>
                      <input type="text" class="form-control daterange-picker" name="dateRange" value=""
                        placeholder="MM/DD/YYYY" />
                    </div>
                  </div>
  
                  <div class="col-md-6 col-lg-3">
                    <div class="form-group form-group-icon mb-lg-0">
                      <i class="fa fa-calendar" aria-hidden="true"></i>
                      <input type="text" class="form-control daterange-picker" name="dateRange" value=""
                        placeholder="MM/DD/YYYY" />
                    </div>
                  </div>
  
                  <div class="col-md-6 col-lg-3">
                    <div class="select-dropdown">
                      <div class="form-group mb-lg-0">
                        <div class="select-default select-search-box">
                          <select class="select-option">
                            <option>$1000 - $2000</option>
                            <option>$1400 - $2000</option>
                            <option>$1600 - $2000</option>
                            <option>$1800 - $2000</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
  
              <div class="col-lg-2">
                <button class="btn btn-primary text-uppercase" type="button"
                  onclick="location.href='javascript:void(0)';">
                  Search
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="mb-9">
      <div class="row">
        <div class="col-md-6">
          <div class="media media-list-view-sm flex-column mb-8 mb-md-0">
            <div class="media-img position-relative mb-5">
              <img class="w-100 rounded" src="assets/img/cities/cities-big-01.jpg" alt="Generic placeholder image">
              <a class="media-img-overlay rounded badge-hover d-flex flex-column" href="destination-single-city.html">
                <div class="badge badge-black-Offset badge-rounded position-relative">
                  <span class="d-block text-uppercase font-size-15">
                    Eourope
                  </span>
                </div>
              </a>
            </div>

            <div class="media-body">
              <div class="row">
                <div class="col-lg-6 mb-5 mb-lg-0">
                  <div class="media media-list-sm align-items-center bg-smoke">
                    <div class="media-img">
                      <img class="w-100" src="assets/img/cities/cities-sm-01.jpg" alt="Generic placeholder image">
                      <a href="destination-single-city.html" class="media-img-overlay"></a>
                    </div>

                    <div class="media-body pl-4">
                      <a href="destination-single-city.html" class="text-uppercase h4 text-dark hover-text-primary mb-3">Rome</a>
                      <h4 class="text-primary mb-0">$6,500</h4>
                    </div>
                  </div>
                </div>
              
                <div class="col-lg-6 mb-5 mb-lg-0">
                  <div class="media media-list-sm align-items-center bg-smoke">
                    <div class="media-img">
                      <img class="w-100" src="assets/img/cities/cities-sm-02.jpg" alt="Generic placeholder image">
                      <a href="destination-single-city.html" class="media-img-overlay"></a>
                    </div>
                  
                    <div class="media-body pl-4">
                      <a href="destination-single-city.html" class="text-uppercase h4 text-dark hover-text-primary mb-3">Spain</a>
                      <h4 class="text-primary mb-0">$7,000</h4>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      
        <div class="col-md-6">
          <div class="media media-list-view-sm flex-column">
            <div class="media-img position-relative mb-5">
              <img class="w-100 rounded" src="assets/img/cities/cities-big-02.jpg" alt="Generic placeholder image">
              <a class="media-img-overlay rounded badge-hover d-flex flex-column" href="destination-single-city.html">
                <div class="badge badge-black-Offset badge-rounded position-relative">
                  <span class="d-block text-uppercase font-size-15">
                    Asia
                  </span>
                </div>
              </a>
            </div>
        
            <div class="media-body">
              <div class="row">
                <div class="col-lg-6">
                  <div class="media media-list-sm align-items-center bg-smoke mb-5 mb-lg-0">
                    <div class="media-img">
                      <img class="w-100" src="assets/img/cities/cities-sm-03.jpg" alt="Generic placeholder image">
                      <a href="destination-single-city.html" class="media-img-overlay"></a>
                    </div>
        
                    <div class="media-body pl-4">
                      <a href="destination-single-city.html" class="text-uppercase h4 text-dark hover-text-primary mb-3">China</a>
                      <h4 class="text-primary mb-0">$6,500</h4>
                    </div>
                  </div>
                </div>
        
                <div class="col-lg-6">
                  <div class="media media-list-sm align-items-center bg-smoke mb-5 mb-lg-0">
                    <div class="media-img">
                      <img class="w-100" src="assets/img/cities/cities-sm-04.jpg" alt="Generic placeholder image">
                      <a href="destination-single-city.html" class="media-img-overlay"></a>
                    </div>
        
                    <div class="media-body pl-4">
                      <a href="destination-single-city.html" class="text-uppercase h4 text-dark hover-text-primary mb-3">Nepal</a>
                      <h4 class="text-primary mb-0">$7,000</h4>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mb-9">
      <div class="row">
        <div class="col-md-6">
          <div class="media media-list-view-sm flex-column mb-8 mb-md-0">
            <div class="media-img position-relative mb-5">
              <img class="w-100 rounded" src="assets/img/cities/cities-big-03.jpg" alt="Generic placeholder image">
              <a class="media-img-overlay rounded badge-hover d-flex flex-column" href="destination-single-city.html">
                <div class="badge badge-black-Offset badge-rounded position-relative">
                  <span class="d-block text-uppercase font-size-15">
                    America
                  </span>
                </div>
              </a>
            </div>
    
            <div class="media-body">
              <div class="row">
                <div class="col-lg-6 mb-5 mb-lg-0">
                  <div class="media media-list-sm align-items-center bg-smoke">
                    <div class="media-img">
                      <img class="w-100" src="assets/img/cities/cities-sm-05.jpg" alt="Generic placeholder image">
                      <a href="destination-single-city.html" class="media-img-overlay"></a>
                    </div>
    
                    <div class="media-body pl-4">
                      <a href="destination-single-city.html" class="text-uppercase h4 text-dark hover-text-primary mb-3">Brazil</a>
                      <h4 class="text-primary mb-0">$6,500</h4>
                    </div>
                  </div>
                </div>
    
                <div class="col-lg-6 mb-5 mb-md-0">
                  <div class="media media-list-sm align-items-center bg-smoke">
                    <div class="media-img">
                      <img class="w-100" src="assets/img/cities/cities-sm-06.jpg" alt="Generic placeholder image">
                      <a href="destination-single-city.html" class="media-img-overlay"></a>
                    </div>
    
                    <div class="media-body pl-4">
                      <a href="destination-single-city.html" class="text-uppercase h4 text-dark hover-text-primary mb-3">USA</a>
                      <h4 class="text-primary mb-0">$7,000</h4>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    
        <div class="col-md-6">
          <div class="media media-list-view-sm flex-column">
            <div class="media-img position-relative mb-5">
              <img class="w-100 rounded" src="assets/img/cities/cities-big-04.jpg" alt="Generic placeholder image">
              <a class="media-img-overlay rounded badge-hover d-flex flex-column" href="destination-single-city.html">
                <div class="badge badge-black-Offset badge-rounded position-relative">
                  <span class="d-block text-uppercase font-size-15">
                    Africa
                  </span>
                </div>
              </a>
            </div>
    
            <div class="media-body">
              <div class="row">
                <div class="col-lg-6">
                  <div class="media media-list-sm align-items-center bg-smoke mb-5 mb-lg-0">
                    <div class="media-img">
                      <img class="w-100" src="assets/img/cities/cities-sm-07.jpg" alt="Generic placeholder image">
                      <a href="destination-single-city.html" class="media-img-overlay"></a>
                    </div>
    
                    <div class="media-body pl-4">
                      <a href="destination-single-city.html" class="text-uppercase h4 text-dark hover-text-primary mb-3">UK</a>
                      <h4 class="text-primary mb-0">$6,500</h4>
                    </div>
                  </div>
                </div>
    
                <div class="col-lg-6">
                  <div class="media media-list-sm align-items-center bg-smoke">
                    <div class="media-img">
                      <img class="w-100" src="assets/img/cities/cities-sm-08.jpg" alt="Generic placeholder image">
                      <a href="destination-single-city.html" class="media-img-overlay"></a>
                    </div>
    
                    <div class="media-body pl-4">
                      <a href="destination-single-city.html" class="text-uppercase h4 text-dark hover-text-primary">Vutan</a>
                      <h4 class="text-primary mb-0">$7,000</h4>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <ul class="list-unstyled d-flex flex-column flex-md-row text-center justify-content-center mb-0">
      <li class="mb-5 mb-md-0 mr-md-3">
        <a href="" class="btn btn-sm btn-outline-secondary text-uppercase py-2">All Destination</a>
      </li>

      <li>
        <a href="packages-list-left-sidebar.html" class="btn btn-sm btn-outline-secondary text-uppercase py-2">All Tours</a>
      </li>
    </ul>
  </div>
</section>

@@include('footer.htm')