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

1617 lines
98 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

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

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
</head>
<body data-mobile-nav-style="classic">
<header>
<nav class="navbar navbar-expand-lg header-light header-reverse header-demo" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="index.html">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="default-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="alt-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto col-lg-8 menu-order position-static">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pre-Built Sites</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content background-position-center cover-background" aria-labelledby="navbarDropdownMenuLink1" style="background-image: url('images/pre-built-sites-bg.jpg')">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="demo-corporate.html" target="_blank">Corporate<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-marketing.html" target="_blank">Marketing</a></li>
<li><a href="demo-accounting.html" target="_blank">Accounting<span class="label bg-light-red text-red border-radius-26px">Classic</span></a></li>
<li><a href="demo-beauty-salon.html" target="_blank">Beauty Salon</a></li>
<li><a href="demo-architecture.html" target="_blank">Architecture</a></li>
<li><a href="demo-ebook.html" target="_blank">eBook</a></li>
<li><a href="demo-seo-agency.html" target="_blank">SEO Agency</a></li>
<li><a href="demo-hosting.html" target="_blank">Hosting</a></li>
<li><a href="demo-consulting.html" target="_blank">Consulting</a></li>
<li><a href="demo-green-energy.html" target="_blank">Green Energy</a></li>
<li><a href="demo-business.html" target="_blank">Business</a></li>
<li><a href="demo-interactive-portfolio.html" target="_blank">Interactive Portfolio</a></li>
<li><a href="demo-spa-salon.html" target="_blank">Spa Salon<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
</ul>
<ul class="col">
<li><a href="demo-branding-agency.html" target="_blank">Branding Agency<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-elearning.html" target="_blank">eLearning</a></li>
<li><a href="demo-it-business.html" target="_blank">IT Business<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Modern</span></a></li>
<li><a href="demo-barber.html" target="_blank">Barber</a></li>
<li><a href="demo-hotel-and-resort.html" target="_blank">Hotel & Resort</a></li>
<li><a href="demo-real-estate.html" target="_blank">Real Estate</a></li>
<li><a href="demo-jewellery-store.html" target="_blank">Jewellery Store</a></li>
<li><a href="demo-travel-agency.html" target="_blank">Travel Agency</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Gym & Fitness</a></li>
<li><a href="demo-logistics.html" target="_blank">Logistics</a></li>
<li><a href="demo-design-agency.html" target="_blank">Design Agency<span class="label bg-light-red text-red border-radius-26px">Creative</span></a></li>
<li><a href="demo-photography.html" target="_blank">Photography</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Pizza Parlor</a></li>
</ul>
<ul class="col">
<li><a href="demo-restaurant.html" target="_blank">Restaurant<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Scattered Portfolio</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Data Analysis</a></li>
<li><a href="demo-medical.html" target="_blank">Medical</a></li>
<li><a href="demo-horizontal-portfolio.html" target="_blank">Horizontal Portfolio</a></li>
<li><a href="demo-product-showcase.html" target="_blank">Product Showcase<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-finance.html" target="_blank">Finance</a></li>
<li><a href="demo-elder-care.html" target="_blank">Elder Care</a></li>
<li><a href="demo-fashion-store.html" target="_blank">Fashion Store</a></li>
<li><a href="demo-music-onepage.html" target="_blank">Music</a></li>
<li><a href="demo-vertical-portfolio.html" target="_blank">Vertical Portfolio</a></li>
<li><a href="demo-freelancer.html" target="_blank">Freelancer<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
<li><a href="demo-charity.html" target="_blank">Charity</a></li>
</ul>
<ul class="col">
<li><a href="demo-digital-agency.html" target="_blank">Digital Agency</a></li>
<li><a href="demo-web-agency.html" target="_blank">Web Agency<span class="label bg-white-ice text-jade border-radius-26px">Creative</span></a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Yoga & Meditation</a></li>
<li><a href="demo-startup.html" target="_blank">Startup</a></li>
<li><a href="demo-application.html" target="_blank">Application<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">New</span></a></li>
<li><a href="demo-lawyer.html" target="_blank">Lawyer</a></li>
<li><a href="demo-cryptocurrency.html" target="_blank">Cryptocurrency</a></li>
<li><a href="demo-conference.html" target="_blank">Conference</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Minimal Portfolio<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-decor-store.html" target="_blank">Decor Store</a></li>
<li><a href="demo-magazine.html" target="_blank">Magazine</a></li>
<li><a href="demo-blogger.html" target="_blank">Blogger</a></li>
<li><a href="demo-wedding-invitation.html" target="_blank">Wedding Invitation</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pages</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink2">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">About Pages</li>
<li><a href="demo-branding-agency-about.html" target="_blank">About - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-about.html" target="_blank">About - Restaurant</a></li>
<li><a href="demo-minimal-portfolio-about.html" target="_blank">About - Minimal</a></li>
<li><a href="demo-accounting-company.html" target="_blank">About - Accounting</a></li>
<li><a href="demo-architecture-about.html" target="_blank">About - Architecture</a></li>
<li><a href="demo-digital-agency-about.html" target="_blank">About - Digital</a></li>
<li><a href="demo-photography-about.html" target="_blank">About - Photography</a></li>
<li><a href="demo-design-agency-about.html" target="_blank">About - Agency</a></li>
<li><a href="demo-marketing-about.html" target="_blank">About - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-scattered-portfolio-about.html" target="_blank">About - Scattered</a></li>
<li><a href="demo-medical-about.html" target="_blank">About - Medical</a></li>
<li><a href="demo-web-agency-about.html" target="_blank">About - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-startup-who-we-are.html" target="_blank">About - Startup</a></li>
<li><a href="demo-hotel-and-resort-about-us.html" target="_blank">About - Hotel</a></li>
<li><a href="demo-elearning-about.html" target="_blank">About - eLearning<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Services Pages</li>
<li><a href="demo-accounting-services.html" target="_blank">Services - Accounting</a></li>
<li><a href="demo-marketing-services.html" target="_blank">Services - Marketing</a></li>
<li><a href="demo-branding-agency-services.html" target="_blank">Services - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-minimal-portfolio-expertise.html" target="_blank">Services - Minimal</a></li>
<li><a href="demo-web-agency-expertise.html" target="_blank">Services - Web</a></li>
<li><a href="demo-architecture-services.html" target="_blank">Services - Architecture</a></li>
<li><a href="demo-digital-agency-expertise.html" target="_blank">Services - Digital</a></li>
<li><a href="demo-startup-services.html" target="_blank">Services - Startup</a></li>
<li><a href="demo-scattered-portfolio-expertise.html" target="_blank">Services - Scattered</a></li>
<li><a href="demo-lawyer-practice-areas.html" target="_blank">Services - Lawyer</a></li>
<li><a href="demo-corporate-services.html" target="_blank">Services - Corporate<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-data-analysis-what-we-do.html" target="_blank">Services - Data Analysis</a></li>
<li><a href="demo-marketing-services-details.html" target="_blank">Single Marketing</a></li>
<li><a href="demo-accounting-services-details.html" target="_blank">Single Accounting</a></li>
<li><a href="demo-branding-agency-services-detail.html" target="_blank">Single - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Contact Pages</li>
<li><a href="demo-scattered-portfolio-contact.html" target="_blank">Contact - Scattered</a></li>
<li><a href="demo-branding-agency-contact.html" target="_blank">Contact - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-photography-contact.html" target="_blank">Contact - Photography</a></li>
<li><a href="demo-hotel-and-resort-contact.html" target="_blank">Contact - Hotel</a></li>
<li><a href="demo-spa-salon-contact.html" target="_blank">Contact - Spa</a></li>
<li><a href="demo-it-business-contact.html" target="_blank">Contact - IT Business<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-architecture-contact.html" target="_blank">Contact - Architecture</a></li>
<li><a href="demo-design-agency-contact.html" target="_blank">Contact - Agency</a></li>
<li><a href="demo-marketing-contact.html" target="_blank">Contact - Marketing</a></li>
<li><a href="demo-horizontal-portfolio-contact.html" target="_blank">Contact - Portfolio</a></li>
<li><a href="demo-accounting-contact.html" target="_blank">Contact - Accounting</a></li>
<li><a href="demo-elearning-contact.html" target="_blank">Contact - eLearning</a></li>
<li><a href="demo-corporate-contact.html" target="_blank">Contact - Corporate</a></li>
<li><a href="demo-real-estate-contact.html" target="_blank">Contact - Real Estate</a></li>
<li><a href="demo-web-agency-contact.html" target="_blank">Contact - Web</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-corporate-pricing.html" target="_blank">Pricing - Corporate</a></li>
<li><a href="demo-hosting-pricing.html" target="_blank">Pricing - Hosting</a></li>
<li><a href="demo-data-analysis-pricing.html" target="_blank">Pricing - Data Analysis</a></li>
<li><a href="demo-marketing-pricing.html" target="_blank">Pricing - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-consulting-process.html" target="_blank">Process - Consulting</a></li>
<li><a href="demo-accounting-process.html" target="_blank">Process - Accounting</a></li>
<li><a href="demo-startup-clients.html" target="_blank">Clients - Startup</a></li>
<li><a href="demo-business-clients.html" target="_blank">Clients - Business</a></li>
<li><a href="demo-corporate-customer-stories.html" target="_blank">Testimonials - Corporate</a></li>
<li><a href="demo-data-analysis-testimonials.html" target="_blank">Reviews - Data Analysis</a></li>
<li><a href="demo-finance-team.html" target="_blank">Team - Finance</a></li>
<li><a href="demo-marketing-team.html" target="_blank">Team - Marketing</a></li>
<li><a href="demo-web-agency-people.html" target="_blank">Team - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-chefs.html" target="_blank">Chefs - Restaurant</a></li>
<li><a href="demo-pizza-parlor-chefs.html" target="_blank">Chefs - Pizza Parlor</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-real-estate-agents.html" target="_blank">Agents - Real Estate</a></li>
<li><a href="demo-elearning-instructors.html" target="_blank">Instructors - eLearning</a></li>
<li><a href="demo-hotel-and-resort-amenities.html" target="_blank">Amenities - Hotel</a></li>
<li><a href="demo-medical-timetable.html" target="_blank">Timetable - Medical</a></li>
<li><a href="demo-photography-award.html" target="_blank">Award - Photography</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">FAQ - Decor Store</a></li>
<li><a href="demo-charity-causes.html" target="_blank">Causes - Charity</a></li>
<li><a href="demo-restaurant-menu.html" target="_blank">Menu - Restaurant</a></li>
<li><a href="demo-hotel-and-resort-bistro.html" target="_blank">Menu - Hotel<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-pizza-parlor-menu.html" target="_blank">Menu - Pizza</a></li>
<li><a href="demo-application-features.html" target="_blank">Features - Application</a></li>
<li><a href="404.html">Error 404</a></li>
<li><a href="search-result.html">Search Results</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Portfolio</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Classic<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-classic-two-column.html">Classic 2 Column</a></li>
<li><a href="portfolio-classic-three-column.html">Classic 3 Column</a></li>
<li><a href="portfolio-classic-four-column.html">Classic 4 Column</a></li>
<li><a href="portfolio-classic-masonry.html">Classic Masonry</a></li>
<li><a href="portfolio-classic-metro.html">Classic Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Boxed<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-boxed-two-column.html">Boxed 2 Column</a></li>
<li><a href="portfolio-boxed-three-column.html">Boxed 3 Column</a></li>
<li><a href="portfolio-boxed-four-column.html">Boxed 4 Column</a></li>
<li><a href="portfolio-boxed-masonry.html">Boxed Masonry</a></li>
<li><a href="portfolio-boxed-metro.html">Boxed Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Transform<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-transform-two-column.html">Transform 2 Column</a></li>
<li><a href="portfolio-transform-three-column.html">Transform 3 Column</a></li>
<li><a href="portfolio-transform-four-column.html">Transform 4 Column</a></li>
<li><a href="portfolio-transform-masonry.html">Transform Masonry</a></li>
<li><a href="portfolio-transform-metro.html">Transform Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Creative<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-creative-two-column.html">Creative 2 Column</a></li>
<li><a href="portfolio-creative-three-column.html">Creative 3 Column</a></li>
<li><a href="portfolio-creative-four-column.html">Creative 4 Column</a></li>
<li><a href="portfolio-creative-masonry.html">Creative Masonry</a></li>
<li><a href="portfolio-creative-metro.html">Creative Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Attractive<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-attractive-two-column.html">Attractive 2 Column</a></li>
<li><a href="portfolio-attractive-three-column.html">Attractive 3 Column</a></li>
<li><a href="portfolio-attractive-four-column.html">Attractive 4 Column</a></li>
<li><a href="portfolio-attractive-masonry.html">Attractive Masonry</a></li>
<li><a href="portfolio-attractive-metro.html">Attractive Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Clean<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-clean-two-column.html">Clean 2 Column</a></li>
<li><a href="portfolio-clean-three-column.html">Clean 3 Column</a></li>
<li><a href="portfolio-clean-four-column.html">Clean 4 Column</a></li>
<li><a href="portfolio-clean-masonry.html">Clean Masonry</a></li>
<li><a href="portfolio-clean-metro.html">Clean Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Simple<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-simple-two-column.html">Simple 2 Column</a></li>
<li><a href="portfolio-simple-three-column.html">Simple 3 Column</a></li>
<li><a href="portfolio-simple-four-column.html">Simple 4 Column</a></li>
<li><a href="portfolio-simple-masonry.html">Simple Masonry</a></li>
<li><a href="portfolio-simple-metro.html">Simple Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Modern<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-modern-two-column.html">Modern 2 Column</a></li>
<li><a href="portfolio-modern-three-column.html">Modern 3 Column</a></li>
<li><a href="portfolio-modern-four-column.html">Modern 4 Column</a></li>
<li><a href="portfolio-modern-masonry.html">Modern Masonry</a></li>
<li><a href="portfolio-modern-metro.html">Modern Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Other<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-slider.html">Portfolio Slider</a></li>
<li><a href="portfolio-parallax.html">Portfolio Parallax</a></li>
<li><a href="portfolio-justified-gallery.html">Justified Gallery</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Single Project<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-digital-agency-single-project-minimal.html" target="_blank">Single - Minimal</a></li>
<li><a href="demo-branding-agency-single-project-slider.html" target="_blank">Single - Slider</a></li>
<li><a href="demo-architecture-single-project-gallery.html" target="_blank">Single - Gallery</a></li>
<li><a href="demo-interactive-portfolio-single-project-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-design-agency-single-project-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-single-project-creative.html" target="_blank">Single - Creative</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Elements</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink4" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink4">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="element-accordion.html">Accordion</a></li>
<li><a href="element-buttons.html">Button</a></li>
<li><a href="element-team.html">Team</a></li>
<li><a href="element-testimonials.html">Testimonials<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-clients.html">Clients</a></li>
<li><a href="element-review.html">Review</a></li>
<li><a href="element-subscribe.html">Subscribe</a></li>
<li><a href="element-call-to-action.html">Call to Action</a></li>
<li><a href="element-tab.html">Tab<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-google-map.html">Google Map<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-contact-form.html">Contact Form</a></li>
<li><a href="element-columns.html">Columns</a></li>
<li><a href="element-alert-boxes.html">Alert Boxes</a></li>
<li><a href="element-image-gallery.html">Image Gallery</a></li>
</ul>
<ul class="col">
<li><a href="element-progress-bar.html">Progress Bar</a></li>
<li><a href="element-process-step.html">Process Step<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-icon-with-text.html">Icon with Text<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-shape-dividers.html">Shape Dividers</a></li>
<li><a href="element-counters.html">Counters</a></li>
<li><a href="element-countdown.html">Countdown</a></li>
<li><a href="element-fancy-text-box.html">Fancy Text Box</a></li>
<li><a href="element-heading.html">Heading</a></li>
<li><a href="element-dropcaps.html">Dropcaps</a></li>
<li><a href="element-blockquote.html">Blockquote</a></li>
<li><a href="element-highlights.html">Highlights</a></li>
<li><a href="element-lists.html">Lists</a></li>
<li><a href="element-social-icons.html">Social Icons</a></li>
<li><a href="element-pricing-table.html">Pricing Table</a></li>
</ul>
<ul class="col">
<li><a href="element-interactive-banners.html">Interactive Banners</a></li>
<li><a href="element-services-box.html">Services Box</a></li>
<li><a href="element-rotate-box.html">Rotate Box<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-instagram.html">Instagram</a></li>
<li><a href="element-parallax-scrolling.html">Parallax Scrolling</a></li>
<li><a href="element-sliding-box.html">Sliding Box<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-content-carousel.html">Content Carousel</a></li>
<li><a href="element-media.html">Media</a></li>
<li><a href="element-event.html">Event</a></li>
<li><a href="element-dividers.html">Dividers</a></li>
<li><a href="element-horizontal-list-item.html">Horizontal List Item</a></li>
<li><a href="element-banners.html">Banners</a></li>
<li><a href="element-carousel.html">Carousel</a></li>
<li><a href="element-tilt-effect.html">Tilt Effect<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col premium-element cover-background" style="background-image: url('images/premium-elements-bg.jpg')">
<li class="sub-title">Premium Elements</li>
<li><a href="element-adaptive-backgrounds.html">Adaptive Backgrounds</a></li>
<li><a href="element-sticky-column.html">Sticky Column</a></li>
<li><a href="element-3d-parallax-hover.html">3D Parallax Hover</a></li>
<li><a href="demo-restaurant.html" target="_blank">Custom Cursor</a></li>
<li><a href="element-animated-particles.html">Animated Particles</a></li>
<li><a href="element-marquee.html">Marquee</a></li>
<li><a href="element-fancy-heading.html">Fancy Heading</a></li>
<li><a href="element-fancy-images.html">Fancy Images</a></li>
<li><a href="element-scrolling-effects.html">Scrolling Effects</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Features</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink5" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink5">
<li class="dropdown">
<a href="javascript:void(0);">Header<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business.html" target="_blank">Transparent Header</a></li>
<li><a href="demo-corporate.html" target="_blank">White Header</a></li>
<li><a href="header-dark.html" target="_blank">Dark Header</a></li>
<li><a href="demo-digital-agency.html" target="_blank">Left Navigation</a></li>
<li><a href="demo-branding-agency.html" target="_blank">Right Navigation</a></li>
<li><a href="demo-restaurant.html" target="_blank">Center Navigation</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Header with Top Bar</a></li>
<li><a href="demo-startup.html" target="_blank">Header with Push</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Center Logo</a></li>
<li><a href="header-top-logo.html" target="_blank">Top Logo</a></li>
<li><a href="demo-ebook.html" target="_blank">One Page Navigation</a></li>
<li><a href="header-mini.html" target="_blank">Mini Header</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Header with Button</a></li>
<li><a href="demo-marketing.html" target="_blank">Header with Social</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Left Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-left-menu-simple.html" target="_blank">Left Menu Simple</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Left Menu Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Hamburger Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-photography.html" target="_blank">Hamburger Simple</a></li>
<li><a href="demo-architecture.html" target="_blank">Hamburger Creative</a></li>
<li><a href="demo-freelancer.html" target="_blank">Hamburger Clean</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Hamburger Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Header Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-always-fixed.html" target="_blank">Always Fixed</a></li>
<li><a href="demo-application.html" target="_blank">Disable Fixed</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Reverse Auto</a></li>
<li><a href="demo-elder-care.html" target="_blank">Reverse Back Scroll</a></li>
<li><a href="demo-accounting.html" target="_blank">Responsive Sticky</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Mobile Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-startup.html" target="_blank">Classic</a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Modern</a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Full Screen</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Lightbox & Modal<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="modal-simple.html">Simple Modal</a></li>
<li><a href="modal-subscription.html">Subscription</a></li>
<li><a href="modal-contact-form.html">Contact Form</a></li>
<li><a href="modal-youtube-video.html">Youtube Video</a></li>
<li><a href="modal-vimeo-video.html">Vimeo Video</a></li>
<li><a href="modal-google-map.html">Google Map</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Icon Packs<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="icon-packs-icons-mind-line.html">Icons Mind Line</a></li>
<li><a href="icon-packs-feather.html">Feather</a></li>
<li><a href="icon-packs-font-awesome.html">Font Awesome</a></li>
<li><a href="icon-packs-themify.html">Themify</a></li>
<li><a href="icon-packs-bootstrap.html">Bootstrap</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Sliders<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-architecture.html" target="_blank">Revolution</a></li>
<li><a href="demo-startup.html" target="_blank">Swiper</a></li>
</ul>
</li>
<li class="dropdown">
<a href="animations.html">Animations</a>
</li>
<li class="dropdown">
<a href="demo-minimal-portfolio.html" target="_blank">Page Preloader</a>
</li>
<li class="dropdown">
<a href="demo-jewellery-store.html" target="_blank">Cookie Notify</a>
</li>
<li class="dropdown">
<a href="demo-startup.html" target="_blank">Back to Top</a>
</li>
<li class="dropdown">
<a href="demo-design-agency.html" target="_blank">Sticky Footer</a>
</li>
</ul>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Blog</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink6" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink6">
<li class="dropdown"><a href="blog-grid.html">Blog Grid</a></li>
<li class="dropdown"><a href="blog-classic.html">Blog Classic</a></li>
<li class="dropdown"><a href="blog-metro.html">Blog Metro</a></li>
<li class="dropdown"><a href="blog-masonry.html">Blog Masonry</a></li>
<li class="dropdown"><a href="blog-simple.html">Blog Simple</a></li>
<li class="dropdown"><a href="blog-date.html">Blog Date</a></li>
<li class="dropdown"><a href="blog-only-text.html">Blog Only Text</a></li>
<li class="dropdown"><a href="blog-side-image.html">Blog Side Image</a></li>
<li class="dropdown"><a href="blog-modern.html">Blog Modern</a></li>
<li class="dropdown"><a href="blog-standard.html">Blog Standard</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Single Post<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business-blog-single-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-elearning-blog-single-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-blog-single-creative.html" target="_blank">Single - Creative</a></li>
<li><a href="demo-blogger-blog-single-classic.html" target="_blank">Single - Classic</a></li>
<li><a href="demo-architecture-blog-single-clean.html" target="_blank">Single - Clean</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Post Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-post-type-standard.html">Post - Standard</a></li>
<li><a href="blog-post-type-gallery.html">Post - Gallery</a></li>
<li><a href="blog-post-type-slider.html">Post - Slider</a></li>
<li><a href="blog-post-type-audio.html">Post - Audio</a></li>
<li><a href="blog-post-type-video.html">Post - Video</a></li>
<li><a href="blog-post-type-blockquote.html">Post - Blockquote</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Shop</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink7" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink7">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">Shop Layout</li>
<li><a href="demo-fashion-store-shop.html" target="_blank">Left Sidebar</a></li>
<li><a href="demo-fashion-store-right-sidebar.html" target="_blank">Right Sidebar</a></li>
<li><a href="demo-fashion-store-no-sidebar.html" target="_blank">No Sidebar</a></li>
<li><a href="demo-decor-store-collections.html" target="_blank">Collections - Style 01</a></li>
<li><a href="demo-jewellery-store-categories.html" target="_blank">Collections - Style 02</a></li>
<li><a href="demo-fashion-store-collection.html" target="_blank">Collections - Style 03</a></li>
<li><a href="demo-fashion-store-single-product.html" target="_blank">Single Product - Thumb Left</a></li>
<li><a href="demo-decor-store-single-product.html" target="_blank">Single Product - Thumb Bottom</a></li>
</ul>
<ul class="col">
<li class="sub-title">Utility Pages</li>
<li><a href="demo-decor-store-cart.html" target="_blank">Shopping Cart</a></li>
<li><a href="demo-decor-store-checkout.html" target="_blank">Checkout</a></li>
<li><a href="demo-decor-store-account.html" target="_blank">Login / Register</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">Help Center</a></li>
<li><a href="demo-fashion-store-wishlist.html" target="_blank">Wishlist</a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-02.jpg" alt /></a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-01.jpg" alt /></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end xs-pe-0">
<div class="header-icon">
<div class="header-button">
<a href="https://1.envato.market/R53mL2" target="_blank" class="btn btn-dark-gray btn-small btn-switch-text btn-rounded text-transform-none btn-box-shadow purchase-envato">
<span>
<span class="btn-double-text" data-text="Purchase Crafto">Purchase Crafto</span>
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="ipad-top-space-margin md-pt-0">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-xl-6 col-lg-8 text-center position-relative page-title-double-large">
<div class="d-flex flex-column justify-content-center extra-very-small-screen">
<h1 class="text-dark-gray alt-font ls-minus-1px fw-700 mb-20px">Testimonials</h1>
<h2 class="text-dark-gray d-inline-block fw-400 ls-0px mb-0">Showcase your success stories collaboratively. It is effective tool to highlight positive customer experiences with ease.</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-testimonials.html#" class="text-dark-gray text-dark-gray-hover">Elements</a></li>
<li>Testimonials</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gradient-solitude-blue-transparent border-top border-color-extra-medium-gray">
<div class="container">
<div class="row justify-content-center align-items-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [0, 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-4 col-lg-2 col-sm-3 xs-mb-25px">
<div class="swiper rounded-circle" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 1000, &quot;disableOnInteraction&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;fade&quot; }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/team-24.jpg" alt />
</div>
<div class="swiper-slide">
<img src="images/team-25.jpg" alt />
</div>
<div class="swiper-slide">
<img src="images/team-22.jpg" alt />
</div>
<div class="swiper-slide">
<img src="images/team-21.jpg" alt />
</div>
<div class="swiper-slide">
<img src="images/team-23.jpg" alt />
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-xl-4 col-md-6 col-sm-7 text-center text-sm-start">
<h4 class="text-dark-gray lh-40 fw-600 ls-minus-1px mb-0 ms-10px lg-ms-0" data-anime="{ &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 500, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Trusted by <span class="fw-700 text-gradient-fast-blue-purple">25,000+</span> happy customers are using crafto.</h4>
</div>
<div class="col-xl-2 offset-xl-2 col-lg-3 col-sm-4 md-mt-35px text-center text-lg-start">
<h2 class="text-dark-gray fw-700 ls-minus-3px mb-5px" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 300, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">200+</h2>
<span class="text-dark-gray fw-500 lh-24 d-inline-block w-90 lg-w-80 sm-w-100" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 400, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Creative team to care for projects.</span>
</div>
<div class="col-lg-2 col-sm-4 ps-40px md-ps-15px md-mt-35px text-center text-lg-start">
<h2 class="text-dark-gray fw-700 ls-minus-3px mb-5px" data-anime="{ &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 100, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">4.9</h2>
<div class="review-star-icon fs-17 lh-20 d-block" data-anime="{ &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 200, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<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-dark-gray fw-500" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 300, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">2,488 Rating</span>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center mt-4 sm-mt-40px" 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;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col testimonials-style-01 md-mb-30px">
<div class="position-relative bg-white testimonial-arrow ps-50px pe-50px pt-30px pb-30px lg-p-30px border-radius-10px box-shadow-quadruple-large">
<span>Lorem ipsum dolor amet ipsum adipiscing elit eiusmod tempor lorem ipsum incididunt.</span>
</div>
<div class="mt-10px pt-20px pb-20px ps-15px pe-15px">
<img src="images/avtar-27.jpg" class="w-80px h-80px rounded-circle me-15px" alt />
<div class="d-inline-block align-middle lh-20">
<div class="fw-600 text-dark-gray fs-17 mb-5px">Herman miller</div>
<span class="fs-15">Chief financial</span>
</div>
</div>
</div>
<div class="col testimonials-style-01 md-mb-30px">
<div class="position-relative bg-white testimonial-arrow ps-50px pe-50px pt-30px pb-30px lg-p-30px border-radius-10px box-shadow-quadruple-large">
<span>Lorem ipsum dolor amet ipsum adipiscing elit eiusmod tempor lorem ipsum incididunt.</span>
</div>
<div class="mt-10px pt-20px pb-20px ps-15px pe-15px">
<img src="images/avtar-28.jpg" class="w-80px h-80px rounded-circle me-15px" alt />
<div class="d-inline-block align-middle lh-20">
<div class="fw-600 text-dark-gray fs-17 mb-5px">Shoko mugikura</div>
<span class="fs-15">Financial manager</span>
</div>
</div>
</div>
<div class="col testimonials-style-01">
<div class="position-relative bg-white testimonial-arrow ps-50px pe-50px pt-30px pb-30px lg-p-30px border-radius-10px box-shadow-quadruple-large">
<span>Lorem ipsum dolor amet ipsum adipiscing elit eiusmod tempor lorem ipsum incididunt.</span>
</div>
<div class="mt-10px pt-20px pb-20px ps-15px pe-15px">
<img src="images/avtar-29.jpg" class="w-80px h-80px rounded-circle me-15px" alt />
<div class="d-inline-block align-middle lh-20">
<div class="fw-600 text-dark-gray fs-17 mb-5px">Matthew taylor</div>
<span class="fs-15">Office manager</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-extra-medium-slate-blue big-section overflow-hidden position-relative">
<img src="images/demo-corporate-bg-01.png" class="position-absolute top-minus-150px left-minus-30px" data-bottom-top="transform: rotate(0deg) translateY(0)" data-top-bottom="transform:rotate(-20deg) translateY(0)" alt />
<div class="container">
<div class="row justify-content-center text-base-color mb-3">
<div class="col-xl-6 col-lg-7 col-sm-9 text-center">
<span class="bg-base-color fw-600 text-white text-uppercase ps-20px pe-20px fs-12 border-radius-100px d-inline-block mb-15px">Clients testimonials</span>
<h2 class="fw-600 alt-font text-white ls-minus-1px">Trusted customers</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center">
<div class="col text-center testimonials-style-02 md-mb-30px">
<div class="h-100 position-relative bg-solitude-blue p-15 border-radius-8px">
<img src="images/avtar-21.jpg" class="d-block mx-auto rounded-circle mb-25px" alt />
<p class="mb-15px">Lorem ipsum dolor amet ipsum adipiscing elit eiusmod tempor lorem ipsum incididunt.</p>
<span class="fw-600 text-dark-gray fs-18">Shoko mugikura</span>
<div class=" text-uppercase fs-13 fw-500 alt-font lh-24">Co founder</div>
</div>
</div>
<div class="col text-center testimonials-style-02 md-mb-30px">
<div class="h-100 position-relative bg-solitude-blue p-15 border-radius-8px">
<img src="images/avtar-22.jpg" class="d-block mx-auto rounded-circle mb-25px" alt />
<p class="mb-15px">Lorem ipsum dolor amet ipsum adipiscing elit eiusmod tempor lorem ipsum incididunt.</p>
<span class="fw-600 text-dark-gray fs-18">Matthew taylor</span>
<div class=" text-uppercase fs-13 fw-500 alt-font lh-24">Founder</div>
</div>
</div>
<div class="col text-center testimonials-style-02">
<div class="h-100 position-relative bg-solitude-blue p-15 border-radius-8px">
<img src="images/avtar-23.jpg" class="d-block mx-auto rounded-circle mb-25px" alt />
<p class="mb-15px">Lorem ipsum dolor amet ipsum adipiscing elit eiusmod tempor lorem ipsum incididunt.</p>
<span class="fw-600 text-dark-gray fs-18">Leonel mooney</span>
<div class=" text-uppercase fs-13 fw-500 alt-font lh-24">Manager</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-spring-wood position-relative big-section overflow-hidden">
<div class="position-absolute left-0px w-100 text-center top-minus-60px xs-top-minus-20px text-tussock-yellow opacity-2 ls-minus-10px lg-ls-minus-1px fs-190 xs-fs-100 text-nowrap text-uppercase fw-700">experience</div>
<div class="position-absolute left-150px xxl-left-50px mt-7 d-none d-xxl-inline-block" data-parallax-liquid="true" data-parallax-transition="1" data-parallax-position="top">
<img src="images/demo-restaurant-home-07.jpg" alt>
</div>
<div class="position-absolute right-150px xxl-right-50px d-none d-xxl-inline-block" data-parallax-liquid="true" data-parallax-transition="1" data-parallax-position="bottom">
<img src="images/demo-restaurant-home-08.jpg" alt>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-10 col-md-12" 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 slider-custom-image swiper-pagination-bottom magic-cursor testimonials-style-03" data-slider-options="{ &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-custom-image-pagination&quot;, &quot;type&quot;: &quot;bullets&quot;, &quot;clickable&quot;: true }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next-nav&quot;, &quot;prevEl&quot;: &quot;.swiper-button-previous-nav&quot;, &quot;effect&quot;: &quot;fade&quot; } }" data-thumbs="[&quot;images/avtar-33.jpg&quot;,&quot;images/avtar-34.jpg&quot;,&quot;images/avtar-35.jpg&quot;]">
<div class="swiper-wrapper">
<div class="swiper-slide" data-bullet-thumb="background-image: url(images/avtar-30.jpg)">
<div class="d-flex flex-column">
<div class="mb-24 sm-mb-30 align-self-center text-center w-95">
<img src="images/demo-restaurant-home-quotes-icon.jpg" class="mb-25px rounded-circle" alt>
<h5 class="lh-40 text-dark-gray ls-minus-1px mb-20px fw-600">Food for us comes from our relatives whether they have wings or fins or roots that is how we consider food has a culture It has history it has a story it has relationships.</h5>
<span class="fw-600 ls-1px text-tussock-yellow text-uppercase d-block">Herman miller</span>
</div>
</div>
</div>
<div class="swiper-slide" data-bullet-thumb="background-image: url(images/avtar-24.jpg)">
<div class="d-flex flex-column">
<div class="mb-24 sm-mb-30 align-self-center text-center w-95">
<img src="images/demo-restaurant-home-quotes-icon.jpg" class="mb-25px rounded-circle" alt>
<h5 class="lh-40 text-dark-gray ls-minus-1px mb-20px fw-600">It was a lovely place with great ambience. Loved the service of the staff. The dishes are priced very high as compared to the quality. Thank you so much to all staff.</h5>
<span class="fw-600 ls-1px text-tussock-yellow text-uppercase d-block">Matthew taylor</span>
</div>
</div>
</div>
<div class="swiper-slide" data-bullet-thumb="background-image: url(images/avtar-27.jpg)">
<div class="d-flex flex-column">
<div class="mb-24 sm-mb-30 align-self-center text-center w-95">
<img src="images/demo-restaurant-home-quotes-icon.jpg" class="mb-25px rounded-circle" alt>
<h5 class="lh-40 text-dark-gray ls-minus-1px mb-20px fw-600">Good communication and the food was great the facilities were good. Love the desserts and there way of presenting. We came here for this place won my heart.</h5>
<span class="fw-600 ls-1px text-tussock-yellow text-uppercase d-block">Leonel mooney</span>
</div>
</div>
</div>
</div>
<div class="slider-custom-image-pagination swiper-pagination text-center pb-20px xs-pb-0px md-bottom-0px"></div>
</div>
</div>
</div>
</div>
</section>
<section class="big-section position-relative">
<div id="particles-01" data-particle="true" data-particle-options="{&quot;particles&quot;: {&quot;number&quot;: {&quot;value&quot;: 10,&quot;density&quot;: {&quot;enable&quot;: true,&quot;value_area&quot;: 1000}},&quot;color&quot;:{&quot;value&quot;:[&quot;#ff5b74&quot;, &quot;#820f89&quot;]},&quot;shape&quot;: {&quot;type&quot;: &quot;circle&quot;,&quot;stroke&quot;:{&quot;width&quot;:0,&quot;color&quot;:&quot;#000000&quot;}},&quot;opacity&quot;: {&quot;value&quot;: 0.7,&quot;random&quot;: false,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;speed&quot;: 2,&quot;sync&quot;: false}},&quot;size&quot;: {&quot;value&quot;: 7,&quot;random&quot;: true,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;sync&quot;: true}},&quot;move&quot;: {&quot;enable&quot;: true,&quot;speed&quot;:2,&quot;direction&quot;: &quot;right&quot;,&quot;random&quot;: false,&quot;straight&quot;: false}},&quot;interactivity&quot;: {&quot;detect_on&quot;: &quot;canvas&quot;,&quot;events&quot;: {&quot;onhover&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;repulse&quot;},&quot;onclick&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;push&quot;},&quot;resize&quot;: true}},&quot;retina_detect&quot;: false}" class="position-absolute top-0px left-0px w-100 z-index-minus-1"></div>
<div class="container">
<div class="row justify-content-center overlap-section mb-6 g-0">
<div class="col-auto text-center last-paragraph-no-margin bg-white pt-20px pb-20px ps-6 pe-6 border-radius-100px" 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="text-center bg-golden-yellow text-white fs-16 lh-36 border-radius-30px d-inline-block ps-20px pe-20px align-middle me-10px">
<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="d-inline-block fs-18 text-dark-gray fs-18 align-middle fw-500"><span class="text-decoration-line-bottom-medium fw-600">25,000+ happy food lovers</span> visited our authentic restaurant.</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xxl-7 col-xl-8 col-lg-10 col-md-11 text-center">
<h1 class="fw-700 text-dark-gray ls-minus-1px">Loved by most valuable customers</h1>
</div>
</div>
<div class="row">
<div class="col-12 text-center" data-anime="{ &quot;rotateX&quot;: [-40, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="swiper swiper-horizontal-3d pt-8 pb-5 lg-pt-10 lg-pb-10 md-pt-12 sm-pt-15 sm-pb-11 swiper-pagination-bottom testimonials-style-04 magic-cursor" data-slider-options="{ &quot;loop&quot;: true, &quot;slidesPerView&quot;: 1,&quot;centeredSlides&quot;:true,&quot;effect&quot;:&quot;coverflow&quot;,&quot;coverflowEffect&quot;:{&quot;rotate&quot;:0,&quot;stretch&quot;:100,&quot;depth&quot;:150,&quot;modifier&quot;:1.5,&quot;slideShadows&quot;:true}, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next-nav.slider-navigation-style-04&quot;, &quot;prevEl&quot;: &quot;.swiper-button-previous-nav.slider-navigation-style-04&quot; }, &quot;autoplay&quot;: { &quot;delay&quot;: 5000, &quot;disableOnInteraction&quot;: false }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.swiper-pagination-04&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: true }, &quot;breakpoints&quot;: { &quot;768&quot;: { &quot;slidesPerView&quot;: 2 } } }">
<div class="swiper-wrapper">
<div class="swiper-slide bg-white border-radius-4px">
<div class="position-relative ps-13 pe-13 md-ps-10 md-pe-10 sm-ps-7 sm-pe-7 pt-20 pb-10 lg-pt-22 md-pt-30 sm-pt-20">
<img alt src="images/avtar-24.jpg" class="absolute-middle-center top-0px rounded-circle w-150px xs-w-100px border border-color-white box-shadow-extra-large border-8">
<div class="testimonials-content">
<span class="text-dark-gray fs-18 lh-30 fw-600 mb-5px d-block">Just love their design for all stunning details!</span>
<p class="mb-25px">These sounded far better than expected for the price. The cord is a tad shorter than others I have purchased so take note. Great for a good value.</p>
</div>
<div class="testimonials-author fs-18 mb-5px text-gradient-fast-blue-purple fw-600 d-inline-block">Alexander Harvard</div>
<div class="testimonials-position fs-15 lh-20">Themezaa Design</div>
</div>
</div>
<div class="swiper-slide bg-white border-radius-4px">
<div class="position-relative ps-13 pe-13 md-ps-10 md-pe-10 sm-ps-7 sm-pe-7 pt-20 pb-10 lg-pt-22 md-pt-30 sm-pt-20">
<img alt src="images/avtar-25.jpg" class="absolute-middle-center top-0px rounded-circle w-150px xs-w-100px border border-color-white box-shadow-extra-large border-8">
<div class="testimonials-content">
<span class="text-dark-gray fs-18 lh-30 fw-600 mb-5px d-block">Every element is designed beautifully and perfect!</span>
<p class="mb-25px">These are great headphones for music and movies for the price. I have never owned a big-money pair of headphones. It's a good pair of headphones.</p>
</div>
<div class="testimonials-author fs-18 mb-5px text-gradient-fast-blue-purple fw-600 d-inline-block">Shoko Mugikura</div>
<div class="testimonials-position fs-15 lh-20">Google Design</div>
</div>
</div>
<div class="swiper-slide bg-white border-radius-4px">
<div class="position-relative ps-13 pe-13 md-ps-10 md-pe-10 sm-ps-7 sm-pe-7 pt-20 pb-10 lg-pt-22 md-pt-30 sm-pt-20">
<img alt src="images/avtar-26.jpg" class="absolute-middle-center top-0px rounded-circle w-150px xs-w-100px border border-color-white box-shadow-extra-large border-8">
<div class="testimonials-content">
<span class="text-dark-gray fs-18 lh-30 fw-600 mb-5px d-block">Simple and easy to integrate the website!</span>
<p class="mb-25px">I was surprised at the sound quality from these phones right out of the box. I'm a fan of the sound and normally use with my home equipment.</p>
</div>
<div class="testimonials-author fs-18 mb-5px text-gradient-fast-blue-purple fw-600 d-inline-block">Herman Miller</div>
<div class="testimonials-position fs-15 lh-20">Apple Design</div>
</div>
</div>
<div class="swiper-slide bg-white border-radius-4px">
<div class="position-relative ps-13 pe-13 md-ps-10 md-pe-10 sm-ps-7 sm-pe-7 pt-20 pb-10 lg-pt-22 md-pt-30 sm-pt-20">
<img alt src="images/avtar-25.jpg" class="absolute-middle-center top-0px rounded-circle w-150px xs-w-100px border border-color-white box-shadow-extra-large border-8">
<div class="testimonials-content">
<span class="text-dark-gray fs-18 lh-30 fw-600 mb-5px d-block">Every element is designed beautifully and perfect!</span>
<p class="mb-25px">These are great headphones for music and movies for the price. I have never owned a big-money pair of headphones. It's a good pair of headphones.</p>
</div>
<div class="testimonials-author fs-18 mb-5px text-gradient-fast-blue-purple fw-600 d-inline-block">Shoko Mugikura</div>
<div class="testimonials-position fs-15 lh-20">Google Design</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center" data-anime="{ &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="text-center bg-dark-gray text-white fs-16 lh-36 border-radius-30px d-inline-block ps-20px pe-20px align-middle me-10px mt-10px mb-10px"><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>
<h6 class="text-dark-gray fw-400 mb-0 d-inline-block align-middle ls-minus-1px">Check all <span class="fw-700">3,583</span> readers reviews on <a href="https://www.amazon.com/" target="_blank"><img src="images/demo-ebook-05.png" alt /></a></h6>
</div>
</div>
</div>
</section>
<section class="bg-gradient-very-light-gray position-relative">
<div class="absolute-bottom-center left-0px z-index-1 d-none d-xxl-inline-block">
<img class="animation-float xs-w-250px" src="images/demo-vertical-portfolio-bg-01.png" alt>
</div>
<div class="absolute-middle-right right-50px top-150px mt-70px z-index-1 d-none d-xxl-inline-block">
<img class="animation-float" src="images/demo-vertical-portfolio-bg-02.png" alt>
</div>
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-7 col-md-8 text-center">
<span class="fw-600 ls-1px fs-16 alt-font d-inline-block text-uppercase mb-5px text-base-color">Innovative solutions</span>
<h2 class="text-dark-gray fw-600 ls-minus-2px">Consulting services</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col md-mb-30px">
<div class="testimonials testimonials-style-05 last-paragraph-no-margin">
<div class="testimonials-bubble border-radius-5px border border-color-extra-medium-gray bg-white pt-30px pb-30px ps-40px pe-40px lg-p-25px mb-35px">
<p>Their team are easy to work with and helped me make amazing websites in a short amount time.</p>
</div>
<div class="author ps-20px pe-20px">
<img class="rounded-circle w-85px me-15px" src="images/avtar-24.jpg" alt>
<div class="d-inline-block align-middle lh-20">
<span class="fw-600 fs-18 text-dark-gray d-block mb-5px">Herman miller</span>
<div class="fs-15">ThemeZaa</div>
</div>
</div>
</div>
</div>
<div class="col md-mb-30px">
<div class="testimonials testimonials-style-05 last-paragraph-no-margin">
<div class="testimonials-bubble border-radius-5px border border-color-extra-medium-gray bg-white pt-30px pb-30px ps-40px pe-40px lg-p-25px mb-35px">
<p>Trust us we looked for a very long time and wasted thousands of dollars testing other teams.</p>
</div>
<div class="author ps-20px pe-20px">
<img class="rounded-circle w-85px me-15px" src="images/avtar-25.jpg" alt>
<div class="d-inline-block align-middle lh-20">
<span class="fw-600 fs-18 text-dark-gray d-block mb-5px">Matthew taylor</span>
<div class="fs-15">Microsoft</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="testimonials testimonials-style-05 last-paragraph-no-margin">
<div class="testimonials-bubble border-radius-5px border border-color-extra-medium-gray bg-white pt-30px pb-30px ps-40px pe-40px lg-p-25px mb-35px">
<p>I personally enjoyed the energy and the professional support the whole team gave to into website.</p>
</div>
<div class="author ps-20px pe-20px">
<img class="rounded-circle w-85px me-15px" src="images/avtar-26.jpg" alt>
<div class="d-inline-block align-middle lh-20">
<span class="fw-600 fs-18 text-dark-gray d-block mb-5px">Leonel mooney</span>
<div class="fs-15">Google</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gradient-very-light-gray big-section">
<div class="container background-no-repeat background-position-top" style="background-image: url('images/demo-it-business-testimonial-bg.png')">
<div class="row justify-content-center mb-2">
<div class="col-xxl-6 col-lg-8 col-md-9 text-center">
<h3 class="text-dark-gray fw-600 ls-minus-2px">Trusted by the world's fastest growing companies</h3>
</div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-xl-10 position-relative">
<div class="swiper magic-cursor testimonials-style-06" data-slider-options="{ &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next-nav&quot;, &quot;prevEl&quot;: &quot;.swiper-button-previous-nav&quot;, &quot;effect&quot;: &quot;fade&quot; } }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="row align-items-center justify-content-center">
<div class="col-8 col-md-4 col-sm-6 text-center md-mb-30px">
<img alt src="images/demo-it-business-testimonials-01.png">
</div>
<div class="col-lg-5 col-md-7 last-paragraph-no-margin text-center text-md-start">
<a href="element-testimonials.html#" class="mb-15px d-block"><img src="images/logo-monday-dark-blue-01.svg" class="h-35px" alt></a>
<span class="mb-10px fw-500 d-table fs-18 lh-28 text-dark-gray">Their team are easy to work with and helped me make amazing websites in a short amount of time. Thanks guys for all your hard work. Trust us we looked for a very long time.</span>
<span class="fs-15 text-uppercase fw-700 text-dark-gray ls-1px">Herman miller, Monday</span>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row align-items-center justify-content-center">
<div class="col-8 col-md-4 col-sm-6 text-center md-mb-30px">
<img alt src="images/demo-it-business-testimonials-02.png">
</div>
<div class="col-lg-5 col-md-7 last-paragraph-no-margin text-center text-md-start">
<a href="element-testimonials.html#" class="mb-15px d-block"><img src="images/logo-loitech-dark-blue.svg" class="h-35px" alt></a>
<span class="mb-10px fw-500 d-table fs-18 lh-28 text-dark-gray">Their team are easy to work with and helped me make amazing websites in a short amount of time. Thanks guys for all your hard work. Trust us we looked for a very long time.</span>
<span class="fs-15 text-uppercase fw-700 text-dark-gray ls-1px">Leonel mooney, Logitech</span>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row align-items-center justify-content-center">
<div class="col-8 col-md-4 col-sm-6 text-center md-mb-30px">
<img alt src="images/demo-it-business-testimonials-03.png">
</div>
<div class="col-lg-5 col-md-7 last-paragraph-no-margin text-center text-md-start">
<a href="element-testimonials.html#" class="mb-15px d-block"><img src="images/logo-invision-dark-blue.svg" class="h-35px" alt></a>
<span class="mb-10px fw-500 d-table fs-18 lh-28 text-dark-gray">Their team are easy to work with and helped me make amazing websites in a short amount of time. Thanks guys for all your hard work. Trust us we looked for a very long time.</span>
<span class="fs-15 text-uppercase fw-700 text-dark-gray ls-1px">Matthew taylor, Invision</span>
</div>
</div>
</div>
</div>
<div class="swiper-button-previous-nav swiper-button-prev md-left-0px"><i class="feather icon-feather-arrow-left icon-extra-medium text-dark-gray"></i></div>
<div class="swiper-button-next-nav swiper-button-next md-right-0px"><i class="feather icon-feather-arrow-right icon-extra-medium text-dark-gray"></i></div>
</div>
</div>
</div>
<div class="row row-cols-2 row-cols-lg-5 row-cols-md-3 row-cols-sm-2 clients-style-06 mt-6 md-mt-10 sm-mt-40px justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 250, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col client-box text-center md-mb-35px">
<a href="element-testimonials.html#"><img src="images/logo-walmart.svg" class="h-35px" alt></a>
</div>
<div class="col client-box text-center md-mb-35px">
<a href="element-testimonials.html#"><img src="images/logo-logitech.svg" class="h-35px" alt></a>
</div>
<div class="col client-box text-center md-mb-35px">
<a href="element-testimonials.html#"><img src="images/logo-monday.svg" class="h-35px" alt></a>
</div>
<div class="col client-box text-center sm-mb-35px">
<a href="element-testimonials.html#"><img src="images/logo-google.svg" class="h-35px" alt></a>
</div>
<div class="col client-box text-center">
<a href="element-testimonials.html#"><img src="images/logo-paypal.svg" class="h-35px" alt></a>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray 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 align-items-center justify-content-center">
<div class="col-xl-5 col-lg-6 col-md-10 md-mb-50px">
<div class="row row-cols-1 row-cols-lg-1">
<div class="col mb-35px ms-35px lg-ms-0" data-anime="{ &quot;translateX&quot;: [25, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 500, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="d-flex flex-column flex-sm-row align-items-center testimonials testimonials-style-07 border-radius-6px ps-45px pe-45px pt-35px pb-35px lg-p-30px bg-white box-shadow-quadruple-large text-center text-sm-start last-paragraph-no-margin" data-bottom-top="transform: translate3d(50px, 0px, 0px);" data-top-bottom="transform: translate3d(-50px, 0px, 0px);">
<div class="testimonials-author w-120px me-25px xs-me-0 xs-mb-20px flex-shrink-0">
<img class="rounded-circle me-15px xs-me-0" src="images/avtar-24.jpg" alt>
</div>
<div class="testimonials-content">
<p>Lorem ipsum dolor incididunt amet an labore dolore nostrud.</p>
<span class="fs-18 alt-font text-dark-gray fw-700 d-block mt-5px">Herman miller, ThemeZaa</span>
</div>
</div>
</div>
<div class="col" data-anime="{ &quot;translateX&quot;: [-25, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 500, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="d-flex flex-column flex-sm-row align-items-center testimonials testimonials-style-07 border-radius-6px ps-45px pe-45px pt-35px pb-35px lg-p-30px bg-white box-shadow-quadruple-large text-center text-sm-start last-paragraph-no-margin" data-bottom-top="transform: translate3d(-50px, 0px, 0px);" data-top-bottom="transform: translate3d(50px, 0px, 0px);">
<div class="testimonials-author w-120px me-25px xs-me-0 xs-mb-20px flex-shrink-0">
<img class="rounded-circle me-15px xs-me-0" src="images/avtar-25.jpg" alt>
</div>
<div class="testimonials-content">
<p>Lorem ipsum dolor incididunt amet an labore dolore nostrud.</p>
<span class="fs-18 alt-font text-dark-gray fw-700 d-block mt-5px">Matthew taylor, ThemeZaa</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-6 offset-xl-1 col-md-10 text-center text-lg-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h3 class="alt-font fw-600 ls-minus-2px text-dark-gray">Customer testimonial is simply an <span class="fw-800"> existing user.</span></h3>
<p class="d-inline-block">Over 12 years of experience we have been constantly providing excellent web design & development services which is best in-class experience for our clients.</p>
<a href="element-testimonials.html#" class="btn btn-medium btn-dark-gray btn-hover-animation-switch btn-round-edge btn-box-shadow mt-10px">
<span>
<span class="btn-text">Get started</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 class="row align-items-center justify-content-center mt-6 sm-mt-11">
<div class="col-lg-12 col-md-10 text-center" data-anime="{ &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 600, &quot;staggervalue&quot;: 250, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h5 class="alt-font text-dark-gray d-block fw-600 ls-minus-1px shadow-none mb-0" data-shadow-animation="true" data-animation-delay="600">Join the <span class="text-highlight fw-800 ls-minus-3px">10000+<span class="bg-gradient-emerald-blue-emerald-green h-8px bottom-7px opacity-6 separator-animation"></span></span> reputed companies trusting us.</h5>
</div>
</div>
</div>
</section>
<section class="bg-dark-gray" style="background-image: url('images/demo-branding-agency-pattern.svg')">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-9 col-md-10">
<div class="swiper testimonials-style-08 position-relative" data-slider-options="{ &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-custom-image-pagination-01&quot;, &quot;type&quot;: &quot;bullets&quot;, &quot;clickable&quot;: true }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next-nav&quot;, &quot;prevEl&quot;: &quot;.swiper-button-previous-nav&quot;, &quot;effect&quot;: &quot;fade&quot; } }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="d-flex flex-column">
<div class="align-self-center text-center w-100 last-paragraph-no-margin">
<img alt src="images/avtar-21.jpg" class="rounded-circle mb-30px">
<span class="fs-22 fw-300 d-block mb-20px lh-36 ls-minus-05px text-white w-70 mx-auto">There are design companies and then there are user experience, design, consulting, interface design. Simply the great designs and best theme for WooCommerce, loading fast, customisable and easy to use.</span>
<span class="fw-400 text-white fs-22 d-inline-block">Matthew taylor</span>
<p>ThemeZaa Design</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="d-flex flex-column">
<div class="align-self-center text-center w-100 last-paragraph-no-margin">
<img alt src="images/avtar-22.jpg" class="rounded-circle mb-30px">
<span class="fs-22 fw-300 d-block mb-20px lh-36 ls-minus-05px text-white w-70 mx-auto">Trust us we looked for a very long time and wasted thousands of dollars testing other teams, freelancers, and outsource companies. Helped me make amazing websites in a short amount of time. Thanks guys!</span>
<span class="fw-400 text-white fs-22 d-inline-block">Mackangy rose</span>
<p>Microsoft Design</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="d-flex flex-column">
<div class="align-self-center text-center w-100 last-paragraph-no-margin">
<img alt src="images/avtar-23.jpg" class="rounded-circle mb-30px">
<span class="fs-22 fw-300 d-block mb-20px lh-36 ls-minus-05px text-white w-70 mx-auto">Their team are easy to work with and helped me make amazing websites in a short amount of time. Thanks guys for all your hard work. Trust us we looked for a very long time and wasted thousands.</span>
<span class="fw-400 text-white fs-22 d-inline-block">Jonsan donner</span>
<p>Apple Design</p>
</div>
</div>
</div>
</div>
<div class="swiper-button-previous-nav swiper-button-prev icon-extra-medium left-0px bg-medium-gray rounded-circle h-60px w-60px"><i class="fa-solid fa-arrow-left icon-small text-white"></i></div>
<div class="swiper-button-next-nav swiper-button-next icon-extra-medium right-0px bg-medium-gray rounded-circle h-60px w-60px"><i class="fa-solid fa-arrow-right icon-small text-white"></i></div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-white big-section">
<div class="container">
<div class="row justify-content-center mb-6 md-mb-4">
<div class="col-xl-5 col-lg-6 col-md-12 md-mb-50px sm-mb-40px text-center text-lg-start">
<h3 class="fw-700 mb-0 text-dark-gray ls-minus-1px" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 0, &quot;staggervalue&quot;: 250, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Amazing accounting statistics showing the power of numbers.</h3>
</div>
<div class="col-lg-6 offset-xl-1 text-center text-lg-start">
<div class="row align-items-center justify-content-center justify-content-lg-start">
<div class="col-sm-6 last-paragraph-no-margin counter-style-04 md-mb-35px">
<h2 class="vertical-counter d-inline-flex text-dark-gray fw-700 ls-minus-2px mb-10px" data-text="%" data-to="96"><sup class="text-jade top-minus-5px"><i class="bi bi-arrow-up icon-medium"></i></sup></h2>
<span class="fs-19 fw-600 ls-minus-05px text-dark-gray d-block" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 0, &quot;staggervalue&quot;: 250, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Prefer cloud accounting</span>
<p class="w-85 sm-w-100 md-mx-auto" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 0, &quot;staggervalue&quot;: 250, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Lorem ipsum simply dummy text printing typesetting.</p>
</div>
<div class="col-sm-6 last-paragraph-no-margin counter-style-04 md-mb-35px">
<h2 class="vertical-counter d-inline-flex text-dark-gray fw-700 ls-minus-2px mb-10px" data-text="%" data-to="98"><sup class="text-jade top-minus-5px"><i class="bi bi-arrow-up icon-medium"></i></sup></h2>
<span class="fs-19 fw-600 ls-minus-05px text-dark-gray d-block" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 0, &quot;staggervalue&quot;: 250, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Most outsourced tasks</span>
<p class="w-85 sm-w-100 md-mx-auto" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 0, &quot;staggervalue&quot;: 250, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Lorem ipsum simply dummy text printing typesetting.</p>
</div>
</div>
</div>
</div>
<div class="row m-0 align-items-center justify-content-center border border-color-extra-medium-gray border-radius-100px md-border-radius-6px ps-10px pe-10px box-shadow-quadruple-large" data-anime="{ &quot;scale&quot;: [1.1, 1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-md-10">
<div class="swiper slider-one-slide testimonials-style-09" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="row align-items-center pt-25px pb-25px">
<div class="col-lg-8 d-lg-flex align-items-center text-center text-lg-start">
<img src="images/avtar-28.jpg" class="rounded-circle w-100px h-100px md-mb-35px" alt>
<span class="d-block ps-40px md-ps-0 md-mx-auto position-relative"><img src="images/demo-accounting-home-quote-img.png" class="position-absolute left-minus-25px top-minus-15px lg-top-minus-5px md-top-minus-50px w-40px md-left-0px md-right-0px md-mx-auto" alt>This is one of the best templates I've came across. Very organized, great design style and easy around.</span>
</div>
<div class="col-lg-1 d-none d-lg-inline-block">
<div class="separator-line w-1px md-w-100 h-60px md-h-1px bg-extra-medium-gray mx-auto"></div>
</div>
<div class="col-lg-3 text-center text-lg-start md-mt-15px">
<span class="fs-19 ls-minus-05px fw-600 text-dark-gray d-block lh-28">Shoko mugikura</span>
<div>Financial manager</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row align-items-center pt-25px pb-25px">
<div class="col-lg-8 d-lg-flex align-items-center text-center text-lg-start">
<img src="images/avtar-29.jpg" class="rounded-circle w-100px h-100px md-mb-35px" alt>
<span class="d-block ps-40px md-ps-0 md-mx-auto position-relative"><img src="images/demo-accounting-home-quote-img.png" class="position-absolute left-minus-25px top-minus-15px lg-top-minus-5px md-top-minus-50px w-40px md-left-0px md-right-0px md-mx-auto" alt>This is one of the best templates I've came across. Very organized, great design style and easy around.</span>
</div>
<div class="col-lg-1 d-none d-lg-inline-block">
<div class="separator-line w-1px md-w-100 h-60px md-h-1px bg-extra-medium-gray mx-auto"></div>
</div>
<div class="col-lg-3 text-center text-lg-start md-mt-15px">
<span class="fs-19 ls-minus-05px fw-600 text-dark-gray d-block lh-28">Matthew taylor</span>
<div>Financial manager</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row align-items-center pt-25px pb-25px">
<div class="col-lg-8 d-lg-flex align-items-center text-center text-lg-start">
<img src="images/avtar-27.jpg" class="rounded-circle w-100px h-100px md-mb-35px" alt>
<span class="d-block ps-40px md-ps-0 md-mx-auto position-relative"><img src="images/demo-accounting-home-quote-img.png" class="position-absolute left-minus-25px top-minus-15px lg-top-minus-5px md-top-minus-50px w-40px md-left-0px md-right-0px md-mx-auto" alt>This is one of the best templates I've came across. Very organized, great design style and easy around.</span>
</div>
<div class="col-lg-1 d-none d-lg-inline-block">
<div class="separator-line w-1px md-w-100 h-60px md-h-1px bg-extra-medium-gray mx-auto"></div>
</div>
<div class="col-lg-3 text-center text-lg-start md-mt-15px">
<span class="fs-19 ls-minus-05px fw-600 text-dark-gray d-block lh-28">Herman miller</span>
<div>Chief financial</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 md-mb-25px">
<div class="d-flex justify-content-center">
<div class="slider-one-slide-prev-1 swiper-button-prev slider-navigation-style-04 bg-very-light-gray"><i class="fa-solid fa-arrow-left icon-small text-dark-gray"></i></div>
<div class="slider-one-slide-next-1 swiper-button-next slider-navigation-style-04 bg-very-light-gray"><i class="fa-solid fa-arrow-right icon-small text-dark-gray"></i></div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-black background-position-center-top" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 text-center">
<span class="text-white text-uppercase fw-500 d-inline-block ls-1px fs-15">What clients say</span>
<h3 class="text-white fw-500 ls-minus-1px">Clients testimonial</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-10 testimonials-style-10 position-relative ps-4 pe-4 swiper-number-pagination-progress" data-anime="{ &quot;translateY&quot;: [0, 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="swiper magic-cursor sm-pt-3 pb-6" data-slider-options="{&quot;slidesPerView&quot;: 1, &quot;loop&quot;: true, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.swiper-number-line-pagination&quot;, &quot;clickable&quot;: true }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next-nav-01&quot;, &quot;prevEl&quot;: &quot;.swiper-button-previous-nav-01&quot;, &quot;effect&quot;: &quot;fade&quot; } }" data-swiper-number-pagination-progress="true">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="d-flex flex-column">
<div class="align-self-center text-center w-90 last-paragraph-no-margin">
<h6 class="fw-100 lh-42 mb-0 text-white">Crafto began as a collaborative architectural and landscape design workshop, and has remained true to its trans disciplinary way of thinking since its inception <span class="text-base-color fw-500">@ Herman miller</span></h6>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="d-flex flex-column">
<div class="align-self-center text-center w-90 last-paragraph-no-margin">
<h6 class="fw-100 lh-42 mb-0 text-white">Absolutely amazing theme, flexible and awesome design with possibilities. It's so very easy to use and to customize. Simply the great designs and best theme <span class="text-base-color fw-500">@ Jonsan donner</span></h6>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="d-flex flex-column">
<div class="align-self-center text-center w-90 last-paragraph-no-margin">
<h6 class="fw-100 lh-42 mb-0 text-white">There are design companies and then there are user experience, design, consulting, interface design. Simply the great designs and best theme for fast loading <span class="text-base-color fw-500">@ Mackangy rose</span></h6>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination-wrapper d-flex align-items-center justify-content-center">
<div class="number-prev fs-15 text-white"></div>
<div class="swiper-pagination-progress bg-medium-gray">
<span class="swiper-progress"></span>
</div>
<div class="number-next fs-15 text-white"></div>
</div>
<div class="swiper-button-previous-nav-01 swiper-button-prev icon-extra-medium left-0px"><i class="bi bi-arrow-left icon-extra-medium text-white"></i></div>
<div class="swiper-button-next-nav-01 swiper-button-next icon-extra-medium right-0px"><i class="bi bi-arrow-right icon-extra-medium text-white"></i></div>
</div>
</div>
</div>
</section>
<section class="position-relative background-repeat overflow-hidden" style="background-image:url('images/demo-spa-salon-home-bg-01.jpg');" data-anime="{ &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<img src="images/demo-spa-salon-bg-img-03.png" class="position-absolute left-minus-100px top-50 d-none d-lg-inline-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" alt>
<img src="images/demo-spa-salon-bg-img-02.png" class="position-absolute right-minus-50px top-10 d-none d-lg-inline-block" data-bottom-top="transform: translateY(-80px)" data-top-bottom="transform: translateY(80px)" alt>
<div class="container">
<div class="row justify-content-center mb-3 sm-mb-30px">
<div class="col-12 text-center">
<h2 class="text-dark-gray fw-600 ls-minus-2px mb-0">Trusted by people</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-xl-9 testimonials-style-11 position-relative ps-15 pe-15 sm-ps-10 sm-pe-10 text-center text-md-start">
<div class="swiper magic-cursor slider-custom-text" data-slider-options="{ &quot;loop&quot;: true, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next-nav-02&quot;, &quot;prevEl&quot;: &quot;.swiper-button-previous-nav-02&quot;, &quot;effect&quot;: &quot;fade&quot; } }">
<div class="swiper-wrapper">
<div class="swiper-slide text-center">
<div class="fs-20 lh-34 mb-15px">There are design companies and then there are user experience, design, consulting, interface design. Simply the great designs and best theme for fast loading.</div>
<span class="fs-18 text-dark-gray fw-600 d-block">Leonel mooney, ThemeZaa</span>
</div>
<div class="swiper-slide text-center">
<div class="fs-20 lh-34 mb-15px">Absolutely amazing theme, flexible and awesome design with awesome possibilities. It's so very easy to use and to customize. Simply the great designs and best theme.</div>
<span class="fs-18 text-dark-gray fw-600 d-block">Shoko mugikura, Envato</span>
</div>
<div class="swiper-slide text-center">
<div class="fs-20 lh-34 mb-15px">Crafto began as a collaborative architectural and landscape workshop, and has remained true to its trans disciplinary way of thinking since its inception.</div>
<span class="fs-18 text-dark-gray fw-600 d-block">Herman miller, Google</span>
</div>
</div>
</div>
<div class="swiper-button-previous-nav-02 swiper-button-prev slider-custom-text-prev fs-14 text-uppercase text-dark-gray fw-600 ls-1px">prev</div>
<div class="swiper-button-next-nav-02 swiper-button-next slider-custom-text-next fs-14 text-uppercase text-dark-gray fw-600 ls-1px">next</div>
</div>
</div>
<div class="row mt-6">
<div class="col-12 text-center">
<span class="ls-1px text-uppercase text-dark-gray fw-600 lh-22 mb-10px d-block">Let's write something great together <a href="cdn-cgi/l/email-protection.html#5831363e37183a34373f3f3d2a763b3735" class="d-inline-block border-2 border-bottom border-color-dark-gray fw-700 text-dark-gray text-dark-gray-hover"><span class="__cf_email__" data-cfemail="cda4a3aba28dafa1a2aaaaa8bfe3aea2a0">[email&#160;protected]</span></a></span>
</div>
</div>
</div>
</section>
<section class="position-relative bg-dark-gray overflow-hidden background-position-center-top sm-background-image-none" style="background-image: url('images/vertical-line-bg-small.svg')">
<div class="position-absolute left-minus-100px top-40px" data-bottom-top="transform: translateY(-80px)" data-top-bottom="transform: translateY(80px)">
<img src="images/demo-elearning-bg-05.png" alt>
</div>
<div class="container">
<div class="row justify-content-center align-items-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &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-lg-5 position-relative md-mb-50px sm-mb-25px">
<div class="icon-with-text-style-08 mb-20px">
<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-chat-quote 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-19 ls-minus-05px text-white">Students feedback</span>
</div>
</div>
</div>
<h2 class="alt-font text-white fw-600 ls-minus-2px w-85 lg-w-100">Trusted by genius people.</h2>
<p class="w-80 lg-w-100 text-white opacity-4">Lorem ipsum dolor sit amet consectetur adipiscing elit venenatis dictum nec ipsum dolor sit amet.</p>
<div class="d-flex align-items-center">
<div class="col-auto text-center border-end border-color-transparent-white-very-light border-1 me-25px pe-25px"><h2 class="alt-font lh-44 fw-600 text-white mb-0">99%</h2></div>
<div class="col">
<span class="d-block w-55 lh-26 text-white xl-w-60 lg-w-100">Student's complete course successfully.</span>
</div>
</div>
</div>
<div class="col-lg-7 position-relative testimonials-style-12">
<div class="swiper magic-cursor" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 50, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1200&quot;: { &quot;slidesPerView&quot;: 1 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 1 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 1 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 }, &quot;effect&quot;: &quot;slide&quot; }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next-nav&quot;, &quot;prevEl&quot;: &quot;.swiper-button-previous-nav&quot;, &quot;effect&quot;: &quot;fade&quot; } }">
<div class="swiper-wrapper pt-20px pb-20px">
<div class="swiper-slide">
<div class="row g-0 border-radius-6px overflow-hidden">
<div class="col-sm-5 services-box-img xs-h-350px">
<div class="h-100 cover-background" style="background-image: url('images/demo-elearning-04.jpg')"></div>
</div>
<div class="col-sm-7 testimonials-box bg-white p-9 sm-p-7 box-shadow-extra-large">
<div class="d-inline-block bg-orange text-white border-radius-50px ps-20px pe-20px fs-15 lh-34 sm-lh-30 ls-minus-1px mb-25px align-middle">
<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="testimonials-box-content">
<p class="mb-20px">Course materials were good, the mentoring approach was good and working with other people via the internet was good.</p>
<div class="fs-18 lh-20 fw-600 text-dark-gray">Charlotte smith</div>
<span class="fs-16 lh-20">Business owner</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 border-radius-6px overflow-hidden">
<div class="col-sm-5 services-box-img xs-h-350px">
<div class="h-100 cover-background" style="background-image: url('images/demo-elearning-05.jpg')"></div>
</div>
<div class="col-sm-7 testimonials-box bg-white p-9 sm-p-7 box-shadow-extra-large">
<div class="d-inline-block bg-orange text-white border-radius-50px ps-20px pe-20px fs-15 lh-34 sm-lh-30 ls-minus-1px mb-25px align-middle">
<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="testimonials-box-content">
<p class="mb-20px">Course materials were good, the mentoring approach was good and working with other people via the internet was good.</p>
<div class="fs-18 lh-20 fw-600 text-dark-gray">Herman miller</div>
<span class="fs-16 lh-20">Behavioral science</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 border-radius-6px overflow-hidden">
<div class="col-sm-5 services-box-img xs-h-350px">
<div class="h-100 cover-background" style="background-image: url('images/demo-elearning-06.jpg')"></div>
</div>
<div class="col-sm-7 testimonials-box bg-white p-9 sm-p-7 box-shadow-extra-large">
<div class="d-inline-block bg-orange text-white border-radius-50px ps-20px pe-20px fs-15 lh-34 sm-lh-30 ls-minus-1px mb-25px align-middle">
<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="testimonials-box-content">
<p class="mb-20px">Course materials were good, the mentoring approach was good and working with other people via the internet was good.</p>
<div class="fs-18 lh-20 fw-600 text-dark-gray">Matthew taylor</div>
<span class="fs-16 lh-20">Network security</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-next-nav border-radius-100px swiper-button-next bg-white box-shadow-small"><i class="feather icon-feather-chevron-right icon-extra-medium"></i></div>
<div class="swiper-button-previous-nav border-radius-100px swiper-button-prev bg-white box-shadow-small"><i class="feather icon-feather-chevron-left icon-extra-medium"></i></div>
</div>
</div>
</div>
</section>
<section class="overflow-hidden big-section">
<div class="container">
<div class="row">
<div class="col-xl-4 lg-mb-45px xs-mb-30px text-sm-start text-center">
<span class="fs-70 xs-fs-50 fw-700 text-dark-gray mb-0 ls-minus-2px">Hear from clients.</span>
</div>
<div class="col-xl-8">
<div class="outside-box-right-45 sm-outside-box-right-0">
<div class="swiper magic-cursor" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 60, &quot;loop&quot;: true, &quot;parallax&quot;: true, &quot;speed&quot;: 1200, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-one-slide-pagination&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-2&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-2&quot; }, &quot;autoplay&quot;: { &quot;delay&quot;: 5000, &quot;disableOnInteraction&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;992&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 2 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper testimonials-style-13">
<div class="swiper-slide text-sm-start text-center last-paragraph-no-margin" data-swiper-parallax="700">
<span class="fs-15 fw-800 text-dark-gray text-uppercase mb-10px d-block ls-1px">@ Herman miller</span>
<p class="fs-22 lh-36 text-dark-gray">From the day one, Themezaa has delivered all possible outcomes as demanded. I must say that all the developers are dedicated.</p>
</div>
<div class="swiper-slide text-sm-start text-center last-paragraph-no-margin" data-swiper-parallax="700">
<span class="fs-15 fw-800 text-dark-gray text-uppercase mb-10px d-block ls-1px">@ Shoko mugikura</span>
<p class="fs-22 lh-36 text-dark-gray">Theme is beautiful, although it takes some time to figure out where to edit what. But support is very quick and helpful theme.</p>
</div>
<div class="swiper-slide text-sm-start text-center last-paragraph-no-margin" data-swiper-parallax="700">
<span class="fs-15 fw-800 text-dark-gray text-uppercase mb-10px d-block ls-1px">@ Matthew taylor</span>
<p class="fs-22 lh-36 text-dark-gray">They are very good with communication, addressing the need and attentively making sure the customer is fully supported.</p>
</div>
<div class="swiper-slide text-sm-start text-center last-paragraph-no-margin" data-swiper-parallax="700">
<span class="fs-15 fw-800 text-dark-gray text-uppercase mb-10px d-block ls-1px">@ Leonel mooney</span>
<p class="fs-22 lh-36 text-dark-gray">What an awesome theme and support team is very kind. Every element is designed pixel perfect, so it is really a modern theme.</p>
</div>
<div class="swiper-slide text-sm-start text-center last-paragraph-no-margin" data-swiper-parallax="700">
<span class="fs-15 fw-800 text-dark-gray text-uppercase mb-10px d-block ls-1px">@ Herman miller</span>
<p class="fs-22 lh-36 text-dark-gray">From the day one, Themezaa has delivered all possible outcomes as demanded. I must say that all the developers are dedicated.</p>
</div>
<div class="swiper-slide text-sm-start text-center last-paragraph-no-margin" data-swiper-parallax="700">
<span class="fs-15 fw-800 text-dark-gray text-uppercase mb-10px d-block ls-1px">@ Shoko mugikura</span>
<p class="fs-22 lh-36 text-dark-gray">Theme is beautiful, although it takes some time to figure out where to edit what. But support is very quick and helpful theme.</p>
</div>
<div class="swiper-slide text-sm-start text-center last-paragraph-no-margin" data-swiper-parallax="700">
<span class="fs-15 fw-800 text-dark-gray text-uppercase mb-10px d-block ls-1px">@ Matthew taylor</span>
<p class="fs-22 lh-36 text-dark-gray">They are very good with communication, addressing the need and attentively making sure the customer is fully supported.</p>
</div>
<div class="swiper-slide text-sm-start text-center last-paragraph-no-margin" data-swiper-parallax="700">
<span class="fs-15 fw-800 text-dark-gray text-uppercase mb-10px d-block ls-1px">@ Leonel mooney</span>
<p class="fs-22 lh-36 text-dark-gray">What an awesome theme and support team is very kind. Every element is designed pixel perfect, so it is really a modern theme.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="separator-line-5px w-100 bg-extra-medium-gray mt-45px mb-45px xs-mt-30px xs-mb-30px"></div>
</div>
<div class="col-md-6 col-sm-4 xs-mb-30px">
<div class="d-flex justify-content-center justify-content-sm-start">
<div class="slider-one-slide-prev-2 text-black swiper-button-prev slider-navigation-style-04 bg-yellow h-65px w-65px" tabindex="0" role="button" aria-label="Previous slide"><i class="fa-solid fa-arrow-left"></i></div>
<div class="slider-one-slide-next-2 text-black swiper-button-next slider-navigation-style-04 bg-yellow h-65px w-65px" tabindex="0" role="button" aria-label="Next slide"><i class="fa-solid fa-arrow-right"></i></div>
</div>
</div>
<div class="col-md-6 col-sm-8">
<div class="d-flex align-items-center justify-content-center justify-content-sm-end">
<div class="fw-700 fs-70 text-dark-gray me-15px ls-minus-1px">4.82</div>
<div class="text-center">
<div class="bg-dark-gray text-white border-radius-30px ps-20px pe-20px fs-13">
<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-dark-gray fs-13 fw-700 text-uppercase">Clutch review</span>
</div>
</div>
</div>
</div>
</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#3b52555d547b4f535e565e415a5a15585456"><span class="__cf_email__" data-cfemail="0861666e67487c606d656d726969266b6765">[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>