description = "Features 10 Section"

[viewBag]
==
<div {% if data.section_features10_id %}id="{{ data.section_features10_id }}"{% endif %} class="features10 py-24 {{ data.section_features10_bg }}">
    <div class="{{ data.section_features10_container }}">
        <!-- Row  -->
        {% if data.section_features10_header or data.section_features10_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_features10_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_features10_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row features10-wrap">
            {% set aos = ['fade-right', 'fade-left'] %}
            {% for fields in data.section_features10 %}
            <!-- Column  -->
            <div class="{{ data.section_features10_column }}" {% if data.section_features10_animation %}data-aos="{{ aos[ loop.index0 % 2 ] }}" data-aos-duration="1200"{% endif %}>
                <!-- card  -->
                <div class="card mb-7 border-0 shadow-md overflow-hidden">
                    <div class="row">
                        <div class="col-md-5 bg-cover min-h-xxs" style="background-image:url({{ fields.section_features10_image|media|resize(300, 260, { mode: 'crop' }) }})">
                            {% if fields.section_features10_icon %}
                            <div class="d-none d-md-flex justify-content-center align-items-center position-absolute rounded-circle w-16r h-16r pos-r-8n pos-t-10 display-7 {{ data.section_features10_ibg }}">
                                <i class="{{ data.section_features10_icolor }} {{ fields.section_features10_icon }}"></i>
                            </div>
                            {% endif %}
                        </div>
                        <div class="col-md-7">
                            <div class="card-body p-10">
                                <h4 class="font-weight-medium">
                                {% if fields.section_features10_link is empty %}
                                {{ fields.section_features10_title }}
                                {% else %}
                                <a href="{{ fields.section_features10_clink ? fields.section_features10_clink : (fields.section_features10_plink | staticPage) }}" class="text-link">{{ fields.section_features10_title }} <i class="fa fa-chevron-right ml-3 display-13"></i></a>
                                {% endif %}
                                </h4>
                                <p>{{ fields.section_features10_desc }}</p>
                                {% if fields.section_features10_btn_link is not empty %}
                                <a class="btn btn-white btn-sm btn-rounded px-8 btn-chevron" href="{{ fields.section_features10_btn_clink ? fields.section_features10_btn_clink : (fields.section_features10_btn_plink | staticPage) }}">
                                    <span class="{{ data.section_features10_icolor }}">{{ fields.section_features10_btn_label }} <i class="{{ data.section_features10_icolor }} {{ fields.section_features10_btn_icon }}"></i></span>
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column  -->
            {% endfor %}
        </div>
    </div>
</div>