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

1888 lines
97 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

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

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
</head>
<body data-mobile-nav-style="classic">
<header>
<nav class="navbar navbar-expand-lg header-light header-reverse header-demo" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="index.html">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="default-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="alt-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto col-lg-8 menu-order position-static">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pre-Built Sites</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content background-position-center cover-background" aria-labelledby="navbarDropdownMenuLink1" style="background-image: url('images/pre-built-sites-bg.jpg')">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="demo-corporate.html" target="_blank">Corporate<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-marketing.html" target="_blank">Marketing</a></li>
<li><a href="demo-accounting.html" target="_blank">Accounting<span class="label bg-light-red text-red border-radius-26px">Classic</span></a></li>
<li><a href="demo-beauty-salon.html" target="_blank">Beauty Salon</a></li>
<li><a href="demo-architecture.html" target="_blank">Architecture</a></li>
<li><a href="demo-ebook.html" target="_blank">eBook</a></li>
<li><a href="demo-seo-agency.html" target="_blank">SEO Agency</a></li>
<li><a href="demo-hosting.html" target="_blank">Hosting</a></li>
<li><a href="demo-consulting.html" target="_blank">Consulting</a></li>
<li><a href="demo-green-energy.html" target="_blank">Green Energy</a></li>
<li><a href="demo-business.html" target="_blank">Business</a></li>
<li><a href="demo-interactive-portfolio.html" target="_blank">Interactive Portfolio</a></li>
<li><a href="demo-spa-salon.html" target="_blank">Spa Salon<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
</ul>
<ul class="col">
<li><a href="demo-branding-agency.html" target="_blank">Branding Agency<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-elearning.html" target="_blank">eLearning</a></li>
<li><a href="demo-it-business.html" target="_blank">IT Business<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Modern</span></a></li>
<li><a href="demo-barber.html" target="_blank">Barber</a></li>
<li><a href="demo-hotel-and-resort.html" target="_blank">Hotel & Resort</a></li>
<li><a href="demo-real-estate.html" target="_blank">Real Estate</a></li>
<li><a href="demo-jewellery-store.html" target="_blank">Jewellery Store</a></li>
<li><a href="demo-travel-agency.html" target="_blank">Travel Agency</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Gym & Fitness</a></li>
<li><a href="demo-logistics.html" target="_blank">Logistics</a></li>
<li><a href="demo-design-agency.html" target="_blank">Design Agency<span class="label bg-light-red text-red border-radius-26px">Creative</span></a></li>
<li><a href="demo-photography.html" target="_blank">Photography</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Pizza Parlor</a></li>
</ul>
<ul class="col">
<li><a href="demo-restaurant.html" target="_blank">Restaurant<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Scattered Portfolio</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Data Analysis</a></li>
<li><a href="demo-medical.html" target="_blank">Medical</a></li>
<li><a href="demo-horizontal-portfolio.html" target="_blank">Horizontal Portfolio</a></li>
<li><a href="demo-product-showcase.html" target="_blank">Product Showcase<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-finance.html" target="_blank">Finance</a></li>
<li><a href="demo-elder-care.html" target="_blank">Elder Care</a></li>
<li><a href="demo-fashion-store.html" target="_blank">Fashion Store</a></li>
<li><a href="demo-music-onepage.html" target="_blank">Music</a></li>
<li><a href="demo-vertical-portfolio.html" target="_blank">Vertical Portfolio</a></li>
<li><a href="demo-freelancer.html" target="_blank">Freelancer<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
<li><a href="demo-charity.html" target="_blank">Charity</a></li>
</ul>
<ul class="col">
<li><a href="demo-digital-agency.html" target="_blank">Digital Agency</a></li>
<li><a href="demo-web-agency.html" target="_blank">Web Agency<span class="label bg-white-ice text-jade border-radius-26px">Creative</span></a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Yoga & Meditation</a></li>
<li><a href="demo-startup.html" target="_blank">Startup</a></li>
<li><a href="demo-application.html" target="_blank">Application<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">New</span></a></li>
<li><a href="demo-lawyer.html" target="_blank">Lawyer</a></li>
<li><a href="demo-cryptocurrency.html" target="_blank">Cryptocurrency</a></li>
<li><a href="demo-conference.html" target="_blank">Conference</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Minimal Portfolio<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-decor-store.html" target="_blank">Decor Store</a></li>
<li><a href="demo-magazine.html" target="_blank">Magazine</a></li>
<li><a href="demo-blogger.html" target="_blank">Blogger</a></li>
<li><a href="demo-wedding-invitation.html" target="_blank">Wedding Invitation</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pages</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink2">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">About Pages</li>
<li><a href="demo-branding-agency-about.html" target="_blank">About - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-about.html" target="_blank">About - Restaurant</a></li>
<li><a href="demo-minimal-portfolio-about.html" target="_blank">About - Minimal</a></li>
<li><a href="demo-accounting-company.html" target="_blank">About - Accounting</a></li>
<li><a href="demo-architecture-about.html" target="_blank">About - Architecture</a></li>
<li><a href="demo-digital-agency-about.html" target="_blank">About - Digital</a></li>
<li><a href="demo-photography-about.html" target="_blank">About - Photography</a></li>
<li><a href="demo-design-agency-about.html" target="_blank">About - Agency</a></li>
<li><a href="demo-marketing-about.html" target="_blank">About - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-scattered-portfolio-about.html" target="_blank">About - Scattered</a></li>
<li><a href="demo-medical-about.html" target="_blank">About - Medical</a></li>
<li><a href="demo-web-agency-about.html" target="_blank">About - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-startup-who-we-are.html" target="_blank">About - Startup</a></li>
<li><a href="demo-hotel-and-resort-about-us.html" target="_blank">About - Hotel</a></li>
<li><a href="demo-elearning-about.html" target="_blank">About - eLearning<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Services Pages</li>
<li><a href="demo-accounting-services.html" target="_blank">Services - Accounting</a></li>
<li><a href="demo-marketing-services.html" target="_blank">Services - Marketing</a></li>
<li><a href="demo-branding-agency-services.html" target="_blank">Services - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-minimal-portfolio-expertise.html" target="_blank">Services - Minimal</a></li>
<li><a href="demo-web-agency-expertise.html" target="_blank">Services - Web</a></li>
<li><a href="demo-architecture-services.html" target="_blank">Services - Architecture</a></li>
<li><a href="demo-digital-agency-expertise.html" target="_blank">Services - Digital</a></li>
<li><a href="demo-startup-services.html" target="_blank">Services - Startup</a></li>
<li><a href="demo-scattered-portfolio-expertise.html" target="_blank">Services - Scattered</a></li>
<li><a href="demo-lawyer-practice-areas.html" target="_blank">Services - Lawyer</a></li>
<li><a href="demo-corporate-services.html" target="_blank">Services - Corporate<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-data-analysis-what-we-do.html" target="_blank">Services - Data Analysis</a></li>
<li><a href="demo-marketing-services-details.html" target="_blank">Single Marketing</a></li>
<li><a href="demo-accounting-services-details.html" target="_blank">Single Accounting</a></li>
<li><a href="demo-branding-agency-services-detail.html" target="_blank">Single - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Contact Pages</li>
<li><a href="demo-scattered-portfolio-contact.html" target="_blank">Contact - Scattered</a></li>
<li><a href="demo-branding-agency-contact.html" target="_blank">Contact - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-photography-contact.html" target="_blank">Contact - Photography</a></li>
<li><a href="demo-hotel-and-resort-contact.html" target="_blank">Contact - Hotel</a></li>
<li><a href="demo-spa-salon-contact.html" target="_blank">Contact - Spa</a></li>
<li><a href="demo-it-business-contact.html" target="_blank">Contact - IT Business<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-architecture-contact.html" target="_blank">Contact - Architecture</a></li>
<li><a href="demo-design-agency-contact.html" target="_blank">Contact - Agency</a></li>
<li><a href="demo-marketing-contact.html" target="_blank">Contact - Marketing</a></li>
<li><a href="demo-horizontal-portfolio-contact.html" target="_blank">Contact - Portfolio</a></li>
<li><a href="demo-accounting-contact.html" target="_blank">Contact - Accounting</a></li>
<li><a href="demo-elearning-contact.html" target="_blank">Contact - eLearning</a></li>
<li><a href="demo-corporate-contact.html" target="_blank">Contact - Corporate</a></li>
<li><a href="demo-real-estate-contact.html" target="_blank">Contact - Real Estate</a></li>
<li><a href="demo-web-agency-contact.html" target="_blank">Contact - Web</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-corporate-pricing.html" target="_blank">Pricing - Corporate</a></li>
<li><a href="demo-hosting-pricing.html" target="_blank">Pricing - Hosting</a></li>
<li><a href="demo-data-analysis-pricing.html" target="_blank">Pricing - Data Analysis</a></li>
<li><a href="demo-marketing-pricing.html" target="_blank">Pricing - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-consulting-process.html" target="_blank">Process - Consulting</a></li>
<li><a href="demo-accounting-process.html" target="_blank">Process - Accounting</a></li>
<li><a href="demo-startup-clients.html" target="_blank">Clients - Startup</a></li>
<li><a href="demo-business-clients.html" target="_blank">Clients - Business</a></li>
<li><a href="demo-corporate-customer-stories.html" target="_blank">Testimonials - Corporate</a></li>
<li><a href="demo-data-analysis-testimonials.html" target="_blank">Reviews - Data Analysis</a></li>
<li><a href="demo-finance-team.html" target="_blank">Team - Finance</a></li>
<li><a href="demo-marketing-team.html" target="_blank">Team - Marketing</a></li>
<li><a href="demo-web-agency-people.html" target="_blank">Team - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-chefs.html" target="_blank">Chefs - Restaurant</a></li>
<li><a href="demo-pizza-parlor-chefs.html" target="_blank">Chefs - Pizza Parlor</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-real-estate-agents.html" target="_blank">Agents - Real Estate</a></li>
<li><a href="demo-elearning-instructors.html" target="_blank">Instructors - eLearning</a></li>
<li><a href="demo-hotel-and-resort-amenities.html" target="_blank">Amenities - Hotel</a></li>
<li><a href="demo-medical-timetable.html" target="_blank">Timetable - Medical</a></li>
<li><a href="demo-photography-award.html" target="_blank">Award - Photography</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">FAQ - Decor Store</a></li>
<li><a href="demo-charity-causes.html" target="_blank">Causes - Charity</a></li>
<li><a href="demo-restaurant-menu.html" target="_blank">Menu - Restaurant</a></li>
<li><a href="demo-hotel-and-resort-bistro.html" target="_blank">Menu - Hotel<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-pizza-parlor-menu.html" target="_blank">Menu - Pizza</a></li>
<li><a href="demo-application-features.html" target="_blank">Features - Application</a></li>
<li><a href="404.html">Error 404</a></li>
<li><a href="search-result.html">Search Results</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Portfolio</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Classic<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-classic-two-column.html">Classic 2 Column</a></li>
<li><a href="portfolio-classic-three-column.html">Classic 3 Column</a></li>
<li><a href="portfolio-classic-four-column.html">Classic 4 Column</a></li>
<li><a href="portfolio-classic-masonry.html">Classic Masonry</a></li>
<li><a href="portfolio-classic-metro.html">Classic Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Boxed<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-boxed-two-column.html">Boxed 2 Column</a></li>
<li><a href="portfolio-boxed-three-column.html">Boxed 3 Column</a></li>
<li><a href="portfolio-boxed-four-column.html">Boxed 4 Column</a></li>
<li><a href="portfolio-boxed-masonry.html">Boxed Masonry</a></li>
<li><a href="portfolio-boxed-metro.html">Boxed Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Transform<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-transform-two-column.html">Transform 2 Column</a></li>
<li><a href="portfolio-transform-three-column.html">Transform 3 Column</a></li>
<li><a href="portfolio-transform-four-column.html">Transform 4 Column</a></li>
<li><a href="portfolio-transform-masonry.html">Transform Masonry</a></li>
<li><a href="portfolio-transform-metro.html">Transform Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Creative<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-creative-two-column.html">Creative 2 Column</a></li>
<li><a href="portfolio-creative-three-column.html">Creative 3 Column</a></li>
<li><a href="portfolio-creative-four-column.html">Creative 4 Column</a></li>
<li><a href="portfolio-creative-masonry.html">Creative Masonry</a></li>
<li><a href="portfolio-creative-metro.html">Creative Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Attractive<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-attractive-two-column.html">Attractive 2 Column</a></li>
<li><a href="portfolio-attractive-three-column.html">Attractive 3 Column</a></li>
<li><a href="portfolio-attractive-four-column.html">Attractive 4 Column</a></li>
<li><a href="portfolio-attractive-masonry.html">Attractive Masonry</a></li>
<li><a href="portfolio-attractive-metro.html">Attractive Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Clean<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-clean-two-column.html">Clean 2 Column</a></li>
<li><a href="portfolio-clean-three-column.html">Clean 3 Column</a></li>
<li><a href="portfolio-clean-four-column.html">Clean 4 Column</a></li>
<li><a href="portfolio-clean-masonry.html">Clean Masonry</a></li>
<li><a href="portfolio-clean-metro.html">Clean Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Simple<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-simple-two-column.html">Simple 2 Column</a></li>
<li><a href="portfolio-simple-three-column.html">Simple 3 Column</a></li>
<li><a href="portfolio-simple-four-column.html">Simple 4 Column</a></li>
<li><a href="portfolio-simple-masonry.html">Simple Masonry</a></li>
<li><a href="portfolio-simple-metro.html">Simple Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Modern<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-modern-two-column.html">Modern 2 Column</a></li>
<li><a href="portfolio-modern-three-column.html">Modern 3 Column</a></li>
<li><a href="portfolio-modern-four-column.html">Modern 4 Column</a></li>
<li><a href="portfolio-modern-masonry.html">Modern Masonry</a></li>
<li><a href="portfolio-modern-metro.html">Modern Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Other<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-slider.html">Portfolio Slider</a></li>
<li><a href="portfolio-parallax.html">Portfolio Parallax</a></li>
<li><a href="portfolio-justified-gallery.html">Justified Gallery</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Single Project<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-digital-agency-single-project-minimal.html" target="_blank">Single - Minimal</a></li>
<li><a href="demo-branding-agency-single-project-slider.html" target="_blank">Single - Slider</a></li>
<li><a href="demo-architecture-single-project-gallery.html" target="_blank">Single - Gallery</a></li>
<li><a href="demo-interactive-portfolio-single-project-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-design-agency-single-project-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-single-project-creative.html" target="_blank">Single - Creative</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Elements</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink4" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink4">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="element-accordion.html">Accordion</a></li>
<li><a href="element-buttons.html">Button</a></li>
<li><a href="element-team.html">Team</a></li>
<li><a href="element-testimonials.html">Testimonials<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-clients.html">Clients</a></li>
<li><a href="element-review.html">Review</a></li>
<li><a href="element-subscribe.html">Subscribe</a></li>
<li><a href="element-call-to-action.html">Call to Action</a></li>
<li><a href="element-tab.html">Tab<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-google-map.html">Google Map<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-contact-form.html">Contact Form</a></li>
<li><a href="element-columns.html">Columns</a></li>
<li><a href="element-alert-boxes.html">Alert Boxes</a></li>
<li><a href="element-image-gallery.html">Image Gallery</a></li>
</ul>
<ul class="col">
<li><a href="element-progress-bar.html">Progress Bar</a></li>
<li><a href="element-process-step.html">Process Step<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-icon-with-text.html">Icon with Text<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-shape-dividers.html">Shape Dividers</a></li>
<li><a href="element-counters.html">Counters</a></li>
<li><a href="element-countdown.html">Countdown</a></li>
<li><a href="element-fancy-text-box.html">Fancy Text Box</a></li>
<li><a href="element-heading.html">Heading</a></li>
<li><a href="element-dropcaps.html">Dropcaps</a></li>
<li><a href="element-blockquote.html">Blockquote</a></li>
<li><a href="element-highlights.html">Highlights</a></li>
<li><a href="element-lists.html">Lists</a></li>
<li><a href="element-social-icons.html">Social Icons</a></li>
<li><a href="element-pricing-table.html">Pricing Table</a></li>
</ul>
<ul class="col">
<li><a href="element-interactive-banners.html">Interactive Banners</a></li>
<li><a href="element-services-box.html">Services Box</a></li>
<li><a href="element-rotate-box.html">Rotate Box<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-instagram.html">Instagram</a></li>
<li><a href="element-parallax-scrolling.html">Parallax Scrolling</a></li>
<li><a href="element-sliding-box.html">Sliding Box<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-content-carousel.html">Content Carousel</a></li>
<li><a href="element-media.html">Media</a></li>
<li><a href="element-event.html">Event</a></li>
<li><a href="element-dividers.html">Dividers</a></li>
<li><a href="element-horizontal-list-item.html">Horizontal List Item</a></li>
<li><a href="element-banners.html">Banners</a></li>
<li><a href="element-carousel.html">Carousel</a></li>
<li><a href="element-tilt-effect.html">Tilt Effect<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col premium-element cover-background" style="background-image: url('images/premium-elements-bg.jpg')">
<li class="sub-title">Premium Elements</li>
<li><a href="element-adaptive-backgrounds.html">Adaptive Backgrounds</a></li>
<li><a href="element-sticky-column.html">Sticky Column</a></li>
<li><a href="element-3d-parallax-hover.html">3D Parallax Hover</a></li>
<li><a href="demo-restaurant.html" target="_blank">Custom Cursor</a></li>
<li><a href="element-animated-particles.html">Animated Particles</a></li>
<li><a href="element-marquee.html">Marquee</a></li>
<li><a href="element-fancy-heading.html">Fancy Heading</a></li>
<li><a href="element-fancy-images.html">Fancy Images</a></li>
<li><a href="element-scrolling-effects.html">Scrolling Effects</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Features</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink5" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink5">
<li class="dropdown">
<a href="javascript:void(0);">Header<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business.html" target="_blank">Transparent Header</a></li>
<li><a href="demo-corporate.html" target="_blank">White Header</a></li>
<li><a href="header-dark.html" target="_blank">Dark Header</a></li>
<li><a href="demo-digital-agency.html" target="_blank">Left Navigation</a></li>
<li><a href="demo-branding-agency.html" target="_blank">Right Navigation</a></li>
<li><a href="demo-restaurant.html" target="_blank">Center Navigation</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Header with Top Bar</a></li>
<li><a href="demo-startup.html" target="_blank">Header with Push</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Center Logo</a></li>
<li><a href="header-top-logo.html" target="_blank">Top Logo</a></li>
<li><a href="demo-ebook.html" target="_blank">One Page Navigation</a></li>
<li><a href="header-mini.html" target="_blank">Mini Header</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Header with Button</a></li>
<li><a href="demo-marketing.html" target="_blank">Header with Social</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Left Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-left-menu-simple.html" target="_blank">Left Menu Simple</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Left Menu Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Hamburger Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-photography.html" target="_blank">Hamburger Simple</a></li>
<li><a href="demo-architecture.html" target="_blank">Hamburger Creative</a></li>
<li><a href="demo-freelancer.html" target="_blank">Hamburger Clean</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Hamburger Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Header Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-always-fixed.html" target="_blank">Always Fixed</a></li>
<li><a href="demo-application.html" target="_blank">Disable Fixed</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Reverse Auto</a></li>
<li><a href="demo-elder-care.html" target="_blank">Reverse Back Scroll</a></li>
<li><a href="demo-accounting.html" target="_blank">Responsive Sticky</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Mobile Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-startup.html" target="_blank">Classic</a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Modern</a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Full Screen</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Lightbox & Modal<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="modal-simple.html">Simple Modal</a></li>
<li><a href="modal-subscription.html">Subscription</a></li>
<li><a href="modal-contact-form.html">Contact Form</a></li>
<li><a href="modal-youtube-video.html">Youtube Video</a></li>
<li><a href="modal-vimeo-video.html">Vimeo Video</a></li>
<li><a href="modal-google-map.html">Google Map</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Icon Packs<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="icon-packs-icons-mind-line.html">Icons Mind Line</a></li>
<li><a href="icon-packs-feather.html">Feather</a></li>
<li><a href="icon-packs-font-awesome.html">Font Awesome</a></li>
<li><a href="icon-packs-themify.html">Themify</a></li>
<li><a href="icon-packs-bootstrap.html">Bootstrap</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Sliders<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-architecture.html" target="_blank">Revolution</a></li>
<li><a href="demo-startup.html" target="_blank">Swiper</a></li>
</ul>
</li>
<li class="dropdown">
<a href="animations.html">Animations</a>
</li>
<li class="dropdown">
<a href="demo-minimal-portfolio.html" target="_blank">Page Preloader</a>
</li>
<li class="dropdown">
<a href="demo-jewellery-store.html" target="_blank">Cookie Notify</a>
</li>
<li class="dropdown">
<a href="demo-startup.html" target="_blank">Back to Top</a>
</li>
<li class="dropdown">
<a href="demo-design-agency.html" target="_blank">Sticky Footer</a>
</li>
</ul>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Blog</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink6" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink6">
<li class="dropdown"><a href="blog-grid.html">Blog Grid</a></li>
<li class="dropdown"><a href="blog-classic.html">Blog Classic</a></li>
<li class="dropdown"><a href="blog-metro.html">Blog Metro</a></li>
<li class="dropdown"><a href="blog-masonry.html">Blog Masonry</a></li>
<li class="dropdown"><a href="blog-simple.html">Blog Simple</a></li>
<li class="dropdown"><a href="blog-date.html">Blog Date</a></li>
<li class="dropdown"><a href="blog-only-text.html">Blog Only Text</a></li>
<li class="dropdown"><a href="blog-side-image.html">Blog Side Image</a></li>
<li class="dropdown"><a href="blog-modern.html">Blog Modern</a></li>
<li class="dropdown"><a href="blog-standard.html">Blog Standard</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Single Post<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business-blog-single-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-elearning-blog-single-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-blog-single-creative.html" target="_blank">Single - Creative</a></li>
<li><a href="demo-blogger-blog-single-classic.html" target="_blank">Single - Classic</a></li>
<li><a href="demo-architecture-blog-single-clean.html" target="_blank">Single - Clean</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Post Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-post-type-standard.html">Post - Standard</a></li>
<li><a href="blog-post-type-gallery.html">Post - Gallery</a></li>
<li><a href="blog-post-type-slider.html">Post - Slider</a></li>
<li><a href="blog-post-type-audio.html">Post - Audio</a></li>
<li><a href="blog-post-type-video.html">Post - Video</a></li>
<li><a href="blog-post-type-blockquote.html">Post - Blockquote</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Shop</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink7" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink7">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">Shop Layout</li>
<li><a href="demo-fashion-store-shop.html" target="_blank">Left Sidebar</a></li>
<li><a href="demo-fashion-store-right-sidebar.html" target="_blank">Right Sidebar</a></li>
<li><a href="demo-fashion-store-no-sidebar.html" target="_blank">No Sidebar</a></li>
<li><a href="demo-decor-store-collections.html" target="_blank">Collections - Style 01</a></li>
<li><a href="demo-jewellery-store-categories.html" target="_blank">Collections - Style 02</a></li>
<li><a href="demo-fashion-store-collection.html" target="_blank">Collections - Style 03</a></li>
<li><a href="demo-fashion-store-single-product.html" target="_blank">Single Product - Thumb Left</a></li>
<li><a href="demo-decor-store-single-product.html" target="_blank">Single Product - Thumb Bottom</a></li>
</ul>
<ul class="col">
<li class="sub-title">Utility Pages</li>
<li><a href="demo-decor-store-cart.html" target="_blank">Shopping Cart</a></li>
<li><a href="demo-decor-store-checkout.html" target="_blank">Checkout</a></li>
<li><a href="demo-decor-store-account.html" target="_blank">Login / Register</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">Help Center</a></li>
<li><a href="demo-fashion-store-wishlist.html" target="_blank">Wishlist</a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-02.jpg" alt /></a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-01.jpg" alt /></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end xs-pe-0">
<div class="header-icon">
<div class="header-button">
<a href="https://1.envato.market/R53mL2" target="_blank" class="btn btn-dark-gray btn-small btn-switch-text btn-rounded text-transform-none btn-box-shadow purchase-envato">
<span>
<span class="btn-double-text" data-text="Purchase Crafto">Purchase Crafto</span>
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="ipad-top-space-margin md-pt-0">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-xl-6 col-lg-8 text-center position-relative page-title-double-large">
<div class="d-flex flex-column justify-content-center extra-very-small-screen">
<h1 class="text-dark-gray alt-font ls-minus-1px fw-700 mb-20px">Icon with text</h1>
<h2 class="text-dark-gray d-inline-block fw-400 ls-0px mb-0">Elevate your website's appeal by combining icons, a heading, and a brief description. Icon boxes elevate visibility.</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-icon-with-text.html#" class="text-dark-gray text-dark-gray-hover">Elements</a></li>
<li>Icon with text</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="big-section bg-solitude-blue">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-XL-7 col-lg-8 text-center">
<h2 class="text-dark-gray fw-700 ls-minus-1px">We make the creative solutions for brands!</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center">
<div class="col icon-with-text-style-01 mb-50px sm-mb-40px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Navigation-LeftWindow icon-large text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-dark-gray fw-600 mb-5px">Amazing layouts</span>
<p class="w-80 xl-w-90">Lorem ipsum is simply dummy text of the printing typesetting lorem ipsum been text.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-01 mb-50px sm-mb-40px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Cursor-Click2 icon-large text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-dark-gray fw-600 mb-5px">No coding required</span>
<p class="w-80 xl-w-90">Lorem ipsum is simply dummy text of the printing typesetting lorem ipsum been text.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-01 mb-50px sm-mb-40px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Like-2 icon-large text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-dark-gray fw-600 mb-5px">Easy to customize</span>
<p class="w-80 xl-w-90">Lorem ipsum is simply dummy text of the printing typesetting lorem ipsum been text.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-01 sm-mb-40px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Talk-Man icon-large text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-dark-gray fw-600 mb-5px">Customer satisfaction</span>
<p class="w-80 xl-w-90">Lorem ipsum is simply dummy text of the printing typesetting lorem ipsum been text.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-01 sm-mb-40px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Heart icon-large text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-dark-gray fw-600 mb-5px">Huge icon collection</span>
<p class="w-80 xl-w-90">Lorem ipsum is simply dummy text of the printing typesetting lorem ipsum been text.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-01">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Gear-2 icon-large text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-dark-gray fw-600 mb-5px">Powerfull customize</span>
<p class="w-80 xl-w-90">Lorem ipsum is simply dummy text of the printing typesetting lorem ipsum been text.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-extra-dark-slate-blue big-section">
<div class="container">
<div class="row align-items-end justify-content-center mb-5 md-mb-40px text-center text-md-start">
<div class="col-xl-5 col-lg-6 col-md-10 md-mb-20px text-center text-lg-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="ps-20px pe-20px mb-20px text-uppercase text-white fs-12 lh-42px fw-600 border-radius-100px bg-dark-slate-blue d-inline-block">About company</span>
<h3 class="text-white fw-600 mb-0 ls-minus-1px">Powerful agency for corporate business.</h3>
</div>
<div class="col-xl-6 col-lg-6 col-md-10 offset-xl-1 text-center text-lg-start last-paragraph-no-margin">
<p class="w-90 xl-w-100">We strive to develop real-world web solutions that are ideal for small to large projects with bespoke project requirements. we compelling web, <span class="fw-500 text-white text-decoration-line-bottom">which are the right-fit for your target.</span></p>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-2 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col icon-with-text-style-02 transition-inner-all mb-30px">
<div class="feature-box feature-box-left-icon-middle text-start hover-box dark-hover bg-dark-slate-blue border-radius-8px p-9 overflow-hidden last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Archery-2 icon-double-large text-white"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block fs-18 text-white fw-500 mb-5px">Powerfull theme options</span>
<p class="text-light-opacity">Lorem ipsum is simply dummy text of the printing and typeset industry ipsum standard.</p>
</div>
<div class="feature-box-overlay bg-cornflower-blue"></div>
</div>
</div>
<div class="col icon-with-text-style-02 transition-inner-all mb-30px">
<div class="feature-box feature-box-left-icon-middle text-start hover-box dark-hover bg-dark-slate-blue border-radius-8px p-9 overflow-hidden last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Gear icon-double-large text-white"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block fs-18 text-white fw-500 mb-5px">Unlimited layouts and styles</span>
<p class="text-light-opacity">Lorem ipsum is simply dummy text of the printing and typeset industry ipsum standard.</p>
</div>
<div class="feature-box-overlay bg-cornflower-blue"></div>
</div>
</div>
<div class="col icon-with-text-style-02 transition-inner-all md-mb-30px">
<div class="feature-box feature-box-left-icon-middle text-start hover-box dark-hover bg-dark-slate-blue border-radius-8px p-9 overflow-hidden last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Navigation-LeftWindow icon-double-large text-white"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block fs-18 text-white fw-500 mb-5px">Developing an effective strategy</span>
<p class="text-light-opacity">Lorem ipsum is simply dummy text of the printing and typeset industry ipsum standard.</p>
</div>
<div class="feature-box-overlay bg-cornflower-blue"></div>
</div>
</div>
<div class="col icon-with-text-style-02 transition-inner-all">
<div class="feature-box feature-box-left-icon-middle text-start hover-box dark-hover bg-dark-slate-blue border-radius-8px p-9 overflow-hidden last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Female icon-double-large text-white"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block fs-18 text-white fw-500 mb-5px">Automated testing and support</span>
<p class="text-light-opacity">Lorem ipsum is simply dummy text of the printing and typeset industry ipsum standard.</p>
</div>
<div class="feature-box-overlay bg-cornflower-blue"></div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5" 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-auto text-center last-paragraph-no-margin">
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
<div class="feature-box-icon me-10px">
<i class="bi bi-chat-text icon-extra-medium text-white"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin text-white text-uppercase fs-15 fw-500 ls-05px">
Let's make something great work together. <a href="element-icon-with-text.html#" class="text-white text-decoration-line-bottom-medium border-1">Got a project in mind?</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gradient-very-light-gray position-relative">
<div class="background-position-center-top position-absolute top-0 left-0px w-100 h-100" style="background-image: url('images/vertical-line-bg-medium-gray.svg')"></div>
<div class="container position-relative">
<div class="row justify-content-center mb-2">
<div class="col-auto col-xxl-5 col-lg-7 col-sm-9 d-flex align-items-center justify-content-center">
<span class="fs-150 text-majorelle-blue flex-shrink-0 fw-800 me-35px ls-minus-10px sm-ls-minus-5px" data-bottom-top="transform:scale(1.3, 1.3);" data-top-bottom="transform:scale(1, 1);">13</span>
<h2 class="text-dark-gray fw-700 ls-minus-2px m-0">Exclusive features.</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 justify-content-center" 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="col icon-with-text-style-03">
<div class="feature-box p-8">
<div class="feature-box-icon">
<i class="line-icon-Microphone-4 icon-double-large text-majorelle-blue mb-20px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Microphone built-in</span>
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box p-8">
<div class="feature-box-icon">
<i class="line-icon-No-Drop icon-double-large text-majorelle-blue mb-20px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Water resistant</span>
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box p-8">
<div class="feature-box-icon">
<i class="line-icon-Signal icon-double-large text-majorelle-blue mb-20px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Powerful signal</span>
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box p-8">
<div class="feature-box-icon">
<i class="line-icon-Sound icon-double-large text-majorelle-blue mb-20px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Noise cancellation</span>
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box p-8">
<div class="feature-box-icon">
<i class="line-icon-Environmental-3 icon-double-large text-majorelle-blue mb-20px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Environment friendly</span>
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box p-8">
<div class="feature-box-icon">
<i class="line-icon-Headphones icon-double-large text-majorelle-blue mb-20px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19">Sleek design</span>
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="border-top border-color-extra-medium-gray bg-majorelle-blue">
<div class="container">
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center">
<div class="col icon-with-text-style-03">
<div class="feature-box p-8 text-start overflow-hidden">
<div class="feature-box-icon">
<i class="line-icon-Navigation-LeftWindow icon-extra-large text-white mb-25px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fs-19 fw-500 text-white mb-5px">Amazing layouts</span>
<p class="text-white opacity-5">Lorem ipsum is simply dummy text the printing typesetting</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box p-8 text-start overflow-hidden">
<div class="feature-box-icon">
<i class="line-icon-Cursor-Click2 icon-extra-large text-white mb-25px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fs-19 fw-500 text-white mb-5px">No coding required</span>
<p class="text-white opacity-5">Lorem ipsum is simply dummy text the printing typesetting</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box p-8 text-start overflow-hidden">
<div class="feature-box-icon">
<i class="line-icon-Gear-2 icon-extra-large text-white mb-25px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fs-19 fw-500 text-white mb-5px">Easy to customize</span>
<p class="text-white opacity-5">Lorem ipsum is simply dummy text the printing typesetting</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box p-8 text-start overflow-hidden">
<div class="feature-box-icon">
<i class="line-icon-Talk-Man icon-extra-large text-white mb-25px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fs-19 fw-500 text-white mb-5px">Customer satisfaction</span>
<p class="text-white opacity-5">Lorem ipsum is simply dummy text the printing typesetting</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-12 col-lg-6 text-center">
<span class="ps-25px pe-25px mb-15px text-uppercase text-base-color fs-12 lh-40 fw-700 border-radius-100px bg-solitude-blue d-inline-flex"><i class="bi bi-box-seam fs-16 me-5px"></i>Creative process</span>
<h2 class="alt-font text-dark-gray fw-800">Advanced solutions</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center">
<div class="col icon-with-text-style-04 transition-inner-all md-mb-30px">
<div class="feature-box border-radius-10px p-15 lg-pt-15 lg-pb-15 lg-ps-10 lg-pe-10 last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Medal-2 icon-double-large text-base-color mb-25px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fw-700 fs-19 mb-10px">Amazing layouts</span>
<p>Lorem ipsum is simply dummy text the printing typesetting lorem ipsum been text.</p>
</div>
<div class="feature-box-overlay bg-solitude-blue border-radius-10px"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all md-mb-30px">
<div class="feature-box border-radius-10px box-shadow-quadruple-large-hover bg-solitude-blue p-15 lg-pt-15 lg-pb-15 lg-ps-10 lg-pe-10 last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Knight icon-double-large text-base-color mb-25px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fw-700 fs-19 mb-10px">No coding required</span>
<p>Lorem ipsum is simply dummy text the printing typesetting lorem ipsum been text.</p>
</div>
<span class="position-absolute box-shadow-large top-25px lg-top-15px right-25px lg-right-15px bg-dark-gray border-radius-18px text-white fs-11 fw-700 text-uppercase ps-15px pe-15px lh-26 ls-minus-05px">New</span>
<div class="feature-box-overlay bg-white border-radius-10px"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all">
<div class="feature-box border-radius-10px p-15 lg-pt-15 lg-pb-15 lg-ps-10 lg-pe-10 last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="line-icon-Gear-2 icon-double-large text-base-color mb-25px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fw-700 fs-19 mb-10px">Easy to customize</span>
<p>Lorem ipsum is simply dummy text the printing typesetting lorem ipsum been text.</p>
</div>
<div class="feature-box-overlay bg-solitude-blue border-radius-10px"></div>
</div>
</div>
</div>
</div>
</section>
<section class="cover-background bg-extra-very-slate-blue" style="background-image: url('images/demo-hosting-home-02.png')" data-0-top="background-color:rgb(25,30,61);" data-center-bottom="background-color:rgb(14,16,29);">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-8 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 900, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="text-white opacity-5 mb-5px text-uppercase d-block">What we offers</span>
<h2 class="text-white fw-600 ls-minus-1px">Affordable services</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-xl-4 row-cols-lg-2 row-cols-md-2 justify-content-center text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;scale&quot;:[0.8,1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 500, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col icon-with-text-style-05 transition-inner-all lg-mb-30px">
<div class="feature-box hover-box dark-hover border-radius-10px border border-color-transparent-white-light border-color-transparent-on-hover last-paragraph-no-margin overflow-hidden">
<div class="content-slide-up p-50px">
<div class="feature-box-icon">
<i class="line-icon-URL-Window icon-double-large text-cornflower-blue mb-20px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-white fw-500 fs-17 mb-5px">Amazing layouts</span>
<p class="text-visible text-light-opacity">Lorem ipsum is simply dummy text.</p>
</div>
<div class="feature-box-overlay bg-gradient-fast-blue-purple"></div>
</div>
</div>
</div>
<div class="col icon-with-text-style-05 transition-inner-all lg-mb-30px">
<div class="feature-box hover-box dark-hover border-radius-10px border border-color-transparent-white-light border-color-transparent-on-hover last-paragraph-no-margin overflow-hidden">
<div class="content-slide-up p-50px">
<div class="feature-box-icon">
<i class="line-icon-Globe icon-double-large text-cornflower-blue mb-20px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-white fw-500 fs-17 mb-5px">Web hosting</span>
<p class="text-visible text-light-opacity">Lorem ipsum is simply dummy text.</p>
</div>
<div class="feature-box-overlay bg-gradient-fast-blue-purple"></div>
</div>
</div>
</div>
<div class="col icon-with-text-style-05 transition-inner-all sm-mb-30px">
<div class="feature-box hover-box dark-hover border-radius-10px border border-color-transparent-white-light border-color-transparent-on-hover last-paragraph-no-margin overflow-hidden">
<div class="content-slide-up p-50px">
<div class="feature-box-icon">
<i class="line-icon-Envelope icon-double-large text-cornflower-blue mb-20px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-white fw-500 fs-17 mb-5px">Website email</span>
<p class="text-visible text-light-opacity">Lorem ipsum is simply dummy text.</p>
</div>
<div class="feature-box-overlay bg-gradient-fast-blue-purple"></div>
</div>
</div>
</div>
<div class="col icon-with-text-style-05 transition-inner-all">
<div class="feature-box hover-box dark-hover border-radius-10px border border-color-transparent-white-light border-color-transparent-on-hover last-paragraph-no-margin overflow-hidden">
<div class="content-slide-up p-50px">
<div class="feature-box-icon">
<i class="line-icon-Big-Data icon-double-large text-cornflower-blue mb-20px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-white fw-500 fs-17 mb-5px">Server hosting</span>
<p class="text-visible text-light-opacity">Lorem ipsum is simply dummy text.</p>
</div>
<div class="feature-box-overlay bg-gradient-fast-blue-purple"></div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-auto icon-with-text-style-08 sm-mb-10px" data-anime="{ &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 900, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon me-10px">
<i class="bi bi-envelope icon-small text-white"></i>
</div>
<div class="feature-box-content">
<span class="alt-font text-white fs-18">Looking for help? <a href="element-icon-with-text.html#" class="text-decoration-line-bottom text-white fw-500">Submit a ticket</a></span>
</div>
</div>
</div>
<div class="col-auto icon-with-text-style-08" data-anime="{ &quot;translateX&quot;: [50, 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="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon me-10px">
<i class="bi bi-chat-dots icon-small text-white"></i>
</div>
<div class="feature-box-content">
<span class="alt-font text-white fs-18">Keep in Touch. <a href="element-icon-with-text.html#" class="text-decoration-line-bottom text-white fw-500">Like us on Facebook</a></span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="big-section overflow-hidden py-0">
<div class="container-fluid p-0">
<div class="row row-cols-1 row-cols-xl-6 row-cols-xl-3 row-cols-md-3 row-cols-sm-2 justify-content-center text-center icon-with-style-2 g-0">
<div class="col icon-with-text-style-05 transition-inner-all">
<div class="feature-box hover-box dark-hover border-end border-color-extra-medium-gray last-paragraph-no-margin xs-border-end-0 lg-border-bottom">
<div class="content-slide-up content-scale pt-20 pb-20 ps-10 pe-10 sm-p-15 sm-w-100">
<div class="feature-box-icon">
<i class="line-icon-Like icon-extra-large text-jade mb-25px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fs-18 fw-600 mb-5px">Trusted company</span>
<p class="text-visible text-light-opacity w-80 mx-auto md-w-90">Lorem ipsum is simply dummy text the printing</p>
</div>
<div class="feature-box-overlay bg-jade"></div>
</div>
</div>
</div>
<div class="col icon-with-text-style-05 transition-inner-all">
<div class="feature-box hover-box dark-hover border-end border-color-extra-medium-gray last-paragraph-no-margin sm-border-end-0 lg-border-bottom">
<div class="content-slide-up content-scale pt-20 pb-20 ps-10 pe-10 sm-p-15 sm-w-100">
<div class="feature-box-icon">
<i class="line-icon-Knight icon-extra-large text-jade mb-25px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fs-18 fw-600 mb-5px">Professional work</span>
<p class="text-visible text-light-opacity w-80 mx-auto md-w-90">Lorem ipsum is simply dummy text the printing</p>
</div>
<div class="feature-box-overlay bg-jade"></div>
</div>
</div>
</div>
<div class="col icon-with-text-style-05 transition-inner-all">
<div class="feature-box hover-box dark-hover border-end border-color-extra-medium-gray last-paragraph-no-margin xs-border-end-0 lg-border-bottom">
<div class="content-slide-up content-scale pt-20 pb-20 ps-10 pe-10 sm-p-15 sm-w-100">
<div class="feature-box-icon">
<i class="line-icon-Bar-Chart2 icon-extra-large text-jade mb-25px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fs-18 fw-600 mb-5px">Consistent growth</span>
<p class="text-visible text-light-opacity w-80 mx-auto md-w-90">Lorem ipsum is simply dummy text the printing</p>
</div>
<div class="feature-box-overlay bg-jade"></div>
</div>
</div>
</div>
<div class="col icon-with-text-style-05 transition-inner-all">
<div class="feature-box hover-box dark-hover border-end border-color-extra-medium-gray last-paragraph-no-margin sm-border-end-0 sm-border-bottom">
<div class="content-slide-up content-scale pt-20 pb-20 ps-10 pe-10 sm-p-15 sm-w-100">
<div class="feature-box-icon">
<i class="line-icon-Money-Bag icon-extra-large text-jade mb-25px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fs-18 fw-600 mb-5px">Expert advisors</span>
<p class="text-visible text-light-opacity w-80 mx-auto md-w-90">Lorem ipsum is simply dummy text the printing</p>
</div>
<div class="feature-box-overlay bg-jade"></div>
</div>
</div>
</div>
<div class="col icon-with-text-style-05 transition-inner-all">
<div class="feature-box hover-box dark-hover border-end border-color-extra-medium-gray last-paragraph-no-margin xs-border-bottom xs-border-end-0">
<div class="content-slide-up content-scale pt-20 pb-20 ps-10 pe-10 sm-p-15 sm-w-100">
<div class="feature-box-icon">
<i class="line-icon-Ribbon-2 icon-extra-large text-jade mb-25px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fs-18 fw-600 mb-5px">Award winning</span>
<p class="text-visible text-light-opacity w-80 mx-auto md-w-90">Lorem ipsum is simply dummy text the printing</p>
</div>
<div class="feature-box-overlay bg-jade"></div>
</div>
</div>
</div>
<div class="col icon-with-text-style-05 transition-inner-all">
<div class="feature-box hover-box dark-hover last-paragraph-no-margin">
<div class="content-slide-up content-scale pt-20 pb-20 ps-10 pe-10 sm-p-15 sm-w-100">
<div class="feature-box-icon">
<i class="line-icon-Business-Mens icon-extra-large text-jade mb-25px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fs-18 fw-600 mb-5px">Dedicated team</span>
<p class="text-visible text-light-opacity w-80 mx-auto md-w-90">Lorem ipsum is simply dummy text the printing</p>
</div>
<div class="feature-box-overlay bg-jade"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gradient-very-light-gray">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-5 offset-xl-1 col-lg-6 md-mb-50px xs-mb-30px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 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-white d-inline-flex box-shadow-medium-bottom"><i class="bi bi-award fs-16 me-5px"></i>Creative approach</span>
<h3 class="text-dark-gray fw-700 ls-minus-1px md-w-80 sm-w-100">Provide advanced business solutions.</h3>
<div class="mb-40px sm-mb-30px">
<div class="icon-with-text-style-08 mb-25px">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon feature-box-icon-rounded w-50px h-50px rounded-circle bg-white box-shadow-medium-bottom me-20px text-center"><i class="fa-solid fa-check fs-16 text-dark-gray"></i></div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="fs-17 fw-600 text-dark-gray">Make your business stand out.</span>
<p>Lorem ipsum is simply dummy printing.</p>
</div>
</div>
</div>
<div class="icon-with-text-style-08">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon feature-box-icon-rounded w-50px h-50px rounded-circle bg-white box-shadow-medium-bottom me-20px text-center"><i class="fa-solid fa-check fs-16 text-dark-gray"></i></div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="fs-17 fw-600 text-dark-gray">Increase your conversion rate.</span>
<p>Lorem ipsum is simply dummy printing.</p>
</div>
</div>
</div>
</div>
<a href="element-icon-with-text.html#" class="btn btn-extra-large btn-gradient-sky-blue-pink btn-hover-animation-switch btn-rounded btn-box-shadow btn-icon-left me-25px text-transform-none">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="feather icon-feather-briefcase"></i></span>
<span class="btn-icon"><i class="feather icon-feather-briefcase"></i></span>
</span>
</a>
<a href="element-icon-with-text.html#" class="btn btn-link btn-hover-animation-switch btn-extra-large text-dark-gray btn-icon-left align-middle fw-600 p-0 xs-mt-20px xs-mb-20px text-transform-none">
<span>
<span class="btn-text">Quick contact</span>
<span class="btn-icon"><i class="feather icon-feather-mail"></i></span>
<span class="btn-icon"><i class="feather icon-feather-mail"></i></span>
</span>
</a>
</div>
<div class="col-lg-6">
<div class="row row-cols-1 row-cols-lg-1 row-cols-xl-1 justify-content-center mx-0">
<div class="col transition-inner-all icon-with-text-style-06 mb-30px" data-bottom-top="transform: translate3d(40px, 0px, 0px);" data-top-bottom="transform: translate3d(-40px, 0px, 0px);">
<div class="bg-white border-radius-8px feature-box box-shadow-extra-large feature-box-left-icon p-10 overflow-hidden">
<div class="feature-box-icon">
<i class="line-icon-Gear icon-double-large text-base-color"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<div class="fs-18 fw-600 text-dark-gray mb-5px">Powerfull theme options</div>
<p>Lorem ipsum is simply dummy text of the printing and typeset industry ipsum standard.</p>
</div>
<span class="border-hover bg-base-color"></span>
</div>
</div>
<div class="col transition-inner-all icon-with-text-style-06" data-bottom-top="transform: translate3d(-40px, 0px, 0px);" data-top-bottom="transform: translate3d(40px, 0px, 0px);">
<div class="bg-white border-radius-8px feature-box box-shadow-extra-large feature-box-left-icon p-10 overflow-hidden">
<div class="feature-box-icon">
<i class="line-icon-Navigation-LeftWindow icon-double-large text-base-color"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<div class="fs-18 fw-600 text-dark-gray mb-5px">Unlimited layouts styles</div>
<p>Lorem ipsum is simply dummy text of the printing and typeset industry ipsum standard.</p>
</div>
<span class="border-hover bg-base-color"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-extra-dark-slate-blue background-position-center-top big-section" style="background-image: url('images/vertical-line-bg-small.svg')">
<div class="container">
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center" data-anime="{&quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;perspective&quot;: [1200,1200], &quot;scale&quot;: [1.1, 1], &quot;rotateX&quot;: [50, 0], &quot;opacity&quot;: [0,0.7], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col icon-with-text-style-07 transition-inner-all mb-30px">
<div class="hover-box dark-hover feature-box p-55px lg-p-30px overflow-hidden bg-dark-slate-blue text-start box-shadow-double-large-hover">
<div class="feature-box-icon min-h-150px sm-min-h-100px mb-20 z-index-9">
<i class="line-icon-Management icon-extra-large text-white"></i>
</div>
<div class="feature-box-title fs-200 fw-600 text-black opacity-2 ls-minus-10px">design</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-white mb-5px fs-18">Design research</span>
<p class="w-90 xl-w-100 lh-30 text-light-opacity lh-30 text-light-opacity">We create compelling web designs, which are the right-fit for your target groups.</p>
</div>
<div class="feature-box-overlay bg-base-color"></div>
</div>
</div>
<div class="col icon-with-text-style-07 transition-inner-all mb-30px">
<div class="hover-box dark-hover feature-box p-55px lg-p-30px overflow-hidden bg-dark-slate-blue text-start box-shadow-double-large-hover">
<div class="feature-box-icon min-h-150px sm-min-h-100px mb-20 z-index-9">
<i class="line-icon-Megaphone icon-extra-large text-white"></i>
</div>
<div class="feature-box-title fs-200 fw-600 text-black opacity-2 ls-minus-10px">strategy</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-white mb-5px fs-18">Brand strategy</span>
<p class="w-90 xl-w-100 lh-30 text-light-opacity">We create compelling web designs, which are the right-fit for your target groups.</p>
</div>
<div class="feature-box-overlay bg-base-color"></div>
</div>
</div>
<div class="col icon-with-text-style-07 transition-inner-all mb-30px">
<div class="hover-box dark-hover feature-box p-55px lg-p-30px overflow-hidden bg-dark-slate-blue text-start box-shadow-double-large-hover">
<div class="feature-box-icon min-h-150px sm-min-h-100px mb-20 z-index-9">
<i class="line-icon-Add-Bag icon-extra-large text-white"></i>
</div>
<div class="feature-box-title fs-200 fw-600 text-black opacity-2 ls-minus-10px">eCommerce</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-white mb-5px fs-18">eCommerce solutions</span>
<p class="w-90 xl-w-100 lh-30 text-light-opacity">We create compelling web designs, which are the right-fit for your target groups.</p>
</div>
<div class="feature-box-overlay bg-base-color"></div>
</div>
</div>
<div class="col icon-with-text-style-07 transition-inner-all md-mb-30px">
<div class="hover-box dark-hover feature-box p-55px lg-p-30px overflow-hidden bg-dark-slate-blue text-start box-shadow-double-large-hover">
<div class="feature-box-icon min-h-150px sm-min-h-100px mb-20 z-index-9">
<i class="line-icon-Add-Window icon-extra-large text-white"></i>
</div>
<div class="feature-box-title fs-200 fw-600 text-black opacity-2 ls-minus-10px">development</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-white mb-5px fs-18">Website development</span>
<p class="w-90 xl-w-100 lh-30 text-light-opacity">We create compelling web designs, which are the right-fit for your target groups.</p>
</div>
<div class="feature-box-overlay bg-base-color"></div>
</div>
</div>
<div class="col icon-with-text-style-07 transition-inner-all sm-mb-30px">
<div class="hover-box dark-hover feature-box p-55px lg-p-30px overflow-hidden bg-dark-slate-blue text-start box-shadow-double-large-hover">
<div class="feature-box-icon min-h-150px sm-min-h-100px mb-20 z-index-9">
<i class="line-icon-Microphone-4 icon-extra-large text-white"></i>
</div>
<div class="feature-box-title fs-200 fw-600 text-black opacity-2 ls-minus-10px">identity</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-white mb-5px fs-18">Visual identity</span>
<p class="w-90 xl-w-100 lh-30 text-light-opacity">We create compelling web designs, which are the right-fit for your target groups.</p>
</div>
<div class="feature-box-overlay bg-base-color"></div>
</div>
</div>
<div class="col icon-with-text-style-07 transition-inner-all">
<div class="hover-box dark-hover feature-box p-55px lg-p-30px overflow-hidden bg-dark-slate-blue text-start box-shadow-double-large-hover">
<div class="feature-box-icon min-h-150px sm-min-h-100px mb-20 z-index-9">
<i class="line-icon-Address-Book2 icon-extra-large text-white"></i>
</div>
<div class="feature-box-title fs-200 fw-600 text-black opacity-2 ls-minus-10px">content</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-white mb-5px fs-18">Content management</span>
<p class="w-90 xl-w-100 lh-30 text-light-opacity">We create compelling web designs, which are the right-fit for your target groups.</p>
</div>
<div class="feature-box-overlay bg-base-color"></div>
</div>
</div>
</div>
</div>
</section>
<section class="cover-background" style="background-image: url('images/demo-hosting-home-06.jpg')">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-8 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 900, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="text-base-color fw-600 mb-5px text-uppercase d-block">Hosting solutions</span>
<h2 class="text-dark-gray fw-700 ls-minus-2px">Hosting services</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;perspective&quot;: [1200, 1200], &quot;scale&quot;: [1.05, 1], &quot;rotateX&quot;: [50, 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-07 transition-inner-all md-mb-30px">
<div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
<div class="feature-box-icon mb-30px">
<img src="images/demo-hosting-home-icon-02.svg" class="h-50px" alt>
</div>
<div class="feature-box-content">
<span class="d-inline-block fw-600 text-dark-gray fs-18 ls-minus-05px">Online store</span>
<p class="mb-10px">Lorem dummy printing type setting industry.</p>
<a href="element-icon-with-text.html#" class="btn btn-link btn-hover-animation-switch btn-extra-large text-base-color fw-600 text-uppercase-inherit">
<span>
<span class="btn-text">Learn more</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
<div class="col icon-with-text-style-07 transition-inner-all md-mb-30px">
<div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
<div class="feature-box-icon mb-30px">
<img src="images/demo-hosting-home-icon-03.svg" class="h-50px" alt>
</div>
<div class="feature-box-content">
<span class="d-inline-block fw-600 text-dark-gray fs-18 ls-minus-05px">Web hosting</span>
<p class="mb-10px">Lorem dummy printing type setting industry.</p>
<a href="element-icon-with-text.html#" class="btn btn-link btn-hover-animation-switch btn-extra-large text-base-color fw-600 text-uppercase-inherit">
<span>
<span class="btn-text">Learn more</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
<div class="col icon-with-text-style-07 transition-inner-all xs-mb-30px">
<div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
<div class="feature-box-icon mb-30px">
<img src="images/demo-hosting-home-icon-04.svg" class="h-50px" alt>
</div>
<div class="feature-box-content">
<span class="d-inline-block fw-600 text-dark-gray fs-18 ls-minus-05px">Business email</span>
<p class="mb-10px">Lorem dummy printing type setting industry.</p>
<a href="element-icon-with-text.html#" class="btn btn-link btn-hover-animation-switch btn-extra-large text-base-color fw-600 text-uppercase-inherit">
<span>
<span class="btn-text">Learn more</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
<div class="col icon-with-text-style-07 transition-inner-all">
<div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
<div class="feature-box-icon mb-30px">
<img src="images/demo-hosting-home-icon-05.svg" class="h-50px" alt>
</div>
<div class="feature-box-content">
<span class="d-inline-block fw-600 text-dark-gray fs-18 ls-minus-05px">Cloud storage</span>
<p class="mb-10px">Lorem dummy printing type setting industry.</p>
<a href="element-icon-with-text.html#" class="btn btn-link btn-hover-animation-switch btn-extra-large text-base-color fw-600 text-uppercase-inherit">
<span>
<span class="btn-text">Learn more</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pt-40px pb-40px">
<div class="container">
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center align-items-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-15, 0], &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col icon-with-text-style-08 md-mb-30px text-center text-sm-start">
<div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
<div class="feature-box-icon me-10px">
<i class="bi bi-shield-check icon-very-medium text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="fw-600 text-dark-gray fs-18">World-class services</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-08 md-mb-30px text-center text-sm-start">
<div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
<div class="feature-box-icon me-10px">
<i class="bi bi-hourglass icon-very-medium text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="fw-600 text-dark-gray fs-18">Experience strategy</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-08 xs-mb-30px text-center text-sm-start">
<div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
<div class="feature-box-icon me-10px">
<i class="bi bi-award icon-very-medium text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="fw-600 text-dark-gray fs-18">Award winning agency</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-08 text-center text-sm-start">
<div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
<div class="feature-box-icon me-10px">
<i class="bi bi-briefcase icon-very-medium text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="fw-600 text-dark-gray fs-18">Grow your business</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="big-section border-top border-color-extra-medium-gray">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-12 col-lg-10 text-center">
<h2 class="fs-70 text-dark-gray fw-700 ls-minus-2px">Creative <span class="text-jade">solutions</span></h2>
</div>
</div>
<div class="row row-cols-1 row-cols-xl-3 row-cols-lg-2 row-cols-md-2 justify-content-center">
<div class="col icon-with-text-style-08 lg-mb-50px sm-mb-40px">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon hover-box dark-hover feature-box-icon-rounded w-100px h-100px rounded-circle bg-jade">
<i class="line-icon-Medal-2 icon-large text-white"></i>
<div class="feature-box-icon-hover bg-dark-gray rounded-circle"></div>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">Effective strategy</span>
<p>Lorem ipsum is simply dummy text the printing typesetting.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-08 lg-mb-50px sm-mb-40px">
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
<div class="feature-box-icon hover-box dark-hover feature-box-icon-rounded w-100px h-100px rounded-circle bg-jade">
<i class="line-icon-Idea-5 icon-large text-white"></i>
<div class="feature-box-icon-hover bg-dark-gray rounded-circle"></div>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">Inventive solutions</span>
<p>Lorem ipsum is simply dummy text the printing typesetting.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-08">
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
<div class="feature-box-icon hover-box dark-hover feature-box-icon-rounded w-100px h-100px rounded-circle bg-jade">
<i class="line-icon-Knight icon-large text-white"></i>
<div class="feature-box-icon-hover bg-dark-gray rounded-circle"></div>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">Market analysis</span>
<p>Lorem ipsum is simply dummy text the printing typesetting.</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-auto text-center last-paragraph-no-margin">
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
<div class="feature-box-icon me-10px">
<i class="bi bi-chat-text icon-extra-medium text-dark-gray"></i>
</div>
<div class="feature-box-content fs-18 text-dark-gray fw-600">
Let's make something great work together. <a href="element-icon-with-text.html#" class="text-dark-gray text-dark-gray-hover text-decoration-line-bottom-medium border-1">Got a project in mind?</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-extra-dark-slate-blue half-section">
<div class="container">
<div class="row row-cols-1 row-cols-xl-4 row-cols-lg-2 row-cols-md-2 justify-content-center">
<div class="col icon-with-text-style-09 lg-mb-30px">
<div class="feature-box">
<div class="box-move-bottom-top pt-18 pb-18 ps-15 pe-15 transition-inner-all">
<div class="feature-box-icon feature-box-icon-rounded dark-hover bg-slate-blue w-120px h-120px rounded-circle mb-25px box-shadow-medium mx-auto">
<i class="line-icon-Full-Bag icon-large text-white"></i>
<div class="feature-box-icon-hover bg-base-color rounded-circle"></div>
</div>
<div class="feature-box-content last-paragraph-no-margin overflow-hidden">
<span class="d-inline-block fw-500 text-white fs-18">Online store</span>
<p class="w-90 m-auto">Lorem simply dummy print typesetting</p>
<div class="move-bottom-top mt-15px">
<a href="element-icon-with-text.html#" class="hover-link btn btn-link btn-medium text-white ls-05px">Get started</a>
</div>
</div>
</div>
<div class="feature-box-overlay bg-slate-blue border-radius-6px"></div>
</div>
</div>
<div class="col icon-with-text-style-09 lg-mb-30px">
<div class="feature-box">
<div class="box-move-bottom-top pt-18 pb-18 ps-15 pe-15 transition-inner-all">
<div class="feature-box-icon feature-box-icon-rounded dark-hover bg-slate-blue w-120px h-120px rounded-circle mb-25px box-shadow-medium mx-auto">
<i class="line-icon-URL-Window icon-large text-white"></i>
<div class="feature-box-icon-hover bg-base-color rounded-circle"></div>
</div>
<div class="feature-box-content last-paragraph-no-margin overflow-hidden">
<span class="d-inline-block fw-500 text-white fs-18">Web hosting</span>
<p class="w-90 m-auto">Lorem simply dummy print typesetting</p>
<div class="move-bottom-top mt-15px">
<a href="element-icon-with-text.html#" class="hover-link btn btn-link btn-medium text-white ls-05px">Get started</a>
</div>
</div>
</div>
<div class="feature-box-overlay bg-slate-blue border-radius-6px"></div>
</div>
</div>
<div class="col icon-with-text-style-09 sm-mb-30px">
<div class="feature-box">
<div class="box-move-bottom-top pt-18 pb-18 ps-15 pe-15 transition-inner-all">
<div class="feature-box-icon feature-box-icon-rounded dark-hover bg-slate-blue w-120px h-120px rounded-circle mb-25px box-shadow-medium mx-auto">
<i class="line-icon-Envelope icon-large text-white"></i>
<div class="feature-box-icon-hover bg-base-color rounded-circle"></div>
</div>
<div class="feature-box-content last-paragraph-no-margin overflow-hidden">
<span class="d-inline-block fw-500 text-white fs-18">Business email</span>
<p class="w-90 m-auto">Lorem simply dummy print typesetting</p>
<div class="move-bottom-top mt-15px">
<a href="element-icon-with-text.html#" class="hover-link btn btn-link btn-medium text-white ls-05px">Get started</a>
</div>
</div>
</div>
<div class="feature-box-overlay bg-slate-blue border-radius-6px"></div>
</div>
</div>
<div class="col icon-with-text-style-09">
<div class="feature-box">
<div class="box-move-bottom-top pt-18 pb-18 ps-15 pe-15 transition-inner-all">
<div class="feature-box-icon feature-box-icon-rounded dark-hover bg-slate-blue w-120px h-120px rounded-circle mb-25px box-shadow-medium mx-auto">
<i class="line-icon-Data-Cloud icon-large text-white"></i>
<div class="feature-box-icon-hover bg-base-color rounded-circle"></div>
</div>
<div class="feature-box-content last-paragraph-no-margin overflow-hidden">
<span class="d-inline-block fw-500 text-white fs-18">Cloud storage</span>
<p class="w-90 m-auto">Lorem simply dummy print typesetting</p>
<div class="move-bottom-top mt-15px">
<a href="element-icon-with-text.html#" class="hover-link btn btn-link btn-medium text-white ls-05px">Get started</a>
</div>
</div>
</div>
<div class="feature-box-overlay bg-slate-blue border-radius-6px"></div>
</div>
</div>
</div>
</div>
</section>
<section class="position-relative background-position-center-top overflow-hidden" style="background-image: url('images/vertical-line-bg-medium-gray.svg')">
<div class="container position-relative">
<div class="position-absolute top-50px right-minus-50px lg-right-minus-20px d-none d-md-inline-block"><img src="images/demo-ebook-shape.png" data-bottom-top="transform: rotate(-10deg) translateY(50px)" data-top-bottom="transform:rotate(10deg) translateY(-50px)" alt /></div>
<div class="position-absolute bottom-40px md-bottom-60px left-minus-50px d-none d-md-inline-block"><img src="images/demo-ebook-shape-02.png" data-bottom-top="transform: rotate(10deg) translateX(50px)" data-top-bottom="transform:rotate(-10deg) translateX(-50px)" alt /></div>
<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; }">
<span class="d-block text-uppercase mb-5px text-base-color fw-600">Author of the year</span>
<h2 class="fw-800 ls-minus-2px alt-font text-dark-gray text-uppercase">About The Book</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-md-2 justify-content-center mb-5 md-mb-7" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;rotateZ&quot;: [5, 0], &quot;translateY&quot;: [50, 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-10 md-mb-30px" data-bottom-top="transform: translateY(20px)" data-top-bottom="transform: translateY(-20px)">
<div class="feature-box bg-white h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover p-50px xl-p-30px border-radius-8px">
<div class="feature-box-icon feature-box-icon-rounded w-100px h-100px rounded-circle mb-20px">
<i class="line-icon-Medal-2 icon-extra-large text-dark-gray"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fw-500 text-dark-gray mb-5px fs-18">10+ award achieved</span>
<p>Lorem ipsum is simply printing typesetting.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-10 md-mb-30px" data-bottom-top="transform: translateY(-20px)" data-top-bottom="transform: translateY(20px)">
<div class="feature-box bg-white h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover p-50px xl-p-30px border-radius-8px">
<div class="feature-box-icon feature-box-icon-rounded w-100px h-100px rounded-circle mb-20px">
<i class="line-icon-Tablet-Phone icon-extra-large text-dark-gray"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fw-500 text-dark-gray mb-5px fs-18">Read on any device</span>
<p>Lorem ipsum is simply printing typesetting.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-10 sm-mb-30px" data-bottom-top="transform: translateY(20px)" data-top-bottom="transform: translateY(-20px)">
<div class="feature-box bg-white h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover p-50px xl-p-30px border-radius-8px">
<div class="feature-box-icon feature-box-icon-rounded w-100px h-100px rounded-circle mb-20px">
<i class="line-icon-Loudspeaker icon-extra-large text-dark-gray"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fw-500 text-dark-gray mb-5px fs-18">Audio included</span>
<p>Lorem ipsum is simply printing typesetting.</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-10" data-bottom-top="transform: translateY(-20px)" data-top-bottom="transform: translateY(20px)">
<div class="feature-box bg-white h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover p-50px xl-p-30px border-radius-8px">
<div class="feature-box-icon feature-box-icon-rounded w-100px h-100px rounded-circle mb-20px">
<i class="line-icon-Business-Man icon-extra-large text-dark-gray"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fw-500 text-dark-gray mb-5px fs-18">One million readers</span>
<p>Lorem ipsum is simply printing typesetting.</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center position-relative" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 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-auto text-center last-paragraph-no-margin">
<div class="d-inline-block align-middle me-15px sm-m-5px"><img src="images/demo-elearning-testimonials-icon.png" alt></div>
<div class="d-inline-block text-dark-gray fs-24 align-middle ls-minus-05px">I read a book one day and <span class="fw-500 text-decoration-line-bottom">my whole life was changed.</span></div>
</div>
</div>
</div>
</section>
<section class="bg-gradient-very-light-gray">
<div class="container">
<div class="row mb-3">
<div class="col-12 col-xl-10" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="text-dark-gray fw-600 ls-minus-2px">Build impactful experiences through web design and development.</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [15, 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 icon-with-text-style-11 border-0 overflow-visible md-mb-30px sm-mb-15px">
<div class="text-box-wrapper align-items-center d-flex position-relative overflow-hidden border-radius-6px">
<div class="text-center w-100">
<div class="text-box last-paragraph-no-margin p-15 xxl-p-10 lg-p-5">
<img src="images/demo-digital-agency-expertise-icon-01.png" class="mb-30px d-block mx-auto" alt />
<span class="text-dark-gray fw-600 fs-19">Project analysis</span>
<p>Research and strategy</p>
</div>
<div class="text-box-hover bg-red h-100 d-flex align-items-center justify-content-center flex-column">
<h1 class="text-white mb-10px ls-minus-2px fw-600 position-absolute bottom-minus-40px">01</h1>
<p class="d-inline-block w-70 mb-10px text-white opacity-5 lg-w-90">Lorem ipsum simply dummy text printing dummy industry.</p>
<span class="fw-500 fs-19 text-white mb-20px">Discussion</span>
</div>
</div>
</div>
</div>
<div class="col icon-with-text-style-11 border-0 overflow-visible md-mb-30px sm-mb-15px">
<div class="text-box-wrapper align-items-center d-flex position-relative overflow-hidden border-radius-6px">
<div class="text-center w-100">
<div class="text-box last-paragraph-no-margin p-15 p-15 xxl-p-10 lg-p-5">
<img src="images/demo-digital-agency-expertise-icon-02.png" class="mb-30px d-block mx-auto" alt />
<span class="text-dark-gray fw-600 fs-19">Build strategy</span>
<p>Wireframes and design</p>
</div>
<div class="text-box-hover bg-red h-100 d-flex align-items-center justify-content-center flex-column">
<h1 class="text-white mb-10px ls-minus-2px fw-600 position-absolute bottom-minus-40px">02</h1>
<p class="d-inline-block w-70 mb-10px text-white opacity-5 lg-w-90">Lorem ipsum simply dummy text printing dummy industry.</p>
<span class="fw-500 fs-19 text-white mb-20px">Strategy</span>
</div>
</div>
</div>
</div>
<div class="col icon-with-text-style-11 border-0 overflow-visible sm-mb-15px">
<div class="text-box-wrapper align-items-center d-flex position-relative overflow-hidden border-radius-6px">
<div class="text-center w-100">
<div class="text-box last-paragraph-no-margin p-15 p-15 xxl-p-10 lg-p-5">
<img src="images/demo-digital-agency-expertise-icon-03.png" class="mb-30px d-block mx-auto" alt />
<span class="text-dark-gray fw-600 fs-19">Launch and live</span>
<p>Development and scale</p>
</div>
<div class="text-box-hover bg-red h-100 d-flex align-items-center justify-content-center flex-column">
<h1 class="text-white mb-10px ls-minus-2px fw-600 position-absolute bottom-minus-40px">03</h1>
<p class="d-inline-block w-70 mb-10px text-white opacity-5 lg-w-90">Lorem ipsum simply dummy text printing dummy industry.</p>
<span class="fw-500 fs-19 text-white mb-20px">Launch</span>
</div>
</div>
</div>
</div>
<div class="col icon-with-text-style-11 border-0 overflow-visible">
<div class="text-box-wrapper align-items-center d-flex position-relative overflow-hidden border-radius-6px">
<div class="text-center w-100">
<div class="text-box last-paragraph-no-margin p-15 p-15 xxl-p-10 lg-p-5">
<img src="images/demo-digital-agency-expertise-icon-04.png" class="mb-30px d-block mx-auto" alt />
<span class="text-dark-gray fw-600 fs-19">Maintenance</span>
<p>Maintaining strong</p>
</div>
<div class="text-box-hover bg-red h-100 d-flex align-items-center justify-content-center flex-column">
<h1 class="text-white mb-10px ls-minus-2px fw-600 position-absolute bottom-minus-40px">04</h1>
<p class="d-inline-block w-70 mb-10px text-white opacity-5 lg-w-90">Lorem ipsum simply dummy text printing dummy industry.</p>
<span class="fw-500 fs-19 text-white mb-20px">Maintenance</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-demo bg-dark-slate-blue pb-4 sm-pb-50px" style="background-image: url('images/demo-footer-pattern.svg')">
<div class="container">
<div class="row mb-6 md-mb-30px">
<div class="col-xl-5 col-lg-6 md-mb-30px text-center text-lg-start">
<h3 class="text-white fw-600 alt-font mb-40px ls-minus-1px md-mb-30px md-w-60 sm-w-70 xs-w-100 md-mx-auto">Craft a standout website with crafto.</h3>
<div class="row">
<div class="col-lg-5 col-sm-6 xs-mb-20px">
<span class="alt-font fs-14 fw-600 text-uppercase d-block text-white ls-1px lh-18">Presale questions</span>
<a href="cdn-cgi/l/email-protection.html#a4cdcac2cbe4d0ccc1c9c1dec5c58ac7cbc9"><span class="__cf_email__" data-cfemail="442d2a222b04302c2129213e25256a272b29">[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>