description = "Features 8 Section"

[viewBag]
==
<div {% if data.section_features8_id %}id="{{ data.section_features8_id }}"{% endif %} class="features8 py-24 {{ data.section_features8_bg }}">
    <div class="{{ data.section_features8_container }}">
        <!-- Row  -->
        {% if data.section_features8_header or data.section_features8_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_features8_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_features8_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row">
            {% set aos = ['fade-right', 'fade-left'] %}
            {% for fields in data.section_features8 %}
            <!-- Column -->
            <div class="{{ data.section_features8_column }} features8-wrap" {% if data.section_features8_animation %}data-aos="{{ aos[ loop.index0 % 2 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="card mb-7 border-0 shadow-md">
                    <div class="card-body p-10 {% if data.section_features8_align == "left" %}d-flex{% else %}text-center{% endif %}">
                        <div class="pb-5 {% if data.section_features8_align == "left" %}pr-10 my-5{% endif %} align-self-center"><i class="{{ fields.section_features8_icon }} display-1 {{ data.section_features8_icolor }}"></i></div>
                        <div class="align-self-center">
                            <h5 class="font-weight-medium">{{ fields.section_features8_title }}</h5>
                            <p class="mt-5">{{ fields.section_features8_desc }}</p>
                            {% if fields.section_features8_btn_link is not empty %}
                            <a class="btn btn-white btn-sm btn-rounded px-8 btn-chevron" href="{{ fields.section_features8_btn_clink ? fields.section_features8_btn_clink : (fields.section_features8_btn_plink | staticPage) }}">
                                <span class="{{ data.section_features8_icolor }}">{{ fields.section_features8_btn_label }} <i class="{{ data.section_features8_icolor }} {{ fields.section_features8_btn_icon }}"></i></span>
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>