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

1653 lines
98 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

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

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
</head>
<body data-mobile-nav-style="classic">
<header>
<nav class="navbar navbar-expand-lg header-light header-reverse header-demo" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="index.html">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="default-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="alt-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto col-lg-8 menu-order position-static">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pre-Built Sites</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content background-position-center cover-background" aria-labelledby="navbarDropdownMenuLink1" style="background-image: url('images/pre-built-sites-bg.jpg')">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="demo-corporate.html" target="_blank">Corporate<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-marketing.html" target="_blank">Marketing</a></li>
<li><a href="demo-accounting.html" target="_blank">Accounting<span class="label bg-light-red text-red border-radius-26px">Classic</span></a></li>
<li><a href="demo-beauty-salon.html" target="_blank">Beauty Salon</a></li>
<li><a href="demo-architecture.html" target="_blank">Architecture</a></li>
<li><a href="demo-ebook.html" target="_blank">eBook</a></li>
<li><a href="demo-seo-agency.html" target="_blank">SEO Agency</a></li>
<li><a href="demo-hosting.html" target="_blank">Hosting</a></li>
<li><a href="demo-consulting.html" target="_blank">Consulting</a></li>
<li><a href="demo-green-energy.html" target="_blank">Green Energy</a></li>
<li><a href="demo-business.html" target="_blank">Business</a></li>
<li><a href="demo-interactive-portfolio.html" target="_blank">Interactive Portfolio</a></li>
<li><a href="demo-spa-salon.html" target="_blank">Spa Salon<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
</ul>
<ul class="col">
<li><a href="demo-branding-agency.html" target="_blank">Branding Agency<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-elearning.html" target="_blank">eLearning</a></li>
<li><a href="demo-it-business.html" target="_blank">IT Business<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Modern</span></a></li>
<li><a href="demo-barber.html" target="_blank">Barber</a></li>
<li><a href="demo-hotel-and-resort.html" target="_blank">Hotel & Resort</a></li>
<li><a href="demo-real-estate.html" target="_blank">Real Estate</a></li>
<li><a href="demo-jewellery-store.html" target="_blank">Jewellery Store</a></li>
<li><a href="demo-travel-agency.html" target="_blank">Travel Agency</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Gym & Fitness</a></li>
<li><a href="demo-logistics.html" target="_blank">Logistics</a></li>
<li><a href="demo-design-agency.html" target="_blank">Design Agency<span class="label bg-light-red text-red border-radius-26px">Creative</span></a></li>
<li><a href="demo-photography.html" target="_blank">Photography</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Pizza Parlor</a></li>
</ul>
<ul class="col">
<li><a href="demo-restaurant.html" target="_blank">Restaurant<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Scattered Portfolio</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Data Analysis</a></li>
<li><a href="demo-medical.html" target="_blank">Medical</a></li>
<li><a href="demo-horizontal-portfolio.html" target="_blank">Horizontal Portfolio</a></li>
<li><a href="demo-product-showcase.html" target="_blank">Product Showcase<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-finance.html" target="_blank">Finance</a></li>
<li><a href="demo-elder-care.html" target="_blank">Elder Care</a></li>
<li><a href="demo-fashion-store.html" target="_blank">Fashion Store</a></li>
<li><a href="demo-music-onepage.html" target="_blank">Music</a></li>
<li><a href="demo-vertical-portfolio.html" target="_blank">Vertical Portfolio</a></li>
<li><a href="demo-freelancer.html" target="_blank">Freelancer<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
<li><a href="demo-charity.html" target="_blank">Charity</a></li>
</ul>
<ul class="col">
<li><a href="demo-digital-agency.html" target="_blank">Digital Agency</a></li>
<li><a href="demo-web-agency.html" target="_blank">Web Agency<span class="label bg-white-ice text-jade border-radius-26px">Creative</span></a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Yoga & Meditation</a></li>
<li><a href="demo-startup.html" target="_blank">Startup</a></li>
<li><a href="demo-application.html" target="_blank">Application<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">New</span></a></li>
<li><a href="demo-lawyer.html" target="_blank">Lawyer</a></li>
<li><a href="demo-cryptocurrency.html" target="_blank">Cryptocurrency</a></li>
<li><a href="demo-conference.html" target="_blank">Conference</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Minimal Portfolio<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-decor-store.html" target="_blank">Decor Store</a></li>
<li><a href="demo-magazine.html" target="_blank">Magazine</a></li>
<li><a href="demo-blogger.html" target="_blank">Blogger</a></li>
<li><a href="demo-wedding-invitation.html" target="_blank">Wedding Invitation</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pages</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink2">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">About Pages</li>
<li><a href="demo-branding-agency-about.html" target="_blank">About - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-about.html" target="_blank">About - Restaurant</a></li>
<li><a href="demo-minimal-portfolio-about.html" target="_blank">About - Minimal</a></li>
<li><a href="demo-accounting-company.html" target="_blank">About - Accounting</a></li>
<li><a href="demo-architecture-about.html" target="_blank">About - Architecture</a></li>
<li><a href="demo-digital-agency-about.html" target="_blank">About - Digital</a></li>
<li><a href="demo-photography-about.html" target="_blank">About - Photography</a></li>
<li><a href="demo-design-agency-about.html" target="_blank">About - Agency</a></li>
<li><a href="demo-marketing-about.html" target="_blank">About - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-scattered-portfolio-about.html" target="_blank">About - Scattered</a></li>
<li><a href="demo-medical-about.html" target="_blank">About - Medical</a></li>
<li><a href="demo-web-agency-about.html" target="_blank">About - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-startup-who-we-are.html" target="_blank">About - Startup</a></li>
<li><a href="demo-hotel-and-resort-about-us.html" target="_blank">About - Hotel</a></li>
<li><a href="demo-elearning-about.html" target="_blank">About - eLearning<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Services Pages</li>
<li><a href="demo-accounting-services.html" target="_blank">Services - Accounting</a></li>
<li><a href="demo-marketing-services.html" target="_blank">Services - Marketing</a></li>
<li><a href="demo-branding-agency-services.html" target="_blank">Services - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-minimal-portfolio-expertise.html" target="_blank">Services - Minimal</a></li>
<li><a href="demo-web-agency-expertise.html" target="_blank">Services - Web</a></li>
<li><a href="demo-architecture-services.html" target="_blank">Services - Architecture</a></li>
<li><a href="demo-digital-agency-expertise.html" target="_blank">Services - Digital</a></li>
<li><a href="demo-startup-services.html" target="_blank">Services - Startup</a></li>
<li><a href="demo-scattered-portfolio-expertise.html" target="_blank">Services - Scattered</a></li>
<li><a href="demo-lawyer-practice-areas.html" target="_blank">Services - Lawyer</a></li>
<li><a href="demo-corporate-services.html" target="_blank">Services - Corporate<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-data-analysis-what-we-do.html" target="_blank">Services - Data Analysis</a></li>
<li><a href="demo-marketing-services-details.html" target="_blank">Single Marketing</a></li>
<li><a href="demo-accounting-services-details.html" target="_blank">Single Accounting</a></li>
<li><a href="demo-branding-agency-services-detail.html" target="_blank">Single - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Contact Pages</li>
<li><a href="demo-scattered-portfolio-contact.html" target="_blank">Contact - Scattered</a></li>
<li><a href="demo-branding-agency-contact.html" target="_blank">Contact - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-photography-contact.html" target="_blank">Contact - Photography</a></li>
<li><a href="demo-hotel-and-resort-contact.html" target="_blank">Contact - Hotel</a></li>
<li><a href="demo-spa-salon-contact.html" target="_blank">Contact - Spa</a></li>
<li><a href="demo-it-business-contact.html" target="_blank">Contact - IT Business<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-architecture-contact.html" target="_blank">Contact - Architecture</a></li>
<li><a href="demo-design-agency-contact.html" target="_blank">Contact - Agency</a></li>
<li><a href="demo-marketing-contact.html" target="_blank">Contact - Marketing</a></li>
<li><a href="demo-horizontal-portfolio-contact.html" target="_blank">Contact - Portfolio</a></li>
<li><a href="demo-accounting-contact.html" target="_blank">Contact - Accounting</a></li>
<li><a href="demo-elearning-contact.html" target="_blank">Contact - eLearning</a></li>
<li><a href="demo-corporate-contact.html" target="_blank">Contact - Corporate</a></li>
<li><a href="demo-real-estate-contact.html" target="_blank">Contact - Real Estate</a></li>
<li><a href="demo-web-agency-contact.html" target="_blank">Contact - Web</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-corporate-pricing.html" target="_blank">Pricing - Corporate</a></li>
<li><a href="demo-hosting-pricing.html" target="_blank">Pricing - Hosting</a></li>
<li><a href="demo-data-analysis-pricing.html" target="_blank">Pricing - Data Analysis</a></li>
<li><a href="demo-marketing-pricing.html" target="_blank">Pricing - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-consulting-process.html" target="_blank">Process - Consulting</a></li>
<li><a href="demo-accounting-process.html" target="_blank">Process - Accounting</a></li>
<li><a href="demo-startup-clients.html" target="_blank">Clients - Startup</a></li>
<li><a href="demo-business-clients.html" target="_blank">Clients - Business</a></li>
<li><a href="demo-corporate-customer-stories.html" target="_blank">Testimonials - Corporate</a></li>
<li><a href="demo-data-analysis-testimonials.html" target="_blank">Reviews - Data Analysis</a></li>
<li><a href="demo-finance-team.html" target="_blank">Team - Finance</a></li>
<li><a href="demo-marketing-team.html" target="_blank">Team - Marketing</a></li>
<li><a href="demo-web-agency-people.html" target="_blank">Team - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-chefs.html" target="_blank">Chefs - Restaurant</a></li>
<li><a href="demo-pizza-parlor-chefs.html" target="_blank">Chefs - Pizza Parlor</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-real-estate-agents.html" target="_blank">Agents - Real Estate</a></li>
<li><a href="demo-elearning-instructors.html" target="_blank">Instructors - eLearning</a></li>
<li><a href="demo-hotel-and-resort-amenities.html" target="_blank">Amenities - Hotel</a></li>
<li><a href="demo-medical-timetable.html" target="_blank">Timetable - Medical</a></li>
<li><a href="demo-photography-award.html" target="_blank">Award - Photography</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">FAQ - Decor Store</a></li>
<li><a href="demo-charity-causes.html" target="_blank">Causes - Charity</a></li>
<li><a href="demo-restaurant-menu.html" target="_blank">Menu - Restaurant</a></li>
<li><a href="demo-hotel-and-resort-bistro.html" target="_blank">Menu - Hotel<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-pizza-parlor-menu.html" target="_blank">Menu - Pizza</a></li>
<li><a href="demo-application-features.html" target="_blank">Features - Application</a></li>
<li><a href="404.html">Error 404</a></li>
<li><a href="search-result.html">Search Results</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Portfolio</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Classic<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-classic-two-column.html">Classic 2 Column</a></li>
<li><a href="portfolio-classic-three-column.html">Classic 3 Column</a></li>
<li><a href="portfolio-classic-four-column.html">Classic 4 Column</a></li>
<li><a href="portfolio-classic-masonry.html">Classic Masonry</a></li>
<li><a href="portfolio-classic-metro.html">Classic Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Boxed<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-boxed-two-column.html">Boxed 2 Column</a></li>
<li><a href="portfolio-boxed-three-column.html">Boxed 3 Column</a></li>
<li><a href="portfolio-boxed-four-column.html">Boxed 4 Column</a></li>
<li><a href="portfolio-boxed-masonry.html">Boxed Masonry</a></li>
<li><a href="portfolio-boxed-metro.html">Boxed Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Transform<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-transform-two-column.html">Transform 2 Column</a></li>
<li><a href="portfolio-transform-three-column.html">Transform 3 Column</a></li>
<li><a href="portfolio-transform-four-column.html">Transform 4 Column</a></li>
<li><a href="portfolio-transform-masonry.html">Transform Masonry</a></li>
<li><a href="portfolio-transform-metro.html">Transform Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Creative<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-creative-two-column.html">Creative 2 Column</a></li>
<li><a href="portfolio-creative-three-column.html">Creative 3 Column</a></li>
<li><a href="portfolio-creative-four-column.html">Creative 4 Column</a></li>
<li><a href="portfolio-creative-masonry.html">Creative Masonry</a></li>
<li><a href="portfolio-creative-metro.html">Creative Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Attractive<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-attractive-two-column.html">Attractive 2 Column</a></li>
<li><a href="portfolio-attractive-three-column.html">Attractive 3 Column</a></li>
<li><a href="portfolio-attractive-four-column.html">Attractive 4 Column</a></li>
<li><a href="portfolio-attractive-masonry.html">Attractive Masonry</a></li>
<li><a href="portfolio-attractive-metro.html">Attractive Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Clean<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-clean-two-column.html">Clean 2 Column</a></li>
<li><a href="portfolio-clean-three-column.html">Clean 3 Column</a></li>
<li><a href="portfolio-clean-four-column.html">Clean 4 Column</a></li>
<li><a href="portfolio-clean-masonry.html">Clean Masonry</a></li>
<li><a href="portfolio-clean-metro.html">Clean Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Simple<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-simple-two-column.html">Simple 2 Column</a></li>
<li><a href="portfolio-simple-three-column.html">Simple 3 Column</a></li>
<li><a href="portfolio-simple-four-column.html">Simple 4 Column</a></li>
<li><a href="portfolio-simple-masonry.html">Simple Masonry</a></li>
<li><a href="portfolio-simple-metro.html">Simple Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Modern<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-modern-two-column.html">Modern 2 Column</a></li>
<li><a href="portfolio-modern-three-column.html">Modern 3 Column</a></li>
<li><a href="portfolio-modern-four-column.html">Modern 4 Column</a></li>
<li><a href="portfolio-modern-masonry.html">Modern Masonry</a></li>
<li><a href="portfolio-modern-metro.html">Modern Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Other<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-slider.html">Portfolio Slider</a></li>
<li><a href="portfolio-parallax.html">Portfolio Parallax</a></li>
<li><a href="portfolio-justified-gallery.html">Justified Gallery</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Single Project<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-digital-agency-single-project-minimal.html" target="_blank">Single - Minimal</a></li>
<li><a href="demo-branding-agency-single-project-slider.html" target="_blank">Single - Slider</a></li>
<li><a href="demo-architecture-single-project-gallery.html" target="_blank">Single - Gallery</a></li>
<li><a href="demo-interactive-portfolio-single-project-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-design-agency-single-project-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-single-project-creative.html" target="_blank">Single - Creative</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Elements</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink4" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink4">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="element-accordion.html">Accordion</a></li>
<li><a href="element-buttons.html">Button</a></li>
<li><a href="element-team.html">Team</a></li>
<li><a href="element-testimonials.html">Testimonials<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-clients.html">Clients</a></li>
<li><a href="element-review.html">Review</a></li>
<li><a href="element-subscribe.html">Subscribe</a></li>
<li><a href="element-call-to-action.html">Call to Action</a></li>
<li><a href="element-tab.html">Tab<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-google-map.html">Google Map<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-contact-form.html">Contact Form</a></li>
<li><a href="element-columns.html">Columns</a></li>
<li><a href="element-alert-boxes.html">Alert Boxes</a></li>
<li><a href="element-image-gallery.html">Image Gallery</a></li>
</ul>
<ul class="col">
<li><a href="element-progress-bar.html">Progress Bar</a></li>
<li><a href="element-process-step.html">Process Step<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-icon-with-text.html">Icon with Text<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-shape-dividers.html">Shape Dividers</a></li>
<li><a href="element-counters.html">Counters</a></li>
<li><a href="element-countdown.html">Countdown</a></li>
<li><a href="element-fancy-text-box.html">Fancy Text Box</a></li>
<li><a href="element-heading.html">Heading</a></li>
<li><a href="element-dropcaps.html">Dropcaps</a></li>
<li><a href="element-blockquote.html">Blockquote</a></li>
<li><a href="element-highlights.html">Highlights</a></li>
<li><a href="element-lists.html">Lists</a></li>
<li><a href="element-social-icons.html">Social Icons</a></li>
<li><a href="element-pricing-table.html">Pricing Table</a></li>
</ul>
<ul class="col">
<li><a href="element-interactive-banners.html">Interactive Banners</a></li>
<li><a href="element-services-box.html">Services Box</a></li>
<li><a href="element-rotate-box.html">Rotate Box<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-instagram.html">Instagram</a></li>
<li><a href="element-parallax-scrolling.html">Parallax Scrolling</a></li>
<li><a href="element-sliding-box.html">Sliding Box<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-content-carousel.html">Content Carousel</a></li>
<li><a href="element-media.html">Media</a></li>
<li><a href="element-event.html">Event</a></li>
<li><a href="element-dividers.html">Dividers</a></li>
<li><a href="element-horizontal-list-item.html">Horizontal List Item</a></li>
<li><a href="element-banners.html">Banners</a></li>
<li><a href="element-carousel.html">Carousel</a></li>
<li><a href="element-tilt-effect.html">Tilt Effect<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col premium-element cover-background" style="background-image: url('images/premium-elements-bg.jpg')">
<li class="sub-title">Premium Elements</li>
<li><a href="element-adaptive-backgrounds.html">Adaptive Backgrounds</a></li>
<li><a href="element-sticky-column.html">Sticky Column</a></li>
<li><a href="element-3d-parallax-hover.html">3D Parallax Hover</a></li>
<li><a href="demo-restaurant.html" target="_blank">Custom Cursor</a></li>
<li><a href="element-animated-particles.html">Animated Particles</a></li>
<li><a href="element-marquee.html">Marquee</a></li>
<li><a href="element-fancy-heading.html">Fancy Heading</a></li>
<li><a href="element-fancy-images.html">Fancy Images</a></li>
<li><a href="element-scrolling-effects.html">Scrolling Effects</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Features</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink5" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink5">
<li class="dropdown">
<a href="javascript:void(0);">Header<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business.html" target="_blank">Transparent Header</a></li>
<li><a href="demo-corporate.html" target="_blank">White Header</a></li>
<li><a href="header-dark.html" target="_blank">Dark Header</a></li>
<li><a href="demo-digital-agency.html" target="_blank">Left Navigation</a></li>
<li><a href="demo-branding-agency.html" target="_blank">Right Navigation</a></li>
<li><a href="demo-restaurant.html" target="_blank">Center Navigation</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Header with Top Bar</a></li>
<li><a href="demo-startup.html" target="_blank">Header with Push</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Center Logo</a></li>
<li><a href="header-top-logo.html" target="_blank">Top Logo</a></li>
<li><a href="demo-ebook.html" target="_blank">One Page Navigation</a></li>
<li><a href="header-mini.html" target="_blank">Mini Header</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Header with Button</a></li>
<li><a href="demo-marketing.html" target="_blank">Header with Social</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Left Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-left-menu-simple.html" target="_blank">Left Menu Simple</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Left Menu Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Hamburger Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-photography.html" target="_blank">Hamburger Simple</a></li>
<li><a href="demo-architecture.html" target="_blank">Hamburger Creative</a></li>
<li><a href="demo-freelancer.html" target="_blank">Hamburger Clean</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Hamburger Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Header Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-always-fixed.html" target="_blank">Always Fixed</a></li>
<li><a href="demo-application.html" target="_blank">Disable Fixed</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Reverse Auto</a></li>
<li><a href="demo-elder-care.html" target="_blank">Reverse Back Scroll</a></li>
<li><a href="demo-accounting.html" target="_blank">Responsive Sticky</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Mobile Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-startup.html" target="_blank">Classic</a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Modern</a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Full Screen</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Lightbox & Modal<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="modal-simple.html">Simple Modal</a></li>
<li><a href="modal-subscription.html">Subscription</a></li>
<li><a href="modal-contact-form.html">Contact Form</a></li>
<li><a href="modal-youtube-video.html">Youtube Video</a></li>
<li><a href="modal-vimeo-video.html">Vimeo Video</a></li>
<li><a href="modal-google-map.html">Google Map</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Icon Packs<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="icon-packs-icons-mind-line.html">Icons Mind Line</a></li>
<li><a href="icon-packs-feather.html">Feather</a></li>
<li><a href="icon-packs-font-awesome.html">Font Awesome</a></li>
<li><a href="icon-packs-themify.html">Themify</a></li>
<li><a href="icon-packs-bootstrap.html">Bootstrap</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Sliders<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-architecture.html" target="_blank">Revolution</a></li>
<li><a href="demo-startup.html" target="_blank">Swiper</a></li>
</ul>
</li>
<li class="dropdown">
<a href="animations.html">Animations</a>
</li>
<li class="dropdown">
<a href="demo-minimal-portfolio.html" target="_blank">Page Preloader</a>
</li>
<li class="dropdown">
<a href="demo-jewellery-store.html" target="_blank">Cookie Notify</a>
</li>
<li class="dropdown">
<a href="demo-startup.html" target="_blank">Back to Top</a>
</li>
<li class="dropdown">
<a href="demo-design-agency.html" target="_blank">Sticky Footer</a>
</li>
</ul>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Blog</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink6" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink6">
<li class="dropdown"><a href="blog-grid.html">Blog Grid</a></li>
<li class="dropdown"><a href="blog-classic.html">Blog Classic</a></li>
<li class="dropdown"><a href="blog-metro.html">Blog Metro</a></li>
<li class="dropdown"><a href="blog-masonry.html">Blog Masonry</a></li>
<li class="dropdown"><a href="blog-simple.html">Blog Simple</a></li>
<li class="dropdown"><a href="blog-date.html">Blog Date</a></li>
<li class="dropdown"><a href="blog-only-text.html">Blog Only Text</a></li>
<li class="dropdown"><a href="blog-side-image.html">Blog Side Image</a></li>
<li class="dropdown"><a href="blog-modern.html">Blog Modern</a></li>
<li class="dropdown"><a href="blog-standard.html">Blog Standard</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Single Post<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business-blog-single-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-elearning-blog-single-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-blog-single-creative.html" target="_blank">Single - Creative</a></li>
<li><a href="demo-blogger-blog-single-classic.html" target="_blank">Single - Classic</a></li>
<li><a href="demo-architecture-blog-single-clean.html" target="_blank">Single - Clean</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Post Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-post-type-standard.html">Post - Standard</a></li>
<li><a href="blog-post-type-gallery.html">Post - Gallery</a></li>
<li><a href="blog-post-type-slider.html">Post - Slider</a></li>
<li><a href="blog-post-type-audio.html">Post - Audio</a></li>
<li><a href="blog-post-type-video.html">Post - Video</a></li>
<li><a href="blog-post-type-blockquote.html">Post - Blockquote</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Shop</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink7" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink7">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">Shop Layout</li>
<li><a href="demo-fashion-store-shop.html" target="_blank">Left Sidebar</a></li>
<li><a href="demo-fashion-store-right-sidebar.html" target="_blank">Right Sidebar</a></li>
<li><a href="demo-fashion-store-no-sidebar.html" target="_blank">No Sidebar</a></li>
<li><a href="demo-decor-store-collections.html" target="_blank">Collections - Style 01</a></li>
<li><a href="demo-jewellery-store-categories.html" target="_blank">Collections - Style 02</a></li>
<li><a href="demo-fashion-store-collection.html" target="_blank">Collections - Style 03</a></li>
<li><a href="demo-fashion-store-single-product.html" target="_blank">Single Product - Thumb Left</a></li>
<li><a href="demo-decor-store-single-product.html" target="_blank">Single Product - Thumb Bottom</a></li>
</ul>
<ul class="col">
<li class="sub-title">Utility Pages</li>
<li><a href="demo-decor-store-cart.html" target="_blank">Shopping Cart</a></li>
<li><a href="demo-decor-store-checkout.html" target="_blank">Checkout</a></li>
<li><a href="demo-decor-store-account.html" target="_blank">Login / Register</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">Help Center</a></li>
<li><a href="demo-fashion-store-wishlist.html" target="_blank">Wishlist</a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-02.jpg" alt /></a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-01.jpg" alt /></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end xs-pe-0">
<div class="header-icon">
<div class="header-button">
<a href="https://1.envato.market/R53mL2" target="_blank" class="btn btn-dark-gray btn-small btn-switch-text btn-rounded text-transform-none btn-box-shadow purchase-envato">
<span>
<span class="btn-double-text" data-text="Purchase Crafto">Purchase Crafto</span>
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="ipad-top-space-margin md-pt-0">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-xl-6 col-lg-8 text-center position-relative page-title-double-large">
<div class="d-flex flex-column justify-content-center extra-very-small-screen">
<h1 class="text-dark-gray alt-font ls-minus-1px fw-700 mb-20px">Team</h1>
<h2 class="text-dark-gray d-inline-block fw-400 ls-0px mb-0">Easily create dynamic team profiles with custom layouts. Add descriptions, roles and social profiles with vibrant style.</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-team.html#" class="text-dark-gray text-dark-gray-hover">Elements</a></li>
<li>Team</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray background-position-center-top sm-background-image-none" style="background-image: url('images/vertical-line-bg-medium-gray.svg')">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-xl-6 col-lg-8 text-center">
<h3 class="fw-600 text-dark-gray ls-minus-1px">Meet the professional accounting people</h3>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col text-center team-style-01 md-mb-30px">
<figure class="mb-0 hover-box box-hover position-relative">
<img src="images/team-01.jpg" alt class="border-radius-6px" />
<figcaption class="w-100 p-30px lg-p-20px bg-white">
<div class="position-relative z-index-1 overflow-hidden lg-pb-5px">
<span class="fs-18 d-block fw-600 text-dark-gray lh-26 ls-minus-05px">Jeremy dupont</span>
<p class="m-0">Executive officer</p>
<div class="social-icon hover-text mt-20px lg-mt-10px social-icon-style-05">
<a href="https://www.facebook.com/" target="_blank" class="fw-600 text-dark-gray">Fb.</a>
<a href="https://www.instagram.com/" target="_blank" class="fw-600 text-dark-gray">In.</a>
<a href="https://www.twitter.com/" target="_blank" class="fw-600 text-dark-gray">Tw.</a>
<a href="https://dribbble.com/" target="_blank" class="fw-600 text-dark-gray">Dr.</a>
</div>
</div>
<div class="box-overlay bg-white box-shadow-quadruple-large border-radius-6px"></div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-01 md-mb-30px">
<figure class="mb-0 hover-box box-hover position-relative">
<img src="images/team-02.jpg" alt class="border-radius-6px" />
<figcaption class="w-100 p-30px lg-p-20px bg-white">
<div class="position-relative z-index-1 overflow-hidden lg-pb-5px">
<span class="fs-18 d-block fw-600 text-dark-gray lh-26 ls-minus-05px">Jessica dover</span>
<p class="m-0">Vice president</p>
<div class="social-icon hover-text mt-20px lg-mt-10px">
<a href="https://www.facebook.com/" target="_blank" class="fw-600 text-dark-gray">Fb.</a>
<a href="https://www.instagram.com/" target="_blank" class="fw-600 text-dark-gray">In.</a>
<a href="https://www.twitter.com/" target="_blank" class="fw-600 text-dark-gray">Tw.</a>
<a href="https://dribbble.com/" target="_blank" class="fw-600 text-dark-gray">Dr.</a>
</div>
</div>
<div class="box-overlay bg-white box-shadow-quadruple-large border-radius-6px"></div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-01 xs-mb-30px">
<figure class="mb-0 hover-box box-hover position-relative">
<img src="images/team-03.jpg" alt class="border-radius-6px" />
<figcaption class="w-100 p-30px lg-p-20px bg-white">
<div class="position-relative z-index-1 overflow-hidden lg-pb-5px">
<span class="fs-18 d-block fw-600 text-dark-gray lh-26 ls-minus-05px">Matthew taylor</span>
<p class="m-0">Financial officer</p>
<div class="social-icon hover-text mt-20px lg-mt-10px">
<a href="https://www.facebook.com/" target="_blank" class="fw-600 text-dark-gray">Fb.</a>
<a href="https://www.instagram.com/" target="_blank" class="fw-600 text-dark-gray">In.</a>
<a href="https://www.twitter.com/" target="_blank" class="fw-600 text-dark-gray">Tw.</a>
<a href="https://dribbble.com/" target="_blank" class="fw-600 text-dark-gray">Dr.</a>
</div>
</div>
<div class="box-overlay bg-white box-shadow-quadruple-large border-radius-6px"></div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-01">
<figure class="mb-0 hover-box box-hover position-relative">
<img src="images/team-04.jpg" alt class="border-radius-6px" />
<figcaption class="w-100 p-30px lg-p-20px bg-white">
<div class="position-relative z-index-1 overflow-hidden lg-pb-5px">
<span class="fs-18 d-block fw-600 text-dark-gray lh-26 ls-minus-05px">Daniel james</span>
<p class="m-0">People officer</p>
<div class="social-icon hover-text mt-20px lg-mt-10px">
<a href="https://www.facebook.com/" target="_blank" class="fw-600 text-dark-gray">Fb.</a>
<a href="https://www.instagram.com/" target="_blank" class="fw-600 text-dark-gray">In.</a>
<a href="https://www.twitter.com/" target="_blank" class="fw-600 text-dark-gray">Tw.</a>
<a href="https://dribbble.com/" target="_blank" class="fw-600 text-dark-gray">Dr.</a>
</div>
</div>
<div class="box-overlay bg-white box-shadow-quadruple-large border-radius-6px"></div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-12 col-xxl-7 col-xl-8 col-lg-9 text-center">
<div class="fw-600 text-gradient-fast-blue-purple text-uppercase d-inline-block mb-10px">Committed people</div>
<h2 class="alt-font fw-700 ls-minus-1px text-dark-gray" style>We are the problem solvers, we find solutions</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center mb-5 md-mb-6" 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;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col text-center team-style-02 border-radius-6px md-mb-30px">
<figure class="mb-0 position-relative">
<img class="border-radius-6px" src="images/team-05.jpg" alt />
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-12 bg-gradient-sky-blue-pink-transparent border-radius-6px">
<div class="social-icon absolute-middle-center">
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f icon-extra-medium"></i></a>
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram icon-extra-medium"></i></a>
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter icon-extra-medium"></i></a>
</div>
<span class="team-member-name d-block text-uppercase alt-font fw-500 text-white">Matthew taylor</span>
<span class="member-designation text-white opacity-8 text-uppercase fs-14">Director</span>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-02 border-radius-6px md-mb-30px">
<figure class="mb-0 position-relative">
<img class="border-radius-6px" src="images/team-06.jpg" alt />
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-12 bg-gradient-sky-blue-pink-transparent border-radius-6px">
<div class="social-icon absolute-middle-center">
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f icon-extra-medium"></i></a>
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram icon-extra-medium"></i></a>
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter icon-extra-medium"></i></a>
</div>
<span class="team-member-name d-block text-uppercase alt-font fw-500 text-white">Jessica dover</span>
<span class="member-designation text-white opacity-8 text-uppercase fs-14">Designer</span>
</figcaption>
</figure>
</div>
<div class="col text-left team-style-02">
<figure class="mb-0 position-relative">
<img class="border-radius-6px" src="images/team-07.jpg" alt />
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-12 bg-gradient-sky-blue-pink-transparent border-radius-6px">
<div class="social-icon absolute-middle-center">
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f icon-extra-medium"></i></a>
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram icon-extra-medium"></i></a>
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter icon-extra-medium"></i></a>
</div>
<span class="team-member-name d-block text-uppercase alt-font fw-500 text-white">Michal ruheen</span>
<span class="member-designation text-white opacity-8 text-uppercase fs-14">Photographer</span>
</figcaption>
</figure>
</div>
</div>
<div class="row justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-auto text-center">
<div class="d-inline-block"><img src="images/demo-data-analysis-06.png" alt></div>
<div class="d-inline-block text-dark-gray fs-22 alt-font fw-500 ls-minus-05px">World-class <span class="fw-700">30,000+ </span>companies are already work with crafto.</div>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray position-relative" data-parallax-background-ratio="0.5" style="background-image: url('images/blockquote-02.jpg');">
<div class="opacity-extra-medium bg-dark-gray"></div>
<div class="container position-relative z-index-1">
<div class="row justify-content-center mb-3">
<div class="col-lg-7 text-center">
<span class="fw-600 text-gradient-sky-blue-pink text-uppercase d-inline-block mb-5px">Qualified our experts</span>
<h2 class="fw-600 text-white ls-minus-1px">Meet our attorneys</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 team-style-03 md-mb-30px">
<div class="p-15 lg-p-13 bg-white box-shadow-large box-shadow-large-hover border-radius-6px">
<img src="images/team-24.jpg" class="mb-25px d-block mx-auto h-200px w-200px rounded-circle" alt />
<span class="d-inline-block fw-600 fs-18 text-dark-gray">Michal ruheen</span>
<div class="mb-10px text-uppercase fs-14 lh-22 fw-500">Director</div>
<p class="w-90 mx-auto mb-20px lg-w-100">Lorem ipsum is simply text the printing typesetting industry</p>
<div class="elements-social social-icon-style-04">
<ul class="small-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i><span></span></a></li>
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
</ul>
</div>
</div>
</div>
<div class="col text-center team-style-03 md-mb-30px">
<div class="p-15 lg-p-13 bg-white box-shadow-large box-shadow-large-hover border-radius-6px">
<img src="images/team-22.jpg" class="mb-25px d-block mx-auto h-200px w-200px rounded-circle" alt />
<span class="d-inline-block fw-600 fs-18 text-dark-gray">Jessica dover</span>
<div class="mb-10px text-uppercase fs-14 lh-22 fw-500">Manager</div>
<p class="w-90 mx-auto mb-20px lg-w-100">Lorem ipsum is simply text the printing typesetting industry</p>
<div class="elements-social social-icon-style-04">
<ul class="small-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i><span></span></a></li>
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
</ul>
</div>
</div>
</div>
<div class="col text-center team-style-03">
<div class="p-15 lg-p-13 bg-white box-shadow-large box-shadow-large-hover border-radius-6px">
<img src="images/team-23.jpg" class="mb-25px d-block mx-auto h-200px w-200px rounded-circle" alt />
<span class="d-inline-block fw-600 fs-18 text-dark-gray">Matthew taylor</span>
<div class="mb-10px text-uppercase fs-14 lh-22 fw-500">Producer</div>
<p class="w-90 mx-auto mb-20px lg-w-100">Lorem ipsum is simply text the printing typesetting industry</p>
<div class="elements-social social-icon-style-04">
<ul class="small-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i><span></span></a></li>
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="big-section position-relative">
<div id="particles-style-01" class="position-absolute h-100 top-0 left-0 w-100" data-particle="true" data-particle-options="{&quot;particles&quot;:{&quot;number&quot;:{&quot;value&quot;:25,&quot;density&quot;:{&quot;enable&quot;:true,&quot;value_area&quot;:800}},&quot;color&quot;:{&quot;value&quot;:&quot;#115cfa&quot;},&quot;shape&quot;:{&quot;type&quot;:&quot;circle&quot;,&quot;stroke&quot;:{&quot;width&quot;:0,&quot;color&quot;:&quot;#000000&quot;},&quot;polygon&quot;:{&quot;nb_sides&quot;:5},&quot;image&quot;:{&quot;src&quot;:&quot;img/github.svg&quot;,&quot;width&quot;:100,&quot;height&quot;:100}},&quot;opacity&quot;:{&quot;value&quot;:1,&quot;random&quot;:false,&quot;anim&quot;:{&quot;enable&quot;:false,&quot;speed&quot;:1,&quot;opacity_min&quot;:0.1,&quot;sync&quot;:false}},&quot;size&quot;:{&quot;value&quot;:4,&quot;random&quot;:true,&quot;anim&quot;:{&quot;enable&quot;:false,&quot;speed&quot;:40,&quot;size_min&quot;:0.1,&quot;sync&quot;:false}},&quot;line_linked&quot;:{&quot;enable&quot;:false,&quot;distance&quot;:150,&quot;color&quot;:&quot;#ffffff&quot;,&quot;opacity&quot;:0.4,&quot;width&quot;:1},&quot;move&quot;:{&quot;enable&quot;:true,&quot;speed&quot;:6,&quot;direction&quot;:&quot;none&quot;,&quot;random&quot;:false,&quot;straight&quot;:false,&quot;out_mode&quot;:&quot;out&quot;,&quot;bounce&quot;:false,&quot;attract&quot;:{&quot;enable&quot;:false,&quot;rotateX&quot;:600,&quot;rotateY&quot;:1200}}},&quot;interactivity&quot;:{&quot;detect_on&quot;:&quot;canvas&quot;,&quot;events&quot;:{&quot;onhover&quot;:{&quot;enable&quot;:true,&quot;mode&quot;:&quot;repulse&quot;},&quot;onclick&quot;:{&quot;enable&quot;:true,&quot;mode&quot;:&quot;push&quot;},&quot;resize&quot;:true},&quot;modes&quot;:{&quot;grab&quot;:{&quot;distance&quot;:400,&quot;line_linked&quot;:{&quot;opacity&quot;:1}},&quot;bubble&quot;:{&quot;distance&quot;:400,&quot;size&quot;:40,&quot;duration&quot;:2,&quot;opacity&quot;:8,&quot;speed&quot;:3},&quot;repulse&quot;:{&quot;distance&quot;:200,&quot;duration&quot;:0.4},&quot;push&quot;:{&quot;particles_nb&quot;:4},&quot;remove&quot;:{&quot;particles_nb&quot;:2}}},&quot;retina_detect&quot;:true}"></div>
<div class="container">
<div class="row justify-content-center align-items-center mb-6 text-center text-lg-start">
<div class="col-xxl-8 col-lg-7 md-mb-20px" data-anime="{ &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="alt-font text-dark-gray fw-700 ls-minus-2px mb-0"><span class="w-20px h-4px d-inline-block bg-base-color me-10px"></span>Industry experts</h2>
</div>
<div class="col-xxl-4 col-lg-5 col-md-8 col-sm-10 last-paragraph-no-margin" data-anime="{ &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<p>Lorem ipsum dolor to consectetur adipiscing elit eiusmod tempor incididunt labore ipsum.</p>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center">
<div class="col text-center team-style-04 md-mb-50px">
<figure class="mb-0 position-relative">
<img src="images/team-57.jpg" class="border-radius-10px" alt />
<figcaption class="w-100 ps-50px pe-50px">
<div class="position-relative p-35px lg-p-25px pb-0 border-radius-10px bg-base-color">
<div class="social-icon mb-20px">
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f icon-small"></i></a>
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram icon-small"></i></a>
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter icon-small"></i></a>
</div>
<div class="fs-19 fw-500 text-white lh-20">Jeremy smith</div>
<span class="text-white opacity-7 d-inline-block fs-15">Founder</span>
</div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-04 md-mb-50px">
<figure class="mb-0 position-relative">
<img src="images/team-58.jpg" class="border-radius-10px" alt />
<figcaption class="w-100 ps-50px pe-50px">
<div class="position-relative p-35px lg-p-25px pb-0 border-radius-10px bg-base-color">
<div class="social-icon mb-20px">
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f icon-small"></i></a>
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram icon-small"></i></a>
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter icon-small"></i></a>
</div>
<div class="fs-19 fw-500 text-white lh-20">Jenny smith</div>
<span class="text-white opacity-7 d-inline-block fs-15">Manager</span>
</div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-04">
<figure class="mb-0 position-relative">
<img src="images/team-59.jpg" class="border-radius-10px" alt />
<figcaption class="w-100 ps-50px pe-50px">
<div class="position-relative p-35px lg-p-25px pb-0 border-radius-10px bg-base-color">
<div class="social-icon mb-20px">
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f icon-small"></i></a>
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram icon-small"></i></a>
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter icon-small"></i></a>
</div>
<div class="fs-19 fw-500 text-white lh-20">Michal smith</div>
<span class="text-white opacity-7 d-inline-block fs-15">Creative</span>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="background-repeat position-relative overflow-hidden" style="background-image:url('images/demo-spa-salon-home-bg-01.jpg');">
<div class="position-absolute right-minus-100px bottom-100px d-none d-xl-inline-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<img src="images/demo-spa-salon-bg-img-05.png" alt>
</div>
<div class="container">
<div class="row justify-content-center mb-2">
<div class="col-lg-6 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fs-15 mb-5px text-tussock-yellow fw-600 d-block text-uppercase ls-1px">Meet the crafto salon</span>
<h3 class="fw-600 ls-minus-1px text-dark-gray">Professional team</h3>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;translateX&quot;: [-30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col text-center team-style-05 md-mb-20px">
<div class="position-relative mb-30px border-radius-4px last-paragraph-no-margin overflow-hidden">
<img src="images/demo-spa-salon-team-01.jpg" class="border-radius-4px" alt />
<div class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-40px lg-p-20px team-content bg-gradient-gray-light-dark-transparent">
<div class="social-icon fs-19">
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter"></i></a>
<a href="http://www.dribbble.com" target="_blank" class="text-white"><i class="fa-brands fa-dribbble"></i></a>
</div>
</div>
</div>
<div class="text-dark-gray lh-24 fs-18 fw-600">Lisa pedersen</div>
<p class="mb-0">Therapist</p>
</div>
<div class="col text-center team-style-05 md-mb-20px">
<div class="position-relative mb-30px border-radius-4px last-paragraph-no-margin overflow-hidden">
<img src="images/demo-spa-salon-team-02.jpg" class="border-radius-4px" alt />
<div class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-40px lg-p-20px team-content bg-gradient-gray-light-dark-transparent">
<div class="social-icon fs-19">
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter"></i></a>
<a href="http://www.dribbble.com" target="_blank" class="text-white"><i class="fa-brands fa-dribbble"></i></a>
</div>
</div>
</div>
<div class="text-dark-gray lh-24 fs-18 fw-600">Jeremy dupont</div>
<p class="mb-0">Manager</p>
</div>
<div class="col text-center team-style-05 sm-mb-20px">
<div class="position-relative mb-30px border-radius-4px last-paragraph-no-margin overflow-hidden">
<img src="images/demo-spa-salon-team-03.jpg" class="border-radius-4px" alt />
<div class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-40px lg-p-20px team-content bg-gradient-gray-light-dark-transparent">
<div class="social-icon fs-19">
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter"></i></a>
<a href="http://www.dribbble.com" target="_blank" class="text-white"><i class="fa-brands fa-dribbble"></i></a>
</div>
</div>
</div>
<div class="text-dark-gray lh-24 fs-18 fw-600">Johncy parker</div>
<p class="mb-0">Masseuse</p>
</div>
<div class="col text-center team-style-05">
<div class="position-relative mb-30px border-radius-4px last-paragraph-no-margin overflow-hidden">
<img src="images/demo-spa-salon-team-04.jpg" class="border-radius-4px" alt />
<div class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-40px lg-p-20px team-content bg-gradient-gray-light-dark-transparent">
<div class="social-icon fs-19">
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.twitter.com/" target="_blank" class="text-white"><i class="fa-brands fa-twitter"></i></a>
<a href="http://www.dribbble.com" target="_blank" class="text-white"><i class="fa-brands fa-dribbble"></i></a>
</div>
</div>
</div>
<div class="text-dark-gray lh-24 fs-18 fw-600">Matthew taylor</div>
<p class="mb-0">Cosmetologist</p>
</div>
</div>
</div>
</section>
<section class="background-position-center-top sm-background-image-none" style="background-image: url('images/vertical-line-bg-medium-gray.svg')">
<div class="container">
<div class="row mb-3">
<div class="col-12 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h3 class="fw-500 text-dark-gray ls-minus-1px shadow-none" data-shadow-animation="true" data-animation-delay="700">Qualified trusted <span class="fw-700 text-highlight d-inline-block">agents<span class="bg-yellow h-10px bottom-5px separator-animation"></span></span></h3>
</div>
</div>
<div class="row row-cols-1 row-cols-xl-4 row-cols-lg-3 row-cols-sm-2 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;perspective&quot;: [900, 1200], &quot;scaleY&quot;: [1.1, 1], &quot;rotateY&quot;: [-30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col team-style-06 mb-30px">
<div class="d-flex flex-column p-40px pb-20px lg-p-30px text-center border-radius-6px bg-white box-shadow-quadruple-large position-relative">
<div class="position-relative">
<a href="element-team.html#" class="d-inline-block position-relative"><img class="rounded-circle w-150px h-150px mb-20px" src="images/team-55.jpg" alt>
<span class="fs-13 fw-600 text-dark-gray alt-font lh-30 position-absolute top-25px right-minus-40px border-radius-30px bg-yellow ps-15px pe-15px"><i class="fa-solid fa-star"></i> 4.9</span></a>
</div>
<a href="element-team.html#" class="text-dark-gray fs-18 fw-600 mb-5px">Evan thomson</a>
<p class="w-90 mx-auto lh-28">I'm Evan, Expert in <span class="text-dark-gray text-decoration-line-bottom fw-500">sales</span> executive.</p>
<div class="text-center elements-social social-icon-style-02 border-top border-color-light-medium-gray w-100 pt-15px">
<ul class="small-icon dark">
<li class="m-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li class="m-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
<li class="m-0"><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li class="m-0"><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col team-style-06 mb-30px">
<div class="d-flex flex-column p-40px pb-20px lg-p-30px text-center border-radius-6px bg-white box-shadow-quadruple-large position-relative">
<div class="position-relative">
<a href="element-team.html#" class="d-inline-block position-relative"><img class="rounded-circle w-150px h-150px mb-20px" src="images/team-54.jpg" alt>
<span class="fs-13 fw-600 text-dark-gray alt-font lh-30 position-absolute top-25px right-minus-40px border-radius-30px bg-yellow ps-15px pe-15px"><i class="fa-solid fa-star"></i> 4.8</span></a>
</div>
<a href="element-team.html#" class="text-dark-gray fs-18 fw-600 mb-5px">Bryan jonhson</a>
<p class="w-90 mx-auto lh-28">I'm Bryan, Expert in <span class="text-dark-gray text-decoration-line-bottom fw-500">property </span>broker.</p>
<div class="text-center elements-social social-icon-style-02 border-top border-color-light-medium-gray w-100 pt-15px">
<ul class="small-icon dark">
<li class="m-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li class="m-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
<li class="m-0"><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li class="m-0"><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col team-style-06 mb-30px">
<div class="d-flex flex-column p-40px pb-20px lg-p-30px text-center border-radius-6px bg-white box-shadow-quadruple-large position-relative">
<div class="position-relative">
<a href="element-team.html#" class="d-inline-block position-relative"><img class="rounded-circle w-150px h-150px mb-20px" src="images/team-25.jpg" alt>
<span class="fs-13 fw-600 text-dark-gray alt-font lh-30 position-absolute top-25px right-minus-40px border-radius-30px bg-yellow ps-15px pe-15px"><i class="fa-solid fa-star"></i> 4.9</span></a>
</div>
<a href="element-team.html#" class="text-dark-gray fs-18 fw-600 mb-5px">Jemmy watson</a>
<p class="w-90 mx-auto lh-28">I'm Jemmy, Expert in <span class="text-dark-gray text-decoration-line-bottom fw-500">property</span> lawyer.</p>
<div class="text-center elements-social social-icon-style-02 border-top border-color-light-medium-gray w-100 pt-15px">
<ul class="small-icon dark">
<li class="m-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li class="m-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
<li class="m-0"><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li class="m-0"><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col team-style-06">
<div class="d-flex flex-column p-40px pb-25px lg-p-30px text-center border-radius-6px bg-white box-shadow-quadruple-large position-relative">
<div class="position-relative">
<a href="element-team.html#" class="d-inline-block position-relative"><img class="rounded-circle w-150px h-150px mb-20px" src="images/team-24.jpg" alt>
<span class="fs-13 fw-600 text-dark-gray alt-font lh-30 position-absolute top-25px right-minus-40px border-radius-30px bg-yellow ps-15px pe-15px"><i class="fa-solid fa-star"></i> 4.6</span></a>
</div>
<a href="element-team.html#" class="text-dark-gray fs-18 fw-600 mb-5px">Jeremy dupont</a>
<p class="w-90 mx-auto lh-28">I'm Jeremy, Expert in <span class="text-dark-gray text-decoration-line-bottom fw-500">property</span> broker.</p>
<div class="text-center elements-social social-icon-style-02 border-top border-color-light-medium-gray w-100 pt-15px">
<ul class="small-icon dark">
<li class="m-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li class="m-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
<li class="m-0"><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li class="m-0"><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-7 text-center">
<span class="alt-font fw-600 text-gradient-pink-orange text-uppercase">Our yoga team</span>
<h3 class="alt-font text-dark-gray ls-minus-1px fw-700">Professional trainer</h3>
</div>
</div>
<div class="row align-items-center mb-5 xs-mb-35px">
<div class="col-lg-4 md-mb-30px" data-anime="{ &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="text-center team-style-07 bg-white border-radius-6px box-shadow-extra-large box-shadow-quadruple-large-hover">
<img src="images/demo-yoga-and-meditation-trainer-04.jpg" class="border-radius-6px w-100" alt>
<div class="team-content p-30px">
<div class="primary-font fs-19 fw-600 text-dark-gray">Matthew taylor</div>
<span class="fs-16 lh-22 d-block mb-15px">Yoga therapist</span>
<div class="elements-social social-text-style-01">
<ul class="small-icon fs-16 dark primary-font fw-500">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank">Ig.</a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
<li><a class="behance" href="http://www.behance.com/" target="_blank">Be.</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-8" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row mb-30px">
<div class="col-md-6 sm-mb-30px">
<div class="row g-0 box-shadow-extra-large box-shadow-quadruple-large-hover border-radius-6px overflow-hidden">
<div class="col-5 cover-background" style="background-image: url('images/demo-yoga-and-meditation-trainer-05.jpg')">
<span class="fs-13 lh-28 primary-font fw-600 text-dark-gray border-radius-100px bg-white position-absolute bottom-20px left-20px ps-10px pe-10px box-shadow-extra-large"><i class="fa-solid fa-star text-golden-yellow"></i> 4.5</span>
</div>
<div class="col-7 bg-white ps-35px pt-30px pb-30px xs-ps-20px">
<span class="primary-font fs-18 fw-600 text-dark-gray d-block">Jane cooper</span>
<span class="fs-16 lh-22 d-block">Yoga therapist</span>
<div class="h-1px w-100 bg-extra-medium-gray mt-15px mb-10px"></div>
<div class="elements-social social-text-style-01">
<ul class="small-icon dark primary-font fw-500">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank">Ig.</a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row g-0 box-shadow-extra-large box-shadow-quadruple-large-hover border-radius-6px overflow-hidden">
<div class="col-5 cover-background" style="background-image: url('images/demo-yoga-and-meditation-trainer-08.jpg')">
<span class="fs-13 lh-28 primary-font fw-600 text-dark-gray border-radius-100px bg-white position-absolute bottom-20px left-20px ps-10px pe-10px box-shadow-extra-large"><i class="fa-solid fa-star text-golden-yellow"></i> 4.9</span>
</div>
<div class="col-7 bg-white ps-35px pt-30px pb-30px xs-ps-20px">
<span class="primary-font fs-18 fw-600 text-dark-gray d-block">Lisa homura</span>
<span class="fs-16 lh-22 d-block">Meditation</span>
<div class="h-1px w-100 bg-extra-medium-gray mt-15px mb-10px"></div>
<div class="elements-social social-text-style-01">
<ul class="small-icon dark primary-font fw-500">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank">Ig.</a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-30px">
<div class="col-md-6 sm-mb-30px">
<div class="row g-0 box-shadow-extra-large box-shadow-quadruple-large-hover border-radius-6px overflow-hidden">
<div class="col-5 cover-background" style="background-image: url('images/demo-yoga-and-meditation-trainer-06.jpg')">
<span class="fs-13 lh-28 primary-font fw-600 text-dark-gray border-radius-100px bg-white position-absolute bottom-20px left-20px ps-10px pe-10px box-shadow-extra-large"><i class="fa-solid fa-star text-golden-yellow"></i> 4.7</span>
</div>
<div class="col-7 bg-white ps-35px pt-30px pb-30px xs-ps-20px">
<span class="primary-font fs-18 fw-600 text-dark-gray d-block">Janer wilson</span>
<span class="fs-16 lh-22 d-block">Vinyasa flow</span>
<div class="h-1px w-100 bg-extra-medium-gray mt-15px mb-10px"></div>
<div class="elements-social social-text-style-01">
<ul class="small-icon dark primary-font fw-500">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank">Ig.</a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row g-0 box-shadow-extra-large box-shadow-quadruple-large-hover border-radius-6px overflow-hidden">
<div class="col-5 cover-background" style="background-image: url('images/demo-yoga-and-meditation-trainer-09.jpg')">
<span class="fs-13 lh-28 primary-font fw-600 text-dark-gray border-radius-100px bg-white position-absolute bottom-20px left-20px ps-10px pe-10px box-shadow-extra-large"><i class="fa-solid fa-star text-golden-yellow"></i> 5.0</span>
</div>
<div class="col-7 bg-white ps-35px pt-30px pb-30px xs-ps-20px">
<span class="primary-font fs-18 fw-600 text-dark-gray d-block">Caterine parker</span>
<span class="fs-16 lh-22 d-block">Restorative</span>
<div class="h-1px w-100 bg-extra-medium-gray mt-15px mb-10px"></div>
<div class="elements-social social-text-style-01">
<ul class="small-icon dark primary-font fw-500">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank">Ig.</a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 sm-mb-30px">
<div class="row g-0 box-shadow-extra-large box-shadow-quadruple-large-hover border-radius-6px overflow-hidden">
<div class="col-5 cover-background" style="background-image: url('images/demo-yoga-and-meditation-trainer-07.jpg')">
<span class="fs-13 lh-28 primary-font fw-600 text-dark-gray border-radius-100px bg-white position-absolute bottom-20px left-20px ps-10px pe-10px"><i class="fa-solid fa-star text-golden-yellow"></i> 4.8</span>
</div>
<div class="col-7 bg-white ps-35px pt-30px pb-30px xs-ps-20px">
<span class="primary-font fs-18 fw-600 text-dark-gray d-block">Lisa pedersen</span>
<span class="fs-16 lh-22 d-block">Strength vinyasa</span>
<div class="h-1px w-100 bg-extra-medium-gray mt-15px mb-10px"></div>
<div class="elements-social social-text-style-01">
<ul class="small-icon dark primary-font fw-500">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank">Ig.</a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row g-0 box-shadow-extra-large box-shadow-quadruple-large-hover border-radius-6px overflow-hidden">
<div class="col-5 cover-background" style="background-image: url('images/demo-yoga-and-meditation-trainer-10.jpg')">
<span class="fs-13 lh-28 primary-font fw-600 text-dark-gray border-radius-100px bg-white position-absolute bottom-20px left-20px ps-10px pe-10px"><i class="fa-solid fa-star text-golden-yellow"></i> 4.5</span>
</div>
<div class="col-7 bg-white ps-35px pt-30px pb-30px xs-ps-20px">
<span class="primary-font fs-18 fw-600 text-dark-gray d-block">Jeff foster</span>
<span class="fs-16 lh-22 d-block">Restorative</span>
<div class="h-1px w-100 bg-extra-medium-gray mt-15px mb-10px"></div>
<div class="elements-social social-text-style-01">
<ul class="small-icon dark primary-font fw-500">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank">Ig.</a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-12 text-center d-flex flex-wrap align-items-center 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;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="fs-24 fw-500 ls-minus-05px text-dark-gray d-inline-block align-middle md-mb-10px"><img src="images/demo-yoga-and-meditation-gallery-icon-01.png" class="me-15px" alt>254+ committed yoga trainers are ready to help!</div>
<div class="separator-line-1px d-none d-lg-inline-block align-middle bg-extra-medium-gray w-90px ms-20px me-20px"></div>
<a href="element-team.html#" class="text-dark-gray text-dark-gray-hover lh-20 ls-minus-05px d-inline-block align-middle fs-24 fw-600">Join our team</a>
</div>
</div>
</div>
</section>
<section class="pb-0 background-position-center-top sm-background-image-none" style="background-image: url('images/vertical-line-bg-medium-gray.svg')">
<div class="container">
<div class="row mb-5">
<div class="col-12 col-xl-8 col-lg-10" 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;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="text-dark-gray fw-600 mb-0 ls-minus-2px">Highly talented world-class designers and visualiser.</h2>
</div>
</div>
<div class="row justify-content-end">
<div class="col-12 col-xl-5 col-lg-6 last-paragraph-no-margin md-mb-30px" 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;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<p class="w-85 sm-w-100">We are excited for our work and how it positively impacts clients. With over 12 years of experience we have been constantly providing excellent web solutions is best in-class experience. </p>
</div>
<div class="col-12 col-xl-5 col-lg-6 last-paragraph-no-margin" 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;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<p class="w-85 sm-w-100">We strive to develop real-world web solutions that are ideal for small to large projects with bespoke project requirements. We create compelling web designs, which are the right-fit for your target.</p> </div>
</div>
</div>
</section>
<section class="background-position-center-top sm-background-image-none" style="background-image: url('images/vertical-line-bg-medium-gray.svg')">
<div class="container">
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 transition-inner-all justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col team-style-08 md-mb-30px" data-bottom-top="transform: translateY(-40px)" data-top-bottom="transform: translateY(40px)">
<figure class="mb-0 position-relative overflow-hidden">
<img src="images/team-57.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 lg-p-8 md-p-13 sm-p-9 bg-gradient-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-19 fw-500 text-white d-block">Jeremy dupont</span>
<span class="member-designation fs-16 lh-26 text-white d-block">Designer</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.instagram.com/" target="_blank" class="text-black w-55px h-55px bg-white"><i class="fa-brands fa-linkedin-in icon-small"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08 md-mb-30px mt-2 lg-mt-0" data-bottom-top="transform: translateY(40px)" data-top-bottom="transform: translateY(-40px)">
<figure class="mb-0 position-relative overflow-hidden">
<img src="images/team-58.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 lg-p-8 md-p-13 sm-p-9 bg-gradient-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-19 fw-500 text-white d-block">Jessica dover</span>
<span class="member-designation fs-16 lh-26 text-white d-block">Director</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.twitter.com/" target="_blank" class="text-black w-55px h-55px bg-white"><i class="fa-brands fa-twitter icon-small"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08" data-bottom-top="transform: translateY(-40px)" data-top-bottom="transform: translateY(40px)">
<figure class="mb-0 position-relative overflow-hidden">
<img src="images/team-59.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 lg-p-8 md-p-13 sm-p-9 bg-gradient-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-19 fw-500 text-white d-block">Matthew taylor</span>
<span class="member-designation fs-16 lh-26 text-white d-block">Manager</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.facebook.com/" target="_blank" class="text-black w-55px h-55px bg-white"><i class="fa-brands fa-facebook-f icon-small"></i></a>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="big-section bg-gradient-very-light-gray">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-7 lg-mb-50px md-mb-30px">
<div class="tab-content bg-white box-shadow-extra-large">
<div class="tab-pane active fade in show" id="tab_nine1">
<div class="row g-0 row-cols-1 row-cols-md-2">
<div class="col p-55px sm-p-40px order-md-1 order-2">
<h6 class="fw-600 text-dark-gray mb-0">Matthew taylor</h6>
<span class="fs-18">Strength training</span>
<div class="divider-style-03 divider-style-03-01 border-color-extra-medium-gray mt-20px mb-20px"></div>
<p>Lorem ipsum dolor consecte adiscing placerat vestibulum vivamus eget ante suscipit.</p>
<div class="d-flex align-items-center mb-30px">
<div class="col-auto text-center"><h3 class="fw-700 ls-minus-2px text-dark-gray mb-0">5.0</h3></div>
<div class="col border-start border-color-extra-medium-gray ms-20px ps-20px">
<div class="review-star-icon fs-17">
<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="fs-15 lh-20 fw-600 d-block text-dark-gray">2070 Reviews</span>
</div>
</div>
<div class="elements-social social-icon-style-09">
<ul class="medium-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
</ul>
</div>
</div>
<div class="col position-relative cover-background sm-h-350px order-md-2 order-1" style="background-image:url('images/demo-gym-and-fitness-home-15.jpg');">
<span class="fs-190 fw-700 alt-font text-white position-absolute left-minus-30px bottom-minus-50px">01.</span>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_nine2">
<div class="row g-0 row-cols-1 row-cols-md-2">
<div class="col p-55px sm-p-40px order-md-1 order-2">
<h6 class="fw-600 text-dark-gray mb-0">Jeremy dupont</h6>
<span class="fs-18">Crossfit coach</span>
<div class="divider-style-03 divider-style-03-01 border-color-extra-medium-gray mt-20px mb-20px"></div>
<p>Lorem ipsum dolor consecte adiscing placerat vestibulum vivamus eget ante suscipit.</p>
<div class="d-flex align-items-center mb-30px">
<div class="col-auto text-center"><h3 class="fw-700 ls-minus-2px text-dark-gray mb-0">4.9</h3></div>
<div class="col border-start border-color-extra-medium-gray ms-20px ps-20px">
<div class="review-star-icon fs-17">
<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="fs-15 lh-20 fw-600 d-block text-dark-gray">2116 Reviews</span>
</div>
</div>
<div class="elements-social social-icon-style-09">
<ul class="medium-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
</ul>
</div>
</div>
<div class="col position-relative cover-background sm-h-350px order-md-2 order-1" style="background-image:url('images/demo-gym-and-fitness-home-14.jpg');">
<span class="fs-190 fw-700 alt-font text-white position-absolute left-minus-30px bottom-minus-50px">02.</span>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_nine3">
<div class="row g-0 row-cols-1 row-cols-md-2">
<div class="col p-55px sm-p-40px order-md-1 order-2">
<h6 class="fw-600 text-dark-gray mb-0">Daniel james</h6>
<span class="fs-18">Personal training</span>
<div class="divider-style-03 divider-style-03-01 border-color-extra-medium-gray mt-20px mb-20px"></div>
<p>Lorem ipsum dolor consecte adiscing placerat vestibulum vivamus eget ante suscipit.</p>
<div class="d-flex align-items-center mb-30px">
<div class="col-auto text-center"><h3 class="fw-700 ls-minus-2px text-dark-gray mb-0">5.0</h3></div>
<div class="col border-start border-color-extra-medium-gray ms-20px ps-20px">
<div class="review-star-icon fs-17">
<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="fs-15 lh-20 fw-600 d-block text-dark-gray">1250 Reviews</span>
</div>
</div>
<div class="elements-social social-icon-style-09">
<ul class="medium-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
</ul>
</div>
</div>
<div class="col position-relative cover-background sm-h-350px order-md-2 order-1" style="background-image:url('images/demo-gym-and-fitness-home-16.jpg');">
<span class="fs-190 fw-700 alt-font text-white position-absolute left-minus-30px bottom-minus-50px">03.</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 offset-xl-1 col-lg-12 team-style-09" 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;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fs-19 lh-20 ls-0px fw-600 text-dark-gray d-inline-block text-decoration-line-bottom-medium border-color-base-color mb-15px">World class trainer</span>
<h3 class="fw-700 ls-minus-1px text-dark-gray mb-20px">Most popular expert trainers.</h3>
<ul class="nav nav-tabs flex-column border-0 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;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="nav-item">
<a data-bs-toggle="tab" href="element-team.html#tab_nine1" class="nav-link active">
<span class="number fs-20 sm-fs-18 me-5px fw-600">01.</span><span class="name fs-20 sm-fs-18 text-dark-gray fw-600">Matthew taylor</span><span class="text-medium-gray ms-auto">Strength training</span></a>
</li>
<li class="nav-item">
<a data-bs-toggle="tab" href="element-team.html#tab_nine2" class="nav-link">
<span class="number fs-20 sm-fs-18 me-5px fw-600">02.</span><span class="name fs-20 sm-fs-18 text-dark-gray fw-600">Jeremy dupont</span><span class="text-medium-gray ms-auto">Crossfit coach</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="element-team.html#tab_nine3">
<span class="number fs-20 sm-fs-18 me-5px fw-600">03.</span><span class="name fs-20 sm-fs-18 text-dark-gray fw-600">Daniel james</span><span class="text-medium-gray ms-auto">Personal training</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="bg-gradient-very-light-gray overflow-hidden">
<div class="container">
<div class="row mb-6 sm-mb-40px" data-anime="{&quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-lg-6 md-mb-25px">
<h3 class="mb-0 fw-600 text-dark-gray w-95 lg-w-100 ls-minus-2px">We believe in power of unity and impact in future.</h3>
</div>
<div class="col-lg-5 offset-lg-1 last-paragraph-no-margin">
<p class="w-95 md-w-100">We are excited for our work and how it positively impacts clients. With over 12 years of experience we have been constantly providing excellent.</p>
</div>
</div>
</div>
<div class="container-fluid p-0">
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 g-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;rotateX&quot;:[30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col team-style-10 md-ps-15px md-pe-15px md-mb-30px">
<figure class="mb-0 position-relative overflow-hidden">
<img src="images/demo-branding-agency-team-01.jpg" class="w-100" alt />
<img src="images/demo-branding-agency-team-01-hover.jpg" class="hover-switch-image" alt />
<figcaption class="w-100 h-100 d-flex flex-wrap">
<div class="social-icon d-flex flex-column flex-shrink-1 mb-auto p-30px ms-auto">
<a href="https://www.twitter.com/" target="_blank" class="text-white bg-dark-gray"><i class="fa-brands fa-twitter icon-small"></i></a>
</div>
<div class="team-member-strip w-100 mt-auto d-flex align-items-center pt-15px pb-15px ps-30px pe-30px bg-white">
<span class="team-member-name fw-600 alt-font text-dark-gray fs-18 ls-minus-05px">Jeremy dupont</span>
<span class="member-designation fs-15 lh-20 ms-auto alt-font">Designer</span>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-10 mt-20px md-mt-0 md-ps-15px md-pe-15px md-mb-30px">
<figure class="mb-0 position-relative overflow-hidden">
<img src="images/demo-branding-agency-team-02.jpg" class="w-100" alt />
<img src="images/demo-branding-agency-team-02-hover.jpg" class="hover-switch-image" alt />
<figcaption class="w-100 h-100 d-flex flex-wrap">
<div class="social-icon d-flex flex-column flex-shrink-1 mb-auto p-30px ms-auto">
<a href="https://www.facebook.com/" target="_blank" class="text-white bg-dark-gray"><i class="fa-brands fa-facebook-f icon-small"></i></a>
</div>
<div class="team-member-strip w-100 mt-auto d-flex align-items-center pt-15px pb-15px ps-30px pe-30px bg-white">
<span class="team-member-name fw-600 alt-font text-dark-gray fs-18 ls-minus-05px">Matthew taylor</span>
<span class="member-designation fs-15 lh-20 ms-auto alt-font">Writer</span>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-10 mt-40px md-mt-0 md-ps-15px md-pe-15px sm-mb-30px">
<figure class="mb-0 position-relative overflow-hidden">
<img src="images/demo-branding-agency-team-03.jpg" class="w-100" alt />
<img src="images/demo-branding-agency-team-03-hover.jpg" class="hover-switch-image" alt />
<figcaption class="w-100 h-100 d-flex flex-wrap">
<div class="social-icon d-flex flex-column flex-shrink-1 mb-auto p-30px ms-auto">
<a href="https://www.linkedin.com/" target="_blank" class="text-white bg-dark-gray"><i class="fa-brands fa-linkedin-in icon-small"></i></a>
</div>
<div class="team-member-strip w-100 mt-auto d-flex align-items-center pt-15px pb-15px ps-30px pe-30px bg-white">
<span class="team-member-name fw-600 alt-font text-dark-gray fs-18 ls-minus-05px">Herman miller</span>
<span class="member-designation fs-15 lh-20 ms-auto alt-font">Manager</span>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-10 mt-60px md-mt-0 md-ps-15px md-pe-15px">
<figure class="mb-0 position-relative overflow-hidden">
<img src="images/demo-branding-agency-team-04.jpg" class="w-100" alt />
<img src="images/demo-branding-agency-team-04-hover.jpg" class="hover-switch-image" alt />
<figcaption class="w-100 h-100 d-flex flex-wrap">
<div class="social-icon d-flex flex-column flex-shrink-1 mb-auto p-30px ms-auto">
<a href="https://www.instagram.com/" target="_blank" class="text-white bg-dark-gray"><i class="fa-brands fa-instagram icon-small"></i></a>
</div>
<div class="team-member-strip w-100 mt-auto d-flex align-items-center pt-15px pb-15px ps-30px pe-30px bg-white">
<span class="team-member-name fw-600 alt-font text-dark-gray fs-18 ls-minus-05px">Jessica dover</span>
<span class="member-designation fs-15 lh-20 ms-auto alt-font">Designer</span>
</div>
</figcaption>
</figure>
</div>
</div>
<div class="row mt-3">
<div class="col-12 text-center">
<div class="text-dark-gray fs-20 ls-minus-05px">Our nearly <span class="fw-700">350+</span> creative team members are ready to help now. <a href="element-team.html#" class="text-dark-gray text-dark-gray-hover fw-600 text-decoration-line-bottom">Contact us now</a></div>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray">
<div class="container">
<div class="row mb-5">
<div class="col-lg-12 text-center">
<h3 class="mb-0 alt-font text-dark-gray fw-700">Groomsman & Bridesmaid</h3>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center">
<div class="col text-center team-style-11 mb-30px last-paragraph-no-margin">
<img src="images/demo-wedding-team-01.png" class="mb-10px d-block mx-auto rounded-circle" alt />
<span class="d-inline-block fs-19 fw-700 alt-font text-dark-gray">Stefano smith</span>
<p>Groomsman</p>
</div>
<div class="col text-center team-style-11 mb-30px last-paragraph-no-margin">
<img src="images/demo-wedding-team-02.png" class="mb-10px d-block mx-auto rounded-circle" alt />
<span class="d-inline-block fs-19 fw-700 alt-font text-dark-gray">Evan thomson</span>
<p>Groomsman</p>
</div>
<div class="col text-center team-style-11 mb-30px last-paragraph-no-margin">
<img src="images/demo-wedding-team-03.png" class="mb-10px d-block mx-auto rounded-circle" alt />
<span class="d-inline-block fs-19 fw-700 alt-font text-dark-gray">Bryan jonhson</span>
<p>Groomsman</p>
</div>
<div class="col text-center team-style-11 mb-30px last-paragraph-no-margin">
<img src="images/demo-wedding-team-04.png" class="mb-10px d-block mx-auto rounded-circle" alt />
<span class="d-inline-block fs-19 fw-700 alt-font text-dark-gray">Pablo dante</span>
<p>Groomsman</p>
</div>
<div class="col text-center team-style-11 md-mb-30px last-paragraph-no-margin">
<img src="images/demo-wedding-team-05.png" class="mb-15px d-block mx-auto rounded-circle" alt />
<span class="d-inline-block fs-19 fw-700 alt-font text-dark-gray">Didier hendrix</span>
<p>Bridesmaid</p>
</div>
<div class="col text-center team-style-11 md-mb-30px last-paragraph-no-margin">
<img src="images/demo-wedding-team-06.png" class="mb-15px d-block mx-auto rounded-circle" alt />
<span class="d-inline-block fs-19 fw-700 alt-font text-dark-gray">Samantha jones</span>
<p>Bridesmaid</p>
</div>
<div class="col text-center team-style-11 md-mb-30px last-paragraph-no-margin">
<img src="images/demo-wedding-team-07.png" class="mb-15px d-block mx-auto rounded-circle" alt />
<span class="d-inline-block fs-19 fw-700 alt-font text-dark-gray">Nick hempherson</span>
<p>Bridesmaid</p>
</div>
<div class="col text-center team-style-11 last-paragraph-no-margin">
<img src="images/demo-wedding-team-08.png" class="mb-15px d-block mx-auto rounded-circle" alt />
<span class="d-inline-block fs-19 fw-700 alt-font text-dark-gray">Jonathan james</span>
<p>Bridesmaid</p>
</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#274e49414867534f424a425d46460944484a"><span class="__cf_email__" data-cfemail="7910171f16390d111c141c031818571a1614">[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>