@parent
<script>
 
  var mapL = null;
  console.log(L.mapbox);
  mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyaXNzeWFpZnVkZGluIiwiYSI6ImNrb253OWNqOTA1ajUyd2w0Mm92ZXEzeWUifQ.2zZbnnViPfgP4-jHknMifQ';

  var mapOfResults = new mapboxgl.Map({
    container: 'properties_map',
    style: 'mapbox://styles/mapbox/light-v10',
    center: [0,0],
    zoom: 5,

  });
  // alert(mapOfResults);

  mapOfResults.addControl(new mapboxgl.NavigationControl());

  var geojsonFeatures = {
    type: 'FeatureCollection',
    clusterMaxZoom: 15,
    features: []
  };

  mapOfResults.on('load', function() {
    loadMarkers();

  });


  mapOfResults.on('dragend', function() {
    if ($('#refresh_marker').prop('checked') === false) return false;
    var newCoordinates = mapOfResults.getCenter();
    $('.mapboxgl-marker').not('.marker').remove();
    var ele = document.createElement('div');
    ele.className = 'marker';
    ele.style.backgroundImage = 'url(images/basic_geolocalize-01.png)';
    ele.style.width = 40 + 'px';
    ele.style.height = 40 + 'px';
    ele.style.backgroundRepeat = 'no-repeat',
      ele.style.backgroundSize = "contain",
      ele.style.backgroundPosition = "center center"
    var popup2 = new mapboxgl.Popup({
      offset: 25
    }).setHTML('Center').setMaxWidth("400px");
    var tmpMarker2 = new mapboxgl.Marker();
    tmpMarker2
      .setLngLat(newCoordinates)
      // .setPopup(popup2)
      .addTo(mapOfResults);
    $.ajax({
      url: '/property/refresh-map/' + newCoordinates.lat + '/' + newCoordinates.lng,
      type: 'get',
      dataType: 'json',
      beforeSend: function() {
        $('.refresh-loader').show();
      },
      success: function(response) {
        $('.mapboxgl-marker').remove();
        tmpMarker2
          .setLngLat(newCoordinates)
          // .setPopup(popup2)
          .addTo(mapOfResults);
        $('#property_cards_wrap').html(response.property_card_html);
        geojsonFeatures.features = $.parseJSON(response.markers);
        loadMarkers();
        $('.refresh-loader').hide();
      },
      error: function(response) {
        console.log('Error: ' + response);
      }
    });
  });


  // mapbox new  layouts

  const layerList = document.getElementById('menu');
  const inputs = layerList.getElementsByTagName('input');

  for (const input of inputs) {
    input.onclick = (layer) => {
      const layerId = layer.target.id;
      mapOfResults.setStyle('mapbox://styles/mapbox/' + layerId);
    };
  }

  // end 
  // load marker when page load // 
  function loadMarkers(geojsonFeature) {

    if(geojsonFeature){
      features = geojsonFeature;

    }else{
  features =     geojsonFeatures.features;

    }
 


    features.forEach(function(marker) {
      var el = document.createElement('div');
      el.className = 'marker';

      el.style.backgroundImage = 'url(images/map2.png)';
      el.style.width = 40 + 'px';
      el.style.height = 40 + 'px';
      el.style.backgroundRepeat = 'no-repeat',
        el.style.backgroundSize = "contain",
        el.style.backgroundPosition = "center center"
      var description = marker.properties.description;
      var title = marker.properties.title;
      var price = marker.properties.price;
      var images = marker.properties.images;
      var dataId = marker.properties.dataId;
      el.id = 'marker_' + dataId;
      // console.log(`here all prop ${marker.properties.dataId}`);
      const link = document.createElement('a');
      link.href = '#';
      link.className = 'title';
      link.id = `link-${marker.properties.dataId}`;
      link.innerHTML = `view`;

      $(`.${dataId}_view`).append(link);

      link.addEventListener('click', function() {
        flyToStore(marker);
        // createPopUp(feature);
      });

      var slideshowContent = ""

      for (var i = 0; i < images.length; i++) {
        var img = images[i];
       
        slideshowContent += '<div class="image-list' + (i === 1 ? ' active' : '') + '">' +
          '<img src="property-image/resize/615x419/' + img + '/property-image" class="img-fluid" />' +
          '</div>';
        break;
      }
      var popupContent = '<div class="map-detail-container">' +
        '<div class="map-hotel-img">' +
        '<div>' +
        slideshowContent +
        '</div>' + ` <div class="hotel-meta full-width is-small">
        <a href="#" class="view bg-btn-gl-001 btn-sidebar" data-sidebar="#reviews" onclick="replaceReviewData(${marker.properties.id})">
          Reviews
        </a>
        <a href="#" class="view bg-btn-gl-001 btn-sidebar" data-sidebar="#quickinfo" onclick="replacePropertyData(${marker.properties.id})">
          Info
        </a>
        <a href="#" class="view bg-btn-gl-001 btn-sidebar" data-sidebar="#property-gallery" onclick="replacePropertyData(${marker.properties.id})">
          Gallery
        </a>
        <a href="#" class="view bg-btn-gl-001 btn-sidebar" data-sidebar="#suiteside" onclick="replacePropertySuitesdata(${marker.properties.id})">
          Suite(s)  
        </a>
        <div class="hotel-prices hotel-price-detail d-flex">
          <div class="row align-items-center justify-content-center">
          
            <div class="ml-2">
              <span class="pernight"></span>
            </div>
          </div>
        </div>
      </div>`+
        // '<div class="popup-nav">' +
        // '<div class="popup-btn popup-prev"></div>' +
        // '<div class="popup-btn popup-next"></div>' +
        // '</div>' +
        '</div>' +
        '<div class="map-hotel-description">' +
        '<strong class="saol-font">' + title + '</strong>' +
        '<p>' + description + '</p>' +
        '<p class="map-hotel-price">Night from <span>€' + price + '</span></p>' +
        '</div>' +
        '</div>';
             
      var popup = new mapboxgl.Popup({
        offset: 25
      }).setHTML(popupContent).setMaxWidth("400px");

      var tmpMarker = new mapboxgl.Marker(el);

      el.markerInstance = tmpMarker;

      tmpMarker
        .setLngLat(marker.geometry.coordinates)
        .setPopup(popup)
        .addTo(mapOfResults);

      el.addEventListener("click", e => {
        let coords = e.target.markerInstance.getLngLat();
        mapOfResults.flyTo({
          duration: 2000,
          center: coords,
          zoom: 17
        });



        // popup.on('close', function (e) {
        //   $('.hotel-info-content').removeClass('active');
        //   $('.hotel-item-map').removeClass('active');
        //   $('.hotel-item-map').removeClass('not-active');
        //   $('.close-view').css('display', 'none')
        // })
        $('.hotel-item-map').removeClass('active').addClass('not-active');
        $('#' + dataId).addClass('active').removeClass('not-active');
        $('.hotel-info-content').removeClass('active');
        $('#' + dataId).find('.hotel-info-content').addClass('active');
        $('.close-view').css('display', 'flex')
        /*setTimeout(function () {
          $('.popup-slider').slick({
            slidesToShow: 1,
            prevArrow: '<button class="slide-arrow prev-arrow"><i class="ico ico-back"></i></button>',
            nextArrow: '<button class="slide-arrow next-arrow"><i class="ico ico-next"></i></button>'
          });
          $('.popup-slider').addClass('show');
        }, 100);*/

        // var imagesToLazyLoad = document.querySelectorAll('.img-fluid img[data-src]');
    //  console.log(imagesToLazyLoad);

    //   // Observe all images with data-src attribute
    //   imagesToLazyLoad.forEach(function (img) {
    //     console.log(img);
    //     img.src = img.getAttribute('data-src');
    //         img.removeAttribute('data-src');
    //         img.attr('src',img.src);
    //   });
        $('.hotel-list-onmap').addClass('show');
      });

    })
  }
  // end load matker here //

  // cluster fly animation here //
  function flyToStore(currentFeature) {
    mapOfResults.flyTo({
      center: currentFeature.geometry.coordinates,
      zoom: 9,
      duration: 2000,
    });
  }
  // end here ///
  function addClusterLayers(mapOfResults, geodata) {

   


      if(geodata){
         var geoData = JSON.parse(geodata);

       }else{
        var geoData = [{"type":"FeatureCollection","features":{}}];
        geoData = geoData[0];

       }
    // Re-add the cluster layers as shown in your code
 
    
    //alert('here'+geoData);

    const arrayFromObject = Object.values(geoData.features);

    //alert(arrayFromObject);



       var results = {
      'type': 'FeatureCollection',
      'features': arrayFromObject
    };
   // console.log(results);
    mapOfResults.addSource('markers', {
        type: 'geojson',
        data: results,
        cluster: true,
        clusterMaxZoom: 14,
        clusterRadius: 50
    });

    mapOfResults.addLayer({
        id: "cluster",
        type: "circle",
        source: "markers",
        paint: {
            'circle-color': [
                'step',
                ['get', 'point_count'],
                '#51bbd6',
                100,
                '#f1f075',
                750,
                '#f28cb1'
            ],
            'circle-radius': [
                'step',
                ['get', 'point_count'],
                20,
                100,
                30,
                750,
                40
            ]
        }
    });

    mapOfResults.addLayer({
        id: "cluster-count",
        type: "symbol",
        source: "markers",
        filter: ["has", "point_count"],
        layout: {
            "text-field": "{point_count_abbreviated}",
            "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
            "text-size": 12
        }
    });

    mapOfResults.addLayer({
        id: "unclustered-point",
        type: "circle",
        source: "markers",
        filter: ["!has", "point_count"],
        paint: {
            "circle-color": "#11b4da",
            "circle-radius": 4,
            "circle-stroke-width": 1,
            "circle-stroke-color": "#fff"
        }
    });


    }
   




  mapOfResults.on('load', () => {
    // Add a new source from our GeoJSON data and
    // set the 'cluster' option to true. GL-JS will
    // add the point_count property to your source data.
    addClusterLayers(mapOfResults); 
    setTimeout(function(){
      var zoomLevel = mapOfResults.getZoom();
    var clusterFeatures = mapOfResults.queryRenderedFeatures({
      layers: ['cluster']
    });
    var markersToShow = [];
    var show_properties = [];

    clusterFeatures.forEach(function(cluster) {
      var clusterCount = cluster.properties.point_count;
      var clusterId = cluster.properties.cluster_id;
     //console.log(cluster.properties+'clusert id');
      // You can now display the cluster count on the map
      // For example, using a popup or a custom UI element
      // Here, we are logging the count to the console
      // console.log('Cluster ID:', clusterId, 'Cluster Count:', clusterCount, 'cluster properties :',cluster.properties );
      show_properties.push(cluster.properties);
      if (clusterCount) {
        $('.marker').hide();

      } else {
        showhotelid = '#marker_' + cluster.properties.dataId;
        markersToShow.push(showhotelid);
      }
    });
    markersToShow.forEach(function(markerId) {
      $(markerId).show();
    });

    },1000);
  });
  function removeClusterLayers() {
    if (mapOfResults.getLayer('cluster')) {
        mapOfResults.removeLayer('cluster');
    }
    if (mapOfResults.getLayer('cluster-count')) {
        mapOfResults.removeLayer('cluster-count');
    }
    if (mapOfResults.getLayer('unclustered-point')) {
        mapOfResults.removeLayer('unclustered-point');
    }
    if (mapOfResults.getSource('markers')) {
        mapOfResults.removeSource('markers');
    }
}

  $('.close-view').click(function(e) {
    e.preventDefault();
    $('.hotel-info-content').removeClass('active');
    $('.hotel-item-map').removeClass('active');
    $('.hotel-item-map').removeClass('not-active');
    $('.close-view').css('display', 'none');
    $('.mapboxgl-popup').remove();
    $(this).closest('.hotel-list-onmap').removeClass('show');
  })

  var picker = $('#daterangepicker-inline').daterangepicker({
    parentEl: "#daterangepicker-inline-container",
    autoApply: true,
    minDate: new Date(),
    autoUpdateInput: false,
    locale: {
      cancelLabel: 'Clear',
    }
  });

  picker.on('apply.daterangepicker', function(ev, picker) {
    $('.onrange').html(picker.startDate.format('DD-MM-YYYY') + ' -> ' + picker.endDate.format('DD-MM-YYYY'));
    $('.include-form').fadeIn("fast");
  });

  function hideMarkers() {
    var markers = document.getElementsByClassName('marker');
    for (var i = 0; i < markers.length; i++) {
      markers[i].style.visibility = 'hidden';
    }
  }

  function showMarkers() {
    var markers = document.getElementsByClassName('marker');
    for (var i = 0; i < markers.length; i++) {
      markers[i].style.visibility = 'visible';
    }
  }

  // Listen for the "zoom" event


  // function filterdata(mapOfResults){

  //     properties_all = ;

  //         console.log(properties_all);
  //       var bounds = mapOfResults.getBounds();

  //        properties_all.forEach(function (marker) {
  //         var markerCoordinates = marker.geometry.coordinates;
  //         if (bounds.contains(markerCoordinates)) {
  //             var markerProperties = marker.properties;
  //             console.log(markerProperties);


  //             // var listItem = document.createElement('li');
  //             // listItem.textContent = markerProperties.title; // Customize this based on your marker data
  //             // listItem.addEventListener('click', function () {
  //             //     // Handle clicking on a marker (e.g., pan to the marker's location)
  //             //     map.flyTo({ center: markerCoordinates });
  //             // });

  //         }
  //     });
  // }

  ///////////////////////////////// dragend//////////////////////////////////

  // mapOfResults.on('dragend', function () {
  //   $('#property_cards_wrap .row').empty();

  //   var properties_all = ;
  //   var bounds = mapOfResults.getBounds();
  //   var limit_properties = 0;

  //   properties_all.forEach(function (marker) {
  //     var markerCoordinates = marker.geometry.coordinates;

  //     if (bounds.contains(markerCoordinates) && limit_properties < 6) {
  //       var markerProperties = marker.properties;
  //       var imagesobj =  markerProperties.images;

  //       var textArray = [];
  //       jQuery('.title-second').each(function() {
  //         var text = jQuery(this).text();
  //         textArray.push(text);
  //       });

  //       if(jQuery.inArray(markerProperties.title, textArray) == -1){
  //         var imagesHTML = '';
  //         var imagelimit = 0;

  //         imagesobj.forEach((image) => {
  //           if (imagelimit < 5) {
  //              var filename = image.match(/\/([^/]+)$/)[1];

  //             imagesHTML += `<img loading="lazy" src="property-image/resize/1200x700/louis-hotel/${filename}/property-image" class="w-100" />`;
  //             imagelimit++;
  //           }
  //         });

  //          var htmlcont = `
  //                   <div class="hotel-item-map col" id="">
  //                     <div class="inner-wrapper hotel-page-list suite-ontouch no-opacity">
  //                        <div class="pr-lst result-grid">
  //                           <div>
  //                              ${imagesHTML}
  //                           </div>

  //                       </div>
  //                        <div class="hotel-prices hotel-price-detail d-flex">
  //                             <div class="row align-items-center justify-content-center">
  //                               <div class="mr-2">
  //                                 <i class="ico ico-info-green"></i>
  //                               </div>
  //                               <h3 class="mb-0">

  //                       <span class="title-font-2 mr-1">From</span> <span class="color-primary">${markerProperties.price}</span>  
  //                               </h3>
  //                               <div class="ml-2">
  //                                 <span class="pernight"></span>
  //                               </div>
  //                             </div>
  //                           </div>
  //                       </div>

  //                       <a href="">
  //                         <div class="mb-3 mt-2 ">
  //                           <h3 class="title-second is-small title-line mb-0">${markerProperties.title}</h3>
  //                         </div>
  //                       </a>
  //                          <div class="hotel-info-content px-3 font-2">
  //                           <div class="row align-items-center mb-3">
  //                             <div class="col-md-7">

  //                             </div>
  //                             <div class="col-md-5">
  //                               <a href="#" class="btn btn-dark btn-block btn-sm btn-sidebar" data-sidebar="#suiteside" onclick="replacePropertySuites()">View
  //                                 Suites</a>
  //                             </div>
  //                           </div>
  //                           <div class="addre">

  //                           </div>

  //                         </div>
  //                   </div>`;

  //         $('#property_cards_wrap .row').append(htmlcont);
  //         limit_properties++;
  //       }
  //     }
  //   });

  //   console.log(`console bound ${bounds}`);
  // });

  ///////////////////////////////////end ///////////////////////////////////
  var prop = '';
   // already searched country in this array and check for that to so we don't need to hit request again 
   var currentURL = window.location.href;
   var params = new URLSearchParams(currentURL.substring(currentURL.indexOf('?')));
   var sValue = params.get('s');
   var already_searched = [];
  // end search
