<!--Hero pricing-->
  <section class="position-relative bg-shade-primary">
  <!--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>
  <!--Container-->
  <div class="container pt-12 pb-9 pb-lg-11 pt-lg-14 position-relative z-index-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">
             <!--Hero heading-->
             <h1 class="display-2 mb-4">An exceptional service at the valid price</h1>
             <!--Hero 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-6x height-6x shadow flex-center bg-white mx-auto mx-lg-0 text-dark rounded-circle text-center">
              <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-secondary bg-opacity-25 text-white shadow-lg z-index-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-index-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-muted"></i>
              30 Days free trail
             </li>
             <li class="mb-3"><i class="bx bx-check-circle me-2 text-muted"></i>
              No credit card require
             </li>
             <li class="mb-3"><i class="bx bx-check-circle me-2 text-muted"></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-muted"><strong>$9 Per month</strong> after the end
            of 30 days free trail
           <a href="#" class="link-decoration text-white">More about pricing</a>
           </p>
       </div>
     </div>
    </div>
   </div>
  </div>
  <!--/.content-->
</section>
<!--/.Hero end-->