description = "Features 20 Section"

[viewBag]
==
<div {% if data.section_features20_id %}id="{{ data.section_features20_id }}"{% endif %} class="features20 py-24 {{ data.section_features20_bg }}">
    <div class="{{ data.section_features20_container }}">
        <!-- Row  -->
        {% if data.section_features20_header or data.section_features20_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_features20_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_features20_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <!-- Row  -->
        <div class="row">
            {% set aos = ['zoom-out-right', 'zoom-out-down', 'zoom-out-left', 'zoom-out-right', 'zoom-out-up', 'zoom-out-left'] %}
            {% for fields in data.section_features20 %}
            <!-- Column -->
            <div class="{{ data.section_features20_column }} {{ data.section_features20_align }} my-7" {% if data.section_features20_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="">
                    <h3 class="text-uppercase position-relative pt-5 pb-4 mb-7">{{ fields.section_features20_title }}
                        <span class="position-absolute w-8r h-1r bg-aqua-gradient pos-b-0 pos-l-0 {{ data.section_features20_align == 'text-center' ? 'pos-r-0 m-auto' }}"></span>
                    </h3>
                    <p>{{ fields.section_features20_desc }}</p>
                    {% if fields.section_features20_btn_link is not empty %}
                    <a href="{{ fields.section_features20_btn_clink ? fields.section_features20_btn_clink : (fields.section_features20_btn_plink | staticPage) }}" class="btn btn-aqua-gradient text-white btn-chevron px-10 mt-5">
                        <span>{{ fields.section_features20_btn_label }} <i class="{{ fields.section_features20_btn_icon }}"></i></span>
                    </a>
                    {% endif %}
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
        <!-- Row  -->
    </div>
</div>