{% load static %}
{% block features %}
<!-- Start Features -->
<section class="section bg-light" id="features">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="text-center title mb-5">
                    <p class="text-muted text-uppercase fw-normal mb-2">Features</p>
                    <h3 class="mb-3">Key features of the product</h3>
                    <div class="title-icon position-relative">
                        <div class="position-relative">
                            <i class="uim uim-arrow-circle-down"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->

        <div class="row align-items-center">
            <div class="col-lg-5 order-2 order-lg-1">
                <div class="mt-4 mt-lg-0">
                    <h4>Improve your Marketing business</h4>
                    <p class="text-muted mt-3">If several languages coalesce, the grammar of the resulting language is more regular.</p>

                    <div>
                        <p class="mb-2 text-muted">
                            <span class="uim-icon-info me-2 align-middle"><i class="uim uim-check-circle"></i></span>Donec vitae sapien ut
                        </p>
                        <p class="mb-2 text-muted">
                            <span class="uim-icon-info me-2 align-middle"><i class="uim uim-check-circle"></i></span>In enim justo, rhoncus imperdiet
                        </p>
                        <p class="text-muted">
                            <span class="uim-icon-info me-2 align-middle"><i class="uim uim-check-circle"></i></span>Maecenas nec odio et
                        </p>
                    </div>
                    <div class="mt-4">
                        <a href="#" class="text-primary">Learn more..</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 ms-lg-auto col-sm-8 order-1 order-lg-2">
                <div>
                    <img src="{% static 'images/features/img-1.jpg' %}" alt="" class="img-fluid mx-auto d-block" />
                </div>
            </div>
        </div>
        <!-- end row -->

        <hr class="my-5" />

        <div class="row align-items-center">
            <div class="col-lg-6 col-sm-8">
                <div class="features-img mt-4">
                    <img src="{% static 'images/features/img-2.jpg' %}" alt="" class="img-fluid mx-auto d-block img-thumbnail" />
                </div>
            </div>

            <div class="col-lg-5 ms-lg-auto">
                <div class="mt-5 mt-lg-4">
                    <h4>Improve your Marketing performance</h4>
                    <p class="text-muted mb-2 mt-3">It will be as simple as in fact, it will be Occidental. To an English person, it will seem like simplified</p>
                    <p class="text-muted">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur velit</p>
                    <div class="mt-4">
                        <a href="#" class="text-primary">Learn more..</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
    <!-- end container -->
</section>
<!-- End Features -->
{% endblock features %}