description = "Features 6 Section"

[viewBag]
==
<div {% if data.section_features6_id %}id="{{ data.section_features6_id }}"{% endif %} class="features6 py-24 {{ data.section_features6_bg }}">
    <div class="{{ data.section_features6_container }}">
        <!-- Row  -->
        {% if data.section_features6_header or data.section_features6_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_features6_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_features6_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row">
            {% set size_1 = data.section_features6_size %}
            {% set size_2 = 12 - size_1 %}
            <!-- Column -->
            <div class="col-lg-{{ size_2 }} mb-7 {% if data.section_features6_position == 'order-1' %}order-2{% else %}order-1{% endif %}">
                {% if data.section_features6_title %}<h2 class="mb-7 mt-5">{{ data.section_features6_title }}</h2>{% endif %}
                {% if data.section_features6_subtitle %}<h4 class="text-muted font-weight-light">{{ data.section_features6_subtitle }}</h4>{% endif %}
                {% if data.section_features6_desc %}<p class="py-2">{{ data.section_features6_desc }}</p>{% endif %}
                <div class="row">
                    {% for fields in data.section_features6_list %}
                    <div class="col-md-6 mt-7">
                        {% if fields.section_features6_list_icon %}<i class="{{ fields.section_features6_list_icon }} text-purple-gradient display-6"></i>{% endif %}
                        <h5 class="font-weight-medium my-5">
                            {% if fields.section_features6_list_link is empty %}
                            {{ fields.section_features6_list_title }}
                            {% else %}
                            <a href="{{ fields.section_features6_list_clink ? fields.section_features6_list_clink : (fields.section_features6_list_plink | staticPage) }}" class="text-link">{{ fields.section_features6_list_title }}
                            </a>
                            {% endif %}
                        </h5>
                        <p>{{ fields.section_features6_list_desc }}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="col-lg-{{ size_1 }} {{ data.section_features6_position }}">
                <div class="row features6-wrap position-relative">
                    {% set aos = ['fade-down', 'fade-left', 'fade-right', 'fade-up'] %}
                    <div class="col-md-6 col-sm-6">
                        <div class="row">
                            {% for fields in data.section_features6_images %}
                            {% if loop.revindex0 % 2 %}
                            <div class="col-md-12 mb-7" {% if data.section_features6_animation %}data-aos="{{ aos[ loop.index0 % 4 ] }}" data-aos-duration="1200"{% endif %}>
                                <img class="rounded shadow-md img-fluid w-100" src="{{ fields.section_features6_image|media|resize(350, 380, { mode: 'crop' }) }}">
                            </div>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 mt-24">
                        <div class="row">
                            {% for fields in data.section_features6_images %}
                            {% if loop.index0 % 2 %}
                            <div class="col-md-12 mb-7" {% if data.section_features6_animation %}data-aos="{{ aos[ loop.index0 % 4 ] }}" data-aos-duration="1200"{% endif %}>
                                <img class="rounded shadow-md img-fluid w-100" src="{{ fields.section_features6_image|media|resize(350, 420, { mode: 'crop' }) }}">
                            </div>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>