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

1825 lines
100 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

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

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
</head>
<body data-mobile-nav-style="classic">
<header>
<nav class="navbar navbar-expand-lg header-light header-reverse header-demo" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="index.html">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="default-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="alt-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto col-lg-8 menu-order position-static">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pre-Built Sites</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content background-position-center cover-background" aria-labelledby="navbarDropdownMenuLink1" style="background-image: url('images/pre-built-sites-bg.jpg')">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="demo-corporate.html" target="_blank">Corporate<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-marketing.html" target="_blank">Marketing</a></li>
<li><a href="demo-accounting.html" target="_blank">Accounting<span class="label bg-light-red text-red border-radius-26px">Classic</span></a></li>
<li><a href="demo-beauty-salon.html" target="_blank">Beauty Salon</a></li>
<li><a href="demo-architecture.html" target="_blank">Architecture</a></li>
<li><a href="demo-ebook.html" target="_blank">eBook</a></li>
<li><a href="demo-seo-agency.html" target="_blank">SEO Agency</a></li>
<li><a href="demo-hosting.html" target="_blank">Hosting</a></li>
<li><a href="demo-consulting.html" target="_blank">Consulting</a></li>
<li><a href="demo-green-energy.html" target="_blank">Green Energy</a></li>
<li><a href="demo-business.html" target="_blank">Business</a></li>
<li><a href="demo-interactive-portfolio.html" target="_blank">Interactive Portfolio</a></li>
<li><a href="demo-spa-salon.html" target="_blank">Spa Salon<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
</ul>
<ul class="col">
<li><a href="demo-branding-agency.html" target="_blank">Branding Agency<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-elearning.html" target="_blank">eLearning</a></li>
<li><a href="demo-it-business.html" target="_blank">IT Business<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Modern</span></a></li>
<li><a href="demo-barber.html" target="_blank">Barber</a></li>
<li><a href="demo-hotel-and-resort.html" target="_blank">Hotel & Resort</a></li>
<li><a href="demo-real-estate.html" target="_blank">Real Estate</a></li>
<li><a href="demo-jewellery-store.html" target="_blank">Jewellery Store</a></li>
<li><a href="demo-travel-agency.html" target="_blank">Travel Agency</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Gym & Fitness</a></li>
<li><a href="demo-logistics.html" target="_blank">Logistics</a></li>
<li><a href="demo-design-agency.html" target="_blank">Design Agency<span class="label bg-light-red text-red border-radius-26px">Creative</span></a></li>
<li><a href="demo-photography.html" target="_blank">Photography</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Pizza Parlor</a></li>
</ul>
<ul class="col">
<li><a href="demo-restaurant.html" target="_blank">Restaurant<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Scattered Portfolio</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Data Analysis</a></li>
<li><a href="demo-medical.html" target="_blank">Medical</a></li>
<li><a href="demo-horizontal-portfolio.html" target="_blank">Horizontal Portfolio</a></li>
<li><a href="demo-product-showcase.html" target="_blank">Product Showcase<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-finance.html" target="_blank">Finance</a></li>
<li><a href="demo-elder-care.html" target="_blank">Elder Care</a></li>
<li><a href="demo-fashion-store.html" target="_blank">Fashion Store</a></li>
<li><a href="demo-music-onepage.html" target="_blank">Music</a></li>
<li><a href="demo-vertical-portfolio.html" target="_blank">Vertical Portfolio</a></li>
<li><a href="demo-freelancer.html" target="_blank">Freelancer<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
<li><a href="demo-charity.html" target="_blank">Charity</a></li>
</ul>
<ul class="col">
<li><a href="demo-digital-agency.html" target="_blank">Digital Agency</a></li>
<li><a href="demo-web-agency.html" target="_blank">Web Agency<span class="label bg-white-ice text-jade border-radius-26px">Creative</span></a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Yoga & Meditation</a></li>
<li><a href="demo-startup.html" target="_blank">Startup</a></li>
<li><a href="demo-application.html" target="_blank">Application<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">New</span></a></li>
<li><a href="demo-lawyer.html" target="_blank">Lawyer</a></li>
<li><a href="demo-cryptocurrency.html" target="_blank">Cryptocurrency</a></li>
<li><a href="demo-conference.html" target="_blank">Conference</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Minimal Portfolio<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-decor-store.html" target="_blank">Decor Store</a></li>
<li><a href="demo-magazine.html" target="_blank">Magazine</a></li>
<li><a href="demo-blogger.html" target="_blank">Blogger</a></li>
<li><a href="demo-wedding-invitation.html" target="_blank">Wedding Invitation</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pages</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink2">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">About Pages</li>
<li><a href="demo-branding-agency-about.html" target="_blank">About - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-about.html" target="_blank">About - Restaurant</a></li>
<li><a href="demo-minimal-portfolio-about.html" target="_blank">About - Minimal</a></li>
<li><a href="demo-accounting-company.html" target="_blank">About - Accounting</a></li>
<li><a href="demo-architecture-about.html" target="_blank">About - Architecture</a></li>
<li><a href="demo-digital-agency-about.html" target="_blank">About - Digital</a></li>
<li><a href="demo-photography-about.html" target="_blank">About - Photography</a></li>
<li><a href="demo-design-agency-about.html" target="_blank">About - Agency</a></li>
<li><a href="demo-marketing-about.html" target="_blank">About - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-scattered-portfolio-about.html" target="_blank">About - Scattered</a></li>
<li><a href="demo-medical-about.html" target="_blank">About - Medical</a></li>
<li><a href="demo-web-agency-about.html" target="_blank">About - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-startup-who-we-are.html" target="_blank">About - Startup</a></li>
<li><a href="demo-hotel-and-resort-about-us.html" target="_blank">About - Hotel</a></li>
<li><a href="demo-elearning-about.html" target="_blank">About - eLearning<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Services Pages</li>
<li><a href="demo-accounting-services.html" target="_blank">Services - Accounting</a></li>
<li><a href="demo-marketing-services.html" target="_blank">Services - Marketing</a></li>
<li><a href="demo-branding-agency-services.html" target="_blank">Services - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-minimal-portfolio-expertise.html" target="_blank">Services - Minimal</a></li>
<li><a href="demo-web-agency-expertise.html" target="_blank">Services - Web</a></li>
<li><a href="demo-architecture-services.html" target="_blank">Services - Architecture</a></li>
<li><a href="demo-digital-agency-expertise.html" target="_blank">Services - Digital</a></li>
<li><a href="demo-startup-services.html" target="_blank">Services - Startup</a></li>
<li><a href="demo-scattered-portfolio-expertise.html" target="_blank">Services - Scattered</a></li>
<li><a href="demo-lawyer-practice-areas.html" target="_blank">Services - Lawyer</a></li>
<li><a href="demo-corporate-services.html" target="_blank">Services - Corporate<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-data-analysis-what-we-do.html" target="_blank">Services - Data Analysis</a></li>
<li><a href="demo-marketing-services-details.html" target="_blank">Single Marketing</a></li>
<li><a href="demo-accounting-services-details.html" target="_blank">Single Accounting</a></li>
<li><a href="demo-branding-agency-services-detail.html" target="_blank">Single - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Contact Pages</li>
<li><a href="demo-scattered-portfolio-contact.html" target="_blank">Contact - Scattered</a></li>
<li><a href="demo-branding-agency-contact.html" target="_blank">Contact - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-photography-contact.html" target="_blank">Contact - Photography</a></li>
<li><a href="demo-hotel-and-resort-contact.html" target="_blank">Contact - Hotel</a></li>
<li><a href="demo-spa-salon-contact.html" target="_blank">Contact - Spa</a></li>
<li><a href="demo-it-business-contact.html" target="_blank">Contact - IT Business<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-architecture-contact.html" target="_blank">Contact - Architecture</a></li>
<li><a href="demo-design-agency-contact.html" target="_blank">Contact - Agency</a></li>
<li><a href="demo-marketing-contact.html" target="_blank">Contact - Marketing</a></li>
<li><a href="demo-horizontal-portfolio-contact.html" target="_blank">Contact - Portfolio</a></li>
<li><a href="demo-accounting-contact.html" target="_blank">Contact - Accounting</a></li>
<li><a href="demo-elearning-contact.html" target="_blank">Contact - eLearning</a></li>
<li><a href="demo-corporate-contact.html" target="_blank">Contact - Corporate</a></li>
<li><a href="demo-real-estate-contact.html" target="_blank">Contact - Real Estate</a></li>
<li><a href="demo-web-agency-contact.html" target="_blank">Contact - Web</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-corporate-pricing.html" target="_blank">Pricing - Corporate</a></li>
<li><a href="demo-hosting-pricing.html" target="_blank">Pricing - Hosting</a></li>
<li><a href="demo-data-analysis-pricing.html" target="_blank">Pricing - Data Analysis</a></li>
<li><a href="demo-marketing-pricing.html" target="_blank">Pricing - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-consulting-process.html" target="_blank">Process - Consulting</a></li>
<li><a href="demo-accounting-process.html" target="_blank">Process - Accounting</a></li>
<li><a href="demo-startup-clients.html" target="_blank">Clients - Startup</a></li>
<li><a href="demo-business-clients.html" target="_blank">Clients - Business</a></li>
<li><a href="demo-corporate-customer-stories.html" target="_blank">Testimonials - Corporate</a></li>
<li><a href="demo-data-analysis-testimonials.html" target="_blank">Reviews - Data Analysis</a></li>
<li><a href="demo-finance-team.html" target="_blank">Team - Finance</a></li>
<li><a href="demo-marketing-team.html" target="_blank">Team - Marketing</a></li>
<li><a href="demo-web-agency-people.html" target="_blank">Team - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-chefs.html" target="_blank">Chefs - Restaurant</a></li>
<li><a href="demo-pizza-parlor-chefs.html" target="_blank">Chefs - Pizza Parlor</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-real-estate-agents.html" target="_blank">Agents - Real Estate</a></li>
<li><a href="demo-elearning-instructors.html" target="_blank">Instructors - eLearning</a></li>
<li><a href="demo-hotel-and-resort-amenities.html" target="_blank">Amenities - Hotel</a></li>
<li><a href="demo-medical-timetable.html" target="_blank">Timetable - Medical</a></li>
<li><a href="demo-photography-award.html" target="_blank">Award - Photography</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">FAQ - Decor Store</a></li>
<li><a href="demo-charity-causes.html" target="_blank">Causes - Charity</a></li>
<li><a href="demo-restaurant-menu.html" target="_blank">Menu - Restaurant</a></li>
<li><a href="demo-hotel-and-resort-bistro.html" target="_blank">Menu - Hotel<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-pizza-parlor-menu.html" target="_blank">Menu - Pizza</a></li>
<li><a href="demo-application-features.html" target="_blank">Features - Application</a></li>
<li><a href="404.html">Error 404</a></li>
<li><a href="search-result.html">Search Results</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Portfolio</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Classic<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-classic-two-column.html">Classic 2 Column</a></li>
<li><a href="portfolio-classic-three-column.html">Classic 3 Column</a></li>
<li><a href="portfolio-classic-four-column.html">Classic 4 Column</a></li>
<li><a href="portfolio-classic-masonry.html">Classic Masonry</a></li>
<li><a href="portfolio-classic-metro.html">Classic Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Boxed<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-boxed-two-column.html">Boxed 2 Column</a></li>
<li><a href="portfolio-boxed-three-column.html">Boxed 3 Column</a></li>
<li><a href="portfolio-boxed-four-column.html">Boxed 4 Column</a></li>
<li><a href="portfolio-boxed-masonry.html">Boxed Masonry</a></li>
<li><a href="portfolio-boxed-metro.html">Boxed Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Transform<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-transform-two-column.html">Transform 2 Column</a></li>
<li><a href="portfolio-transform-three-column.html">Transform 3 Column</a></li>
<li><a href="portfolio-transform-four-column.html">Transform 4 Column</a></li>
<li><a href="portfolio-transform-masonry.html">Transform Masonry</a></li>
<li><a href="portfolio-transform-metro.html">Transform Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Creative<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-creative-two-column.html">Creative 2 Column</a></li>
<li><a href="portfolio-creative-three-column.html">Creative 3 Column</a></li>
<li><a href="portfolio-creative-four-column.html">Creative 4 Column</a></li>
<li><a href="portfolio-creative-masonry.html">Creative Masonry</a></li>
<li><a href="portfolio-creative-metro.html">Creative Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Attractive<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-attractive-two-column.html">Attractive 2 Column</a></li>
<li><a href="portfolio-attractive-three-column.html">Attractive 3 Column</a></li>
<li><a href="portfolio-attractive-four-column.html">Attractive 4 Column</a></li>
<li><a href="portfolio-attractive-masonry.html">Attractive Masonry</a></li>
<li><a href="portfolio-attractive-metro.html">Attractive Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Clean<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-clean-two-column.html">Clean 2 Column</a></li>
<li><a href="portfolio-clean-three-column.html">Clean 3 Column</a></li>
<li><a href="portfolio-clean-four-column.html">Clean 4 Column</a></li>
<li><a href="portfolio-clean-masonry.html">Clean Masonry</a></li>
<li><a href="portfolio-clean-metro.html">Clean Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Simple<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-simple-two-column.html">Simple 2 Column</a></li>
<li><a href="portfolio-simple-three-column.html">Simple 3 Column</a></li>
<li><a href="portfolio-simple-four-column.html">Simple 4 Column</a></li>
<li><a href="portfolio-simple-masonry.html">Simple Masonry</a></li>
<li><a href="portfolio-simple-metro.html">Simple Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Modern<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-modern-two-column.html">Modern 2 Column</a></li>
<li><a href="portfolio-modern-three-column.html">Modern 3 Column</a></li>
<li><a href="portfolio-modern-four-column.html">Modern 4 Column</a></li>
<li><a href="portfolio-modern-masonry.html">Modern Masonry</a></li>
<li><a href="portfolio-modern-metro.html">Modern Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Other<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-slider.html">Portfolio Slider</a></li>
<li><a href="portfolio-parallax.html">Portfolio Parallax</a></li>
<li><a href="portfolio-justified-gallery.html">Justified Gallery</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Single Project<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-digital-agency-single-project-minimal.html" target="_blank">Single - Minimal</a></li>
<li><a href="demo-branding-agency-single-project-slider.html" target="_blank">Single - Slider</a></li>
<li><a href="demo-architecture-single-project-gallery.html" target="_blank">Single - Gallery</a></li>
<li><a href="demo-interactive-portfolio-single-project-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-design-agency-single-project-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-single-project-creative.html" target="_blank">Single - Creative</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Elements</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink4" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink4">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="element-accordion.html">Accordion</a></li>
<li><a href="element-buttons.html">Button</a></li>
<li><a href="element-team.html">Team</a></li>
<li><a href="element-testimonials.html">Testimonials<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-clients.html">Clients</a></li>
<li><a href="element-review.html">Review</a></li>
<li><a href="element-subscribe.html">Subscribe</a></li>
<li><a href="element-call-to-action.html">Call to Action</a></li>
<li><a href="element-tab.html">Tab<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-google-map.html">Google Map<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-contact-form.html">Contact Form</a></li>
<li><a href="element-columns.html">Columns</a></li>
<li><a href="element-alert-boxes.html">Alert Boxes</a></li>
<li><a href="element-image-gallery.html">Image Gallery</a></li>
</ul>
<ul class="col">
<li><a href="element-progress-bar.html">Progress Bar</a></li>
<li><a href="element-process-step.html">Process Step<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-icon-with-text.html">Icon with Text<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-shape-dividers.html">Shape Dividers</a></li>
<li><a href="element-counters.html">Counters</a></li>
<li><a href="element-countdown.html">Countdown</a></li>
<li><a href="element-fancy-text-box.html">Fancy Text Box</a></li>
<li><a href="element-heading.html">Heading</a></li>
<li><a href="element-dropcaps.html">Dropcaps</a></li>
<li><a href="element-blockquote.html">Blockquote</a></li>
<li><a href="element-highlights.html">Highlights</a></li>
<li><a href="element-lists.html">Lists</a></li>
<li><a href="element-social-icons.html">Social Icons</a></li>
<li><a href="element-pricing-table.html">Pricing Table</a></li>
</ul>
<ul class="col">
<li><a href="element-interactive-banners.html">Interactive Banners</a></li>
<li><a href="element-services-box.html">Services Box</a></li>
<li><a href="element-rotate-box.html">Rotate Box<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-instagram.html">Instagram</a></li>
<li><a href="element-parallax-scrolling.html">Parallax Scrolling</a></li>
<li><a href="element-sliding-box.html">Sliding Box<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-content-carousel.html">Content Carousel</a></li>
<li><a href="element-media.html">Media</a></li>
<li><a href="element-event.html">Event</a></li>
<li><a href="element-dividers.html">Dividers</a></li>
<li><a href="element-horizontal-list-item.html">Horizontal List Item</a></li>
<li><a href="element-banners.html">Banners</a></li>
<li><a href="element-carousel.html">Carousel</a></li>
<li><a href="element-tilt-effect.html">Tilt Effect<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col premium-element cover-background" style="background-image: url('images/premium-elements-bg.jpg')">
<li class="sub-title">Premium Elements</li>
<li><a href="element-adaptive-backgrounds.html">Adaptive Backgrounds</a></li>
<li><a href="element-sticky-column.html">Sticky Column</a></li>
<li><a href="element-3d-parallax-hover.html">3D Parallax Hover</a></li>
<li><a href="demo-restaurant.html" target="_blank">Custom Cursor</a></li>
<li><a href="element-animated-particles.html">Animated Particles</a></li>
<li><a href="element-marquee.html">Marquee</a></li>
<li><a href="element-fancy-heading.html">Fancy Heading</a></li>
<li><a href="element-fancy-images.html">Fancy Images</a></li>
<li><a href="element-scrolling-effects.html">Scrolling Effects</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Features</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink5" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink5">
<li class="dropdown">
<a href="javascript:void(0);">Header<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business.html" target="_blank">Transparent Header</a></li>
<li><a href="demo-corporate.html" target="_blank">White Header</a></li>
<li><a href="header-dark.html" target="_blank">Dark Header</a></li>
<li><a href="demo-digital-agency.html" target="_blank">Left Navigation</a></li>
<li><a href="demo-branding-agency.html" target="_blank">Right Navigation</a></li>
<li><a href="demo-restaurant.html" target="_blank">Center Navigation</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Header with Top Bar</a></li>
<li><a href="demo-startup.html" target="_blank">Header with Push</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Center Logo</a></li>
<li><a href="header-top-logo.html" target="_blank">Top Logo</a></li>
<li><a href="demo-ebook.html" target="_blank">One Page Navigation</a></li>
<li><a href="header-mini.html" target="_blank">Mini Header</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Header with Button</a></li>
<li><a href="demo-marketing.html" target="_blank">Header with Social</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Left Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-left-menu-simple.html" target="_blank">Left Menu Simple</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Left Menu Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Hamburger Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-photography.html" target="_blank">Hamburger Simple</a></li>
<li><a href="demo-architecture.html" target="_blank">Hamburger Creative</a></li>
<li><a href="demo-freelancer.html" target="_blank">Hamburger Clean</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Hamburger Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Header Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-always-fixed.html" target="_blank">Always Fixed</a></li>
<li><a href="demo-application.html" target="_blank">Disable Fixed</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Reverse Auto</a></li>
<li><a href="demo-elder-care.html" target="_blank">Reverse Back Scroll</a></li>
<li><a href="demo-accounting.html" target="_blank">Responsive Sticky</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Mobile Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-startup.html" target="_blank">Classic</a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Modern</a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Full Screen</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Lightbox & Modal<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="modal-simple.html">Simple Modal</a></li>
<li><a href="modal-subscription.html">Subscription</a></li>
<li><a href="modal-contact-form.html">Contact Form</a></li>
<li><a href="modal-youtube-video.html">Youtube Video</a></li>
<li><a href="modal-vimeo-video.html">Vimeo Video</a></li>
<li><a href="modal-google-map.html">Google Map</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Icon Packs<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="icon-packs-icons-mind-line.html">Icons Mind Line</a></li>
<li><a href="icon-packs-feather.html">Feather</a></li>
<li><a href="icon-packs-font-awesome.html">Font Awesome</a></li>
<li><a href="icon-packs-themify.html">Themify</a></li>
<li><a href="icon-packs-bootstrap.html">Bootstrap</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Sliders<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-architecture.html" target="_blank">Revolution</a></li>
<li><a href="demo-startup.html" target="_blank">Swiper</a></li>
</ul>
</li>
<li class="dropdown">
<a href="animations.html">Animations</a>
</li>
<li class="dropdown">
<a href="demo-minimal-portfolio.html" target="_blank">Page Preloader</a>
</li>
<li class="dropdown">
<a href="demo-jewellery-store.html" target="_blank">Cookie Notify</a>
</li>
<li class="dropdown">
<a href="demo-startup.html" target="_blank">Back to Top</a>
</li>
<li class="dropdown">
<a href="demo-design-agency.html" target="_blank">Sticky Footer</a>
</li>
</ul>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Blog</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink6" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink6">
<li class="dropdown"><a href="blog-grid.html">Blog Grid</a></li>
<li class="dropdown"><a href="blog-classic.html">Blog Classic</a></li>
<li class="dropdown"><a href="blog-metro.html">Blog Metro</a></li>
<li class="dropdown"><a href="blog-masonry.html">Blog Masonry</a></li>
<li class="dropdown"><a href="blog-simple.html">Blog Simple</a></li>
<li class="dropdown"><a href="blog-date.html">Blog Date</a></li>
<li class="dropdown"><a href="blog-only-text.html">Blog Only Text</a></li>
<li class="dropdown"><a href="blog-side-image.html">Blog Side Image</a></li>
<li class="dropdown"><a href="blog-modern.html">Blog Modern</a></li>
<li class="dropdown"><a href="blog-standard.html">Blog Standard</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Single Post<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business-blog-single-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-elearning-blog-single-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-blog-single-creative.html" target="_blank">Single - Creative</a></li>
<li><a href="demo-blogger-blog-single-classic.html" target="_blank">Single - Classic</a></li>
<li><a href="demo-architecture-blog-single-clean.html" target="_blank">Single - Clean</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Post Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-post-type-standard.html">Post - Standard</a></li>
<li><a href="blog-post-type-gallery.html">Post - Gallery</a></li>
<li><a href="blog-post-type-slider.html">Post - Slider</a></li>
<li><a href="blog-post-type-audio.html">Post - Audio</a></li>
<li><a href="blog-post-type-video.html">Post - Video</a></li>
<li><a href="blog-post-type-blockquote.html">Post - Blockquote</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Shop</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink7" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink7">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">Shop Layout</li>
<li><a href="demo-fashion-store-shop.html" target="_blank">Left Sidebar</a></li>
<li><a href="demo-fashion-store-right-sidebar.html" target="_blank">Right Sidebar</a></li>
<li><a href="demo-fashion-store-no-sidebar.html" target="_blank">No Sidebar</a></li>
<li><a href="demo-decor-store-collections.html" target="_blank">Collections - Style 01</a></li>
<li><a href="demo-jewellery-store-categories.html" target="_blank">Collections - Style 02</a></li>
<li><a href="demo-fashion-store-collection.html" target="_blank">Collections - Style 03</a></li>
<li><a href="demo-fashion-store-single-product.html" target="_blank">Single Product - Thumb Left</a></li>
<li><a href="demo-decor-store-single-product.html" target="_blank">Single Product - Thumb Bottom</a></li>
</ul>
<ul class="col">
<li class="sub-title">Utility Pages</li>
<li><a href="demo-decor-store-cart.html" target="_blank">Shopping Cart</a></li>
<li><a href="demo-decor-store-checkout.html" target="_blank">Checkout</a></li>
<li><a href="demo-decor-store-account.html" target="_blank">Login / Register</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">Help Center</a></li>
<li><a href="demo-fashion-store-wishlist.html" target="_blank">Wishlist</a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-02.jpg" alt /></a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-01.jpg" alt /></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end xs-pe-0">
<div class="header-icon">
<div class="header-button">
<a href="https://1.envato.market/R53mL2" target="_blank" class="btn btn-dark-gray btn-small btn-switch-text btn-rounded text-transform-none btn-box-shadow purchase-envato">
<span>
<span class="btn-double-text" data-text="Purchase Crafto">Purchase Crafto</span>
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="ipad-top-space-margin md-pt-0">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-xl-6 col-lg-8 text-center position-relative page-title-double-large">
<div class="d-flex flex-column justify-content-center extra-very-small-screen">
<h1 class="text-dark-gray alt-font ls-minus-1px fw-700 mb-20px">Services box</h1>
<h2 class="text-dark-gray d-inline-block fw-400 ls-0px mb-0">Highlight services attractively with the service box element, offering clear presentation and customization options.</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-services-box.html#" class="text-dark-gray text-dark-gray-hover">Elements</a></li>
<li>Services box</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="background-repeat overflow-hidden" style="background-image:url('images/demo-spa-salon-home-bg-01.jpg');">
<div class="container">
<div class="row justify-content-center mb-1">
<div class="col-lg-7 text-center">
<span class="fs-15 alt-font fw-600 text-tussock-yellow text-uppercase ls-2px">Popular classes</span>
<h3 class="fw-600 text-dark-gray ls-minus-1px">Find what you love</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 position-relative">
<div class="outside-box-right-20 sm-outside-box-left-0 sm-outside-box-right-0" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="swiper magic-cursor" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 30, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1400&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;992&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 2 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper pt-20px pb-20px">
<div class="swiper-slide">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image">
<img src="images/demo-yoga-and-meditation-home-02.jpg" alt>
</div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
<a href="element-services-box.html#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Kundalini yoga</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$220</span>Per month</div>
<a href="element-services-box.html#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image">
<img src="images/demo-yoga-and-meditation-home-03.jpg" alt>
</div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
<a href="element-services-box.html#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Aerial yoga</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$240</span>Per month</div>
<a href="element-services-box.html#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image">
<img src="images/demo-yoga-and-meditation-home-04.jpg" alt>
</div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
<a href="element-services-box.html#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Meditation classes</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$100</span>Per month</div>
<a href="element-services-box.html#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image">
<img src="images/demo-yoga-and-meditation-home-05.jpg" alt>
</div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
<a href="element-services-box.html#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Sound therapy</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$270</span>Per month</div>
<a href="element-services-box.html#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image">
<img src="images/demo-yoga-and-meditation-home-06.jpg" alt>
</div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
<a href="element-services-box.html#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Nadabrahma yoga</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$310</span>Per month</div>
<a href="element-services-box.html#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image">
<img src="images/demo-yoga-and-meditation-home-02.jpg" alt>
</div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
<a href="element-services-box.html#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Kundalini yoga</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$220</span>Per month</div>
<a href="element-services-box.html#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image">
<img src="images/demo-yoga-and-meditation-home-03.jpg" alt>
</div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
<a href="element-services-box.html#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Aerial yoga</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$240</span>Per month</div>
<a href="element-services-box.html#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image">
<img src="images/demo-yoga-and-meditation-home-04.jpg" alt>
</div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
<a href="element-services-box.html#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Meditation classes</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$100</span>Per month</div>
<a href="element-services-box.html#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container overlap-gap-section">
<div class="row justify-content-center align-items-center mb-6" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;:200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-auto pe-25px border-2 border-end border-color-red sm-border-end-0 sm-pe-15px">
<span class="text-uppercase text-dark-gray fw-600 ls-1px">Beauty salon services</span>
</div>
<div class="col-12 col-md-auto ps-25px sm-ps-15px text-center">
<h3 class="fw-600 text-dark-gray ls-minus-1px mb-0">Makeup and hairstyles</h3>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 transition-inner-all justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [20, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col mb-20px">
<div class="services-box-style-01 hover-box">
<div class="position-relative box-image border-radius-6px overflow-hidden">
<a href="element-services-box.html#">
<img src="images/demo-beauty-salon-home-02.jpg" alt>
<div class="box-overlay bg-black-transparent-medium"></div>
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-65px h-65px rounded-circle border border-color-transparent-white border-1"><i class="bi bi-arrow-right-short text-white icon-very-medium d-flex"></i></span>
</a>
</div>
<div class="p-25px last-paragraph-no-margin text-center">
<span class="fs-20 text-dark-gray fw-600">Hair treatment</span>
<p class="lh-26">Advanced hair treatment</p>
</div>
</div>
</div>
<div class="col mb-20px">
<div class="services-box-style-01 hover-box">
<div class="position-relative box-image border-radius-6px overflow-hidden">
<a href="element-services-box.html#">
<img src="images/demo-beauty-salon-home-03.jpg" alt>
<div class="box-overlay bg-black-transparent-medium"></div>
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-65px h-65px rounded-circle border border-color-transparent-white border-1"><i class="bi bi-arrow-right-short text-white icon-very-medium d-flex"></i></span>
</a>
</div>
<div class="p-25px last-paragraph-no-margin text-center">
<span class="fs-20 text-dark-gray fw-600">Reflexology</span>
<p class="lh-26">Different amounts of pressure</p>
</div>
</div>
</div>
<div class="col mb-20px">
<div class="services-box-style-01 hover-box">
<div class="position-relative box-image border-radius-6px overflow-hidden">
<a href="element-services-box.html#">
<img src="images/demo-beauty-salon-home-04.jpg" alt>
<div class="box-overlay bg-black-transparent-medium"></div>
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-65px h-65px rounded-circle border border-color-transparent-white border-1"><i class="bi bi-arrow-right-short text-white icon-very-medium d-flex"></i></span>
</a>
</div>
<div class="p-25px last-paragraph-no-margin text-center">
<span class="fs-20 text-dark-gray fw-600">Makeup</span>
<p class="lh-26">Rethink your lash look</p>
</div>
</div>
</div>
<div class="col md-mb-20px">
<div class="services-box-style-01 hover-box">
<div class="position-relative box-image border-radius-6px overflow-hidden">
<a href="element-services-box.html#">
<img src="images/demo-beauty-salon-home-05.jpg" alt>
<div class="box-overlay bg-black-transparent-medium"></div>
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-65px h-65px rounded-circle border border-color-transparent-white border-1"><i class="bi bi-arrow-right-short text-white icon-very-medium d-flex"></i></span>
</a>
</div>
<div class="p-25px last-paragraph-no-margin text-center">
<span class="fs-20 text-dark-gray fw-600">Skin care</span>
<p class="lh-26">Believe in your beauty</p>
</div>
</div>
</div>
<div class="col sm-mb-20px">
<div class="services-box-style-01 hover-box">
<div class="position-relative box-image border-radius-6px overflow-hidden">
<a href="element-services-box.html#">
<img src="images/demo-beauty-salon-home-06.jpg" alt>
<div class="box-overlay bg-black-transparent-medium"></div>
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-65px h-65px rounded-circle border border-color-transparent-white border-1"><i class="bi bi-arrow-right-short text-white icon-very-medium d-flex"></i></span>
</a>
</div>
<div class="p-25px last-paragraph-no-margin text-center">
<span class="fs-20 text-dark-gray fw-600">Cosmetology</span>
<p class="lh-26">Fabulous in every way</p>
</div>
</div>
</div>
<div class="col">
<div class="services-box-style-01 hover-box">
<div class="position-relative box-image border-radius-6px overflow-hidden">
<a href="element-services-box.html#">
<img src="images/demo-beauty-salon-home-07.jpg" alt>
<div class="box-overlay bg-black-transparent-medium"></div>
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-65px h-65px rounded-circle border border-color-transparent-white border-1"><i class="bi bi-arrow-right-short text-white icon-very-medium d-flex"></i></span>
</a>
</div>
<div class="p-25px last-paragraph-no-margin text-center">
<span class="fs-20 text-dark-gray fw-600">Grooming</span>
<p class="lh-26">Especially crafted to suit</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cover-background overflow-hidden" style="background-image: url('images/demo-decor-store-footer-bg.jpg')">
<div class="container">
<div class="row justify-content-center mb-1">
<div class="col-lg-7 text-center">
<span class="fs-17 d-inline-block fw-500 text-uppercase ls-1px">Professional services</span>
<h2 class="alt-font text-white fw-600 ls-minus-1px">Our expertise</h2>
</div>
</div>
<div class="row">
<div class="col-12 position-relative">
<div class="outside-box-right-50 md-outside-box-right-70 sm-outside-box-right-0" data-anime="{ &quot;translateX&quot;: [100, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 250, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="swiper magic-cursor ps-30px pe-30px sm-ps-0 sm-pe-0" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 35, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 3000, &quot;disableOnInteraction&quot;: false }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination-1&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1200&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;992&quot;: { &quot;slidesPerView&quot;: 2, &quot;spaceBetween&quot;: 50 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 2, &quot;spaceBetween&quot;: 40 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper pt-30px pb-30px">
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden">
<div class="col-sm-6 services-box bg-spring-wood p-10 xxl-p-8 xl-p-6">
<div class="services-box-icon">
<i class="line-icon-Basket-Coins icon-extra-large text-tussock-yellow mb-25px"></i>
</div>
<div class="services-box-content">
<a href="element-services-box.html#" class="d-inline-block alt-font text-dark-gray text-dark-gray-hover fs-19 fw-600">Finance planning</a>
<p class="sm-mb-15px">Lorem ipsum consetetur adipicing elit eiusmod tempor incididunt.</p>
<a href="element-services-box.html#" class="btn btn-large thin btn-link text-tussock-yellow fw-600">Learn more</a>
</div>
</div>
<div class="col-sm-6 services-box-img xs-h-300px">
<div class="h-100 cover-background" style="background-image: url('images/demo-finance-03.jpg')"></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden">
<div class="col-sm-6 services-box bg-spring-wood p-10 xxl-p-8 xl-p-6">
<div class="services-box-icon">
<i class="line-icon-Coins icon-extra-large text-tussock-yellow mb-25px"></i>
</div>
<div class="services-box-content">
<a href="element-services-box.html#" class="d-inline-block alt-font text-dark-gray text-dark-gray-hover fs-19 fw-600">Wealth management</a>
<p class="sm-mb-15px">Lorem ipsum consetetur adipicing elit eiusmod tempor incididunt.</p>
<a href="element-services-box.html#" class="btn btn-large thin btn-link text-tussock-yellow fw-600">Learn more</a>
</div>
</div>
<div class="col-sm-6 services-box-img xs-h-300px">
<div class="h-100 cover-background" style="background-image: url('images/demo-finance-04.jpg')"></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden">
<div class="col-sm-6 services-box bg-spring-wood p-10 xxl-p-8 xl-p-6">
<div class="services-box-icon">
<i class="line-icon-Bar-Chart3 icon-extra-large text-tussock-yellow mb-25px"></i>
</div>
<div class="services-box-content">
<a href="element-services-box.html#" class="d-inline-block alt-font text-dark-gray text-dark-gray-hover fs-19 fw-600">Strategic planning</a>
<p class="sm-mb-15px">Lorem ipsum consetetur adipicing elit eiusmod tempor incididunt.</p>
<a href="element-services-box.html#" class="btn btn-large thin btn-link text-tussock-yellow fw-600">Learn more</a>
</div>
</div>
<div class="col-sm-6 services-box-img xs-h-300px">
<div class="h-100 cover-background" style="background-image: url('images/demo-finance-05.jpg')"></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden">
<div class="col-sm-6 services-box bg-spring-wood p-10 xxl-p-8 xl-p-6">
<div class="services-box-icon">
<i class="line-icon-Archery-2 icon-extra-large text-tussock-yellow mb-25px"></i>
</div>
<div class="services-box-content">
<a href="element-services-box.html#" class="d-inline-block alt-font text-dark-gray text-dark-gray-hover fs-19 fw-600">Audit assurance</a>
<p class="sm-mb-15px">Lorem ipsum consetetur adipicing elit eiusmod tempor incididunt.</p>
<a href="element-services-box.html#" class="btn btn-large thin btn-link text-tussock-yellow fw-600">Learn more</a>
</div>
</div>
<div class="col-sm-6 services-box-img xs-h-300px">
<div class="h-100 cover-background" style="background-image: url('images/demo-finance-06.jpg')"></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden">
<div class="col-sm-6 services-box bg-spring-wood p-10 xxl-p-8 xl-p-6">
<div class="services-box-icon">
<i class="line-icon-Basket-Coins icon-extra-large text-tussock-yellow mb-25px"></i>
</div>
<div class="services-box-content">
<a href="element-services-box.html#" class="d-inline-block alt-font text-dark-gray text-dark-gray-hover fs-19 fw-600">Finance planning</a>
<p class="sm-mb-15px">Lorem ipsum consetetur adipicing elit eiusmod tempor incididunt.</p>
<a href="element-services-box.html#" class="btn btn-large thin btn-link text-tussock-yellow fw-600">Learn more</a>
</div>
</div>
<div class="col-sm-6 services-box-img xs-h-300px">
<div class="h-100 cover-background" style="background-image: url('images/demo-finance-03.jpg')"></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden">
<div class="col-sm-6 services-box bg-spring-wood p-10 xxl-p-8 xl-p-6">
<div class="services-box-icon">
<i class="line-icon-Coins icon-extra-large text-tussock-yellow mb-25px"></i>
</div>
<div class="services-box-content">
<a href="element-services-box.html#" class="d-inline-block alt-font text-dark-gray text-dark-gray-hover fs-19 fw-600">Wealth management</a>
<p class="sm-mb-15px">Lorem ipsum consetetur adipicing elit eiusmod tempor incididunt.</p>
<a href="element-services-box.html#" class="btn btn-large thin btn-link text-tussock-yellow fw-600">Learn more</a>
</div>
</div>
<div class="col-sm-6 services-box-img xs-h-300px">
<div class="h-100 cover-background" style="background-image: url('images/demo-finance-04.jpg')"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="background-position-center-top position-relative overflow-hidden sm-background-image-none" style="background-image: url('images/vertical-line-bg.svg')">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-xxl-6 col-xl-7 col-lg-8 col-md-9 col-sm-10 text-center last-paragraph-no-margin" 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;: 100, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="alt-font text-dark-gray mb-10px fw-700">Popular causes</h2>
<p class="w-60 md-w-70 mx-auto sm-w-80 xs-w-100">Currently have 102 project partners across in world that work on child issues.</p>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center mb-5 sm-mb-35px" 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;: 100, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col md-mb-30px">
<div class="box-shadow-quadruple-large box-shadow-quadruple-large-hover services-box-style-03 last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative">
<a href="element-services-box.html#"><img src="images/demo-charity-home-img-05.jpg" alt></a>
<a href="element-services-box.html#" class="btn btn-small btn-rounded btn-white text-dark-gray btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 ls-0px fw-700 position-absolute right-25px top-25px">Education</a>
</div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-20px pb-30px xl-ps-20px xl-pe-20px text-center progress-bar-style-01">
<a href="element-services-box.html#" class="d-inline-block fs-20 fw-600 text-dark-gray text-dark-gray-hover mb-5px ls-minus-05px">Education for children</a>
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
<div class="progress mt-50px mb-15px bg-zircon-grey border-radius-6px h-7px">
<div class="progress-bar bg-dark-gray border-radius-6px h-7px" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-label="child-issue-one">
<span class="progress-bar-percent text-center bg-dark-gray fs-11 lh-12 fw-500 text-white">80%</span>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Goal:</span> $30,000</div>
</div>
<div class="col-6 text-end">
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Raised:</span> $22,000</div>
</div>
</div>
</div>
<div class="border-top border-color-extra-medium-gray pt-15px pb-20px text-center">
<a href="element-services-box.html#" class="btn btn-link btn-hover-animation-switch btn-large text-dark-gray fw-700">
<span>
<span class="btn-text">Explore more</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="col md-mb-30px">
<div class="box-shadow-quadruple-large box-shadow-quadruple-large-hover services-box-style-03 last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative">
<a href="element-services-box.html#"><img src="images/demo-charity-home-img-06.jpg" alt></a>
<a href="element-services-box.html#" class="btn btn-small btn-rounded btn-white text-dark-gray btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 ls-0px fw-700 position-absolute right-25px top-25px">Support</a>
</div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-20px pb-30px xl-ps-20px xl-pe-20px text-center progress-bar-style-01">
<a href="element-services-box.html#" class="d-inline-block fs-20 fw-600 text-dark-gray text-dark-gray-hover mb-5px ls-minus-05px">Build a secure happy life</a>
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
<div class="progress mt-50px mb-15px bg-zircon-grey border-radius-6px h-7px">
<div class="progress-bar bg-dark-gray border-radius-6px h-7px" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-label="child-issue-two">
<span class="progress-bar-percent text-center bg-dark-gray fs-11 lh-12 fw-500 text-white">90%</span>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Goal:</span> $50,000</div>
</div>
<div class="col-6 text-end">
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Raised:</span> $55,000</div>
</div>
</div>
</div>
<div class="border-top border-color-extra-medium-gray pt-15px pb-20px text-center">
<a href="element-services-box.html#" class="btn btn-link btn-hover-animation-switch btn-large text-dark-gray fw-700">
<span>
<span class="btn-text">Explore more</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="box-shadow-quadruple-large box-shadow-quadruple-large-hover services-box-style-03 last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative">
<a href="element-services-box.html#"><img src="images/demo-charity-home-img-07.jpg" alt></a>
<a href="element-services-box.html#" class="btn btn-small btn-rounded btn-white text-dark-gray btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 ls-0px fw-700 position-absolute right-25px top-25px">Childhood</a>
</div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-20px pb-30px xl-ps-20px xl-pe-20px text-center progress-bar-style-01">
<a href="element-services-box.html#" class="d-inline-block fs-20 fw-600 text-dark-gray text-dark-gray-hover mb-5px ls-minus-05px">Save childhood africa</a>
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
<div class="progress mt-50px mb-15px bg-zircon-grey border-radius-6px h-7px">
<div class="progress-bar bg-dark-gray border-radius-6px h-7px" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="child-issue-three">
<span class="progress-bar-percent text-center bg-dark-gray fs-11 lh-12 fw-500 text-white">50%</span>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Goal:</span> $50,000</div>
</div>
<div class="col-6 text-end">
<div class="fs-15 lh-normal"><span class="fw-500 text-dark-gray d-block d-xl-inline-block">Raised:</span> $25,000</div>
</div>
</div>
</div>
<div class="border-top border-color-extra-medium-gray pt-15px pb-20px text-center">
<a href="element-services-box.html#" class="btn btn-link btn-hover-animation-switch btn-large text-dark-gray fw-700">
<span>
<span class="btn-text">Explore more</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div class="text-uppercase text-dark-gray fw-600">All our efforts are made possible only because of your support. <a href="element-services-box.html#" class="text-decoration-line-bottom text-dark-gray text-dark-gray-hover fw-700">See all causes</a></div>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray position-relative">
<div class="container">
<div class="row justify-content-center mb-3 md-mb-30px">
<div class="col-lg-8 align-items-center justify-content-center z-index-1 d-block d-md-flex text-center text-md-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [15,0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="text-red fs-18 ls-minus-05px alt-font fw-700 border-end sm-border-end-0 border-color-transparent-dark-very-light pt-10px pb-10px pe-30px me-30px text-uppercase sm-me-0 sm-pe-0">Our signature</span>
<h3 class="mb-0 alt-font text-dark-gray text-uppercase fw-800 ls-minus-1px">Popular pizza</h3>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col text-center transition-inner-all md-mb-30px">
<div class="services-box-style-04 hover-box last-paragraph-no-margin border-radius-8px overflow-hidden position-relative ps-20px pe-20px lg-ps-10px lg-pe-10px pt-30px pb-40px box-shadow-extra-large-hover">
<div class="mb-5px">
<img src="images/demo-pizza-parlor-home-01.png" alt>
</div>
<div class="box-overlay bg-white z-index-minus-1"></div>
<div>
<div class="bg-orange border-radius-4px mb-20px overflow-hidden d-inline-flex">
<div class="review-star-icon review-star-icon-white fs-17 ps-15px pe-15px lh-36 align-self-center">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<span class="text-white fs-16 lh-32 alt-font fw-600 bg-dark-gray ps-10px pe-10px">5.0</span>
</div>
<div class="fs-19 alt-font lh-32 fw-600 text-dark-gray mb-5px">Mexican green wave</div>
<span class="fs-22 fw-700 alt-font ls-minus-1px text-dark-gray"><del class="me-10px text-red">$25.00</del>$19.00</span>
</div>
</div>
</div>
<div class="col text-center transition-inner-all md-mb-30px">
<div class="services-box-style-04 hover-box last-paragraph-no-margin border-radius-8px overflow-hidden position-relative ps-20px pe-20px lg-ps-10px lg-pe-10px pt-30px pb-40px box-shadow-extra-large-hover">
<div class="mb-5px">
<img src="images/demo-pizza-parlor-home-02.png" alt>
</div>
<div class="box-overlay bg-white z-index-minus-1"></div>
<div>
<div class="bg-orange border-radius-4px mb-20px overflow-hidden d-inline-flex">
<div class="review-star-icon review-star-icon-white fs-17 ps-15px pe-15px lh-36 align-self-center">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<span class="text-white fs-16 lh-32 alt-font fw-600 bg-dark-gray ps-10px pe-10px">4.9</span>
</div>
<div class="fs-19 alt-font lh-32 fw-600 text-dark-gray mb-5px">Indi tandoori paneer</div>
<span class="fs-22 fw-700 alt-font ls-minus-1px text-dark-gray"><del class="me-10px text-red">$24.00</del>$18.00</span>
</div>
</div>
</div>
<div class="col text-center transition-inner-all sm-mb-30px">
<div class="services-box-style-04 hover-box last-paragraph-no-margin border-radius-8px overflow-hidden position-relative ps-20px pe-20px lg-ps-10px lg-pe-10px pt-30px pb-40px box-shadow-extra-large-hover">
<div class="mb-5px">
<img src="images/demo-pizza-parlor-home-03.png" alt>
</div>
<div class="box-overlay bg-white z-index-minus-1"></div>
<div>
<div class="bg-orange border-radius-4px mb-20px overflow-hidden d-inline-flex">
<div class="review-star-icon review-star-icon-white fs-17 ps-15px pe-15px lh-36 align-self-center">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<span class="text-white fs-16 lh-32 alt-font fw-600 bg-dark-gray ps-10px pe-10px">5.0</span>
</div>
<div class="fs-19 alt-font lh-32 fw-600 text-dark-gray mb-5px">Double chicken sausage</div>
<span class="fs-22 fw-700 alt-font ls-minus-1px text-dark-gray"><del class="me-10px text-red">$22.00</del>$20.00</span>
</div>
</div>
</div>
<div class="col text-center transition-inner-all">
<div class="services-box-style-04 hover-box last-paragraph-no-margin border-radius-8px overflow-hidden position-relative ps-20px pe-20px lg-ps-10px lg-pe-10px pt-30px pb-40px box-shadow-extra-large-hover">
<div class="mb-5px">
<img src="images/demo-pizza-parlor-home-12.png" alt>
</div>
<div class="box-overlay bg-white z-index-minus-1"></div>
<div>
<div class="bg-orange border-radius-4px mb-20px overflow-hidden d-inline-flex">
<div class="review-star-icon review-star-icon-white fs-17 ps-15px pe-15px lh-36 align-self-center">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
</div>
<span class="text-white fs-16 lh-32 alt-font fw-600 bg-dark-gray ps-10px pe-10px">4.3</span>
</div>
<div class="fs-19 alt-font lh-32 fw-600 text-dark-gray mb-5px">Grilled veal cooked</div>
<span class="fs-22 fw-700 alt-font ls-minus-1px text-dark-gray"><del class="me-10px text-red">$20.00</del>$16.00</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="big-section bg-dark-gray">
<div class="ps-4 pe-4">
<div class="container-fluid">
<div class="row row-cols-1 row-cols-xl-4 row-cols-lg-3 row-cols-sm-2 justify-content-center">
<div class="col text-center transition-inner-all lg-mb-9 md-mb-11 xs-mb-70px">
<div class="services-box-style-05 box-hover">
<figure class="m-0">
<div class="overflow-hidden position-relative">
<img src="images/blog-images-24.jpg" alt />
<div class="opacity-very-light bg-dark-gray"></div>
</div>
<figcaption class="d-flex justify-content-end align-items-end p-45px xl-p-35px sm-ps-30px sm-pe-30px h-100 w-100">
<div class="bg-white content-box position-relative p-14 md-ps-12 md-pe-12 sm-ps-8 sm-pe-8 overflow-hidden text-center">
<div class="position-relative z-index-2">
<div class="box-title text-dark-gray fs-20 xl-fs-18 fw-600">Global partners the increases revenue</div>
<a href="element-services-box.html#" class="btn btn-link btn-large text-dark-gray mt-15px fw-600">Third glasses</a>
</div>
<div class="box-overlay bg-gradient-emerald-blue-emerald-green"></div>
</div>
</figcaption>
</figure>
</div>
</div>
<div class="col text-center transition-inner-all lg-mb-9 md-mb-11 xs-mb-70px">
<div class="services-box-style-05 box-hover">
<figure class="m-0">
<div class="overflow-hidden position-relative">
<img src="images/blog-images-23.jpg" alt />
<div class="opacity-very-light bg-dark-gray"></div>
</div>
<figcaption class="d-flex justify-content-end align-items-end p-45px xl-p-35px sm-ps-30px sm-pe-30px h-100 w-100">
<div class="bg-white content-box position-relative p-14 md-ps-12 md-pe-12 sm-ps-8 sm-pe-8 overflow-hidden text-center">
<div class="position-relative z-index-2">
<div class="box-title text-dark-gray fs-20 xl-fs-18 fw-600">We are delivering beautiful products</div>
<a href="element-services-box.html#" class="btn btn-link btn-large text-dark-gray mt-15px fw-600">Reddot media</a>
</div>
<div class="box-overlay bg-gradient-emerald-blue-emerald-green"></div>
</div>
</figcaption>
</figure>
</div>
</div>
<div class="col text-center transition-inner-all lg-mb-9 md-mb-11 xs-mb-70px">
<div class="services-box-style-05 box-hover">
<figure class="m-0">
<div class="overflow-hidden position-relative">
<img src="images/blog-images-18.jpg" alt />
<div class="opacity-very-light bg-dark-gray"></div>
</div>
<figcaption class="d-flex justify-content-end align-items-end p-45px xl-p-35px sm-ps-30px sm-pe-30px h-100 w-100">
<div class="bg-white content-box position-relative p-14 md-ps-12 md-pe-12 sm-ps-8 sm-pe-8 overflow-hidden text-center">
<div class="position-relative z-index-2">
<div class="box-title text-dark-gray fs-20 xl-fs-18 fw-600">Bundle layout type different layout</div>
<a href="element-services-box.html#" class="btn btn-link btn-large text-dark-gray mt-15px fw-600">Pixflow studio</a>
</div>
<div class="box-overlay bg-gradient-emerald-blue-emerald-green"></div>
</div>
</figcaption>
</figure>
</div>
</div>
<div class="col text-center transition-inner-all xs-mb-50px">
<div class="services-box-style-05 box-hover">
<figure class="m-0">
<div class="overflow-hidden position-relative">
<img src="images/blog-images-22.jpg" alt />
<div class="opacity-very-light bg-dark-gray"></div>
</div>
<figcaption class="d-flex justify-content-end align-items-end p-45px xl-p-35px sm-ps-30px sm-pe-30px h-100 w-100">
<div class="bg-white content-box position-relative p-14 md-ps-12 md-pe-12 sm-ps-8 sm-pe-8 overflow-hidden text-center">
<div class="position-relative z-index-2">
<div class="box-title text-dark-gray fs-20 xl-fs-18 fw-600">Create memories with great community</div>
<a href="element-services-box.html#" class="btn btn-link btn-large text-dark-gray mt-15px fw-600">Violator series</a>
</div>
<div class="box-overlay bg-gradient-emerald-blue-emerald-green"></div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray position-relative">
<div class="position-absolute left-minus-200px top-25" data-bottom-top="transform: translateY(-80px)" data-top-bottom="transform: translateY(80px)">
<img src="images/demo-elearning-bg-04.png" alt>
</div>
<div class="container position-relative">
<div class="row align-items-center mb-4">
<div class="col-xl-5 lg-mb-30px text-center text-xl-start">
<h2 class="alt-font text-dark-gray fw-700 ls-minus-3px mb-0">Popular courses</h2>
</div>
<div class="col-xl-7 tab-style-04 text-center text-xl-end">
<ul class="portfolio-filter fw-500 nav nav-tabs justify-content-center justify-content-xl-end border-0">
<li class="nav active"><a data-filter="*" href="element-services-box.html#">All</a></li>
<li class="nav"><a data-filter=".development" href="element-services-box.html#">Development</a></li>
<li class="nav"><a data-filter=".business" href="element-services-box.html#">Business</a></li>
<li class="nav"><a data-filter=".design" href="element-services-box.html#">Design</a></li>
<li class="nav"><a data-filter=".marketing" href="element-services-box.html#">Marketing</a></li>
</ul>
</div>
</div>
<div class="row" 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 filter-content p-md-0">
<ul class="portfolio-wrapper grid-loading grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-2col md-grid-2col sm-grid-1col xs-grid-1col gutter-extra-large">
<li class="grid-sizer"></li>
<li class="grid-item design transition-inner-all">
<div class="services-box-style-06 border-radius-6px hover-box overflow-hidden box-shadow-large">
<div class="image">
<a href="element-services-box.html#">
<img src="images/demo-elearning-courses-01.jpg" alt>
</a>
</div>
<div class="bg-white position-relative">
<div class="bg-dark-gray w-80px h-80px md-w-75px md-h-75px rounded-circle d-flex justify-content-center align-items-center fw-500 text-white fs-20 position-absolute right-30px top-minus-40px">$55</div>
<div class="ps-35px pe-35px pt-30px pb-30px xl-ps-25px xl-pe-25px border-bottom border-color-transparent-dark-very-light">
<span class="d-block mb-10px"><a href="element-services-box.html#" class="text-dark-gray text-uppercase fs-15 fw-600 services-text">Design</a><span class="fs-16">Matthew taylor</span></span>
<div class="d-flex align-items-center mb-5px">
<a href="element-services-box.html#" class="text-dark-gray fw-600 fs-19 md-fs-18 lh-28 w-90">Business accounting and taxation fundamental</a>
</div>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<div class="fs-15 float-start ms-5px position-relative top-2px">(20 Reviews)</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center ps-35px pe-35px xl-ps-20px xl-pe-20px pt-15px pb-20px">
<div class="me-auto">
<i class="feather icon-feather-clipboard text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">10 Lessons</span>
</div>
<div class="d-flex align-items-center">
<i class="feather icon-feather-users text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">18 Students</span>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item business marketing transition-inner-all">
<div class="services-box-style-06 border-radius-6px hover-box overflow-hidden box-shadow-large">
<div class="image">
<a href="element-services-box.html#">
<img src="images/demo-elearning-courses-02.jpg" alt>
</a>
</div>
<div class="bg-white position-relative">
<div class="bg-dark-gray w-80px h-80px md-w-75px md-h-75px rounded-circle d-flex justify-content-center align-items-center fw-500 text-white fs-20 position-absolute right-30px top-minus-40px">$65</div>
<div class="ps-35px pe-35px pt-30px pb-30px xl-ps-25px xl-pe-25px border-bottom border-color-transparent-dark-very-light">
<span class="d-block mb-10px"><a href="element-services-box.html#" class="text-dark-gray text-uppercase fs-15 fw-600 services-text">Finance</a><span class="fs-16">Leonel mooney</span></span>
<div class="d-flex align-items-center mb-5px">
<a href="element-services-box.html#" class="text-dark-gray fw-600 fs-19 md-fs-18 lh-28 w-90">Finance fundamentals of management and planning</a>
</div>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<div class="fs-15 float-start ms-5px position-relative top-2px">(39 Reviews)</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center ps-35px pe-35px xl-ps-25px xl-pe-25px pt-15px pb-20px">
<div class="me-auto">
<i class="feather icon-feather-clipboard text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">22 Lessons</span>
</div>
<div>
<i class="feather icon-feather-users text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">30 Students</span>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item development marketing transition-inner-all">
<div class="services-box-style-06 border-radius-6px hover-box overflow-hidden box-shadow-large">
<div class="image">
<a href="element-services-box.html#">
<img src="images/demo-elearning-courses-03.jpg" alt>
</a>
</div>
<div class="bg-white position-relative">
<div class="bg-dark-gray w-80px h-80px md-w-75px md-h-75px rounded-circle d-flex justify-content-center align-items-center fw-500 text-white fs-20 position-absolute right-30px top-minus-40px">$80</div>
<div class="ps-35px pe-35px pt-30px pb-30px xl-ps-25px xl-pe-25px border-bottom border-color-transparent-dark-very-light">
<span class="d-block mb-10px"><a href="element-services-box.html#" class="text-dark-gray text-uppercase fs-15 fw-600 services-text">Design</a><span class="fs-16">Herman miller</span></span>
<div class="d-flex align-items-center mb-5px">
<a href="element-services-box.html#" class="text-dark-gray fw-600 fs-19 md-fs-18 lh-28 w-90">Introduction to application design and development</a>
</div>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<div class="fs-15 float-start ms-5px position-relative top-2px">(55 Reviews)</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center ps-35px pe-35px xl-ps-25px xl-pe-25px pt-15px pb-20px">
<div class="me-auto">
<i class="feather icon-feather-clipboard text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">15 Lessons</span>
</div>
<div>
<i class="feather icon-feather-users text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">55 Students</span>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item business design transition-inner-all">
<div class="services-box-style-06 border-radius-6px hover-box overflow-hidden box-shadow-large">
<div class="image">
<a href="element-services-box.html#">
<img src="images/demo-elearning-courses-04.jpg" alt>
</a>
</div>
<div class="bg-white position-relative">
<div class="bg-dark-gray w-80px h-80px md-w-75px md-h-75px rounded-circle d-flex justify-content-center align-items-center fw-500 text-white fs-20 position-absolute right-30px top-minus-40px">$60</div>
<div class="ps-35px pe-35px pt-30px pb-30px xl-ps-25px xl-pe-25px border-bottom border-color-transparent-dark-very-light">
<span class="d-block mb-10px"><a href="element-services-box.html#" class="text-dark-gray text-uppercase fs-15 fw-600 services-text">Medicine</a><span class="fs-16">Shoko mugikura</span></span>
<div class="d-flex align-items-center mb-5px">
<a href="element-services-box.html#" class="text-dark-gray fw-600 fs-19 md-fs-18 lh-28 w-90">Genetic testing and sequencing technique</a>
</div>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<div class="fs-15 float-start ms-5px position-relative top-2px">(42 Reviews)</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center ps-35px pe-35px xl-ps-25px xl-pe-25px pt-15px pb-20px">
<div class="me-auto">
<i class="feather icon-feather-clipboard text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">10 Lessons</span>
</div>
<div>
<i class="feather icon-feather-users text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">34 Students</span>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item development design transition-inner-all">
<div class="services-box-style-06 border-radius-6px hover-box overflow-hidden box-shadow-large">
<div class="image">
<a href="element-services-box.html#">
<img src="images/demo-elearning-courses-05.jpg" alt>
</a>
</div>
<div class="bg-white position-relative">
<div class="bg-dark-gray w-80px h-80px md-w-75px md-h-75px rounded-circle d-flex justify-content-center align-items-center fw-500 text-white fs-20 position-absolute right-30px top-minus-40px">$70</div>
<div class="ps-35px pe-35px pt-30px pb-30px xl-ps-25px xl-pe-25px border-bottom border-color-transparent-dark-very-light">
<span class="d-block mb-10px"><a href="element-services-box.html#" class="text-dark-gray text-uppercase fs-15 fw-600 services-text">Design</a><span class="fs-16">Alexa harvard</span></span>
<div class="d-flex align-items-center mb-5px">
<a href="element-services-box.html#" class="text-dark-gray fw-600 fs-19 md-fs-18 lh-28 w-90">Introduction to web design and visualization</a>
</div>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<div class="fs-15 float-start ms-5px position-relative top-2px">(56 Reviews)</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center ps-35px pe-35px xl-ps-25px xl-pe-25px pt-15px pb-20px">
<div class="me-auto">
<i class="feather icon-feather-clipboard text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">20 Lessons</span>
</div>
<div>
<i class="feather icon-feather-users text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">59 Students</span>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item development business marketing transition-inner-all">
<div class="services-box-style-06 border-radius-6px hover-box overflow-hidden box-shadow-large">
<div class="image">
<a href="element-services-box.html#">
<img src="images/demo-elearning-courses-06.jpg" alt>
</a>
</div>
<div class="bg-white position-relative">
<div class="bg-dark-gray w-80px h-80px md-w-75px md-h-75px rounded-circle d-flex justify-content-center align-items-center fw-500 text-white fs-20 position-absolute right-30px top-minus-40px">$45</div>
<div class="ps-35px pe-35px pt-30px pb-30px xl-ps-25px xl-pe-25px border-bottom border-color-transparent-dark-very-light">
<span class="d-block mb-10px"><a href="element-services-box.html#" class="text-dark-gray text-uppercase fs-15 fw-600 services-text">Business</a><span class="fs-16">Leonel mooney</span></span>
<div class="d-flex align-items-center mb-5px">
<a href="element-services-box.html#" class="text-dark-gray fw-600 fs-19 md-fs-18 lh-28 w-90">Improve your english vocabulary and language</a>
</div>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<div class="fs-15 float-start ms-5px position-relative top-2px">(76 Reviews)</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center ps-35px pe-35px xl-ps-25px xl-pe-25px pt-15px pb-20px">
<div class="me-auto">
<i class="feather icon-feather-clipboard text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">18 Lessons</span>
</div>
<div>
<i class="feather icon-feather-users text-dark-gray d-inline-block me-5px"></i><span class="fs-16 text-dark-gray fw-500">80 Students</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row justify-content-center" data-anime="{ &quot;opacity&quot;: [0, 1], &quot;translate&quot;: [0, 0], &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-12 text-center mt-5">
<span class="fs-20 text-dark-gray fw-500 ls-minus-05px">We help you find the perfect tutor. It's completely free. <a href="element-services-box.html#" class="fw-600 text-dark-gray">Explore all courses<i class="fa-solid fa-arrow-right ms-5px icon-very-small"></i></a></span>
</div>
</div>
</div>
</section>
<section class="position-relative z-index-1 background-position-left-top background-no-repeat overflow-hidden" style="background-image: url('images/demo-elearning-02.png')">
<div class="position-absolute right-0px bottom-minus-90px z-index-minus-1 d-none d-md-inline-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<img src="images/demo-elearning-04.png" alt>
</div>
<div class="container">
<div class="row align-items-end justify-content-center mb-7 xs-mb-11">
<div class="col-xl-5 col-lg-6 col-md-10 position-relative md-mb-20px text-center text-lg-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="icon-with-text-style-08 mb-20px d-inline-block">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon feature-box-icon-rounded w-55px h-55px rounded-circle bg-yellow me-15px">
<i class="bi bi-globe d-inline-block icon-extra-medium text-dark-gray"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block alt-font fs-18 fw-500 ls-minus-05px text-dark-gray">Know about classes</span>
</div>
</div>
</div>
<h2 class="alt-font text-dark-gray fw-700 ls-minus-2px mb-0">We providing the leading courses.</h2>
</div>
<div class="col-xl-6 col-lg-6 col-md-10 offset-xl-1 text-center text-lg-start last-paragraph-no-margin" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fw-600 mb-5px text-dark-gray d-block fs-18">Online courses from the world's leading experts.</span>
<p class="w-85 xl-w-95 lg-w-100">Lorem ipsum is simply dummy of the printing and typesetting industry lorem ipsum has the industry standard dummy.</p>
</div>
</div>
<div class="row g-0 row-cols-1 row-cols-lg-4 row-cols-sm-2 g-0 align-items-center mb-3" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col services-box-style-07 text-center last-paragraph-no-margin border-end border-color-transparent-dark-very-light md-mb-50px xs-border-end-0">
<div class="pe-50px ps-50px pb-40px xl-ps-30px xl-pe-30px">
<div class="position-relative ms-auto me-auto mb-25px">
<img src="images/demo-elearning-about-icon-01.png" class="h-75px position-relative z-index-1 mt-35px" alt>
<div class="h-100px w-100px rounded-circle bg-very-light-gray position-absolute top-0 start-50 translate-middle-x"></div>
</div>
<span class="fs-18 fw-600 text-dark-gray d-block mb-5px">Skilled instructors</span>
<p class="lh-30">Best online platform for professional courses.</p>
</div>
<div class="d-flex flex-column overflow-hidden w-100 justify-content-center position-relative">
<div class="fs-14 fw-700 text-uppercase text-dark-gray border-top border-bottom border-color-transparent-dark-very-light pt-10px pb-10px "><span class="text-down d-block">Student enrolled</span></div>
<div class="btn-hover d-flex align-items-center justify-content-center bg-dark-gray">
<a href="element-services-box.html#" class="inner-link btn btn-link btn-hover-animation-switch btn-large text-white">
<span>
<span class="btn-text">Great instructors</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
<div class="col services-box-style-07 text-center last-paragraph-no-margin border-end border-color-transparent-dark-very-light md-mb-50px md-border-end-0">
<div class="pe-50px ps-50px pb-40px xl-ps-30px xl-pe-30px">
<div class="position-relative ms-auto me-auto mb-25px">
<img src="images/demo-elearning-about-icon-02.png" class="h-75px position-relative z-index-1 mt-35px" alt>
<div class="h-100px w-100px rounded-circle bg-very-light-gray position-absolute top-0 start-50 translate-middle-x"></div>
</div>
<span class="fs-18 fw-600 text-dark-gray d-block mb-5px">Educator helps</span>
<p class="lh-30">Best online platform for professional courses.</p>
</div>
<div class="d-flex flex-column overflow-hidden w-100 justify-content-center position-relative">
<div class="fs-14 fw-700 text-uppercase text-dark-gray border-top border-bottom border-color-transparent-dark-very-light pt-10px pb-10px "><span class="text-down d-block">Satisfaction rate</span></div>
<div class="btn-hover d-flex align-items-center justify-content-center bg-dark-gray">
<a href="element-services-box.html#" class="inner-link btn btn-link btn-hover-animation-switch btn-large text-white">
<span>
<span class="btn-text">Students feedback</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
<div class="col services-box-style-07 text-center last-paragraph-no-margin border-end border-color-transparent-dark-very-light xs-mb-50px xs-border-end-0">
<div class="pe-50px ps-50px pb-40px xl-ps-30px xl-pe-30px">
<div class="position-relative ms-auto me-auto mb-25px">
<img src="images/demo-elearning-about-icon-03.png" class="h-75px position-relative z-index-1 mt-35px" alt>
<div class="h-100px w-100px rounded-circle bg-very-light-gray position-absolute top-0 start-50 translate-middle-x"></div>
</div>
<span class="fs-18 fw-600 text-dark-gray d-block mb-5px">Get certificate</span>
<p class="lh-30">Best online platform for professional courses.</p>
</div>
<div class="d-flex flex-column overflow-hidden w-100 justify-content-center position-relative">
<div class="fs-14 fw-700 text-uppercase text-dark-gray border-top border-bottom border-color-transparent-dark-very-light pt-10px pb-10px "><span class="text-down d-block">Student enrolled</span></div>
<div class="btn-hover d-flex align-items-center justify-content-center bg-dark-gray">
<a href="element-services-box.html#" class="inner-link btn btn-link btn-hover-animation-switch btn-large text-white">
<span>
<span class="btn-text">Explore courses</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
<div class="col services-box-style-07 text-center last-paragraph-no-margin">
<div class="pe-50px ps-50px pb-40px xl-ps-30px xl-pe-30px">
<div class="position-relative ms-auto me-auto mb-25px">
<img src="images/demo-elearning-about-icon-04.png" class="h-75px position-relative z-index-1 mt-35px" alt>
<div class="h-100px w-100px rounded-circle bg-very-light-gray position-absolute top-0 start-50 translate-middle-x"></div>
</div>
<span class="fs-18 fw-600 text-dark-gray d-block mb-5px">Online classes</span>
<p class="lh-30">Best online platform for professional courses.</p>
</div>
<div class="d-flex flex-column overflow-hidden w-100 justify-content-center position-relative">
<div class="fs-14 fw-700 text-uppercase text-dark-gray border-top border-bottom border-color-transparent-dark-very-light pt-10px pb-10px "><span class="text-down d-block">Top instructors</span></div>
<div class="btn-hover d-flex align-items-center justify-content-center bg-dark-gray">
<a href="element-services-box.html#" class="inner-link btn btn-link btn-hover-animation-switch btn-large text-white">
<span>
<span class="btn-text">Popular courses</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row position-relative">
<div class="col swiper swiper-width-auto feather-shadow text-center" data-slider-options="{ &quot;slidesPerView&quot;: &quot;auto&quot;, &quot;spaceBetween&quot;:80, &quot;centeredSlides&quot;: true, &quot;speed&quot;: 50000, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination-2&quot;, &quot;clickable&quot;: false }, &quot;allowTouchMove&quot;: false, &quot;autoplay&quot;: { &quot;delay&quot;:0, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-four-slide-next-2&quot;, &quot;prevEl&quot;: &quot;.slider-four-slide-prev-2&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper marquee-slide">
<div class="swiper-slide">
<div class="fs-190 lh-normal ls-minus-10px pt-10px pb-10px alt-font fw-600 opacity-1">providing amazing online courses</div>
</div>
<div class="swiper-slide">
<div class="fs-190 lh-normal ls-minus-10px pt-10px pb-10px alt-font fw-600 opacity-1">bringing you outstanding online learning</div>
</div>
<div class="swiper-slide">
<div class="fs-190 lh-normal ls-minus-10px pt-10px pb-10px alt-font fw-600 opacity-1">providing amazing online courses</div>
</div>
<div class="swiper-slide">
<div class="fs-190 lh-normal ls-minus-10px pt-10px pb-10px alt-font fw-600 opacity-1">bringing you outstanding online learning</div>
</div>
</div>
</div>
<div class="col-12 position-absolute top-0 h-100 d-flex justify-content-center align-items-center left-0px z-index-1 text-center">
<h4 class="alt-font text-dark-gray fs-45 fw-600 ls-minus-2px xs-ls-minus-1px mb-0 mt-40px xs-mt-15px">Online learning wherever and whenever.</h4>
</div>
</div>
</div>
</section>
<footer class="footer-demo bg-dark-slate-blue pb-4 sm-pb-50px" style="background-image: url('images/demo-footer-pattern.svg')">
<div class="container">
<div class="row mb-6 md-mb-30px">
<div class="col-xl-5 col-lg-6 md-mb-30px text-center text-lg-start">
<h3 class="text-white fw-600 alt-font mb-40px ls-minus-1px md-mb-30px md-w-60 sm-w-70 xs-w-100 md-mx-auto">Craft a standout website with crafto.</h3>
<div class="row">
<div class="col-lg-5 col-sm-6 xs-mb-20px">
<span class="alt-font fs-14 fw-600 text-uppercase d-block text-white ls-1px lh-18">Presale questions</span>
<a href="cdn-cgi/l/email-protection.html#a2cbccc4cde2d6cac7cfc7d8c3c38cc1cdcf"><span class="__cf_email__" data-cfemail="0a63646c654a7e626f676f706b6b24696567">[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>