already_searched.push(sValue);


  mapOfResults.on('zoomend', function() {
    prop;
   

    $('#property_cards_wrap #property_cards_list').html(' ');
    if(prop){
        var properties_all = prop;
        console.log('here zoomend prop');
      }else{
         var properties_all = [];
      }
  
    var bounds = mapOfResults.getBounds();
    var limit_properties = 0;

    properties_all.forEach(function(marker) {
      var markerCoordinates = marker.geometry.coordinates;

      if (bounds.contains(markerCoordinates) && limit_properties < 6) {
        var markerProperties = marker.properties;
        var imagesobj = markerProperties.images;
        console.log(markerProperties);
        var textArray = [];
        jQuery('.title-second').each(function() {
          var text = jQuery(this).text();
          textArray.push(text);
        });

        if (jQuery.inArray(markerProperties.title, textArray) == -1) {
          var imagesHTML = '';
          var imagelimit = 0;

          imagesobj.forEach((image) => {
            if (imagelimit < 1) {

              imagesHTML += `<img loading="lazy" src="property-image/resize/615x419/${image}/property-image" class="w-100" />`;
              imagelimit++;


            } else {
              return imagesHTML;
            }
          });

          var htmlcont = `
  <div class="hotel-item-map col-6">
    <div class="inner-wrapper hotel-page-list suite-ontouch no-opacity">
      <div class="pr-lst result-grid">
       
          ${imagesHTML}
      
      </div>
      <div class="hotel-meta full-width is-small">
        <a href="#" class="view bg-btn-gl-001 btn-sidebar" data-sidebar="#reviews" onclick="replaceReviewData(${markerProperties.id})">
          Reviews
        </a>
        <a href="#" class="view bg-btn-gl-001 btn-sidebar" data-sidebar="#quickinfo" onclick="replacePropertyData(${markerProperties.id})">
          Info
        </a>
        <a href="#" class="view bg-btn-gl-001 btn-sidebar" data-sidebar="#property-gallery" onclick="replacePropertyData(${markerProperties.id})">
          Gallery
        </a>
        <a href="#" class="view bg-btn-gl-001 btn-sidebar" data-sidebar="#suiteside" onclick="replacePropertySuitesdata(${markerProperties.id})">
          Suite(s) 1
        </a>
        <div class="hotel-prices hotel-price-detail d-flex">
          <div class="row align-items-center justify-content-center">
            <div class="mr-2">
              <i class="ico ico-info-green"></i>
            </div>
            <h3 class="mb-0">
              <span class="title-font-2 mr-1">From</span>
              <span class="color-primary">€${markerProperties.price}</span>
            </h3>
            <div class="ml-2">
              <span class="pernight"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a href="${markerProperties.slug}">
      <div class="mb-3 mt-2 ">
          <h3 class="title-second is-small title-line mb-0">${markerProperties.title}</h3>
      </div>
    </a>
    <div class="hotel-info-content px-3 font-2">
      <div class="row align-items-center mb-3">
        <div class="col-md-7"></div>
        <div class="col-md-5">
          <a href="#" class="btn btn-dark btn-block btn-sm btn-sidebar" data-sidebar="#suiteside" onclick="replacePropertySuites()">View Suites</a>
        </div>
      </div>
      <div class="addre"></div>
    </div>
  </div>`;

          $('#property_cards_wrap #property_cards_list').append(htmlcont);
          limit_properties++;
        }
      }
    });


  var zoomLevel = mapOfResults.getZoom();
 /////////////////////   get counrty name  ////////////////////////
      var center = mapOfResults.getCenter();
    var latitude = center.lat;
    var longitude = center.lng;

    console.log(latitude,longitude);
    var currentURL = window.location.href;
var params = new URLSearchParams(currentURL.substring(currentURL.indexOf('?')));
var sValue = params.get('s');

                   //   already_searched.push(country.text);
      const apiUrl = `https://api.mapbox.com/geocoding/v5/mapbox.places/${longitude},${latitude}.json?access_token=pk.eyJ1IjoiZmFyaXNzeWFpZnVkZGluIiwiYSI6ImNrb253OWNqOTA1ajUyd2w0Mm92ZXEzeWUifQ.2zZbnnViPfgP4-jHknMifQ`;

        fetch(apiUrl)
          .then(response => response.json())
          .then(data => {
            const country = data.features[0].context.find(context => context.id.startsWith('country'));
            console.log('Country:' +country.text  +' zoom level'+ zoomLevel +'s value'+ sValue);


            //////////// on zoom level 6 /////////////////
            //////////// get properties by country name///

                 
               if(zoomLevel > 6 && country.text != sValue && !already_searched.includes(country.text)){

                already_searched.push(country.text);

                      $.ajax({
                        url: '/globalsearchavailability',
                        type: 'get',
                        data:{
                          s:`${country.text}`,
                          view:'map',
                          req:'ajax'
                        },
                        dataType: 'json',
                        success: function(response){

                          property = JSON.parse(response.propertyResultsForMap);
                            console.log(response.propertyResultsForMap+'prop');
                          loadMarkers(property);


                           var geoDatas = JSON.parse(response.geodata);

                      var existingData = mapOfResults.getSource('markers')._data;

                      // Append new features to the existing data
                      var newFeatures =Object.values(geoDatas.features)  ; // Assuming 'geoData' contains your new features
                      console.log(newFeatures);   
                     newFeatures.forEach((newObj) => {
                        existingData.features.push(newObj);
                      });

                      console.log(existingData);

                      const arrayFromObject = Object.values(existingData.features);

                    removeClusterLayers(mapOfResults);

                           var results = {
                          'type': 'FeatureCollection',
                          'features': arrayFromObject
                        };
                       // console.log(results);
                        mapOfResults.addSource('markers', {
                            type: 'geojson',
                            data: results,
                            cluster: true,
                            clusterMaxZoom: 14,
                            clusterRadius: 50
                        });

                        mapOfResults.addLayer({
                            id: "cluster",
                            type: "circle",
                            source: "markers",
                            paint: {
                                'circle-color': [
                                    'step',
                                    ['get', 'point_count'],
                                    '#51bbd6',
                                    100,
                                    '#f1f075',
                                    750,
                                    '#f28cb1'
                                ],
                                'circle-radius': [
                                    'step',
                                    ['get', 'point_count'],
                                    20,
                                    100,
                                    30,
                                    750,
                                    40
                                ]
                            }
                        });

                        mapOfResults.addLayer({
                            id: "cluster-count",
                            type: "symbol",
                            source: "markers",
                            filter: ["has", "point_count"],
                            layout: {
                                "text-field": "{point_count_abbreviated}",
                                "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                                "text-size": 12
                            }
                        });

                        mapOfResults.addLayer({
                            id: "unclustered-point",
                            type: "circle",
                            source: "markers",
                            filter: ["!has", "point_count"],
                            paint: {
                                "circle-color": "#11b4da",
                                "circle-radius": 4,
                                "circle-stroke-width": 1,
                                "circle-stroke-color": "#fff"
                            }
                        });

                        },
                        error: function(response) {
                          console.log('Error: ' + response);
                        }
                      });

               } 
             
            ////////////////// end here /////////////////
            /// / / / / / / / / / / / / / / / / / / / / / 
          })
          .catch(error => {
            console.error('Error:', error);
          });

    /////////////////////   end get counrty name  ////////////////////////

  });

  mapOfResults.on('zoom', function() {

    var zoomLevel = mapOfResults.getZoom();
    var clusterFeatures = mapOfResults.queryRenderedFeatures({
      layers: ['cluster']
    });
    var markersToShow = [];
    var show_properties = [];
   

    clusterFeatures.forEach(function(cluster) {
      var clusterCount = cluster.properties.point_count;
      var clusterId = cluster.properties.cluster_id;
     //console.log(cluster.properties+'clusert id');
      // You can now display the cluster count on the map
      // For example, using a popup or a custom UI element
      // Here, we are logging the count to the console
      // console.log('Cluster ID:', clusterId, 'Cluster Count:', clusterCount, 'cluster properties :',cluster.properties );
      show_properties.push(cluster.properties);
      if (clusterCount) {
        $('.marker').hide();

      } else {
        showhotelid = '#marker_' + cluster.properties.dataId;
        markersToShow.push(showhotelid);
      }
    });
    markersToShow.forEach(function(markerId) {
      $(markerId).show();
    });


  });

  var layerLists = document.getElementById('menu');
  var inputss = layerLists.getElementsByTagName('input');

  function switchLayer(layer) {
    
    var layerId = layer.target.id;
   
  //addClusterLayers(mapOfResults); 
    if(layerId == 'dark-v10'){
      const markerElements = document.querySelectorAll(".mapboxgl-marker");

      // Iterate through the elements and change the background image for each
      markerElements.forEach(markerElement => {
          markerElement.style.backgroundImage = `url(images/black-icon-2.png)`;
      });

    }else{

       const markerElements = document.querySelectorAll(".mapboxgl-marker");

      // Iterate through the elements and change the background image for each
      markerElements.forEach(markerElement => {
          markerElement.style.backgroundImage = `url(images/map2.png)`;
      });
    }

    mapOfResults.setStyle('mapbox://styles/mapbox/' + layerId);
    removeClusterLayers(mapOfResults);
    

    setTimeout(function(){
      addClusterLayers(mapOfResults); 
      //console.log('here working');
    },1000);


  }

  for (var i = 0; i < inputss.length; i++) {

    inputss[i].onclick = switchLayer;
    //console.log(inputss);
 
  }

function getgeocode(){

   const search = decodeURIComponent(new URLSearchParams(window.location.search).get('s'));
    $.ajax({
      url: '/geocode',
      type: 'post',
      data :{
        serach_text : search
      },
      dataType: 'json',
      success: function(response) {
      console.log(response);
      },
      error: function(response) {
        console.log('Error: ' + response);
      }
    });
}




///////////////////////////////// code to fetch the data by states in header (mapbox) ////


jQuery('.test a').click(function(){
  activeTag =  jQuery(this).text();
  console.log(activeTag);
   

    $.ajax({
      url: '/globalsearchavailability',
      type: 'get',

      data:{
        s:activeTag,
        view:'map',
        req:'ajax'
      },
      dataType: 'json',
      success: function(response){
      //console.log(JSON.parse(response.geodata));
      jQuery('.mapboxgl-marker').remove();
      removeClusterLayers(mapOfResults);


       property = JSON.parse(response.propertyResultsForMap);

       loadMarkers(property);

       addClusterLayers(mapOfResults, response.geodata);
       console.log(property);
       prop =   property;
        propert = JSON.parse(response.geodata);

       flyToStore(propert.features[0]);

      },
      error: function(response) {
        console.log('Error: ' + response);
      }
    });


        // Check if the URL contains the "s" parameter
        // if (currentURL.includes('s=')) {
        //   // Replace the "s" parameter value with 'Germany'
        //   var newURL = currentURL.replace(/(s=)[^&]*/, `s=${activeTag}`);
        //     console.log(newURL);
            
        //   // Redirect to the new URL
        //   window.location.href = newURL;
        // }
});




//////////////////// end code ///////////////////

</script>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>

function replacePropertySuitesdata(id) {
 

            jQuery("#append_suite").html(" ");
            jQuery("#suites_sidebar").html(" ");
            jQuery("#suites-loader").show(); 
  jQuery.ajax({
        url: '/suites/' + id,
        type: 'post',
        success: function(response) {
              

          jQuery(".menunav-group").addClass("styleclender");
            var data = JSON.parse(response);
            console.log(data);
            var html = '';
            var sidebar=''

            jQuery.each(data, function(i, item) {
              jQuery(".property_suites_name").html(item.property_name);
                html += '<div class="col-6 suites">';
                html += '<div class="card">';

                html += '<div class="result-grid-two">'; // Use the class result-grid for the slider
                jQuery.each(item[0], function(i, images) {
                    html += '<div class="slide">';
                    html += '<img src="/room-image/resize/615x650/' + item.property_slug + '/' + item.slug + '/' + images.file_name + '" class="card-img-top" alt="...">';
                    html += '</div>';
                });
                html += '</div>';

                html +='<div class="hotel-page-list">';

                html += '<div class="hotel-meta full-width is-small">';
                html += '<a href="#" class="view bg-btn-gl-001 btn-sidebar " data-sidebar="#suiteside" onclick="replacePropertySuitesdata('+item.property_id+')">Extras</a>';
                html +='<a href="#" class="view bg-btn-gl-001 btn-sidebar side_bar" data-sidebar="#suiteinfo2" onclick="suitesdata('+item.id+')">Quick info</a>';
                html +='<a href="#" class="view bg-btn-gl-001 btn-sidebar side_bar" data-sidebar="#suites-gallery" onclick="replacePropertyData('+item.property_id+')">Gallery</a>';
                html +='<a href="#" class="view bg-btn-gl-001 btn-sidebar side_bar cal_rates" data-name="'+ item.category_name +'" data-propertyid="'+item.property_id+'" data-catid="'+item.id+'"data-sidebar="#calender" id="calShow">Rates </a>';
                html += '<a href="#" data-sidebar="#priceinfo" class="price-info---12 btn-sidebar i-none side_bar" id="single-'+item.id+'" data-propertyid="'+item.property_id+'" onclick="replacenewPrices(\'' + item.category_name + '\','+item.id+')">';

                html +=' <h3 class="mb-0 price_details"><span class="title-font-2 mr-1"></span> <span class="color-primary">€ '+item.price+' </span>';
                html +='</a>';
                html += '</div>';

                html += '</div>';

                html += '</div>';

                html += '<div class="card-body">';
                html +='<div class="suites_details">';
                sidebar+=' <li class="nav-item">';
                sidebar+= '<a class="nav-link nav-link-sub" id="suitelist1-tab" data-toggle="pill" href="#suitelist1" role="tab" aria-controls="suitelist1" aria-selected="false">';
                sidebar+=item.category_name+'</a>';
                sidebar+='</li>';
                html += '<h3 class="card-title">' + item.category_name + '</h3>';
                html +='</div>';          
                html += '<div class="suites_details2 d-flex align-items-center justify-content-end">';
                html += '<p class="card-text suites_details3">';
                if(item.suite_size > 0) {
                    html += '<img src="/uploads/suites_icone/Suite-Size.svg" class="suites_svg ">' + item.suite_size + ' m<sup>2</sup>';
                }

                if(item.total_guests > 0) {
                    html += '<img src="/uploads/suites_icone/Sleeps.svg" class="suites_svg"> Sleep(s) ' + item.total_guests;
                }
                html += '</p>';
                html +='</div>';
                

                html += '<p class="card-text">' + item.room_desc + '</p>';
                // html += '<a href="hotel/'+item.site_propertyslug+'/suites" class="btn btn-primary">View Hotel</a>';
                                html += '<a href="#calcF" class="menu-nav text-menu cal-f btn btn-primary cal" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="calcF">';
                html += '<span class="cal-date" data-toggle="tooltip" title="Change availability">';
                html += 'Select Date(s)';
                                html += '</span>';
                html += '</a>';

                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
            });

            jQuery("#append_suite").html(html);
            jQuery("#suites_sidebar").html(sidebar);

            // Initialize Slick slider for elements with class result-grid
            try {
              jQuery(".result-grid-two").slick({
                    slidesToShow: 1,
                    fade: true,
                    prevArrow: '<button class="slide-arrow prev-arrow"><i class="ico ico-back"></i></button>',
                    nextArrow: '<button class="slide-arrow next-arrow"><i class="ico ico-next"></i></button>'
                });
            } catch (error) {
                console.error("Error initializing Slick slider:", error);
            }

            jQuery(".suites-loader").hide();
        },
        error: function(xhr, status, error) {
            // Handle errors if necessary
        }
    });
}


function suitesdata(id){
 
  jQuery.ajax({
        url: '/suites_amenities/' + id,
        type: 'post',

        success: function(response) {
        var data=JSON.parse(response);
        console.log(data[2])

        jQuery("#suites_name").html(data[0].category_name);
        jQuery(".describtion_data").html(data[0].room_desc);
        jQuery(".benefits").html(data[0].benefits);
        jQuery(".highlights").html(data[0].highlights);
        jQuery(".amenities").html(data[1].amenities_eng);
        jQuery(".we_love_this").html(data[1].why_we_love_it);
        var long=data[2].longitude;
        var lat=data[2].latitude;
        var loc=data[2].address;
   
        var locations = [
                      [loc, lat, long],
                    ];
                  
                    mapboxgl.accessToken = 'pk.eyJ1IjoibnVtYmVyN2V2ZW4iLCJhIjoiY2tpNjVrNDB5MnJmZzJzbHRwc3A1emN5ZSJ9.8hbjMM5UBnta7I26RaQX6g';
                      map = new mapboxgl.Map({
                      container: 'map3', // container ID
                      style: 'mapbox://styles/mapbox/satellite-v9', // style URL
                      // center: [lat,long], // starting position [lng, lat]
                      center: [long, lat],
                      zoom: 16 // starting zoom
                    });
                    const marker = new mapboxgl.Marker()
                      .setLngLat([long, lat])
                      .addTo(map);
        // setMapLocationDetail(data[2].latitude, data[2].longitude ,data[2].address);
        
       

        }
      
      });
}

jQuery(document).ready(function (){
  jQuery(document).on("click", ".side_bar", function () {
    var value = jQuery(this).data("sidebar");
    jQuery(value).addClass('sidebar-level-2'); 
    
    var text = value.replace("#", ""); 
    var tab = jQuery(this).attr("sidebar");

    jQuery(".close-sidebar").addClass('hide_bar');
    jQuery(".hide_bar").attr('data-tab', text); 
    jQuery(".sidebar_hide_bar").attr('data-tab', text);// corrected the syntax to set attribute
    jQuery(".sidebar-back").addClass('sidebar_hide_bar');
    jQuery(".close-sidebar").removeClass('close-sidebar').addClass('hide_bar'); // Add class 'hide_bar' to maintain consistency
    jQuery(".sidebar-back").removeClass('sidebar-back').addClass('sidebar_hide_bar'); // Add class 'sidebar_hide_bar' to maintain consistency
});

jQuery(document).on("click", ".hide_bar", function () {
    var value = jQuery(this).data("tab"); 
    jQuery(value).removeClass('sidebar-level-2');
    jQuery("#subprice").html(" ");
    
    jQuery("#" + value).removeClass('show');; 
    jQuery(".hide_bar").addClass('close-sidebar');
    jQuery(".sidebar_hide_bar").addClass('sidebar-back');
    jQuery(".sidebar_hide_bar").removeAttr("data-tab");
    jQuery(".hide_bar").removeAttr("data-tab");
    jQuery(".hide_bar").removeClass('hide_bar');
    jQuery(".sidebar_hide_bar").removeClass('sidebar_hide_bar'); // corrected the syntax to remove class
});

jQuery(document).on("click", ".sidebar_hide_bar", function () {
  jQuery("#subprice").html(" "); 
    var value = $(".hide_bar").data("tab"); 
    jQuery(value).removeClass('sidebar-level-2');
    jQuery("#" + value).removeClass('show');; 
    jQuery(".hide_bar").addClass('close-sidebar');
    jQuery(".sidebar_hide_bar").addClass('sidebar-back');
    jQuery(".hide_bar").removeAttr("data-tab");
    jQuery(".sidebar_hide_bar").removeAttr("data-tab");
    jQuery(".hide_bar").removeClass('hide_bar');
    jQuery(".sidebar_hide_bar").removeClass('sidebar_hide_bar'); // corrected the syntax to remove class
});


}); 



    function replacenewPrices(category_name,cat_id){

                     var property_id = $("#single-" + cat_id).attr("data-propertyid");
                     var action="cat_id";
                         jQuery(".suites-name").html(name);
                         jQuery(".hide_day").html(" ");
                         jQuery(".monday_price").html("");
                         jQuery(".tuesday_price").html("");
                         jQuery(".wednesday_price").html("");
                         jQuery(".thursday_price").html("");
                         jQuery(".friday_price").html("");
                         jQuery(".saturday_price").html("");
                         jQuery(".sunday_price").html("");
       
                         jQuery.ajax({
                                    url: '/hotels/single_suites/' + cat_id,
                                    type: 'post',
                                    data: {'action': action, 'property': property_id},
                                    success: function(response) {                
                                      var price = JSON.parse(response);        
                                        if (price[2].booking_policy == '') {
                                          jQuery(".booking_statement").html(price[3].policy);
                                        } else {
                                          jQuery(".booking_statement").html(price[2].booking_policy);
                                        }
                                        jQuery(".suites-name").html("" + price[2].category_name);
                                        jQuery("#suite-total-price").html(" €" + price[5].tatotal);
                                        if(price[6].vat_tax=="0"){
                                            var tax=price[5].tatotal*1/100;
                                            jQuery("#hotel-tax").html(tax);
                                           $total=price[5].tatotal+tax; 
                                            jQuery("#total-tax").html($total);

                                          }else{
                                              var tax=price[5].tatotal*price[6].vat_tax/100;
                                            jQuery("#hotel-tax").html(tax);
                                            $total=price[5].tatotal+tax; 
                                            jQuery("#total-tax").html($total);
                                          }
                                        jQuery("#tax-value").html(price[6].vat_tax);
                                        jQuery("#tax-city").html(price[6].category_name);
                                        

                                        var i = 1;
                                        jQuery.each(price[0], function(day, price) {
                                          var html = '<div class="row subs-price">' +
                                                    '<div class="col-6 ">' + day + 
                                                    '<span class="reached" id="day-reached-' + i + '"></span>' +
                                                    '</div>' +     
                                                    '<div class="col-3 text-right"><span class="' + day.toLowerCase() + '_price">€ ' + price + '</span></div>' +
                                                    '<div class="col-3 text-right pr-0">R5,534</div>' +
                                                '</div>';
                                                jQuery("#subprice").append(html);
                                            i = i + 1;  
                                        });

                                        var count = Object.keys(price[0]).length;
                                        if(count > 1){
                                          jQuery("#day-reached-1").html("  (Arrival)");
                                          jQuery("#day-reached-" + count).html("  (Departure)");
                                        }
                                    }
                                });  
    }
    
    </script> 
    



</script> 


<style type="text/css">
    .suites-loader {
        width: 75%;
        text-align: center;
        display: inline-block;
        margin: auto;
        padding-left: 20%;
    }
    .append_suite_scroll{
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100vh - 150px);
    }
    .append_suite_scroll .slick-slide img{
        padding-top: 0px;
        max-height: 400px;
        min-height: 400px;
        object-fit: cover;
        object-position: center;
    }
    h3.mb-0 {
        background-color: white;
    }
    .close_icone {
    width: 63px !important;
}
</style>
<script type="text/javascript" src="https://stage.emporium-safari.com/themes/EC/js/global-availability-search.js?v=1.0"></script>


<div class="sidebar-main pt-4" id="suiteside" data-attr-close-modal="close">
    


    <div class="h-100 pl-5">
        <div class="d-flex align-items-center mb-3">
            <a href="#" class="sidebar-back">
                <i class="ico ico-back"></i>
            </a>
            <h3 class="title-second title-line mb-0 property_suites_name">
                <!-- Your (<span data-place="property" data-replace="property_short_name"></span>) overview: -->
               
            </h3>

            <a href="#" class="close-sidebar">
            <img src="/uploads/suites_icone/close-icon.svg" class="suites_svg close_icone">
                <!-- <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <title>Close</title>
                    <path d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
                    </path>
                </svg> -->
             </a>

        </div>
        <!-- <div id="check"> 
            
        </div>  -->
        <!-- <h3 class="title-second title-line mb-5">The Ludlow Hotel</h3> -->
        <div class="row" id="suites-loader">
            <img src="/themes/EC/images/suites-loader.jpg" class="suites-loader">
        </div>

        


        <div class="row" id="suites-popup">
            <div class="col-lg-3">
                <div class="sidebar-nav-section">
                    <div class="humburger-menu-sidebar">
                        <div class="line"></div>
                        <div class="line"></div>
                        <div class="line"></div>
                    </div>
                    <div class="nav-collapse">
                        <ul class="nav flex-column nav-sidebar is-small" id="suitesside-tab" role="tablist" aria-orientation="vertical" data-place="property-suites">
                            <li class="nav-item">
                                <a class="nav-link" id="suiteslist-tab" data-toggle="pill" href="#suiteslist" role="tab" aria-controls="suiteslist" aria-selected="true">Suites</a>
                            </li>
                            <li class="nav-item">
                            <a class="nav-link nav-link-sub" id="suitelist1-tab" data-toggle="pill" href="#suitelist1" role="tab" aria-controls="suitelist1" aria-selected="false"> All Suites </a> 
                            </li>
                        <li id="suites_sidebar"> </li> 
                            
                        </ul>
                    </div>
                </div>
            </div>
            <!-- <div class="col-lg-9 h-100" id="append_suit_images">
      
            </div> -->
            <div class="col-lg-9 h-100">
                <div class="append_suite_scroll pr-5">
                    <div class="row" id="append_suite">  
                    </div>   
                </div>  
            </div>




            
        </div>
    </div>
