Access_New/pages/demo-startup-who-we-are.html
2024-09-05 11:33:27 +05:45

617 lines
33 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/startup/startup.css" />
</head>
<body data-mobile-nav-style="classic">
<header>
<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-lg-0 me-auto">
<a class="navbar-brand" href="demo-startup.html">
<img src="images/demo-startup-logo-white.png" data-at2x="images/demo-startup-logo-white@2x.png" alt class="default-logo">
<img src="images/demo-startup-logo-black.png" data-at2x="images/demo-startup-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-startup-logo-black.png" data-at2x="images/demo-startup-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto 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" id="navbarNav">
<ul class="navbar-nav alt-font">
<li class="nav-item"><a href="demo-startup.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-startup-who-we-are.html" class="nav-link">Who we are</a></li>
<li class="nav-item dropdown dropdown-with-icon">
<a href="demo-startup-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-startup-services-details.html"><i class="line-icon-Money-Bag"></i>
<div class="submenu-icon-content">
<span>Research planning</span>
<p>Research and strategy</p>
</div>
</a>
</li>
<li>
<a href="demo-startup-services-details.html"><i class="line-icon-Cursor-Click2"></i>
<div class="submenu-icon-content">
<span>Business promotion</span>
<p>Development and scale</p>
</div>
</a>
</li>
<li>
<a href="demo-startup-services-details.html"><i class="line-icon-Bar-Chart"></i>
<div class="submenu-icon-content">
<span>Marketing strategy</span>
<p>Testing and evaluation</p>
</div>
</a>
</li>
<li>
<a href="demo-startup-services-details.html"><i class="line-icon-Environmental-3"></i>
<div class="submenu-icon-content">
<span>Business research</span>
<p>Research and strategy</p>
</div>
</a>
</li>
</ul>
</li>
<li class="nav-item"><a href="demo-startup-clients.html" class="nav-link">Clients</a></li>
<li class="nav-item"><a href="demo-startup-blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="demo-startup-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-startup-who-we-are.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-700 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-2 ps-50px pe-50px pt-4 pb-4 bg-white">
<div class="left-circle bg-gradient-emerald-blue-emerald-green"></div>
<span class="close-menu text-white bg-dark-gray"><i class="fa-solid fa-xmark"></i></span>
<div class="push-menu-wrapper" data-scroll-options="{ &quot;theme&quot;: &quot;dark&quot; }">
<div class="push-menu-header pt-10 pb-30 mb-30 d-block">
<h4 class="alt-font fw-500 text-white lh-42">Scalable business for <span class="text-decoration-line-bottom-medium fw-700">startups</span></h4>
</div>
<div class="push-menu-address pt-30 lg-pt-10">
<div class="icon-with-text-style-01 mb-15px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon me-15px">
<i class="feather icon-feather-map-pin text-dark-gray lh-inherit"></i>
</div>
<div class="feature-box-content">
<p class="w-90 lh-26">401 Broadway, 24th Floor New York, NY 10013.</p>
</div>
</div>
</div>
<div class="icon-with-text-style-01 mb-15px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon me-15px">
<i class="feather icon-feather-mail text-dark-gray lh-inherit"></i>
</div>
<div class="feature-box-content">
<a href="cdn-cgi/l/email-protection.html#731a1d151c330a1c0601171c1e121a1d5d101c1e"><span class="__cf_email__" data-cfemail="7e171018113e07110b0c1a11131f1710501d1113">[email&#160;protected]</span></a>
</div>
</div>
</div>
<div class="icon-with-text-style-01">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon me-15px">
<i class="feather icon-feather-phone-call text-dark-gray lh-inherit"></i>
</div>
<div class="feature-box-content">
<a href="tel:1800222000">1-800-222-000</a>
</div>
</div>
</div>
<div class="separator-line-1px w-100 bg-extra-medium-gray d-block mt-30px mb-30px"></div>
</div>
<div class="push-menu-social last-paragraph-no-margin">
<div class="elements-social social-text-style-01">
<ul class="medium-icon dark fw-500">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank">In.</a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank">Dr.</a></li>
</ul>
</div>
<p class="fs-14">&COPY; Copyright 2024 <a href="index.html" target="_blank">Crafto</a></p>
</div>
</div>
</div>
</header>
<section class="page-title-big-typography bg-dark-gray ipad-top-space-margin xs-py-0 cover-background background-position-center-top" style="background-image: url('images/demo-startup-who-we-are-title-bg.jpg')">
<div class="opacity-extra-medium bg-gradient-black-green"></div>
<div class="container">
<div class="row align-items-center justify-content-center small-screen">
<div class="col-xl-6 col-lg-7 col-sm-8 position-relative text-center page-title-extra-small" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 400, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div><h1 class="text-uppercase mb-15px alt-font text-white opacity-6 fw-500 ls-2px" data-fancy-text="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [50, 0], &quot;filter&quot;: [&quot;blur(20px)&quot;, &quot;blur(0px)&quot;], &quot;string&quot;: [&quot;About our business&quot;], &quot;duration&quot;: 400, &quot;delay&quot;: 0, &quot;speed&quot;: 50, &quot;easing&quot;: &quot;easeOutQuad&quot; }"></h1></div>
<h2 class="m-auto text-white alt-font text-shadow-double-large fw-700 w-90 xl-w-100" data-fancy-text="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [50, 0], &quot;filter&quot;: [&quot;blur(20px)&quot;, &quot;blur(0px)&quot;], &quot;string&quot;: [&quot;We are specialize in startups&quot;], &quot;duration&quot;: 400, &quot;delay&quot;: 0, &quot;speed&quot;: 50, &quot;easing&quot;: &quot;easeOutQuad&quot; }"></h2>
</div>
<div class="down-section text-center" data-anime="{ &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; }">
<a href="demo-startup-who-we-are.html#down-section" class="section-link">
<div class="text-white">
<i class="line-icon-Down icon-medium"></i>
</div>
</a>
</div>
</div>
</div>
</section>
<section id="down-section" class="background-position-center-top sm-background-image-none" style="background-image: url('images/vertical-line-bg.svg')">
<div class="container">
<div class="row align-items-center justify-content-center mb-8 xs-mb-50px">
<div class="col-lg-6 col-md-10 position-relative md-mb-50px sm-mb-30px" data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;direction&quot;: &quot;tb&quot;, &quot;color&quot;: &quot;#252840&quot;, &quot;duration&quot;: 1000, &quot;delay&quot;: 0 }">
<img class="w-100 border-radius-5px" src="images/demo-startup-who-we-are-01.jpg" alt>
</div>
<div class="col-xl-4 offset-lg-1 col-lg-5 col-md-10 text-center text-lg-start" 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; }">
<span class="alt-font text-uppercase fw-600 mb-15px d-inline-block ls-1px">About business</span>
<h3 class="alt-font fw-600 text-dark-gray ls-minus-1px shadow-none" data-shadow-animation="true" data-animation-delay="1500">We develop and create successful <span class="text-highlight fw-800">startup<span class="bg-gradient-emerald-blue-emerald-green h-8px bottom-10px opacity-6 separator-animation"></span></span> strategy.</h3>
<p class="mb-35px sm-mb-25px">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim veniam.</p>
<a href="demo-startup-services.html" class="btn btn-large btn-gradient-emerald-blue-emerald-green btn-hover-animation-switch btn-round-edge btn-box-shadow">
<span>
<span class="btn-text">Crafto services</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
<div class="row row-cols-1 row-cols-md-4 row-cols-sm-2 justify-content-center text-center" data-anime="{&quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0,1], &quot;translateX&quot;: [50, 0], &quot;duration&quot;: 800, &quot;delay&quot;:300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col last-paragraph-no-margin sm-mb-40px">
<h2 class="alt-font fw-900 text-dark-gray m-0">8M+</h2>
<p>Trusted user</p>
</div>
<div class="col last-paragraph-no-margin sm-mb-40px">
<h2 class="alt-font fw-900 text-dark-gray m-0">64K</h2>
<p>Telephonic talk</p>
</div>
<div class="col last-paragraph-no-margin xs-mb-40px">
<h2 class="alt-font fw-900 text-dark-gray m-0">9M+</h2>
<p>Project completed</p>
</div>
<div class="col last-paragraph-no-margin">
<h2 class="alt-font fw-900 text-dark-gray m-0">250</h2>
<p>Award winning</p>
</div>
</div>
</div>
</section>
<section class="cover-background" style="background-image: url('images/demo-startup-who-we-are-bg.jpg')">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-7 text-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;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="alt-font text-uppercase fw-600 d-inline-block ls-1px">Top performance</span>
<h3 class="alt-font text-dark-gray fw-600 ls-minus-1px shadow-none" data-shadow-animation="true" data-animation-delay="1000">Why <span class="text-highlight fw-800">choose<span class="bg-gradient-emerald-blue-emerald-green h-8px bottom-10px opacity-6 separator-animation"></span></span> us?</h3>
</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;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-04 transition-inner-all md-mb-30px">
<div class="feature-box bg-white box-shadow-quadruple-large box-shadow-quadruple-large-hover justify-content-start border-radius-5px overflow-hidden pt-18 pb-18 ps-14 pe-14 lg-p-12 h-100 last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="bi bi-chat-quote icon-extra-large text-gradient-emerald-blue-emerald-green mb-20px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fw-700 mb-5px fs-18">Friendly support</span>
<p>Lorem ipsum is simply dummy text printing.</p>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all md-mb-30px">
<div class="feature-box bg-white box-shadow-quadruple-large box-shadow-quadruple-large-hover justify-content-start border-radius-5px overflow-hidden pt-18 pb-18 ps-14 pe-14 lg-p-12 h-100 last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="bi bi-bar-chart-line icon-extra-large text-gradient-emerald-blue-emerald-green mb-20px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fw-700 mb-5px fs-18">Business growth</span>
<p>Lorem ipsum is simply dummy text printing.</p>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all xs-mb-30px">
<div class="feature-box bg-white box-shadow-quadruple-large box-shadow-quadruple-large-hover justify-content-start border-radius-5px overflow-hidden pt-18 pb-18 ps-14 pe-14 lg-p-12 h-100 last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="bi bi-megaphone icon-extra-large text-gradient-emerald-blue-emerald-green mb-20px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fw-700 mb-5px fs-18">Innovative idea</span>
<p>Lorem ipsum is simply dummy text printing.</p>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all">
<div class="feature-box bg-white box-shadow-quadruple-large box-shadow-quadruple-large-hover justify-content-start border-radius-5px overflow-hidden pt-18 pb-18 ps-14 pe-14 lg-p-12 h-100 last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="bi bi-briefcase icon-extra-large text-gradient-emerald-blue-emerald-green mb-20px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block alt-font text-dark-gray fw-700 mb-5px fs-18">Branding planning</span>
<p>Lorem ipsum is simply dummy text printing.</p>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
</div>
<div class="row mt-5 sm-mt-30px" data-anime="{ &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 600, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-12 text-center">
<div class="d-inline-block bg-dark-gray fw-600 text-white text-uppercase border-radius-30px ps-20px pe-20px fs-12 me-10px sm-m-10px">trust</div>
<div class="d-inline-block align-middle"><span class="fs-24 alt-font text-dark-gray d-block fw-600 ls-minus-1px mb-0">Join the 10000+ companies trusting crafto.</span></div>
</div>
</div>
</div>
</section>
<section class="background-position-center-top sm-background-image-none" style="background-image: url('images/vertical-line-bg.svg')">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-xxl-4 col-xl-5 col-lg-6 col-md-10 text-center text-lg-start" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="swiper slider-one-slide md-mb-50px sm-mb-40px text-slider-style-01" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-one-slide-pagination&quot;, &quot;clickable&quot;: true }, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper mb-30px">
<div class="swiper-slide">
<div class="alt-font text-uppercase text-base-color fw-600 mb-15px d-inline-block ls-1px">Our mission</div>
<h3 class="alt-font text-dark-gray mb-30px md-mb-25px fw-600 ls-minus-1px">We protect and supports your business.</h3>
<span class="d-inline-block w-95 md-w-100">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim veniam.</span>
</div>
<div class="swiper-slide">
<div class="alt-font text-uppercase text-base-color fw-600 mb-15px d-inline-block ls-1px">Our Vision</div>
<h3 class="alt-font text-dark-gray mb-30px md-mb-25px fw-600 ls-minus-1px">A business plan and performance ideas.</h3>
<span class="d-inline-block w-95 md-w-100">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim veniam.</span>
</div>
<div class="swiper-slide">
<div class="alt-font text-uppercase text-base-color fw-600 mb-15px d-inline-block ls-1px">Core value</div>
<h3 class="alt-font text-dark-gray mb-30px md-mb-25px fw-600 ls-minus-1px">The best solutions for your startup business.</h3>
<span class="d-inline-block w-95 md-w-100">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim veniam.</span>
</div>
</div>
<div class="d-flex justify-content-center justify-content-lg-start">
<div class="slider-one-slide-prev-1 text-dark-gray swiper-button-prev slider-navigation-style-04 border border-1 border-color-extra-medium-gray bg-white"><i class="fa-solid fa-arrow-left"></i></div>
<div class="slider-one-slide-next-1 text-dark-gray swiper-button-next slider-navigation-style-04 border border-1 border-color-extra-medium-gray bg-white"><i class="fa-solid fa-arrow-right"></i></div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 offset-xl-1 position-relative text-end md-mb-6 sm-mb-10 xs-mb-12">
<div class="text-end w-80 md-w-75 ms-auto" data-animation-delay="100" data-shadow-animation="true" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
<img src="images/demo-startup-who-we-are-02.jpg" alt class="border-radius-5px">
</div>
<div class="w-60 md-w-50 xs-w-55 overflow-hidden position-absolute left-15px bottom-minus-50px" data-shadow-animation="true" data-animation-delay="200" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<img src="images/demo-startup-who-we-are-03.jpg" alt class="border-radius-5px" />
</div>
</div>
</div>
</div>
</section>
<section class="background-position-center-top pt-0 sm-background-image-none" style="background-image: url('images/vertical-line-bg.svg')">
<div class="container">
<div class="row position-relative clients-style-08 pt-35px md-pt-10px">
<div class="col swiper text-center feather-shadow" data-slider-options="{ &quot;slidesPerView&quot;: 2, &quot;spaceBetween&quot;:0, &quot;speed&quot;: 4000, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination-2&quot;, &quot;clickable&quot;: false }, &quot;allowTouchMove&quot;: false, &quot;autoplay&quot;: { &quot;delay&quot;:0, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-four-slide-next-2&quot;, &quot;prevEl&quot;: &quot;.slider-four-slide-prev-2&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;992&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 3 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper marquee-slide">
<div class="swiper-slide">
<a href="demo-startup-who-we-are.html#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup-who-we-are.html#"><img src="images/logo-pingdom.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup-who-we-are.html#"><img src="images/logo-paypal.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup-who-we-are.html#"><img src="images/logo-walmart.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup-who-we-are.html#"><img src="images/logo-logitech.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup-who-we-are.html#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup-who-we-are.html#"><img src="images/logo-pingdom.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup-who-we-are.html#"><img src="images/logo-paypal.svg" class="h-40px xs-h-30px" alt /></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="background-position-center-top pt-0 sm-background-image-none" style="background-image: url('images/vertical-line-bg.svg')">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-7 text-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;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="alt-font text-uppercase fw-600 d-inline-block ls-1px">Core people</span>
<h3 class="alt-font text-dark-gray fw-600 ls-minus-1px shadow-none" data-shadow-animation="true" data-animation-delay="1000">Expert <span class="text-highlight fw-800">consultant<span class="bg-gradient-emerald-blue-emerald-green h-8px bottom-10px opacity-6 separator-animation"></span></span></h3>
</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;: [15, 0], &quot;translateX&quot;: [-15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col text-center team-style-01 md-mb-30px">
<figure class="mb-0 hover-box box-hover light-hover position-relative">
<img src="images/demo-startup-who-we-are-team-01.jpg" alt />
<figcaption class="w-100 p-30px bg-white box-shadow-quadruple-large">
<div class="position-relative z-index-1 overflow-hidden">
<span class="d-block alt-font fw-700 text-dark-gray lh-26 fs-18">Jeremy dupont</span>
<span class="text-light-opacity text-uppercase fs-15">Founder</span>
<div class="social-icon hover-text mt-20px lg-mt-10px">
<a href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f icon-small"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram icon-small"></i></a>
<a href="https://www.twitter.com/" target="_blank"><i class="fa-brands fa-twitter icon-small"></i></a>
<a href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble icon-small"></i></a>
</div>
</div>
<div class="box-overlay bg-white"></div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-01 md-mb-30px">
<figure class="mb-0 hover-box box-hover light-hover position-relative">
<img src="images/demo-startup-who-we-are-team-02.jpg" alt />
<figcaption class="w-100 p-30px bg-white box-shadow-quadruple-large">
<div class="position-relative z-index-1 overflow-hidden">
<span class="d-block alt-font fw-700 text-dark-gray lh-26 fs-18">Jessica dover</span>
<span class="text-light-opacity text-uppercase fs-15">Officer</span>
<div class="social-icon hover-text mt-20px lg-mt-10px">
<a href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f icon-small"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram icon-small"></i></a>
<a href="https://www.twitter.com/" target="_blank"><i class="fa-brands fa-twitter icon-small"></i></a>
<a href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble icon-small"></i></a>
</div>
</div>
<div class="box-overlay bg-white"></div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-01 xs-mb-30px">
<figure class="mb-0 hover-box box-hover light-hover position-relative">
<img src="images/demo-startup-who-we-are-team-03.jpg" alt />
<figcaption class="w-100 p-30px bg-white box-shadow-quadruple-large">
<div class="position-relative z-index-1 overflow-hidden">
<span class="d-block alt-font fw-700 text-dark-gray lh-26 fs-18">Herman miller</span>
<span class="text-light-opacity text-uppercase fs-15">Advisor</span>
<div class="social-icon hover-text mt-20px lg-mt-10px">
<a href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f icon-small"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram icon-small"></i></a>
<a href="https://www.twitter.com/" target="_blank"><i class="fa-brands fa-twitter icon-small"></i></a>
<a href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble icon-small"></i></a>
</div>
</div>
<div class="box-overlay bg-white"></div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-01">
<figure class="mb-0 hover-box box-hover light-hover position-relative">
<img src="images/demo-startup-who-we-are-team-04.jpg" alt />
<figcaption class="w-100 p-30px bg-white box-shadow-quadruple-large">
<div class="position-relative z-index-1 overflow-hidden">
<span class="d-block alt-font fw-700 text-dark-gray lh-26 fs-18">John parker</span>
<span class="text-light-opacity text-uppercase fs-15">Consultant</span>
<div class="social-icon hover-text mt-20px lg-mt-10px">
<a href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f icon-small"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram icon-small"></i></a>
<a href="https://www.twitter.com/" target="_blank"><i class="fa-brands fa-twitter icon-small"></i></a>
<a href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble icon-small"></i></a>
</div>
</div>
<div class="box-overlay bg-white"></div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<footer class="footer-dark bg-slate-blue p-0">
<div class="d-none d-md-flex">
<div class="overlap-section-one-fourth animation-float">
<img src="images/demo-startup-bg-01.png" alt>
</div>
</div>
<div class="container">
<div class="row justify-content-center pt-4 lg-pt-2 sm-pt-45px">
<div class="col-6 col-xl-3 col-lg-12 col-sm-6 last-paragraph-no-margin text-xl-start text-lg-center order-sm-1 lg-mb-50px sm-mb-35px">
<a href="demo-startup.html" class="footer-logo mb-20px md-mb-10px d-inline-block"><img src="images/demo-startup-logo-white.png" data-at2x="images/demo-startup-logo-white@2x.png" alt></a>
<p class="w-90 lg-w-40 md-w-100 mx-lg-auto mx-xl-0">Lorem ipsum amet adipiscing elit to eiusmod ad tempor incididunt enim.</p>
<div class="elements-social social-icon-style-02 mt-20px">
<ul class="small-icon light">
<li class="my-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li class="my-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
<li class="my-0"><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li class="my-0"><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-6 col-xl-2 col-lg-3 col-sm-4 xs-mb-35px order-sm-3 order-lg-2">
<span class="alt-font fw-500 d-block text-white mb-10px">Company</span>
<ul>
<li><a href="demo-startup-who-we-are.html">Who we are</a></li>
<li><a href="demo-startup-services.html">Our services</a><div class="bg-white-transparent-very-light fw-500 text-white lh-22 text-uppercase border-radius-30px ps-10px pe-10px fs-10 ms-10px d-inline-block align-middle">Hot</div></li>
<li><a href="demo-startup-clients.html">Our clients</a></li>
<li><a href="demo-startup-contact.html">Contact us</a></li>
</ul>
</div>
<div class="col-6 col-xl-2 col-lg-3 col-md-5 col-sm-4 xs-mb-35px order-sm-4 order-lg-3">
<span class="alt-font fw-500 d-block text-white mb-10px">Our services</span>
<ul>
<li><a href="demo-startup-services-details.html">Research planning</a></li>
<li><a href="demo-startup-services-details.html">Business promotion</a></li>
<li><a href="demo-startup-services-details.html">Marketing strategy</a></li>
<li><a href="demo-startup-services-details.html">Business campaign</a></li>
</ul>
</div>
<div class="col-6 col-xl-2 col-lg-3 col-md-3 col-sm-4 xs-mb-35px order-sm-5 order-lg-4">
<span class="alt-font fw-500 d-block text-white mb-10px">Need help?</span>
<span>Call us directly?</span>
<span class="d-block mb-15px"><a class="text-white" href="tel:1235678901">(123) 567 8901</a></span>
<span>Need support?</span>
<a href="cdn-cgi/l/email-protection.html#0b636e677b4b6f64666a626525686466" class="text-white text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="d1b9b4bda191b5bebcb0b8bfffb2bebc">[email&#160;protected]</span></a>
</div>
<div class="col-xl-3 col-lg-3 col-sm-6 md-mb-50px sm-mb-35px xs-mb-0 order-sm-2 order-lg-5">
<span class="alt-font fw-500 d-block text-white mb-10px">Subscribe our newsletter</span>
<p class="mb-20px xs-mb-10px">Subscribe our newsletter to get the latest news.</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="input-small bg-white-transparent-extra-light border-color-transparent form-control pe-50px ps-20px lg-ps-15px required" type="email" name="email" placeholder="Enter your email" />
<input type="hidden" name="redirect" value>
<button class="btn pe-20px submit" aria-label="submit"><i class="icon bi bi-envelope icon-small text-white"></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-35px">
<div class="col-12">
<div class="divider-style-03 divider-style-03-01 border-color-transparent-white-light"></div>
</div>
<div class="col-lg-5 pt-25px pb-25px md-pt-0 fs-16 order-2 order-lg-1 text-center text-lg-start last-paragraph-no-margin"><p>&copy; 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-white text-decoration-line-bottom">ThemeZaa</a></p></div>
<div class="col-lg-7 pt-25px pb-25px md-pb-5px fs-16 order-1 order-lg-2 text-center text-lg-end">
<ul class="footer-navbar sm-lh-normal">
<li><a href="demo-startup-who-we-are.html#" class="nav-link">Privacy policy</a></li>
<li><a href="demo-startup-who-we-are.html#" class="nav-link">Terms and conditions</a></li>
<li><a href="demo-startup-who-we-are.html#" class="nav-link">Copyright</a></li>
</ul>
</div>
</div>
</div>
</footer>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-startup-who-we-are.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>