Access_New/pages/element-pricing-table.html
2024-09-05 11:33:27 +05:45

1964 lines
119 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
</head>
<body data-mobile-nav-style="classic">
<header>
<nav class="navbar navbar-expand-lg header-light header-reverse header-demo" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="index.html">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="default-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="alt-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto col-lg-8 menu-order position-static">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pre-Built Sites</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content background-position-center cover-background" aria-labelledby="navbarDropdownMenuLink1" style="background-image: url('images/pre-built-sites-bg.jpg')">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="demo-corporate.html" target="_blank">Corporate<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-marketing.html" target="_blank">Marketing</a></li>
<li><a href="demo-accounting.html" target="_blank">Accounting<span class="label bg-light-red text-red border-radius-26px">Classic</span></a></li>
<li><a href="demo-beauty-salon.html" target="_blank">Beauty Salon</a></li>
<li><a href="demo-architecture.html" target="_blank">Architecture</a></li>
<li><a href="demo-ebook.html" target="_blank">eBook</a></li>
<li><a href="demo-seo-agency.html" target="_blank">SEO Agency</a></li>
<li><a href="demo-hosting.html" target="_blank">Hosting</a></li>
<li><a href="demo-consulting.html" target="_blank">Consulting</a></li>
<li><a href="demo-green-energy.html" target="_blank">Green Energy</a></li>
<li><a href="demo-business.html" target="_blank">Business</a></li>
<li><a href="demo-interactive-portfolio.html" target="_blank">Interactive Portfolio</a></li>
<li><a href="demo-spa-salon.html" target="_blank">Spa Salon<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
</ul>
<ul class="col">
<li><a href="demo-branding-agency.html" target="_blank">Branding Agency<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-elearning.html" target="_blank">eLearning</a></li>
<li><a href="demo-it-business.html" target="_blank">IT Business<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Modern</span></a></li>
<li><a href="demo-barber.html" target="_blank">Barber</a></li>
<li><a href="demo-hotel-and-resort.html" target="_blank">Hotel & Resort</a></li>
<li><a href="demo-real-estate.html" target="_blank">Real Estate</a></li>
<li><a href="demo-jewellery-store.html" target="_blank">Jewellery Store</a></li>
<li><a href="demo-travel-agency.html" target="_blank">Travel Agency</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Gym & Fitness</a></li>
<li><a href="demo-logistics.html" target="_blank">Logistics</a></li>
<li><a href="demo-design-agency.html" target="_blank">Design Agency<span class="label bg-light-red text-red border-radius-26px">Creative</span></a></li>
<li><a href="demo-photography.html" target="_blank">Photography</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Pizza Parlor</a></li>
</ul>
<ul class="col">
<li><a href="demo-restaurant.html" target="_blank">Restaurant<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Scattered Portfolio</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Data Analysis</a></li>
<li><a href="demo-medical.html" target="_blank">Medical</a></li>
<li><a href="demo-horizontal-portfolio.html" target="_blank">Horizontal Portfolio</a></li>
<li><a href="demo-product-showcase.html" target="_blank">Product Showcase<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-finance.html" target="_blank">Finance</a></li>
<li><a href="demo-elder-care.html" target="_blank">Elder Care</a></li>
<li><a href="demo-fashion-store.html" target="_blank">Fashion Store</a></li>
<li><a href="demo-music-onepage.html" target="_blank">Music</a></li>
<li><a href="demo-vertical-portfolio.html" target="_blank">Vertical Portfolio</a></li>
<li><a href="demo-freelancer.html" target="_blank">Freelancer<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
<li><a href="demo-charity.html" target="_blank">Charity</a></li>
</ul>
<ul class="col">
<li><a href="demo-digital-agency.html" target="_blank">Digital Agency</a></li>
<li><a href="demo-web-agency.html" target="_blank">Web Agency<span class="label bg-white-ice text-jade border-radius-26px">Creative</span></a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Yoga & Meditation</a></li>
<li><a href="demo-startup.html" target="_blank">Startup</a></li>
<li><a href="demo-application.html" target="_blank">Application<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">New</span></a></li>
<li><a href="demo-lawyer.html" target="_blank">Lawyer</a></li>
<li><a href="demo-cryptocurrency.html" target="_blank">Cryptocurrency</a></li>
<li><a href="demo-conference.html" target="_blank">Conference</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Minimal Portfolio<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-decor-store.html" target="_blank">Decor Store</a></li>
<li><a href="demo-magazine.html" target="_blank">Magazine</a></li>
<li><a href="demo-blogger.html" target="_blank">Blogger</a></li>
<li><a href="demo-wedding-invitation.html" target="_blank">Wedding Invitation</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pages</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink2">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">About Pages</li>
<li><a href="demo-branding-agency-about.html" target="_blank">About - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-about.html" target="_blank">About - Restaurant</a></li>
<li><a href="demo-minimal-portfolio-about.html" target="_blank">About - Minimal</a></li>
<li><a href="demo-accounting-company.html" target="_blank">About - Accounting</a></li>
<li><a href="demo-architecture-about.html" target="_blank">About - Architecture</a></li>
<li><a href="demo-digital-agency-about.html" target="_blank">About - Digital</a></li>
<li><a href="demo-photography-about.html" target="_blank">About - Photography</a></li>
<li><a href="demo-design-agency-about.html" target="_blank">About - Agency</a></li>
<li><a href="demo-marketing-about.html" target="_blank">About - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-scattered-portfolio-about.html" target="_blank">About - Scattered</a></li>
<li><a href="demo-medical-about.html" target="_blank">About - Medical</a></li>
<li><a href="demo-web-agency-about.html" target="_blank">About - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-startup-who-we-are.html" target="_blank">About - Startup</a></li>
<li><a href="demo-hotel-and-resort-about-us.html" target="_blank">About - Hotel</a></li>
<li><a href="demo-elearning-about.html" target="_blank">About - eLearning<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Services Pages</li>
<li><a href="demo-accounting-services.html" target="_blank">Services - Accounting</a></li>
<li><a href="demo-marketing-services.html" target="_blank">Services - Marketing</a></li>
<li><a href="demo-branding-agency-services.html" target="_blank">Services - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-minimal-portfolio-expertise.html" target="_blank">Services - Minimal</a></li>
<li><a href="demo-web-agency-expertise.html" target="_blank">Services - Web</a></li>
<li><a href="demo-architecture-services.html" target="_blank">Services - Architecture</a></li>
<li><a href="demo-digital-agency-expertise.html" target="_blank">Services - Digital</a></li>
<li><a href="demo-startup-services.html" target="_blank">Services - Startup</a></li>
<li><a href="demo-scattered-portfolio-expertise.html" target="_blank">Services - Scattered</a></li>
<li><a href="demo-lawyer-practice-areas.html" target="_blank">Services - Lawyer</a></li>
<li><a href="demo-corporate-services.html" target="_blank">Services - Corporate<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-data-analysis-what-we-do.html" target="_blank">Services - Data Analysis</a></li>
<li><a href="demo-marketing-services-details.html" target="_blank">Single Marketing</a></li>
<li><a href="demo-accounting-services-details.html" target="_blank">Single Accounting</a></li>
<li><a href="demo-branding-agency-services-detail.html" target="_blank">Single - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Contact Pages</li>
<li><a href="demo-scattered-portfolio-contact.html" target="_blank">Contact - Scattered</a></li>
<li><a href="demo-branding-agency-contact.html" target="_blank">Contact - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-photography-contact.html" target="_blank">Contact - Photography</a></li>
<li><a href="demo-hotel-and-resort-contact.html" target="_blank">Contact - Hotel</a></li>
<li><a href="demo-spa-salon-contact.html" target="_blank">Contact - Spa</a></li>
<li><a href="demo-it-business-contact.html" target="_blank">Contact - IT Business<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-architecture-contact.html" target="_blank">Contact - Architecture</a></li>
<li><a href="demo-design-agency-contact.html" target="_blank">Contact - Agency</a></li>
<li><a href="demo-marketing-contact.html" target="_blank">Contact - Marketing</a></li>
<li><a href="demo-horizontal-portfolio-contact.html" target="_blank">Contact - Portfolio</a></li>
<li><a href="demo-accounting-contact.html" target="_blank">Contact - Accounting</a></li>
<li><a href="demo-elearning-contact.html" target="_blank">Contact - eLearning</a></li>
<li><a href="demo-corporate-contact.html" target="_blank">Contact - Corporate</a></li>
<li><a href="demo-real-estate-contact.html" target="_blank">Contact - Real Estate</a></li>
<li><a href="demo-web-agency-contact.html" target="_blank">Contact - Web</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-corporate-pricing.html" target="_blank">Pricing - Corporate</a></li>
<li><a href="demo-hosting-pricing.html" target="_blank">Pricing - Hosting</a></li>
<li><a href="demo-data-analysis-pricing.html" target="_blank">Pricing - Data Analysis</a></li>
<li><a href="demo-marketing-pricing.html" target="_blank">Pricing - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-consulting-process.html" target="_blank">Process - Consulting</a></li>
<li><a href="demo-accounting-process.html" target="_blank">Process - Accounting</a></li>
<li><a href="demo-startup-clients.html" target="_blank">Clients - Startup</a></li>
<li><a href="demo-business-clients.html" target="_blank">Clients - Business</a></li>
<li><a href="demo-corporate-customer-stories.html" target="_blank">Testimonials - Corporate</a></li>
<li><a href="demo-data-analysis-testimonials.html" target="_blank">Reviews - Data Analysis</a></li>
<li><a href="demo-finance-team.html" target="_blank">Team - Finance</a></li>
<li><a href="demo-marketing-team.html" target="_blank">Team - Marketing</a></li>
<li><a href="demo-web-agency-people.html" target="_blank">Team - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-chefs.html" target="_blank">Chefs - Restaurant</a></li>
<li><a href="demo-pizza-parlor-chefs.html" target="_blank">Chefs - Pizza Parlor</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-real-estate-agents.html" target="_blank">Agents - Real Estate</a></li>
<li><a href="demo-elearning-instructors.html" target="_blank">Instructors - eLearning</a></li>
<li><a href="demo-hotel-and-resort-amenities.html" target="_blank">Amenities - Hotel</a></li>
<li><a href="demo-medical-timetable.html" target="_blank">Timetable - Medical</a></li>
<li><a href="demo-photography-award.html" target="_blank">Award - Photography</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">FAQ - Decor Store</a></li>
<li><a href="demo-charity-causes.html" target="_blank">Causes - Charity</a></li>
<li><a href="demo-restaurant-menu.html" target="_blank">Menu - Restaurant</a></li>
<li><a href="demo-hotel-and-resort-bistro.html" target="_blank">Menu - Hotel<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-pizza-parlor-menu.html" target="_blank">Menu - Pizza</a></li>
<li><a href="demo-application-features.html" target="_blank">Features - Application</a></li>
<li><a href="404.html">Error 404</a></li>
<li><a href="search-result.html">Search Results</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Portfolio</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Classic<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-classic-two-column.html">Classic 2 Column</a></li>
<li><a href="portfolio-classic-three-column.html">Classic 3 Column</a></li>
<li><a href="portfolio-classic-four-column.html">Classic 4 Column</a></li>
<li><a href="portfolio-classic-masonry.html">Classic Masonry</a></li>
<li><a href="portfolio-classic-metro.html">Classic Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Boxed<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-boxed-two-column.html">Boxed 2 Column</a></li>
<li><a href="portfolio-boxed-three-column.html">Boxed 3 Column</a></li>
<li><a href="portfolio-boxed-four-column.html">Boxed 4 Column</a></li>
<li><a href="portfolio-boxed-masonry.html">Boxed Masonry</a></li>
<li><a href="portfolio-boxed-metro.html">Boxed Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Transform<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-transform-two-column.html">Transform 2 Column</a></li>
<li><a href="portfolio-transform-three-column.html">Transform 3 Column</a></li>
<li><a href="portfolio-transform-four-column.html">Transform 4 Column</a></li>
<li><a href="portfolio-transform-masonry.html">Transform Masonry</a></li>
<li><a href="portfolio-transform-metro.html">Transform Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Creative<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-creative-two-column.html">Creative 2 Column</a></li>
<li><a href="portfolio-creative-three-column.html">Creative 3 Column</a></li>
<li><a href="portfolio-creative-four-column.html">Creative 4 Column</a></li>
<li><a href="portfolio-creative-masonry.html">Creative Masonry</a></li>
<li><a href="portfolio-creative-metro.html">Creative Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Attractive<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-attractive-two-column.html">Attractive 2 Column</a></li>
<li><a href="portfolio-attractive-three-column.html">Attractive 3 Column</a></li>
<li><a href="portfolio-attractive-four-column.html">Attractive 4 Column</a></li>
<li><a href="portfolio-attractive-masonry.html">Attractive Masonry</a></li>
<li><a href="portfolio-attractive-metro.html">Attractive Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Clean<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-clean-two-column.html">Clean 2 Column</a></li>
<li><a href="portfolio-clean-three-column.html">Clean 3 Column</a></li>
<li><a href="portfolio-clean-four-column.html">Clean 4 Column</a></li>
<li><a href="portfolio-clean-masonry.html">Clean Masonry</a></li>
<li><a href="portfolio-clean-metro.html">Clean Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Simple<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-simple-two-column.html">Simple 2 Column</a></li>
<li><a href="portfolio-simple-three-column.html">Simple 3 Column</a></li>
<li><a href="portfolio-simple-four-column.html">Simple 4 Column</a></li>
<li><a href="portfolio-simple-masonry.html">Simple Masonry</a></li>
<li><a href="portfolio-simple-metro.html">Simple Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Modern<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-modern-two-column.html">Modern 2 Column</a></li>
<li><a href="portfolio-modern-three-column.html">Modern 3 Column</a></li>
<li><a href="portfolio-modern-four-column.html">Modern 4 Column</a></li>
<li><a href="portfolio-modern-masonry.html">Modern Masonry</a></li>
<li><a href="portfolio-modern-metro.html">Modern Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Other<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-slider.html">Portfolio Slider</a></li>
<li><a href="portfolio-parallax.html">Portfolio Parallax</a></li>
<li><a href="portfolio-justified-gallery.html">Justified Gallery</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Single Project<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-digital-agency-single-project-minimal.html" target="_blank">Single - Minimal</a></li>
<li><a href="demo-branding-agency-single-project-slider.html" target="_blank">Single - Slider</a></li>
<li><a href="demo-architecture-single-project-gallery.html" target="_blank">Single - Gallery</a></li>
<li><a href="demo-interactive-portfolio-single-project-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-design-agency-single-project-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-single-project-creative.html" target="_blank">Single - Creative</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Elements</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink4" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink4">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="element-accordion.html">Accordion</a></li>
<li><a href="element-buttons.html">Button</a></li>
<li><a href="element-team.html">Team</a></li>
<li><a href="element-testimonials.html">Testimonials<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-clients.html">Clients</a></li>
<li><a href="element-review.html">Review</a></li>
<li><a href="element-subscribe.html">Subscribe</a></li>
<li><a href="element-call-to-action.html">Call to Action</a></li>
<li><a href="element-tab.html">Tab<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-google-map.html">Google Map<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-contact-form.html">Contact Form</a></li>
<li><a href="element-columns.html">Columns</a></li>
<li><a href="element-alert-boxes.html">Alert Boxes</a></li>
<li><a href="element-image-gallery.html">Image Gallery</a></li>
</ul>
<ul class="col">
<li><a href="element-progress-bar.html">Progress Bar</a></li>
<li><a href="element-process-step.html">Process Step<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-icon-with-text.html">Icon with Text<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-shape-dividers.html">Shape Dividers</a></li>
<li><a href="element-counters.html">Counters</a></li>
<li><a href="element-countdown.html">Countdown</a></li>
<li><a href="element-fancy-text-box.html">Fancy Text Box</a></li>
<li><a href="element-heading.html">Heading</a></li>
<li><a href="element-dropcaps.html">Dropcaps</a></li>
<li><a href="element-blockquote.html">Blockquote</a></li>
<li><a href="element-highlights.html">Highlights</a></li>
<li><a href="element-lists.html">Lists</a></li>
<li><a href="element-social-icons.html">Social Icons</a></li>
<li><a href="element-pricing-table.html">Pricing Table</a></li>
</ul>
<ul class="col">
<li><a href="element-interactive-banners.html">Interactive Banners</a></li>
<li><a href="element-services-box.html">Services Box</a></li>
<li><a href="element-rotate-box.html">Rotate Box<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-instagram.html">Instagram</a></li>
<li><a href="element-parallax-scrolling.html">Parallax Scrolling</a></li>
<li><a href="element-sliding-box.html">Sliding Box<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-content-carousel.html">Content Carousel</a></li>
<li><a href="element-media.html">Media</a></li>
<li><a href="element-event.html">Event</a></li>
<li><a href="element-dividers.html">Dividers</a></li>
<li><a href="element-horizontal-list-item.html">Horizontal List Item</a></li>
<li><a href="element-banners.html">Banners</a></li>
<li><a href="element-carousel.html">Carousel</a></li>
<li><a href="element-tilt-effect.html">Tilt Effect<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col premium-element cover-background" style="background-image: url('images/premium-elements-bg.jpg')">
<li class="sub-title">Premium Elements</li>
<li><a href="element-adaptive-backgrounds.html">Adaptive Backgrounds</a></li>
<li><a href="element-sticky-column.html">Sticky Column</a></li>
<li><a href="element-3d-parallax-hover.html">3D Parallax Hover</a></li>
<li><a href="demo-restaurant.html" target="_blank">Custom Cursor</a></li>
<li><a href="element-animated-particles.html">Animated Particles</a></li>
<li><a href="element-marquee.html">Marquee</a></li>
<li><a href="element-fancy-heading.html">Fancy Heading</a></li>
<li><a href="element-fancy-images.html">Fancy Images</a></li>
<li><a href="element-scrolling-effects.html">Scrolling Effects</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Features</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink5" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink5">
<li class="dropdown">
<a href="javascript:void(0);">Header<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business.html" target="_blank">Transparent Header</a></li>
<li><a href="demo-corporate.html" target="_blank">White Header</a></li>
<li><a href="header-dark.html" target="_blank">Dark Header</a></li>
<li><a href="demo-digital-agency.html" target="_blank">Left Navigation</a></li>
<li><a href="demo-branding-agency.html" target="_blank">Right Navigation</a></li>
<li><a href="demo-restaurant.html" target="_blank">Center Navigation</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Header with Top Bar</a></li>
<li><a href="demo-startup.html" target="_blank">Header with Push</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Center Logo</a></li>
<li><a href="header-top-logo.html" target="_blank">Top Logo</a></li>
<li><a href="demo-ebook.html" target="_blank">One Page Navigation</a></li>
<li><a href="header-mini.html" target="_blank">Mini Header</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Header with Button</a></li>
<li><a href="demo-marketing.html" target="_blank">Header with Social</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Left Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-left-menu-simple.html" target="_blank">Left Menu Simple</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Left Menu Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Hamburger Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-photography.html" target="_blank">Hamburger Simple</a></li>
<li><a href="demo-architecture.html" target="_blank">Hamburger Creative</a></li>
<li><a href="demo-freelancer.html" target="_blank">Hamburger Clean</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Hamburger Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Header Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-always-fixed.html" target="_blank">Always Fixed</a></li>
<li><a href="demo-application.html" target="_blank">Disable Fixed</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Reverse Auto</a></li>
<li><a href="demo-elder-care.html" target="_blank">Reverse Back Scroll</a></li>
<li><a href="demo-accounting.html" target="_blank">Responsive Sticky</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Mobile Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-startup.html" target="_blank">Classic</a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Modern</a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Full Screen</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Lightbox & Modal<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="modal-simple.html">Simple Modal</a></li>
<li><a href="modal-subscription.html">Subscription</a></li>
<li><a href="modal-contact-form.html">Contact Form</a></li>
<li><a href="modal-youtube-video.html">Youtube Video</a></li>
<li><a href="modal-vimeo-video.html">Vimeo Video</a></li>
<li><a href="modal-google-map.html">Google Map</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Icon Packs<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="icon-packs-icons-mind-line.html">Icons Mind Line</a></li>
<li><a href="icon-packs-feather.html">Feather</a></li>
<li><a href="icon-packs-font-awesome.html">Font Awesome</a></li>
<li><a href="icon-packs-themify.html">Themify</a></li>
<li><a href="icon-packs-bootstrap.html">Bootstrap</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Sliders<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-architecture.html" target="_blank">Revolution</a></li>
<li><a href="demo-startup.html" target="_blank">Swiper</a></li>
</ul>
</li>
<li class="dropdown">
<a href="animations.html">Animations</a>
</li>
<li class="dropdown">
<a href="demo-minimal-portfolio.html" target="_blank">Page Preloader</a>
</li>
<li class="dropdown">
<a href="demo-jewellery-store.html" target="_blank">Cookie Notify</a>
</li>
<li class="dropdown">
<a href="demo-startup.html" target="_blank">Back to Top</a>
</li>
<li class="dropdown">
<a href="demo-design-agency.html" target="_blank">Sticky Footer</a>
</li>
</ul>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Blog</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink6" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink6">
<li class="dropdown"><a href="blog-grid.html">Blog Grid</a></li>
<li class="dropdown"><a href="blog-classic.html">Blog Classic</a></li>
<li class="dropdown"><a href="blog-metro.html">Blog Metro</a></li>
<li class="dropdown"><a href="blog-masonry.html">Blog Masonry</a></li>
<li class="dropdown"><a href="blog-simple.html">Blog Simple</a></li>
<li class="dropdown"><a href="blog-date.html">Blog Date</a></li>
<li class="dropdown"><a href="blog-only-text.html">Blog Only Text</a></li>
<li class="dropdown"><a href="blog-side-image.html">Blog Side Image</a></li>
<li class="dropdown"><a href="blog-modern.html">Blog Modern</a></li>
<li class="dropdown"><a href="blog-standard.html">Blog Standard</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Single Post<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business-blog-single-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-elearning-blog-single-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-blog-single-creative.html" target="_blank">Single - Creative</a></li>
<li><a href="demo-blogger-blog-single-classic.html" target="_blank">Single - Classic</a></li>
<li><a href="demo-architecture-blog-single-clean.html" target="_blank">Single - Clean</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Post Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-post-type-standard.html">Post - Standard</a></li>
<li><a href="blog-post-type-gallery.html">Post - Gallery</a></li>
<li><a href="blog-post-type-slider.html">Post - Slider</a></li>
<li><a href="blog-post-type-audio.html">Post - Audio</a></li>
<li><a href="blog-post-type-video.html">Post - Video</a></li>
<li><a href="blog-post-type-blockquote.html">Post - Blockquote</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Shop</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink7" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink7">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">Shop Layout</li>
<li><a href="demo-fashion-store-shop.html" target="_blank">Left Sidebar</a></li>
<li><a href="demo-fashion-store-right-sidebar.html" target="_blank">Right Sidebar</a></li>
<li><a href="demo-fashion-store-no-sidebar.html" target="_blank">No Sidebar</a></li>
<li><a href="demo-decor-store-collections.html" target="_blank">Collections - Style 01</a></li>
<li><a href="demo-jewellery-store-categories.html" target="_blank">Collections - Style 02</a></li>
<li><a href="demo-fashion-store-collection.html" target="_blank">Collections - Style 03</a></li>
<li><a href="demo-fashion-store-single-product.html" target="_blank">Single Product - Thumb Left</a></li>
<li><a href="demo-decor-store-single-product.html" target="_blank">Single Product - Thumb Bottom</a></li>
</ul>
<ul class="col">
<li class="sub-title">Utility Pages</li>
<li><a href="demo-decor-store-cart.html" target="_blank">Shopping Cart</a></li>
<li><a href="demo-decor-store-checkout.html" target="_blank">Checkout</a></li>
<li><a href="demo-decor-store-account.html" target="_blank">Login / Register</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">Help Center</a></li>
<li><a href="demo-fashion-store-wishlist.html" target="_blank">Wishlist</a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-02.jpg" alt /></a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-01.jpg" alt /></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end xs-pe-0">
<div class="header-icon">
<div class="header-button">
<a href="https://1.envato.market/R53mL2" target="_blank" class="btn btn-dark-gray btn-small btn-switch-text btn-rounded text-transform-none btn-box-shadow purchase-envato">
<span>
<span class="btn-double-text" data-text="Purchase Crafto">Purchase Crafto</span>
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="ipad-top-space-margin md-pt-0">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-xl-6 col-lg-8 text-center position-relative page-title-double-large">
<div class="d-flex flex-column justify-content-center extra-very-small-screen">
<h1 class="text-dark-gray alt-font ls-minus-1px fw-700 mb-20px">Pricing table</h1>
<h2 class="text-dark-gray d-inline-block fw-400 ls-0px mb-0">Organize and showcase service plans or product options with details and easily comparable features in a pricing table.</h2>
</div>
<div class="mt-auto justify-content-center breadcrumb breadcrumb-style-01 fs-14 text-dark-gray">
<ul>
<li><a href="index.html" class="text-dark-gray text-dark-gray-hover">Home</a></li>
<li><a href="element-pricing-table.html#" class="text-dark-gray text-dark-gray-hover">Elements</a></li>
<li>Pricing table</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gradient-solitude-blue-transparent pt-0">
<div class="container">
<div class="row align-items-center justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-lg-4 col-md-8 pricing-table-style-01">
<div class="pricing-table text-center p-15">
<div class="pricing-header">
<div class="d-inline-block alt-font fw-600 text-base-color text-uppercase">Basic</div>
<h3 class="text-dark-gray mb-0 fw-600 ls-minus-2px"><sup class="fs-26">$</sup>19.99</h3>
<div class="fs-14 lh-20">monthly billing</div>
</div>
<div class="pricing-body pb-30px pt-20px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Marketing strategy</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Email & live chat support</li>
<li class="pt-10px pb-10px">Social media share audit</li>
</ul>
</div>
<div class="pricing-footer">
<a href="element-pricing-table.html#" class="btn btn-dark-gray btn-medium btn-rounded">Get started</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 pricing-table-style-01 popular-item">
<div class="pricing-table bg-white box-shadow-extra-large border-radius-6px text-center ps-15 pe-15 pt-20 pb-20">
<div class="pricing-header">
<div class="d-inline-block alt-font fw-600 text-base-color text-uppercase">Standard</div>
<h3 class="text-dark-gray mb-0 fw-600 ls-minus-2px"><sup class="fs-26">$</sup>59.99</h3>
<div class="fs-14 lh-20">monthly billing</div>
</div>
<div class="pricing-body pb-30px pt-20px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Marketing strategy</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">24/7 phone support</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Social media share audit</li>
<li class="pt-10px pb-10px">Monthly management</li>
</ul>
</div>
<div class="pricing-footer">
<a href="element-pricing-table.html#" class="btn btn-base-color btn-large btn-rounded">Get started</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 pricing-table-style-01">
<div class="pricing-table text-center p-15">
<div class="pricing-header ">
<div class="d-inline-block alt-font fw-600 text-base-color text-uppercase">Premium</div>
<h3 class="text-dark-gray mb-0 fw-600 ls-minus-2px"><sup class="fs-26">$</sup>99.99</h3>
<div class="fs-14 lh-20">monthly billing</div>
</div>
<div class="pricing-body pb-30px pt-20px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Marketing strategy</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">24/7 phone support</li>
<li class="pt-10px pb-10px">Social media share audit</li>
</ul>
</div>
<div class="pricing-footer">
<a href="element-pricing-table.html#" class="btn btn-dark-gray btn-medium btn-rounded">Get started</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-6 text-center mt-5" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translate&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fs-22 d-block fw-600 text-dark-gray">Looking for a customize plan?</span>
<span><a href="element-pricing-table.html#" class="text-decoration-line-bottom text-dark-gray fw-500">Contact our team</a> to get a quote.</span>
</div>
</div>
</div>
</section>
<section class="bg-black background-position-right-bottom background-no-repeat sm-background-image-none" style="background-image: url('images/demo-conference-about-bg.png')">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-4 col-lg-5 text-center text-lg-start md-mb-30px" data-anime="{ &quot;translateX&quot;: [-30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="alt-font fw-600 text-white ls-minus-2px"><span class="w-20px h-4px d-inline-block bg-red me-10px"></span>Conference packages</h2>
<p class="mb-35px md-w-80 sm-w-100 md-mx-auto">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt labore et dolore magna ut enim.</p>
<a href="element-pricing-table.html#" class="btn btn-large btn-dark-gray btn-hover-animation btn-round-edge btn-box-shadow align-self-center">
<span>
<span class="btn-text">Pricing plans</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
<div class="col-lg-7 offset-xl-1">
<div class="row row-cols-1 row-cols-md-2 align-items-center justify-content-center mt-35px sm-mt-20px g-0">
<div class="col px-md-0 pricing-table-style-02 position-relative transition-inner-all sm-mb-30px" data-anime="{ &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="pricing-table border border-color-transparent-white-light text-center border-radius-6px pt-17 pb-17 ps-15 pe-15 lg-ps-13 lg-pe-13 box-shadow-large">
<div class="pricing-header">
<i class="line-icon-Boy align-middle text-center text-red icon-extra-large mb-20px"></i>
<div class="alt-font text-uppercase fs-16 fw-500">Personal</div>
<h3 class="text-white mb-0 fw-600">$250</h3>
</div>
<div class="pricing-body pt-20px pb-30px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-white-light pt-10px pb-10px"><span class="text-white">Regular</span> seats</li>
<li class="border-color-transparent-white-light pt-10px pb-10px"><span class="text-white">Snacks</span> and brunch</li>
<li class="pt-10px pb-10px"><span class="text-white">Event</span> certificate</li>
</ul>
</div>
<div class="pricing-footer">
<a href="element-pricing-table.html#" class="btn btn-small btn-dark-gray btn-hover-animation btn-round-edge btn-box-shadow align-self-center">
<span>
<span class="btn-text">Choose package</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
<div class="col px-md-0 pricing-table-style-02 position-relative transition-inner-all" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="pricing-table popular-item border border-color-transparent-white-light bg-black text-center border-radius-6px pt-25 pb-25 ps-15 pe-15 lg-ps-13 lg-pe-13 box-shadow-large">
<div class="pricing-header">
<div class="popular-label alt-font fw-500 fs-13 text-white bg-red text-uppercase border-radius-2px">Popular</div>
<i class="line-icon-Business-ManWoman align-middle text-center text-red icon-extra-large mb-20px"></i>
<div class="alt-font text-uppercase fs-16 fw-500">Business</div>
<h3 class="text-white mb-0 fw-600">$450</h3>
</div>
<div class="pricing-body pt-20px pb-30px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-white-light pt-10px pb-10px"><span class="text-white">Regular</span> seats</li>
<li class="border-color-transparent-white-light pt-10px pb-10px"><span class="text-white">Snacks</span> and brunch</li>
<li class="border-color-transparent-white-light pt-10px pb-10px"><span class="text-white">Photos</span> allowed</li>
<li class="pt-10px pb-10px"><span class="text-white">Event</span> certificate</li>
</ul>
</div>
<div class="pricing-footer">
<a href="element-pricing-table.html#" class="btn btn-small btn-dark-gray btn-hover-animation btn-round-edge btn-box-shadow align-self-center">
<span>
<span class="btn-text">Choose package</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="big-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 md-mb-50px text-center text-lg-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="fw-600 text-dark-gray mb-25px ls-minus-2px w-80 xl-w-100">Simple and flexible pricing.</h2>
<p class="w-80 lg-w-100">Lorem ipsum dolor consectetur adipiscing do text eiusmod tempor incididunt labore.</p>
<a href="element-pricing-table.html#" class="btn btn-dark-gray btn-large left-icon btn-box-shadow btn-switch-text btn-round-edge me-25px section-link">
<span>
<span><i class="feather icon-feather-file-text icon-small"></i></span>
<span class="btn-double-text fw-600" data-text="Chapters inside">Browse chapter</span>
</span>
</a>
</div>
<div class="col-lg-7">
<div class="row row-cols-1 row-cols-md-2 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;perspective&quot;: [1200,1200], &quot;scale&quot;: [1.05, 1], &quot;rotateY&quot;: [-30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col sm-mb-30px">
<div class="bg-white h-100 box-shadow-quadruple-large box-shadow-quadruple-large-hover border-radius-6px p-45px xl-p-25px text-center position-relative">
<div class="fs-11 fw-700 text-uppercase bg-red position-absolute right-20px top-20px text-white ps-10px pe-10px border-radius-2px lh-22 alt-font">Hot</div>
<h2 class="text-dark-gray alt-font ls-minus-2px fw-700 d-block mb-15px">$29</h2>
<div class="bg-selago alt-font d-inline-block mb-20px fw-700 text-uppercase border-radius-30px ps-20px pe-20px fs-13 text-cornflower-blue lh-30">Kindle</div>
<p class="lh-28 w-80 mx-auto">eBook version + Audio of the book</p>
<a href="element-pricing-table.html#" class="btn btn-cornflower-blue btn-medium btn-box-shadow btn-round-edge fw-600">Buy from Amazon</a>
</div>
</div>
<div class="col">
<div class="bg-white h-100 box-shadow-quadruple-large box-shadow-quadruple-large-hover border-radius-6px p-45px xl-p-25px text-center position-relative">
<h2 class="text-dark-gray alt-font ls-minus-2px fw-700 d-block mb-15px">$49</h2>
<div class="bg-white-ice alt-font d-inline-block mb-20px fw-700 text-uppercase border-radius-30px ps-20px pe-20px fs-13 text-jade lh-30">Hardcover</div>
<p class="lh-28 w-80 mx-auto">Hardcover version + Audio of the book</p>
<a href="element-pricing-table.html#" class="btn btn-jade btn-medium btn-box-shadow btn-round-edge fw-600">Buy from Amazon</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-solitude-blue">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-xl-5 col-lg-6 md-mb-50px text-center text-lg-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="text-dark-gray fw-600 ls-minus-2px mb-25px">Tailored pricing plans for everyone.</h2>
<p>We are excited for our work and how it positively impacts clients. With over 12 years of experience we have been constantly providing excellent solutions.</p>
<a href="element-pricing-table.html#" class="btn btn-extra-large btn-box-shadow btn-rounded btn-dark-gray mt-10px text-transform-none">View all plans</a>
</div>
<div class="col-xl-5 col-lg-6 offset-xl-1 position-relative">
<div class="accordion pricing-table-style-04" id="accordion-style-01" data-active-icon="fa-angle-up" data-inactive-icon="fa-angle-down" data-anime="{&quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="accordion-item bg-white active-accordion box-shadow-quadruple-large mb-20px">
<div class="accordion-header">
<a href="element-pricing-table.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-01-01" aria-expanded="true" data-bs-parent="#accordion-style-01">
<div class="accordion-title position-relative d-flex align-items-center pe-20px text-dark-gray fw-600 mb-0 fs-19">Basic plan<span class="icon-round bg-dark-gray text-white w-25px h-25px"><i class="fa-solid fa-angle-up"></i></span></div>
</a>
</div>
<div id="accordion-style-01-01" class="accordion-collapse collapse show" data-bs-parent="#accordion-style-01">
<div class="accordion-body last-paragraph-no-margin">
<p class="opacity-6 w-90 fw-300">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.</p>
<div class="d-flex align-items-end mt-20px">
<h5 class="text-white mb-0 ls-minus-1px fw-500"><span class="fs-16">$</span>19.99 <span class="fs-16 opacity-6 fw-300 ls-0px">/ Monthly</span></h5>
<a href="element-pricing-table.html#" class="btn btn-transparent-white-light btn-rounded btn-small ms-auto fw-600 btn-box-shadow">Get started</a>
</div>
</div>
</div>
</div>
<div class="accordion-item bg-white box-shadow-quadruple-large mb-20px">
<div class="accordion-header">
<a href="element-pricing-table.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-01-02" aria-expanded="false" data-bs-parent="#accordion-style-01">
<div class="accordion-title position-relative d-flex align-items-center pe-20px text-dark-gray fw-600 mb-0 fs-19">Standard plan<span class="icon-round bg-dark-gray text-white w-25px h-25px"><i class="fa-solid fa-angle-down"></i></span></div>
</a>
</div>
<div id="accordion-style-01-02" class="accordion-collapse collapse" data-bs-parent="#accordion-style-01">
<div class="accordion-body last-paragraph-no-margin">
<p class="opacity-6 w-90 fw-300">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.</p>
<div class="d-flex align-items-end mt-20px">
<h5 class="text-white mb-0 ls-minus-1px fw-500"><span class="fs-16">$</span>29.99 <span class="fs-16 opacity-6 fw-300 ls-0px">/ Monthly</span></h5>
<a href="element-pricing-table.html#" class="btn btn-transparent-white-light btn-rounded btn-small ms-auto fw-600 btn-box-shadow">Get started</a>
</div>
</div>
</div>
</div>
<div class="accordion-item bg-white box-shadow-quadruple-large">
<div class="accordion-header">
<a href="element-pricing-table.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-01-03" aria-expanded="false" data-bs-parent="#accordion-style-01">
<div class="accordion-title position-relative d-flex align-items-center pe-20px text-dark-gray fw-600 mb-0 fs-19">Premium plan<span class="icon-round bg-dark-gray text-white w-25px h-25px"><i class="fa-solid fa-angle-down"></i></span></div>
</a>
</div>
<div id="accordion-style-01-03" class="accordion-collapse collapse" data-bs-parent="#accordion-style-01">
<div class="accordion-body last-paragraph-no-margin">
<p class="opacity-6 w-90 fw-300">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.</p>
<div class="d-flex align-items-end mt-20px">
<h5 class="text-white mb-0 ls-minus-1px fw-500"><span class="fs-16">$</span>39.99 <span class="fs-16 opacity-6 fw-300 ls-0px">/ Monthly</span></h5>
<a href="element-pricing-table.html#" class="btn btn-transparent-white-light btn-rounded btn-small ms-auto fw-600 btn-box-shadow">Get started</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-xl-5 col-lg-6 col-md-7 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="ps-25px pe-25px mb-20px text-uppercase text-base-color fs-14 lh-34 fw-600 border-radius-100px bg-solitude-blue d-inline-block">Predictable pricing</span>
<h2 class="text-dark-gray alt-font fw-700 ls-minus-1px">Tailored pricing plans for everyone</h2>
</div>
</div>
<div class="row align-items-end pricing-table-style-05 g-0 mb-5 background-position-center background-no-repeat justify-content-center" style="background-image: url('images/demo-corporate-bg-03.png')">
<div class="col-lg-4 col-md-8 md-mb-30px" data-anime="{ &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="border-radius-6px position-relative overflow-hidden">
<div class="pricing-header pt-45px pb-10px border-radius-6px text-center position-relative top-minus-3px">
<span class="ps-25px pe-25px mb-15px text-uppercase text-base-color fs-13 lh-34 fw-700 border-radius-100px bg-solitude-blue d-inline-block">Starter</span>
<h5 class="fw-700 mb-0 text-dark-gray alt-font">Individual</h5>
<div class="pricing-body pt-35px">
<ul class="p-0 m-0 list-style-02 fw-500">
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-green h-20px w-20px border-radius-100 me-10px"><i class="bi bi-check align-self-center text-white fs-14 d-flex"></i></span>Marketing strategy
</li>
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-green h-20px w-20px border-radius-100 me-10px"><i class="bi bi-check align-self-center text-white fs-14 d-flex"></i></span>Competitive work analysis
</li>
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-red h-20px w-20px border-radius-100 me-10px"><i class="bi bi-x align-self-center text-white fs-14 d-flex"></i></span>Social media share audit
</li>
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-red h-20px w-20px border-radius-100 me-10px"><i class="bi bi-x align-self-center text-white fs-14 d-flex"></i></span>Monthly management
</li>
</ul>
</div>
</div>
<div class="row align-items-center pt-25px pb-25px">
<div class="col text-center last-paragraph-no-margin d-flex align-items-center justify-content-center">
<h3 class="alt-font text-dark-gray mb-0 me-15px fw-700 ls-minus-2px">$29</h3>
<p class="w-120px fs-15 lh-22 text-start">Per user/month billed annually*</p>
</div>
</div>
<div class="pricing-footer ps-12 pe-12 pb-8 text-center">
<a href="element-pricing-table.html#" class="btn btn-large btn-dark-gray btn-box-shadow btn-hover-animation-switch btn-round-edge w-100 text-transform-none mb-15px">
<span>
<span class="btn-text">Join this plan </span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
<span class="fs-16">Cancel anytime</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 md-mb-30px" data-anime="{ &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="bg-dark-gray border-radius-6px overflow-hidden position-relative box-shadow-double-large z-index-9">
<div class="p-10px fw-700 fs-14 text-white bg-base-color text-uppercase text-center">Popular</div>
<div class="pricing-header pt-45px pb-10px bg-white border-radius-6px text-center position-relative top-minus-3px">
<span class="ps-25px pe-25px mb-15px text-uppercase text-base-color fs-13 lh-34 fw-700 border-radius-100px bg-solitude-blue d-inline-block">Professional</span>
<h5 class="fw-700 mb-0 text-dark-gray alt-font">Business</h5>
<div class="pricing-body pt-35px">
<ul class="p-0 m-0 list-style-02 fw-500 text-center text-md-start">
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-green h-20px w-20px border-radius-100 me-10px"><i class="bi bi-check align-self-center text-white fs-14 d-flex"></i></span>Marketing strategy
</li>
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-green h-20px w-20px border-radius-100 me-10px"><i class="bi bi-check align-self-center text-white fs-14 d-flex"></i></span>Competitive work analysis
</li>
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-green h-20px w-20px border-radius-100 me-10px"><i class="bi bi-check align-self-center text-white fs-14 d-flex"></i></span>Social media share audit
</li>
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-red h-20px w-20px border-radius-100 me-10px"><i class="bi bi-x align-self-center text-white fs-14 d-flex"></i></span>Monthly management
</li>
</ul>
</div>
</div>
<div class="row align-items-center pt-25px pb-25px">
<div class="col text-center last-paragraph-no-margin d-flex align-items-center justify-content-center">
<h3 class="alt-font text-white mb-0 me-15px fw-600 ls-minus-2px">$39</h3>
<p class="w-120px fs-15 lh-22 text-white opacity-5 fw-300 text-start">Per user/month billed annually*</p>
</div>
</div>
<div class="pricing-footer ps-12 pe-12 pb-8 text-center">
<a href="element-pricing-table.html#" class="btn btn-large btn-white btn-box-shadow btn-hover-animation-switch btn-round-edge w-100 text-transform-none mb-15px fw-700">
<span>
<span class="btn-text">Join this plan </span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
<span class="fs-16 text-white opacity-5 fw-300">Cancel anytime</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8" data-anime="{ &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="border-radius-6px position-relative overflow-hidden">
<div class="pricing-header pt-45px pb-10px border-radius-6px text-center position-relative top-minus-3px">
<span class="ps-25px pe-25px mb-15px text-uppercase text-base-color fs-13 lh-34 fw-700 border-radius-100px bg-solitude-blue d-inline-block">Enterprise</span>
<h5 class="fw-700 mb-0 text-dark-gray alt-font">Corporate</h5>
<div class="pricing-body pt-35px">
<ul class="p-0 m-0 list-style-02 fw-500 text-center text-md-start">
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-green h-20px w-20px border-radius-100 me-10px">
<i class="bi bi-check align-self-center text-white fs-14 d-flex"></i></span>Marketing strategy
</li>
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-green h-20px w-20px border-radius-100 me-10px">
<i class="bi bi-check align-self-center text-white fs-14 d-flex"></i></span>Competitive work analysis
</li>
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-green h-20px w-20px border-radius-100 me-10px">
<i class="bi bi-check align-self-center text-white fs-14 d-flex"></i></span>Social media share audit
</li>
<li class="pt-15px pb-15px ps-12 pe-12 border-top border-color-extra-medium-gray text-dark-gray lg-ps-10 lg-pe-10">
<span class="d-flex align-self-center justify-content-center bg-green h-20px w-20px border-radius-100 me-10px">
<i class="bi bi-check align-self-center text-white fs-14 d-flex"></i></span>Monthly management
</li>
</ul>
</div>
</div>
<div class="row align-items-center pt-25px pb-25px">
<div class="col text-center last-paragraph-no-margin d-flex align-items-center justify-content-center">
<h3 class="alt-font text-dark-gray mb-0 me-15px fw-700 ls-minus-2px">$59</h3>
<p class="w-120px fs-15 lh-22 text-start">Per user/month billed annually*</p>
</div>
</div>
<div class="pricing-footer ps-12 pe-12 pb-8 text-center">
<a href="element-pricing-table.html#" class="btn btn-large btn-dark-gray btn-box-shadow btn-hover-animation-switch btn-round-edge w-100 text-transform-none mb-15px">
<span>
<span class="btn-text">Join this plan </span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
<span class="fs-16">Cancel anytime</span>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-xl-4 row-cols-lg-3 row-cols-md-2 row-cols-sm-2 justify-content-center align-items-center">
<div class="col icon-with-text-style-08 sm-mb-25px text-center text-sm-start md-mb-30px">
<div class="d-flex justify-content-center">
<div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
<div class="feature-box-icon me-10px">
<i class="bi bi-calendar-check fs-20 text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="fw-600 text-dark-gray">Get 30 day free trial</span>
</div>
</div>
</div>
</div>
<div class="col icon-with-text-style-08 sm-mb-25px text-center text-sm-start md-mb-30px">
<div class="d-flex justify-content-center">
<div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
<div class="feature-box-icon me-10px">
<i class="bi bi-wallet2 fs-20 text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="fw-600 text-dark-gray">No any hidden fees pay</span>
</div>
</div>
</div>
</div>
<div class="col icon-with-text-style-08 text-center text-sm-start">
<div class="d-flex justify-content-center">
<div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
<div class="feature-box-icon me-10px">
<i class="bi bi-clock fs-20 text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="fw-600 text-dark-gray">You can cancel anytime</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="position-relative bg-light-red">
<div class="container position-relative z-index-1">
<div class="row justify-content-center mb-3">
<div class="col-xl-8 col-lg-8 col-md-10 text-center" data-anime="{ &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="h1 text-dark-gray fw-700 ls-minus-1px mb-15px">Flexible pricing</h2>
<p class="w-45 lg-w-80 mx-auto">Lorem ipsum dolor consectetur adipiscing do text eiusmod tempor incididunt labore.</p>
</div>
</div>
<div class="row align-items-center justify-content-center pricing-table-style-06" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-lg-4 col-md-8 md-mb-30px">
<div class="bg-white box-shadow-quadruple-large border-radius-6px p-18 lg-p-13 text-center">
<h6 class="text-dark-gray fw-600 mb-0">Standard</h6>
<span class="mb-20px d-inline-block">Unlimited users</span>
<div class="row align-items-center">
<div class="col-sm-5 pe-sm-0">
<h2 class="text-dark-gray mb-0 fw-700 ls-minus-2px text-center text-sm-end"><sup class="fs-28">$</sup>22</h2>
</div>
<div class="col-lg-7 col-sm-5 text-center text-sm-start last-paragraph-no-margin fs-15 lh-24">
<p>per user/month billed annually</p>
</div>
</div>
<ul class="p-0 mt-20px mb-30px list-style-01 text-start lh-normal">
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Marketing strategy</li>
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Competitive work analysis</li>
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-x fs-20 text-red me-10px"></i>Social media share audit</li>
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-x fs-20 text-red me-10px"></i>Monthly management</li>
</ul>
<div class="pricing-footer w-100">
<a href="element-pricing-table.html#" class="btn btn-medium btn-dark-gray btn-round-edge w-100 btn-box-shadow fw-600">Choose package</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 md-mb-30px">
<div class="bg-white box-shadow-quadruple-large border-radius-6px p-18 lg-p-13 text-center">
<span class="ps-15px pe-15px mb-20px text-uppercase text-white fs-12 lh-26 alt-font fw-700 border-radius-4px bg-dark-gray d-inline-block">Popular </span>
<h6 class="text-dark-gray fw-600 mb-0">Business</h6>
<span class="mb-20px d-inline-block">Unlimited users</span>
<div class="row align-items-center">
<div class="col-sm-5 pe-sm-0">
<h2 class="text-dark-gray mb-0 fw-700 ls-minus-2px text-center text-sm-end"><sup class="fs-28">$</sup>33</h2>
</div>
<div class="col-lg-7 col-sm-5 text-center text-sm-start last-paragraph-no-margin fs-15 lh-24">
<p>per user/month billed annually</p>
</div>
</div>
<ul class="p-0 mt-20px mb-30px list-style-01 text-start lh-normal">
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Marketing strategy</li>
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Competitive work analysis</li>
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Social media share audit</li>
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-x fs-20 text-red me-10px"></i>Monthly management</li>
</ul>
<div class="pricing-footer w-100">
<a href="element-pricing-table.html#" class="btn btn-medium btn-gradient-pink-orange btn-round-edge w-100 btn-box-shadow fw-600">Choose package</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8">
<div class="bg-white box-shadow-quadruple-large border-radius-6px p-18 lg-p-13 text-center">
<h6 class="text-dark-gray fw-600 mb-0">Ultimate</h6>
<span class="mb-20px d-inline-block">Unlimited users</span>
<div class="row align-items-center">
<div class="col-sm-5 pe-sm-0">
<h2 class="text-dark-gray mb-0 fw-700 ls-minus-2px text-center text-sm-end"><sup class="fs-28">$</sup>44</h2>
</div>
<div class="col-lg-7 col-sm-5 text-center text-sm-start last-paragraph-no-margin fs-15 lh-24">
<p>per user/month billed annually</p>
</div>
</div>
<ul class="p-0 mt-20px mb-30px list-style-01 text-start lh-normal">
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Marketing strategy</li>
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Competitive work analysis</li>
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Social media share audit</li>
<li class="border-color-extra-medium-gray pt-20px pb-20px text-dark-gray d-flex"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Monthly management</li>
</ul>
<div class="pricing-footer w-100">
<a href="element-pricing-table.html#" class="btn btn-medium btn-dark-gray btn-round-edge w-100 btn-box-shadow fw-600">Choose package</a>
</div>
</div>
</div>
</div>
<div class="row align-items-center justify-content-center mt-5">
<div class="col-12 text-center">
<div class="d-inline-block bg-dark-gray box-shadow-large fw-600 text-white text-uppercase border-radius-30px ps-20px pe-20px fs-12 lh-30 me-10px sm-m-10px">Contact</div>
<div class="d-block d-md-inline-block align-middle text-dark-gray fw-500 fs-20">Looking for a corporate solution? <a href="element-pricing-table.html#" class="text-dark-gray text-dark-gray-hover fw-600 text-decoration-line-bottom d-inline-block">Contact our team</a></div>
</div>
</div>
</div>
</section>
<section class="position-relative z-index-2">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-xl-6 col-lg-7 col-md-8 text-center" data-anime="{ &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="fw-700 text-dark-gray ls-minus-1px">Choose the plan that's right for you!</h2>
</div>
</div>
<div class="row align-items-center justify-content-center pricing-table-style-07">
<div class="col-lg-6 col-md-12 md-mb-30px">
<ul class="nav nav-tabs justify-content-center border-0 text-left" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [-30, 0], &quot;perspective&quot;: [1200,1200], &quot;scale&quot;: [1.1, 1], &quot;rotateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="nav-item mb-30px p-0">
<a data-bs-toggle="tab" href="element-pricing-table.html#tab_four1" class="nav-link active box-shadow-extra-large ps-45px pe-45px pt-35px pb-35px lg-p-5 xs-p-8 border-radius-8px">
<div class="flex-column flex-sm-row d-flex align-items-center">
<div class="col-auto align-items-center d-flex me-auto w-150px lg-w-140px xs-w-auto mx-auto xs-mb-20px">
<div class="icon w-30px h-30px d-flex flex-shrink-0 align-items-center justify-content-center fs-11 border border-2 border-radius-100 me-10px">
<i class="fa-solid fa-check"></i>
</div>
<div class="fs-20 lg-fs-18 text-dark-gray fw-600 me-15px xs-me-0">Primary</div>
</div>
<div class="offer d-inline-block border border-color-light-medium-gray fw-600 text-dark-gray text-uppercase border-radius-30px ps-20px pe-20px fs-12 lh-26 xs-mb-20px">Save 20%</div>
<div class="col ms-auto text-end mx-auto">
<h4 class="fw-600 text-dark-gray d-inline-block align-middle mb-0">$10</h4>
<span class="d-inline-block align-middle ms-10px lg-ms-5px opacity-7">Per month</span>
</div>
</div>
</a>
</li>
<li class="nav-item mb-30px p-0">
<a data-bs-toggle="tab" href="element-pricing-table.html#tab_four2" class="nav-link box-shadow-extra-large ps-45px pe-45px pt-35px pb-35px lg-p-5 xs-p-8 border-radius-8px">
<div class="flex-column flex-sm-row d-flex align-items-center">
<div class="col-auto align-items-center d-flex me-auto w-150px lg-w-140px xs-w-auto mx-auto xs-mb-20px">
<div class="icon w-30px h-30px d-flex flex-shrink-0 align-items-center justify-content-center fs-11 border border-2 border-radius-100 me-10px">
<i class="fa-solid fa-check"></i>
</div>
<div class="fs-20 lg-fs-18 text-dark-gray fw-600 me-15px xs-me-0">Popular</div>
</div>
<div class="offer d-inline-block border border-color-light-medium-gray fw-600 text-dark-gray text-uppercase border-radius-30px ps-20px pe-20px fs-12 lh-26 xs-mb-20px">Save 30%</div>
<div class="col ms-auto text-end mx-auto">
<h4 class="fw-600 text-dark-gray d-inline-block align-middle mb-0">$19</h4>
<span class="d-inline-block align-middle ms-10px lg-ms-5px opacity-7">Per month</span>
</div>
</div>
</a>
</li>
<li class="nav-item p-0">
<a data-bs-toggle="tab" href="element-pricing-table.html#tab_four3" class="nav-link box-shadow-extra-large ps-45px pe-45px pt-35px pb-35px lg-p-5 xs-p-8 border-radius-8px">
<div class="flex-column flex-sm-row d-flex align-items-center">
<div class="col-auto align-items-center d-flex me-auto w-150px lg-w-140px xs-w-auto mx-auto xs-mb-20px">
<div class="icon w-30px h-30px d-flex flex-shrink-0 align-items-center justify-content-center fs-11 border border-2 border-radius-100 me-10px">
<i class="fa-solid fa-check"></i>
</div>
<div class="fs-20 lg-fs-18 text-dark-gray fw-600 me-15px xs-me-0">Premium</div>
</div>
<div class="offer d-inline-block border border-color-light-medium-gray fw-600 text-dark-gray text-uppercase border-radius-30px ps-20px pe-20px fs-12 lh-26 xs-mb-20px">Save 35%</div>
<div class="col ms-auto text-end mx-auto">
<h4 class="fw-600 text-dark-gray d-inline-block align-middle mb-0">$28</h4>
<span class="d-inline-block align-middle ms-10px lg-ms-5px opacity-7">Per month</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="col-xl-5 col-lg-6">
<div class="tab-content" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [-30, 0], &quot;perspective&quot;: [1200,1200], &quot;scale&quot;: [1.05, 1], &quot;rotateX&quot;: [5, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="tab-pane position-relative fade in active show box-shadow-quadruple-large border-radius-8px pt-40px" id="tab_four1">
<span class="text-dark-gray fw-600 mb-15px fs-24 d-inline-block ps-45px pe-45px sm-ps-25px sm-pe-25px">The most primary plan</span>
<div class="pricing-body overflow-hidden">
<ul class="p-0 list-style-02 text-start">
<li class="border-bottom border-color-extra-medium-gray pt-15px pb-15px ps-45px pe-45px sm-ps-25px sm-pe-25px fw-500 text-dark-gray"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Find places near hotels and camp</li>
<li class="border-bottom border-color-extra-medium-gray pt-15px pb-15px ps-45px pe-45px sm-ps-25px sm-pe-25px fw-500 opacity-8"><i class="feather icon-feather-x fs-20 text-red me-10px"></i>Track record and reward programs</li>
<li class="pt-15px pb-15px ps-45px pe-45px sm-ps-25px sm-pe-25px fw-500 opacity-8"><i class="feather icon-feather-x fs-20 text-red me-10px"></i>Shows transportation option</li>
</ul>
<div class="d-block bg-gradient-very-light-gray pt-25px pb-25px ps-45px pe-45px sm-ps-25px sm-pe-25px border-radius-8px">
<a href="element-pricing-table.html#" class="btn btn-medium btn-rounded btn-dark-gray btn-box-shadow fw-600 sm-mb-10px">Join this plan</a>
<span class="fs-15 ms-15px d-inline-block">Offer save 20%*</span>
</div>
</div>
<span class="position-absolute top-25px right-25px bg-white border border-1 border-color-extra-medium-gray box-shadow-large fw-700 text-dark-gray text-uppercase border-radius-3px ps-15px pe-15px fs-12 xs-right-10px xs-top-10px">Primary</span>
</div>
<div class="tab-pane position-relative fade in box-shadow-quadruple-large border-radius-8px pt-40px" id="tab_four2">
<span class="text-dark-gray fw-600 mb-15px fs-24 d-inline-block ps-45px pe-45px sm-ps-25px sm-pe-25px">The most popular plan</span>
<div class="pricing-body overflow-hidden">
<ul class="p-0 list-style-02 text-start">
<li class="border-bottom border-color-extra-medium-gray pt-15px pb-15px ps-45px pe-45px sm-ps-25px sm-pe-25px fw-500 text-dark-gray"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Find places near hotels and camp</li>
<li class="border-bottom border-color-extra-medium-gray pt-15px pb-15px ps-45px pe-45px sm-ps-25px sm-pe-25px fw-500 text-dark-gray"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Track record and reward programs</li>
<li class="pt-15px pb-15px ps-45px pe-45px sm-ps-25px sm-pe-25px fw-500 opacity-8"><i class="feather icon-feather-x fs-20 text-red me-10px"></i>Shows transportation option</li>
</ul>
<div class="d-block bg-gradient-very-light-gray pt-25px pb-25px ps-45px pe-45px sm-ps-25px sm-pe-25px border-radius-8px">
<a href="element-pricing-table.html#" class="btn btn-medium btn-rounded btn-dark-gray btn-box-shadow fw-600 sm-mb-10px">Join this plan</a>
<span class="fs-15 ms-15px d-inline-block">Offer save 30%*</span>
</div>
</div>
<span class="position-absolute top-25px right-25px bg-white border border-1 border-color-extra-medium-gray box-shadow-large fw-700 text-dark-gray text-uppercase border-radius-3px ps-15px pe-15px fs-12 xs-right-10px xs-top-10px">Popular</span>
</div>
<div class="tab-pane position-relative fade in box-shadow-quadruple-large border-radius-8px pt-40px" id="tab_four3">
<span class="text-dark-gray fw-600 mb-15px fs-24 d-inline-block ps-45px pe-45px sm-ps-25px sm-pe-25px">The most premium plan</span>
<div class="pricing-body overflow-hidden">
<ul class="p-0 list-style-02 text-start">
<li class="border-bottom border-color-extra-medium-gray pt-15px pb-15px ps-45px pe-45px sm-ps-25px sm-pe-25px fw-500 text-dark-gray"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Find places near hotels and camp</li>
<li class="border-bottom border-color-extra-medium-gray pt-15px pb-15px ps-45px pe-45px sm-ps-25px sm-pe-25px fw-500 text-dark-gray"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Track record and reward programs</li>
<li class="pt-15px pb-15px ps-45px pe-45px sm-ps-25px sm-pe-25px fw-500 text-dark-gray"><i class="feather icon-feather-check fs-20 text-green me-10px"></i>Shows transportation option</li>
</ul>
<div class="d-block bg-gradient-very-light-gray pt-25px pb-25px ps-45px pe-45px sm-ps-25px sm-pe-25px border-radius-8px">
<a href="element-pricing-table.html#" class="btn btn-medium btn-rounded btn-dark-gray btn-box-shadow fw-600 sm-mb-10px">Join this plan</a>
<span class="fs-15 ms-15px d-inline-block">Offer save 35%*</span>
</div>
</div>
<span class="position-absolute top-25px right-25px bg-white border border-1 border-color-extra-medium-gray box-shadow-large fw-700 text-dark-gray text-uppercase border-radius-3px ps-15px pe-15px fs-12 xs-right-10px xs-top-10px">Premium</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray">
<div class="container">
<div class="row justify-content-center mb-2">
<div class="col-md-10 text-center">
<span class="text-base-color fw-600 text-uppercase">Simple pricing plans</span>
<h2 class="fw-700 mb-15px alt-font text-dark-gray ls-minus-2px">Plans for everyone</h2>
</div>
</div>
<div class="row">
<div class="col pricing-table-style-08">
<div class="d-flex justify-content-center mb-5 xs-mb-10">
<ul class="nav nav-tabs nav-swich-tabs justify-content-center border-0 text-center fw-500">
<li class="nav-item w-auto">
<a class="nav-link active text-dark-gray d-flex align-items-center" data-bs-toggle="tab" href="element-pricing-table.html#tab_six3"><span class="tab-nav-text">Monthly</span></a>
</li>
<li class="nav-item w-auto">
<a class="nav-link d-flex align-items-center" data-bs-toggle="tab" href="element-pricing-table.html#tab_six4"><span class="tab-nav-text">Annualy - Save 50%</span></a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active show" id="tab_six3">
<div class="row align-items-center justify-content-center">
<div class="col-lg-4 col-md-8 pricing-table-style-08 md-mb-30px" data-anime="{ &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="pricing-table text-center pt-16 pb-35px bg-white box-shadow-quadruple-large border-radius-6px">
<div class="pricing-header ps-18 pe-18 lg-ps-12 lg-pe-12">
<div class="d-inline-block fs-12 text-uppercase bg-white ps-20px pe-20px fw-600 text-dark-gray mb-30px border-radius-100px box-shadow-large border border-1 border-color-extra-medium-gray">Standard</div>
<h2 class="text-dark-gray fw-600 mb-10px ls-minus-2px"><sup class="fs-30">$</sup>500</h2>
<p class="mb-25px lh-28">All the basics for businesses that are just getting started.</p>
<a href="element-pricing-table.html#" class="btn btn-medium btn-dark-gray btn-round-edge btn-switch-text btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Choose package">Choose package</span>
</span>
</a>
<span class="fs-13 w-100 d-block mt-5px">Monthly billing</span>
</div>
<div class="pricing-body pt-15px pb-25px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Unlimited bandwidth</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px"><span class="opacity-6">Full backup systems</span></li>
<li class="border-color-transparent-dark-very-light border-bottom pt-10px pb-10px"><span class="opacity-6">Unlimited database</span></li>
</ul>
</div>
<div class="pricing-footer">
<a href="element-pricing-table.html#" class="text-decoration-line-bottom d-inline-block text-dark-gray fw-600 ls-minus-05px">Get your 30 day free trial</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 pricing-table-style-08 md-mb-30px" data-anime="{ &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="pricing-table text-center pt-16 pb-35px bg-white box-shadow-quadruple-large border-radius-6px">
<div class="pricing-header ps-18 pe-18 lg-ps-12 lg-pe-12">
<div class="d-inline-block fs-12 text-uppercase bg-white ps-20px pe-20px fw-600 text-dark-gray mb-30px border-radius-100px box-shadow-large border border-1 border-color-extra-medium-gray">Business</div>
<h2 class="text-dark-gray fw-600 mb-10px ls-minus-2px"><sup class="fs-30">$</sup>850</h2>
<p class="mb-25px lh-28">All the basics for businesses that are just getting started.</p>
<a href="element-pricing-table.html#" class="btn btn-medium btn-dark-gray btn-round-edge btn-switch-text btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Choose package">Choose package</span>
</span>
</a>
<span class="fs-13 w-100 d-block mt-5px">Monthly billing</span>
</div>
<div class="pricing-body pt-15px pb-25px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Unlimited bandwidth</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Full backup systems</li>
<li class="border-color-transparent-dark-very-light border-bottom pt-10px pb-10px"><span class="opacity-6">Unlimited database</span></li>
</ul>
</div>
<div class="pricing-footer">
<a href="element-pricing-table.html#" class="text-decoration-line-bottom d-inline-block text-dark-gray fw-600 ls-minus-05px">Get your 30 day free trial</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 pricing-table-style-08" data-anime="{ &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="pricing-table text-center pt-16 pb-35px bg-white box-shadow-quadruple-large border-radius-6px">
<div class="pricing-header ps-18 pe-18 lg-ps-12 lg-pe-12">
<div class="d-inline-block fs-12 text-uppercase bg-white ps-20px pe-20px fw-600 text-dark-gray mb-30px border-radius-100px box-shadow-large border border-1 border-color-extra-medium-gray">Ultimate</div>
<h2 class="text-dark-gray fw-600 mb-10px ls-minus-2px"><sup class="fs-30">$</sup>950</h2>
<p class="mb-25px lh-28">All the basics for businesses that are just getting started.</p>
<a href="element-pricing-table.html#" class="btn btn-medium btn-dark-gray btn-round-edge btn-switch-text btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Choose package">Choose package</span>
</span>
</a>
<span class="fs-13 w-100 d-block mt-5px">Monthly billing</span>
</div>
<div class="pricing-body pt-15px pb-25px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Unlimited bandwidth</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Full backup systems</li>
<li class="border-color-transparent-dark-very-light border-bottom pt-10px pb-10px">Unlimited database</li>
</ul>
</div>
<div class="pricing-footer">
<a href="element-pricing-table.html#" class="text-decoration-line-bottom d-inline-block text-dark-gray fw-600 ls-minus-05px">Get your 30 day free trial</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_six4">
<div class="row align-items-center justify-content-center">
<div class="col-lg-4 col-md-8 pricing-table-style-08 md-mb-30px">
<div class="pricing-table text-center pt-16 pb-35px bg-white box-shadow-quadruple-large border-radius-6px">
<div class="pricing-header ps-18 pe-18 lg-ps-12 lg-pe-12">
<div class="d-inline-block fs-12 text-uppercase bg-white ps-20px pe-20px fw-600 text-dark-gray mb-30px border-radius-100px box-shadow-large border border-1 border-color-extra-medium-gray">Standard</div>
<h2 class="text-dark-gray fw-600 mb-10px ls-minus-3px"><sup class="fs-30">$</sup>250</h2>
<p class="mb-25px lh-28">All the basics for businesses that are just getting started.</p>
<a href="element-pricing-table.html#" class="btn btn-medium btn-dark-gray btn-round-edge btn-switch-text btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Choose package">Choose package</span>
</span>
</a>
<span class="fs-13 w-100 d-block mt-5px">Monthly billing</span>
</div>
<div class="pricing-body pt-15px pb-25px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Unlimited bandwidth</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px"><span class="opacity-6">Full backup systems</span></li>
<li class="border-color-transparent-dark-very-light border-bottom pt-10px pb-10px"><span class="opacity-6">Unlimited database</span></li>
</ul>
</div>
<div class="pricing-footer">
<a href="element-pricing-table.html#" class="text-decoration-line-bottom d-inline-block text-dark-gray fw-500 ls-minus-05px">Get your 30 day free trial</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 pricing-table-style-08 md-mb-30px">
<div class="pricing-table text-center pt-16 pb-35px bg-white box-shadow-quadruple-large border-radius-6px">
<div class="pricing-header ps-18 pe-18 lg-ps-12 lg-pe-12">
<div class="d-inline-block fs-12 text-uppercase bg-white ps-20px pe-20px fw-600 text-dark-gray mb-30px border-radius-100px box-shadow-large border border-1 border-color-extra-medium-gray">Business</div>
<h2 class="text-dark-gray fw-600 mb-10px ls-minus-3px"><sup class="fs-30">$</sup>350</h2>
<p class="mb-25px lh-28">All the basics for businesses that are just getting started.</p>
<a href="element-pricing-table.html#" class="btn btn-medium btn-dark-gray btn-round-edge btn-switch-text btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Choose package">Choose package</span>
</span>
</a>
<span class="fs-13 w-100 d-block mt-5px">Monthly billing</span>
</div>
<div class="pricing-body pt-15px pb-25px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Unlimited bandwidth</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Full backup systems</li>
<li class="border-color-transparent-dark-very-light border-bottom pt-10px pb-10px"><span class="opacity-6">Unlimited database</span></li>
</ul>
</div>
<div class="pricing-footer">
<a href="element-pricing-table.html#" class="text-decoration-line-bottom d-inline-block text-dark-gray fw-500 ls-minus-05px">Get your 30 day free trial</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 pricing-table-style-08">
<div class="pricing-table text-center pt-16 pb-35px bg-white box-shadow-quadruple-large border-radius-6px">
<div class="pricing-header ps-18 pe-18 lg-ps-12 lg-pe-12">
<div class="d-inline-block fs-12 text-uppercase bg-white ps-20px pe-20px fw-600 text-dark-gray mb-30px border-radius-100px box-shadow-large border border-1 border-color-extra-medium-gray">Ultimate</div>
<h2 class="text-dark-gray fw-600 mb-10px ls-minus-3px"><sup class="fs-30">$</sup>450</h2>
<p class="mb-25px lh-28">All the basics for businesses that are just getting started.</p>
<a href="element-pricing-table.html#" class="btn btn-medium btn-dark-gray btn-round-edge btn-switch-text btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Choose package">Choose package</span>
</span>
</a>
<span class="fs-13 w-100 d-block mt-5px">Monthly billing</span>
</div>
<div class="pricing-body pt-15px pb-25px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Unlimited bandwidth</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Full backup systems</li>
<li class="border-color-transparent-dark-very-light border-bottom pt-10px pb-10px">Unlimited database</li>
</ul>
</div>
<div class="pricing-footer">
<a href="element-pricing-table.html#" class="text-decoration-line-bottom d-inline-block text-dark-gray fw-500 ls-minus-05px">Get your 30 day free trial</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="big-section bg-gradient-top-very-light-gray">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-lg-6 pe-50px lg-pe-30px md-pe-15px pricing-table-style-09" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-30, 1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;:200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row border-top border-color-extra-medium-gray g-0 xs-pt-20px xs-pb-20px">
<div class="col-sm-3 text-center align-self-center">
<img src="images/demo-beauty-salon-icon-02.png" class="w-55px" alt>
</div>
<div class="col-sm-7 text-center text-sm-start last-paragraph-no-margin ps-40px pe-40px pt-30px pb-30px border-start border-color-extra-medium-gray xs-border-start-0 lg-ps-20px lg-pe-20px">
<span class="text-dark-gray fs-19 fw-600">Hair wash and dry</span>
<p class="lh-26">Quick hair wash and blow</p>
</div>
<div class="col-sm-2 text-center text-sm-start align-self-center">
<h4 class="fw-600 text-dark-gray mb-0">$35</h4>
</div>
</div>
<div class="row border-top border-color-extra-medium-gray align-items-center g-0 xs-pt-20px xs-pb-20px">
<div class="col-sm-3 align-self-center text-center">
<img src="images/demo-beauty-salon-icon-03.png" class="w-55px" alt>
</div>
<div class="col-sm-7 text-center text-sm-start last-paragraph-no-margin ps-40px pe-40px pt-30px pb-30px border-start border-color-extra-medium-gray xs-border-start-0 lg-ps-20px lg-pe-20px">
<span class="text-dark-gray fs-19 fw-600">Express makeup</span>
<p class="lh-26">Lovely on your special day</p>
</div>
<div class="col-sm-2 text-center text-sm-start align-self-center">
<h4 class="fw-600 text-dark-gray mb-0">$65</h4>
</div>
</div>
<div class="row border-top border-bottom border-color-extra-medium-gray align-items-center g-0 xs-pt-20px xs-pb-20px">
<div class="col-sm-3 align-self-center text-center">
<img src="images/demo-beauty-salon-icon-04.png" class="w-55px" alt>
</div>
<div class="col-sm-7 text-center text-sm-start last-paragraph-no-margin ps-40px pe-40px pt-30px pb-30px border-start border-color-extra-medium-gray xs-border-start-0 lg-ps-20px lg-pe-20px">
<span class="text-dark-gray fs-19 fw-600">Haircut by expert</span>
<p class="lh-26">Get the best haircut</p>
</div>
<div class="col-sm-2 text-center text-sm-start align-self-center">
<h4 class="fw-600 text-dark-gray mb-0">$25</h4>
</div>
</div>
</div>
<div class="col-lg-6 ps-50px lg-ps-30px md-ps-15px pricing-table-style-09" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [30, 1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;:200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row border-top border-color-extra-medium-gray g-0 md-border-top-0 xs-pt-20px xs-pb-20px">
<div class="col-sm-3 text-center align-self-center">
<img src="images/demo-beauty-salon-icon-05.png" class="w-55px" alt>
</div>
<div class="col-sm-7 text-center text-sm-start last-paragraph-no-margin ps-40px pe-40px pt-30px pb-30px border-start border-color-extra-medium-gray xs-border-start-0 lg-ps-20px lg-pe-20px">
<span class="text-dark-gray fs-19 fw-600">New hair styling</span>
<p class="lh-26">Trendy and glam hair style</p>
</div>
<div class="col-sm-2 text-center text-sm-start align-self-center">
<h4 class="fw-600 text-dark-gray mb-0">$25</h4>
</div>
</div>
<div class="row border-top border-color-extra-medium-gray align-items-center g-0 xs-pt-20px xs-pb-20px">
<div class="col-sm-3 align-self-center text-center">
<img src="images/demo-beauty-salon-icon-06.png" class="w-55px" alt>
</div>
<div class="col-sm-7 text-center text-sm-start last-paragraph-no-margin ps-40px pe-40px pt-30px pb-30px border-start border-color-extra-medium-gray xs-border-start-0 lg-ps-20px lg-pe-20px">
<span class="text-dark-gray fs-19 fw-600">Wash and plain dry</span>
<p class="lh-26">Advanced hair treatment</p>
</div>
<div class="col-sm-2 text-center text-sm-start align-self-center">
<h4 class="fw-600 text-dark-gray mb-0">$51</h4>
</div>
</div>
<div class="row border-top border-bottom border-color-extra-medium-gray align-items-center g-0 xs-pt-20px xs-pb-20px">
<div class="col-sm-3 align-self-center text-center">
<img src="images/demo-beauty-salon-icon-07.png" class="w-55px" alt>
</div>
<div class="col-sm-7 text-center text-sm-start last-paragraph-no-margin ps-40px pe-40px pt-30px pb-30px border-start border-color-extra-medium-gray xs-border-start-0 lg-ps-20px lg-pe-20px">
<span class="text-dark-gray fs-19 fw-600">Organic skin treatment </span>
<p class="lh-26">Reduce dryness from skin</p>
</div>
<div class="col-sm-2 text-center text-sm-start align-self-center">
<h4 class="fw-600 text-dark-gray mb-0">$55</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="big-section">
<div class="container">
<div class="row mb-6 md-mb-70px sm-mb-40px">
<div class="col-xxl-3 col-lg-4 md-mb-30px">
<h3 class="fw-700 text-dark-gray mb-0" data-anime="{ &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Membership benefits.</h3>
</div>
<div class="col-lg-8 offset-xxl-1">
<div class="row row-cols-1 row-cols-md-2">
<div class="col">
<ul class="p-0 m-0 list-style-02 fw-500 text-dark-gray" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="pb-5px"><i class="feather icon-feather-arrow-right-circle fs-20 text-orange me-10px"></i>30% off for family members.</li>
<li class="pb-5px"><i class="feather icon-feather-arrow-right-circle fs-20 text-orange me-10px"></i>25% off when you purchase gold plan.</li>
<li class="pb-5px"><i class="feather icon-feather-arrow-right-circle fs-20 text-orange me-10px"></i>Every class is booked in advance.</li>
</ul>
</div>
<div class="col">
<ul class="p-0 m-0 list-style-02 fw-500 text-dark-gray" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="pb-5px"><i class="feather icon-feather-arrow-right-circle fs-20 text-orange me-10px"></i>Top-tier fitness programs.</li>
<li class="pb-5px"><i class="feather icon-feather-arrow-right-circle fs-20 text-orange me-10px"></i>Unlimited access to all equipment.</li>
<li class="pb-5px"><i class="feather icon-feather-arrow-right-circle fs-20 text-orange me-10px"></i>Complimentary personal training.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center" data-anime="{&quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 500, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col pricing-table-style-10 md-mb-30px">
<div class="bg-very-light-gray p-50px lg-p-25px sm-mb-50px border-radius-6px overflow-hidden position-relative">
<span class="fs-14 lh-normal fw-600 text-dark-gray text-uppercase bg-white box-shadow-small border-radius-26px d-inline-block pt-10px pb-10px ps-20px pe-20px mb-30px">Basic</span>
<h3 class="ls-minus-1px lh-50 fw-700 alt-font text-dark-gray mb-0"><sub class="fs-30 bottom-0px">$</sub>19.99</h3>
<span class="d-block mb-20px text-uppercase fs-15 fw-600 text-dark-gray">One month</span>
<ul class="list-style-02 fw-500 p-0 mb-30px">
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>Personal trainer</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>05 Days in a weak</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>01 Bottle of protein</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-x icon-small text-red"></i></span>Access to videos</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-x icon-small text-red"></i></span>Muscle stretching</li>
</ul>
<a href="element-pricing-table.html#" class="btn btn-small btn-round-edge fw-600 btn-dark-gray btn-slide-right me-15px">Choose package<span class="bg-very-light-gray"></span></a>
<div class="cover-background background-position-center-bottom position-absolute right-0px top-0px h-100 w-65px" style="background-image: url('images/demo-gym-and-fitness-prices-01.jpg');"></div>
</div>
</div>
<div class="col pricing-table-style-10 position-relative md-mb-30px">
<div class="popular-label fs-15 lh-20 fw-700 alt-font text-uppercase text-white bg-orange box-shadow-double-large border-radius-100 text-center">Popular</div>
<div class="bg-very-light-gray p-50px lg-p-25px border-radius-6px overflow-hidden position-relative">
<span class="fs-14 lh-normal fw-600 text-dark-gray text-uppercase bg-white box-shadow-small border-radius-26px d-inline-block pt-10px pb-10px ps-20px pe-20px mb-30px">Silver</span>
<h3 class="lh-50 fw-700 alt-font text-dark-gray mb-0"><sub class="fs-30 bottom-0px">$</sub>59.99</h3>
<span class="d-block mb-20px text-uppercase fs-15 fw-600 text-dark-gray">Six month</span>
<ul class="list-style-02 fw-500 p-0 mb-30px">
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>Personal trainer</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>05 Days in a weak</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>01 Bottle of protein</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>Access to videos</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-x icon-small text-red"></i></span>Muscle stretching</li>
</ul>
<a href="element-pricing-table.html#" class="btn btn-small btn-round-edge fw-600 btn-dark-gray btn-slide-right me-15px">Choose package<span class="bg-very-light-gray"></span></a>
<div class="cover-background background-position-center-bottom position-absolute right-0px top-0px h-100 w-65px" style="background-image: url('images/demo-gym-and-fitness-prices-02.jpg');"></div>
</div>
</div>
<div class="col pricing-table-style-10">
<div class="bg-very-light-gray p-50px lg-p-25px sm-mb-50px border-radius-6px overflow-hidden position-relative">
<span class="fs-14 lh-normal fw-600 text-dark-gray text-uppercase bg-white box-shadow-small border-radius-26px d-inline-block pt-10px pb-10px ps-20px pe-20px mb-30px">Gold</span>
<h3 class="lh-50 fw-700 alt-font text-dark-gray mb-0"><sub class="fs-30 bottom-0px">$</sub>89.99</h3>
<span class="d-block mb-20px text-uppercase fs-15 fw-600 text-dark-gray">One Year</span>
<ul class="list-style-02 fw-500 p-0 mb-30px">
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>Personal trainer</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>05 Days in a weak</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>01 Bottle of protein</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>Access to videos</li>
<li class="pb-10px text-dark-gray"><span class="d-flex align-items-center justify-content-center box-shadow-small bg-white h-25px w-25px border-radius-100 me-10px mt-5px"><i class="bi bi-check icon-small text-green"></i></span>Muscle stretching</li>
</ul>
<a href="element-pricing-table.html#" class="btn btn-small btn-round-edge fw-600 btn-dark-gray btn-slide-right me-15px">Choose package<span class="bg-very-light-gray"></span></a>
<div class="cover-background background-position-center-bottom position-absolute right-0px top-0px h-100 w-65px" style="background-image: url('images/demo-gym-and-fitness-prices-03.jpg');"></div>
</div>
</div>
</div>
</div>
</section>
<section class="border-top border-color-extra-medium-gray">
<div class="container">
<div class="row justify-content-center">
<div class="row justify-content-center mb-5">
<div class="col-lg-8 align-items-center justify-content-center z-index-1 d-block d-md-flex text-center text-md-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [15,0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="text-red fw-700 alt-font border-end sm-border-end-0 border-color-extra-medium-gray pt-10px pb-10px pe-30px me-30px text-uppercase sm-me-0 sm-pe-0">Delicious meals</span>
<h3 class="mb-0 alt-font text-dark-gray fw-700 ls-minus-1px">Exclusive menu</h3>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-6">
<ul class="pricing-table-style-11 mb-0 md-ps-0 md-pe-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-30,0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="last-paragraph-no-margin border-0 border-bottom border-dashed border-color-extra-medium-gray">
<div class="align-items-center w-100 d-block d-sm-flex text-center text-sm-start">
<div class="col-auto position-relative me-25px xs-me-0 xs-mb-15px">
<span class="position-relative d-inline-block"><img src="images/demo-pizza-parlor-home-04.jpg" class="rounded-circle" alt>
<span class="popular-label h-40px w-40px text-white bg-jade alt-font fw-600 fs-10 lh-22 text-uppercase left-minus-20px top-0px">New</span></span>
</div>
<div class="col ms-auto xs-mb-10px">
<span class="item fw-600 text-dark-gray fs-18">Spring fling pizza<span class="d-none d-xl-inline-block align-middle primary-font fs-12 fw-600 lh-28 bg-light-red text-dark-gray text-uppercase border-radius-30px ps-15px pe-15px ms-15px"><i class="feather icon-feather-thumbs-up me-5px"></i>Must try</span></span>
<p>Lorem ipsum has been the industry.</p>
</div>
<div class="col-auto ms-25px xs-ms-0">
<span class="fs-26 fw-600 text-dark-gray"><sup>$</sup>10.00</span>
</div>
</div>
</li>
<li class="last-paragraph-no-margin border-0 border-bottom border-dashed border-color-extra-medium-gray">
<div class="align-items-center w-100 d-block d-sm-flex text-center text-sm-start">
<div class="col-auto position-relative me-25px xs-me-0 xs-mb-15px">
<span class="position-relative d-inline-block"><img src="images/demo-pizza-parlor-home-05.jpg" class="rounded-circle" alt></span>
</div>
<div class="col ms-auto xs-mb-10px">
<span class="item fw-600 text-dark-gray fs-18">Farm villa pizza</span>
<p>Lorem ipsum has been the industry.</p>
</div>
<div class="col-auto ms-25px xs-ms-0">
<span class="fs-26 fw-600 text-dark-gray"><sup>$</sup>18.00</span>
</div>
</div>
</li>
<li class="last-paragraph-no-margin md-border-bottom border-color-extra-medium-gray">
<div class="align-items-center w-100 d-block d-sm-flex text-center text-sm-start">
<div class="col-auto position-relative me-25px xs-me-0 xs-mb-15px">
<span class="position-relative d-inline-block"><img src="images/demo-pizza-parlor-home-06.jpg" class="rounded-circle" alt>
<span class="popular-label h-40px w-40px text-white bg-red alt-font fw-700 fs-10 lh-22 text-uppercase left-minus-20px top-0px">Hot</span></span>
</div>
<div class="col ms-auto xs-mb-10px">
<span class="item fw-600 text-dark-gray fs-18">Paneer tikka pizza</span>
<p>Lorem ipsum has been the industry.</p>
</div>
<div class="col-auto ms-25px xs-ms-0">
<span class="fs-26 fw-600 text-dark-gray"><sup>$</sup>22.00</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="pricing-table-style-11 mb-0 md-ps-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [30,0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="last-paragraph-no-margin border-0 border-bottom border-dashed border-color-extra-medium-gray">
<div class="align-items-center w-100 d-block d-sm-flex text-center text-sm-start">
<div class="col-auto position-relative me-25px xs-me-0 xs-mb-15px">
<span class="position-relative d-inline-block"><img src="images/demo-pizza-parlor-home-07.jpg" class="rounded-circle" alt></span>
</div>
<div class="col ms-auto xs-mb-10px">
<span class="item fw-600 text-dark-gray fs-18">Korma special pizza</span>
<p>Lorem ipsum has been the industry.</p>
</div>
<div class="col-auto ms-25px xs-ms-0">
<span class="fs-26 fw-600 text-dark-gray"><sup>$</sup>12.00</span>
</div>
</div>
</li>
<li class="last-paragraph-no-margin border-0 border-bottom border-dashed border-color-extra-medium-gray">
<div class="align-items-center w-100 d-block d-sm-flex text-center text-sm-start">
<div class="col-auto position-relative me-25px xs-me-0 xs-mb-15px">
<span class="position-relative d-inline-block"><img src="images/demo-pizza-parlor-home-08.jpg" class="rounded-circle" alt>
<span class="popular-label h-40px w-40px text-white bg-red alt-font fw-600 fs-10 lh-22 text-uppercase left-minus-20px top-0px">Hot</span></span>
</div>
<div class="col ms-auto xs-mb-10px">
<span class="item fw-600 text-dark-gray fs-18">Hot passion pizza<span class="d-none d-xl-inline-block align-middle primary-font fs-12 fw-600 lh-28 text-dark-gray bg-light-red text-uppercase border-radius-30px ps-15px pe-15px ms-15px"><i class="feather icon-feather-heart me-5px"></i>Chef love</span></span>
<p>Lorem ipsum has been the industry.</p>
</div>
<div class="col-auto ms-25px xs-ms-0">
<span class="fs-26 fw-600 text-dark-gray"><sup>$</sup>16.00</span>
</div>
</div>
</li>
<li class="last-paragraph-no-margin">
<div class="align-items-center w-100 d-block d-sm-flex text-center text-sm-start">
<div class="col-auto position-relative me-25px xs-me-0 xs-mb-15px">
<span class="position-relative d-inline-block"><img src="images/demo-pizza-parlor-home-09.jpg" class="rounded-circle" alt></span>
</div>
<div class="col ms-auto xs-mb-10px">
<span class="item fw-600 text-dark-gray fs-18">Mexican combo pizza</span>
<p>Lorem ipsum has been the industry.</p>
</div>
<div class="col-auto ms-25px xs-ms-0">
<span class="fs-26 fw-600 text-dark-gray"><sup>$</sup>20.00</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="bg-spring-wood position-relative overflow-hidden">
<div class="position-absolute right-minus-50px top-50px d-none d-lg-inline-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<img src="images/demo-spa-salon-bg-img-02.png" alt>
</div>
<div class="position-absolute left-minus-100px top-50 d-none d-lg-inline-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<img src="images/demo-spa-salon-bg-img-03.png" alt data-no-retina>
</div>
<div class="container overlap-gap-section">
<div class="row justify-content-center mb-2">
<div class="col-lg-6 text-center">
<span class="fs-15 mb-5px text-crusoe-green fw-500 d-block text-uppercase ls-2px">Flexible pricing</span>
<h2 class="alt-font fw-700 ls-minus-1px text-dark-gray">Explore package</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-6">
<ul class="pricing-table-style-12 pe-15px md-pe-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-06.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-19 alt-font fw-600 text-dark-gray">Makeup & massage</span>
<div class="divider-style-03 divider-style-03-02 border-color-transparent-dark-light flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font fw-600 text-dark-gray flex-shrink-0"><sup>$</sup>69</div>
</div>
<p>50 Minute relaxation massage.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-07.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-19 alt-font fw-600 text-dark-gray">Relaxing head</span>
<div class="divider-style-03 divider-style-03-02 border-color-transparent-dark-light flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font fw-600 text-dark-gray flex-shrink-0"><sup>$</sup>29</div>
</div>
<p>One of the best ways to relax head.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-08.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-19 alt-font fw-600 text-dark-gray">Geothermal spa</span>
<div class="divider-style-03 divider-style-03-02 border-color-transparent-dark-light flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font fw-600 text-dark-gray flex-shrink-0"><sup>$</sup>39</div>
</div>
<p>Comforting stimulating atmosphere.</p>
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="pricing-table-style-12 ps-15px md-ps-0 md-pt-20px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-09.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-19 alt-font fw-600 text-dark-gray">Body relaxation</span>
<div class="divider-style-03 divider-style-03-02 border-color-transparent-dark-light flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font fw-600 text-dark-gray flex-shrink-0"><sup>$</sup>35</div>
</div>
<p>Progressive muscle relaxation.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-10.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-19 alt-font fw-600 text-dark-gray">Finnish sauna</span>
<div class="divider-style-03 divider-style-03-02 border-color-transparent-dark-light flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font fw-600 text-dark-gray flex-shrink-0"><sup>$</sup>55</div>
</div>
<p>Traditional finnish sauna experience.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-11.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-19 alt-font fw-600 text-dark-gray">Aromatherapy</span>
<div class="divider-style-03 divider-style-03-02 border-color-transparent-dark-light flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font fw-600 text-dark-gray flex-shrink-0"><sup>$</sup>35</div>
</div>
<p>Using concentrated essential oils.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 md-mb-50px xs-mb-30px">
<img src="images/demo-hotel-and-resort-bistro-06.jpg" class="border-radius-6px w-100" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" alt />
</div>
<div class="col-lg-6 offset-lg-1">
<h4 class="fw-600 text-dark-gray ls-minus-1px ps-30px pe-30px xs-ps-20px xs-pe-20px mb-30px">Signature menus</h4>
<div class="h-2px bg-dark-gray mb-20px"></div>
<ul class="pricing-table-style-13" data-anime="{&quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="flex-column last-paragraph-no-margin overflow-hidden p-0">
<div class="w-100 ps-30px pe-30px pt-10px pb-10px xs-ps-20px xs-pe-20px">
<div class="d-flex align-items-baseline w-100">
<span class="fs-17 fw-600 text-dark-gray">Chicken breast burger</span>
<div class="ms-auto fw-600 text-dark-gray">$95.00</div>
</div>
<p class="fs-16">Mint parsley with apple cider vinegar, salt, spices.</p>
</div>
</li>
<li class="flex-column last-paragraph-no-margin overflow-hidden border border-color-extra-medium-gray border-radius-4px p-0 mt-10px mb-10px">
<div class="w-100 bg-red text-white fs-13 text-uppercase fw-600 ps-30px pe-30px xs-ps-20px xs-pe-20px">Chef special</div>
<div class="w-100 ps-30px pe-30px pt-10px pb-10px xs-ps-20px xs-pe-20px">
<div class="d-flex align-items-baseline w-100">
<span class="fs-17 fw-600 text-dark-gray">Medium cut spicy chips</span>
<div class="ms-auto fw-600 text-dark-gray">$85.00</div>
</div>
<p class="fs-16">Marinated tomatoes, fragrant curry, tamarillo.</p>
</div>
</li>
<li class="flex-column last-paragraph-no-margin overflow-hidden p-0">
<div class="w-100 ps-30px pe-30px pt-10px pb-10px xs-ps-20px xs-pe-20px">
<div class="d-flex align-items-baseline w-100">
<span class="fs-17 fw-600 text-dark-gray">Baked potato pizza</span>
<div class="ms-auto fw-600 text-dark-gray">$75.00</div>
</div>
<p class="fs-16">Hollandaise sauce, green beans and potato galette.</p>
</div>
</li>
<li class="flex-column last-paragraph-no-margin overflow-hidden p-0">
<div class="w-100 ps-30px pe-30px pt-10px pb-10px xs-ps-20px xs-pe-20px">
<div class="d-flex align-items-baseline w-100">
<span class="fs-17 fw-600 text-dark-gray">Chicken breast burger</span>
<div class="ms-auto fw-600 text-dark-gray">$73.00</div>
</div>
<p class="fs-16">Hollandaise sauce, potato and green beans.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<footer class="footer-demo bg-dark-slate-blue pb-4 sm-pb-50px" style="background-image: url('images/demo-footer-pattern.svg')">
<div class="container">
<div class="row mb-6 md-mb-30px">
<div class="col-xl-5 col-lg-6 md-mb-30px text-center text-lg-start">
<h3 class="text-white fw-600 alt-font mb-40px ls-minus-1px md-mb-30px md-w-60 sm-w-70 xs-w-100 md-mx-auto">Craft a standout website with crafto.</h3>
<div class="row">
<div class="col-lg-5 col-sm-6 xs-mb-20px">
<span class="alt-font fs-14 fw-600 text-uppercase d-block text-white ls-1px lh-18">Presale questions</span>
<a href="cdn-cgi/l/email-protection.html#244d4a424b64504c4149415e45450a474b49"><span class="__cf_email__" data-cfemail="d6bfb8b0b996a2beb3bbb3acb7b7f8b5b9bb">[email&#160;protected]</span></a>
</div>
<div class="col-lg-5 col-sm-6">
<span class="alt-font fs-14 fw-600 text-uppercase d-block text-white ls-1px lh-18">Getting started</span>
<a href="https://1.envato.market/R53mL2" target="_blank">Purchase on Envato</a>
</div>
</div>
</div>
<div class="col-lg-2 col-6 offset-xl-1 text-center text-lg-start">
<span class="alt-font fs-14 fw-600 text-uppercase text-white ls-1px d-block mb-5px">Useful links</span>
<ul>
<li><a href="documentation/index.html" target="_blank">Documentation</a></li>
<li><a href="https://www.themezaa.com/support/" target="_blank">Support center</a></li>
<li><a href="https://www.youtube.com/channel/UCxIgqIkSGVVqEsm-HE-tadQ/" target="_blank">Video tutorials</a></li>
<li><a href="https://themeforest.net/user/themezaa/portfolio" target="_blank">Envato portfolio</a></li>
<li><a href="https://www.themezaa.com/theme-customization/" target="_blank">Customization</a></li>
</ul>
</div>
<div class="col-lg-2 col-6 text-center text-lg-start">
<span class="alt-font fs-14 fw-600 text-uppercase text-white ls-1px d-block mb-5px">Follow Us</span>
<ul>
<li><a href="https://www.facebook.com/themezaastudio/" target="_blank">Facebook</a></li>
<li><a href="https://www.twitter.com/themezaa" target="_blank">Twitter</a></li>
<li><a href="https://www.dribbble.com/linksture" target="_blank">Dribbble</a></li>
<li><a href="https://www.youtube.com/channel/UCxIgqIkSGVVqEsm-HE-tadQ/" target="_blank">Youtube</a></li>
<li><a href="https://www.linkedin.com/company/themezaa/" target="_blank">Linkedin</a></li>
</ul>
</div>
<div class="col-lg-2 order-first order-lg-4 text-center text-lg-start md-mb-20px">
<a href="index.html" class="footer-logo"><img src="images/logo-white-demo.png" data-at2x="images/logo-white-demo@2x.png" alt></a>
</div>
</div>
<div class="row">
<div class="col-lg-7 last-paragraph-no-margin text-center text-lg-start">
<p class="fs-13 lh-22 w-90 md-w-100">ThemeZaa - The best WordPress, Shopify and Magento themes and plugins provider. We design and develop quality themes and plugins to create your awesome website.</p>
</div>
<div class="col-lg-5 text-center text-lg-end md-mt-15px last-paragraph-no-margin">
<p class="fs-13 lh-22">&copy; 2024 Crafto is Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-white">ThemeZaa</a></p>
</div>
</div>
</div>
</footer>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>