Access_New/demo-consulting-company.html
2024-09-05 11:33:27 +05:45

525 lines
30 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" />
<link rel="stylesheet" href="demos/consulting/consulting.css" />
</head>
<body data-mobile-nav-style="classic">
<header class="header-with-topbar">
<div class="header-top-bar top-bar-light bg-white disable-fixed md-border-bottom border-color-transparent-dark-very-light">
<div class="container-fluid">
<div class="row h-45px align-items-center m-0">
<div class="col-md-6 text-center text-md-start">
<div class="fs-14 text-dark-gray">Our consulting experts waiting for you! <a href="demo-consulting-contact.html" class="text-base-color fw-500 text-decoration-line-bottom">Contact now</a></div>
</div>
<div class="col-6 text-end d-none d-md-flex">
<div class="widget fs-14 me-30px md-me-0"><a href="tel:02228899900" class="text-dark-gray"><i class="feather icon-feather-phone-call text-base-color"></i> 0222 8899900</a></div>
<div class="widget fs-14 text-dark-gray d-none d-lg-inline-block"><i class="feather icon-feather-map-pin text-base-color"></i> Broadway, 24th Floor, San Francisco</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg header-transparent bg-transparent border-bottom border-color-transparent-white-light disable-fixed">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-auto">
<a class="navbar-brand" href="demo-consulting.html">
<img src="images/demo-consulting-logo-white.png" data-at2x="images/demo-consulting-logo-white@2x.png" alt class="default-logo">
<img src="images/demo-consulting-logo-black.png" data-at2x="images/demo-consulting-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-consulting-logo-black.png" data-at2x="images/demo-consulting-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 alt-font">
<li class="nav-item"><a href="demo-consulting.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-consulting-company.html" class="nav-link">Company</a></li>
<li class="nav-item dropdown simple-dropdown">
<a href="demo-consulting-services.html" class="nav-link">Services</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a href="demo-consulting-services-details.html">Audit assurance</a></li>
<li><a href="demo-consulting-services-details.html">Financial advisory</a></li>
<li><a href="demo-consulting-services-details.html">Business analytics</a></li>
<li><a href="demo-consulting-services-details.html">Middle marketing</a></li>
<li><a href="demo-consulting-services-details.html">Consumer markets</a></li>
<li><a href="demo-consulting-services-details.html">Tax efficiency</a></li>
</ul>
</li>
<li class="nav-item"><a href="demo-consulting-process.html" class="nav-link">Process</a></li>
<li class="nav-item"><a href="demo-consulting-clients.html" class="nav-link">Clients</a></li>
<li class="nav-item"><a href="demo-consulting-news.html" class="nav-link">News</a></li>
<li class="nav-item"><a href="demo-consulting-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end md-pe-0">
<div class="header-icon">
<div class="header-search-icon icon">
<a href="demo-consulting-company.html#" class="search-form-icon header-search-form"><i class="feather icon-feather-search"></i></a>
<div class="search-form-wrapper">
<button title="Close" type="button" class="search-close alt-font">×</button>
<form id="search-form" role="search" method="get" class="search-form text-left" action="search-result.html">
<div class="search-form-box">
<h2 class="text-dark-gray fw-600 ls-minus-1px text-center mb-4 alt-font">What are you looking for?</h2>
<input class="search-input alt-font" id="search-form-input5e219ef164995" placeholder="Enter your keywords..." name="s" value type="text" autocomplete="off">
<button type="submit" class="search-button">
<i class="feather icon-feather-search" aria-hidden="true"></i>
</button>
</div>
</form>
</div>
</div>
<div class="header-push-button icon">
<div class="push-button">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="push-menu push-menu-style-3 p-50px bg-dark-gray">
<span class="close-menu text-dark-gray bg-white"><i class="fa-solid fa-xmark"></i></span>
<div class="push-menu-wrapper text-dark-gray" data-scroll-options="{ &quot;theme&quot;: &quot;light&quot; }">
<div class="w-100">
<h4 class="alt-font text-white fw-400 mb-30px d-block w-90 lh-40">Scalable business for <span class="d-inline-block fw-600 border-3 border-bottom border-color-base-color">startups</span></h4>
</div>
<div class="col-12">
<ul class="fs-20 ps-0 alt-font">
<li class="pt-10px pb-10px w-100"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f w-30px text-start text-white"></i>Facebook</a></li>
<li class="pt-10px pb-10px w-100"><a class="instagram" href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram w-30px text-start text-white"></i>Instagram</a></li>
<li class="pt-10px pb-10px w-100"><a class="twitter" href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter w-30px text-start text-white"></i>Twitter</a></li>
<li class="pt-10px pb-10px w-100"><a class="dribbble" href="https://www.dribbble.com/" target="_blank"><i class="fa-brands fa-dribbble w-30px text-start text-white"></i>Dribbble</a></li>
</ul>
</div>
<div class="border-top border-color-transparent-white-light pt-30px w-100">
<span class="fs-24 fw-500 text-white"><a href="tel:12345678910">+1 234 567 8910</a></span>
<a href="cdn-cgi/l/email-protection.html#3c55525a537c5853515d5552125f5351"><span class="__cf_email__" data-cfemail="90f9fef6ffd0f4fffdf1f9febef3fffd">[email&#160;protected]</span></a>
</div>
</div>
</div>
</header>
<section class="page-title-big-typography bg-dark-gray ipad-top-space-margin xs-py-0" data-parallax-background-ratio="0.5" style="background-image: url('images/demo-consulting-company-bg.jpg')">
<div class="opacity-light bg-dark-gray"></div>
<div class="container">
<div class="row align-items-center justify-content-center small-screen">
<div class="col-lg-6 col-md-8 position-relative text-center page-title-extra-small" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;rotateX&quot;: [90, 0], &quot;opacity&quot;: [0,1], &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h1 class="mb-5px alt-font text-white"><span class="opacity-6">Business profile</span></h1>
<h2 class="mb-0 text-white alt-font ls-minus-2px text-shadow-double-large fw-500">About company</h2>
</div>
<div class="down-section text-center" data-anime="{ &quot;translateY&quot;: [100, 0], &quot;opacity&quot;: [0,1], &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<a href="demo-consulting-company.html#down-section" class="section-link">
<div class="fs-30 sm-fs-32 text-white">
<i class="bi bi-mouse"></i>
</div>
</a>
</div>
</div>
</div>
</section>
<section id="down-section">
<div id="particles-01" data-particle="true" data-particle-options="{&quot;particles&quot;: {&quot;number&quot;: {&quot;value&quot;: 6,&quot;density&quot;: {&quot;enable&quot;: true,&quot;value_area&quot;: 1000}},&quot;color&quot;:{&quot;value&quot;:[&quot;#b7b9be&quot;, &quot;#dd6531&quot;]},&quot;shape&quot;: {&quot;type&quot;: &quot;circle&quot;,&quot;stroke&quot;:{&quot;width&quot;:0,&quot;color&quot;:&quot;#000000&quot;}},&quot;opacity&quot;: {&quot;value&quot;: 0.5,&quot;random&quot;: false,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;speed&quot;: 1,&quot;sync&quot;: false}},&quot;size&quot;: {&quot;value&quot;: 8,&quot;random&quot;: true,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;sync&quot;: true}},&quot;move&quot;: {&quot;enable&quot;: true,&quot;speed&quot;:2,&quot;direction&quot;: &quot;right&quot;,&quot;random&quot;: false,&quot;straight&quot;: false}},&quot;interactivity&quot;: {&quot;detect_on&quot;: &quot;canvas&quot;,&quot;events&quot;: {&quot;onhover&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;repulse&quot;},&quot;onclick&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;push&quot;},&quot;resize&quot;: true}},&quot;retina_detect&quot;: false}" class="position-absolute h-100 top-0 left-0 z-index-minus-1"></div>
<div class="container">
<div class="row justify-content-center text-center text-lg-start">
<div class="col-xl-5 col-lg-6 md-mb-30px xs-mb-25px">
<h2 class="fw-600 text-dark-gray ls-minus-2px mb-0" data-anime="{ &quot;el&quot;: &quot;lines&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; }">We develop and create consulting good future.</h2>
</div>
<div class="col-lg-6 offset-xl-1">
<p class="w-90 sm-w-100 mx-auto mx-lg-0" data-anime="{ &quot;el&quot;: &quot;lines&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; }">Adipiscing elit, sed do eusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Adipiscing elitdo eiusmod tempor.</p>
<a href="demo-consulting-services.html" class="btn btn-link btn-large text-dark-gray fw-600" data-anime="{ &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Explore services</a>
</div>
</div>
<div class="row justify-content-center align-items-center mt-5 md-mt-10">
<div class="col-xl-4 col-lg-3 col-md-4 sm-mb-35px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row align-items-center mb-50px sm-mb-35px">
<div class="col-5 col-xl-5 col-md-12 text-end">
<h2 class="alt-font fw-600 text-dark-gray ls-minus-2px mb-0 counter" data-speed="2000" data-to="2010"></h2>
</div>
<div class="col-7 col-xl-7 col-md-12 last-paragraph-no-margin text-md-end text-xl-start">
<span class="fs-20 text-dark-gray fw-600 alt-font">Crafto founded</span>
<p>Founded a company</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-5 col-xl-5 col-md-12 text-end">
<h2 class="alt-font fw-600 text-dark-gray ls-minus-2px mb-0 counter" data-speed="2000" data-to="2014"></h2>
</div>
<div class="col-7 col-xl-7 col-md-12 last-paragraph-no-margin text-md-end text-xl-start">
<span class="fs-20 text-dark-gray fw-600 alt-font">Expand team</span>
<p>Opportunity to expand</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-4 text-center animation-float sm-mb-65px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;scale&quot;: [0, 1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<img class="border-radius-100 w-350px" src="images/demo-consulting-company-01.jpg" alt />
</div>
<div class="col-xl-4 col-lg-3 col-md-4" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row align-items-center mb-50px sm-mb-35px">
<div class="col-5 col-xl-5 col-md-12 text-end text-xl-end text-md-start">
<h2 class="alt-font fw-600 text-dark-gray ls-minus-2px mb-0 counter" data-speed="2000" data-to="2019"></h2>
</div>
<div class="col-7 col-xl-7 col-md-12 last-paragraph-no-margin">
<span class="fs-20 text-dark-gray fw-600 alt-font">Build new office</span>
<p>Building a new office</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-5 col-xl-5 col-md-12 text-end text-xl-end text-md-start">
<h2 class="alt-font fw-600 text-dark-gray ls-minus-2px mb-0 counter" data-speed="2000" data-to="2021"></h2>
</div>
<div class="col-7 col-xl-7 col-md-12 last-paragraph-no-margin">
<span class="fs-20 text-dark-gray fw-600 alt-font">Winning award</span>
<p>The power of winning</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="p-0 bg-dark-gray overflow-hidden">
<div class="container-fluid p-0">
<div class="row justify-content-center g-0">
<div class="col-lg-6 md-h-550px xs-h-400px overflow-hidden" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1000, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="h-100 cover-background" style="background-image: url('images/demo-consulting-07.jpg')"></div>
</div>
<div class="col-lg-6 col-md-10 ps-8 pe-8 pt-7 pb-7" 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;: 200, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="alt-font fw-500 text-white ls-minus-2px">Superior business consulting agency.</h2>
<p class="w-80 lg-w-100 mb-30px">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna aliqua ipsum dolor sit amet consectetur.</p>
<div class="icon-with-text-style-08 mb-15px">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon feature-box-icon-rounded w-45px h-45px rounded-circle border border-2 border-color-transparent-white-light box-shadow-large me-15px">
<i class="fa-solid fa-check icon-very-small text-white"></i>
</div>
<div class="feature-box-content">
<span class="fs-18 alt-font d-block text-white">Change all you have in your world.</span>
</div>
</div>
</div>
<div class="icon-with-text-style-08 mb-15px">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon feature-box-icon-rounded w-45px h-45px rounded-circle border border-2 border-color-transparent-white-light box-shadow-large me-15px">
<i class="fa-solid fa-check icon-very-small text-white"></i>
</div>
<div class="feature-box-content">
<span class="fs-18 alt-font d-block text-white">We develop good teams and leaders.</span>
</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-45px h-45px rounded-circle border border-2 border-color-transparent-white-light box-shadow-large me-15px">
<i class="fa-solid fa-check icon-very-small text-white"></i>
</div>
<div class="feature-box-content">
<span class="fs-18 alt-font d-block text-white">The business guru gives you the idea.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center">
<div class="row justify-content-center mb-2">
<div class="col-lg-7 text-center" data-anime="{ &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fw-600 ls-1px fs-16 alt-font d-inline-block text-uppercase mb-5px text-base-color">Work performance</span>
<h2 class="alt-font text-dark-gray fw-600 ls-minus-2px">Our expertise</h2>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 justify-content-center align-items-center" 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;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col md-mb-50px sm-mb-40px">
<div class="chart-percent mb-25px">
<span class="pie-chart-style-01 d-flex align-items-center justify-content-center text-center" data-line-width="7" data-percent="96" data-track-color="#f6d8cc" data-start-color="#f66c34" data-end-color="#f49a76">
<span class="percent d-flex align-items-center justify-content-center alt-font fs-40 ls-minus-2px text-dark-gray fw-600"></span>
</span>
</div>
<div class="chart-text text-center fs-20 alt-font text-dark-gray fw-600 mb-5px">Strategy consulting</div>
<p class="w-80 lg-w-90 sm-w-100 mx-auto mb-0 text-center">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
</div>
<div class="col md-mb-50px sm-mb-40px">
<div class="chart-percent mb-25px">
<span class="pie-chart-style-01 d-flex align-items-center justify-content-center text-center" data-line-width="7" data-percent="88" data-track-color="#f6d8cc" data-start-color="#f66c34" data-end-color="#f49a76">
<span class="percent d-flex align-items-center justify-content-center alt-font fs-40 ls-minus-2px text-dark-gray fw-600"></span>
</span>
</div>
<div class="chart-text text-center fs-20 alt-font text-dark-gray fw-600 mb-5px">Modeling analytics</div>
<p class="w-80 lg-w-90 sm-w-100 mx-auto mb-0 text-center">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
</div>
<div class="col">
<div class="chart-percent mb-25px">
<span class="pie-chart-style-01 d-flex align-items-center justify-content-center text-center" data-line-width="7" data-percent="90" data-track-color="#f6d8cc" data-start-color="#f66c34" data-end-color="#f49a76">
<span class="percent d-flex align-items-center justify-content-center alt-font fs-40 ls-minus-2px text-dark-gray fw-600"></span>
</span>
</div>
<div class="chart-text text-center fs-20 alt-font text-dark-gray fw-600 mb-5px">Operations careers</div>
<p class="w-80 lg-w-90 sm-w-100 mx-auto mb-0 text-center">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 md-mb-50px">
<div class="row">
<div class="col-sm-6 mt-30px xs-mt-0" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)" 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="bg-white border-radius-6px overflow-hidden box-shadow-double-large icon-with-text-style-05 transition-inner-all mb-30px">
<div class="feature-box hover-box dark-hover last-paragraph-no-margin">
<div class="content-slide-up content-scale pt-17 pb-17 ps-10 pe-10 sm-p-15">
<div class="feature-box-icon">
<i class="line-icon-Like icon-extra-large text-base-color mb-20px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fs-20 fw-600">Honorable</span>
<p class="lh-28 text-visible text-light-opacity w-80 mx-auto sm-w-100">Lorem ipsum is simply dummy text.</p>
</div>
<div class="feature-box-overlay bg-base-color"></div>
</div>
</div>
</div>
<div class="bg-white border-radius-6px overflow-hidden box-shadow-double-large icon-with-text-style-05 transition-inner-all xs-mb-30px">
<div class="feature-box hover-box dark-hover last-paragraph-no-margin">
<div class="content-slide-up content-scale pt-17 pb-17 ps-10 pe-10 sm-p-15">
<div class="feature-box-icon">
<i class="line-icon-Knight icon-extra-large text-base-color mb-20px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fs-20 fw-600">Analytics</span>
<p class="lh-28 text-visible text-light-opacity w-80 mx-auto sm-w-100">Lorem ipsum is simply dummy text.</p>
</div>
<div class="feature-box-overlay bg-base-color"></div>
</div>
</div>
</div>
</div>
<div class="col-sm-6" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" 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="bg-white border-radius-6px overflow-hidden box-shadow-double-large icon-with-text-style-05 transition-inner-all mb-30px">
<div class="feature-box hover-box dark-hover last-paragraph-no-margin">
<div class="content-slide-up content-scale pt-17 pb-17 ps-10 pe-10 sm-p-15">
<div class="feature-box-icon">
<i class="line-icon-MaleFemale icon-extra-large text-base-color mb-20px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fs-20 fw-600">Leadership</span>
<p class="lh-28 text-visible text-light-opacity w-80 mx-auto sm-w-100">Lorem ipsum is simply dummy text.</p>
</div>
<div class="feature-box-overlay bg-base-color"></div>
</div>
</div>
</div>
<div class="bg-white border-radius-6px overflow-hidden box-shadow-double-large icon-with-text-style-05 transition-inner-all mt-30px">
<div class="feature-box hover-box dark-hover last-paragraph-no-margin">
<div class="content-slide-up content-scale pt-17 pb-17 ps-10 pe-10 sm-p-15">
<div class="feature-box-icon">
<i class="line-icon-Bar-Chart2 icon-extra-large text-base-color mb-20px justify-content-center"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fs-20 fw-600">Production</span>
<p class="lh-28 text-visible text-light-opacity w-80 mx-auto sm-w-100">Lorem ipsum is simply dummy text.</p>
</div>
<div class="feature-box-overlay bg-base-color"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5 offset-lg-1 text-center text-lg-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="alt-font fw-600 text-dark-gray ls-minus-2px">Why choose our company services?</h2>
<p class="w-90 xs-w-100 mx-auto mx-lg-0">Lorem ipsum dolor amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam.</p>
<a href="demo-consulting-contact.html" class="btn btn-large btn-dark-gray btn-box-shadow mt-10px btn-round-edge">Get started now!</a>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray pt-0">
<div class="container">
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 text-center justify-content-center align-items-center clients-style-06" data-anime="{&quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col client-box text-center md-mb-40px">
<a href="demo-consulting-company.html#"><img src="images/logo-logitech.svg" class="h-40px" alt></a>
</div>
<div class="col client-box text-center md-mb-40px">
<a href="demo-consulting-company.html#"><img src="images/logo-amazon.svg" class="h-40px" alt></a>
</div>
<div class="col client-box text-center xs-mb-40px">
<a href="demo-consulting-company.html#"><img src="images/logo-walmart.svg" class="h-40px" alt></a>
</div>
<div class="col client-box text-center">
<a href="demo-consulting-company.html#"><img src="images/logo-yahoo.svg" class="h-40px" alt></a>
</div>
</div>
</div>
</section>
<footer class="footer-light p-0 position-relative">
<div id="particles-04" class="position-absolute h-100 top-0 left-0 z-index-minus-1 w-100" data-particle="true" data-particle-options="{&quot;particles&quot;: {&quot;number&quot;: {&quot;value&quot;: 5,&quot;density&quot;: {&quot;enable&quot;: true,&quot;value_area&quot;: 1000}},&quot;color&quot;:{&quot;value&quot;:[&quot;#b7b9be&quot;, &quot;#dd6531&quot;]},&quot;shape&quot;: {&quot;type&quot;: &quot;circle&quot;,&quot;stroke&quot;:{&quot;width&quot;:0,&quot;color&quot;:&quot;#000000&quot;}},&quot;opacity&quot;: {&quot;value&quot;: 0.5,&quot;random&quot;: false,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;speed&quot;: 1,&quot;sync&quot;: false}},&quot;size&quot;: {&quot;value&quot;: 8,&quot;random&quot;: true,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;sync&quot;: true}},&quot;move&quot;: {&quot;enable&quot;: true,&quot;speed&quot;:2,&quot;direction&quot;: &quot;right&quot;,&quot;random&quot;: false,&quot;straight&quot;: false}},&quot;interactivity&quot;: {&quot;detect_on&quot;: &quot;canvas&quot;,&quot;events&quot;: {&quot;onhover&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;repulse&quot;},&quot;onclick&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;push&quot;},&quot;resize&quot;: true}},&quot;retina_detect&quot;: false}"></div>
<div class="container">
<div class="row justify-content-center pt-7 sm-pt-50px">
<div class="col-7 col-lg-3 col-md-12 col-sm-6 text-md-center text-lg-start md-mb-30px">
<a href="demo-consulting.html" class="footer-logo mb-15px md-mb-20px d-inline-block"><img src="images/demo-consulting-logo-black.png" data-at2x="images/demo-consulting-logo-black@2x.png" alt></a>
<p class="mb-20px">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
<div class="elements-social social-icon-style-02">
<ul class="medium-icon dark icon-with-animation">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="col-5 col-lg-2 offset-xl-1 col-md-3 col-sm-6 md-mb-30px">
<span class="alt-font d-block text-dark-gray fw-600 mb-10px fs-19">Company</span>
<ul>
<li><a href="demo-consulting-company.html">Company</a></li>
<li><a href="demo-consulting-services.html">Services</a></li>
<li><a href="demo-consulting-process.html">Process</a></li>
<li><a href="demo-consulting-contact.html">Contact</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 xs-mb-30px">
<span class="alt-font d-block text-dark-gray fw-600 mb-10px fs-19">Get in touch</span>
<p class="mb-15px w-75 lg-w-85 sm-w-100">Broadway, 24th Floor New York, NY, 10013</p>
<p class="m-0"><span class="fw-600"><i class="feather icon-feather-phone-call text-dark-gray icon-small me-10px"></i></span><a href="tel:1800222000">1-800-222-000</a></p>
<p class="m-0"><span class="fw-600"><i class="feather icon-feather-mail text-dark-gray icon-small me-10px"></i></span><a href="cdn-cgi/l/email-protection.html#abc2c5cdc4ebcfc4c6cac2c585c8c4c6"><span class="__cf_email__" data-cfemail="cea7a0a8a18eaaa1a3afa7a0e0ada1a3">[email&#160;protected]</span></a></p>
</div>
<div class="col-xl-3 col-lg-4 col-md-5 col-sm-6">
<span class="alt-font d-block text-dark-gray fw-600 mb-10px fs-19">Newsletter</span>
<p class="sm-mb-20px">Subscribe our newsletter to get the latest news and updates.</p>
<div class="d-inline-block w-100 newsletter-style-02 position-relative">
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
<input class="bg-transparent border-color-extra-medium-gray w-100 form-control required" type="email" name="email" placeholder="Enter email address...">
<input type="hidden" name="redirect" value>
<button class="btn submit" aria-label="submit"><i class="icon feather icon-feather-mail icon-small text-base-color"></i></button>
<div class="form-results border-radius-4px pt-5px pb-5px ps-15px pe-15px fs-14 lh-22 mt-10px w-100 text-center position-absolute d-none"></div>
</form>
</div>
</div>
</div>
<div class="row justify-content-center align-items-center pt-5 sm-pt-30px">
<div class="col-12">
<div class="divider-style-03 divider-style-03-01 border-color-extra-medium-gray"></div>
</div>
<div class="col-lg-6 pt-25px pb-25px md-pt-0 fs-16 last-paragraph-no-margin order-2 order-lg-1 text-center text-lg-start"><p>&copy; 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-dark-gray fw-500">ThemeZaa</a></p></div>
<div class="col-lg-6 pt-25px pb-25px md-pb-5px fs-16 order-1 order-lg-2 text-center text-lg-end">
<ul class="footer-navbar md-lh-normal">
<li class="nav-item"><a href="demo-consulting-company.html#" class="nav-link">Privacy policy</a></li>
<li class="nav-item"><a href="demo-consulting-company.html#" class="nav-link">Terms and conditions</a></li>
<li class="nav-item"><a href="demo-consulting-company.html#" class="nav-link">Copyright</a></li>
</ul>
</div>
</div>
</div>
</footer>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-consulting-company.html#" class="scroll-top" aria-label="scroll">
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
</a>
</div>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>