Pricing Style 1
<!--====== PRICING STYLE ONE START ======-->
<section class="pricing-area pricing-one">
   <div class="container">
      <div class="row justify-content-center">
         <div class="col-xxl-6 col-xl-7 col-lg-8">
            <div class="section-title text-center">
               <h2 class="mb-3 fw-bold">Our Pricing</h2>
               <p class="text-lg">
                  Morem ipsum dolor sit amet consectetur, adipisicing elit. Illum
                  quam suscipit distinctio optio, quaerat consequatur labore
                  pariatur rerum.
               </p>
            </div>
         </div>
      </div>
      <div class="row justify-content-center">
         <div class="col-lg-4 col-md-7 col-sm-9">
            <div class="pricing-style-one">
               <div class="pricing-header text-center">
                  <h5 class="sub-title">Basic</h5>
                  <span class="price">$199</span>
                  <h5 class="year">Per year</h5>
               </div>
               <div class="pricing-list">
                  <ul>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Carefully crafted
                        components
                     </li>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Amazing page
                        examples
                     </li>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Super friendly
                        support team
                     </li>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Awesome Support
                     </li>
                  </ul>
               </div>
               <div class="pricing-btn rounded-buttons text-center">
                  <a
                     class="btn primary-btn rounded-full"
                     href="javascript:void(0)"
                     >
                  GET STARTED
                  </a>
               </div>
               <div class="bottom-shape">
                  <svg
                     data-name="Layer 1"
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 350 112.35"
                     >
                     <defs>
                        <style>
                           .color-1 {
                           fill: #2bdbdc;
                           isolation: isolate;
                           }
                           .cls-1 {
                           opacity: 0.1;
                           }
                           .cls-2 {
                           opacity: 0.2;
                           }
                           .cls-3 {
                           opacity: 0.4;
                           }
                           .cls-4 {
                           opacity: 0.6;
                           }
                        </style>
                     </defs>
                     <title>bottom-part1</title>
                     <g>
                        <g data-name="Group 747">
                           <path
                              data-name="Path 294"
                              class="cls-1 color-1"
                              d="M0,24.21c120-55.74,214.32,2.57,267,0S349.18,7.4,349.18,7.4V82.35H0Z"
                              transform="translate(0 0)"
                              />
                           <path
                              data-name="Path 297"
                              class="cls-2 color-1"
                              d="M350,34.21c-120-55.74-214.32,2.57-267,0S.82,17.4.82,17.4V92.35H350Z"
                              transform="translate(0 0)"
                              />
                           <path
                              data-name="Path 296"
                              class="cls-3 color-1"
                              d="M0,44.21c120-55.74,214.32,2.57,267,0S349.18,27.4,349.18,27.4v74.95H0Z"
                              transform="translate(0 0)"
                              />
                           <path
                              data-name="Path 295"
                              class="cls-4 color-1"
                              d="M349.17,54.21c-120-55.74-214.32,2.57-267,0S0,37.4,0,37.4v74.95H349.17Z"
                              transform="translate(0 0)"
                              />
                        </g>
                     </g>
                  </svg>
               </div>
            </div>
            <!-- single pricing -->
         </div>
         <div class="col-lg-4 col-md-7 col-sm-9">
            <div class="pricing-style-one">
               <div class="pricing-header text-center">
                  <h5 class="sub-title">Pro</h5>
                  <span class="price">$399</span>
                  <h5 class="year">Per year</h5>
               </div>
               <div class="pricing-list">
                  <ul>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Carefully crafted
                        components
                     </li>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Amazing page
                        examples
                     </li>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Super friendly
                        support team
                     </li>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Awesome Support
                     </li>
                  </ul>
               </div>
               <div class="pricing-btn rounded-buttons text-center">
                  <a
                     class="btn primary-btn rounded-full"
                     href="javascript:void(0)"
                     >
                  GET STARTED
                  </a>
               </div>
               <div class="bottom-shape">
                  <svg
                     data-name="Layer 1"
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 350 112.35"
                     >
                     <defs>
                        <style>
                           .color-1 {
                           fill: #2bdbdc;
                           isolation: isolate;
                           }
                           .cls-1 {
                           opacity: 0.1;
                           }
                           .cls-2 {
                           opacity: 0.2;
                           }
                           .cls-3 {
                           opacity: 0.4;
                           }
                           .cls-4 {
                           opacity: 0.6;
                           }
                        </style>
                     </defs>
                     <title>bottom-part1</title>
                     <g>
                        <g data-name="Group 747">
                           <path
                              data-name="Path 294"
                              class="cls-1 color-1"
                              d="M0,24.21c120-55.74,214.32,2.57,267,0S349.18,7.4,349.18,7.4V82.35H0Z"
                              transform="translate(0 0)"
                              />
                           <path
                              data-name="Path 297"
                              class="cls-2 color-1"
                              d="M350,34.21c-120-55.74-214.32,2.57-267,0S.82,17.4.82,17.4V92.35H350Z"
                              transform="translate(0 0)"
                              />
                           <path
                              data-name="Path 296"
                              class="cls-3 color-1"
                              d="M0,44.21c120-55.74,214.32,2.57,267,0S349.18,27.4,349.18,27.4v74.95H0Z"
                              transform="translate(0 0)"
                              />
                           <path
                              data-name="Path 295"
                              class="cls-4 color-1"
                              d="M349.17,54.21c-120-55.74-214.32,2.57-267,0S0,37.4,0,37.4v74.95H349.17Z"
                              transform="translate(0 0)"
                              />
                        </g>
                     </g>
                  </svg>
               </div>
            </div>
            <!-- single pricing -->
         </div>
         <div class="col-lg-4 col-md-7 col-sm-9">
            <div class="pricing-style-one">
               <div class="pricing-header text-center">
                  <h5 class="sub-title">Enterprise</h5>
                  <span class="price">$699</span>
                  <h5 class="year">Per year</h5>
               </div>
               <div class="pricing-list">
                  <ul>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Carefully crafted
                        components
                     </li>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Amazing page
                        examples
                     </li>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Super friendly
                        support team
                     </li>
                     <li>
                        <i class="lni lni-checkmark-circle"></i> Awesome Support
                     </li>
                  </ul>
               </div>
               <div class="pricing-btn rounded-buttons text-center">
                  <a
                     class="btn primary-btn rounded-full"
                     href="javascript:void(0)"
                     >
                  GET STARTED
                  </a>
               </div>
               <div class="bottom-shape">
                  <svg
                     data-name="Layer 1"
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 350 112.35"
                     >
                     <defs>
                        <style>
                           .color-1 {
                           fill: #2bdbdc;
                           isolation: isolate;
                           }
                           .cls-1 {
                           opacity: 0.1;
                           }
                           .cls-2 {
                           opacity: 0.2;
                           }
                           .cls-3 {
                           opacity: 0.4;
                           }
                           .cls-4 {
                           opacity: 0.6;
                           }
                        </style>
                     </defs>
                     <title>bottom-part1</title>
                     <g>
                        <g data-name="Group 747">
                           <path
                              data-name="Path 294"
                              class="cls-1 color-1"
                              d="M0,24.21c120-55.74,214.32,2.57,267,0S349.18,7.4,349.18,7.4V82.35H0Z"
                              transform="translate(0 0)"
                              />
                           <path
                              data-name="Path 297"
                              class="cls-2 color-1"
                              d="M350,34.21c-120-55.74-214.32,2.57-267,0S.82,17.4.82,17.4V92.35H350Z"
                              transform="translate(0 0)"
                              />
                           <path
                              data-name="Path 296"
                              class="cls-3 color-1"
                              d="M0,44.21c120-55.74,214.32,2.57,267,0S349.18,27.4,349.18,27.4v74.95H0Z"
                              transform="translate(0 0)"
                              />
                           <path
                              data-name="Path 295"
                              class="cls-4 color-1"
                              d="M349.17,54.21c-120-55.74-214.32,2.57-267,0S0,37.4,0,37.4v74.95H349.17Z"
                              transform="translate(0 0)"
                              />
                        </g>
                     </g>
                  </svg>
               </div>
            </div>
            <!-- single pricing -->
         </div>
      </div>
      <!-- row -->
   </div>
   <!-- container -->