</div>
<script> $('.result-grid').slick({
      slidesToShow: 1,
      fade: true,
      prevArrow: '<button class="slide-arrow prev-arrow"><i class="ico ico-back"></i></button>',
      nextArrow: '<button class="slide-arrow next-arrow"><i class="ico ico-next"></i></button>'
    });
</script> <div class="sidebar-main share-sidebar" id="share">
    <a href="javascript:void(0);" class="close-sidebar">
        <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24"
            xmlns="http://www.w3.org/2000/svg">
            <title>Close</title>
            <path
                d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
            </path>
        </svg>
    </a>


    <div class="sidebar-scroller">
        <h3>Share this accommodation with friends and family</h3>
        <nav class="nav flex-column nav-line">
           <a class="nav-link media-s" href="https://www.facebook.com/sharer/sharer.php?u= https://stage.emporium-safari.com/globalsearchavailability?arrive=&amp;departure=&amp;rac=r0a2c0&amp;s=Berlin&amp;type=destination&amp;view=map&amp;view=map" target="_blank">
                <i class="fa fa-facebook" aria-hidden="true"></i> Facebook
            </a>
            <a  class="nav-link media-s" href="https://twitter.com/intent/tweet?url=https://stage.emporium-safari.com/globalsearchavailability?arrive=&amp;departure=&amp;rac=r0a2c0&amp;s=Berlin&amp;type=destination&amp;view=map&amp;view=map" target="_blank">
                <i class="fa fa-twitter" aria-hidden="true"></i>Twitter
            </a>
            <a class="nav-link media-s copy_text" href="https://stage.emporium-safari.com/globalsearchavailability?arrive=&amp;departure=&amp;rac=r0a2c0&amp;s=Berlin&amp;type=destination&amp;view=map&amp;view=map"><i class="fa fa-link" aria-hidden="true" ></i> Copy Link</a>

            <a class="nav-link media-s" href="mailto:https://stage.emporium-safari.com/globalsearchavailability?arrive=&amp;departure=&amp;rac=r0a2c0&amp;s=Berlin&amp;type=destination&amp;view=map&amp;view=map?subject=Share email link&amp;body=https://stage.emporium-safari.com/globalsearchavailability?arrive=&amp;departure=&amp;rac=r0a2c0&amp;s=Berlin&amp;type=destination&amp;view=map&amp;view=map"
            title="Share by Email" target="_blank"><i class="fa fa-envelope" aria-hidden="true"></i>Email</a>

            <a class="nav-link media-s" href="https://wa.me/whatsappphonenumber/?text=http://development.emporium-voyage.com/" data-action="share/whatsapp/share" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true"></i> Whatsapp</a>
                        <a class="nav-link media-s" href="https://wa.me/whatsappphonenumber/?text=http://development.emporium-voyage.com/" data-action="share/whatsapp/share" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true"></i> Instagram</a>
            <a class="nav-link media-s" href="https://wa.me/whatsappphonenumber/?text=http://development.emporium-voyage.com/" data-action="share/whatsapp/share" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true"></i> Tiktok</a>
        </nav>
    </div>
</div>

<script>
$('.copy_text').click(function (e) {
    e.preventDefault();
    var copyText = $(this).attr('href');

    document.addEventListener('copy', function(e) {
      e.clipboardData.setData('text/plain', copyText);
      e.preventDefault();
    }, true);

    document.execCommand('copy');  
    console.log('copied text : ', copyText);
    // alert('copied text: ' + copyText); 
});
</script>
<div class="sidebar-main pb-0" id="policies">
    <a href="#" class="close-sidebar">
        <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24"
            xmlns="http://www.w3.org/2000/svg">
            <title>Close</title>
            <path
                d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
            </path>
        </svg>
    </a>


    <div class="sidebar-scroller">
        <div class="d-flex align-items-center mb-5">
            <a href="#" class="sidebar-back">
                <i class="ico ico-back"></i>
            </a>
            <h3 class="title-second title-line mb-0">
                The Ludlow Hotel
            </h3>
        </div>

        <div class="title-main mb-4">
            <h2>Policies</h2>
            <a href="#" class="print-btn">
                <i class="ico ico-print"></i>
            </a>
        </div>
        <div class="accordion accordion-ex" id="accordionExample">
            <div class="card">
                <div class="card-header" id="headingOne check this ">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left btn-accordion collapsed" type="button"
                            data-toggle="collapse" data-target="#collapseOne" aria-expanded="false"
                            aria-controls="collapseOne">
                            Collapsible Group Item #1

                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                        </button>
                    </h2>
                </div>

                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                    <div class="card-body">
                        Some placeholder content for the first accordion panel. This panel is shown by default, thanks
                        to
                        the <code>.show</code> class.
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingTwo">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left btn-accordion collapsed" type="button"
                            data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                            aria-controls="collapseTwo">
                            Collapsible Group Item #2
                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                        </button>
                    </h2>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                    <div class="card-body">
                        Some placeholder content for the second accordion panel. This panel is hidden by default.
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left btn-accordion collapsed" type="button"
                            data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                            aria-controls="collapseThree">
                            Collapsible Group Item #3
                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                        </button>
                    </h2>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                    <div class="card-body">
                        And lastly, the placeholder content for the third and final accordion panel. This panel is
                        hidden
                        by default.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div class="sidebar-main pb-0" id="availability">
    <a href="#" class="close-sidebar">
        <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24"
            xmlns="http://www.w3.org/2000/svg">
            <title>Close</title>
            <path
                d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
            </path>
        </svg>
    </a>


    <div class="sidebar-scroller">
        <div class="d-flex align-items-center mb-5">
            <a href="#" class="sidebar-back">
                <i class="ico ico-back"></i>
            </a>
            <h3 class="title-second title-line mb-0">
                The Ludlow Hotel
            </h3>
        </div>
        <div class="row">
            <div class="col-4">
                <div class="avail-hotel-outer">
                    <div class="avail-htl---0029" id="hotel--06" data-hotel-list="#hotel--06--1">
                        <img src="images/64133123060-77799344932.jpg" class="img-fluid" alt="">
                        <div class="avl-dsc">
                            <p class="title-second title-line mb-0">11 Howard</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-8">
                <div class="available-date w-100" id="calendarAvailable"></div>
            </div>
        </div>
    </div>
