@extends('frontend.layouts.app', ['title' => 'Property Detail | New Florida', 'innerHeader' => true])

@section('content')
@if(session('payment_success'))
<section class="pt-20">
  <div class="container">
    <div class="alert alert-success rounded-4">{{ session('payment_success') }}</div>
  </div>
</section>
@endif
<section class="py-10 d-flex items-center bg-light-2">
      <div class="container">
        <div class="row y-gap-10 items-center justify-between">
          <div class="col-auto">
            <div class="row x-gap-10 y-gap-5 items-center text-14 text-light-1">
              <div class="col-auto">
                <div class="">Home</div>
              </div>
              <div class="col-auto">
                <div class="">></div>
              </div>
              <div class="col-auto">
                <div class="">Miramar Beach</div>
              </div>
              <div class="col-auto">
                <div class="">></div>
              </div>
              <div class="col-auto">
                <div class="text-dark-1">Property #19920</div>
              </div>
            </div>
          </div>

          <div class="col-auto">
            <a href="#" class="text-14 text-blue-1 underline">All Property in Miramar Beach</a>
          </div>
        </div>
      </div>
    </section>

    <div class="singleMenu js-singleMenu">
      <div class="singleMenu__content">
        <div class="container">
          <div class="row y-gap-20 justify-between items-center">
            <div class="col-auto">
              <div class="singleMenu__links row x-gap-30 y-gap-10">
                <div class="col-auto">
                  <a href="#overview">Overview</a>
                </div>

                <div class="col-auto">
                  <a href="#facilities">Facilities</a>
                </div>
                <div class="col-auto">
                  <a href="#reviews">Reviews</a>
                </div>                
                <div class="col-auto">
                  <a href="#faq">Faq</a>
                </div>
              </div>
            </div>

            <div class="col-auto">
              <div class="row x-gap-15 y-gap-15 items-center">
                <div class="col-auto">
                  <div class="text-14">
                    From
                    <span class="text-22 text-dark-1 fw-500">US$72</span>
                  </div>
                </div>

                <div class="col-auto">

                  <a href="#" class="button h-50 px-24 -dark-1 bg-blue-1 text-white">
                    Check Availability <div class="icon-arrow-top-right ml-15"></div>
                  </a>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <section class="pt-40">
      <div class="container">
        <div class="row y-gap-20 justify-between items-end">
          <div class="col-auto">
            <div class="row x-gap-20  items-center">
              <div class="col-auto">
                <h1 class="text-30 sm:text-25 fw-600">Hidden Dunes Cottage 181</h1>
              </div>

              <div class="col-auto">

                <i class="icon-star text-10 text-yellow-1"></i>

                <i class="icon-star text-10 text-yellow-1"></i>

                <i class="icon-star text-10 text-yellow-1"></i>

                <i class="icon-star text-10 text-yellow-1"></i>

                <i class="icon-star text-10 text-yellow-1"></i>

              </div>
            </div>

            <div class="row x-gap-20 y-gap-20 items-center">
              <div class="col-auto">
                <div class="d-flex items-center text-15 text-light-1">
                  <i class="icon-location-2 text-16 mr-5"></i>
                   Hidden Dunes Gulf and Racquet Resort, Miramar Beach
                </div>
              </div>

              <div class="col-auto">
                <button data-x-click="mapFilter" class="text-blue-1 text-15 underline">Show on map</button>
              </div>
            </div>
          </div>

          <div class="col-auto">
            <div class="row x-gap-15 y-gap-15 items-center">
              <div class="col-auto">
                <div class="text-14">
                  From
                  <span class="text-22 text-dark-1 fw-500">US$72</span>
                </div>
              </div>

              <div class="col-auto">

                <a href="#" class="button h-50 px-24 -dark-1 bg-blue-1 text-white">
                  Check Availability <div class="icon-arrow-top-right ml-15"></div>
                </a>

              </div>
            </div>
          </div>
        </div>

        <div class="galleryGrid -type-1 pt-30">
          <div class="galleryGrid__item relative d-flex">
            <img src="img/property/1.jpg" alt="image" class="rounded-4">

            <div class="absolute px-20 py-20 col-12 d-flex justify-end">
              <button class="button -blue-1 size-40 rounded-full flex-center bg-white text-dark-1">
                <i class="icon-heart text-16"></i>
              </button>
            </div>
          </div>

          <div class="galleryGrid__item">
            <img src="img/property/2.jpg" alt="image" class="rounded-4">
          </div>

          <div class="galleryGrid__item relative d-flex">
            <img src="img/property/3.jpg" alt="image" class="rounded-4">

            <div class="absolute h-full col-12 flex-center">
              <a href="https://www.youtube.com/watch?v=ANYfx4-jyqY" class="button -blue-1 size-40 rounded-full flex-center bg-white text-dark-1 js-gallery" data-gallery="gallery1">
                <i class="icon-play text-16"></i>
              </a>
            </div>
          </div>

          <div class="galleryGrid__item">
            <img src="img/property/4.jpg" alt="image" class="rounded-4">
          </div>

          <div class="galleryGrid__item relative d-flex">
            <img src="img/property/5.jpg" alt="image" class="rounded-4">

            <div class="absolute px-10 py-10 col-12 h-full d-flex justify-end items-end">
              <a href="img/property/1.jpg" class="button -blue-1 px-24 py-15 bg-white text-dark-1 js-gallery" data-gallery="gallery2">
                See All 10 Photos
              </a>
              <a href="img/property/2.jpg" class="js-gallery" data-gallery="gallery2"></a>
              <a href="img/property/3.jpg" class="js-gallery" data-gallery="gallery2"></a>
              <a href="img/property/4.jpg" class="js-gallery" data-gallery="gallery2"></a>
              <a href="img/property/5.jpg" class="js-gallery" data-gallery="gallery2"></a>
              <a href="img/property/6.jpg" class="js-gallery" data-gallery="gallery2"></a>
              <a href="img/property/7.jpg" class="js-gallery" data-gallery="gallery2"></a>
              <a href="img/property/8.jpg" class="js-gallery" data-gallery="gallery2"></a>
              <a href="img/property/9.jpg" class="js-gallery" data-gallery="gallery2"></a>
              <a href="img/property/10.jpg" class="js-gallery" data-gallery="gallery2"></a>

            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="pt-30">
      <div class="container">
        <div class="row y-gap-30">
          <div class="col-xl-8">
            <div class="row y-gap-40">
              <div class="col-12">
                <h3 class="text-22 fw-500">Property highlights</h3>
                <div class="row y-gap-20 pt-30">

                  <div class="col-lg-3 col-6">
                    <div class="text-center">
                      <i class="icon-city text-24 text-blue-1"></i>
                      <div class="text-15 lh-1 mt-10">In Miramar Beach Condo</div>
                    </div>
                  </div>

                  <div class="col-lg-3 col-6">
                    <div class="text-center">
                      <i class="icon-user-2 text-24 text-blue-1"></i>
                      <div class="text-15 lh-1 mt-10">Sleeps 8</div>
                    </div>
                  </div>

                  <div class="col-lg-3 col-6">
                    <div class="text-center">
                      <i class="icon-bed text-24 text-blue-1"></i>
                      <div class="text-15 lh-1 mt-10">2 bedrooms</div>
                    </div>
                  </div>

                  <div class="col-lg-3 col-6">
                    <div class="text-center">
                      <i class="icon-bathtub text-24 text-blue-1"></i>
                      <div class="text-15 lh-1 mt-10">3 bathrooms</div>
                    </div>
                  </div>

                </div>
              </div>

              <div id="overview" class="col-12">
                <h3 class="text-22 fw-500 pt-40 border-top-light">Overview</h3>
                <p class="text-dark-1 text-15 mt-20">
                  Hidden Dunes Cottage 181 Professionally Managed by Newman-Dailey
                  <br>
                  Cottage 181 is an upstairs rental accessible by exterior staircase from the parking lot. There is an additional loft bedroom within the Cottage accessible by spiral staircase.
                  <br>
                  Perfectly proportioned this Hidden Dunes Cottage is a nature lover’s paradise! To the right of the stairs is the walkway to a bubbling fountain and grilling area and to the left is a walk through leading you directly to one of the pools.
                  <br>
                  Inside, earthy elements including hardwood floors, granite counters and a stone tile backsplash compliment the lush magnolia and oak forests of Hidden Dunes. Pride in ownership is obvious in the upgraded appliances, beautiful Italian artwork and classic plantation shutters. Natural beauty combined with exquisite taste has fashioned a restful retreat from a busy workweek.
                </p>
                <a href="#" class="d-block text-14 text-blue-1 fw-500 underline mt-10">Show More</a>
              </div>

              <div class="col-12">
                <h3 class="text-22 fw-500 pt-40 border-top-light">Most Popular Facilities</h3>
                <div class="row y-gap-10 pt-20">

                  <div class="col-md-5">
                    <div class="d-flex x-gap-15 y-gap-15 items-center">
                      <i class="icon-no-smoke"></i>
                      <div class="text-15">Non-smoking rooms</div>
                    </div>
                  </div>

                  <div class="col-md-5">
                    <div class="d-flex x-gap-15 y-gap-15 items-center">
                      <i class="icon-wifi"></i>
                      <div class="text-15">Free WiFi</div>
                    </div>
                  </div>

                  <div class="col-md-5">
                    <div class="d-flex x-gap-15 y-gap-15 items-center">
                      <i class="icon-parking"></i>
                      <div class="text-15">Parking</div>
                    </div>
                  </div>

                  <div class="col-md-5">
                    <div class="d-flex x-gap-15 y-gap-15 items-center">
                      <i class="icon-kitchen"></i>
                      <div class="text-15">Kitchen</div>
                    </div>
                  </div>

                  <div class="col-md-5">
                    <div class="d-flex x-gap-15 y-gap-15 items-center">
                      <i class="icon-living-room"></i>
                      <div class="text-15">Living Area</div>
                    </div>
                  </div>

                  <div class="col-md-5">
                    <div class="d-flex x-gap-15 y-gap-15 items-center">
                      <i class="icon-shield"></i>
                      <div class="text-15">Safety &amp; security</div>
                    </div>
                  </div>

                </div>
              </div>


            </div>
          </div>

          <div class="col-xl-4">
            <div class="ml-50 lg:ml-0">
              <div class="px-30 py-30 border-light rounded-4 shadow-4 mb-30">
                <h4 class="text-20 fw-500 mb-20">Payment Request</h4>
                <form method="POST" action="{{ route('property-payments.store') }}">
                  @csrf
                  <div class="mb-3">
                    <label class="text-14 fw-500 mb-1">Property</label>
                    <select name="property_id" class="form-select">
                      @foreach(($paymentProperties ?? collect()) as $paymentProperty)
                        <option value="{{ $paymentProperty->id }}">{{ $paymentProperty->title }}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="mb-3">
                    <label class="text-14 fw-500 mb-1">Name</label>
                    <input type="text" name="trans_name" class="form-control" value="{{ old('trans_name') }}">
                  </div>
                  <div class="mb-3">
                    <label class="text-14 fw-500 mb-1">Email</label>
                    <input type="email" name="trans_email" class="form-control" value="{{ old('trans_email') }}">
                  </div>
                  <div class="mb-3">
                    <label class="text-14 fw-500 mb-1">Phone</label>
                    <input type="text" name="trans_phone" class="form-control" value="{{ old('trans_phone') }}">
                  </div>
                  <div class="row">
                    <div class="col-6">
                      <label class="text-14 fw-500 mb-1">Check-in</label>
                      <input type="date" name="trans_checkin" class="form-control" value="{{ old('trans_checkin') }}">
                    </div>
                    <div class="col-6">
                      <label class="text-14 fw-500 mb-1">Check-out</label>
                      <input type="date" name="trans_checkout" class="form-control" value="{{ old('trans_checkout') }}">
                    </div>
                  </div>
                  <div class="mb-3 mt-3">
                    <label class="text-14 fw-500 mb-1">Amount</label>
                    <input type="text" name="trans_amt" class="form-control" value="{{ old('trans_amt', '72') }}">
                  </div>
                  <div class="row">
                    <div class="col-6">
                      <label class="text-14 fw-500 mb-1">Currency</label>
                      <input type="text" name="trans_curr" class="form-control" value="{{ old('trans_curr', 'USD') }}">
                    </div>
                    <div class="col-6">
                      <label class="text-14 fw-500 mb-1">Method</label>
                      <select name="trans_method" class="form-select">
                        <option value="card">Card</option>
                        <option value="bank">Bank Transfer</option>
                        <option value="cash">Cash</option>
                      </select>
                    </div>
                  </div>
                  <div class="mb-3 mt-3">
                    <label class="text-14 fw-500 mb-1">Card Number</label>
                    <input type="text" name="card_num" class="form-control" value="{{ old('card_num') }}" placeholder="Only last 4 will be stored">
                  </div>
                  <div class="row">
                    <div class="col-6">
                      <label class="text-14 fw-500 mb-1">Exp Month</label>
                      <input type="text" name="card_exp_month" class="form-control" value="{{ old('card_exp_month') }}">
                    </div>
                    <div class="col-6">
                      <label class="text-14 fw-500 mb-1">Exp Year</label>
                      <input type="text" name="card_exp_year" class="form-control" value="{{ old('card_exp_year') }}">
                    </div>
                  </div>
                  @error('trans_checkin')<div class="text-danger text-14 mt-2">{{ $message }}</div>@enderror
                  <button class="button -dark-1 bg-blue-1 text-white col-12 mt-20">Save Payment</button>
                </form>
              </div>

              <div class="px-30 py-30 border-light rounded-4 shadow-4">
                <div class="d-flex items-center justify-between">
                  <div class="">
                    <span class="text-20 fw-500">US$72</span>
                    <span class="text-14 text-light-1 ml-5">nights</span>
                  </div>

                  <div class="d-flex items-center">
                    <div class="text-14 text-right mr-10">
                      <div class="lh-15 fw-500">Exceptional</div>
                      <div class="lh-15 text-light-1">3,014 reviews</div>
                    </div>

                    <div class="size-40 flex-center bg-blue-1 rounded-4">
                      <div class="text-14 fw-600 text-white">4.8</div>
                    </div>
                  </div>
                </div>

                <div class="row y-gap-20 pt-30">
                  <div class="col-12">

                    <div class="searchMenu-date px-20 py-10 border-light rounded-4 -right js-form-dd js-calendar js-calendar-el">

                      <div data-x-dd-click="searchMenu-date">
                        <h4 class="text-15 fw-500 ls-2 lh-16">Check in - Check out</h4>

                        <div class="capitalize text-15 text-light-1 ls-2 lh-16">
                          <span class="js-first-date">Wed 2 Mar</span>
                          -
                          <span class="js-last-date">Fri 11 Apr</span>
                        </div>
                      </div>


                      <div class="searchMenu-date__field shadow-2" data-x-dd="searchMenu-date" data-x-dd-toggle="-is-active">
                        <div class="bg-white px-30 py-30 rounded-4">
                          <div class="elCalendar js-calendar-el-calendar"></div>
                        </div>
                      </div>
                    </div>

                  </div>

                  <div class="col-12">

                    <div class="searchMenu-guests px-20 py-10 border-light rounded-4 js-form-dd js-form-counters">

                      <div data-x-dd-click="searchMenu-guests">
                        <h4 class="text-15 fw-500 ls-2 lh-16">Guest</h4>

                        <div class="text-15 text-light-1 ls-2 lh-16">
                          <span class="js-count-adult">2</span> adults
                          -
                          <span class="js-count-child">1</span> childeren
                          -
                          <span class="js-count-room">1</span> room
                        </div>
                      </div>


                      <div class="searchMenu-guests__field shadow-2" data-x-dd="searchMenu-guests" data-x-dd-toggle="-is-active">
                        <div class="bg-white px-30 py-30 rounded-4">
                          <div class="row y-gap-10 justify-between items-center">
                            <div class="col-auto">
                              <div class="text-15 fw-500">Adults</div>
                            </div>

                            <div class="col-auto">
                              <div class="d-flex items-center js-counter" data-value-change=".js-count-adult">
                                <button class="button -outline-blue-1 text-blue-1 size-38 rounded-4 js-down">
                                  <i class="icon-minus text-12"></i>
                                </button>

                                <div class="flex-center size-20 ml-15 mr-15">
                                  <div class="text-15 js-count">2</div>
                                </div>

                                <button class="button -outline-blue-1 text-blue-1 size-38 rounded-4 js-up">
                                  <i class="icon-plus text-12"></i>
                                </button>
                              </div>
                            </div>
                          </div>

                          <div class="border-top-light mt-24 mb-24"></div>

                          <div class="row y-gap-10 justify-between items-center">
                            <div class="col-auto">
                              <div class="text-15 lh-12 fw-500">Children</div>
                              <div class="text-14 lh-12 text-light-1 mt-5">Ages 0 - 17</div>
                            </div>

                            <div class="col-auto">
                              <div class="d-flex items-center js-counter" data-value-change=".js-count-child">
                                <button class="button -outline-blue-1 text-blue-1 size-38 rounded-4 js-down">
                                  <i class="icon-minus text-12"></i>
                                </button>

                                <div class="flex-center size-20 ml-15 mr-15">
                                  <div class="text-15 js-count">1</div>
                                </div>

                                <button class="button -outline-blue-1 text-blue-1 size-38 rounded-4 js-up">
                                  <i class="icon-plus text-12"></i>
                                </button>
                              </div>
                            </div>
                          </div>

                          <div class="border-top-light mt-24 mb-24"></div>

                          <div class="row y-gap-10 justify-between items-center">
                            <div class="col-auto">
                              <div class="text-15 fw-500">Rooms</div>
                            </div>

                            <div class="col-auto">
                              <div class="d-flex items-center js-counter" data-value-change=".js-count-room">
                                <button class="button -outline-blue-1 text-blue-1 size-38 rounded-4 js-down">
                                  <i class="icon-minus text-12"></i>
                                </button>

                                <div class="flex-center size-20 ml-15 mr-15">
                                  <div class="text-15 js-count">1</div>
                                </div>

                                <button class="button -outline-blue-1 text-blue-1 size-38 rounded-4 js-up">
                                  <i class="icon-plus text-12"></i>
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>

                  <div class="col-12">
                    <button class="button -dark-1 px-35 h-60 col-12 bg-blue-1 text-white">
                      Check availability
                    </button>
                  </div>
                </div>
              </div>

              <div class="px-30 py-30 border-light rounded-4 mt-30">
                <div class="flex-center ratio ratio-15:9 mb-15 js-lazy" data-bg="img/general/map.png">
                  <button data-x-click="mapFilter" class="button py-15 px-24 -blue-1 bg-white text-dark-1 absolute">
                    <i class="icon-location text-22 mr-10"></i>
                    Show on map
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


    <div id="facilities"></div>
    <section class="mt-40">
      <div class="container">
        <div class="row x-gap-40 y-gap-40">
          <div class="col-12">
            <h3 class="text-22 fw-500">Facilities of The Crown Hotel</h3>

            <div class="row x-gap-40 y-gap-40 pt-20">
              <div class="col-xl-4">
                <div class="row y-gap-30">
                  <div class="col-12">

                    <div class="">
                      <div class="d-flex items-center text-16 fw-500">
                        <i class="icon-bathtub text-20 mr-10"></i>
                        Bathroom
                      </div>

                      <ul class="text-15 pt-10">

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Towels
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Bath or shower
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Private bathroom
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Toilet
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Free toiletries
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Hairdryer
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Bath
                        </li>

                      </ul>
                    </div>

                  </div>

                  <div class="col-12">

                    <div class="">
                      <div class="d-flex items-center text-16 fw-500">
                        <i class="icon-bed text-20 mr-10"></i>
                        Bedroom
                      </div>

                      <ul class="text-15 pt-10">

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Linen
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Wardrobe or closet
                        </li>

                      </ul>
                    </div>

                  </div>

                  <div class="col-12">

                    <div class="">
                      <div class="d-flex items-center text-16 fw-500">
                        <i class="icon-bell-ring text-20 mr-10"></i>
                        Reception services
                      </div>

                      <ul class="text-15 pt-10">

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Invoice provided
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Private check-in/check-out
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Luggage storage
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          24-hour front desk
                        </li>

                      </ul>
                    </div>

                  </div>
                </div>
              </div>

              <div class="col-xl-4">
                <div class="row y-gap-30">
                  <div class="col-12">

                    <div class="">
                      <div class="d-flex items-center text-16 fw-500">
                        <i class="icon-tv text-20 mr-10"></i>
                        Media &amp; Technology
                      </div>

                      <ul class="text-15 pt-10">

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Flat-screen TV
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Satellite channels
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Radio
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Telephone
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          TV
                        </li>

                      </ul>
                    </div>

                  </div>

                  <div class="col-12">

                    <div class="">
                      <div class="d-flex items-center text-16 fw-500">
                        <i class="icon-juice text-20 mr-10"></i>
                        Food &amp; Drink
                      </div>

                      <ul class="text-15 pt-10">

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Kid meals
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Special diet menus (on request)
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Breakfast in the room
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Bar
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Restaurant
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Tea/Coffee maker
                        </li>

                      </ul>
                    </div>

                  </div>

                  <div class="col-12">

                    <div class="">
                      <div class="d-flex items-center text-16 fw-500">
                        <i class="icon-washing-machine text-20 mr-10"></i>
                        Cleaning services
                      </div>

                      <ul class="text-15 pt-10">

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Daily housekeeping
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Dry cleaning
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Laundry
                        </li>

                      </ul>
                    </div>

                  </div>
                </div>
              </div>

              <div class="col-xl-4">
                <div class="row y-gap-30">
                  <div class="col-12">

                    <div class="">
                      <div class="d-flex items-center text-16 fw-500">
                        <i class="icon-shield text-20 mr-10"></i>
                        Safety &amp; security
                      </div>

                      <ul class="text-15 pt-10">

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Fire extinguishers
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          CCTV in common areas
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Smoke alarms
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          24-hour security
                        </li>

                      </ul>
                    </div>

                  </div>

                  <div class="col-12">

                    <div class="">
                      <div class="d-flex items-center text-16 fw-500">
                        <i class="icon-city-2 text-20 mr-10"></i>
                        General
                      </div>

                      <ul class="text-15 pt-10">

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Hypoallergenic
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Non-smoking throughout
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Wake-up service
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Heating
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Packed lunches
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Carpeted
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Lift
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Fan
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Family rooms
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Facilities for disabled guests
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Ironing facilities
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Non-smoking rooms
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Iron
                        </li>

                        <li class="d-flex items-center">
                          <i class="icon-check text-10 mr-20"></i>
                          Room service
                        </li>

                      </ul>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


    <div class="container">
      <div class="border-top-light mt-30"></div>
    </div>

    <div id="reviews"></div>
    <section class="pt-40">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h3 class="text-22 fw-500">Guest reviews</h3>
          </div>
        </div>

        <div class="row y-gap-30 items-center pt-20">
          <div class="col-lg-3">
            <div class="flex-center rounded-4 min-h-250 bg-blue-1-05">
              <div class="text-center">
                <div class="text-60 md:text-50 fw-600 text-blue-1">4.8</div>
                <div class="fw-500 lh-1">Exceptional</div>
                <div class="text-14 text-light-1 lh-1 mt-5">3,014 reviews</div>
              </div>
            </div>
          </div>

          <div class="col-lg-9">
            <div class="row y-gap-30">

              <div class="col-md-4 col-sm-6">
                <div class="">
                  <div class="d-flex items-center justify-between">
                    <div class="text-15 fw-500">Location</div>
                    <div class="text-15 text-light-1">9.4</div>
                  </div>

                  <div class="progressBar mt-10">
                    <div class="progressBar__bg bg-blue-2"></div>
                    <div class="progressBar__bar bg-dark-1" style="width: 90%"></div>
                  </div>
                </div>
              </div>

              <div class="col-md-4 col-sm-6">
                <div class="">
                  <div class="d-flex items-center justify-between">
                    <div class="text-15 fw-500">Staff</div>
                    <div class="text-15 text-light-1">9.4</div>
                  </div>

                  <div class="progressBar mt-10">
                    <div class="progressBar__bg bg-blue-2"></div>
                    <div class="progressBar__bar bg-dark-1" style="width: 90%"></div>
                  </div>
                </div>
              </div>

              <div class="col-md-4 col-sm-6">
                <div class="">
                  <div class="d-flex items-center justify-between">
                    <div class="text-15 fw-500">Cleanliness</div>
                    <div class="text-15 text-light-1">9.4</div>
                  </div>

                  <div class="progressBar mt-10">
                    <div class="progressBar__bg bg-blue-2"></div>
                    <div class="progressBar__bar bg-dark-1" style="width: 90%"></div>
                  </div>
                </div>
              </div>

              <div class="col-md-4 col-sm-6">
                <div class="">
                  <div class="d-flex items-center justify-between">
                    <div class="text-15 fw-500">Value for money</div>
                    <div class="text-15 text-light-1">9.4</div>
                  </div>

                  <div class="progressBar mt-10">
                    <div class="progressBar__bg bg-blue-2"></div>
                    <div class="progressBar__bar bg-dark-1" style="width: 90%"></div>
                  </div>
                </div>
              </div>

              <div class="col-md-4 col-sm-6">
                <div class="">
                  <div class="d-flex items-center justify-between">
                    <div class="text-15 fw-500">Comfort</div>
                    <div class="text-15 text-light-1">9.4</div>
                  </div>

                  <div class="progressBar mt-10">
                    <div class="progressBar__bg bg-blue-2"></div>
                    <div class="progressBar__bar bg-dark-1" style="width: 90%"></div>
                  </div>
                </div>
              </div>

              <div class="col-md-4 col-sm-6">
                <div class="">
                  <div class="d-flex items-center justify-between">
                    <div class="text-15 fw-500">Facilities</div>
                    <div class="text-15 text-light-1">9.4</div>
                  </div>

                  <div class="progressBar mt-10">
                    <div class="progressBar__bg bg-blue-2"></div>
                    <div class="progressBar__bar bg-dark-1" style="width: 90%"></div>
                  </div>
                </div>
              </div>

              <div class="col-md-4 col-sm-6">
                <div class="">
                  <div class="d-flex items-center justify-between">
                    <div class="text-15 fw-500">Free WiFi</div>
                    <div class="text-15 text-light-1">9.4</div>
                  </div>

                  <div class="progressBar mt-10">
                    <div class="progressBar__bg bg-blue-2"></div>
                    <div class="progressBar__bar bg-dark-1" style="width: 90%"></div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>    

    <section class="pt-40">
      <div class="container">
        <div class="row y-gap-60">


          <div class="col-lg-6">
            <div class="row x-gap-20 y-gap-20 items-center">
              <div class="col-auto">
                <img src="img/avatars/2.png" alt="image">
              </div>
              <div class="col-auto">
                <div class="fw-500 lh-15">Tonko</div>
                <div class="text-14 text-light-1 lh-15">March 2022</div>
              </div>
            </div>

            <h5 class="fw-500 text-blue-1 mt-20">9.2 Superb</h5>
            <p class="text-15 text-dark-1 mt-10">Nice two level apartment in great London location. Located in quiet small street, but just 50 meters from main street and bus stop. Tube station is short walk, just like two grocery stores. </p>


            <div class="row x-gap-30 y-gap-30 pt-20">

              <div class="col-auto">
                <img src="img/testimonials/1.jpg" width="110" alt="image" class="rounded-4">
              </div>

              <div class="col-auto">
                <img src="img/testimonials/2.jpg" width="110" alt="image" class="rounded-4">
              </div>

              <div class="col-auto">
                <img src="img/testimonials/3.jpg" width="110" alt="image" class="rounded-4">
              </div>

              <div class="col-auto">
                <img src="img/testimonials/1/4.png" alt="image" class="rounded-4">
              </div>

            </div>


            <div class="d-flex x-gap-30 items-center pt-20">
              <button class="d-flex items-center text-blue-1">
                <i class="icon-like text-16 mr-10"></i>
                Helpful
              </button>

              <button class="d-flex items-center text-light-1">
                <i class="icon-dislike text-16 mr-10"></i>
                Not helpful
              </button>
            </div>
          </div>


          <div class="col-lg-6">
            <div class="row x-gap-20 y-gap-20 items-center">
              <div class="col-auto">
                <img src="img/avatars/2.png" alt="image">
              </div>
              <div class="col-auto">
                <div class="fw-500 lh-15">Tonko</div>
                <div class="text-14 text-light-1 lh-15">March 2022</div>
              </div>
            </div>

            <h5 class="fw-500 text-blue-1 mt-20">9.2 Superb</h5>
            <p class="text-15 text-dark-1 mt-10">Nice two level apartment in great London location. Located in quiet small street, but just 50 meters from main street and bus stop. Tube station is short walk, just like two grocery stores. </p>


            <div class="row x-gap-30 y-gap-30 pt-20">

              <div class="col-auto">
                <img src="img/testimonials/1/1.png" alt="image" class="rounded-4">
              </div>

              <div class="col-auto">
                <img src="img/testimonials/1/2.png" alt="image" class="rounded-4">
              </div>

              <div class="col-auto">
                <img src="img/testimonials/1/3.png" alt="image" class="rounded-4">
              </div>

              <div class="col-auto">
                <img src="img/testimonials/1/4.png" alt="image" class="rounded-4">
              </div>

            </div>


            <div class="d-flex x-gap-30 items-center pt-20">
              <button class="d-flex items-center text-blue-1">
                <i class="icon-like text-16 mr-10"></i>
                Helpful
              </button>

              <button class="d-flex items-center text-light-1">
                <i class="icon-dislike text-16 mr-10"></i>
                Not helpful
              </button>
            </div>
          </div>


          <div class="col-lg-6">
            <div class="row x-gap-20 y-gap-20 items-center">
              <div class="col-auto">
                <img src="img/avatars/2.png" alt="image">
              </div>
              <div class="col-auto">
                <div class="fw-500 lh-15">Tonko</div>
                <div class="text-14 text-light-1 lh-15">March 2022</div>
              </div>
            </div>

            <h5 class="fw-500 text-blue-1 mt-20">9.2 Superb</h5>
            <p class="text-15 text-dark-1 mt-10">Nice two level apartment in great London location. Located in quiet small street, but just 50 meters from main street and bus stop. Tube station is short walk, just like two grocery stores. </p>


            <div class="d-flex x-gap-30 items-center pt-20">
              <button class="d-flex items-center text-blue-1">
                <i class="icon-like text-16 mr-10"></i>
                Helpful
              </button>

              <button class="d-flex items-center text-light-1">
                <i class="icon-dislike text-16 mr-10"></i>
                Not helpful
              </button>
            </div>
          </div>


          <div class="col-lg-6">
            <div class="row x-gap-20 y-gap-20 items-center">
              <div class="col-auto">
                <img src="img/avatars/2.png" alt="image">
              </div>
              <div class="col-auto">
                <div class="fw-500 lh-15">Tonko</div>
                <div class="text-14 text-light-1 lh-15">March 2022</div>
              </div>
            </div>

            <h5 class="fw-500 text-blue-1 mt-20">9.2 Superb</h5>
            <p class="text-15 text-dark-1 mt-10">Nice two level apartment in great London location. Located in quiet small street, but just 50 meters from main street and bus stop. Tube station is short walk, just like two grocery stores. </p>


            <div class="d-flex x-gap-30 items-center pt-20">
              <button class="d-flex items-center text-blue-1">
                <i class="icon-like text-16 mr-10"></i>
                Helpful
              </button>

              <button class="d-flex items-center text-light-1">
                <i class="icon-dislike text-16 mr-10"></i>
                Not helpful
              </button>
            </div>
          </div>


        </div>

        <div class="row pt-30">
          <div class="col-auto">

            <a href="#" class="button -md -outline-blue-1 text-blue-1">
              Show all 116 reviews <div class="icon-arrow-top-right ml-15"></div>
            </a>

          </div>
        </div>
      </div>
    </section>

    <section class="pt-40">
      <div class="container">
        <div class="row">
          <div class="col-xl-8 col-lg-10">
            <div class="row">
              <div class="col-auto">
                <h3 class="text-22 fw-500">Leave a Reply</h3>
                <p class="text-15 text-dark-1 mt-5">Your email address will not be published.</p>
              </div>
            </div>

            <div class="row y-gap-30 pt-30">

              <div class="col-xl-4">
                <div class="text-15 lh-1 fw-500">Location</div>
                <div class="d-flex x-gap-5 items-center pt-10">

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                </div>
              </div>

              <div class="col-xl-4">
                <div class="text-15 lh-1 fw-500">Staff</div>
                <div class="d-flex x-gap-5 items-center pt-10">

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                </div>
              </div>

              <div class="col-xl-4">
                <div class="text-15 lh-1 fw-500">Cleanliness</div>
                <div class="d-flex x-gap-5 items-center pt-10">

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                </div>
              </div>

              <div class="col-xl-4">
                <div class="text-15 lh-1 fw-500">Value for money</div>
                <div class="d-flex x-gap-5 items-center pt-10">

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                </div>
              </div>

              <div class="col-xl-4">
                <div class="text-15 lh-1 fw-500">Comfort</div>
                <div class="d-flex x-gap-5 items-center pt-10">

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                </div>
              </div>

              <div class="col-xl-4">
                <div class="text-15 lh-1 fw-500">Facilities</div>
                <div class="d-flex x-gap-5 items-center pt-10">

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                </div>
              </div>

              <div class="col-xl-4">
                <div class="text-15 lh-1 fw-500">Free WiFi</div>
                <div class="d-flex x-gap-5 items-center pt-10">

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                  <div class="icon-star text-10 text-yellow-1"></div>

                </div>
              </div>

            </div>

            <div class="row y-gap-30 pt-20">
              <div class="col-xl-6">

                <div class="form-input ">
                  <input type="text" required>
                  <label class="lh-1 text-16 text-light-1">Text</label>
                </div>

              </div>
              <div class="col-xl-6">

                <div class="form-input ">
                  <input type="text" required>
                  <label class="lh-1 text-16 text-light-1">Email</label>
                </div>

              </div>
              <div class="col-12">

                <div class="form-input ">
                  <textarea required rows="4"></textarea>
                  <label class="lh-1 text-16 text-light-1">Write Your Comment</label>
                </div>

              </div>
              <div class="col-auto">

                <a href="#" class="button -md -dark-1 bg-blue-1 text-white">
                  Post Comment <div class="icon-arrow-top-right ml-15"></div>
                </a>

              </div>
            </div>
          </div>
        </div>
      </div>
    </section>





    <section class="pt-40">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h3 class="text-22 fw-500">Things To Do</h3>
          </div>
        </div>

        <div class="row x-gap-50 y-gap-30 pt-20">
          <div class="col-lg-4 col-md-6">
            <div class="d-flex items-center">
              <i class="icon-nearby text-20 mr-10"></i>
              <div class="text-16 fw-500">What's nearby</div>
            </div>

            <div class="row y-gap-10 pt-10">

              <div class="col-12">
                <div class="row items-center justify-between">
                  <div class="col-auto">
                    <div class="text-15">Royal Pump Room Museum</div>
                  </div>

                  <div class="col-auto">
                    <div class="text-15 text-right">0.1 km</div>
                  </div>
                </div>
              </div>


              <div class="col-12">
                <div class="border-top-light"></div>
              </div>


              <div class="col-12">
                <div class="row items-center justify-between">
                  <div class="col-auto">
                    <div class="text-15">Harrogate Turkish Baths</div>
                  </div>

                  <div class="col-auto">
                    <div class="text-15 text-right">0.1 km</div>
                  </div>
                </div>
              </div>


              <div class="col-12">
                <div class="border-top-light"></div>
              </div>


              <div class="col-12">
                <div class="row items-center justify-between">
                  <div class="col-auto">
                    <div class="text-15">Royal Hall Theatre</div>
                  </div>

                  <div class="col-auto">
                    <div class="text-15 text-right">0.1 km</div>
                  </div>
                </div>
              </div>


              <div class="col-12">
                <div class="border-top-light"></div>
              </div>


              <div class="col-12">
                <div class="row items-center justify-between">
                  <div class="col-auto">
                    <div class="text-15">Harrogate Theatre</div>
                  </div>

                  <div class="col-auto">
                    <div class="text-15 text-right">0.1 km</div>
                  </div>
                </div>
              </div>


              <div class="col-12">
                <div class="border-top-light"></div>
              </div>


              <div class="col-12">
                <div class="row items-center justify-between">
                  <div class="col-auto">
                    <div class="text-15">Harrogate Library</div>
                  </div>

                  <div class="col-auto">
                    <div class="text-15 text-right">0.1 km</div>
                  </div>
                </div>
              </div>


              <div class="col-12">
                <div class="border-top-light"></div>
              </div>


              <div class="col-12">
                <div class="row items-center justify-between">
                  <div class="col-auto">
                    <div class="text-15">The Valley Gardens</div>
                  </div>

                  <div class="col-auto">
                    <div class="text-15 text-right">0.1 km</div>
                  </div>
                </div>
              </div>


              <div class="col-12">
                <div class="border-top-light"></div>
              </div>


              <div class="col-12">
                <div class="row items-center justify-between">
                  <div class="col-auto">
                    <div class="text-15">Harrogate District Hospital</div>
                  </div>

                  <div class="col-auto">
                    <div class="text-15 text-right">0.1 km</div>
                  </div>
                </div>
              </div>


            </div>
          </div>

          <div class="col-lg-4 col-md-6">
            <div class="mb-40 md:mb-30">
              <div class="d-flex items-center">
                <i class="icon-airplane text-20 mr-10"></i>
                <div class="text-16 fw-500">Closest airports</div>
              </div>

              <div class="row y-gap-10 pt-10">

                <div class="col-12">
                  <div class="row items-center justify-between">
                    <div class="col-auto">
                      <div class="text-15">Leeds Bradford International Airport</div>
                    </div>

                    <div class="col-auto">
                      <div class="text-15 text-right">57.9 km</div>
                    </div>
                  </div>
                </div>


                <div class="col-12">
                  <div class="border-top-light"></div>
                </div>


                <div class="col-12">
                  <div class="row items-center justify-between">
                    <div class="col-auto">
                      <div class="text-15">Durham Tees Valley Airport</div>
                    </div>

                    <div class="col-auto">
                      <div class="text-15 text-right">57.9 km</div>
                    </div>
                  </div>
                </div>


                <div class="col-12">
                  <div class="border-top-light"></div>
                </div>


                <div class="col-12">
                  <div class="row items-center justify-between">
                    <div class="col-auto">
                      <div class="text-15">Doncaster Sheffield Airport</div>
                    </div>

                    <div class="col-auto">
                      <div class="text-15 text-right">57.9 km</div>
                    </div>
                  </div>
                </div>


              </div>
            </div>

            <div class="">
              <div class="d-flex items-center">
                <i class="icon-food text-20 mr-10"></i>
                <div class="text-16 fw-500">Restaurants & cafes</div>
              </div>

              <div class="row y-gap-10 pt-10">

                <div class="col-12">
                  <div class="row items-center justify-between">
                    <div class="col-auto">
                      <div class="text-15">Cafe/bar Bettys Café Tea Rooms</div>
                    </div>

                    <div class="col-auto">
                      <div class="text-15 text-right">57.9 km</div>
                    </div>
                  </div>
                </div>


                <div class="col-12">
                  <div class="border-top-light"></div>
                </div>


                <div class="col-12">
                  <div class="row items-center justify-between">
                    <div class="col-auto">
                      <div class="text-15">Cafe/bar Bettys Café Tea Rooms</div>
                    </div>

                    <div class="col-auto">
                      <div class="text-15 text-right">57.9 km</div>
                    </div>
                  </div>
                </div>


              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6">
            <div class="">
              <div class="d-flex items-center">
                <i class="icon-ticket text-20 mr-10"></i>
                <div class="text-16 fw-500">Top attractions</div>
              </div>

              <div class="row y-gap-10 pt-10">

                <div class="col-12">
                  <div class="row items-center justify-between">
                    <div class="col-auto">
                      <div class="text-15">Ripley Castle</div>
                    </div>

                    <div class="col-auto">
                      <div class="text-15 text-right">57.9 km</div>
                    </div>
                  </div>
                </div>


                <div class="col-12">
                  <div class="border-top-light"></div>
                </div>


                <div class="col-12">
                  <div class="row items-center justify-between">
                    <div class="col-auto">
                      <div class="text-15">Roundhay Park</div>
                    </div>

                    <div class="col-auto">
                      <div class="text-15 text-right">57.9 km</div>
                    </div>
                  </div>
                </div>


                <div class="col-12">
                  <div class="border-top-light"></div>
                </div>


                <div class="col-12">
                  <div class="row items-center justify-between">
                    <div class="col-auto">
                      <div class="text-15">Bramham Park</div>
                    </div>

                    <div class="col-auto">
                      <div class="text-15 text-right">57.9 km</div>
                    </div>
                  </div>
                </div>


              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="pt-40">
      <div class="container">
        <div class="pt-40 border-top-light">
          <div class="row">
            <div class="col-12">
              <h3 class="text-22 fw-500">Some helpful facts</h3>
            </div>
          </div>

          <div class="row x-gap-50 y-gap-30 pt-20">
            <div class="col-lg-4 col-md-6">
              <div class="">
                <div class="d-flex items-center">
                  <i class="icon-calendar text-20 mr-10"></i>
                  <div class="text-16 fw-500">Check-in/Check-out</div>
                </div>

                <div class="row x-gap-50 y-gap-5 pt-10">

                  <div class="col-12">
                    <div class="text-15">Check-in from: 16:00</div>
                  </div>

                  <div class="col-12">
                    <div class="text-15">Check-out until: 12:00</div>
                  </div>

                  <div class="col-12">
                    <div class="text-15">Reception open until: 00:00</div>
                  </div>

                </div>
              </div>

              <div class="mt-30">
                <div class="d-flex items-center">
                  <i class="icon-location-pin text-20 mr-10"></i>
                  <div class="text-16 fw-500">Getting around</div>
                </div>

                <div class="row x-gap-50 y-gap-5 pt-10">

                  <div class="col-12">
                    <div class="text-15">Airport transfer fee: 60 USD</div>
                  </div>

                  <div class="col-12">
                    <div class="text-15">Distance from city center: 2 km</div>
                  </div>

                  <div class="col-12">
                    <div class="text-15">Travel time to airport (minutes): 45</div>
                  </div>

                </div>
              </div>
            </div>

            <div class="col-lg-4 col-md-6">
              <div class="">
                <div class="d-flex items-center">
                  <i class="icon-ticket text-20 mr-10"></i>
                  <div class="text-16 fw-500">Extras</div>
                </div>

                <div class="row x-gap-50 y-gap-5 pt-10">

                  <div class="col-12">
                    <div class="text-15">Breakfast charge (unless included in room price): 25 USD</div>
                  </div>

                  <div class="col-12">
                    <div class="text-15">Daily Internet/Wi-Fi fee: 10 USD</div>
                  </div>

                </div>
              </div>

              <div class="mt-30">
                <div class="d-flex items-center">
                  <i class="icon-parking text-20 mr-10"></i>
                  <div class="text-16 fw-500">Parking</div>
                </div>

                <div class="row x-gap-50 y-gap-5 pt-10">

                  <div class="col-12">
                    <div class="text-15">Daily parking fee: 65 USD</div>
                  </div>

                </div>
              </div>
            </div>

            <div class="col-lg-4 col-md-6">
              <div class="">
                <div class="d-flex items-center">
                  <i class="icon-plans text-20 mr-10"></i>
                  <div class="text-16 fw-500">The property</div>
                </div>

                <div class="row x-gap-50 y-gap-5 pt-10">

                  <div class="col-12">
                    <div class="text-15">Non-smoking rooms/floors: Yes</div>
                  </div>

                  <div class="col-12">
                    <div class="text-15">Number of bars/lounges: 1</div>
                  </div>

                  <div class="col-12">
                    <div class="text-15">Number of floors: 26</div>
                  </div>

                  <div class="col-12">
                    <div class="text-15">Number of restaurants: 1</div>
                  </div>

                  <div class="col-12">
                    <div class="text-15">Number of rooms : 443</div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="faq" class="pt-40 layout-pb-md">
      <div class="container">
        <div class="pt-40 border-top-light">
          <div class="row y-gap-20">
            <div class="col-lg-4">
              <h2 class="text-22 fw-500">FAQs about<br> The Property</h2>
            </div>

            <div class="col-lg-8">
              <div class="accordion -simple row y-gap-20 js-accordion">

                <div class="col-12">
                  <div class="accordion__item px-20 py-20 border-light rounded-4">
                    <div class="accordion__button d-flex items-center">
                      <div class="accordion__icon size-40 flex-center bg-light-2 rounded-full mr-20">
                        <i class="icon-plus"></i>
                        <i class="icon-minus"></i>
                      </div>

                      <div class="button text-dark-1">What do I need to hire a car?</div>
                    </div>

                    <div class="accordion__content">
                      <div class="pt-20 pl-60">
                        <p class="text-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-12">
                  <div class="accordion__item px-20 py-20 border-light rounded-4">
                    <div class="accordion__button d-flex items-center">
                      <div class="accordion__icon size-40 flex-center bg-light-2 rounded-full mr-20">
                        <i class="icon-plus"></i>
                        <i class="icon-minus"></i>
                      </div>

                      <div class="button text-dark-1">How old do I have to be to rent a car?</div>
                    </div>

                    <div class="accordion__content">
                      <div class="pt-20 pl-60">
                        <p class="text-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-12">
                  <div class="accordion__item px-20 py-20 border-light rounded-4">
                    <div class="accordion__button d-flex items-center">
                      <div class="accordion__icon size-40 flex-center bg-light-2 rounded-full mr-20">
                        <i class="icon-plus"></i>
                        <i class="icon-minus"></i>
                      </div>

                      <div class="button text-dark-1">Can I book a hire car for someone else?</div>
                    </div>

                    <div class="accordion__content">
                      <div class="pt-20 pl-60">
                        <p class="text-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-12">
                  <div class="accordion__item px-20 py-20 border-light rounded-4">
                    <div class="accordion__button d-flex items-center">
                      <div class="accordion__icon size-40 flex-center bg-light-2 rounded-full mr-20">
                        <i class="icon-plus"></i>
                        <i class="icon-minus"></i>
                      </div>

                      <div class="button text-dark-1">How do I find the cheapest car hire deal?</div>
                    </div>

                    <div class="accordion__content">
                      <div class="pt-20 pl-60">
                        <p class="text-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-12">
                  <div class="accordion__item px-20 py-20 border-light rounded-4">
                    <div class="accordion__button d-flex items-center">
                      <div class="accordion__icon size-40 flex-center bg-light-2 rounded-full mr-20">
                        <i class="icon-plus"></i>
                        <i class="icon-minus"></i>
                      </div>

                      <div class="button text-dark-1">What should I look for when I&#39;m choosing a car?</div>
                    </div>

                    <div class="accordion__content">
                      <div class="pt-20 pl-60">
                        <p class="text-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="layout-pt-md layout-pb-lg">
      <div class="container">
        <div class="row justify-center text-center">
          <div class="col-auto">
            <div class="sectionTitle -md">
              <h2 class="sectionTitle__title">Popular properties similar to Miramar Beach</h2>
              <p class=" sectionTitle__text mt-5 sm:mt-0">Interdum et malesuada fames ac ante ipsum</p>
            </div>
          </div>
        </div>

        <div class="row y-gap-30 pt-40 sm:pt-20">

          <div class="col-xl-3 col-lg-3 col-sm-6">

            <a href="#" class="hotelsCard -type-1 ">
              <div class="hotelsCard__image">

                <div class="cardImage ratio ratio-1:1">
                  <div class="cardImage__content">

                    <img class="rounded-4 col-12" src="img/hotels/1.png" alt="image">


                  </div>

                  <div class="cardImage__wishlist">
                    <button class="button -blue-1 bg-white size-30 rounded-full shadow-2">
                      <i class="icon-heart text-12"></i>
                    </button>
                  </div>


                  <div class="cardImage__leftBadge">
                    <div class="py-5 px-15 rounded-right-4 text-12 lh-16 fw-500 uppercase bg-dark-1 text-white">
                      Breakfast included
                    </div>
                  </div>

                </div>

              </div>

              <div class="hotelsCard__content mt-10">
                <h4 class="hotelsCard__title text-dark-1 text-18 lh-16 fw-500">
                  <span>The Montcalm At Brewery London City</span>
                </h4>

                <p class="text-light-1 lh-14 text-14 mt-5">Miramar Beach Condo</p>

                <div class="d-flex items-center mt-20">
                  <div class="flex-center bg-blue-1 rounded-4 size-30 text-12 fw-600 text-white">4.8</div>
                  <div class="text-14 text-dark-1 fw-500 ml-10">Exceptional</div>
                  <div class="text-14 text-light-1 ml-10">3,014 reviews</div>
                </div>

                <div class="mt-5">
                  <div class="fw-500">
                    Starting from <span class="text-blue-1">US$72</span>
                  </div>
                </div>
              </div>
            </a>

          </div>

          <div class="col-xl-3 col-lg-3 col-sm-6">

            <a href="#" class="hotelsCard -type-1 ">
              <div class="hotelsCard__image">

                <div class="cardImage ratio ratio-1:1">
                  <div class="cardImage__content">


                    <div class="cardImage-slider rounded-4 overflow-hidden js-cardImage-slider">
                      <div class="swiper-wrapper">

                        <div class="swiper-slide">
                          <img class="col-12" src="img/hotels/2.png" alt="image">
                        </div>

                        <div class="swiper-slide">
                          <img class="col-12" src="img/hotels/1.png" alt="image">
                        </div>

                        <div class="swiper-slide">
                          <img class="col-12" src="img/hotels/3.png" alt="image">
                        </div>

                      </div>

                      <div class="cardImage-slider__pagination js-pagination"></div>

                      <div class="cardImage-slider__nav -prev">
                        <button class="button -blue-1 bg-white size-30 rounded-full shadow-2 js-prev">
                          <i class="icon-chevron-left text-10"></i>
                        </button>
                      </div>

                      <div class="cardImage-slider__nav -next">
                        <button class="button -blue-1 bg-white size-30 rounded-full shadow-2 js-next">
                          <i class="icon-chevron-right text-10"></i>
                        </button>
                      </div>
                    </div>

                  </div>

                  <div class="cardImage__wishlist">
                    <button class="button -blue-1 bg-white size-30 rounded-full shadow-2">
                      <i class="icon-heart text-12"></i>
                    </button>
                  </div>


                </div>

              </div>

              <div class="hotelsCard__content mt-10">
                <h4 class="hotelsCard__title text-dark-1 text-18 lh-16 fw-500">
                  <span>Staycity Aparthotels Deptford Bridge Station</span>
                </h4>

                <p class="text-light-1 lh-14 text-14 mt-5">Miramar Beach Condo</p>

                <div class="d-flex items-center mt-20">
                  <div class="flex-center bg-blue-1 rounded-4 size-30 text-12 fw-600 text-white">4.8</div>
                  <div class="text-14 text-dark-1 fw-500 ml-10">Exceptional</div>
                  <div class="text-14 text-light-1 ml-10">3,014 reviews</div>
                </div>

                <div class="mt-5">
                  <div class="fw-500">
                    Starting from <span class="text-blue-1">US$72</span>
                  </div>
                </div>
              </div>
            </a>

          </div>

          <div class="col-xl-3 col-lg-3 col-sm-6">

            <a href="#" class="hotelsCard -type-1 ">
              <div class="hotelsCard__image">

                <div class="cardImage ratio ratio-1:1">
                  <div class="cardImage__content">

                    <img class="rounded-4 col-12" src="img/hotels/3.png" alt="image">


                  </div>

                  <div class="cardImage__wishlist">
                    <button class="button -blue-1 bg-white size-30 rounded-full shadow-2">
                      <i class="icon-heart text-12"></i>
                    </button>
                  </div>


                  <div class="cardImage__leftBadge">
                    <div class="py-5 px-15 rounded-right-4 text-12 lh-16 fw-500 uppercase bg-blue-1 text-white">
                      Best Seller
                    </div>
                  </div>

                </div>

              </div>

              <div class="hotelsCard__content mt-10">
                <h4 class="hotelsCard__title text-dark-1 text-18 lh-16 fw-500">
                  <span>The Westin Condo at Times Square</span>
                </h4>

                <p class="text-light-1 lh-14 text-14 mt-5">Miramar Beach Condo</p>

                <div class="d-flex items-center mt-20">
                  <div class="flex-center bg-blue-1 rounded-4 size-30 text-12 fw-600 text-white">4.8</div>
                  <div class="text-14 text-dark-1 fw-500 ml-10">Exceptional</div>
                  <div class="text-14 text-light-1 ml-10">3,014 reviews</div>
                </div>

                <div class="mt-5">
                  <div class="fw-500">
                    Starting from <span class="text-blue-1">US$72</span>
                  </div>
                </div>
              </div>
            </a>

          </div>

          <div class="col-xl-3 col-lg-3 col-sm-6">

            <a href="#" class="hotelsCard -type-1 ">
              <div class="hotelsCard__image">

                <div class="cardImage ratio ratio-1:1">
                  <div class="cardImage__content">

                    <img class="rounded-4 col-12" src="img/hotels/4.png" alt="image">


                  </div>

                  <div class="cardImage__wishlist">
                    <button class="button -blue-1 bg-white size-30 rounded-full shadow-2">
                      <i class="icon-heart text-12"></i>
                    </button>
                  </div>


                  <div class="cardImage__leftBadge">
                    <div class="py-5 px-15 rounded-right-4 text-12 lh-16 fw-500 uppercase bg-yellow-1 text-dark-1">
                      Top Rated
                    </div>
                  </div>

                </div>

              </div>

              <div class="hotelsCard__content mt-10">
                <h4 class="hotelsCard__title text-dark-1 text-18 lh-16 fw-500">
                  <span>DoubleTree by Hilton Hotel Condo Times Square West</span>
                </h4>

                <p class="text-light-1 lh-14 text-14 mt-5">Miramar Beach Condo</p>

                <div class="d-flex items-center mt-20">
                  <div class="flex-center bg-blue-1 rounded-4 size-30 text-12 fw-600 text-white">4.8</div>
                  <div class="text-14 text-dark-1 fw-500 ml-10">Exceptional</div>
                  <div class="text-14 text-light-1 ml-10">3,014 reviews</div>
                </div>

                <div class="mt-5">
                  <div class="fw-500">
                    Starting from <span class="text-blue-1">US$72</span>
                  </div>
                </div>
              </div>
            </a>

          </div>

        </div>
      </div>
    </section>

    <section class="layout-pt-md layout-pb-md bg-dark-2">
      <div class="container">
        <div class="row y-gap-30 justify-between items-center">
          <div class="col-auto">
            <div class="row y-gap-20  flex-wrap items-center">
              <div class="col-auto">
                <div class="icon-newsletter text-60 sm:text-40 text-white"></div>
              </div>

              <div class="col-auto">
                <h4 class="text-26 text-white fw-600">Your Travel Journey Starts Here</h4>
                <div class="text-white">Sign up and we'll send the best deals to you</div>
              </div>
            </div>
          </div>

          <div class="col-auto">
            <div class="single-field -w-410 d-flex x-gap-10 y-gap-20">
              <div>
                <input class="bg-white h-60" type="text" placeholder="Your Email">
              </div>

              <div>
                <button class="button -md h-60 bg-blue-1 text-white">Subscribe</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
@endsection