Access_New/pages/header-left-menu-simple.html
2024-09-05 11:33:27 +05:45

1225 lines
66 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>
<div class="left-sidebar-wrapper" data-sticky_parent>
<header class="left-sidebar-header header-light bg-white border-end border-1 border-color-transparent-dark-light" id="navbar-menu">
<nav class="left-sidebar-nav bg-white header-demo" data-sticky_column>
<div class="side-menu-top text-center bg-white">
<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 class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</div>
</div>
<div class="side-menu-bottom">
<div class="side-menu">
<ul class="menu-item-list fw-500">
<li class="menu-item">
<a href="header-left-menu-simple.html#" class="nav-link">Pre-Built Sites</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-0" aria-expanded="false"></span>
<ul class="sub-menu collapse" id="sub-menu-0">
<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-business.html" target="_blank">Business</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>
<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-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-fashion-store.html" target="_blank">Fashion Store</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-startup.html" target="_blank">Startup</a></li>
</ul>
</li>
<li class="menu-item">
<a href="header-left-menu-simple.html#" class="nav-link">Pages</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-01" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-01">
<li class="menu-item">
<a href="header-left-menu-simple.html#">About Pages</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-02" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-02">
<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>
</li>
<li class="menu-item">
<a href="header-left-menu-simple.html#">Services Pages</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-03" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-03">
<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>
</li>
<li class="menu-item">
<a href="header-left-menu-simple.html#">Contact Pages</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-04" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-04">
<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>
</li>
<li class="menu-item">
<a href="header-left-menu-simple.html#">Other Pages</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-05" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-05">
<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>
</li>
<li class="menu-item">
<a href="header-left-menu-simple.html#">Other Pages</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-06" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-06">
<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>
</li>
</ul>
</li>
<li class="menu-item">
<a href="header-left-menu-simple.html#" class="nav-link">Portfolio</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-07" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-07">
<li class="menu-item">
<a href="header-left-menu-simple.html#">Portfolio Classic</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-08" aria-expanded="false"></span>
<ul class="sub-menu collapse" id="sub-menu-08">
<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="menu-item">
<a href="header-left-menu-simple.html#">Portfolio Boxed</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-09" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-09">
<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="menu-item">
<a href="header-left-menu-simple.html#">Portfolio Transform</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-10" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-10">
<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="menu-item">
<a href="header-left-menu-simple.html#">Portfolio Creative</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-11" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-11">
<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="menu-item">
<a href="header-left-menu-simple.html#">Portfolio Attractive</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-12" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-12">
<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="menu-item">
<a href="header-left-menu-simple.html#">Portfolio Clean</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-13" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-13">
<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="menu-item">
<a href="header-left-menu-simple.html#">Portfolio Simple</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-14" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-14">
<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="menu-item">
<a href="header-left-menu-simple.html#">Portfolio Modern</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-15" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-15">
<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="menu-item">
<a href="header-left-menu-simple.html#">Portfolio Other</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-16" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-16">
<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="menu-item">
<a href="header-left-menu-simple.html#">Single Project</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-17" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-17">
<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="menu-item">
<a href="header-left-menu-simple.html#" class="nav-link">Elements</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-18" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-18">
<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 class="menu-item">
<a href="header-left-menu-simple.html#">Premium Elements</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-19" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-19">
<li><a href="element-animated-particles.html">Animated Particles</a></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="demo-restaurant.html" target="_blank">Custom Cursor</a></li>
<li><a href="element-3d-parallax-hover.html">3D Parallax Hover</a></li>
<li><a href="element-marquee.html">Marquee</a></li>
<li><a href="element-fancy-images.html">Fancy Images</a></li>
<li><a href="element-scrolling-effects.html">Scrolling Effects</a></li>
<li><a href="element-fancy-heading.html">Fancy Heading</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="header-left-menu-simple.html#" class="nav-link">Features</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-20" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-20">
<li class="menu-item">
<a href="header-left-menu-simple.html#">Header</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-21" aria-expanded="false"></span>
<ul class="sub-menu collapse" id="sub-menu-21">
<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>
</ul>
</li>
<li class="menu-item">
<a href="header-left-menu-simple.html#">Left Menu</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-22" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-22">
<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="menu-item">
<a href="header-left-menu-simple.html#">Hamburger Menu</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-23" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-23">
<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="menu-item">
<a href="header-left-menu-simple.html#">Header Type</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-24" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-24">
<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="menu-item">
<a href="header-left-menu-simple.html#">Mobile Menu</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-25" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-25">
<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>
<li class="menu-item">
<a href="header-left-menu-simple.html#">Modal Popup</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-26" aria-expanded="false"></span>
<ul class="sub-menu collapse" id="sub-menu-26">
<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="menu-item">
<a href="header-left-menu-simple.html#">Icon Packs</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-27" aria-expanded="false"></span>
<ul class="sub-menu collapse" id="sub-menu-27">
<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="menu-item">
<a href="header-left-menu-simple.html#">Sliders</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-28" aria-expanded="false"></span>
<ul class="sub-menu collapse" id="sub-menu-28">
<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="menu-item">
<a href="animations.html">Animations</a>
</li>
<li class="menu-item">
<a href="demo-minimal-portfolio.html">Page Preloader</a>
</li>
<li class="menu-item">
<a href="demo-jewellery-store.html">Cookie Notify</a>
</li>
<li class="menu-item">
<a href="demo-startup.html">Back to Top</a>
</li>
<li class="menu-item">
<a href="demo-design-agency.html">Sticky Footer</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="header-left-menu-simple.html#" class="nav-link">Blog</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-29" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-29">
<li class="menu-item">
<a href="blog-grid.html">Blog Grid</a>
</li>
<li class="menu-item">
<a href="blog-classic.html">Blog Classic</a>
</li>
<li class="menu-item">
<a href="blog-metro.html">Blog Metro</a>
</li>
<li class="menu-item">
<a href="blog-masonry.html">Blog Masonry</a>
</li>
<li class="menu-item">
<a href="blog-simple.html">Blog Simple</a>
</li>
<li class="menu-item">
<a href="blog-date.html">Blog Date</a>
</li>
<li class="menu-item">
<a href="blog-only-text.html">Blog Only Text</a>
</li>
<li class="menu-item">
<a href="blog-side-image.html">Blog Side Image</a>
</li>
<li class="menu-item">
<a href="blog-standard.html">Blog Standard</a>
</li>
<li class="menu-item">
<a href="header-left-menu-simple.html#">Single Posts</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-30" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-30">
<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="menu-item">
<a href="header-left-menu-simple.html#">Post Types </a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-31" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-31">
<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="menu-item">
<a href="header-left-menu-simple.html#" class="nav-link">Shop</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-32" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-32">
<li class="menu-item">
<a href="header-left-menu-simple.html#">Shop Layout</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-33" aria-expanded="false"></span>
<ul class="sub-menu collapse" id="sub-menu-33">
<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 - Thumb Left</a></li>
<li><a href="demo-decor-store-single-product.html" target="_blank">Single - Thumb Bottom</a></li>
</ul>
</li>
<li class="menu-item">
<a href="header-left-menu-simple.html#">Utility Pages</a>
<span class="menu-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#sub-menu-34" aria-expanded="false" aria-label="button"></span>
<ul class="sub-menu collapse" id="sub-menu-34">
<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>
</li>
</ul>
</li>
</ul>
</div>
<div class="left-menu-bottom text-center">
<div class="header-icon justify-content-center">
<div class="header-social-icon icon mb-20px">
<a href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a>
<a href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
<a href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="text-medium-gray fs-12 text-uppercase">&copy; 2024 Crafto</div>
</div>
</div>
</nav>
</header>
<div class="sidebar-wrapper" data-sticky_column>
<section class="cover-background full-screen py-0 md-h-750px sm-h-650px" style="background-image:url('images/demo-it-business-banner-bg.jpg');">
<div class="opacity-very-light bg-black"></div>
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-xxl-6 col-xl-8 col-md-10 position-relative z-index-1 xs-mt-50px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;perspective&quot;: [1200,1200], &quot;scale&quot;: [1.05, 1], &quot;rotateX&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="ps-25px pe-25px pt-5px pb-5px mb-25px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-left-transparent d-flex w-70 sm-w-100"><i class="bi bi-megaphone text-white icon-small me-10px"></i>Grow your business with us</span>
<h1 class="text-white fw-600 ls-minus-2px mb-25px xs-fs-50">We craft unique business ideas.</h1>
<div><p class="fw-300 fs-18 w-85 sm-w-95 text-white opacity-6 xs-mb-15px">We're a fully dedicated corporate service agency collaborating with brands all over the world.</p></div>
<a href="header-left-menu-simple.html#" class="btn btn-extra-large btn-switch-text btn-gradient-sky-blue-pink fw-600 text-transform-none btn-rounded me-10px ls-0px mt-15px">
<span>
<span class="btn-double-text" data-text="Explore crafto">Explore crafto</span>
<span><i class="fa-brands fa-youtube"></i></span>
</span>
</a>
<a href="header-left-menu-simple.html#" class="btn btn-extra-large btn-switch-text text-transform-none btn-transparent-white-light btn-rounded border-1 ls-0px mt-15px">
<span>
<span class="btn-double-text" data-text="Contact us">Contact us</span>
<span><i class="fa-regular fa-envelope"></i></span>
</span>
</a>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-3 justify-content-center mb-7" 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 icon-with-text-style-01 lg-mb-30px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon me-20px">
<img src="images/demo-it-business-icon-01.gif" alt />
</div>
<div class="feature-box-content">
<span class="d-inline-block fs-18 text-dark-gray fw-600 mb-5px">Grow your business</span>
<p class="w-80 xl-w-90 lg-w-100">We believe in challenges and so we have made challenge.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-01 lg-mb-30px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon me-20px">
<img src="images/demo-it-business-icon-02.gif" alt />
</div>
<div class="feature-box-content">
<span class="d-inline-block fs-18 text-dark-gray fw-600 mb-5px">Cost savings ideas</span>
<p class="w-80 xl-w-90 lg-w-100">We also help our clients with social media strategy.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-01 md-mb-30px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon me-20px">
<img src="images/demo-it-business-icon-03.gif" alt />
</div>
<div class="feature-box-content">
<span class="d-inline-block fs-18 text-dark-gray fw-600 mb-5px">Boost performance</span>
<p class="w-80 xl-w-90 lg-w-100">We deliver email marketing campaigns to your audience.</p>
</div>
</div>
</div>
</div>
<div class="row mb-10 align-items-center">
<div class="col-xl-5 col-lg-10 position-relative lg-mb-15 xs-mb-70px">
<div class="w-70 xs-w-80" data-animation-delay="50" data-shadow-animation="true">
<img src="images/demo-it-business-01.jpg" alt class="border-radius-8px w-100">
</div>
<div class="w-60 overflow-hidden position-absolute right-minus-15px xs-right-15px xs-w-60 bottom-minus-50px" data-shadow-animation="true" data-animation-delay="250" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
<img src="images/demo-it-business-02.jpg" alt class="border-radius-8px w-100 box-shadow-quadruple-large" />
</div>
</div>
<div class="col-xl-5 col-lg-10 offset-xl-1" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="ps-25px pe-25px mb-20px text-uppercase text-base-color fs-12 lh-40 fw-700 border-radius-100px bg-solitude-blue d-inline-flex"><i class="bi bi-award fs-16 me-5px"></i>Creative approach</span>
<h3 class="text-dark-gray fs-50 fw-700 ls-minus-2px">Powerful agency for corporate business.</h3>
<p class="mb-40px sm-mb-25px">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 groups and also deliver optimized.</p>
<div class="progress-bar-style-02">
<div class="progress mb-15px border-radius-50px fw-600 fs-11 lh-12 text-white bg-white">
<div class="progress-bar bg-gradient-orange-transparent m-0" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" aria-label="business-growth">
<span class="progress-bar-percent text-orange fw-600">98%</span>
</div>
<div class="progress-bar-title text-uppercase">Business growth</div>
</div>
<div class="progress border-radius-50px fw-600 fs-11 lh-12 text-white bg-white">
<div class="progress-bar bg-gradient-blue-transparent m-0" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" aria-label="new-technology">
<span class="progress-bar-percent text-tropical-blue fw-600">85%</span>
</div>
<div class="progress-bar-title text-uppercase">New technology</div>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-xl-5 row-cols-md-3 row-cols-sm-2 clients-style-06 justify-content-center ps-3 pe-3 xs-mt-40px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;scale&quot;: [0.8,1], &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 client-box text-center lg-mb-40px">
<a href="header-left-menu-simple.html#"><img src="images/logo-walmart-dark-blue.svg" alt></a>
</div>
<div class="col client-box text-center lg-mb-40px">
<a href="header-left-menu-simple.html#"><img src="images/logo-netflix-dark-blue.svg" alt></a>
</div>
<div class="col client-box text-center lg-mb-40px">
<a href="header-left-menu-simple.html#"><img src="images/logo-invision-dark-blue.svg" alt></a>
</div>
<div class="col client-box text-center sm-mb-40px">
<a href="header-left-menu-simple.html#"><img src="images/logo-yahoo-dark-blue.svg" alt></a>
</div>
<div class="col client-box text-center">
<a href="header-left-menu-simple.html#"><img src="images/logo-amazon-dark-blue.svg" alt></a>
</div>
</div>
</div>
</section>
<section class="overflow-hidden bg-solitude-blue position-relative">
<div class="container">
<div class="row align-items-center mb-5 sm-mb-30px text-center text-xl-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-xl-5 lg-mb-30px">
<h3 class="text-dark-gray fw-700 ls-minus-2px mb-0">Understanding the business services.</h3>
</div>
<div class="col-xl-4 offset-xl-1 last-paragraph-no-margin lg-mb-30px">
<p>We strive to develop real-world web solutions that are ideal for small to large projects with bespoke your custom project requirements.</p>
</div>
<div class="col-xl-2 d-flex justify-content-center">
<div class="slider-one-slide-prev-1 icon-small text-dark-gray swiper-button-prev slider-navigation-style-04 bg-white box-shadow-large"><i class="fa-solid fa-arrow-left"></i></div>
<div class="slider-one-slide-next-1 icon-small text-dark-gray swiper-button-next slider-navigation-style-04 bg-white box-shadow-large"><i class="fa-solid fa-arrow-right"></i></div>
</div>
</div>
<div class="row align-items-center" data-anime="{ &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-12">
<div class="outside-box-right-20 sm-outside-box-right-0">
<div class="swiper magic-cursor slider-one-slide" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 30, &quot;loop&quot;: true, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1400&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;1200&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;992&quot;: { &quot;slidesPerView&quot;: 2 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 2 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="services-box-style-03 last-paragraph-no-margin border-radius-6px overflow-hidden">
<div class="position-relative">
<a href="header-left-menu-simple.html#"><img src="images/demo-it-business-03.jpg" alt></a>
<a href="header-left-menu-simple.html#" class="btn btn-very-small btn-rounded btn-dark-gray text-white btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 position-absolute right-30px top-30px text-uppercase">analytics</a>
</div>
<div class="bg-white">
<div class="ps-65px pe-65px pt-30px pb-30px text-center">
<a href="header-left-menu-simple.html#" class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">Data and analytics</a>
<p>Lorem ipsum simply dummy text of amet consectetur.</p>
</div>
<div class="d-flex justify-content-center border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px position-relative text-center">
<a href="header-left-menu-simple.html#" class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="services-box-style-03 last-paragraph-no-margin border-radius-6px overflow-hidden">
<div class="position-relative">
<a href="header-left-menu-simple.html#"><img src="images/demo-it-business-04.jpg" alt></a>
<a href="header-left-menu-simple.html#" class="btn btn-very-small btn-rounded btn-dark-gray text-white btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 position-absolute right-30px top-30px text-uppercase">Finance</a>
</div>
<div class="bg-white">
<div class="ps-65px pe-65px pt-30px pb-30px text-center">
<a href="header-left-menu-simple.html#" class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">Finance consulting</a>
<p>Lorem ipsum simply dummy text of amet consectetur.</p>
</div>
<div class="d-flex justify-content-center border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px position-relative text-center">
<a href="header-left-menu-simple.html#" class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="services-box-style-03 last-paragraph-no-margin border-radius-6px overflow-hidden">
<div class="position-relative">
<a href="header-left-menu-simple.html#"><img src="images/demo-it-business-05.jpg" alt></a>
<a href="header-left-menu-simple.html#" class="btn btn-very-small btn-rounded btn-dark-gray text-white btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 position-absolute right-30px top-30px text-uppercase">analytics</a>
</div>
<div class="bg-white">
<div class="ps-65px pe-65px pt-30px pb-30px text-center">
<a href="header-left-menu-simple.html#" class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">Tech innovation</a>
<p>Lorem ipsum simply dummy text of amet consectetur.</p>
</div>
<div class="d-flex justify-content-center border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px position-relative text-center">
<a href="header-left-menu-simple.html#" class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="services-box-style-03 last-paragraph-no-margin border-radius-6px overflow-hidden">
<div class="position-relative">
<a href="header-left-menu-simple.html#"><img src="images/demo-it-business-06.jpg" alt></a>
<a href="header-left-menu-simple.html#" class="btn btn-very-small btn-rounded btn-dark-gray text-white btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 position-absolute right-30px top-30px text-uppercase">Digital</a>
</div>
<div class="bg-white">
<div class="ps-65px pe-65px pt-30px pb-30px text-center">
<a href="header-left-menu-simple.html#" class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">Digital commerce</a>
<p>Lorem ipsum simply dummy text of amet consectetur.</p>
</div>
<div class="d-flex justify-content-center border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px position-relative text-center">
<a href="header-left-menu-simple.html#" class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="services-box-style-03 last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative">
<a href="header-left-menu-simple.html#"><img src="images/demo-it-business-services-06.jpg" alt></a>
<a href="header-left-menu-simple.html#" class="btn btn-very-small btn-rounded btn-dark-gray text-white btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 position-absolute right-30px top-30px text-uppercase">Digital</a>
</div>
<div class="bg-white">
<div class="ps-65px pe-65px pt-30px pb-30px text-center">
<a href="header-left-menu-simple.html#" class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">Cloud computing</a>
<p>Lorem ipsum simply dummy text of amet consectetur.</p>
</div>
<div class="d-flex justify-content-center border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px position-relative text-center">
<a href="header-left-menu-simple.html#" class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="services-box-style-03 last-paragraph-no-margin border-radius-6px overflow-hidden">
<div class="position-relative">
<a href="header-left-menu-simple.html#"><img src="images/demo-it-business-03.jpg" alt></a>
<a href="header-left-menu-simple.html#" class="btn btn-very-small btn-rounded btn-dark-gray text-white btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 position-absolute right-30px top-30px text-uppercase">analytics</a>
</div>
<div class="bg-white">
<div class="ps-65px pe-65px pt-30px pb-30px text-center">
<a href="header-left-menu-simple.html#" class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">Data and analytics</a>
<p>Lorem ipsum simply dummy text of amet consectetur.</p>
</div>
<div class="d-flex justify-content-center border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px position-relative text-center">
<a href="header-left-menu-simple.html#" class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="services-box-style-03 last-paragraph-no-margin border-radius-6px overflow-hidden">
<div class="position-relative">
<a href="header-left-menu-simple.html#"><img src="images/demo-it-business-04.jpg" alt></a>
<a href="header-left-menu-simple.html#" class="btn btn-very-small btn-rounded btn-dark-gray text-white btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 position-absolute right-30px top-30px text-uppercase">Finance</a>
</div>
<div class="bg-white">
<div class="ps-65px pe-65px pt-30px pb-30px text-center">
<a href="header-left-menu-simple.html#" class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">Finance consulting</a>
<p>Lorem ipsum simply dummy text of amet consectetur.</p>
</div>
<div class="d-flex justify-content-center border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px position-relative text-center">
<a href="header-left-menu-simple.html#" class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="services-box-style-03 last-paragraph-no-margin border-radius-6px overflow-hidden">
<div class="position-relative">
<a href="header-left-menu-simple.html#"><img src="images/demo-it-business-05.jpg" alt></a>
<a href="header-left-menu-simple.html#" class="btn btn-very-small btn-rounded btn-dark-gray text-white btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 position-absolute right-30px top-30px text-uppercase">analytics</a>
</div>
<div class="bg-white">
<div class="ps-65px pe-65px pt-30px pb-30px text-center">
<a href="header-left-menu-simple.html#" class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">Tech innovation</a>
<p>Lorem ipsum simply dummy text of amet consectetur.</p>
</div>
<div class="d-flex justify-content-center border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px position-relative text-center">
<a href="header-left-menu-simple.html#" class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="position-relative">
<div class="container">
<div class="row align-items-center mb-4" 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-xl-5 lg-mb-30px text-center text-xl-start">
<h3 class="text-dark-gray fw-700 mb-0 ls-minus-2px">Recent case studies</h3>
</div>
<div class="col-xl-7 tab-style-04 text-center text-xl-end">
<ul class="portfolio-filter nav nav-tabs justify-content-center justify-content-xl-end border-0 fw-500">
<li class="nav active"><a data-filter="*" href="header-left-menu-simple.html#">All</a></li>
<li class="nav"><a data-filter=".selected" href="header-left-menu-simple.html#">Selected</a></li>
<li class="nav"><a data-filter=".digital" href="header-left-menu-simple.html#">Digital</a></li>
<li class="nav"><a data-filter=".branding" href="header-left-menu-simple.html#">Branding</a></li>
<li class="nav"><a data-filter=".web" href="header-left-menu-simple.html#">Web</a></li>
</ul>
</div>
</div>
<div class="row" data-anime="{ &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-12 filter-content p-md-0">
<ul class="portfolio-modern portfolio-wrapper grid-loading grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
<li class="grid-sizer"></li>
<li class="grid-item selected digital transition-inner-all">
<a href="header-left-menu-simple.html#">
<div class="portfolio-box">
<div class="portfolio-image border-radius-4px">
<img src="images/demo-it-business-portfolio-01.jpg" alt />
</div>
<div class="portfolio-hover box-shadow-extra-large">
<div class="bg-white d-flex align-items-center align-self-end text-start border-radius-4px ps-30px pe-30px pt-20px pb-20px lg-p-20px w-100">
<div class="me-auto">
<div class="fs-12 fw-500 text-medium-gray text-uppercase lh-24">Branding</div>
<div class="fw-600 text-dark-gray text-uppercase lh-initial">Tailoring</div>
</div>
<div class="ms-auto"><i class="feather icon-feather-plus icon-extra-medium text-dark-gray lh-36"></i></div>
</div>
</div>
</div>
</a>
</li>
<li class="grid-item web branding transition-inner-all">
<a href="header-left-menu-simple.html#">
<div class="portfolio-box">
<div class="portfolio-image border-radius-6px">
<img src="images/demo-it-business-portfolio-02.jpg" alt />
</div>
<div class="portfolio-hover box-shadow-extra-large">
<div class="bg-white d-flex align-items-center align-self-end text-start border-radius-4px ps-30px pe-30px pt-20px pb-20px lg-p-20px w-100">
<div class="me-auto">
<div class="fs-12 fw-500 text-medium-gray text-uppercase lh-24">Design</div>
<div class="fw-600 text-dark-gray text-uppercase lh-initial">Spanio</div>
</div>
<div class="ms-auto"><i class="feather icon-feather-plus icon-extra-medium text-dark-gray lh-36"></i></div>
</div>
</div>
</div>
</a>
</li>
<li class="grid-item web branding transition-inner-all">
<a href="header-left-menu-simple.html#">
<div class="portfolio-box">
<div class="portfolio-image border-radius-6px">
<img src="images/demo-it-business-portfolio-03.jpg" alt />
</div>
<div class="portfolio-hover box-shadow-extra-large">
<div class="bg-white d-flex align-items-center align-self-end text-start border-radius-4px ps-30px pe-30px pt-20px pb-20px lg-p-20px w-100">
<div class="me-auto">
<div class="fs-12 fw-500 text-medium-gray text-uppercase lh-24">Branding</div>
<div class="fw-600 text-dark-gray text-uppercase lh-initial">Herbal</div>
</div>
<div class="ms-auto"><i class="feather icon-feather-plus icon-extra-medium text-dark-gray lh-36"></i></div>
</div>
</div>
</div>
</a>
</li>
<li class="grid-item selected digital transition-inner-all">
<a href="header-left-menu-simple.html#">
<div class="portfolio-box">
<div class="portfolio-image border-radius-6px">
<img src="images/demo-it-business-portfolio-04.jpg" alt />
</div>
<div class="portfolio-hover box-shadow-extra-large">
<div class="bg-white d-flex align-items-center align-self-end text-start border-radius-4px ps-30px pe-30px pt-20px pb-20px lg-p-20px w-100">
<div class="me-auto">
<div class="fs-12 fw-500 text-medium-gray text-uppercase lh-24">Brochure</div>
<div class="fw-600 text-dark-gray text-uppercase lh-initial">Cropo</div>
</div>
<div class="ms-auto"><i class="feather icon-feather-plus icon-extra-medium text-dark-gray lh-36"></i></div>
</div>
</div>
</div>
</a>
</li>
<li class="grid-item selected branding transition-inner-all">
<a href="header-left-menu-simple.html#">
<div class="portfolio-box">
<div class="portfolio-image border-radius-6px">
<img src="images/demo-it-business-portfolio-05.jpg" alt />
</div>
<div class="portfolio-hover box-shadow-extra-large">
<div class="bg-white d-flex align-items-center align-self-end text-start border-radius-4px ps-30px pe-30px pt-20px pb-20px lg-p-20px w-100">
<div class="me-auto">
<div class="fs-12 fw-500 text-medium-gray text-uppercase lh-24">Design</div>
<div class="fw-600 text-dark-gray text-uppercase lh-initial">Violator</div>
</div>
<div class="ms-auto"><i class="feather icon-feather-plus icon-extra-medium text-dark-gray lh-36"></i></div>
</div>
</div>
</div>
</a>
</li>
<li class="grid-item digital web transition-inner-all">
<a href="header-left-menu-simple.html#">
<div class="portfolio-box">
<div class="portfolio-image border-radius-6px">
<img src="images/demo-it-business-portfolio-06.jpg" alt />
</div>
<div class="portfolio-hover box-shadow-extra-large">
<div class="bg-white d-flex align-items-center align-self-end text-start border-radius-4px ps-30px pe-30px pt-20px pb-20px lg-p-20px w-100">
<div class="me-auto">
<div class="fs-12 fw-500 text-medium-gray text-uppercase lh-24">Digital</div>
<div class="fw-600 text-dark-gray text-uppercase lh-initial">Pixflow</div>
</div>
<div class="ms-auto"><i class="feather icon-feather-plus icon-extra-medium text-dark-gray lh-36"></i></div>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="bg-gradient-very-light-gray">
<div class="container background-no-repeat background-position-top" style="background-image: url('images/demo-it-business-testimonial-bg.png')">
<div class="row justify-content-center mb-2">
<div class="col-xxl-6 col-xl-8 col-lg-10 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h3 class="text-dark-gray fw-700 ls-minus-2px">Trusted by the world's fastest growing companies.</h3>
</div>
</div>
<div class="row justify-content-center align-items-center mb-6 sm-mb-8">
<div class="col-xl-10 position-relative">
<div class="swiper magic-cursor testimonials-style-06" data-slider-options="{ &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next-nav&quot;, &quot;prevEl&quot;: &quot;.swiper-button-previous-nav&quot;, &quot;effect&quot;: &quot;fade&quot; } }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="row align-items-center justify-content-center">
<div class="col-8 col-md-4 col-sm-6 text-center md-mb-30px">
<img alt src="images/demo-it-business-testimonials-01.png">
</div>
<div class="col-lg-5 col-md-7 last-paragraph-no-margin text-center text-md-start">
<a href="header-left-menu-simple.html#" class="mb-15px d-block"><img src="images/logo-monday-dark-blue-01.svg" class="h-35px" alt></a>
<span class="mb-5px d-table fs-18 lh-30 fw-500 text-dark-gray">Their team are easy to work with and helped me make amazing websites in a short amount of time. Thanks guys for all your hard work. Trust us we looked for a very long time.</span>
<span class="fs-15 text-uppercase fw-800 text-dark-gray ls-05px">Herman miller, Monday</span>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row align-items-center justify-content-center">
<div class="col-8 col-md-4 col-sm-6 text-center md-mb-30px">
<img alt src="images/demo-it-business-testimonials-02.png">
</div>
<div class="col-lg-5 col-md-7 last-paragraph-no-margin text-center text-md-start">
<a href="header-left-menu-simple.html#" class="mb-15px d-block"><img src="images/logo-loitech-dark-blue.svg" class="h-35px" alt></a>
<span class="mb-5px d-table fs-18 lh-30 fw-500 text-dark-gray">Their team are easy to work with and helped me make amazing websites in a short amount of time. Thanks guys for all your hard work. Trust us we looked for a very long time.</span>
<span class="fs-15 text-uppercase fw-800 text-dark-gray ls-05px">Leonel mooney, Logitech</span>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row align-items-center justify-content-center">
<div class="col-8 col-md-4 col-sm-6 text-center md-mb-30px">
<img alt src="images/demo-it-business-testimonials-03.png">
</div>
<div class="col-lg-5 col-md-7 last-paragraph-no-margin text-center text-md-start">
<a href="header-left-menu-simple.html#" class="mb-15px d-block"><img src="images/logo-invision-dark-blue.svg" class="h-35px" alt></a>
<span class="mb-5px d-table fs-18 lh-30 fw-500 text-dark-gray">Their team are easy to work with and helped me make amazing websites in a short amount of time. Thanks guys for all your hard work. Trust us we looked for a very long time.</span>
<span class="fs-15 text-uppercase fw-800 text-dark-gray ls-05px">Matthew taylor, Invision</span>
</div>
</div>
</div>
</div>
<div class="swiper-button-previous-nav swiper-button-prev md-left-0px"><i class="feather icon-feather-arrow-left icon-extra-medium text-dark-gray"></i></div>
<div class="swiper-button-next-nav swiper-button-next md-right-0px"><i class="feather icon-feather-arrow-right icon-extra-medium text-dark-gray"></i></div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-3 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;perspective&quot;: [1200,1200], &quot;scale&quot;: [1.1, 1], &quot;rotateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col sm-mb-30px">
<div class="bg-white h-100 border-radius-6px text-center box-shadow-quadruple-large box-shadow-quadruple-large-hover">
<div class="pt-10 pb-10">
<img src="images/logo-monday-dark-gray-02.svg" class="h-40px md-h-35px sm-h-40px" alt />
</div>
<div class="border-top fs-16 p-15px lg-ps-25px lg-pe-25px md-ps-15px md-pe-15px last-paragraph-no-margin">
<p>Project management - <span class="fw-600 text-dark-gray">275% Growth</span></p>
</div>
</div>
</div>
<div class="col sm-mb-30px">
<div class="bg-white h-100 border-radius-6px text-center box-shadow-quadruple-large box-shadow-quadruple-large-hover">
<div class="pt-10 pb-10">
<img src="images/logo-dropbox-dark-gray-02.svg" class="h-40px md-h-35px sm-h-40px" alt />
</div>
<div class="border-top fs-16 border-1 border-color-extra-medium-gray p-15px last-paragraph-no-margin">
<p>Team management - <span class="fw-600 text-dark-gray">195% Growth</span></p>
</div>
</div>
</div>
<div class="col">
<div class="bg-white h-100 border-radius-6px text-center box-shadow-quadruple-large box-shadow-quadruple-large-hover">
<div class="pt-10 pb-10">
<img src="images/logo-slack-dark-gray-02.svg" class="h-40px md-h-35px sm-h-40px" alt />
</div>
<div class="border-top fs-16 border-1 border-color-extra-medium-gray p-15px last-paragraph-no-margin">
<p>Secure storage - <span class="fw-600 text-dark-gray">235% Growth</span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-demo bg-dark-slate-blue pb-4 sm-pb-50px" style="background-image: url('images/demo-footer-pattern.svg')">
<div class="container">
<div class="row mb-6 lg-mb-30px">
<div class="col-xl-5 lg-mb-30px text-center text-xl-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-xl-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#b1d8dfd7def1c5d9d4dcd4cbd0d09fd2dedc"><span class="__cf_email__" data-cfemail="caa3a4aca58abea2afa7afb0ababe4a9a5a7">[email&#160;protected]</span></a>
</div>
<div class="col-xl-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-xl-2 col-6 offset-xl-1 text-center text-xl-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-xl-2 col-6 text-center text-xl-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-xl-2 order-first order-xl-4 text-center text-xl-start lg-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-xl-7 last-paragraph-no-margin text-center text-xl-start">
<p class="fs-13 lh-22 w-90 lg-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-xl-5 text-center text-xl-end lg-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>
</div>
</div>
<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>