description = "Features 16 Section"

[viewBag]
==
<div {% if data.section_features16_id %}id="{{ data.section_features16_id }}"{% endif %} class="features16 py-24 {{ data.section_features16_bg }}">
    <div class="{{ data.section_features16_container }}">
        <!-- Row  -->
        {% if data.section_features16_header or data.section_features16_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_features16_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_features16_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row align-items-center">

            {% set size_1 = data.section_features16_size %}
            {% set size_2 = 12 - size_1 %}
            {% for fields in data.section_features16 %}
            {% if fields.section_features16_type == 'list' %}
            <!-- column  -->
            <div class="col-lg-4">
                <div class="card-body">
                    {% set dur = ['1000', '2000', '3000'] %}
                    {% for list in fields.section_features16_list %}
                    <!-- column  -->
                    <div class="d-flex mb-10" {% if data.section_features16_animation %}data-aos="fade-down" data-aos-duration="{{ dur[ loop.index0 % 3 ] }}"{% endif %}>
                        {% if fields.section_features16_list_align == "text-left" %}
                        <div class="align-self-start display-6 mr-5">
                            <i class="{{ list.section_features16_list_icon }} text-default-gradient"></i>
                        </div>
                        {% endif %}
                        <div class="{{ fields.section_features16_list_align }}">
                            <h4>
                            {% if list.section_features16_list_link is empty %}
                            {{ list.section_features16_list_title }}
                            {% else %}
                            <a href="{{ list.section_features16_list_clink ? list.section_features16_list_clink : (list.section_features16_list_plink | staticPage) }}" class="text-link">{{ list.section_features16_list_title }}
                            </a>
                            {% endif %}
                            </h4>
                            <h6 class="text-body line-height-normal">{{ list.section_features16_list_desc }}</h6>
                        </div>
                        {% if fields.section_features16_list_align == "text-right" %}
                        <div class="align-self-start display-6 {{ fields.section_features16_list_align == "text-left" ? 'mr-5' : 'ml-5' }}">
                            <i class="{{ list.section_features16_list_icon }} text-default-gradient"></i>
                        </div>
                        {% endif %}
                    </div>
                    <!-- column  -->
                    {% endfor %}
                </div>
            </div>
            <!-- column  -->
            {% endif %}
            {% if fields.section_features16_type == 'image' %}
            <!-- column  -->
            <div class="col-lg-4 text-center">
                <img src="{{ fields.section_features16_image|media|resize(450, 650, { mode: 'crop' }) }}" class="img-fluid" {% if data.section_features16_animation %}data-aos="fade-up" data-aos-duration="1800" data-aos-easing="linear"{% endif %} alt="" />
            </div>
            <!-- column  -->
            {% endif %}
            {% endfor %}
        </div>
    </div>
</div>