</div><div class="sidebar-main pb-0" id="policies">
    <a href="#" class="close-sidebar">
        <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24"
            xmlns="http://www.w3.org/2000/svg">
            <title>Close</title>
            <path
                d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
            </path>
        </svg>
    </a>


    <div class="sidebar-scroller">
        <div class="d-flex align-items-center mb-5">
            <a href="#" class="sidebar-back">
                <i class="ico ico-back"></i>
            </a>
            <h3 class="title-second title-line mb-0">
                The Ludlow Hotel
            </h3>
        </div>

        <div class="title-main mb-4">
            <h2>Policies</h2>
            <a href="#" class="print-btn">
                <i class="ico ico-print"></i>
            </a>
        </div>
        <div class="accordion accordion-ex" id="accordionExample">
            <div class="card">
                <div class="card-header" id="headingOne check this ">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left btn-accordion collapsed" type="button"
                            data-toggle="collapse" data-target="#collapseOne" aria-expanded="false"
                            aria-controls="collapseOne">
                            Collapsible Group Item #1

                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                        </button>
                    </h2>
                </div>

                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                    <div class="card-body">
                        Some placeholder content for the first accordion panel. This panel is shown by default, thanks
                        to
                        the <code>.show</code> class.
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingTwo">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left btn-accordion collapsed" type="button"
                            data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                            aria-controls="collapseTwo">
                            Collapsible Group Item #2
                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                        </button>
                    </h2>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                    <div class="card-body">
                        Some placeholder content for the second accordion panel. This panel is hidden by default.
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left btn-accordion collapsed" type="button"
                            data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                            aria-controls="collapseThree">
                            Collapsible Group Item #3
                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                        </button>
                    </h2>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                    <div class="card-body">
                        And lastly, the placeholder content for the third and final accordion panel. This panel is
                        hidden
                        by default.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div class="sidebar-main" id="myCollection">
    <a href="#" class="close-sidebar">
        <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24"
            xmlns="http://www.w3.org/2000/svg">
            <title>Close</title>
            <path
                d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
            </path>
        </svg>
    </a>


    <div class="sidebar-scroller">
        <div class="d-flex align-items-center mb-5">
            <a href="#" class="sidebar-back">
                <i class="ico ico-back"></i>
            </a>
            <h3 class="title-second title-line mb-0">
                My Collection
            </h3>
        </div>
        <div id="collections">
            <div class="collection-slide align-items-center">
                <div class="left-add-slide">
                    <a href="#addCollaction" class="collapse-collection" data-toggle="collapse">
                        <div class="btn btn-add-collection">
                            +
                        </div>
                        <p class="m---019">Add Yours</p>
                    </a>
                </div>
                <div class="right-collection pl-3">
                    <div class="swipe-collection owl-carousel">
                        <div class="item">
                            <div class="swipe-item">
                                <div class="swipe-round">
                                    <span class="icon-swipe">#</span>
                                    <img src="/images/aaabf028325021.5637326997cb1.jpg" alt="">
                                </div>
                                <div class="swipe-img-wrapper">
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/d9710383434639.5d3c346168dd3.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                </div>
                                <div class="swipe-action">
                                    <div class="swipe-action-btn">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </div>
                                    <div class="swipe-action-content">
                                        <a href="#share" class="collapse-collection" data-toggle="collapse">Share</a>
                                        <a href="#">Edit</a>
                                        <a href="#">Remove</a>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-0">#Collection Name</p>
                        </div>
                        <div class="item">
                            <div class="swipe-item">
                                <div class="swipe-round">
                                    <span class="icon-swipe">#</span>
                                    <img src="/images/aaabf028325021.5637326997cb1.jpg" alt="">
                                </div>
                                <div class="swipe-img-wrapper">
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/d9710383434639.5d3c346168dd3.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                </div>
                                <div class="swipe-action">
                                    <div class="swipe-action-btn">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </div>
                                    <div class="swipe-action-content">
                                        <a href="#share" class="collapse-collection" data-toggle="collapse">Share</a>
                                        <a href="#">Edit</a>
                                        <a href="#">Remove</a>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-0">#Collection Name</p>
                        </div>
                        <div class="item">
                            <div class="swipe-item">
                                <div class="swipe-round">
                                    <span class="icon-swipe">#</span>
                                    <img src="/images/aaabf028325021.5637326997cb1.jpg" alt="">
                                </div>
                                <div class="swipe-img-wrapper">
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/d9710383434639.5d3c346168dd3.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                </div>
                                <div class="swipe-action">
                                    <div class="swipe-action-btn">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </div>
                                    <div class="swipe-action-content">
                                        <a href="#share" class="collapse-collection" data-toggle="collapse">Share</a>
                                        <a href="#">Edit</a>
                                        <a href="#">Remove</a>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-0">#Collection Name</p>
                        </div>
                        <div class="item">
                            <div class="swipe-item">
                                <div class="swipe-round">
                                    <span class="icon-swipe">#</span>
                                    <img src="/images/aaabf028325021.5637326997cb1.jpg" alt="">
                                </div>
                                <div class="swipe-img-wrapper">
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/d9710383434639.5d3c346168dd3.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                </div>
                                <div class="swipe-action">
                                    <div class="swipe-action-btn">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </div>
                                    <div class="swipe-action-content">
                                        <a href="#share" class="collapse-collection" data-toggle="collapse">Share</a>
                                        <a href="#">Edit</a>
                                        <a href="#">Remove</a>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-0">#Collection Name</p>
                        </div>
                        <div class="item">
                            <div class="swipe-item">
                                <div class="swipe-round">
                                    <span class="icon-swipe">#</span>
                                    <img src="/images/aaabf028325021.5637326997cb1.jpg" alt="">
                                </div>
                                <div class="swipe-img-wrapper">
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/d9710383434639.5d3c346168dd3.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                </div>
                                <div class="swipe-action">
                                    <div class="swipe-action-btn">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </div>
                                    <div class="swipe-action-content">
                                        <a href="#share" class="collapse-collection" data-toggle="collapse">Share</a>
                                        <a href="#">Edit</a>
                                        <a href="#">Remove</a>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-0">#Collection Name</p>
                        </div>
                        <div class="item">
                            <div class="swipe-item">
                                <div class="swipe-round">
                                    <span class="icon-swipe">#</span>
                                    <img src="/images/aaabf028325021.5637326997cb1.jpg" alt="">
                                </div>
                                <div class="swipe-img-wrapper">
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/d9710383434639.5d3c346168dd3.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                </div>
                                <div class="swipe-action">
                                    <div class="swipe-action-btn">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </div>
                                    <div class="swipe-action-content">
                                        <a href="#share" class="collapse-collection" data-toggle="collapse">Share</a>
                                        <a href="#">Edit</a>
                                        <a href="#">Remove</a>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-0">#Collection Name</p>
                        </div>
                        <div class="item">
                            <div class="swipe-item">
                                <div class="swipe-round">
                                    <span class="icon-swipe">#</span>
                                    <img src="/images/aaabf028325021.5637326997cb1.jpg" alt="">
                                </div>
                                <div class="swipe-img-wrapper">
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/d9710383434639.5d3c346168dd3.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                </div>
                                <div class="swipe-action">
                                    <div class="swipe-action-btn">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </div>
                                    <div class="swipe-action-content">
                                        <a href="#share" class="collapse-collection" data-toggle="collapse">Share</a>
                                        <a href="#">Edit</a>
                                        <a href="#">Remove</a>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-0">#Collection Name</p>
                        </div>
                        <div class="item">
                            <div class="swipe-item">
                                <div class="swipe-round">
                                    <span class="icon-swipe">#</span>
                                    <img src="/images/aaabf028325021.5637326997cb1.jpg" alt="">
                                </div>
                                <div class="swipe-img-wrapper">
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/d9710383434639.5d3c346168dd3.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                </div>
                                <div class="swipe-action">
                                    <div class="swipe-action-btn">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </div>
                                    <div class="swipe-action-content">
                                        <a href="#share" class="collapse-collection" data-toggle="collapse">Share</a>
                                        <a href="#">Edit</a>
                                        <a href="#">Remove</a>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-0">#Collection Name</p>
                        </div>
                        <div class="item">
                            <div class="swipe-item">
                                <div class="swipe-round">
                                    <span class="icon-swipe">#</span>
                                    <img src="/images/aaabf028325021.5637326997cb1.jpg" alt="">
                                </div>
                                <div class="swipe-img-wrapper">
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/d9710383434639.5d3c346168dd3.jpg" alt="">
                                    </div>
                                    <div class="swipe-img">
                                        <img src="images/29be6592342279.5e49609509d85.jpg" alt="">
                                    </div>
                                </div>
                                <div class="swipe-action">
                                    <div class="swipe-action-btn">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </div>
                                    <div class="swipe-action-content">
                                        <a href="#share" class="collapse-collection" data-toggle="collapse">Share</a>
                                        <a href="#">Edit</a>
                                        <a href="#">Remove</a>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-0">#Collection Name</p>
                        </div>

                    </div>
                </div>
            </div>
            <div class="collapse bg-grey" id="addCollaction" data-parent="#collections">
                <div class="p-4">
                                            <div class="row">
                            <div class="col-xl-7 col-lg-12">
                                <div class="form-group row">
                                    <div class="col-4">
                                        <label>Name of Collection <sup>*</sup> </label>
                                    </div>
                                    <div class="col-8">
                                        <input type="text" class="form-control " name="collection_name" id="collection_name" placeholder="Name ">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-4"> 
                                        <label>Start Date - End Date</label>
                                    </div>
                                    <div class="col-8">
                                        <input type="text" name="datefilter" value="" id="from_to_end" class="form-control"/>
                                    </div>

                                </div>
                                <input type="hidden" name="id" value="">
                            </div>
                            <div class="col-12">
                                <div class="text-right mt-4">
                                    <button class="btn btn-dark rounded-0 px-5  collection_">Save</button>
                                </div>
                            </div>
                        </div>
                                    </div>

            </div>
            <div class="collapse bg-grey" id="share" data-parent="#collections">
                <div class="p-4 shared-container">
                    <h5 class="mb-4">Share with social media:</h5>
                    <div class="sharing d-flex">
                        <a href="#" class="sharing-item fb"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                        <a href="#" class="sharing-item tw"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                        <a href="#" class="sharing-item gp"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
                        <a href="#" class="sharing-item pn"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
                    </div>
                    <div class="divider-share my-5"></div>
                    <h5 class="mb-4">Or share with email:</h5>
                    <form action="#" class="shared-collection">
                        <div class="mail-outer">
                            <div class="row mail-list ">
                                <div class="col">
                                    <label>First Name</label>
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                                <div class="col">
                                    <label>Last Name</label>
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                                <div class="col">
                                    <label>Email</label>
                                    <input type="email" class="form-control" placeholder="">
                                </div>
                                <div class="col-add pr-3">
                                    <a href="#" class="btn btn-add-collection is-small btn-new-mail-form">
                                        +
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="gdpr">
                            <label class="custom-control-label" for="gdpr">
                                I Agree to the GDPR...
                            </label>
                        </div>
                        <div class="text-right mt-2">
                            <button type="submit" class="btn btn-dark px-5 rounded-0 ">Send</button>
                        </div>
                        <div class="success-message">
                            <h3>Your collection has been shared</h3>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="row mt-5 mb-4">
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="pr-lst collection-lst">
                    <img src="images/29be6592342279.5e49609509d85.jpg" class="w-100" data-wow-delay=".3s" alt="">
                    <i class="ico ico-diamon diamon-label"></i>
                    <div class="pr-lst-desc fav-lst-desc">
                        <div class="act-lst">
                            <p class="title-font-2 tt-price">from - € 499</p>
                            <p><a href="#">View Details</a></p>
                            <p><a href="#">Reservation</a></p>
                            <p><a href="#">-Remove</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="pr-lst collection-lst">
                    <img src="images/29be6592342279.5e49609509d85.jpg" class="w-100" data-wow-delay=".3s" alt="">
                    <i class="ico ico-diamon diamon-label"></i>
                    <div class="pr-lst-desc fav-lst-desc">
                        <div class="act-lst">
                            <p class="title-font-2 tt-price">from - € 499</p>
                            <p><a href="#">View Details</a></p>
                            <p><a href="#">Reservation</a></p>
                            <p><a href="#">-Remove</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="pr-lst collection-lst">
                    <img src="images/29be6592342279.5e49609509d85.jpg" class="w-100" data-wow-delay=".3s" alt="">
                    <i class="ico ico-diamon diamon-label"></i>
                    <div class="pr-lst-desc fav-lst-desc">
                        <div class="act-lst">
                            <p class="title-font-2 tt-price">from - € 499</p>
                            <p><a href="#">View Details</a></p>
                            <p><a href="#">Reservation</a></p>
                            <p><a href="#">-Remove</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="pr-lst collection-lst">
                    <img src="images/29be6592342279.5e49609509d85.jpg" class="w-100" data-wow-delay=".3s" alt="">
                    <i class="ico ico-diamon diamon-label"></i>
                    <div class="pr-lst-desc fav-lst-desc">
                        <div class="act-lst">
                            <p class="title-font-2 tt-price">from - € 499</p>
                            <p><a href="#">View Details</a></p>
                            <p><a href="#">Reservation</a></p>
                            <p><a href="#">-Remove</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="pr-lst collection-lst">
                    <img src="images/29be6592342279.5e49609509d85.jpg" class="w-100" data-wow-delay=".3s" alt="">
                    <i class="ico ico-diamon diamon-label"></i>
                    <div class="pr-lst-desc fav-lst-desc">
                        <div class="act-lst">
                            <p class="title-font-2 tt-price">from - € 499</p>
                            <p><a href="#">View Details</a></p>
                            <p><a href="#">Reservation</a></p>
                            <p><a href="#">-Remove</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="pr-lst collection-lst">
                    <img src="images/29be6592342279.5e49609509d85.jpg" class="w-100" data-wow-delay=".3s" alt="">
                    <i class="ico ico-diamon diamon-label"></i>
                    <div class="pr-lst-desc fav-lst-desc">
                        <div class="act-lst">
                            <p class="title-font-2 tt-price">from - € 499</p>
                            <p><a href="#">View Details</a></p>
                            <p><a href="#">Reservation</a></p>
                            <p><a href="#">-Remove</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="pr-lst collection-lst">
                    <img src="images/29be6592342279.5e49609509d85.jpg" class="w-100" data-wow-delay=".3s" alt="">
                    <i class="ico ico-diamon diamon-label"></i>
                    <div class="pr-lst-desc fav-lst-desc">
                        <div class="act-lst">
                            <p class="title-font-2 tt-price">from - € 499</p>
                            <p><a href="#">View Details</a></p>
                            <p><a href="#">Reservation</a></p>
                            <p><a href="#">-Remove</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="pr-lst collection-lst">
                    <img src="images/29be6592342279.5e49609509d85.jpg" class="w-100" data-wow-delay=".3s" alt="">
                    <i class="ico ico-diamon diamon-label"></i>
                    <div class="pr-lst-desc fav-lst-desc">
                        <div class="act-lst">
                            <p class="title-font-2 tt-price">from - € 499</p>
                            <p><a href="#">View Details</a></p>
                            <p><a href="#">Reservation</a></p>
                            <p><a href="#">-Remove</a></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div><div class="sidebar-main" id="reservation">
    <a href="#" class="close-sidebar">
        <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24"
            xmlns="http://www.w3.org/2000/svg">
            <title>Close</title>
            <path
                d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
            </path>
        </svg>
    </a>
    <div id="smartwizard" class="wizard-reservation">
        <ul class="nav mx-5 mt-4">
            <li>
                <a class="nav-link" href="#step-1">
                    1. WHEN
                </a>
            </li>
            <li>
                <a class="nav-link" href="#step-2">
                    2. SUITES
                </a>
            </li>
            <li>
                <a class="nav-link" href="#step-3">
                    3. ADD TO SUITE
                </a>
            </li>
            <li>
                <a class="nav-link" href="#step-4">
                    4. PAYMENT DETAILS
                </a>
            </li>
            <li>
                <a class="nav-link" href="#step-5">
                    5. CONFIRMATION
                </a>
            </li>
        </ul>

        <div class="tab-content h-100">
            <div id="step-1" class="tab-pane" role="tabpanel">
                <div class="sidebar-scroller is-reserve">
                    <div class="row">
                        <div class="col-lg-9 col-md-8">
                            <div class="choose-date">
                                <h3 class="mb-5">Your date and suite</h3>
                                <hr>
                                <h3 class="mb-4 mt-5">Your selected dates include: </h3>
                                <div class="row mb-5">
                                    <div class="col">
                                        <p><b>Arrival date</b></p>
                                        <div class="form-group form-inline-group">
                                            <input type="text" class="form-control form-line fromdate"
                                                placeholder="Select arrival date">
                                            <span><i class="fa fa-calendar-o" aria-hidden="true"></i></span>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <p><b>Departure date</b></p>
                                        <div class="form-group form-inline-group">
                                            <input type="text" class="form-control form-line todate" disabled
                                                placeholder="Select departure date">
                                            <span><i class="fa fa-calendar-o" aria-hidden="true"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <h3 class="mt-5">Your guest options include:</h3>
                                <div class="filter-container-fl" id="guest-pick" style="display: block;">
                                    <div class="guest-pick-container">
                                        <div class="guest-pick-header">
                                            <div class="row align-items-center">
                                                <div class="col-lg-9 col-md-7 col-7">
                                                    <p class="mb-0"><b>Suites</b></p>
                                                </div>
                                                <div class="col-lg-3 col-md-5 col-5">
                                                    <div class="row field-count-guest align-items-center">
                                                        <button type="button" class="min-room disable">-</button>
                                                        <div class="col text-center">
                                                            <span class="mr-1 room-val">1 </span>
                                                        </div>
                                                        <button type="button" class="plus-room mr-3">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="guest-pick-body">
                                            <div class="row list-eoom">
                                                <div class="col-12 col-ews mb-5" id="room-1">
                                                    <p><b>Suite 1</b></p>
                                                    <div class="row align-items-center py-2">
                                                        <div class="col-7">
                                                            <p class="mb-0"><b>Adults</b></p>
                                                        </div>
                                                        <div class="col-5">
                                                            <div class="row field-count-guest align-items-center">
                                                                <button type="button" class="min">-</button>
                                                                <div class="col text-center">
                                                                    <span class="mr-1 adult-val">2 </span>
                                                                </div>
                                                                <button type="button" class="plus mr-3">+</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row align-items-center py-2">
                                                        <div class="col-7">
                                                            <p class="mb-0"><b>Children</b></p>
                                                        </div>
                                                        <div class="col-5">
                                                            <div class="row field-count-guest align-items-center">
                                                                <button type="button" class="min">-</button>
                                                                <div class="col text-center">
                                                                    <span class="mr-1 child-val">1 </span>
                                                                </div>
                                                                <button type="button" class="plus mr-3">+</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="room-limit">
                                                <p><b>Does your booking involve more than 4 suites?</b></p>
                                                <p>Contact our Groups and Events team on 08989819281. and they'll take care of everything.</p>
                          
                                                <a href="#" class="btn btn-dark rounded-0 px-5"><i class="fa fa-phone" aria-hidden="true"></i> REQUEST A CALL BACK</a>
                                                <hr>
                                                <p>Or send us an email and we'll get back to you prompty.</p>
                                                <div class="row">
                                                  <div class="col-8">
                                                    <div class="row">
                                                      <div class="col-6 form-group">
                                                        <input type="text" class="form-control" placeholder="Your Name">
                                                      </div>
                                                      <div class="col-6 form-group">
                                                        <input type="email" class="form-control" placeholder="Your Email Address">
                                                      </div>
                                                      <div class="col-12 form-group">
                                                        <textarea class="form-control" cols="30" rows="10" placeholder="Message"></textarea>
                                                      </div>
                                                    </div>
                                                  </div>
                                                  <div class="col-4">
                                                    <div class="barcode-suite mb-3">
                                                      <div class="aspect-ratio-box">
                                                        <div class="aspect-ratio-box-inside">
                                                          <img src="images/QR-code.png" class="img-fluid" alt="">
                                                        </div>
                                                      </div>
                                                    </div>
                                                    <div class="hotel-user">
                                                      <div class="pp-prof-det">
                                                        <img src="images/img-profile.jpg" alt="">
                                                      </div>
                                                      <div class="usr-info">
                                                        <h4 class=" mb-2"><b>June</b> Davidson</h4>
                                                        <p class="dd--info mb-2">Luxury Lifstyle Agent</p>
                                                        <p class="dd-location-info mb-0"><i class="ico ico-place-2"></i> Munch</p>
                                                      </div>
                                                      <a href="#" class="plus-btn">+</a>
                                                    </div>
                                                  </div>
                                                </div>
                                                
                                              </div>
                                        </div>
                                        <div class="guest-pick-footer">
                                            <div class="text-right">
                                                <a href="#" class="availability-check saol-link">Check availability</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-4">
                            <div class="reservation-summary">
                                <h4>YOUR RESERVATION</h4>
                                <p><b>Belmond Jimbaran Puri</b></p>
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Guests</td>
                                        <td class="px-0 py-1 text-right">2 Guests</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Check-in</td>
                                        <td class="px-0 py-1 text-right">15 Aug 2020</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Check-out</td>
                                        <td class="px-0 py-1 text-right">16 Aug 2020</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Suites</td>
                                        <td class="px-0 py-1 text-right">Pavilion suite</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="reservation-total">
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Total</td>
                                        <td class="px-0 py-1 text-right"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="step-2" class="tab-pane" role="tabpanel">


                <div class="sidebar-scroller is-reserve">
                    <!-- if not available -->
                    <!-- <div class="not-available">
                        <h3>Please try again</h3>
                        <p class="mb-1">There are no suite available on your selected dates.</p>
                        <p class="mb-1">Check availability directly by calling 082082982989 or email
                            reservation@rmporium.com</p>
                        <p class="mb-1"><a href="#" class="underline btn-newreserve"><b>Or start over with new travel dates.</b></a></p>
                    </div> -->
                    <!-- if not available end -->
                    <h3 class="mb-5 d-flex align-items-center">
                        <a href="#" class="backwizard btn-backwizard">
                            <i class="ico ico-back"></i>
                        </a>
                        Your (Pavilion Suite) overview:
                    </h3>

                    <div class="row">
                        <div class="col-lg-9 col-md-8">
                            <div class="suite-fasility section-shadow mb-5">
                                <h3>ALL STAYS INCLUDE</h3>
                                <ul>
                                    <li>WiFi</li>
                                    <li>Daily bottled water</li>
                                    <li>Daily à la carte breakfast</li>
                                    <li>Scheduled shuttle to Amalfi and Positano</li>
                                    <li>Two-hour boat rides along the coast in the morning</li>
                                    <li>Access to the fitness centre</li>
                                    <li>Access to 24 hour business centre</li>
                                </ul>
                            </div>

                            <div class="suite-list section-shadow mb-5">
                                <div class="suite-tumb">
                                    <div class="row align-items">
                                        <div class="col-lg-6">
                                            <div class="img-offset-slide">
                                                <div>
                                                    <a href="detail-page.html">
                                                        <img src="images/car-acc-room-superior-double-inroom-breakfast01_320x266.jpg"
                                                            class="img-full" alt="">
                                                    </a>
                                                </div>
                                                <div>
                                                    <a href="detail-page.html">
                                                        <img src="images/car-acc-room-superior-double-inroom-breakfast01_320x266.jpg"
                                                            class="img-full" alt="">
                                                    </a>
                                                </div>
                                                <div>
                                                    <a href="detail-page.html">
                                                        <img src="images/car-acc-room-superior-double-inroom-breakfast01_320x266.jpg"
                                                            class="img-full" alt="">
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="suite-desc">
                                                <h3>Superior Double Room Garden or Village View </h3>
                                                <p>
                                                    Superior Double Rooms are located in the Main Building, offering
                                                    a
                                                    delightful view of the village or garden.
                                                </p>
                                                <ul class="pl-3">
                                                    <li>One king or two twin-size beds</li>
                                                    <li>Extra-large marble bathroom with separate bathtub and shower
                                                    </li>
                                                    <li>Size 35-45m² / 377-484ft² </li>
                                                    <li>Maximum occupancy is 2 persons </li>
                                                    <li>Connects to another Superior Double Room or an Executive
                                                        Junior
                                                        Suite </li>
                                                </ul>
                                                <div class="row align-items-center mt-5">
                                                    <div class="col-8">
                                                        <p class="mb-0">From: <b>€1.099 per night</b></p>
                                                        <p>inclusive of all taxes and fees</p>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-right">
                                                            <a href="#"
                                                                class="btn btn-dark  px-4 select-sd rounded-0">Select</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="suite-board">
                                    <div class="suite-board-header">
                                        <a href="#" class="board-close"><i class="fa fa-times" aria-hidden="true"></i>
                                            CLOSE</a>
                                        <div class="row align-items-center">
                                            <div class="col-2 col---s">
                                                <img src="images/car-acc-room-superior-double-inroom-breakfast01_320x266.jpg"
                                                    class="img-full" alt="">
                                            </div>
                                            <div class="col">
                                                <h3>Superior Double Room Garden or Village View </h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row suite-board-body">
                                        <div class="col-lg-4 col-md-12 suite-price-feature">
                                            <div class="suite-board-main">
                                                <h4>Breakfast on the Amalfi Coast </h4>
                                                <ul class="pl-3">
                                                    <li>Accommodation</li>
                                                    <li>Daily breakfast</li>
                                                </ul>
                                            </div>
                                            <div class="suite-board-footer">
                                                <div class="collapse" id="breakfas">
                                                    <div class="card card-body border-0">
                                                        <h4 class="mb-4">Details & Policies</h4>
                                                        <ul class="text-left pl-3">
                                                            <li>
                                                                CANCEL: <br>
                                                                Cancel by 12PM local time 24 hours prior to arrival or
                                                                pay 1 night plus tax
                                                            </li>
                                                            <li>
                                                                GUARANTEE: <br>
                                                                A credit card guarantee is required at time of booking
                                                                unless otherwise stated in the rate description.
                                                            </li>
                                                            <li>
                                                                MEAL PLAN: <br>
                                                                Breakfast included
                                                            </li>
                                                            <li>
                                                                SERVICE CHARGE: <br>
                                                                Rates shown are inclusive of 10 percent Service Charge
                                                                per room, per night. This will appear itemized in your
                                                                shopping basket.
                                                            </li>
                                                            <li>
                                                                GOVERNMENT TAX: <br>
                                                                Rates shown are inclusive of 10 percent Government Tax
                                                                per room, per night. This will appear itemized in your
                                                                shopping basket.
                                                            </li>
                                                            <li>
                                                                GOVERNMENT TAX AND SERVICE CHARGE: <br>
                                                                Room rates do not include 11 percent Government Tax and
                                                                10 percent Service Charge
                                                            </li>
                                                            <li>
                                                                PACKAGE GOVERNMENT TAX: <br>
                                                                Room rates do not include 10% Government Tax
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <a class="detail-policies" data-toggle="collapse" href="#breakfas"
                                                    role="button" aria-expanded="false" aria-controls="breakfas">Details
                                                    & Policies</a>
                                                <div class="footer-sdse">
                                                    <p>€1.099 per night inclusive of all taxes and fees</p>
                                                    <a href="#policies" data-toggle="collapse" role="button"
                                                        class="btn btn-dark  btn-block rounded-0">Select</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-12 suite-price-feature">
                                            <div class="suite-board-main">
                                                <h4>Half Board</h4>
                                                <ul class="pl-3">
                                                    <li>Accommodation</li>
                                                    <li>Daily breakfast</li>
                                                    <li>Daily à la carte lunch or dinner </li>
                                                    <li>Accommodation</li>
                                                    <li>Daily breakfast</li>
                                                    <li>Daily à la carte lunch or dinner </li>
                                                </ul>
                                            </div>
                                            <div class="suite-board-footer">
                                                <div class="collapse" id="half">
                                                    <div class="card card-body border-0">
                                                        <h4 class="mb-4">Details & Policies</h4>
                                                        <ul class="text-left pl-3">
                                                            <li>
                                                                CANCEL: <br>
                                                                Cancel by 12PM local time 24 hours prior to arrival or
                                                                pay 1 night plus tax
                                                            </li>
                                                            <li>
                                                                GUARANTEE: <br>
                                                                A credit card guarantee is required at time of booking
                                                                unless otherwise stated in the rate description.
                                                            </li>
                                                            <li>
                                                                MEAL PLAN: <br>
                                                                Breakfast included
                                                            </li>
                                                            <li>
                                                                SERVICE CHARGE: <br>
                                                                Rates shown are inclusive of 10 percent Service Charge
                                                                per room, per night. This will appear itemized in your
                                                                shopping basket.
                                                            </li>
                                                            <li>
                                                                GOVERNMENT TAX: <br>
                                                                Rates shown are inclusive of 10 percent Government Tax
                                                                per room, per night. This will appear itemized in your
                                                                shopping basket.
                                                            </li>
                                                            <li>
                                                                GOVERNMENT TAX AND SERVICE CHARGE: <br>
                                                                Room rates do not include 11 percent Government Tax and
                                                                10 percent Service Charge
                                                            </li>
                                                            <li>
                                                                PACKAGE GOVERNMENT TAX: <br>
                                                                Room rates do not include 10% Government Tax
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <a class="detail-policies" data-toggle="collapse" href="#half"
                                                    role="button" aria-expanded="false" aria-controls="half">Details &
                                                    Policies</a>
                                                <div class="footer-sdse">
                                                    <p>€1.099 per night inclusive of all taxes and fees</p>
                                                    <a href="#policies2" data-toggle="collapse" role="button"
                                                        class="btn btn-dark  btn-block rounded-0">Select</a>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="collapse policies p-4" id="policies">
                                    <h3>Policies</h3>
                                    <div class="card card-body rounded-0">
                                        <p><b>Suite 1</b></p>
                                        <p><b>CANCEL</b> Cancel by 1pm local time 72 hours prior or pay 1 night for
                                            every 3 nights booked plus tax. No show charged full stay.</p>
                                        <p><b>GUARANTEE</b> A credit card guarantee is required at time of booking
                                            unless otherwise started in the rate description.</p>
                                        <p><b>MEAL PLAN</b> Breakfast included</p>
                                        <p><b>VAT TAX</b> Rates shown are inclusive of 10 percent VAT Tax per room, per
                                            night. this will appear itemized in your shopping basket.</p>
                                        <p><b>CITY TAX</b> Rates shown are inclusive of EUR 5 city Tax per person, per
                                            night for persons 8 years and older for up to 10 nights. Seasonal
                                            adjustments may apply. This will appear itemized in your shopping basket.
                                        </p>
                                    </div>
                                    <hr>
                                    <div class="booking-tearms">
                                        <h3>Booking teams and conditions</h3>
                                        <div class="custom-control custom-checkbox mb-5">
                                            <input type="checkbox" class="custom-control-input" id="customCheck2">
                                            <label class="custom-control-label" for="customCheck2">
                                                Your reservation is made subject to our
                                                <a href="#" class="underline"><b>Terms & Conditions</b> </a>(available
                                                in other
                                                languages <a href="#" class="underline"><b>here</b></a>), and the
                                                specific
                                                payment tearms (deposit, tax and cancellation) set out above, Please
                                                check
                                                this box to agrree to these tearms and proceed with your booking. By
                                                confirming your booking, you agree with all provisions of the
                                                <a href="#" class="underline"><b>privacy policy</b></a>
                                            </label>
                                        </div>
                                        <p>
                                            For further information about how we use your data, please see our
                                            <a href="#" class="underline"><b>privacy policy</b></a>
                                        </p>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <a href="#" class="btn btn-dark  px-5 btn-backwizard">Go back</a>
                                        </div>
                                        <div class="col-6 text-right">
                                            <a href="#" class="btn btn-dark  px-5 btn-nextwizard">Confirm
                                                booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="collapse policies p-4" id="policies2">
                                    <h3>Policies</h3>
                                    <div class="card card-body rounded-0">
                                        <p><b>Suite 1</b></p>
                                        <p><b>CANCEL</b> Cancel by 1pm local time 72 hours prior or pay 1 night for
                                            every 3 nights booked plus tax. No show charged full stay.</p>
                                        <p><b>GUARANTEE</b> A credit card guarantee is required at time of booking
                                            unless otherwise started in the rate description.</p>
                                        <p><b>MEAL PLAN</b> Breakfast included</p>
                                        <p><b>VAT TAX</b> Rates shown are inclusive of 10 percent VAT Tax per room, per
                                            night. this will appear itemized in your shopping basket.</p>
                                        <p><b>CITY TAX</b> Rates shown are inclusive of EUR 5 city Tax per person, per
                                            night for persons 8 years and older for up to 10 nights. Seasonal
                                            adjustments may apply. This will appear itemized in your shopping basket.
                                        </p>
                                    </div>
                                    <hr>
                                    <div class="booking-tearms">
                                        <h3>Booking teams and conditions</h3>
                                        <div class="custom-control custom-checkbox mb-5">
                                            <input type="checkbox" class="custom-control-input" id="customCheck1">
                                            <label class="custom-control-label" for="customCheck1">
                                                Your reservation is made subject to our
                                                <a href="#" class="underline"><b>Terms & Conditions</b> </a>(available
                                                in other
                                                languages <a href="#" class="underline"><b>here</b></a>), and the
                                                specific
                                                payment tearms (deposit, tax and cancellation) set out above, Please
                                                check
                                                this box to agrree to these tearms and proceed with your booking. By
                                                confirming your booking, you agree with all provisions of the
                                                <a href="#" class="underline"><b>privacy policy</b></a>
                                            </label>
                                        </div>
                                        <p>
                                            For further information about how we use your data, please see our
                                            <a href="#" class="underline"><b>privacy policy</b></a>
                                        </p>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <a href="#" class="btn btn-dark  px-5 btn-backwizard">Go back</a>
                                        </div>
                                        <div class="col-6 text-right">
                                            <a href="#" class="btn btn-dark  px-5 btn-nextwizard">Confirm
                                                booking</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="suite-list section-shadow mb-5">
                                <div class="suite-tumb">
                                    <div class="row align-items">
                                        <div class="col-lg-6">
                                            <div class="img-offset-slide">
                                                <div>
                                                    <a href="detail-page.html">
                                                        <img src="images/car-acc-room-superior-double-inroom-breakfast01_320x266.jpg"
                                                            class="img-full" alt="">
                                                    </a>
                                                </div>
                                                <div>
                                                    <a href="detail-page.html">
                                                        <img src="images/car-acc-room-superior-double-inroom-breakfast01_320x266.jpg"
                                                            class="img-full" alt="">
                                                    </a>
                                                </div>
                                                <div>
                                                    <a href="detail-page.html">
                                                        <img src="images/car-acc-room-superior-double-inroom-breakfast01_320x266.jpg"
                                                            class="img-full" alt="">
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="suite-desc">
                                                <h3>Superior Double Room Garden or Village View </h3>
                                                <p>
                                                    Superior Double Rooms are located in the Main Building, offering
                                                    a
                                                    delightful view of the village or garden.
                                                </p>
                                                <ul class="pl-3">
                                                    <li>One king or two twin-size beds</li>
                                                    <li>Extra-large marble bathroom with separate bathtub and shower
                                                    </li>
                                                    <li>Size 35-45m² / 377-484ft² </li>
                                                    <li>Maximum occupancy is 2 persons </li>
                                                    <li>Connects to another Superior Double Room or an Executive
                                                        Junior
                                                        Suite </li>
                                                </ul>
                                                <div class="row align-items-center mt-5">
                                                    <div class="col-8">
                                                        <p class="mb-0">From: <b>€1.099 per night</b></p>
                                                        <p>inclusive of all taxes and fees</p>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="text-right">
                                                            <a href="#"
                                                                class="btn btn-dark  px-4 select-sd rounded-0">Select</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="suite-board">
                                    <div class="suite-board-header">
                                        <a href="#" class="board-close"><i class="fa fa-times" aria-hidden="true"></i>
                                            CLOSE</a>
                                        <div class="row align-items-center">
                                            <div class="col-2 col---s">
                                                <img src="images/car-acc-room-superior-double-inroom-breakfast01_320x266.jpg"
                                                    class="img-full" alt="">
                                            </div>
                                            <div class="col">
                                                <h3>Superior Double Room Garden or Village View </h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row suite-board-body">
                                        <div class="col-lg-4 col-md-12 suite-price-feature">
                                            <div class="suite-board-main">
                                                <h4>Breakfast on the Amalfi Coast </h4>
                                                <ul class="pl-3">
                                                    <li>Accommodation</li>
                                                    <li>Daily breakfast</li>
                                                </ul>
                                            </div>
                                            <div class="suite-board-footer">
                                                <div class="collapse" id="breakfas">
                                                    <div class="card card-body border-0">
                                                        <h4 class="mb-4">Details & Policies</h4>
                                                        <ul class="text-left pl-3">
                                                            <li>
                                                                CANCEL: <br>
                                                                Cancel by 12PM local time 24 hours prior to arrival or
                                                                pay 1 night plus tax
                                                            </li>
                                                            <li>
                                                                GUARANTEE: <br>
                                                                A credit card guarantee is required at time of booking
                                                                unless otherwise stated in the rate description.
                                                            </li>
                                                            <li>
                                                                MEAL PLAN: <br>
                                                                Breakfast included
                                                            </li>
                                                            <li>
                                                                SERVICE CHARGE: <br>
                                                                Rates shown are inclusive of 10 percent Service Charge
                                                                per room, per night. This will appear itemized in your
                                                                shopping basket.
                                                            </li>
                                                            <li>
                                                                GOVERNMENT TAX: <br>
                                                                Rates shown are inclusive of 10 percent Government Tax
                                                                per room, per night. This will appear itemized in your
                                                                shopping basket.
                                                            </li>
                                                            <li>
                                                                GOVERNMENT TAX AND SERVICE CHARGE: <br>
                                                                Room rates do not include 11 percent Government Tax and
                                                                10 percent Service Charge
                                                            </li>
                                                            <li>
                                                                PACKAGE GOVERNMENT TAX: <br>
                                                                Room rates do not include 10% Government Tax
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <a class="detail-policies" data-toggle="collapse" href="#breakfas"
                                                    role="button" aria-expanded="false" aria-controls="breakfas">Details
                                                    & Policies</a>
                                                <div class="footer-sdse">
                                                    <p>€1.099 per night inclusive of all taxes and fees</p>
                                                    <a href="#policies3" data-toggle="collapse" role="button"
                                                        class="btn btn-dark  btn-block rounded-0">Select</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-12 suite-price-feature">
                                            <div class="suite-board-main">
                                                <h4>Half Board</h4>
                                                <ul class="pl-3">
                                                    <li>Accommodation</li>
                                                    <li>Daily breakfast</li>
                                                    <li>Daily à la carte lunch or dinner </li>
                                                    <li>Accommodation</li>
                                                    <li>Daily breakfast</li>
                                                    <li>Daily à la carte lunch or dinner </li>
                                                </ul>
                                            </div>
                                            <div class="suite-board-footer">
                                                <div class="collapse" id="half">
                                                    <div class="card card-body border-0">
                                                        <h4 class="mb-4">Details & Policies</h4>
                                                        <ul class="text-left pl-3">
                                                            <li>
                                                                CANCEL: <br>
                                                                Cancel by 12PM local time 24 hours prior to arrival or
                                                                pay 1 night plus tax
                                                            </li>
                                                            <li>
                                                                GUARANTEE: <br>
                                                                A credit card guarantee is required at time of booking
                                                                unless otherwise stated in the rate description.
                                                            </li>
                                                            <li>
                                                                MEAL PLAN: <br>
                                                                Breakfast included
                                                            </li>
                                                            <li>
                                                                SERVICE CHARGE: <br>
                                                                Rates shown are inclusive of 10 percent Service Charge
                                                                per room, per night. This will appear itemized in your
                                                                shopping basket.
                                                            </li>
                                                            <li>
                                                                GOVERNMENT TAX: <br>
                                                                Rates shown are inclusive of 10 percent Government Tax
                                                                per room, per night. This will appear itemized in your
                                                                shopping basket.
                                                            </li>
                                                            <li>
                                                                GOVERNMENT TAX AND SERVICE CHARGE: <br>
                                                                Room rates do not include 11 percent Government Tax and
                                                                10 percent Service Charge
                                                            </li>
                                                            <li>
                                                                PACKAGE GOVERNMENT TAX: <br>
                                                                Room rates do not include 10% Government Tax
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <a class="detail-policies" data-toggle="collapse" href="#half"
                                                    role="button" aria-expanded="false" aria-controls="half">Details &
                                                    Policies</a>
                                                <div class="footer-sdse">
                                                    <p>€1.099 per night inclusive of all taxes and fees</p>
                                                    <a href="#policies4" data-toggle="collapse" role="button"
                                                        class="btn btn-dark  btn-block rounded-0">Select</a>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="collapse policies p-4" id="policies3">
                                    <h3>Policies</h3>
                                    <div class="card card-body rounded-0">
                                        <p><b>Suite 1</b></p>
                                        <p><b>CANCEL</b> Cancel by 1pm local time 72 hours prior or pay 1 night for
                                            every 3 nights booked plus tax. No show charged full stay.</p>
                                        <p><b>GUARANTEE</b> A credit card guarantee is required at time of booking
                                            unless otherwise started in the rate description.</p>
                                        <p><b>MEAL PLAN</b> Breakfast included</p>
                                        <p><b>VAT TAX</b> Rates shown are inclusive of 10 percent VAT Tax per room, per
                                            night. this will appear itemized in your shopping basket.</p>
                                        <p><b>CITY TAX</b> Rates shown are inclusive of EUR 5 city Tax per person, per
                                            night for persons 8 years and older for up to 10 nights. Seasonal
                                            adjustments may apply. This will appear itemized in your shopping basket.
                                        </p>
                                    </div>
                                    <hr>
                                    <div class="booking-tearms">
                                        <h3>Booking teams and conditions</h3>
                                        <div class="custom-control custom-checkbox mb-5">
                                            <input type="checkbox" class="custom-control-input" id="customCheck3">
                                            <label class="custom-control-label" for="customCheck3">
                                                Your reservation is made subject to our
                                                <a href="#" class="underline"><b>Terms & Conditions</b> </a>(available
                                                in other
                                                languages <a href="#" class="underline"><b>here</b></a>), and the
                                                specific
                                                payment tearms (deposit, tax and cancellation) set out above, Please
                                                check
                                                this box to agrree to these tearms and proceed with your booking. By
                                                confirming your booking, you agree with all provisions of the
                                                <a href="#" class="underline"><b>privacy policy</b></a>
                                            </label>
                                        </div>
                                        <p>
                                            For further information about how we use your data, please see our
                                            <a href="#" class="underline"><b>privacy policy</b></a>
                                        </p>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <a href="#" class="btn btn-dark  px-5 btn-backwizard">Go back</a>
                                        </div>
                                        <div class="col-6 text-right">
                                            <a href="#" class="btn btn-dark  px-5 btn-nextwizard">Confirm
                                                booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="collapse policies p-4" id="policies4">
                                    <h3>Policies</h3>
                                    <div class="card card-body rounded-0">
                                        <p><b>Suite 1</b></p>
                                        <p><b>CANCEL</b> Cancel by 1pm local time 72 hours prior or pay 1 night for
                                            every 3 nights booked plus tax. No show charged full stay.</p>
                                        <p><b>GUARANTEE</b> A credit card guarantee is required at time of booking
                                            unless otherwise started in the rate description.</p>
                                        <p><b>MEAL PLAN</b> Breakfast included</p>
                                        <p><b>VAT TAX</b> Rates shown are inclusive of 10 percent VAT Tax per room, per
                                            night. this will appear itemized in your shopping basket.</p>
                                        <p><b>CITY TAX</b> Rates shown are inclusive of EUR 5 city Tax per person, per
                                            night for persons 8 years and older for up to 10 nights. Seasonal
                                            adjustments may apply. This will appear itemized in your shopping basket.
                                        </p>
                                    </div>
                                    <hr>
                                    <div class="booking-tearms">
                                        <h3>Booking teams and conditions</h3>
                                        <div class="custom-control custom-checkbox mb-5">
                                            <input type="checkbox" class="custom-control-input" id="customCheck4">
                                            <label class="custom-control-label" for="customCheck4">
                                                Your reservation is made subject to our
                                                <a href="#" class="underline"><b>Terms & Conditions</b> </a>(available
                                                in other
                                                languages <a href="#" class="underline"><b>here</b></a>), and the
                                                specific
                                                payment tearms (deposit, tax and cancellation) set out above, Please
                                                check
                                                this box to agrree to these tearms and proceed with your booking. By
                                                confirming your booking, you agree with all provisions of the
                                                <a href="#" class="underline"><b>privacy policy</b></a>
                                            </label>
                                        </div>
                                        <p>
                                            For further information about how we use your data, please see our
                                            <a href="#" class="underline"><b>privacy policy</b></a>
                                        </p>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <a href="#" class="btn btn-dark  px-5 btn-backwizard">Go back</a>
                                        </div>
                                        <div class="col-6 text-right">
                                            <a href="#" class="btn btn-dark  px-5 btn-nextwizard">Confirm
                                                booking</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-3 col-md-4">
                            <div class="reservation-summary">
                                <h4>YOUR RESERVATION</h4>
                                <p><b>Belmond Jimbaran Puri</b></p>
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Guests</td>
                                        <td class="px-0 py-1 text-right">2 Guests</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Check-in</td>
                                        <td class="px-0 py-1 text-right">14 August 2020</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Check-out</td>
                                        <td class="px-0 py-1 text-right">15 August 2020</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Suites</td>
                                        <td class="px-0 py-1 text-right">Pavilion suite</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="reservation-total">
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Total</td>
                                        <td class="px-0 py-1 text-right"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="step-3" class="tab-pane" role="tabpanel">
                <div class="sidebar-scroller is-reserve">
                    <div class="row">
                        <div class="col-lg-9 col-md-8">
                            <div class="row align-items-center mb-5">
                                <div class="col-6">
                                    <h3 class="mb-0 d-flex align-items-center">
                                        <a href="#" class="backwizard btn-backwizard">
                                            <i class="ico ico-back"></i>
                                        </a>
                                        Add additional services
                                    </h3>
                                </div>
                                <div class="col-6 text-right">
                                    <a href="#" class="btn btn-dark  rounded-0 px-4 btn-nextwizard">Continue</a>
                                </div>
                            </div>
                            <hr class="mb-0">
                            <div class="accordion" id="accordionExample">
                                <div class="card">
                                    <div class="card-header" id="headingOne">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left" type="button"
                                                data-toggle="collapse" data-target="#transfers" aria-expanded="true"
                                                aria-controls="transfers">
                                                Transfers
                                                <i class="fa fa-plus"></i>
                                                <i class="fa fa-minus" style="display: none"></i>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="transfers" class="collapse additional-collapse"
                                        aria-labelledby="headingOne" data-parent="#accordionExample">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">ONE WAY AIRPORT
                                                                    TRANSFER</h4>
                                                                <p class="mb-4">
                                                                    Transfer to or from Ngurah Rai International Airport
                                                                    by
                                                                    private car. Suitable for up to four guests. Tax and
                                                                    service
                                                                    charge are not included. Price shown is for up to 4
                                                                    guests.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">ROUNDTRIP AIRPORT
                                                                    TRANSFER</h4>
                                                                <p class="mb-4">
                                                                    Relax with transfers to and from Ngurah Rai
                                                                    International
                                                                    Airport by private car. Suitable for up to four
                                                                    guests.
                                                                    Tax
                                                                    and service charge are not included. Price shown is
                                                                    for
                                                                    up
                                                                    to 4 guests.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingTwo">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left collapsed" type="button"
                                                data-toggle="collapse" data-target="#inroom-amenities"
                                                aria-expanded="false" aria-controls="inroom-amenities">
                                                In-Room Amenities
                                                <i class="fa fa-plus"></i>
                                                <i class="fa fa-minus" style="display: none"></i>
                                            </button>
                                        </h2>

                                    </div>
                                    <div id="inroom-amenities" class="collapse additional-collapse"
                                        aria-labelledby="headingTwo" data-parent="#accordionExample">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">BOTTLE OF ROSE
                                                                    BALINESE WINE</h4>
                                                                <p class="mb-4">
                                                                    Find a bottle of sparkling Balinese rosé in your
                                                                    room,
                                                                    awaiting your arrival.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">BALINESE
                                                                    ORNAMENTAL BAMBOO POLE</h4>
                                                                <p class="mb-4">
                                                                    Delight someone special with this unique Balinese
                                                                    handcrafted penjor, a wonderful souvenir.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">ISLAND TROPICAL
                                                                    AMENITY</h4>
                                                                <p class="mb-4">
                                                                    Step into your room and discover a true taste of
                                                                    Bali.
                                                                    This
                                                                    welcome platter includes fresh coconuts, seasonal
                                                                    fruit
                                                                    and
                                                                    assorted local desserts.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingThree">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left collapsed" type="button"
                                                data-toggle="collapse" data-target="#spa-service" aria-expanded="false"
                                                aria-controls="spa-service">
                                                Spa Services
                                                <i class="fa fa-plus"></i>
                                                <i class="fa fa-minus" style="display: none"></i>
                                            </button>
                                        </h2>

                                    </div>
                                    <div id="spa-service" class="collapse additional-collapse"
                                        aria-labelledby="headingThree" data-parent="#accordionExample">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">
                                                                    TRADITIONAL BALINESE MASSAGE
                                                                </h4>
                                                                <p class="mb-4">
                                                                    Relieve tension with a 60-minute traditional
                                                                    massage,
                                                                    combining long rhythmic strokes with acupressure and
                                                                    reflexology techniques. Please Note: This is a
                                                                    request
                                                                    and not a booking, our spa team will contact you to
                                                                    confirm your desired appointment. Price shown is per
                                                                    treatment, per person.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">
                                                                    ABHYANGA TREATMENT
                                                                </h4>
                                                                <p class="mb-4">
                                                                    Achieve inner harmony with this 60-minute massage
                                                                    ritual. Rhythmic pressure applied with herbal oils
                                                                    banishes toxins and impurities while boosting
                                                                    circulation. Please Note: This is a request and not
                                                                    a
                                                                    booking, our spa team will contact you to confirm
                                                                    your
                                                                    desired appointment. Price shown is per treatment,
                                                                    per
                                                                    person.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">
                                                                    REFLEXOLOGY FOOT MASSAGE
                                                                </h4>
                                                                <p class="mb-4">
                                                                    This 60-minute ancient holistic therapy applies
                                                                    gentle
                                                                    pressure to points on the feet – as blissful as it
                                                                    is
                                                                    beneficial. Please Note: This is a request and not a
                                                                    booking, our spa team will contact you to confirm
                                                                    your
                                                                    desired appointment. Price shown is per treatment,
                                                                    per
                                                                    person.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingfour">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left collapsed" type="button"
                                                data-toggle="collapse" data-target="#experiences" aria-expanded="false"
                                                aria-controls="experiences">
                                                Experiences
                                                <i class="fa fa-plus"></i>
                                                <i class="fa fa-minus" style="display: none"></i>
                                            </button>
                                        </h2>

                                    </div>
                                    <div id="experiences" class="collapse additional-collapse"
                                        aria-labelledby="headingfour" data-parent="#accordionExample">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">
                                                                    TRADITIONAL BALINESE MASSAGE
                                                                </h4>
                                                                <p class="mb-4">
                                                                    Relieve tension with a 60-minute traditional
                                                                    massage,
                                                                    combining long rhythmic strokes with acupressure and
                                                                    reflexology techniques. Please Note: This is a
                                                                    request
                                                                    and not a booking, our spa team will contact you to
                                                                    confirm your desired appointment. Price shown is per
                                                                    treatment, per person.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">
                                                                    ABHYANGA TREATMENT
                                                                </h4>
                                                                <p class="mb-4">
                                                                    Achieve inner harmony with this 60-minute massage
                                                                    ritual. Rhythmic pressure applied with herbal oils
                                                                    banishes toxins and impurities while boosting
                                                                    circulation. Please Note: This is a request and not
                                                                    a
                                                                    booking, our spa team will contact you to confirm
                                                                    your
                                                                    desired appointment. Price shown is per treatment,
                                                                    per
                                                                    person.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">
                                                                    REFLEXOLOGY FOOT MASSAGE
                                                                </h4>
                                                                <p class="mb-4">
                                                                    This 60-minute ancient holistic therapy applies
                                                                    gentle
                                                                    pressure to points on the feet – as blissful as it
                                                                    is
                                                                    beneficial. Please Note: This is a request and not a
                                                                    booking, our spa team will contact you to confirm
                                                                    your
                                                                    desired appointment. Price shown is per treatment,
                                                                    per
                                                                    person.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">
                                                                    ABHYANGA TREATMENT
                                                                </h4>
                                                                <p class="mb-4">
                                                                    Achieve inner harmony with this 60-minute massage
                                                                    ritual. Rhythmic pressure applied with herbal oils
                                                                    banishes toxins and impurities while boosting
                                                                    circulation. Please Note: This is a request and not
                                                                    a
                                                                    booking, our spa team will contact you to confirm
                                                                    your
                                                                    desired appointment. Price shown is per treatment,
                                                                    per
                                                                    person.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">
                                                                    REFLEXOLOGY FOOT MASSAGE
                                                                </h4>
                                                                <p class="mb-4">
                                                                    This 60-minute ancient holistic therapy applies
                                                                    gentle
                                                                    pressure to points on the feet – as blissful as it
                                                                    is
                                                                    beneficial. Please Note: This is a request and not a
                                                                    booking, our spa team will contact you to confirm
                                                                    your
                                                                    desired appointment. Price shown is per treatment,
                                                                    per
                                                                    person.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">
                                                                    ABHYANGA TREATMENT
                                                                </h4>
                                                                <p class="mb-4">
                                                                    Achieve inner harmony with this 60-minute massage
                                                                    ritual. Rhythmic pressure applied with herbal oils
                                                                    banishes toxins and impurities while boosting
                                                                    circulation. Please Note: This is a request and not
                                                                    a
                                                                    booking, our spa team will contact you to confirm
                                                                    your
                                                                    desired appointment. Price shown is per treatment,
                                                                    per
                                                                    person.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 mb-4">
                                                    <div class="additional-list p-0">
                                                        <div class="inner-wrapper mb-3">
                                                            <div class="pr-lst result-grid">
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                                <div>
                                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg"
                                                                        class="w-100" alt="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="p-4 inner-warppa">
                                                            <div class="add-txt">
                                                                <h4 class="mb-4 added">Added to booking</h4>
                                                                <h4 class="mb-4 title-additional-list">
                                                                    REFLEXOLOGY FOOT MASSAGE
                                                                </h4>
                                                                <p class="mb-4">
                                                                    This 60-minute ancient holistic therapy applies
                                                                    gentle
                                                                    pressure to points on the feet – as blissful as it
                                                                    is
                                                                    beneficial. Please Note: This is a request and not a
                                                                    booking, our spa team will contact you to confirm
                                                                    your
                                                                    desired appointment. Price shown is per treatment,
                                                                    per
                                                                    person.
                                                                </p>
                                                            </div>
                                                            <div class="booking-qty">
                                                                <p class="qty-label">Quantity</p>
                                                                <div class="qty-button mb-4">
                                                                    <button type="button" id="sub"
                                                                        class="sub btn-qty">-</button>
                                                                    <input class="form-qty" type="number" id="1"
                                                                        value="1" min="1" />
                                                                    <button type="button" id="add"
                                                                        class="add btn-qty">+</button>
                                                                </div>
                                                                <p class="qty-label">€16.00</p>
                                                            </div>
                                                            <div class="confirm-qty">
                                                                <i class="fa fa-check" aria-hidden="true"></i>
                                                            </div>

                                                            <a href="#"
                                                                class="btn btn-dark rounded-0 booking-select">Select</a>
                                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove
                                                                from booking</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-4">
                            <div class="reservation-summary">
                                <h4>YOUR RESERVATION</h4>
                                <p><b>Belmond Jimbaran Puri</b></p>
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Guests</td>
                                        <td class="px-0 py-1 text-right">2 Guests</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Check-in</td>
                                        <td class="px-0 py-1 text-right">15 Aug 2020</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Check-out</td>
                                        <td class="px-0 py-1 text-right">16 Aug 2020</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Suites</td>
                                        <td class="px-0 py-1 text-right">Pavilion suite</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="reservation-summary section-shadow">
                                <div class="row align-items-center mb-3">
                                    <div class="col-lg-3 pr-0 asd-sad">
                                        <img src="images/car-acc-room-superior-double-inroom-breakfast01_320x266.jpg"
                                            class="img-full" alt="">
                                    </div>
                                    <div class="col-lg-9">
                                        <h4>SUITE 1</h4>
                                        <p class="mb-0"><b>Superior Double Room Garden or Village View </b></p>
                                    </div>
                                </div>
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Guests</td>
                                        <td class="px-0 py-1 text-right">2</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Suite</td>
                                        <td class="px-0 py-1 text-right">€4.299.00</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Tax</td>
                                        <td class="px-0 py-1 text-right">€299.00</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1" colspan="2">
                                            <a href="#" class="underline color-grey" type="button" data-toggle="modal"
                                                data-target="#priceModal"><i>Details and conditions</i></a>
                                        </td>
                                    </tr>
                                </table>
                                <hr class="mb-2">
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Gourmet Experience</td>
                                        <td class="px-0 py-1 text-right">2</td>
                                    </tr>
                                </table>
                                <hr class="mt-2">
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Subtotal</td>
                                        <td class="px-0 py-1 text-right"><b>€4.598.00</b></td>
                                    </tr>
                                </table>
                            </div>
                            <div class="reservation-total">
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Total</td>
                                        <td class="px-0 py-1 text-right"><b>€4.598.00</b></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="col-9">
                            <div class="text-right mb-4">
                                <a href="#" class="btn btn-dark  rounded-0 px-4 btn-nextwizard">Continue</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="step-4" class="tab-pane" role="tabpanel">
                <div class="sidebar-scroller is-reserve">
                    <div class="row">
                        <div class="col-lg-9 col-md-8">
                            <h3 class="mb-0 d-flex align-items-center">
                                <a href="#" class="backwizard btn-backwizard">
                                    <i class="ico ico-back"></i>
                                </a>
                                Payment Details
                            </h3>
                            <hr class="mb-4">
                            <h4 class="mb-4">Your details <span class="small color-grey">(*Required)</span></h4>
                            <div class="row">
                                <div class="col-lg-9">
                                    <div class="row">
                                        <div class="col-6 form-group">
                                            <label>Title<sup>*</sup></label>
                                            <select class="wide">
                                                <option value="">Mr</option>
                                                <option value="">Mrs</option>
                                                <option value="">Miss</option>
                                                <option value="">Ms</option>
                                                <option value="">Dr</option>
                                                <option value="">Prof</option>
                                            </select>
                                        </div>
                                        <div class="col-6 form-group">
                                            <label>First name<sup>*</sup></label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 form-group">
                                            <label>Last name<sup>*</sup></label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-6 form-group">
                                            <label>Email<sup>*</sup></label>
                                            <input type="email" class="form-control">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 form-group">
                                            <label>Telephone<sup>*</sup></label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-6 form-group">
                                            <label>Country/Region<sup>*</sup></label>
                                            <select class="select-country">
                                                <option value="">Please select...</option>
                                                <option value="AF">Afghanistan</option>
                                                <option value="AX">Aland Islands</option>
                                                <option value="AL">Albania</option>
                                                <option value="DZ">Algeria</option>
                                                <option value="AS">American Samoa</option>
                                                <option value="AD">Andorra</option>
                                                <option value="AO">Angola</option>
                                                <option value="AI">Anguillia</option>
                                                <option value="AQ">Antarctica</option>
                                                <option value="AG">Antigua and Barbuda</option>
                                                <option value="AR">Argentina</option>
                                                <option value="AM">Armenia</option>
                                                <option value="AW">Aruba</option>
                                                <option value="AU">Australia</option>
                                                <option value="AT">Austria</option>
                                                <option value="AZ">Azerbaijan</option>
                                                <option value="BS">Bahamas</option>
                                                <option value="BH">Bahrain</option>
                                                <option value="BD">Bangladesh</option>
                                                <option value="BB">Barbados</option>
                                                <option value="BY">Belarus</option>
                                                <option value="BE">Belgium</option>
                                                <option value="BZ">Belize</option>
                                                <option value="BJ">Benin</option>
                                                <option value="BM">Bermuda</option>
                                                <option value="BT">Bhutan</option>
                                                <option value="BO">Bolivia</option>
                                                <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
                                                <option value="BA">Bosnia and Herzegovina</option>
                                                <option value="BW">Botswana</option>
                                                <option value="BV">Bouvet Island</option>
                                                <option value="BR">Brazil</option>
                                                <option value="IO">British Indian Ocean Terriory</option>
                                                <option value="VG">British Virgin Islands</option>
                                                <option value="BN">Brunei Darussalam</option>
                                                <option value="BG">Bulgaria</option>
                                                <option value="BF">Burkina Faso</option>
                                                <option value="BI">Burundi</option>
                                                <option value="KH">Cambodia</option>
                                                <option value="CM">Cameroon</option>
                                                <option value="CA">Canada</option>
                                                <option value="CV">Cape Verde</option>
                                                <option value="KY">Cayman Islands</option>
                                                <option value="CF">Central African Republic</option>
                                                <option value="TD">Chad</option>
                                                <option value="CL">Chile</option>
                                                <option value="CN">China</option>
                                                <option value="CX">Christmas Island</option>
                                                <option value="CC">Cocos (Keeling) Islands</option>
                                                <option value="CO">Colombia</option>
                                                <option value="CO">Comoros</option>
                                                <option value="CG">Congo (Brazzaville)</option>
                                                <option value="CD">Congo, Democratic Republic of the</option>
                                                <option value="CK">Cook Islands</option>
                                                <option value="CR">Costa Rica</option>
                                                <option value="HR">Croatia</option>
                                                <option value="CU">Cuba</option>
                                                <option value="CW">Curaçao</option>
                                                <option value="CY">Cyprus</option>
                                                <option value="CZ">Czech Republic</option>
                                                <option value="CI">Côte d'Ivoire</option>
                                                <option value="DK">Denmark</option>
                                                <option value="DJ">Djibouti</option>
                                                <option value="DM">Dominica</option>
                                                <option value="DO">Dominican Republic</option>
                                                <option value="EC">Ecuador</option>
                                                <option value="EG">Egypt</option>
                                                <option value="SV">El Salvador</option>
                                                <option value="GQ">Equatorial Guinea</option>
                                                <option value="ER">Eritrea</option>
                                                <option value="EE">Estonia</option>
                                                <option value="ET">Ethiopia</option>
                                                <option value="FK">Falkland Islands (Malvinas)</option>
                                                <option value="FO">Faroe Islands</option>
                                                <option value="FJ">Fiji</option>
                                                <option value="FI">Finland</option>
                                                <option value="FR">France</option>
                                                <option value="GF">French Guiana</option>
                                                <option value="PF">French Polynesia</option>
                                                <option value="TF">French Southern Territories</option>
                                                <option value="GA">Gabon</option>
                                                <option value="GM">Gambia</option>
                                                <option value="GE">Georgia</option>
                                                <option value="DE">Germany</option>
                                                <option value="GH">Ghana</option>
                                                <option value="GI">Gibraltar</option>
                                                <option value="GR">Greece</option>
                                                <option value="GL">Greenland</option>
                                                <option value="GD">Grenada</option>
                                                <option value="GP">Guadeloupe</option>
                                                <option value="GU">Guam</option>
                                                <option value="GT">Guatemala</option>
                                                <option value="GG">Guernsey</option>
                                                <option value="GN">Guinea</option>
                                                <option value="GW">Guinea-Bissau</option>
                                                <option value="GY">Guyana</option>
                                                <option value="HT">Haiti</option>
                                                <option value="HM">Heard Island and Mcdonald Islands</option>
                                                <option value="VA">Holy See (Vatican City State)</option>
                                                <option value="HN">Honduras</option>
                                                <option value="HK">Hong Kong</option>
                                                <option value="HU">Hungary</option>
                                                <option value="IS">Iceland</option>
                                                <option value="IN">India</option>
                                                <option value="ID" selected="">Indonesia</option>
                                                <option value="IQ">Iraq</option>
                                                <option value="IE">Ireland</option>
                                                <option value="IM">Isle of Man</option>
                                                <option value="IL">Israel</option>
                                                <option value="IT">Italy</option>
                                                <option value="JM">Jamaica</option>
                                                <option value="JP">Japan</option>
                                                <option value="JE">Jersey</option>
                                                <option value="JO">Jordan</option>
                                                <option value="KZ">Kazakhstan</option>
                                                <option value="KE">Kenya</option>
                                                <option value="KI">Kiribati</option>
                                                <option value="KR">Korea, Republic of</option>
                                                <option value="KW">Kuwait</option>
                                                <option value="KG">Kyrgyzstan</option>
                                                <option value="LA">Lao PDR</option>
                                                <option value="LV">Latvia</option>
                                                <option value="LB">Lebanon</option>
                                                <option value="LS">Lesotho</option>
                                                <option value="LR">Liberia</option>
                                                <option value="LY">Libya</option>
                                                <option value="LI">Liechtenstein</option>
                                                <option value="LT">Lithuania</option>
                                                <option value="LU">Luxembourg</option>
                                                <option value="MO">Macao</option>
                                                <option value="MK">Macedonia, Republic of</option>
                                                <option value="MG">Madagascar</option>
                                                <option value="MW">Malawi</option>
                                                <option value="MY">Malaysia</option>
                                                <option value="MV">Maldives</option>
                                                <option value="ML">Mali</option>
                                                <option value="MT">Malta</option>
                                                <option value="MH">Marshall Islands</option>
                                                <option value="MQ">Martinique</option>
                                                <option value="MR">Mauritania</option>
                                                <option value="MU">Mauritius</option>
                                                <option value="YT">Mayotte</option>
                                                <option value="MX">Mexico</option>
                                                <option value="FM">Micronesia, Federated States of</option>
                                                <option value="MD">Moldova</option>
                                                <option value="MC">Monaco</option>
                                                <option value="MN">Mongolia</option>
                                                <option value="ME">Montenegro</option>
                                                <option value="MS">Montserrat</option>
                                                <option value="MA">Morocco</option>
                                                <option value="MZ">Mozambique</option>
                                                <option value="MM">Myanmar</option>
                                                <option value="NA">Namibia</option>
                                                <option value="NR">Nauru</option>
                                                <option value="NP">Nepal</option>
                                                <option value="NL">Netherlands</option>
                                                <option value="AN">Netherlands Antilles</option>
                                                <option value="NC">New Caledonia</option>
                                                <option value="NZ">New Zealand</option>
                                                <option value="NI">Nicaragua</option>
                                                <option value="NE">Niger</option>
                                                <option value="NG">Nigeria</option>
                                                <option value="NU">Niue</option>
                                                <option value="NF">Norfolk Island</option>
                                                <option value="MP">Northern Mariana Islands</option>
                                                <option value="NO">Norway</option>
                                                <option value="OM">Oman</option>
                                                <option value="PK">Pakistan</option>
                                                <option value="PW">Palau</option>
                                                <option value="PS">Palestinian Territory, Occupied</option>
                                                <option value="PA">Panama</option>
                                                <option value="PG">Papua New Guinea</option>
                                                <option value="PY">Paraguay</option>
                                                <option value="PE">Peru</option>
                                                <option value="PH">Philippines</option>
                                                <option value="PN">Pitcairn</option>
                                                <option value="PL">Poland</option>
                                                <option value="PT">Portugal</option>
                                                <option value="PR">Puerto Rico</option>
                                                <option value="QA">Qatar</option>
                                                <option value="RO">Romania</option>
                                                <option value="RU">Russian Federation</option>
                                                <option value="RW">Rwanda</option>
                                                <option value="RE">Réunion</option>
                                                <option value="SH">Saint Helena</option>
                                                <option value="KN">Saint Kitts and Nevis</option>
                                                <option value="LC">Saint Lucia</option>
                                                <option value="PM">Saint Pierre and Miquelon</option>
                                                <option value="VC">Saint Vincent and Grenadines</option>
                                                <option value="BL">Saint-Barthélemy</option>
                                                <option value="MF">Saint-Martin (French part)</option>
                                                <option value="WS">Samoa</option>
                                                <option value="SM">San Marino</option>
                                                <option value="ST">Sao Tome and Principe</option>
                                                <option value="SA">Saudi Arabia</option>
                                                <option value="SN">Senegal</option>
                                                <option value="RS">Serbia</option>
                                                <option value="SC">Seychelles</option>
                                                <option value="SL">Sierra Leone</option>
                                                <option value="SG">Singapore</option>
                                                <option value="SX">Sint Maarten (Dutch part)</option>
                                                <option value="SK">Slovakia</option>
                                                <option value="SI">Slovenia</option>
                                                <option value="SB">Solomon Islands</option>
                                                <option value="SO">Somalia</option>
                                                <option value="ZA">South Africa</option>
                                                <option value="GS">South Georgia and the South Sandwich Islands</option>
                                                <option value="SS">South Sudan</option>
                                                <option value="ES">Spain</option>
                                                <option value="LK">Sri Lanka</option>
                                                <option value="SD">Sudan</option>
                                                <option value="SR">Suriname</option>
                                                <option value="SJ">Svalbard and Jan Mayen Islands</option>
                                                <option value="SZ">Swaziland</option>
                                                <option value="SE">Sweden</option>
                                                <option value="CH">Switzerland</option>
                                                <option value="TW">Taiwan</option>
                                                <option value="TJ">Tajikistan</option>
                                                <option value="TZ">Tanzania, United Republic of</option>
                                                <option value="TH">Thailand</option>
                                                <option value="TL">Timor-Leste</option>
                                                <option value="TG">Togo</option>
                                                <option value="TK">Tokelau</option>
                                                <option value="TO">Tonga</option>
                                                <option value="TT">Trinidad and Tobago</option>
                                                <option value="TN">Tunisia</option>
                                                <option value="TR">Turkey</option>
                                                <option value="TM">Turkmenistan</option>
                                                <option value="TC">Turks and Caicos Islands</option>
                                                <option value="TV">Tuvalu</option>
                                                <option value="UG">Uganda</option>
                                                <option value="UA">Ukraine</option>
                                                <option value="AE">United Arab Emirates</option>
                                                <option value="GB">United Kingdom</option>
                                                <option value="UM">United States Minor Outlying Islands</option>
                                                <option value="US">United States of America</option>
                                                <option value="UY">Uruguay</option>
                                                <option value="UZ">Uzbekistan</option>
                                                <option value="VU">Vanuatu</option>
                                                <option value="VE">Venezuela (Bolivarian Republic of)</option>
                                                <option value="VN">Vietnam</option>
                                                <option value="VI">Virgin Islands, US</option>
                                                <option value="WF">Wallis and Futuna Islands</option>
                                                <option value="EH">Western Sahara</option>
                                                <option value="YE">Yemen</option>
                                                <option value="ZM">Zambia</option>
                                                <option value="ZW">Zimbabwe</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 form-group">
                                            <label>Address 1<sup>*</sup></label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-6 form-group">
                                            <label>Address 2</label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-6 form-group">
                                            <label>City/Town<sup>*</sup></label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-6 form-group">
                                            <label>County/State</label>
                                            <select class="wide">
                                                <option value="">NA</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 form-group">
                                            <label>Zip/Post code<sup>*</sup></label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr class="my-5">
                            <div class="row">
                                <div class="col-lg-9">
                                    <h4 class="mb-4"><i class="fa fa-lock" aria-hidden="true"></i> Payment details <span
                                            class="small color-grey">(*Required)</span></h4>
                                    <p>Credit card details are required to guarantee your reservation.</p>

                                    <div class="row align-items-center">
                                        <div class="col-4 form-group">
                                            <label>Credit/Debit card: </label>
                                        </div>
                                        <div class="col-8 form-group">
                                            <select class="wide">
                                                <option value="">Visa</option>
                                                <option value="">Master Card</option>
                                                <option value="">American Express</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row align-items-center">
                                        <div class="col-4 form-group">
                                            <label>Card number: </label>
                                        </div>
                                        <div class="col-8 form-group">
                                            <input type="text" class="form-control" placeholder="****_****_****_****">
                                        </div>
                                    </div>
                                    <div class="row align-items-center">
                                        <div class="col-4 form-group">
                                            <label>Expiration: </label>
                                        </div>
                                        <div class="col-4 form-group">
                                            <select class="wide">
                                                <option value="">Month</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                            </select>
                                        </div>
                                        <div class="col-4 form-group">
                                            <select class="wide">
                                                <option value=""> Year</option>
                                                <option value="2020">2020</option>
                                                <option value="2021">2021</option>
                                                <option value="2022">2022</option>
                                                <option value="2023">2023</option>
                                                <option value="2024">2024</option>
                                                <option value="2025">2025</option>
                                                <option value="2026">2026</option>
                                                <option value="2027">2027</option>
                                                <option value="2028">2028</option>
                                                <option value="2029">2029</option>
                                                <option value="2030">2030</option>
                                                <option value="2031">2031</option>
                                                <option value="2032">2032</option>
                                                <option value="2033">2033</option>
                                                <option value="2034">2034</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row align-items-center">
                                        <div class="col-4">
                                            <label>Name on card: </label>
                                        </div>
                                        <div class="col-8">
                                            <input type="text" class="form-control" placeholder="Name on card">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr class="my-5">
                            <div class="row">
                                <div class="col-lg-9">
                                    <h4 class="mb-4">Special requirements <span
                                            class="small color-grey">(*Required)</span></h4>
                                    <div class="form-group">
                                        <textarea class="form-control" name="" id="" cols="30" rows="10"
                                            placeholder="Type your requirement here"></textarea>
                                    </div>
                                </div>
                            </div>
                            <hr class="my-5">
                            <div class="policies">
                                <h3>Policies</h3>
                                <div class="card card-body rounded-0">
                                    <p><b>Suite 1</b></p>
                                    <p><b>CANCEL</b> Cancel by 1pm local time 72 hours prior or pay 1 night for
                                        every 3 nights booked plus tax. No show charged full stay.</p>
                                    <p><b>GUARANTEE</b> A credit card guarantee is required at time of booking
                                        unless otherwise started in the rate description.</p>
                                    <p><b>MEAL PLAN</b> Breakfast included</p>
                                    <p><b>VAT TAX</b> Rates shown are inclusive of 10 percent VAT Tax per room, per
                                        night. this will appear itemized in your shopping basket.</p>
                                    <p><b>CITY TAX</b> Rates shown are inclusive of EUR 5 city Tax per person, per
                                        night for persons 8 years and older for up to 10 nights. Seasonal
                                        adjustments may apply. This will appear itemized in your shopping basket.
                                    </p>
                                </div>
                            </div>
                            <hr class="my-5">
                            <div class="booking-tearms">
                                <h3>Booking teams and conditions</h3>
                                <div class="custom-control custom-checkbox mb-5">
                                    <input type="checkbox" class="custom-control-input" id="policiessd">
                                    <label class="custom-control-label" for="policiessd">
                                        Your reservation is made subject to our
                                        <a href="#" class="underline"><b>Terms & Conditions</b> </a>(available
                                        in other
                                        languages <a href="#" class="underline"><b>here</b></a>), and the
                                        specific
                                        payment tearms (deposit, tax and cancellation) set out above, Please
                                        check
                                        this box to agrree to these tearms and proceed with your booking. By
                                        confirming your booking, you agree with all provisions of the
                                        <a href="#" class="underline"><b>privacy policy</b></a>
                                    </label>
                                </div>
                                <p>
                                    For further information about how we use your data, please see our
                                    <a href="#" class="underline"><b>privacy policy</b></a>
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-4">
                            <div class="reservation-summary">
                                <h4>YOUR RESERVATION</h4>
                                <p><b>Belmond Jimbaran Puri</b></p>
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Guests</td>
                                        <td class="px-0 py-1 text-right">2 Guests</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Check-in</td>
                                        <td class="px-0 py-1 text-right">15 Aug 2020</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Check-out</td>
                                        <td class="px-0 py-1 text-right">16 Aug 2020</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Suites</td>
                                        <td class="px-0 py-1 text-right">Pavilion suite</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="reservation-summary section-shadow">
                                <h4>SUITE 1</h4>
                                <p><b>Superior Double Room Garden or Village View </b></p>
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Guests</td>
                                        <td class="px-0 py-1 text-right">2</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Suite</td>
                                        <td class="px-0 py-1 text-right">€4.299.00</td>
                                    </tr>
                                    <tr>
                                        <td class="px-0 py-1">Tax</td>
                                        <td class="px-0 py-1 text-right">€299.00</td>
                                    </tr>
                                </table>
                                <hr class="mb-2">
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Gourmet Experience</td>
                                        <td class="px-0 py-1 text-right">2</td>
                                    </tr>
                                </table>
                                <hr class="mt-2">
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Subtotal</td>
                                        <td class="px-0 py-1 text-right"><b>€4.598.00</b></td>
                                    </tr>
                                </table>
                            </div>
                            <div class="reservation-total">
                                <table class="table table-borderless mb-0">
                                    <tr>
                                        <td class="px-0 py-1">Total</td>
                                        <td class="px-0 py-1 text-right"><b>€4.598.00</b></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="col-9">
                            <div class="row mt-5 mb-5">
                                <div class="col-6">
                                    <a href="#" class="btn btn-dark  px-5 btn-backwizard">Go back</a>
                                </div>
                                <div class="col-6 text-right">
                                    <a href="#" class="btn btn-dark  px-5 btn-nextwizard">Confirm booking</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="step-5" class="tab-pane" role="tabpanel">
                <div class="sidebar-scroller is-reserve">
                    <div class="row">
                        <div class="col-xl-8 col-lg-12">
                            <div class="row">
                                <div class="col-7">
                                    <div class="bg-grey px-3 py-2 mb-3">
                                        <h4>Your booking at <b>Superior Double Room Garden or Village View </b> in
                                            Limone sul Garda, Italy</h4>
                                        <p class="mb-0">Confirm number: 12313123122 - PIN code: 4681 - Unlink from your
                                            business account</p>
                                    </div>
                                    <div class="inner-wrapper mb-3">
                                        <div class="pr-lst result-grid">
                                            <div>
                                                <img src="images/29be6592342279.5e49609509d85.jpg" class="w-100" alt="">
                                            </div>
                                            <div>
                                                <img src="images/29be6592342279.5e49609509d85.jpg" class="w-100" alt="">
                                            </div>
                                            <div>
                                                <img src="images/29be6592342279.5e49609509d85.jpg" class="w-100" alt="">
                                            </div>
                                        </div>
                                        <a href="#" class="dtl-link">
                                            <i class="ico ico-diamon diamon-label fav-button"></i>
                                        </a>
                                    </div>
                                    <div class="reservation-summary">
                                        <h4>YOUR RESERVATION</h4>
                                        <p><b>Belmond Jimbaran Puri</b></p>
                                        <table class="table table-borderless mb-0">
                                            <tr>
                                                <td class="px-0 py-1">Guests</td>
                                                <td class="px-0 py-1 text-right">2 Guests</td>
                                            </tr>
                                            <tr>
                                                <td class="px-0 py-1">Check-in</td>
                                                <td class="px-0 py-1 text-right">15 Aug 2020</td>
                                            </tr>
                                            <tr>
                                                <td class="px-0 py-1">Check-out</td>
                                                <td class="px-0 py-1 text-right">16 Aug 2020</td>
                                            </tr>
                                            <tr>
                                                <td class="px-0 py-1">Suites</td>
                                                <td class="px-0 py-1 text-right">Pavilion suite</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="reservation-summary section-shadow">
                                        <div class="row align-items-center mb-3">
                                            <div class="col-3 pr-0">
                                                <img src="images/car-acc-room-superior-double-inroom-breakfast01_320x266.jpg"
                                                    class="img-full" alt="">
                                            </div>
                                            <div class="col-9">
                                                <h4>SUITE 1</h4>
                                                <p class="mb-0"><b>Superior Double Room Garden or Village View </b></p>
                                            </div>
                                        </div>
                                        <table class="table table-borderless mb-0">
                                            <tr>
                                                <td class="px-0 py-1">Guests</td>
                                                <td class="px-0 py-1 text-right">2</td>
                                            </tr>
                                            <tr>
                                                <td class="px-0 py-1">Suite</td>
                                                <td class="px-0 py-1 text-right">€4.299.00</td>
                                            </tr>
                                            <tr>
                                                <td class="px-0 py-1">Tax</td>
                                                <td class="px-0 py-1 text-right">€299.00</td>
                                            </tr>
                                            <tr>
                                                <td class="px-0 py-1" colspan="2">
                                                    <a href="#" class="underline color-grey" type="button"
                                                        data-toggle="modal" data-target="#priceModal"><i>Details and
                                                            conditions</i></a>
                                                </td>
                                            </tr>
                                        </table>
                                        <hr class="mb-2">
                                        <table class="table table-borderless mb-0">
                                            <tr>
                                                <td class="px-0 py-1">Gourmet Experience</td>
                                                <td class="px-0 py-1 text-right">2</td>
                                            </tr>
                                        </table>
                                        <hr class="mt-2">
                                        <table class="table table-borderless mb-0">
                                            <tr>
                                                <td class="px-0 py-1">Subtotal</td>
                                                <td class="px-0 py-1 text-right"><b>€4.598.00</b></td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="reservation-total">
                                        <table class="table table-borderless mb-0">
                                            <tr>
                                                <td class="px-0 py-1">Total</td>
                                                <td class="px-0 py-1 text-right"><b>€4.598.00</b></td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="policies" id="policies">
                                        <h3>Policies</h3>
                                        <div class="card card-body rounded-0">
                                            <p><b>Suite 1</b></p>
                                            <p><b>CANCEL</b> Cancel by 1pm local time 72 hours prior or pay 1 night for
                                                every 3 nights booked plus tax. No show charged full stay.</p>
                                            <p><b>GUARANTEE</b> A credit card guarantee is required at time of booking
                                                unless otherwise started in the rate description.</p>
                                            <p><b>MEAL PLAN</b> Breakfast included</p>
                                            <p><b>VAT TAX</b> Rates shown are inclusive of 10 percent VAT Tax per room,
                                                per
                                                night. this will appear itemized in your shopping basket.</p>
                                            <p><b>CITY TAX</b> Rates shown are inclusive of EUR 5 city Tax per person,
                                                per
                                                night for persons 8 years and older for up to 10 nights. Seasonal
                                                adjustments may apply. This will appear itemized in your shopping
                                                basket.
                                            </p>
                                        </div>
                                        <hr>
                                        <div class="booking-tearms">
                                            <h3>Booking teams and conditions</h3>
                                            <div class="custom-control custom-checkbox mb-5">
                                                <input type="checkbox" class="custom-control-input" id="check-ste">
                                                <label class="custom-control-label" for="check-ste">
                                                    Your reservation is made subject to our
                                                    <a href="#" class="underline"><b>Terms &amp; Conditions</b>
                                                    </a>(available
                                                    in other
                                                    languages <a href="#" class="underline"><b>here</b></a>), and the
                                                    specific
                                                    payment tearms (deposit, tax and cancellation) set out above, Please
                                                    check
                                                    this box to agrree to these tearms and proceed with your booking. By
                                                    confirming your booking, you agree with all provisions of the
                                                    <a href="#" class="underline"><b>privacy policy</b></a>
                                                </label>
                                            </div>
                                            <p>
                                                For further information about how we use your data, please see our
                                                <a href="#" class="underline"><b>privacy policy</b></a>
                                            </p>
                                        </div>
                                        <div class="row mb-4">
                                            <div class="col-6">
                                                <a href="#" class="btn btn-dark  px-5 btn-backwizard">Go back</a>
                                            </div>
                                            <div class="col-6 text-right">
                                                <a href="#" class="btn btn-dark  px-5 btn-nextwizard">Confirm
                                                    booking</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-5">
                                    <ul class="nav nav-step5 flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="#"><i class="fa fa-file-pdf-o"
                                                    aria-hidden="true"></i> Get a PDF for visa purposes <i
                                                    class="fa fa-chevron-right right-arrow" aria-hidden="true"></i></a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#"><i class="fa fa-print" aria-hidden="true"></i>
                                                Print details <i class="fa fa-chevron-right right-arrow"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#"><i class="fa fa-file" aria-hidden="true"></i>
                                                Get receipt <i class="fa fa-chevron-right right-arrow"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                    </ul>
                                    <div class="bg-grey p-1 mb-5"></div>
                                    <h4 class="mb-4">Getting there</h4>
                                    <p class="mb-1"><b>Address</b></p>
                                    <p>30 Antigua Avenue, Cape Town, Western Cape 7975, SOuth Africa</p>
                                    <ul class="nav nav-step5 flex-column mb-5">
                                        <li class="nav-item">
                                            <a class="nav-link" href="#"><i class="fa fa-files-o"
                                                    aria-hidden="true"></i> Copy address <i
                                                    class="fa fa-chevron-right right-arrow" aria-hidden="true"></i></a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#"><i class="fa fa-map-marker"
                                                    aria-hidden="true"></i>
                                                Get directions <i class="fa fa-chevron-right right-arrow"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                    </ul>
                                    <div id="map"></div>
                                </div>

                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-12">
                            <div class="row h-100">
                                <div class="col-5 h-100">
                                    <div class="bg-grey p-3 h-100">
                                        <ul class="nav nav-step5 flex-column">
                                            <li class="nav-item">
                                                <a class="nav-link" href="#">
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-100">
                                                            <p class="mb-0 month-nav">20. AUG.</p>
                                                            <p class="mb-0"><b>Dienstag</b></p>
                                                        </div class="w-100">
                                                        <div>
                                                            <i class="ico ico-car-i mr-0"></i>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#">
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-100">
                                                            <p class="mb-0 month-nav">21. AUG.</p>
                                                            <p class="mb-0"><b>Mittwoch</b></p>
                                                        </div class="w-100">

                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#">
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-100">
                                                            <p class="mb-0 month-nav">22. AUG.</p>
                                                            <p class="mb-0"><b>Donnerstag</b></p>
                                                        </div class="w-100">

                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#">
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-100">
                                                            <p class="mb-0 month-nav">23. AUG.</p>
                                                            <p class="mb-0"><b>Freitag</b></p>
                                                        </div class="w-100">

                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#">
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-100">
                                                            <p class="mb-0 month-nav">24. AUG.</p>
                                                            <p class="mb-0"><b>Samstag</b></p>
                                                        </div class="w-100">

                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#">
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-100">
                                                            <p class="mb-0 month-nav">25. AUG.</p>
                                                            <p class="mb-0"><b>Sonntag</b></p>
                                                        </div class="w-100">

                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#">
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-100">
                                                            <p class="mb-0 month-nav">26. AUG.</p>
                                                            <p class="mb-0"><b>Montag</b></p>
                                                        </div class="w-100">
                                                        <div>
                                                            <i class="ico ico-spa-i mr-0"></i>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#">
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-100">
                                                            <p class="mb-0 month-nav">27. AUG.</p>
                                                            <p class="mb-0"><b>Dienstag</b></p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#">
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-100">
                                                            <p class="mb-0 month-nav">28. AUG.</p>
                                                            <p class="mb-0"><b>Dienstag</b></p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#">
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-100">
                                                            <p class="mb-0 month-nav">29. AUG.</p>
                                                            <p class="mb-0"><b>Donnerstag</b></p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#">
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-100">
                                                            <p class="mb-0 month-nav">20. AUG.</p>
                                                            <p class="mb-0"><b>Freitag</b></p>
                                                        </div>
                                                        <div>
                                                            <i class="ico ico-car-i mr-0"></i>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4 class="mb-4">Additional Services Summary</h4>
                                    <div class="additional-list h-auto p-0 mb-4">
                                        <div class="add-txt h-auto">
                                            <div class="inner-wrapper mb-3">
                                                <div class="pr-lst result-grid">
                                                    <div>
                                                        <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                            alt="">
                                                    </div>
                                                    <div>
                                                        <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                            alt="">
                                                    </div>
                                                    <div>
                                                        <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                            alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4">
                                            <h4 class="mb-4">
                                                TRADITIONAL BALINESE MASSAGE
                                            </h4>
                                            <p class="mb-4">
                                                Relieve tension with a 60-minute traditional massage,
                                                combining long rhythmic strokes with acupressure and
                                                reflexology techniques. Please Note: This is a request
                                                and not a booking, our spa team will contact you to
                                                confirm your desired appointment. Price shown is per
                                                treatment, per person.
                                            </p>
                                            <div class="d-flex align-items-center mb-5">
                                                <div>
                                                    <i class="ico ico-spa-i w-0s0"></i>
                                                </div>
                                                <div class="w-100 text-left">
                                                    <p class="mb-1"><b>Confirmation code</b></p>
                                                    <p class="mb-0">HMAQSD891QSS</p>
                                                </div>
                                            </div>

                                            <a href="#" class="btn btn-dark btn-block rounded-0">Select</a>
                                        </div>
                                    </div>
                                    <div class="additional-list h-auto p-0 mb-4">
                                        <div class="add-txt h-auto">
                                            <div class="inner-wrapper mb-3">
                                                <div class="pr-lst result-grid">
                                                    <div>
                                                        <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                            alt="">
                                                    </div>
                                                    <div>
                                                        <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                            alt="">
                                                    </div>
                                                    <div>
                                                        <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                            alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4">
                                            <h4 class="mb-4">
                                                TRADITIONAL BALINESE MASSAGE
                                            </h4>
                                            <p class="mb-4">
                                                Relieve tension with a 60-minute traditional massage,
                                                combining long rhythmic strokes with acupressure and
                                                reflexology techniques. Please Note: This is a request
                                                and not a booking, our spa team will contact you to
                                                confirm your desired appointment. Price shown is per
                                                treatment, per person.
                                            </p>
                                            <div class="d-flex align-items-center mb-5">
                                                <div>
                                                    <i class="ico ico-car-i w-0s0"></i>
                                                </div>
                                                <div class="w-100 text-left">
                                                    <p class="mb-1"><b>Confirmation code</b></p>
                                                    <p class="mb-0">HMAQSD891QSS</p>
                                                </div>
                                            </div>

                                            <a href="#" class="btn btn-dark btn-block rounded-0">Select</a>
                                        </div>
                                    </div>
                                    <a href="dashboard.html" class="btn btn-primary rounded-0 btn-lg btn-block">
                                        Confirm Booking
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div class="sidebar-main pb-0" id="suiteinfo">
    <a href="#" class="close-sidebar">
        <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24"
            xmlns="http://www.w3.org/2000/svg">
            <title>Close</title>
            <path
                d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
            </path>
        </svg>
    </a>


    <div class="sidebar-scroller">
        <div class="d-flex align-items-center mb-5">
            <a href="#" class="sidebar-back">
                <i class="ico ico-back"></i>
            </a>
            <h3 class="title-second title-line mb-0">
                The Ludlow Hotel
            </h3>
        </div>
        <div class="card mb-5">
            <div class="row suite-board-body rounded-0">
                <div class="col-lg-4 col-md-6 suite-price-feature">
                    <div class="suite-board-main">
                        <h4><!--PROPERTY-BOARD-TITLE--></h4>
                        <!--<ul class="pl-3">
                            <li>Accommodation</li>
                            <li>Daily breakfast</li>
                        </ul>-->
                    </div>
                    <div class="suite-board-footer">
                        <!--
                        <div class="collapse" id="breakfas">
                            <div class="card card-body border-0">
                                <h4 class="mb-4">Details &amp; Policies</h4>
                                <ul class="text-left pl-3">
                                    <li>
                                        CANCEL: <br>
                                        Cancel by 12PM local time 24 hours prior to arrival or
                                        pay 1 night plus tax
                                    </li>
                                    <li>
                                        GUARANTEE: <br>
                                        A credit card guarantee is required at time of booking
                                        unless otherwise stated in the rate description.
                                    </li>
                                    <li>
                                        MEAL PLAN: <br>
                                        Breakfast included
                                    </li>
                                    <li>
                                        SERVICE CHARGE: <br>
                                        Rates shown are inclusive of 10 percent Service Charge
                                        per room, per night. This will appear itemized in your
                                        shopping basket.
                                    </li>
                                    <li>
                                        GOVERNMENT TAX: <br>
                                        Rates shown are inclusive of 10 percent Government Tax
                                        per room, per night. This will appear itemized in your
                                        shopping basket.
                                    </li>
                                    <li>
                                        GOVERNMENT TAX AND SERVICE CHARGE: <br>
                                        Room rates do not include 11 percent Government Tax and
                                        10 percent Service Charge
                                    </li>
                                    <li>
                                        PACKAGE GOVERNMENT TAX: <br>
                                        Room rates do not include 10% Government Tax
                                    </li>
                                </ul>
                            </div>
                        </div>
                        -->
                        <!--<a class="detail-policies" data-toggle="collapse" href="#breakfas" role="button"
                            aria-expanded="false" aria-controls="breakfas">Details
                            &amp; Policies</a>
                        -->
                        <div class="footer-sdse">
                            <p>€<!--PROPERTY-BOARD-RATE--> per night inclusive of all taxes and fees</p>
                            <a href="#" class="btn btn-dark  btn-block rounded-0">Select</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--
            <div class="policies p-4" id="policies">
                <h3>Policies</h3>
                <div class="card card-body rounded-0">
                    <p><b>Suite 1</b></p>
                    <p><b>CANCEL</b> Cancel by 1pm local time 72 hours prior or pay 1 night for
                        every 3 nights booked plus tax. No show charged full stay.</p>
                    <p><b>GUARANTEE</b> A credit card guarantee is required at time of booking
                        unless otherwise started in the rate description.</p>
                    <p><b>MEAL PLAN</b> Breakfast included</p>
                    <p><b>VAT TAX</b> Rates shown are inclusive of 10 percent VAT Tax per room, per
                        night. this will appear itemized in your shopping basket.</p>
                    <p><b>CITY TAX</b> Rates shown are inclusive of EUR 5 city Tax per person, per
                        night for persons 8 years and older for up to 10 nights. Seasonal
                        adjustments may apply. This will appear itemized in your shopping basket.
                    </p>
                </div>
                <hr>
                <div class="booking-tearms">
                    <h3>Booking teams and conditions</h3>
                    <div class="custom-control custom-checkbox mb-5">
                        <input type="checkbox" class="custom-control-input" id="customCheck22">
                        <label class="custom-control-label" for="customCheck22">
                            Your reservation is made subject to our
                            <a href="#" class="underline"><b>Terms &amp; Conditions</b> </a>(available
                            in other
                            languages <a href="#" class="underline"><b>here</b></a>), and the
                            specific
                            payment tearms (deposit, tax and cancellation) set out above, Please
                            check
                            this box to agrree to these tearms and proceed with your booking. By
                            confirming your booking, you agree with all provisions of the
                            <a href="#" class="underline"><b>privacy policy</b></a>
                        </label>
                    </div>
                    <p>
                        For further information about how we use your data, please see our
                        <a href="#" class="underline"><b>privacy policy</b></a>
                    </p>
                </div>
                <div class="row">
                    <div class="col-6">
                        <a href="#" class="btn btn-dark  px-5 btn-backwizard">Go back</a>
                    </div>
                    <div class="col-6 text-right">
                        <a href="#" class="btn btn-dark  px-5 btn-nextwizard">Confirm
                            booking</a>
                    </div>
                </div>
            </div>
            -->
        </div>
    </div>
