description = "Features 9 Section"

[viewBag]
==
{% set size_1 = data.section_features9_size %}
{% set size_2 = 12 - size_1 %}
<div {% if data.section_features9_id %}id="{{ data.section_features9_id }}"{% endif %} class="features9 py-24 {{ data.section_features9_bg }}">
    <div class="{{ data.section_features9_container }}">
        <!-- Row  -->
        {% if data.section_features9_header or data.section_features9_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_features9_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_features9_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <!-- Row -->
        <div class="row align-items-center">
            <!-- Column -->
            <div class="col-lg-{{ size_2 }} mb-lg-0 mb-8 {% if data.section_features9_position == 'order-1' %}order-2{% else %}order-1{% endif %}">
                {% if data.section_features9_pretitle %}<small class="text-default">{{ data.section_features9_pretitle }}</small>{% endif %}
                {% if data.section_features9_title %}<h2>{{ data.section_features9_title }}</h2>{% endif %}
                {% if data.section_features9_subtitle %}<h3 class="text-muted font-weight-light">{{ data.section_features9_subtitle }}</h3>{% endif %}
                {% if data.section_features9_desc %}<p>{{ data.section_features9_desc }}</p>{% endif %}
                <div class="row">
                    <div class="col-md-6">
                        {% if data.section_features9_llist %}
                        <ul class="list-unstyled mb-7">
                            {% for fields in data.section_features9_llist %}
                            <li class="py-2"><i class="{{ fields.section_features9_llist_icon }} mr-2 text-default"></i> <span class="text-dark">{{ fields.section_features9_llist_title }}</span></li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        {% if data.section_features9_rlist %}
                        <ul class="list-unstyled mb-7">
                            {% for fields in data.section_features9_rlist %}
                            <li class="py-2"><i class="{{ fields.section_features9_rlist_icon }} mr-2 text-default"></i> <span class="text-dark">{{ fields.section_features9_rlist_title }}</span></li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
                </div>
                {% if data.section_features9_btn_link is not empty %}
                <a class="btn btn-red-gradient btn-lg btn-rounded px-12 text-white btn-chevron" href="{{ data.section_features9_btn_clink ? data.section_features9_btn_clink : (data.section_features9_btn_plink | staticPage) }}">
                    <span>{{ data.section_features9_btn_label }} <i class="{{ data.section_features9_btn_icon }}"></i></span>
                </a>
                {% endif %}
            </div>
            <!-- Column -->
            <div class="col-lg-{{ size_1 }} {{ data.section_features9_position }}">
                <div class="p-5" {% if data.section_features9_animation %}data-aos="flip-right" data-aos-duration="1200"{% endif %}>
                    <img src="{{ data.section_features9_image|media|resize(600, 480, { mode: 'crop' }) }}" alt="{{ data.section_features9_title }}" class="shadow-md w-100 img-fluid img-shadow" />
                </div>
            </div>
        </div>
        <!-- Row -->
    </div>
</div>