description = "Features 12 Section"

[viewBag]
==
<div {% if data.section_features12_id %}id="{{ data.section_features12_id }}"{% endif %} class="features12 py-24 {{ data.section_features12_bg }}">
    <div class="{{ data.section_features12_container }}">
        <!-- Row  -->
        {% if data.section_features12_header or data.section_features12_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_features12_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_features12_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row">
            {% set size_1 = data.section_features12_size %}
            {% set size_2 = 12 - size_1 %}
            <!-- Column -->
            <div class="col-lg-{{ size_2 }}">
                <div class="">
                    {% if data.section_features12_title %}<h2 class="mb-7 mt-5">{{ data.section_features12_title }}</h2>{% endif %}
                    {% if data.section_features12_subtitle %}<h4 class="text-muted font-weight-light">{{ data.section_features12_subtitle }}</h4>{% endif %}
                    {% if data.section_features12_desc %}<p class="py-2">{{ data.section_features12_desc }}</p>{% endif %}
                    <div class="row">
                        {% for fields in data.section_features12_list %}
                        <div class="col-md-6 mt-7">
                            {% if fields.section_features12_list_icon %}<i class="{{ fields.section_features12_list_icon }} text-default-gradient display-6"></i>{% endif %}
                            <h5 class="font-weight-medium my-5">
                                {% if fields.section_features12_list_link is empty %}
                                {{ fields.section_features12_list_title }}
                                {% else %}
                                <a href="{{ fields.section_features12_list_clink ? fields.section_features12_list_clink : (fields.section_features12_list_plink | staticPage) }}" class="text-link">{{ fields.section_features12_list_title }}
                                </a>
                                {% endif %}
                            </h5>
                            <p>{{ fields.section_features12_list_desc }}</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <!-- Column -->
            <!-- Column -->
            <div class="col-lg-{{ size_1 }} d-none d-lg-block">
                {% set aos = ['fade-up', 'fade-right', 'fade-right'] %}
                {% set del = ['0', '1000', '3000'] %}
                {% set dur = ['1000', '2000', '3000'] %}
                {% set pos = ['left:20px; bottom:0;', 'left:120px; bottom:30px;', 'left:240px; bottom:60px;'] %}
                {% for fields in data.section_features12_image_item %}
                <img src="{{ fields.section_features12_image|media|resize(450, 650, { mode: 'auto' }) }}" class="position-absolute img-fluid" alt="" {% if data.section_features12_animation %}data-aos="{{ aos[ loop.index0 % 3 ] }}" data-aos-delay="{{ del[ loop.index0 % 3 ] }}" data-aos-duration="{{ dur[ loop.index0 % 3 ] }}" data-aos-easing="linear"{% endif %} style="{{ pos[ loop.index0 % 3 ] }}"
                >
                {% endfor %}
            </div>
            <!-- Column -->
        </div>
    </div>
</div>