<section class="pt-28 pb-32 bg-light-light overflow-hidden">
<div class="container">
<div class="mw-md-xl mb-16">
<p class="text-muted mb-4">Flexible Pricing Plan</p>
<h2 class="fs-10 lh-sm mb-0">Everything you need to launch a website</h2>
</div>
<div class="row g-20">
<div class="col-12 col-md-4">
<div class="bg-transparent px-11 py-10 border-end rounded-3">
<h2 class="fs-17 fw-semibold mb-1">Basic</h2>
<p class="fs-19 text-muted mb-5">Best for freelancers</p>
<div class="d-flex mb-9">
<h3 class="position-relative me-1 fs-17 fw-semibold" style="top: 5px;">$</h3>
<h3 class="fs-10 fw-semibold">
<span>29</span>
<span class="fs-17">/ m</span>
</h3>
</div>
<div class="rounded-1 mb-9" style="padding: 2px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
<button class="btn btn-light-light w-100 fs-20 px-9 py-4 text-uppercase" type="button" style="letter-spacing: 1px;">Join now</button>
</div>
<ul class="list-group list-group-flush">
<li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">100GB Cloud Storage</p>
</li>
<li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">10 Email Connection</p>
</li>
<li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">Daily Analytics</p>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-4">
<div class="bg-transparent px-11 py-10 rounded-3">
<h2 class="fs-17 fw-semibold mb-1">Premium</h2>
<p class="fs-19 text-muted mb-5">Best for small agency</p>
<div class="d-flex mb-9">
<h3 class="position-relative me-1 fs-17" style="top: 5px;">$</h3>
<h3 class="fs-10 fw-semibold">
<span>99</span>
<span class="fs-17">/ m</span>
</h3>
</div>
<div class="rounded-1 mb-9" style="padding: 2px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
<button class="btn btn-light-light w-100 fs-20 px-9 py-4 text-uppercase" type="button" style="letter-spacing: 1px;">Join now</button>
</div>
<ul class="list-group list-group-flush">
<li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">500GB Cloud Storage</p>
</li>
<li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">50 Email Connection</p>
</li>
<li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">Daily Analytics</p>
</li>
<li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">Premium Support</p>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-4">
<div class="position-relative bg-white px-11 py-10 rounded-3 shadow-lg">
<h3 class="position-absolute top-0 end-0 mt-2 me-2 d-inline-block bg-light-light rounded-pill px-3 py-2 text-uppercase fs-20" style="letter-spacing: 1px;">Popular choice</h3>
<h2 class="fs-17 fw-semibold mb-1">Enterprise</h2>
<p class="fs-19 text-muted mb-5">Best for large agency</p>
<div class="d-flex mb-9">
<h3 class="position-relative me-1 fs-17" style="top: 5px;">$</h3>
<h3 class="fs-10 fw-semibold">
<span>199</span>
<span class="fs-17">/ m</span>
</h3>
</div>
<div class="rounded-1 mb-9">
<button class="btn btn-light-light w-100 fs-20 px-9 py-4 text-uppercase" type="button" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">Join now</button>
</div>
<ul class="list-group list-group-flush">
<li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">2TB Cloud Storage</p>
</li>
<li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">Unlimited Email Connection</p>
</li>
<li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">Daily Analytics</p>
</li>
<li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
<svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="mb-0">Premium Support</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>