description = "Features 4 Section"

[viewBag]
==
<div {% if data.section_features4_id %}id="{{ data.section_features4_id }}"{% endif %} class="features4 py-24 {{ data.section_features4_bg }}">
    <div class="{{ data.section_features4_container }}">
        <!-- Row  -->
        {% if data.section_features4_header or data.section_features4_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_features4_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_features4_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        {% set size_1 = data.section_features4_size %}
        {% set size_2 = 11 - size_1 %}
        <div class="row">
            <!-- Column -->
            <div class="col-lg-{{ size_2 }} {% if data.section_features4_position == 'order-1' %}order-2{% else %}order-1{% endif %} features4-wrap">
                <div class="row">
                    {% set dur = ['1000', '2000', '3000'] %}
                    {% for fields in data.section_features4_list %}
                    <div class="col-md-12 mb-7" {% if data.section_features4_animation %}data-aos="fade-down" data-aos-duration="{{ dur[ loop.index0 % 3 ] }}"{% endif %}>
                        <div class="d-flex">
                            <div class="align-self-start">
                                <span class="d-flex justify-content-center align-items-center rounded-circle w-24r h-24r display-6 bg-light text-default"><i class="{{ fields.section_features4_list_icon }}"></i></span>
                            </div>
                            <div class="p-5">
                                <h5 class="font-weight-medium">
                                    {% if fields.section_features4_list_link is empty %}
                                    {{ fields.section_features4_list_title }}
                                    {% else %}
                                    <a href="{{ fields.section_features4_list_clink ? fields.section_features4_list_clink : (fields.section_features4_list_plink | staticPage) }}" class="text-link">{{ fields.section_features4_list_title }}
                                        <i class="fa fa-arrow-right ml-3 display-13"></i>
                                    </a>
                                    {% endif %}
                                </h5>
                                <p class="mt-5">{{ fields.section_features4_list_desc }}</p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <!-- Column -->
            <div class="col-lg-{{ size_1 }} {{ data.section_features4_position }} {% if data.section_features4_position == 'order-1' %}mr-auto{% else %}ml-auto{% endif %}">
            {% for fields in data.section_features4_card %}
                <div class="card border-0 mb-12 shadow-md overflow-hidden" {% if data.section_features4_animation %}data-aos="flip-left" data-aos-duration="1200"{% endif %}>
                    {% if fields.section_features4_card_image_item|length == 1  %}
                    {% for images in fields.section_features4_card_image_item %}
                    <img class="card-img-top img-fluid" src="{{ images.section_features4_card_image|media|resize(540, 340, { mode: 'crop' }) }}">
                    {% endfor %}
                    {% else %}
                    <div id="portfolioCarousel-{{ data.section_features4_id }}-{{ fields.section_features4_card_title|slug }}" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            {% for images in fields.section_features4_card_image_item %}
                            <li data-target="#portfolioCarousel-{{ data.section_features4_id }}-{{ fields.section_features4_card_title|slug }}" data-slide-to="{{ loop.index0 }}" {% if loop.index0 == 0 %}class="active"{% endif %}></li>
                            {% endfor %}
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            {% for images in fields.section_features4_card_image_item %}
                            <div class="carousel-item {% if loop.first %}active{% endif %}">
                                <img src="{{ images.section_features4_card_image|media|resize(540, 340, { mode: 'crop' }) }}" class="d-block w-100" alt="{{ fields.section_features4_card_title }}">
                            </div>
                            {% endfor %}
                        </div>
                        <a class="carousel-control-prev" href="#portfolioCarousel-{{ data.section_features4_id }}-{{ fields.section_features4_card_title|slug }}" role="button" data-slide="prev">
                            <span class="fa fa-angle-left icon-prev" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#portfolioCarousel-{{ data.section_features4_id }}-{{ fields.section_features4_card_title|slug }}" role="button" data-slide="next">
                            <span class="fa fa-angle-right icon-next" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    {% endif %}
                    <div class="card-body p-10 position-relative">
                        <h4 class=" font-weight-light">{{ fields.section_features4_card_title }}</h4>
                        <div class="mt-7 font-weight-medium">{{ fields.section_features4_card_desc|raw }}</div>
                        {% if fields.section_features4_card_link is not empty %}
                        <a class="btn btn-danger btn-rounded btn-lg btn-chevron text-white mt-4" href="{{ fields.section_features4_card_clink ? fields.section_features4_card_clink : (fields.section_features4_card_plink | staticPage) }}">
                            <span>{{ fields.section_features4_card_label }}<i class="{{ fields.section_features4_card_icon }}"></i></span>
                        </a>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
            </div>
            <!-- Column -->
        </div>
    </div>
</div>