{% load static %}
{% block pricing %}
 <!-- Start pricing -->
 <section class="section bg-light" id="pricing">
    <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">Plan</p>
                    <h3 class="mb-3">Our Pricing</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 pb-4">
            <div class="col-lg-4 col-md-6">
                <div class="card plan-box text-center p-2">
                    <div class="card-body">
                        <div class="icons-xl pt-4">
                            <i class="uim uim-box"></i>
                        </div>
                        <h4 class="mt-4">Economy</h4>

                        <div class="plan-features text-muted mt-5">
                            <p>Storage : <span class="text-info fw-semibold">10 GB</span></p>
                            <p>Bandwidth : <span class="text-info fw-semibold">500 GB</span></p>
                            <p>Domain : <span class="text-info fw-semibold">No</span></p>
                            <p>Support : <span class="text-info fw-semibold">No</span></p>
                        </div>

                        <div class="mt-5">
                            <h3>
                                <sup><small>$</small></sup>19 / <span class="font-16 text-muted">Month</span>
                            </h3>
                            <div class="mt-4 mb-4">
                                <a href="#" class="btn btn-info btn-block">Join now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card plan-box text-center p-2">
                    <div class="card-body">
                        <div>
                            <div class="icons-xl pt-4">
                                <i class="uim uim-rocket"></i>
                            </div>
                            <h4 class="mt-4">Premium</h4>

                            <div class="plan-features text-muted mt-5">
                                <p>Storage : <span class="text-info fw-semibold">20 GB</span></p>
                                <p>Bandwidth : <span class="text-info fw-semibold">800 GB</span></p>
                                <p>Domain : <span class="text-info fw-semibold">Yes</span></p>
                                <p>Support : <span class="text-info fw-semibold">Yes</span></p>
                            </div>

                            <div class="mt-5">
                                <h3>
                                    <sup><small>$</small></sup>29 / <span class="font-16 text-muted">Month</span>
                                </h3>
                                <div class="mt-4 mb-4">
                                    <a href="#" class="btn btn-info btn-block">Join now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card plan-box text-center p-2">
                    <div class="card-body">
                        <div>
                            <div class="icons-xl pt-4">
                                <i class="uim uim-user-md"></i>
                            </div>
                            <h4 class="mt-4">Developer</h4>

                            <div class="plan-features text-muted mt-5">
                                <p>Storage : <span class="text-info fw-semibold">30 GB</span></p>
                                <p>Bandwidth : <span class="text-info fw-semibold">Unlimited</span></p>
                                <p>Domain : <span class="text-info fw-semibold">Yes</span></p>
                                <p>Support : <span class="text-info fw-semibold">Yes</span></p>
                            </div>

                            <div class="mt-5">
                                <h3>
                                    <sup><small>$</small></sup>39 / <span class="font-16 text-muted">Month</span>
                                </h3>
                                <div class="mt-4 mb-4">
                                    <a href="#" class="btn btn-info btn-block">Join now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end plans row -->

        <!-- start faq -->
        <div class="row mb-5 pb-4">
            <div class="col-lg-6 col-md-6">
                <div class="mt-5 d-flex">
                    <div class="me-3">
                        <div class="avatar-title rounded-circle bg-soft-primary avatar-md text-primary">
                            <i class="mdi mdi-help"></i>
                        </div>
                    </div>

                    <div>
                        <h5 class="font-18 mt-1">What is Lorem Ipsum ?</h5>
                        <p class="text-muted">If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual</p>
                    </div>
                </div>

                <div class="mt-4 d-flex">
                    <div class="me-3">
                        <div class="avatar-title rounded-circle bg-soft-primary avatar-md text-primary">
                            <i class="mdi mdi-help"></i>
                        </div>
                    </div>

                    <div>
                        <h5 class="font-18 mt-1">Why do we use it ?</h5>
                        <p class="text-muted">For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-md-6">
                <div class="mt-sm-5 mt-4 d-flex">
                    <div class="me-3">
                        <div class="avatar-title rounded-circle bg-soft-primary avatar-md text-primary">
                            <i class="mdi mdi-help"></i>
                        </div>
                    </div>

                    <div>
                        <h5 class="font-18 mt-1">Where does it come from ?</h5>
                        <p class="text-muted">To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.</p>
                    </div>
                </div>

                <div class="mt-4 d-flex">
                    <div class="me-3">
                        <div class="avatar-title rounded-circle bg-soft-primary avatar-md text-primary">
                            <i class="mdi mdi-help"></i>
                        </div>
                    </div>

                    <div>
                        <h5 class="font-18 mt-1">Where can I get some ?</h5>
                        <p class="text-muted">It will be as simple as in fact, it will be Occidental. To it will seem like simplified English as a skeptical</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- end faq row -->
    </div>
    <!-- end container -->
</section>
<!-- end pricing -->
{% endblock pricing %}