Access_New/pages/element-tab.html

2161 lines
118 KiB
HTML
Raw Permalink Normal View History

2024-09-05 05:48:27 +00:00
<!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">Tab</h1>
<h2 class="text-dark-gray d-inline-block fw-400 ls-0px mb-0">Tabs organize content, simplifying navigation by presenting distinct sections or categories with a single click.</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-tab.html#" class="text-dark-gray text-dark-gray-hover">Elements</a></li>
<li>Tab</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gradient-very-light-gray position-relative">
<div class="container">
<div class="row">
<div class="col tab-style-01">
<ul class="nav nav-tabs justify-content-center border-0 text-center fs-18 alt-font fw-600 mb-3">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="element-tab.html#tab_sec1">Planning</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_sec2">Research</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_sec3">Target</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_sec4">Campaign</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active show" id="tab_sec1">
<div class="row justify-content-center align-items-center">
<div class="col-md-6 animation-float sm-mb-50px" data-anime="{ &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<img src="images/demo-seo-agency-03.png" alt>
</div>
<div class="col-lg-5 offset-lg-1 col-md-6 text-center text-md-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;willchange&quot;: &quot;transform&quot;, &quot;opacity&quot;: [0, 1], &quot;rotateY&quot;: [-90, 0], &quot;rotateZ&quot;: [-10, 0], &quot;translateY&quot;: [80, 0], &quot;translateZ&quot;: [50, 0], &quot;staggervalue&quot;: 200, &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;easing&quot;: &quot;easeOutCirc&quot; }">
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 alt-font fw-700 bg-solitude-blue d-inline-block">Working process</span>
<h3 class="alt-font text-dark-gray fw-700 ls-minus-1px">Simple working process to start.</h3>
<p class="w-80 xl-w-85 lg-w-90 md-w-100 mb-30px">We are committed to deliver unique digital media solutions from web development to eCommerce solutions for our happy clients by using our knowledge and expertise.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-rounded btn-base-color btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_sec2">
<div class="row justify-content-center align-items-center">
<div class="col-md-6 animation-float sm-mb-50px">
<img src="images/demo-seo-agency-03.png" alt>
</div>
<div class="col-lg-5 offset-lg-1 col-md-6 text-center text-md-start">
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 alt-font fw-700 bg-solitude-blue d-inline-block">Seo analysis rate</span>
<h3 class="alt-font text-dark-gray fw-700 ls-minus-1px">Get the targeted relevant traffic.</h3>
<p class="w-80 xl-w-85 lg-w-90 md-w-100 mb-30px">Well-optimized sites get more and more traffic over time, and that means more leads and sales. Without SEO, searchers wont be able to find your site, and all your hard work.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-rounded btn-base-color btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_sec3">
<div class="row justify-content-center align-items-center">
<div class="col-md-6 animation-float sm-mb-50px">
<img src="images/demo-seo-agency-03.png" alt>
</div>
<div class="col-lg-5 offset-lg-1 col-md-6 text-center text-md-start">
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 alt-font fw-700 bg-solitude-blue d-inline-block">Working process</span>
<h3 class="alt-font text-dark-gray fw-700 ls-minus-1px">Frequently asked questions</h3>
<p class="w-80 xl-w-85 lg-w-90 md-w-100 mb-30px">We are committed to deliver unique digital media solutions from web development to eCommerce solutions for our happy clients by using our knowledge and expertise.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-rounded btn-base-color btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_sec4">
<div class="row justify-content-center align-items-center">
<div class="col-md-6 animation-float sm-mb-50px">
<img src="images/demo-seo-agency-03.png" alt>
</div>
<div class="col-lg-5 offset-lg-1 col-md-6 text-center text-md-start">
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 alt-font fw-700 bg-solitude-blue d-inline-block">Optimize your website</span>
<h3 class="alt-font text-dark-gray fw-700 ls-minus-1px">How do you get top ranks in seo?</h3>
<p class="w-80 xl-w-85 lg-w-90 md-w-100 mb-30px">We are committed to deliver unique digital media solutions from web development to eCommerce solutions for our happy clients by using our knowledge and expertise.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-rounded btn-base-color btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cover-background" style="background-image: url('images/demo-restaurant-home-05.jpg')">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-7 text-center">
<span class="fs-15 fw-600 text-red text-uppercase mb-5px d-block"><span class="w-5px h-2px bg-red d-inline-block align-middle me-5px"></span>Choose delicious<span class="w-5px h-2px bg-red d-inline-block align-middle ms-5px"></span></span>
<h2 class="alt-font fw-700 text-dark-gray">Exclusive menu</h2>
</div>
</div>
<div class="row mb-6 xs-mb-8">
<div class="col tab-style-02 fs-600">
<ul class="nav nav-tabs fs-18 fw-500 justify-content-center text-center mb-4 sm-mb-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;rotateX&quot;: [30, 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="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="element-tab.html#tab_first1"><i class="line-icon-Chopsticks d-block icon-large mb-10px text-black"></i>Starters</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_first2"><i class="line-icon-Bike-Helmet d-block icon-large mb-10px text-black"></i>Nonvage</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_first3"><i class="line-icon-Doughnut d-block icon-large mb-10px text-black"></i>Vegetarian</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_first4"><i class="line-icon-Cupcake d-block icon-large mb-10px text-black"></i>Dessert</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_first5"><i class="line-icon-Beer d-block icon-large mb-10px text-black"></i>Drinks</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active show" id="tab_first1">
<div class="row justify-content-center">
<div class="col-lg-6 sm-mb-20px">
<ul class="pricing-table-style-12 pe-15px md-pe-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;rotateX&quot;: [-40, 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="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-01.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Boiled organic egg</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$12.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-02.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Chicken breast burger</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$10.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-03.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Medium spicy chips</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$08.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="pricing-table-style-12 ps-15px md-ps-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;rotateX&quot;: [-40, 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="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-04.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Boiled organic egg</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$12.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-05.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Chicken breast burger</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$11.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-06.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Medium spicy chips</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$10.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_first2">
<div class="row justify-content-center">
<div class="col-lg-6 sm-mb-20px">
<ul class="pricing-table-style-12 pe-15px md-pe-0">
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-06.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Boiled organic egg</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$12.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-05.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Chicken breast burger</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$10.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-04.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Medium spicy chips</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$08.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="pricing-table-style-12 ps-15px md-ps-0">
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-03.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Boiled organic egg</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$12.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-02.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Chicken breast burger</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$11.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-01.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Medium spicy chips</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$10.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_first3">
<div class="row justify-content-center">
<div class="col-lg-6 sm-mb-20px">
<ul class="pricing-table-style-12 pe-15px md-pe-0">
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-01.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Boiled organic egg</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$12.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-02.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Chicken breast burger</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$10.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-03.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Medium spicy chips</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$08.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="pricing-table-style-12 ps-15px md-ps-0">
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-04.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Boiled organic egg</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$12.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-05.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Chicken breast burger</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$11.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-06.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Medium spicy chips</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$10.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_first4">
<div class="row justify-content-center">
<div class="col-lg-6 sm-mb-20px">
<ul class="pricing-table-style-12 pe-15px md-pe-0">
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-05.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Boiled organic egg</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$12.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-06.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Chicken breast burger</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$10.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-04.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Medium spicy chips</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$08.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="pricing-table-style-12 ps-15px md-ps-0">
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-03.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Boiled organic egg</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$12.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-01.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Chicken breast burger</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$11.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-02.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Medium spicy chips</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$10.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_first5">
<div class="row justify-content-center">
<div class="col-lg-6 sm-mb-20px">
<ul class="pricing-table-style-12 pe-15px md-pe-0">
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-01.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Boiled organic egg</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$12.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-02.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Chicken breast burger</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$10.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-03.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Medium spicy chips</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$08.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="pricing-table-style-12 ps-15px md-ps-0">
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-04.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Boiled organic egg</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$12.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-05.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Chicken breast burger</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$11.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-restaurant-tab-06.jpg" class="rounded-circle" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-100 fs-18 mb-5px">
<span class="fw-600 text-dark-gray">Medium spicy chips</span>
<div class="divider-style-03 divider-style-03-02 border-color-extra-medium-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fw-600 text-dark-gray">$10.00</div>
</div>
<p>Lorem ipsum has been the industry.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center align-items-center" data-anime="{ &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; }">
<div class="col-12 text-center last-paragraph-no-margin">
<div class="d-inline-block align-middle bg-red fw-500 text-white border-radius-30px ps-20px pe-20px fs-14 me-10px sm-m-10px">Masterchef</div>
<div class="d-inline-block align-middle text-dark-gray fs-18 fw-500">Unique and delicious dishes from the worlds <span class="text-decoration-line-bottom-medium fw-600">best masterchefs.</span></div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center mb-2">
<div class="col-lg-6 col-md-8 text-center">
<span class="fs-15 mb-5px text-gradient-fast-pink-light-yellow fw-700 d-inline-block text-uppercase ls-1px">Luxury services</span>
<h2 class="ls-minus-1px text-dark-gray fw-600">Explore services</h2>
</div>
</div>
<div class="row">
<div class="col tab-style-03">
<ul class="nav nav-tabs justify-content-center text-center fw-500 border-color-light-medium-gray mb-7">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="element-tab.html#tab_third1">Spa massage</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_third2">Swimming pool</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_third3">Private beach</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_third4">Sauna bath</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active show" id="tab_third1">
<div class="row align-items-center justify-content-center g-0">
<div class="col-lg-6 col-md-11 position-relative md-mb-30px" 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; }">
<figure class="mb-0">
<img src="images/demo-spa-salon-facility-tab-01.jpg" alt class="w-95 border-radius-6px">
<figcaption class="position-absolute bottom-90px right-minus-50px xs-bottom-10px sm-right-minus-20px xs-right-minus-10px xs-w-140px">
<img src="images/demo-spa-salon-facility-bg.png" class="animation-float" alt>
</figcaption>
</figure>
</div>
<div class="col-lg-5 col-md-11 offset-lg-1" 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; }">
<span class="fs-15 mb-15px text-gradient-fast-pink-light-yellow fw-700 d-inline-block text-uppercase ls-1px">Spa massage therapy</span>
<h3 class="ls-minus-1px text-dark-gray w-100 fw-600">Spa salon refresh hot round stone massage.</h3>
<p class="mb-35px w-95 sm-w-100">A design-led approach guides the team, implementing practices, products and services that are thoughtful and environmentally sound. family of professionals that creates intelligent designs that help the face of hospitality.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-round-edge btn-transparent-light-gray">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_third2">
<div class="row align-items-center justify-content-center g-0">
<div class="col-lg-6 col-md-11 position-relative md-mb-30px">
<figure class="mb-0">
<img src="images/demo-spa-salon-facility-tab-02.jpg" alt class="w-95 border-radius-6px">
<figcaption class="position-absolute bottom-90px right-minus-50px xs-bottom-10px xs-right-minus-15px xs-w-140px">
<img src="images/demo-spa-salon-facility-bg.png" class="animation-float" alt>
</figcaption>
</figure>
</div>
<div class="col-lg-5 col-md-11 offset-lg-1">
<span class="fs-15 mb-15px text-gradient-fast-pink-light-yellow fw-700 d-inline-block text-uppercase ls-1px">Swimming pool</span>
<h3 class="ls-minus-1px text-dark-gray w-100 fw-600">The best place with a good swimming pool.</h3>
<p class="mb-35px w-95 sm-w-100">A design-led approach guides the team, implementing practices, products and services that are thoughtful and environmentally sound. family of professionals that creates intelligent designs that help the face of hospitality.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-round-edge btn-transparent-light-gray">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_third3">
<div class="row align-items-center justify-content-center g-0">
<div class="col-lg-6 col-md-11 position-relative md-mb-30px">
<figure class="mb-0">
<img src="images/demo-spa-salon-facility-tab-03.jpg" alt class="w-95 border-radius-6px">
<figcaption class="position-absolute bottom-90px right-minus-50px xs-bottom-10px xs-right-minus-15px xs-w-140px">
<img src="images/demo-spa-salon-facility-bg.png" class="animation-float" alt>
</figcaption>
</figure>
</div>
<div class="col-lg-5 col-md-11 offset-lg-1">
<span class="fs-15 mb-15px text-gradient-fast-pink-light-yellow fw-700 d-inline-block text-uppercase ls-1px">Private beach</span>
<h3 class="ls-minus-1px text-dark-gray w-100 fw-600">The best luxury beach for spa massage.</h3>
<p class="mb-35px w-95 sm-w-100">A design-led approach guides the team, implementing practices, products and services that are thoughtful and environmentally sound. family of professionals that creates intelligent designs that help the face of hospitality.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-round-edge btn-transparent-light-gray">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_third4">
<div class="row align-items-center justify-content-center g-0">
<div class="col-lg-6 col-md-11 position-relative md-mb-30px">
<figure class="mb-0">
<img src="images/demo-spa-salon-facility-tab-04.jpg" alt class="w-95 border-radius-6px">
<figcaption class="position-absolute bottom-90px right-minus-50px xs-bottom-10px sm-right-minus-20px xs-right-minus-10px xs-w-140px">
<img src="images/demo-spa-salon-facility-bg.png" class="animation-float" alt>
</figcaption>
</figure>
</div>
<div class="col-lg-5 col-md-11 offset-lg-1">
<span class="fs-15 mb-15px text-gradient-fast-pink-light-yellow fw-700 d-inline-block text-uppercase ls-1px">Sauna bath</span>
<h3 class="ls-minus-1px text-dark-gray w-100 fw-600">Saunas improve your health and wellness.</h3>
<p class="mb-35px w-95 sm-w-100">A design-led approach guides the team, implementing practices, products and services that are thoughtful and environmentally sound. family of professionals that creates intelligent designs that help the face of hospitality.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-round-edge btn-transparent-light-gray">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gradient-very-light-gray">
<div class="container">
<div class="row">
<div class="col-12 tab-style-04">
<ul class="nav nav-tabs border-0 justify-content-center fw-500 fs-19 md-fs-16 mb-4 md-mb-6 sm-mb-5px alt-font">
<li class="nav-item"><a data-bs-toggle="tab" href="element-tab.html#tab_five1" class="nav-link active">Keyword research<span class="tab-border bg-dark-gray"></span></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_five2">Target analysis<span class="tab-border bg-dark-gray"></span></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_five3">Social marketing<span class="tab-border bg-dark-gray"></span></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_five4">Email campaign<span class="tab-border bg-dark-gray"></span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active show" id="tab_five1">
<div class="row align-items-center justify-content-center">
<div class="col-lg-7 col-md-6 sm-mb-30px" data-anime="{ &quot;opacity&quot;: [0, 1], &quot;staggervalue&quot;: 200, &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;easing&quot;: &quot;easeOutCirc&quot; }">
<img src="images/demo-seo-agency-tab-01.png" alt />
</div>
<div class="col-lg-5 col-md-6 ps-8 lg-ps-3 sm-ps-15px text-center text-md-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;willchange&quot;: &quot;transform&quot;, &quot;opacity&quot;: [0, 1], &quot;rotateY&quot;: [-90, 0], &quot;rotateZ&quot;: [-10, 0], &quot;translateY&quot;: [80, 0], &quot;translateZ&quot;: [50, 0], &quot;staggervalue&quot;: 200, &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;easing&quot;: &quot;easeOutCirc&quot; }">
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 ls-1px alt-font fw-700 bg-solitude-blue d-inline-block">Keyword research</span>
<h2 class="alt-font text-dark-gray fw-700 ls-minus-1px">Keywords lead to customers.</h2>
<p class="w-80 xl-w-90 md-w-100">We are committed to deliver unique digital media solutions from web design to eCommerce solutions for our clients by using our knowledge and expertise.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-round-edge btn-dark-gray" style="will-change: transform;">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_five2">
<div class="row align-items-center justify-content-center">
<div class="col-lg-7 col-md-6 sm-mb-30px">
<img src="images/demo-seo-agency-tab-02.png" alt />
</div>
<div class="col-lg-5 col-md-6 ps-8 lg-ps-3 sm-ps-15px text-center text-md-start">
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 ls-1px alt-font fw-700 bg-solitude-blue d-inline-block">Target analysis</span>
<h2 class="alt-font text-dark-gray fw-700 ls-minus-1px">Power your online visibility.</h2>
<p class="w-80 xl-w-90 md-w-100">We are committed to deliver unique digital media solutions from web design to eCommerce solutions for our clients by using our knowledge and expertise.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-round-edge btn-dark-gray" style="will-change: transform;">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_five3">
<div class="row align-items-center justify-content-center">
<div class="col-lg-7 col-md-6 sm-mb-30px">
<img src="images/demo-seo-agency-tab-03.png" alt />
</div>
<div class="col-lg-5 col-md-6 ps-8 lg-ps-3 sm-ps-15px text-center text-md-start">
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 ls-1px alt-font fw-700 bg-solitude-blue d-inline-block">Social marketing</span>
<h2 class="alt-font text-dark-gray fw-700 ls-minus-1px">Brand identity and strategy.</h2>
<p class="w-80 xl-w-90 md-w-100">We are committed to deliver unique digital media solutions from web design to eCommerce solutions for our clients by using our knowledge and expertise.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-round-edge btn-dark-gray" style="will-change: transform;">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_five4">
<div class="row align-items-center justify-content-center">
<div class="col-lg-7 col-md-6 sm-mb-30px">
<img src="images/demo-seo-agency-tab-04.png" alt />
</div>
<div class="col-lg-5 col-md-6 ps-8 lg-ps-3 sm-ps-15px text-center text-md-start">
<span class="ps-20px pe-20px mb-25px md-mb-20px text-uppercase text-cornflower-blue fs-13 lh-40 border-radius-100px md-lh-50 ls-1px alt-font fw-700 bg-solitude-blue d-inline-block">Email marketing</span>
<h2 class="alt-font text-dark-gray fw-700 ls-minus-1px">Tailor-made campaign.</h2>
<p class="w-80 xl-w-90 md-w-100">We are committed to deliver unique digital media solutions from web design to eCommerce solutions for our clients by using our knowledge and expertise.</p>
<a href="element-tab.html#" class="btn btn-medium btn-switch-text btn-round-edge btn-dark-gray" style="will-change: transform;">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-solitude-blue">
<div class="container">
<div class="row justify-content-center mb-4">
<div class="col-xl-8 col-lg-10 text-center">
<h2 class="text-dark-gray fw-600 ls-minus-1px" data-anime="{ &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; }">Professional and highly dedicated business services</h2>
</div>
</div>
<div class="row align-items-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 150, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-xl-3 col-lg-4 col-md-12 tab-style-05 md-mb-30px sm-mb-20px">
<ul class="nav nav-tabs justify-content-center border-0 text-left fw-500 fs-18 alt-font">
<li class="nav-item"><a data-bs-toggle="tab" href="element-tab.html#tab_four1" class="nav-link d-flex align-items-center active"><i class="feather icon-feather-briefcase icon-extra-medium text-dark-gray"></i><span>Business planning</span></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_four2"><i class="feather icon-feather-edit icon-extra-medium text-dark-gray"></i><span>Business research</span></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_four3"><i class="feather icon-feather-compass icon-extra-medium text-dark-gray"></i><span>Tracking operations</span></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_four4"><i class="feather icon-feather-globe icon-extra-medium text-dark-gray"></i><span>Business campaign</span></a></li>
</ul>
</div>
<div class="col-xl-9 col-lg-8 col-md-12">
<div class="tab-content">
<div class="tab-pane fade in active show" id="tab_four1">
<div class="row align-items-center">
<div class="col-md-6 offset-xl-1 sm-mb-30px">
<img src="images/demo-business-tab-01.jpg" alt class="border-radius-6px w-100" />
</div>
<div class="col-xl-4 col-md-6 offset-xl-1 text-center text-md-start">
<span class="fs-18 fw-500 text-base-color mb-25px d-flex align-items-center justify-content-center justify-content-md-start"><span class="text-center w-60px h-60px d-flex justify-content-center align-items-center rounded-circle bg-white box-shadow-medium-bottom align-middle me-15px flex-shrink-0"><i class="feather icon-feather-briefcase fs-22"></i></span>Grow and succeed</span>
<h5 class="alt-font text-dark-gray mb-20px fw-500 ls-minus-1px"><span class="fw-600">Work together</span> to make experience</h5>
<p>We always want our client grow with the product we have delivered and maintaining strong long-term good relationship.</p>
<a href="element-tab.html#" class="btn btn-large btn-box-shadow btn-rounded btn-base-color mt-10px">Explore now</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_four2">
<div class="row align-items-center">
<div class="col-md-6 offset-xl-1 sm-mb-30px">
<img src="images/demo-business-tab-02.jpg" alt class="border-radius-6px w-100" />
</div>
<div class="col-xl-4 col-md-6 offset-xl-1 text-center text-md-start">
<span class="fs-18 fw-500 text-base-color mb-25px d-flex align-items-center justify-content-center justify-content-md-start"><span class="text-center w-60px h-60px d-flex justify-content-center align-items-center rounded-circle bg-white box-shadow-medium-bottom align-middle me-15px flex-shrink-0"><i class="feather icon-feather-edit fs-22"></i></span>Identity strategy</span>
<h5 class="alt-font text-dark-gray mb-20px fw-500 ls-minus-1px"><span class="fw-600">Help our clients</span> succeed by brand</h5>
<p>We always want our client grow with the product we have delivered and maintaining strong long-term good relationship.</p>
<a href="element-tab.html#" class="btn btn-large btn-box-shadow btn-rounded btn-base-color mt-10px">Explore now</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_four3">
<div class="row align-items-center">
<div class="col-md-6 offset-xl-1 sm-mb-30px">
<img src="images/demo-business-tab-03.jpg" alt class="border-radius-6px w-100" />
</div>
<div class="col-xl-4 col-md-6 offset-xl-1 text-center text-md-start">
<span class="fs-18 fw-500 text-base-color mb-25px d-flex align-items-center justify-content-center justify-content-md-start"><span class="text-center w-60px h-60px d-flex justify-content-center align-items-center rounded-circle bg-white box-shadow-medium-bottom align-middle me-15px flex-shrink-0"><i class="feather icon-feather-compass fs-22"></i></span>Grow and succeed</span>
<h5 class="alt-font text-dark-gray mb-20px fw-500 ls-minus-1px"><span class="fw-600">Work together</span> to make experience.</h5>
<p>We always want our client grow with the product we have delivered and maintaining strong long-term good relationship.</p>
<a href="element-tab.html#" class="btn btn-large btn-box-shadow btn-rounded btn-base-color mt-10px">Explore now</a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_four4">
<div class="row align-items-center">
<div class="col-md-6 offset-xl-1 sm-mb-30px">
<img src="images/demo-business-tab-04.jpg" alt class="border-radius-6px w-100" />
</div>
<div class="col-xl-4 col-md-6 offset-xl-1 text-center text-md-start">
<span class="fs-18 fw-500 text-base-color mb-25px d-flex align-items-center justify-content-center justify-content-md-start"><span class="text-center w-60px h-60px d-flex justify-content-center align-items-center rounded-circle bg-white box-shadow-medium-bottom align-middle me-15px flex-shrink-0"><i class="feather icon-feather-globe fs-22"></i></span>Experience strategy</span>
<h5 class="alt-font text-dark-gray mb-20px fw-500 ls-minus-1px"><span class="fw-600">Help our clients</span> succeed by brand</h5>
<p>We always want our client grow with the product we have delivered and maintaining strong long-term good relationship.</p>
<a href="element-tab.html#" class="btn btn-large btn-box-shadow btn-rounded btn-base-color mt-10px">Explore now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="big-section">
<div class="container">
<div class="row justify-content-center mb-1">
<div class="col-xl-7 col-lg-9 col-md-11 text-center">
<h2 class="text-dark-gray fw-700 alt-font ls-minus-1px">Choose the best package your business needs</h2>
</div>
</div>
<div class="row">
<div class="col tab-style-06">
<ul class="nav nav-tabs alt-font justify-content-center border-0 text-center text-uppercase alt-font fw-500 mb-5">
<li class="nav-item bg-white border-color-extra-medium-gray">
<a class="nav-link active fw-500" data-bs-toggle="tab" href="element-tab.html#tab_six1">Monthly</a>
<span class="tab-bg-active bg-dark-gray"></span>
</li>
<li class="nav-item bg-white border-color-extra-medium-gray">
<a class="nav-link fw-500" data-bs-toggle="tab" href="element-tab.html#tab_six2">Yearly</a>
<span class="tab-bg-active bg-dark-gray"></span>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active show" id="tab_six1">
<div class="row align-items-center justify-content-center pricing-table-style-06" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;willchange&quot;: &quot;transform&quot;, &quot;scale&quot;: [0.95, 1], &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-700 alt-font 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 alt-font fw-600 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 opacity-6 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 opacity-6 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-tab.html#" class="btn btn-medium btn-dark-gray btn-round-edge w-100 btn-box-shadow">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-gradient-pink-orange fs-12 lh-26 alt-font fw-700 border-radius-4px box-shadow-large border border-1 border-color-extra-medium-gray d-inline-block">Popular</span>
<h6 class="text-dark-gray fw-700 alt-font 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 alt-font fw-600 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 opacity-5 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-tab.html#" class="btn btn-medium btn-gradient-pink-orange btn-round-edge w-100 btn-box-shadow">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-700 alt-font 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 alt-font fw-600 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-tab.html#" class="btn btn-medium btn-dark-gray btn-round-edge w-100 btn-box-shadow">Choose package</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_six2">
<div class="row align-items-center justify-content-center pricing-table-style-06">
<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 alt-font 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 alt-font fw-600 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 opacity-6 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 opacity-6 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-tab.html#" class="btn btn-medium btn-dark-gray btn-round-edge w-100 btn-box-shadow">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-base-color fs-12 lh-26 alt-font fw-700 border-radius-4px box-shadow-large border border-1 border-color-extra-medium-gray d-inline-block">popular </span>
<h6 class="text-dark-gray fw-600 alt-font 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 alt-font fw-600 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 opacity-5 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-tab.html#" class="btn btn-medium btn-gradient-pink-orange btn-round-edge btn-round-edge w-100 btn-box-shadow">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 alt-font 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 alt-font fw-600 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-tab.html#" class="btn btn-medium btn-dark-gray btn-round-edge w-100 btn-box-shadow">Choose package</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="overflow-hidden pt-0">
<div class="container-fluid p-0">
<div class="row g-0 bg-very-light-gray">
<div class="col-xl-3 col-lg-4 col-md-5 tab-style-07 d-flex align-items-start align-items-xl-center">
<ul class="nav nav-tabs justify-content-center border-0 text-left fs-22 md-fs-19 fw-500">
<li class="nav-item">
<a data-bs-toggle="tab" href="element-tab.html#tab_seven1" class="nav-link active">
<span><span class="me-10px fs-18 fw-500">01</span>Premium cottage</span>
<span class="number-box d-flex justify-content-center align-items-center rounded-circle h-70px w-70px bg-tussock-yellow text-white"><i class="bi bi-arrow-right icon-extra-medium"></i></span>
<span class="bg-hover bg-tussock-yellow"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_seven2">
<span><span class="me-10px fs-18 fw-500">02</span>Studios with terrace</span>
<span class="number-box d-flex justify-content-center align-items-center rounded-circle h-70px w-70px bg-tussock-yellow text-white"><i class="bi bi-arrow-right icon-extra-medium"></i></span>
<span class="bg-hover bg-tussock-yellow"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_seven3">
<span><span class="me-10px fs-18 fw-500">03</span>Premium pavilions</span>
<span class="number-box d-flex justify-content-center align-items-center rounded-circle h-70px w-70px bg-tussock-yellow text-white"><i class="bi bi-arrow-right icon-extra-medium"></i></span>
<span class="bg-hover bg-tussock-yellow"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_seven4">
<span><span class="me-10px fs-18 fw-500">04</span>The luxury villa</span>
<span class="number-box d-flex justify-content-center align-items-center rounded-circle h-70px w-70px bg-tussock-yellow text-white"><i class="bi bi-arrow-right icon-extra-medium"></i></span>
<span class="bg-hover bg-tussock-yellow"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_seven5">
<span><span class="me-10px fs-18 fw-500">05</span>Grand deluxe room</span>
<span class="number-box d-flex justify-content-center align-items-center rounded-circle h-70px w-70px bg-tussock-yellow text-white"><i class="bi bi-arrow-right icon-extra-medium"></i></span>
<span class="bg-hover bg-tussock-yellow"></span>
</a>
</li>
</ul>
</div>
<div class="col-xl-9 col-lg-8 col-md-7">
<div class="tab-content h-100">
<div class="tab-pane fade in active show h-100" id="tab_seven1">
<div class="row g-0 h-100 lg-h-auto">
<div class="col-xl-6">
<div class="h-100 lg-h-400px cover-background position-relative" style="background-image: url('images/demo-hotel-and-resort-14.jpg')">
<div class="position-absolute right-0px bottom-0 d-flex">
<div class="ps-40px pe-40px xs-ps-30px xs-pe-30px h-110px bg-white d-flex align-items-center">
<div class="fs-30 fw-700 ls-minus-1px text-dark-gray"><span class="fs-16 fw-500 d-table ls-0px lh-22 text-medium-gray">Starting from</span>$50.00</div>
</div>
<div class="ps-40px pe-40px xs-ps-20px xs-pe-20px h-110px bg-dark-gray d-flex align-items-center">
<a href="element-tab.html#" class="d-flex align-items-center text-white">
<span class="fs-18 fw-600 lh-22 alt-font text-uppercase me-15px">Book<br>now</span><span class="w-55px h-55px bg-white-transparent-extra-light border-radius-100 text-white position-relative"><i class="bi bi-arrow-right-short icon-extra-medium absolute-middle-center lh-0px"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-6 bg-very-light-gray pt-6 pb-6 ps-8 pe-8">
<div class="d-flex align-items-xl-start align-items-center text-center text-xl-start flex-column justify-content-center h-100">
<span class="text-tussock-yellow fw-500 text-uppercase">Phenomenal view</span>
<h3 class="text-dark-gray mb-15px fw-700">Premium cottage</h3>
<p>Discover a private home in the orchard three bedrooms and baths with a private plunge pool and service and a three sided view from the king size bed.</p>
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-3 justify-content-center mt-25px md-mt-15px g-0 w-100">
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px xs-mb-30px overflow-hidden border-end xs-border-end-0 border-color-transparent-base-color">
<div class="feature-box-icon">
<i class="line-icon-French-Fries icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Breakfast included</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px xs-mb-30px overflow-hidden border-end xs-border-end-0 border-color-transparent-base-color">
<div class="feature-box-icon">
<i class="line-icon-Bathrobe icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Laundry facilities</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-25px lg-pe-25px overflow-hidden">
<div class="feature-box-icon">
<i class="line-icon-Car icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Pickup and drop</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in h-100" id="tab_seven2">
<div class="row g-0 h-100 lg-h-auto">
<div class="col-xl-6">
<div class="h-100 lg-h-400px cover-background position-relative" style="background-image: url('images/demo-hotel-and-resort-16.jpg')">
<div class="position-absolute right-0px bottom-0 d-flex">
<div class="ps-40px pe-40px xs-ps-30px xs-pe-30px h-110px bg-white d-flex align-items-center">
<div class="fs-30 fw-700 ls-minus-1px text-dark-gray"><span class="fs-16 fw-500 d-table ls-0px lh-22 text-medium-gray">Starting from</span>$50.00</div>
</div>
<div class="ps-40px pe-40px xs-ps-20px xs-pe-20px h-110px bg-dark-gray d-flex align-items-center">
<a href="element-tab.html#" class="d-flex align-items-center text-white">
<span class="fs-18 fw-600 lh-22 alt-font text-uppercase me-15px">Book<br>now</span><span class="w-55px h-55px bg-white-transparent-extra-light border-radius-100 text-white position-relative"><i class="bi bi-arrow-right-short icon-extra-medium absolute-middle-center lh-0px"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-6 bg-very-light-gray pt-6 pb-6 ps-8 pe-8">
<div class="d-flex align-items-xl-start align-items-center text-center text-xl-start flex-column justify-content-center h-100">
<span class="text-tussock-yellow fw-500 text-uppercase">Garden view</span>
<h3 class="text-dark-gray mb-15px fw-700">Studios with terrace</h3>
<p>Discover a private home in the orchard three bedrooms and baths with a private plunge pool and service and a three sided view from the king size bed.</p>
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-3 justify-content-center mt-25px md-mt-15px g-0 w-100">
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px xs-mb-30px overflow-hidden border-end xs-border-end-0 border-color-transparent-base-color">
<div class="feature-box-icon">
<i class="line-icon-Bathrobe icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Laundry facilities</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px xs-mb-30px overflow-hidden border-end xs-border-end-0 border-color-transparent-base-color">
<div class="feature-box-icon">
<i class="line-icon-French-Fries icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Breakfast included</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-25px lg-pe-25px overflow-hidden">
<div class="feature-box-icon">
<i class="line-icon-Car icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Pickup and drop</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in h-100" id="tab_seven3">
<div class="row g-0 h-100 lg-h-auto">
<div class="col-xl-6">
<div class="h-100 lg-h-400px cover-background position-relative" style="background-image: url('images/demo-hotel-and-resort-17.jpg')">
<div class="position-absolute right-0px bottom-0 d-flex">
<div class="ps-40px pe-40px xs-ps-30px xs-pe-30px h-110px bg-white d-flex align-items-center">
<div class="fs-30 fw-700 ls-minus-1px text-dark-gray"><span class="fs-16 fw-500 d-table ls-0px lh-22 text-medium-gray">Starting from</span>$50.00</div>
</div>
<div class="ps-40px pe-40px xs-ps-20px xs-pe-20px h-110px bg-dark-gray d-flex align-items-center">
<a href="element-tab.html#" class="d-flex align-items-center text-white">
<span class="fs-18 fw-600 lh-22 alt-font text-uppercase me-15px">Book<br>now</span><span class="w-55px h-55px bg-white-transparent-extra-light border-radius-100 text-white position-relative"><i class="bi bi-arrow-right-short icon-extra-medium absolute-middle-center lh-0px"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-6 bg-very-light-gray pt-6 pb-6 ps-8 pe-8">
<div class="d-flex align-items-xl-start align-items-center text-center text-xl-start flex-column justify-content-center h-100">
<span class="text-tussock-yellow fw-500 text-uppercase">Phenomenal view</span>
<h3 class="text-dark-gray mb-15px fw-700">Premium pavilions</h3>
<p>Discover a private home in the orchard three bedrooms and baths with a private plunge pool and service and a three sided view from the king size bed.</p>
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-3 justify-content-center mt-25px md-mt-15px g-0 w-100">
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px xs-mb-30px overflow-hidden border-end xs-border-end-0 border-color-transparent-base-color">
<div class="feature-box-icon">
<i class="line-icon-French-Fries icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Breakfast included</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px xs-mb-30px overflow-hidden border-end xs-border-end-0 border-color-transparent-base-color">
<div class="feature-box-icon">
<i class="line-icon-Bathrobe icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Laundry facilities</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-25px lg-pe-25px overflow-hidden">
<div class="feature-box-icon">
<i class="line-icon-Car icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Pickup and drop</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in h-100" id="tab_seven4">
<div class="row g-0 h-100 lg-h-auto">
<div class="col-xl-6">
<div class="h-100 lg-h-400px cover-background position-relative" style="background-image: url('images/demo-hotel-and-resort-18.jpg')">
<div class="position-absolute right-0px bottom-0 d-flex">
<div class="ps-40px pe-40px xs-ps-30px xs-pe-30px h-110px bg-white d-flex align-items-center">
<div class="fs-30 fw-700 ls-minus-1px text-dark-gray"><span class="fs-16 fw-500 d-table ls-0px lh-22 text-medium-gray">Starting from</span>$50.00</div>
</div>
<div class="ps-40px pe-40px xs-ps-20px xs-pe-20px h-110px bg-dark-gray d-flex align-items-center">
<a href="element-tab.html#" class="d-flex align-items-center text-white">
<span class="fs-18 fw-600 lh-22 alt-font text-uppercase me-15px">Book<br>now</span><span class="w-55px h-55px bg-white-transparent-extra-light border-radius-100 text-white position-relative"><i class="bi bi-arrow-right-short icon-extra-medium absolute-middle-center lh-0px"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-6 bg-very-light-gray pt-6 pb-6 ps-8 pe-8">
<div class="d-flex align-items-xl-start align-items-center text-center text-xl-start flex-column justify-content-center h-100">
<span class="text-tussock-yellow fw-500 text-uppercase">Garden view</span>
<h3 class="text-dark-gray mb-15px fw-700">The luxury villa</h3>
<p>Discover a private home in the orchard three bedrooms and baths with a private plunge pool and service and a three sided view from the king size bed.</p>
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-3 justify-content-center mt-25px md-mt-15px g-0 w-100">
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px xs-mb-30px overflow-hidden border-end xs-border-end-0 border-color-transparent-base-color">
<div class="feature-box-icon">
<i class="line-icon-Bathrobe icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Laundry facilities</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px xs-mb-30px overflow-hidden border-end xs-border-end-0 border-color-transparent-base-color">
<div class="feature-box-icon">
<i class="line-icon-French-Fries icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Breakfast included</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-25px lg-pe-25px overflow-hidden">
<div class="feature-box-icon">
<i class="line-icon-Car icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Pickup and drop</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in h-100" id="tab_seven5">
<div class="row g-0 h-100 lg-h-auto">
<div class="col-xl-6">
<div class="h-100 lg-h-400px cover-background position-relative" style="background-image: url('images/demo-hotel-and-resort-19.jpg')">
<div class="position-absolute right-0px bottom-0 d-flex">
<div class="ps-40px pe-40px xs-ps-30px xs-pe-30px h-110px bg-white d-flex align-items-center">
<div class="fs-30 fw-700 ls-minus-1px text-dark-gray"><span class="fs-16 fw-500 d-table ls-0px lh-22 text-medium-gray">Starting from</span>$50.00</div>
</div>
<div class="ps-40px pe-40px xs-ps-20px xs-pe-20px h-110px bg-dark-gray d-flex align-items-center">
<a href="element-tab.html#" class="d-flex align-items-center text-white">
<span class="fs-18 fw-600 lh-22 text-uppercase me-15px">Book<br>now</span><span class="w-55px h-55px bg-white-transparent-extra-light border-radius-100 text-white position-relative"><i class="bi bi-arrow-right-short icon-extra-medium absolute-middle-center lh-0px"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-6 bg-very-light-gray pt-6 pb-6 ps-8 pe-8">
<div class="d-flex align-items-xl-start align-items-center text-center text-xl-start flex-column justify-content-center h-100">
<span class="text-tussock-yellow fw-500 text-uppercase">Mountain view</span>
<h3 class="text-dark-gray mb-15px fw-700">Grand deluxe room</h3>
<p>Discover a private home in the orchard three bedrooms and baths with a private plunge pool and service and a three sided view from the king size bed.</p>
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-3 justify-content-center mt-25px md-mt-15px g-0 w-100">
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px xs-mb-30px overflow-hidden border-end xs-border-end-0 border-color-transparent-base-color">
<div class="feature-box-icon">
<i class="line-icon-French-Fries icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Breakfast included</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px xs-mb-30px overflow-hidden border-end xs-border-end-0 border-color-transparent-base-color">
<div class="feature-box-icon">
<i class="line-icon-Bathrobe icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Laundry facilities</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-25px lg-pe-25px overflow-hidden">
<div class="feature-box-icon">
<i class="line-icon-Car icon-large text-tussock-yellow mb-15px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray fw-600 fs-14 text-uppercase lh-20">Pickup and drop</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-solitude-blue pb-0">
<div class="container">
<div class="row mb-8 sm-mb-10">
<div class="col-12 tab-style-08">
<div class="tab-content">
<div class="tab-pane fade in active show" id="tab_eight1">
<div class="row align-items-center justify-content-center g-lg-0">
<div class="col-md-6 sm-mb-30px position-relative overflow-hidden" data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#2946f3&quot;, &quot;direction&quot;:&quot;lr&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;delay&quot;:50}">
<img src="images/demo-accounting-img-06.jpg" alt class="w-100 border-radius-6px">
<div class="bg-very-light-gray w-250px position-absolute pt-20px pb-20px ps-25px pe-25px border-radius-4px bottom-30px left-30px box-shadow-large d-flex align-items-center" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 800, &quot;staggervalue&quot;: 500, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="vertical-counter d-inline-flex text-dark-gray fw-700 ls-minus-2px md-ls-minus-1px mb-0 text-nowrap border-end border-1 border-color-transparent-dark-very-light pe-20px me-20px" data-to="85"></h2>
<span class="text-dark-gray ls-minus-05px d-inline-block lh-22">Project completed</span>
</div>
</div>
<div class="col-xl-4 col-lg-5 offset-lg-1 col-md-6 text-center text-md-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &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="mb-20px">
<div class="separator-line-1px w-50px bg-base-color d-inline-block align-middle me-10px"></div>
<span class="d-inline-block text-dark-gray align-middle fw-500 fs-20 ls-minus-05px">Strategic planning</span>
</div>
<h4 class="fw-600 text-dark-gray ls-minus-1px md-mb-20px">Organization process of defining strategy.</h4>
<p class="mb-35px md-mb-25px">We provide simplified accounting solutions and qualitative business process services to the customers which helps streamline your business and give your company a competitive. </p>
<a href="element-tab.html#" class="btn btn-large btn-rounded with-rounded btn-white btn-box-shadow fw-600">Learn more<span class="bg-base-color text-white"><i class="bi bi-arrow-right-short icon-extra-medium"></i></span></a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_eight2">
<div class="row align-items-center justify-content-center g-lg-0">
<div class="col-md-6 sm-mb-30px position-relative overflow-hidden">
<img src="images/demo-accounting-img-07.jpg" alt class="w-100 border-radius-4px">
<div class="bg-very-light-gray w-250px position-absolute pt-20px pb-20px ps-25px pe-25px border-radius-4px bottom-30px left-30px box-shadow-large d-flex align-items-center">
<h2 class="vertical-counter d-inline-flex text-dark-gray fw-700 ls-minus-2px md-ls-minus-1px mb-0 text-nowrap border-end border-1 border-color-transparent-dark-very-light pe-20px me-20px" data-to="80"></h2>
<span class="text-dark-gray ls-minus-05px d-inline-block lh-22">Project completed</span>
</div>
</div>
<div class="col-xl-4 col-lg-5 offset-lg-1 col-md-6 text-center text-md-start">
<div class="mb-20px">
<div class="separator-line-1px w-50px bg-base-color d-inline-block align-middle me-10px"></div>
<span class="d-inline-block text-dark-gray align-middle fw-500 fs-20 ls-minus-05px">Audit assurance</span>
</div>
<h4 class="fw-600 text-dark-gray ls-minus-1px md-mb-20px">An excellent audit service for company.</h4>
<p class="mb-35px md-mb-25px">We provide simplified accounting solutions and qualitative business process services to the customers which helps streamline your business and give your company a competitive. </p>
<a href="element-tab.html#" class="btn btn-large btn-rounded with-rounded btn-white btn-box-shadow fw-600">Learn more<span class="bg-base-color text-white"><i class="bi bi-arrow-right-short icon-extra-medium"></i></span></a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_eight3">
<div class="row align-items-center justify-content-center g-lg-0">
<div class="col-md-6 sm-mb-30px position-relative overflow-hidden">
<img src="images/demo-accounting-img-08.jpg" alt class="w-100 border-radius-4px">
<div class="bg-very-light-gray w-250px position-absolute pt-20px pb-20px ps-25px pe-25px border-radius-4px bottom-30px left-30px box-shadow-large d-flex align-items-center">
<h2 class="vertical-counter d-inline-flex text-dark-gray fw-700 ls-minus-2px md-ls-minus-1px mb-0 text-nowrap border-end border-1 border-color-transparent-dark-very-light pe-20px me-20px" data-to="85"></h2>
<span class="text-dark-gray ls-minus-05px d-inline-block lh-22">Project completed</span>
</div>
</div>
<div class="col-xl-4 col-lg-5 offset-lg-1 col-md-6 text-center text-md-start">
<div class="mb-20px">
<div class="separator-line-1px w-50px bg-base-color d-inline-block align-middle me-10px"></div>
<span class="d-inline-block text-dark-gray align-middle fw-500 fs-20 ls-minus-05px">Financial projections</span>
</div>
<h4 class="fw-600 text-dark-gray ls-minus-1px md-mb-20px">We are leader in tax advisor and financial.</h4>
<p class="mb-35px md-mb-25px">We provide simplified accounting solutions and qualitative business process services to the customers which helps streamline your business and give your company a competitive. </p>
<a href="element-tab.html#" class="btn btn-large btn-rounded with-rounded btn-white btn-box-shadow fw-600">Learn more<span class="bg-base-color text-white"><i class="bi bi-arrow-right-short icon-extra-medium"></i></span></a>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_eight4">
<div class="row align-items-center justify-content-center g-lg-0">
<div class="col-md-6 sm-mb-30px position-relative overflow-hidden">
<img src="images/demo-accounting-img-09.jpg" alt class="w-100 border-radius-4px">
<div class="bg-very-light-gray w-250px position-absolute pt-20px pb-20px ps-25px pe-25px border-radius-4px bottom-30px left-30px box-shadow-large d-flex align-items-center">
<h2 class="vertical-counter d-inline-flex text-dark-gray fw-700 ls-minus-2px md-ls-minus-1px mb-0 text-nowrap border-end border-1 border-color-transparent-dark-very-light pe-20px me-20px" data-to="80"></h2>
<span class="text-dark-gray ls-minus-05px d-inline-block lh-22">Project completed</span>
</div>
</div>
<div class="col-xl-4 col-lg-5 offset-lg-1 col-md-6 text-center text-md-start">
<div class="mb-20px">
<div class="separator-line-1px w-50px bg-base-color d-inline-block align-middle me-10px"></div>
<span class="d-inline-block text-dark-gray align-middle fw-500 fs-20 ls-minus-05px">Business planning</span>
</div>
<h4 class="fw-600 text-dark-gray ls-minus-1px md-mb-20px">We creating specific business strategies.</h4>
<p class="mb-35px md-mb-25px">We provide simplified accounting solutions and qualitative business process services to the customers which helps streamline your business and give your company a competitive. </p>
<a href="element-tab.html#" class="btn btn-large btn-rounded with-rounded btn-white btn-box-shadow fw-600">Learn more<span class="bg-base-color text-white"><i class="bi bi-arrow-right-short icon-extra-medium"></i></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-style-08 border-bottom border-color-extra-medium-gray bg-white box-shadow-quadruple-large">
<div class="container">
<ul class="nav nav-tabs border-0 fw-500 fs-19 text-center">
<li class="nav-item"><a data-bs-toggle="tab" href="element-tab.html#tab_eight1" class="nav-link active">Strategic planning<span class="tab-border bg-base-color"></span></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_eight2" data-tab="counter">Audit assurance<span class="tab-border bg-base-color"></span></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_eight3" data-tab="counter">Financial projections<span class="tab-border bg-base-color"></span></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="element-tab.html#tab_eight4" data-tab="counter">Business planning<span class="tab-border bg-base-color"></span></a></li>
</ul>
</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#71181f171e310519141c140b10105f121e1c"><span class="__cf_email__" data-cfemail="e1888f878ea19589848c849b8080cf828e8c">[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>