description = "Features 14 Section"

[viewBag]
==
<div {% if data.section_features14_id %}id="{{ data.section_features14_id }}"{% endif %} class="features14 pt-24 {{ data.section_features14_bspace ? 'pb-24' }} {{ data.section_features14_bg }}">
    <div class="{{ data.section_features14_container }}">
        <!-- Row  -->
        {% if data.section_features14_header or data.section_features14_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="title {{ data.section_features14_bg != 'bg-white' ? 'text-white' : 'text-dark' }}">{{ data.section_features14_header }}</h2>
                <h6 class="subtitle {{ data.section_features14_bg != 'bg-white' ? 'text-white' : 'text-body' }}">{{ data.section_features14_subheader }}</h6>
                {% for fields in data.section_features14_btn %}
                <a class="btn {{ data.section_features14_bg != 'bg-white' ? 'btn-outline-white' : 'btn-outline-dark' }} btn-rounded mt-5 mr-2" href="{{ fields.section_features14_btn_clink ? fields.section_features14_btn_clink : (fields.section_features14_btn_plink | staticPage) }}">
                    <span>{{ fields.section_features14_btn_label }}<i class="{{ fields.section_features14_btn_icon }} ml-2"></i></span>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row no-gutters align-items-center features14-wrap {{ data.section_features14_bg != 'bg-white' ? 'text-white' : 'text-dark' }}">
            {% for fields in data.section_features14 %}
            {% if fields.section_features14_type == 'text' %}
            <!-- Column -->
            <div class="{{ data.section_features14_column }} {{ data.section_features14_align }} my-7">
                <div class="p4">
                    <i class="{{ fields.section_features14_text_icon }} display-6"></i>
                    <h5 class="title {{ data.section_features14_bg != 'bg-white' ? 'text-white' : 'text-dark' }} mt-4">{{ fields.section_features14_text_title }}</h5>
                    <p>{{ fields.section_features14_text_desc }}</p>
                </div>
            </div>
            <!-- Column -->
            {% endif %}
            {% if fields.section_features14_type == 'image' %}
            <!-- Column -->
            <div class="{{ data.section_features14_column }}" {% if data.section_features14_animation %}data-aos="fade-up" data-aos-duration="1800" data-aos-easing="linear"{% endif %}>
                <img src="{{ fields.section_features14_image|media|resize(400, 400, { mode: 'crop' }) }}" class="img-fluid w-100" alt="" />
            </div>
            <!-- Column -->
            {% endif %}
            {% endfor %}
        </div>
        <!-- Row -->
    </div>
</div>