<section class="pt-32 pb-44 bg-secondary-dark">
<div class="container mx-auto">
<div class="text-center mb-24">
<h2 class="text-white mb-14">Choose a plan</h2>
<p class="text-secondary-light mb-0">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<div class="row align-items-center">
<div class="col-12 col-xl-4 mb-6 mb-xl-0">
<div class="mw-md mx-auto pt-12 px-6 px-md-8 pb-16 rounded bg-secondary">
<div class="px-2 pb-6 mb-12 border-bottom">
<div class="d-flex align-items-end justify-content-between">
<h4 class="text-white mb-0">Free</h4>
<p class="h5 fw-bold text-white mb-0">$0,00</p>
</div>
</div>
<ul class="mb-20">
<li class="d-flex align-items-center mb-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
<span class="ms-6 text-white">Complete files</span>
</li>
<li class="d-flex align-items-center mb-5">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
<span class="ms-6 text-white">10GB cloud storage</span>
</li>
<li class="d-flex align-items-center">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
<span class="ms-6 text-white">5 team members</span>
</li>
</ul>
<div class="text-center"><a class="btn btn-outline-light" href="#">Try free</a></div>
</div>
</div>
<div class="col-12 col-xl-4 mb-6 mb-xl-0">
<div class="mw-md mx-auto pt-12 px-6 px-md-8 pb-16 bg-primary rounded-3">
<div class="px-2 pb-6 mb-12 border-bottom">
<div class="d-flex align-items-end justify-content-between">
<h4 class="text-white mb-0">Team</h4>
<p class="h5 fw-bold text-white mb-0">$9,90</p>
</div>
</div>
<ul class="mb-20">
<li class="d-flex align-items-center mb-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
<span class="ms-6 text-white">Complete files</span>
</li>
<li class="d-flex align-items-center mb-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
<span class="ms-6 text-white">10GB cloud storage</span>
</li>
<li class="d-flex align-items-center mb-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
<span class="ms-6 text-white">20 team members</span>
</li>
<li class="d-flex align-items-center mb-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
<span class="ms-6 text-white">Unlimited anonymous editors</span>
</li>
<li class="d-flex align-items-center">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
<span class="ms-6 text-white">10GB cloud storage</span>
</li>
</ul>
<div class="text-center"><a class="btn btn-outline-light" href="#">Buy now</a></div>
</div>
</div>
<div class="col-12 col-xl-4">
<div class="mw-md mx-auto pt-12 px-6 px-md-8 pb-16 rounded bg-secondary">
<div class="px-2 pb-6 mb-12 border-bottom">
<div class="d-flex align-items-end justify-content-between">
<h4 class="text-white mb-0">Premium</h4>
<p class="h5 fw-bold text-white mb-0">$29,90</p>
</div>
</div>
<ul class="mb-20">
<li class="d-flex align-items-center mb-6">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
<span class="ms-6 text-white">Complete files</span>
</li>
<li class="d-flex align-items-center mb-5">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
<span class="ms-6 text-white">10GB cloud storage</span>
</li>
<li class="d-flex align-items-center">
<svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
</svg>
<span class="ms-6 text-white">5 team members</span>
</li>
</ul>
<div class="text-center"><a class="btn btn-outline-light" href="#">Buy now</a></div>
</div>
</div>
</div>
</div>
</div>
</section>