</div><div class="sidebar-main pb-0" id="suite-deal">
    <a href="#" class="close-sidebar">
        <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24"
            xmlns="http://www.w3.org/2000/svg">
            <title>Close</title>
            <path
                d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
            </path>
        </svg>
    </a>


    <div class="sidebar-scroller">
        <div class="d-flex align-items-center mb-5">
            <a href="#" class="sidebar-back">
                <i class="ico ico-back"></i>
            </a>
            <h3 class="title-second title-line mb-0">
                The Ludlow Hotel
            </h3>
        </div>
        <div class="card p-5 mb-4">
            <h3 class="mb-4 color-dark-grey ">Add additional services</h3>
            <div class="accordion accordion-ex" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                                data-target="#transfers" aria-expanded="true" aria-controls="transfers">
                                Transfers
                                <i class="fa fa-plus"></i>
                                <i class="fa fa-minus" style="display: none"></i>
                            </button>
                        </h2>
                    </div>
                    <div id="transfers" class="collapse additional-collapse" aria-labelledby="headingOne"
                        data-parent="#accordionExample">
                        <div class="card-body h-100">
                            <div class="row">
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">ONE WAY AIRPORT TRANSFER</h4>
                                                <p class="mb-4">
                                                    Transfer to or from Ngurah Rai International Airport by
                                                    private car. Suitable for up to four guests. Tax and
                                                    service
                                                    charge are not included. Price shown is for up to 4
                                                    guests.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">ROUNDTRIP AIRPORT TRANSFER</h4>
                                                <p class="mb-4">
                                                    Relax with transfers to and from Ngurah Rai
                                                    International
                                                    Airport by private car. Suitable for up to four guests.
                                                    Tax
                                                    and service charge are not included. Price shown is for
                                                    up
                                                    to 4 guests.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link btn-block text-left collapsed" type="button"
                                data-toggle="collapse" data-target="#inroom-amenities" aria-expanded="false"
                                aria-controls="inroom-amenities">
                                In-Room Amenities
                                <i class="fa fa-plus"></i>
                                <i class="fa fa-minus" style="display: none"></i>
                            </button>
                        </h2>

                    </div>
                    <div id="inroom-amenities" class="collapse additional-collapse" aria-labelledby="headingTwo"
                        data-parent="#accordionExample">
                        <div class="card-body h-100">
                            <div class="row">
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">BOTTLE OF ROSE BALINESE WINE</h4>
                                                <p class="mb-4">
                                                    Find a bottle of sparkling Balinese rosé in your room,
                                                    awaiting your arrival.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">BALINESE ORNAMENTAL BAMBOO POLE
                                                </h4>
                                                <p class="mb-4">
                                                    Delight someone special with this unique Balinese
                                                    handcrafted penjor, a wonderful souvenir.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">ISLAND TROPICAL AMENITY</h4>
                                                <p class="mb-4">
                                                    Step into your room and discover a true taste of Bali.
                                                    This
                                                    welcome platter includes fresh coconuts, seasonal fruit
                                                    and
                                                    assorted local desserts.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link btn-block text-left collapsed" type="button"
                                data-toggle="collapse" data-target="#spa-service" aria-expanded="false"
                                aria-controls="spa-service">
                                Spa Services
                                <i class="fa fa-plus"></i>
                                <i class="fa fa-minus" style="display: none"></i>
                            </button>
                        </h2>

                    </div>
                    <div id="spa-service" class="collapse additional-collapse" aria-labelledby="headingThree"
                        data-parent="#accordionExample">
                        <div class="card-body h-100">
                            <div class="row">
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">
                                                    TRADITIONAL BALINESE MASSAGE
                                                </h4>
                                                <p class="mb-4">
                                                    Relieve tension with a 60-minute traditional massage,
                                                    combining long rhythmic strokes with acupressure and
                                                    reflexology techniques. Please Note: This is a request
                                                    and not a booking, our spa team will contact you to
                                                    confirm your desired appointment. Price shown is per
                                                    treatment, per person.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">
                                                    ABHYANGA TREATMENT
                                                </h4>
                                                <p class="mb-4">
                                                    Achieve inner harmony with this 60-minute massage
                                                    ritual. Rhythmic pressure applied with herbal oils
                                                    banishes toxins and impurities while boosting
                                                    circulation. Please Note: This is a request and not a
                                                    booking, our spa team will contact you to confirm your
                                                    desired appointment. Price shown is per treatment, per
                                                    person.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">
                                                    REFLEXOLOGY FOOT MASSAGE
                                                </h4>
                                                <p class="mb-4">
                                                    This 60-minute ancient holistic therapy applies gentle
                                                    pressure to points on the feet – as blissful as it is
                                                    beneficial. Please Note: This is a request and not a
                                                    booking, our spa team will contact you to confirm your
                                                    desired appointment. Price shown is per treatment, per
                                                    person.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingfour">
                        <h2 class="mb-0">
                            <button class="btn btn-link btn-block text-left collapsed" type="button"
                                data-toggle="collapse" data-target="#experiences" aria-expanded="false"
                                aria-controls="experiences">
                                Experiences
                                <i class="fa fa-plus"></i>
                                <i class="fa fa-minus" style="display: none"></i>
                            </button>
                        </h2>

                    </div>
                    <div id="experiences" class="collapse additional-collapse" aria-labelledby="headingfour"
                        data-parent="#accordionExample">
                        <div class="card-body h-100">
                            <div class="row">
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">
                                                    TRADITIONAL BALINESE MASSAGE
                                                </h4>
                                                <p class="mb-4">
                                                    Relieve tension with a 60-minute traditional massage,
                                                    combining long rhythmic strokes with acupressure and
                                                    reflexology techniques. Please Note: This is a request
                                                    and not a booking, our spa team will contact you to
                                                    confirm your desired appointment. Price shown is per
                                                    treatment, per person.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">
                                                    ABHYANGA TREATMENT
                                                </h4>
                                                <p class="mb-4">
                                                    Achieve inner harmony with this 60-minute massage
                                                    ritual. Rhythmic pressure applied with herbal oils
                                                    banishes toxins and impurities while boosting
                                                    circulation. Please Note: This is a request and not a
                                                    booking, our spa team will contact you to confirm your
                                                    desired appointment. Price shown is per treatment, per
                                                    person.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">
                                                    REFLEXOLOGY FOOT MASSAGE
                                                </h4>
                                                <p class="mb-4">
                                                    This 60-minute ancient holistic therapy applies gentle
                                                    pressure to points on the feet – as blissful as it is
                                                    beneficial. Please Note: This is a request and not a
                                                    booking, our spa team will contact you to confirm your
                                                    desired appointment. Price shown is per treatment, per
                                                    person.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">
                                                    ABHYANGA TREATMENT
                                                </h4>
                                                <p class="mb-4">
                                                    Achieve inner harmony with this 60-minute massage
                                                    ritual. Rhythmic pressure applied with herbal oils
                                                    banishes toxins and impurities while boosting
                                                    circulation. Please Note: This is a request and not a
                                                    booking, our spa team will contact you to confirm your
                                                    desired appointment. Price shown is per treatment, per
                                                    person.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">
                                                    REFLEXOLOGY FOOT MASSAGE
                                                </h4>
                                                <p class="mb-4">
                                                    This 60-minute ancient holistic therapy applies gentle
                                                    pressure to points on the feet – as blissful as it is
                                                    beneficial. Please Note: This is a request and not a
                                                    booking, our spa team will contact you to confirm your
                                                    desired appointment. Price shown is per treatment, per
                                                    person.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">
                                                    ABHYANGA TREATMENT
                                                </h4>
                                                <p class="mb-4">
                                                    Achieve inner harmony with this 60-minute massage
                                                    ritual. Rhythmic pressure applied with herbal oils
                                                    banishes toxins and impurities while boosting
                                                    circulation. Please Note: This is a request and not a
                                                    booking, our spa team will contact you to confirm your
                                                    desired appointment. Price shown is per treatment, per
                                                    person.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="additional-list p-0">
                                        <div class="inner-wrapper mb-3">
                                            <div class="pr-lst result-grid">
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                                <div>
                                                    <img src="images/98d13b87078871.5dad9554e33ef.jpg" class="w-100"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-4 inner-warppa">
                                            <div class="add-txt">
                                                <h4 class="mb-4 added">Added to booking</h4>
                                                <h4 class="mb-4 title-additional-list">
                                                    REFLEXOLOGY FOOT MASSAGE
                                                </h4>
                                                <p class="mb-4">
                                                    This 60-minute ancient holistic therapy applies gentle
                                                    pressure to points on the feet – as blissful as it is
                                                    beneficial. Please Note: This is a request and not a
                                                    booking, our spa team will contact you to confirm your
                                                    desired appointment. Price shown is per treatment, per
                                                    person.
                                                </p>
                                            </div>
                                            <div class="booking-qty">
                                                <p class="qty-label">Quantity</p>
                                                <div class="qty-button mb-4">
                                                    <button type="button" id="sub" class="sub btn-qty">-</button>
                                                    <input class="form-qty" type="number" id="1" value="1" min="1" />
                                                    <button type="button" id="add" class="add btn-qty">+</button>
                                                </div>
                                                <p class="qty-label">€16.00</p>
                                            </div>
                                            <div class="confirm-qty">
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>

                                            <a href="#" class="btn btn-dark rounded-0 booking-select">Select</a>
                                            <a href="#" class="btn-red-link mt-2 remove-booking">Remove from booking</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div class="sidebar-main share-sidebar" id="filterbar">
    <a href="#" class="close-sidebar">
        <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24"
            xmlns="http://www.w3.org/2000/svg">
            <title>Close</title>
            <path
                d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
            </path>
        </svg>
    </a>


    <div class="sidebar-scroller">
        <h3 class="mb-5">Filter</h3>
        <form>
            <div class="filter-list">
                <h5 class="filter-title mb-4">By price</h5>
                <div class="px-2">
                    <div id="price_range" class="price-range"></div>
                </div>
                <div class="row align-items-center price-input">
                    <div class="col">
                        <label>Min:</label>
                        <div class="input-filter">
                            <span>€</span>
                            <input type="text" class="priceValue form-control" data-index="0" value="80" />
                        </div>
                    </div>
                    <div class="col">
                        <label>Max:</label>
                        <div class="input-filter">
                            <span>€</span>
                            <input type="text" class="priceValue form-control" data-index="1" value="824" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="filter-list">
                <h5 class="filter-title mb-4">By Experience</h5>
                
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            World Wonders
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter782"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter782"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Walking Safari
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter783"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter783"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Romantic Safari Camps
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter784"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter784"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Renewable Energy Camps
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter785"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter785"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Photo Hubs
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter787"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter787"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Helicopters &amp; Planes
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter788"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter788"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Front Seat Row
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter789"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter789"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Elephant Encounters
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter790"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter790"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Disconnect from the World
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter793"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter793"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Cultural Experiences
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter794"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter794"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Canoe Safaris
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter795"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter795"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Ballooning Experiences
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter796"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter796"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Adventure Camps
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter820"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter820"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Classic Camps
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter821"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter821"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Premier Camps
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter822"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter822"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Houseboats
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter1153"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter1153"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Night Drives
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter1154"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter1154"></label>
                            </div>
                        </div>
                    </div>
                     
                    <div class="row align-items-center">
                        <div class="col-8">
                            Catch-and-release Fishing
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="experiencefilter1155"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="experiencefilter1155"></label>
                            </div>
                        </div>
                    </div>
                    
            </div>
            <div class="filter-list">
                <h5 class="filter-title mb-4">By facility</h5>
                                    <div class="row form-group align-items-center">
                        <div class="col-8">
                            Fitness
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="wheelchair875"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="wheelchair875"></label>
                            </div>
                        </div>
                    </div>
                                    <div class="row form-group align-items-center">
                        <div class="col-8">
                            Spa
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="wheelchair876"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="wheelchair876"></label>
                            </div>
                        </div>
                    </div>
                                    <div class="row form-group align-items-center">
                        <div class="col-8">
                            Outdoor pool
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="wheelchair877"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="wheelchair877"></label>
                            </div>
                        </div>
                    </div>
                                    <div class="row form-group align-items-center">
                        <div class="col-8">
                            Indoor pool
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="wheelchair878"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="wheelchair878"></label>
                            </div>
                        </div>
                    </div>
                                    <div class="row form-group align-items-center">
                        <div class="col-8">
                            Kids club
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="wheelchair879"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="wheelchair879"></label>
                            </div>
                        </div>
                    </div>
                                    <div class="row form-group align-items-center">
                        <div class="col-8">
                            Beach
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="wheelchair880"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="wheelchair880"></label>
                            </div>
                        </div>
                    </div>
                                    <div class="row form-group align-items-center">
                        <div class="col-8">
                            Pets
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="wheelchair881"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="wheelchair881"></label>
                            </div>
                        </div>
                    </div>
                                    <div class="row form-group align-items-center">
                        <div class="col-8">
                            Water Spot
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="wheelchair882"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="wheelchair882"></label>
                            </div>
                        </div>
                    </div>
                                    <div class="row form-group align-items-center">
                        <div class="col-8">
                            Diving
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="wheelchair883"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="wheelchair883"></label>
                            </div>
                        </div>
                    </div>
                                    <div class="row form-group align-items-center">
                        <div class="col-8">
                            Golf
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="wheelchair884"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="wheelchair884"></label>
                            </div>
                        </div>
                    </div>
                                    <div class="row form-group align-items-center">
                        <div class="col-8">
                            Ski
                        </div>
                        <div class="col-4">
                            <div class="onoffswitch ml-auto">
                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="wheelchair885"
                                    tabindex="0">
                                <label class="onoffswitch-label" for="wheelchair885"></label>
                            </div>
                        </div>
                    </div>
                            </div>
            <div class="filter-list">
                <h5 class="filter-title mb-4">By Suite type</h5>

                <div class="row form-group align-items-center">
                    <div class="col-8">
                        Hotels with penthouse suites
                    </div>
                    <div class="col-4">
                        <div class="onoffswitch ml-auto">
                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="penthouse"
                                tabindex="0">
                            <label class="onoffswitch-label" for="penthouse"></label>
                        </div>
                    </div>
                </div>
                <div class="row form-group align-items-center">
                    <div class="col-8">
                        Hotels with Appartments
                    </div>
                    <div class="col-4">
                        <div class="onoffswitch ml-auto">
                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="appart"
                                tabindex="0">
                            <label class="onoffswitch-label" for="appart"></label>
                        </div>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col-8">
                        Hotels with Butler
                    </div>
                    <div class="col-4">
                        <div class="onoffswitch ml-auto">
                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="butler"
                                tabindex="0">
                            <label class="onoffswitch-label" for="butler"></label>
                        </div>
                    </div>
                </div>
              
            </div>
        </form>
    </div>
