[viewBag]
==
<!-- destinations-area start here -->
   <section class="destinations-area collections-area lightbg">
      <div class="container">
        {% if backendLoggedIn and editMode %}
        <a style="position:relative;top:0;left:0;border-radius:0;z-index:10000000;width:150px;" class="btn btn-success btn-sm" href="{{ url('/') }}{{ backendUri }}/webmors/webconfig/newpages/update/3" role="button" target="_blank">Edit destinations text</a>
        {% endif %}
         <div class="collections-content text-center">
            <h3 class="h3-text wow fadeInUp">Experience our</h3>
            <h2 class="h2-text wow fadeInUp" style="color: #218ABD;">Destinations</h2>
            <p class="wow fadeInUp">{{ pageDetail.home_services_text|raw }}</p>
         </div>
        {% for product in products %}
        {% set colCounter = loop.index %}
        {% if backendLoggedIn and editMode %}
        <a style="position:relative;top:0;left:0;border-radius:0;z-index:10000000;width:150px;" class="btn btn-success btn-sm" href="{{ url('/') }}{{ backendUri }}/webmors/catalog/products/update/{{ product.id }}" role="button" target="_blank">Edit destination</a>
        {% endif %}
         <div class="row">
            <div class="collection-image-div collection-image-div2 wow col-md-3 col-12 p-3 {% if colCounter % 2 %} destination-rounded-div fadeInLeft {% else %} rounded-div2 fadeInUp order-1 order-md-4 {% endif %}">
                {% set sectionFirst = product.sections|first %}
                {% for section in product.sections if section.tabsection.sectionslug == 'overview' %}
                    {% set sectionFirst = section %}
                {% endfor %}
                <a href="{{ 'travel'|page( {catslug:product.category.catslug, slug:product.slug, contentslug:sectionFirst.contentslug} ) }}">
                    <img class="w-100" noresize src="{{ product.preview_image|media }}" alt="image">
                    <h2 class="collection-h2 UberMove-medium">{{ product.title }}</h2>
                </a>
            </div>
            {% for previewtabs in product.features_repeater %}
            <div class="collection-image-div collection-image-div2 overlay wow fadeInUp col-md-3 col-12 p-3 {% if colCounter % 2 %} fadeInLeft {% else %} order-{{ loop.index+1 }} order-md-{{ 4-loop.index }} {% endif %}">
                <a href="{{ 'travel'|page( {catslug:product.category.catslug, slug:product.slug, contentslug:previewtabs.prevsection} ) }}">
                    <img class="w-100" noresize src="{{ previewtabs.image|media }}" alt="{{ previewtabs.title }}">
                    <h4 class="collection-h4">{{ previewtabs.title }}</h4>
                </a>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
      </div>
   </section>