<!--::Start Hero Pricing::-->
    <section class="position-relative bg-dark">
        <!--:Gradient background vector:-->
        <svg class="position-absolute opacity-75 satrt-0 top-0 w-100 h-100" xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="none" viewBox="0 0 700 700" width="700" height="700" opacity="1">
            <defs>
                <linearGradient gradientTransform="rotate(136, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%"
                    id="ffflux-gradient">
                    <stop stop-color="hsl(347, 100%, 72%)" stop-opacity="1" offset="0%"></stop>
                    <stop stop-color="hsl(227, 100%, 50%)" stop-opacity="1" offset="100%"></stop>
                </linearGradient>
                <filter id="ffflux-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox"
                    primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feTurbulence type="fractalNoise" baseFrequency="0.006 0.004" numOctaves="2" seed="2"
                        stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence>
                    <feGaussianBlur stdDeviation="0 0" x="0%" y="0%" width="100%" height="100%" in="turbulence"
                        edgeMode="duplicate" result="blur"></feGaussianBlur>
                    <feBlend mode="hard-light" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" in2="blur"
                        result="blend"></feBlend>
                    <feColorMatrix type="saturate" values="3" x="0%" y="0%" width="100%" height="100%" in="blend"
                        result="colormatrix"></feColorMatrix>
                </filter>
            </defs>
            <rect width="700" height="700" fill="url(#ffflux-gradient)" filter="url(#ffflux-filter)"></rect>
        </svg>
    
        <div class="container pt-12 pb-9 pb-lg-11 pt-lg-14 position-relative z-1">
            <div class="row align-items-center justify-content-between">
                <div class="col-md-7 mb-md-0 mb-7 text-white text-center text-lg-start">
                    <!--:Heading:-->
                    <h1 class="display-3 mb-4">An exceptional service at the valid price</h1>
                    <!--:Subheading:-->
                    <p class="col-lg-10 lead mb-5">
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                        mollit anim id est laborum.
                    </p>
                    <!--:Scroll down animated button:-->
                    <a href="#next"
                        class="width-7x height-7x flex-center btn p-0 btn-outline-white btn-circle-ripple mx-auto mx-lg-0 rounded-circle">
                        <div class="link-arrow-bounce">
                            <i class="bx bx-chevron-down"></i>
                        </div>
                    </a>
                </div>
                <div class="col-md-5 col-xl-4">
                    <div class="p-4 p-lg-5 rounded-3 bg-dark bg-opacity-10 text-white shadow-lg z-1 position-relative">
                        <!--:Pricing card background:-->
                        <div class="position-absolute start-0 top-0 w-100 h-100 bg-gradient-dark opacity-50 rounded-3">
                        </div>
                        <div class="position-relative z-1">
                            <!--Plan type-->
                            <h5>Free</h5>
                            <!--Plan price-->
                            <h1 class="display-2 mb-0"><small>$</small>0</h1>
                            <!--Plan features list-->
                            <ul class="list-unstyled py-4 mb-0">
                                <li class=" mb-3"><i class="bx bx-check-circle me-2 text-white-50"></i>
                                    30 Days free trail
                                </li>
                                <li class=" mb-3"><i class="bx bx-check-circle me-2 text-white-50"></i>
                                    No credit card require
                                </li>
                                <li class=" mb-3"><i class="bx bx-check-circle me-2 text-white-50"></i>
                                    Cancel anytime
                                </li>
                            </ul>
                            <!--Plan action button-->
                            <div class="d-grid mb-3">
                                <a href="#" class="btn btn-lg btn-primary">Start 30 days trail</a>
                            </div>
                            <!--Plan info text-->
                            <p class="mb-0 small text-white-50"><strong>$9 Per month</strong> after the end
                                of 30 days free trail
                                <a href="#" class="link-decoration">More about pricing</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/.content-->
    </section>
    <!--::/end Hero Pricing::-->