description = "Features 3 Section"

[viewBag]
==
<div {% if data.section_features3_id %}id="{{ data.section_features3_id }}"{% endif %} class="features3 py-24 {{ data.section_features3_bg }}">
    <div class="{{ data.section_features3_container }}">
        <!-- Row  -->
        {% if data.section_features3_header or data.section_features3_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_features3_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_features3_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        {% for fields in data.section_features3 %}
        {% set size_1 = fields.section_features3_size %}
        {% set size_2 = 12 - size_1 %}
        <div class="row features3-wrap align-items-center {% if loop.last is empty %}mb-10 pb-7{% endif %}">
            <div class="col-md-{{ size_2 }} {% if fields.section_features3_position == 'order-1' %}order-2 pl-10{% else %}order-1 pr-10{% endif %}" {% if data.section_features3_animation %}data-aos="fade-left" data-aos-duration="1200"{% endif %}>
                <div class="p-5">
                    <h2 class="title mt-5">{{ fields.section_features3_title }}</h2>
                    <div class="mt-7">{{ fields.section_features3_desc|raw }}</div>
                    {% if fields.section_features3_btn_link is not empty %}
                    <a class="btn btn-red-gradient btn-rounded px-10 text-white btn-chevron" href="{{ fields.section_features3_btn_clink ? fields.section_features3_btn_clink : (fields.section_features3_btn_plink | staticPage) }}">
                        <span>{{ fields.section_features3_btn_label }} <i class="{{ fields.section_features3_btn_icon }}"></i></span>
                    </a>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-{{ size_1 }} {{ fields.section_features3_position }} {% if data.section_features3_parallax %}jarallax-keep-img{% endif %}" {% if data.section_features3_animation %}data-aos="fade-right" data-aos-duration="1200"{% endif %}>
                <img class="img-fluid w-100 jarallax-img" src="{{ fields.section_features3_image|media|resize(650, 460, { mode: 'crop' }) }}">
            </div>
        </div>
        {% endfor %}
    </div>
</div>