</section>
<!--====== PRICING STYLE ONE ENDS ======-->
/* ===== Buttons Css ===== */
.pricing-style-one .primary-btn {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.pricing-style-one .active.primary-btn, .pricing-style-one .primary-btn:hover, .pricing-style-one .primary-btn:focus {
  background: var(--primary-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.pricing-style-one .deactive.primary-btn {
  background: var(--gray-4);
  color: var(--dark-3);
  pointer-events: none;
}

/*===== PRICING STYLE ONE =====*/
.pricing-one {
  padding: 100px 0;
}

.pricing-style-one {
  box-shadow: var(--shadow-4);
  padding: 45px 30px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--white);
  margin-top: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .pricing-style-one {
    padding: 35px 30px;
  }
}
.pricing-style-one .sub-title {
  font-size: 16px;
  color: var(--black);
  position: relative;
  padding: 6px 20px;
  display: inline-block;
  border: 2px solid var(--primary);
  border-radius: 30px;
}
.pricing-style-one .price {
  display: block;
  font-size: 55px;
  font-weight: 600;
  line-height: 80px;
  margin-top: 25px;
  color: var(--black);
}
@media (max-width: 767px) {
  .pricing-style-one .price {
    font-size: 45px;
    margin-top: 16px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-one .price {
    font-size: 50px;
    margin-top: 20px;
  }
}
.pricing-style-one .year {
  color: var(--dark-3);
  margin-top: 3px;
}
.pricing-style-one .pricing-list {
  margin-top: 40px;
}
.pricing-style-one .pricing-list li {
  color: var(--dark-3);
  margin-top: 16px;
}
.pricing-style-one .pricing-list li i {
  color: var(--primary);
  margin-right: 8px;
}
.pricing-style-one .pricing-btn {
  margin-top: 42px;
}
.pricing-style-one .bottom-shape {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 101%;
  z-index: -1;
}
Pricing Style 3
Pricing Style 7
Pricing Style 15
Pricing Style 8
Pricing Style 13
Pricing Style 4
Pricing Style 10
Pricing Style 11
Pricing Style 9
Pricing Style 5
Pricing Style 6
Pricing Style 12
Pricing Style 2
Pricing Style 14