</div><style> 
.col-3.pr-0.text-right {
    display: none;
}


span.total_day {
    margin-left: 263px;
}

.reached {
    margin-left: 116px;
}

h3.total_day.title-second.mb-0 {
    margin-left: 64px;
}

.title-second.mb-0 {
    color: black;
}

.btn-confirm {
    width: 228px;
    text-align: justify;
    float: right;
}

</style>

<div class="sidebar-main" id="priceinfo">
    <!-- <a href="#" class="close-sidebar">
        <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24"
            xmlns="http://www.w3.org/2000/svg">
            <title>Close</title>
            <path
                d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
            </path>
        </svg>
    </a> -->

        <div class="sidebar-scroller">
        <div class="d-flex align-items-center mb-5">
            <a href="#" class="sidebar-back">
                <i class="ico ico-back"></i>
            </a>
            <h3 class="title-second title-line mb-0" data-place="property-name" id="check">
             
          (  <span class='suites-name'>
                        </span>)
            
            Rates      
            
            </h3>
            <a href="#" class="close-sidebar">
            <img src="/uploads/suites_icone/close-icon.svg" class="suites_svg close_icone">
                <!-- <svg fill="currentColor" focusable="false" height="20px" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <title>Close</title>
                    <path d="M10.586 12L3.793 5.206a1 1 0 1 1 1.413-1.413L12 10.586l6.794-6.793a1 1 0 1 1 1.413 1.413L13.414 12l6.793 6.794a1 1 0 1 1-1.413 1.413L12 13.414l-6.794 6.793a1 1 0 1 1-1.413-1.413L10.586 12z">
                    </path>
                </svg> -->
             </a>
        </div>
        <div class="card mb-4">
            <div class="suite-board-header">
                <div class="row align-items-center">
                    <div class="col-2 col---s">
                        <img src="images/car-acc-room-superior-double-inroom-breakfast01_320x266.jpg" class="img-full"
                            alt="" data-place="suite_image">
                    </div>
                    <div class="col">
                        <h3 data-place="suite_category_name"> </h3>
                    </div>
                </div>
            </div>
            <div class="suite-board-body p-5">
                <div class="row m-0 price-lst-table-head">
                    <div class="col-6 pl-0 price-details">
                        <h3 class="price-heading title-second  mb-0">  When :  </h3> 
    
                        <span class="cal-date menu-nav text-menu cal-f  selected-session ">                                Date is not selected
                                                        </span>

                       
                                            </div>
                    <h3 class="col-3 text-right title-second mb-0 ">Euro</h3>
                    <!-- <div class="col-3 pr-0 text-right">ZAR</div> -->
                </div>
              
               
                <div class="row m-0 list-prs">
                    <div class="col-6 pl-0"><a href="#" class="btn-prc-title" data-price="#pr-2">Hotel
                            taxes & fees <span class="arrow-down toup"></span></a></div>
                    <div class="col-3 text-right">  <span id="hotel-tax2">   </span> </div>
                    <div class="col-3 pr-0 text-right"></div>
                    <div class="col-12 sub-price-content active" id="pr-2">
      
                     
                    <div id="subprice"> 
                            
                            </div>
                        
                                        
                    </div>
                </div>


                <div class="row m-0 list-prs">
                    <div class="col-6 pl-0"><a href="#" class="btn-prc-title" data-price="#pr-1">Subtotal for <span id="suite-total-night"> </span> nights <span class="arrow-down toup"></span></a></div>
                    <div class="col-3 text-right"><span id="suite-total-price">  </span></div>
                    <div class="col-3 pr-0 text-right"><span id="suite-total-usd-price"></span></div>
                    <div class="col-12 sub-price-content active" id="pr-1">
                       
                    </div>
                </div>
                       <div class="row m-0 list-prs">
                    <div class="col-6 pl-0"><a href="#" class="btn-prc-title" data-price="#pr-1">Tax (value <span id="tax-value">    </span> % - <span id="tax-city">   </span></span>)  <span id="suite-total-night"></span>  <span class="arrow-down toup"></span></a></div>
                    <div class="col-3 text-right">  <span id="hotel-tax">     </span> </div>
                    <div class="col-3 pr-0 text-right"><span id="suite-total-usd-price"></span></div>
                    <div class="col-12 sub-price-content active" id="pr-1">
                       
                    </div>
                </div>


                <div class="row m-0 list-prs">
                    <div class="col-6 pl-0">Total</div>
                    <div class="col-3 text-right"> <span id="total-tax">   </span> </div>
                    <div class="col-3 pr-0 text-right">R33,202</div>
                </div>
                
              


                <div class="row m-0 mt-2 txt-do">
                <h3 class="booking-policy"  id="check">
                <span class="price-heading"> <b> Booking Policy: </b> </span> 
                </h3>
                    <div class="col-12 pl-0">
                                        <span class="booking_statement">  </span>
                                               

                    </div>
                </div>
                <hr>
                <div class="booking-tearms">
                    <h3> <span class="price-heading"> <b>Terms and Conditions  </b> </span> </h3>
                    <div class="custom-control custom-checkbox mb-5">
                        <input type="checkbox" class="custom-control-input" id="policies43">
                        <label class="custom-control-label" for="policies43">
                            Your reservation is made subject to our
                                                        <a href="https://www.iubenda.com/terms-and-conditions/70156957" class="iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe " title="Terms and Conditions ">Terms and Conditions</a><script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);</script>                                                       <span id="term_condition"> </span> and the
                            specific
                            payment terms (deposit, tax and cancellation) set out above, Please
                            check
                            this box to agree to these terms and proceed with your booking. By
                            confirming your booking, you agree with all provisions of the

                                                        <a href="https://www.iubenda.com/privacy-policy/70156957" class="iubenda-white iubenda-noiframe iubenda-embed iub-legal-only iubenda-noiframe " title="Privacy Policy ">Privacy Policy</a><script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);</script>                                                    </label>
                    </div>
                                        <div class="row mt-4">
                        <div class="col-6">
                                                    </div>
                        <div class="col-6 text-right" data-place="price-book-button">
                           
                                                 not set