description = "Features 1 Section"

[viewBag]
==
<div {% if data.section_features1_id %}id="{{ data.section_features1_id }}"{% endif %} class="features1 py-24 {{ data.section_features1_bg }}">
    <div class="{{ data.section_features1_container }}">
        <!-- Row  -->
        {% if data.section_features1_header or data.section_features1_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_features1_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_features1_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row">
            {% set aos = ['fade-right', 'fade-left'] %}
            {% set border = ['border-b-1 border-r-1 border-black-10', 'border-b-1 border-black-10'] %}
            {% for fields in data.section_features1 %}
            <!-- Column -->
            {% set counter = loop.length - 1 %}
            <div class="col-md-6 features1-wrap {{ border[ loop.index0 % 2 ] }} {% if (loop.index == counter) or loop.last %}border-bottom-0{% endif %}">
                <div class="card border-0 my-4" {% if data.section_features1_animation %}data-aos="{{ aos[ loop.index0 % 2 ] }}" data-aos-duration="1200"{% endif %}>
                    <div class="card-body px-10 pt-10 pb-0 {% if data.section_features1_align == "left" %}d-flex{% else %}text-center{% endif %}">
                        {% if fields.section_features1_icon %}
                        <div class="pb-5 {% if data.section_features1_align == "left" %}pr-10 my-5{% endif %} align-self-center">
                            <i class="{{ fields.section_features1_icon }} display-7 text-default"></i>
                        </div>
                        {% endif %}
                        <div class="align-self-center">
                            <h5 class="font-weight-medium">
                                {% if fields.section_features1_link is empty %}
                                {{ fields.section_features1_title }}
                                {% else %}
                                <a href="{{ fields.section_features1_clink ? fields.section_features1_clink : (fields.section_features1_plink | staticPage) }}" class="text-link">{{ fields.section_features1_title }}</a>
                                {% endif %}
                            </h5>
                            <p class="mt-5">{{ fields.section_features1_desc }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>