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

913 lines
50 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.html#" class="search-form-icon header-search-form" aria-label="search"><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#4e272028210e37213b3c2a21232f2720602d2123"><span class="__cf_email__" data-cfemail="0b62656d644b72647e796f64666a626525686466">[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="p-0 bg-dark-gray">
<div class="swiper lg-no-parallax full-screen md-h-600px sm-h-500px swiper-light-pagination ipad-top-space-margin magic-cursor drag-cursor" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;loop&quot;: true, &quot;parallax&quot;: true, &quot;speed&quot;: 1200, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.swiper-pagination-bullets&quot;, &quot;clickable&quot;: true }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper">
<div class="swiper-slide overflow-hidden">
<div class="cover-background position-absolute top-0 start-0 w-100 h-100" style="background-image:url('images/demo-startup-slider-01.jpg');" data-swiper-parallax="1000">
<div class="opacity-light bg-gradient-black-green"></div>
<div class="container h-100" data-swiper-parallax="-300">
<div class="row align-items-center justify-content-center h-100 text-center">
<div class="col-xl-7 col-lg-9 col-md-10 position-relative text-white">
<span data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,0.7], &quot;duration&quot;: 1500, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }"><span class="fw-300 fs-22 opacity-7 mb-15px d-inline-block">Creative solutions for everyone</span></span>
<span class="opacity-7 fs-80 xs-fs-60 alt-font fw-700 text-shadow-extra-large ls-minus-2px mb-45px sm-mb-30px xs-mb-20px d-inline-block swiper-parallax-fancy-text" data-fancy-text="{ &quot;effect&quot;: &quot;rotate&quot;, &quot;string&quot;: [&quot;We craft unique business ideas&quot;] }"></span>
<div data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [80, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 1000, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<a href="index.html" target="_blank" class="btn btn-large btn-gradient-emerald-blue-emerald-green btn-hover-animation-switch btn-round-edge btn-box-shadow me-20px xs-m-10px">
<span>
<span class="btn-text">Discover crafto</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>
<a href="index.html" target="_blank" class="btn btn-large btn-transparent-white-light border-1 btn-hover-animation btn-box-shadow btn-round-edge xs-m-10px">
<span>
<span class="btn-text">Get started now</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide overflow-hidden">
<div class="cover-background position-absolute top-0 start-0 w-100 h-100" style="background-image:url('images/demo-startup-slider-02.jpg');" data-swiper-parallax="1000">
<div class="opacity-light bg-gradient-black-green"></div>
<div class="container h-100" data-swiper-parallax="-300">
<div class="row align-items-center justify-content-center h-100 text-center">
<div class="col-xl-7 col-lg-9 col-md-10 position-relative text-white">
<span data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,0.7], &quot;duration&quot;: 1500, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }"><span class="fw-300 fs-22 opacity-7 mb-15px d-inline-block">Ideas and brainstorming</span></span>
<span class="opacity-7 fs-80 xs-fs-60 alt-font fw-700 text-shadow-extra-large ls-minus-2px mb-45px sm-mb-30px xs-mb-20px d-inline-block swiper-parallax-fancy-text" data-fancy-text="{ &quot;effect&quot;: &quot;rotate&quot;, &quot;string&quot;: [&quot;Business growth and solution&quot;] }"></span>
<span data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [80, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 500, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<a href="index.html" target="_blank" class="btn btn-large btn-gradient-emerald-blue-emerald-green btn-hover-animation-switch btn-round-edge btn-box-shadow me-20px xs-m-10px">
<span>
<span class="btn-text">Discover crafto</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>
<a href="index.html" target="_blank" class="btn btn-large btn-transparent-white-light border-1 btn-hover-animation btn-box-shadow btn-round-edge xs-m-10px">
<span>
<span class="btn-text">Get started now</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide overflow-hidden">
<div class="cover-background position-absolute top-0 start-0 w-100 h-100" style="background-image:url('images/demo-startup-slider-03.jpg');" data-swiper-parallax="1000">
<div class="opacity-light bg-gradient-black-green"></div>
<div class="container h-100" data-swiper-parallax="-300">
<div class="row align-items-center justify-content-center h-100 text-center">
<div class="col-xl-7 col-lg-9 col-md-10 position-relative text-white">
<span data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,0.7], &quot;duration&quot;: 1500, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }"><span class="fw-300 fs-22 opacity-7 mb-15px d-inline-block">Ideas and brainstorming</span></span>
<span class="opacity-7 fs-80 xs-fs-60 alt-font fw-700 text-shadow-extra-large ls-minus-2px mb-45px sm-mb-30px xs-mb-20px d-inline-block swiper-parallax-fancy-text" data-fancy-text="{ &quot;effect&quot;: &quot;rotate&quot;, &quot;string&quot;: [&quot;We safeguard your business&quot;] }"></span>
<span data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [80, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 500, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<a href="index.html" target="_blank" class="btn btn-large btn-gradient-emerald-blue-emerald-green btn-hover-animation-switch btn-round-edge btn-box-shadow me-20px xs-m-10px">
<span>
<span class="btn-text">Discover crafto</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>
<a href="index.html" target="_blank" class="btn btn-large btn-transparent-white-light border-1 btn-hover-animation btn-box-shadow btn-round-edge xs-m-10px">
<span>
<span class="btn-text">Get started now</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
</div>
</section>
<section class="background-position-center-top pb-2 sm-pb-50px position-relative z-index-1 sm-background-image-none" style="background-image: url('images/vertical-line-bg.svg')">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 md-mb-50px" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;perspective&quot;: [1200,1200], &quot;scale&quot;: [1.1, 1], &quot;rotateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="d-flex flex-column box-shadow-quadruple-large border-radius-8px overflow-hidden" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
<div class="row row-cols-1 row-cols-sm-2 justify-content-center m-0">
<div class="col p-10 lg-p-8 text-center border-bottom border-end xs-border-end-0 border-color-extra-medium-gray bg-white text-center last-paragraph-no-margin">
<h2 class="fw-500 ls-minus-1px text-dark-gray m-0">8M+</h2>
<p>Trusted user</p>
</div>
<div class="col p-10 lg-p-8 text-center border-bottom border-color-extra-medium-gray bg-white text-center last-paragraph-no-margin">
<h2 class="fw-500 ls-minus-1px text-dark-gray m-0">64K</h2>
<p>Telephonic talk</p>
</div>
<div class="col p-10 lg-p-8 text-center border-end xs-border-end-0 xs-border-bottom border-color-extra-medium-gray bg-white text-center last-paragraph-no-margin">
<h2 class="fw-500 ls-minus-1px text-dark-gray m-0">800</h2>
<p>Project completed</p>
</div>
<div class="col p-10 lg-p-8 text-center bg-white text-center last-paragraph-no-margin">
<h2 class="fw-500 ls-minus-1px text-dark-gray m-0">98%</h2>
<p>Positive feedback</p>
</div>
</div>
</div>
</div>
<div class="col-xl-5 offset-xl-1 col-lg-6 text-center text-lg-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:200, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row justify-content-center justify-content-lg-start">
<div>
<h3 class="alt-font fw-600 text-dark-gray ls-minus-1px shadow-none" data-shadow-animation="true" data-animation-delay="700">Grow business with crafto <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></h3>
</div>
<div class="col-sm-6 last-paragraph-no-margin xs-mb-20px">
<span class="alt-font fw-700 fs-18 text-dark-gray mb-5px d-inline-block">20 years experience</span>
<p class="w-90 xl-w-100 md-w-95 mx-auto mx-lg-0">We value our employees and stakeholders for new ideas or opinions.</p>
</div>
<div class="col-sm-6 last-paragraph-no-margin">
<span class="alt-font fw-700 fs-18 text-dark-gray mb-5px d-inline-block">Business solutions</span>
<p class="w-90 xl-w-100 md-w-95 mx-auto mx-lg-0">We are driving modern technology based digital solutions.</p>
</div>
<div class="col-md-11">
<div class="pt-15px pb-15px ps-30px pe-30px xs-p-15px bg-white border border-color-extra-medium-gray border-radius-6px mt-35px icon-with-text-style-08 text-center text-lg-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-gradient-emerald-blue-emerald-green align-middle"></i>
</div>
<div class="feature-box-content">
<span class="fs-18 fw-500 text-dark-gray d-block">Business transformation agency.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pt-0 background-position-center-top sm-background-image-none" style="background-image: url('images/vertical-line-bg.svg')">
<div class="container-fluid d-none d-md-block">
<div class="row">
<div class="p-0 overlap-section" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<img src="images/demo-startup-bg-01.png" alt>
</div>
</div>
</div>
<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">What we offers</span>
<h3 class="alt-font text-dark-gray fw-600 ls-minus-1px shadow-none" data-shadow-animation="true" data-animation-delay="1000">Explore the <span class="text-highlight fw-800">services<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-3 row-cols-sm-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;: 100, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col md-mb-30px">
<div class="border-radius-8px overflow-hidden box-shadow-quadruple-large services-box-style-03 last-paragraph-no-margin">
<div class="position-relative box-image">
<a href="demo-startup-services-details.html"><img src="images/demo-startup-01.jpg" alt></a>
<a href="demo-startup.html#" class="btn btn-very-small btn-rounded btn-dark-gray text-white btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 position-absolute right-30px top-30px text-uppercase">Research</a>
</div>
<div class="bg-white">
<div class="ps-65px pe-65px xl-ps-50px xl-pe-50px lg-ps-30px lg-pe-30px pt-30px pb-30px text-center">
<a href="demo-startup-services-details.html" class="d-inline-block fs-18 alt-font fw-700 text-dark-gray mb-5px">Research planning</a>
<p>Lorem ipsum simply dummy text of amet consectetur.</p>
</div>
<div class="d-flex justify-content-center border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px position-relative text-center">
<a href="demo-startup-services-details.html" class="btn btn-link btn-hover-animation-switch btn-very-small fw-700 text-dark-gray text-uppercase">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="col md-mb-30px">
<div class="border-radius-8px overflow-hidden box-shadow-quadruple-large services-box-style-03 last-paragraph-no-margin">
<div class="position-relative box-image">
<a href="demo-startup-services-details.html"><img src="images/demo-startup-02.jpg" alt></a>
<a href="demo-startup.html#" class="btn btn-very-small btn-rounded btn-dark-gray text-white btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 position-absolute right-30px top-30px text-uppercase">Business</a>
</div>
<div class="bg-white">
<div class="ps-65px pe-65px xl-ps-50px xl-pe-50px lg-ps-30px lg-pe-30px pt-30px pb-30px text-center">
<a href="demo-startup-services-details.html" class="d-inline-block fs-18 alt-font fw-700 text-dark-gray mb-5px">Business promotion</a>
<p>Lorem ipsum simply dummy text of amet consectetur.</p>
</div>
<div class="d-flex justify-content-center border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px position-relative text-center">
<a href="demo-startup-services-details.html" class="btn btn-link btn-hover-animation-switch btn-very-small fw-700 text-dark-gray text-uppercase">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="border-radius-8px overflow-hidden box-shadow-quadruple-large services-box-style-03 last-paragraph-no-margin">
<div class="position-relative box-image">
<a href="demo-startup-services-details.html"><img src="images/demo-startup-03.jpg" alt></a>
<a href="demo-startup.html#" class="btn btn-very-small btn-rounded btn-dark-gray text-white btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 position-absolute right-30px top-30px text-uppercase">Revenue</a>
</div>
<div class="bg-white">
<div class="ps-65px pe-65px xl-ps-50px xl-pe-50px lg-ps-30px lg-pe-30px pt-30px pb-30px text-center">
<a href="demo-startup-services-details.html" class="d-inline-block fs-18 alt-font fw-700 text-dark-gray mb-5px">Revenue generation</a>
<p>Lorem ipsum simply dummy text of amet consectetur.</p>
</div>
<div class="d-flex justify-content-center border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px position-relative text-center">
<a href="demo-startup-services-details.html" class="btn btn-link btn-hover-animation-switch btn-very-small fw-700 text-dark-gray text-uppercase">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-6 text-center md-mb-50px">
<figure class="position-relative m-0">
<div class="position-relative d-inline-block" data-anime="{ &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<img class="w-90 border-radius-5px animation-float" src="images/demo-startup-06.jpg" alt />
</div>
<figcaption class="position-absolute bg-white box-shadow-quadruple-large border-radius-5px bottom-50px xs-bottom-35px left-minus-30px md-left-minus-0px ps-50px pe-50px pt-35px pb-35px xs-p-20px w-320px xs-w-250px text-center last-paragraph-no-margin" data-anime="{ &quot;translateY&quot;: [50, 0], &quot;scale&quot;: [0.8,1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="icon-with-text-style-06">
<div class="bg-white feature-box feature-box-left-icon-middle">
<div class="feature-box-icon me-15px">
<i class="line-icon-Thumb icon-double-large text-gradient-emerald-blue-emerald-green"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<div class="alt-font fw-600 text-dark-gray lh-26">We provide quality services to customers.</div>
</div>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-5 offset-xl-1 col-lg-6 col-md-8">
<h3 class="fw-600 mb-60px md-mb-40px mt-20px text-dark-gray alt-font ls-minus-2px" data-anime="{ &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Understand and apply the <span class="fw-800">business process.</span></h3>
<div class="row row-cols-1" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-12 process-step-style-05 position-relative hover-box">
<div class="process-step-item d-flex">
<div class="process-step-icon-wrap position-relative">
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-60px w-60px fs-16 bg-gradient-emerald-blue-emerald-green fw-400 position-relative will-change-transform">
<span class="number position-relative z-index-1 text-white">01</span>
<div class="box-overlay bg-gradient-emerald-blue-emerald-green rounded-circle"></div>
</div>
<span class="progress-step-separator bg-extra-medium-gray"></span>
</div>
<div class="process-content ps-35px last-paragraph-no-margin mb-30px">
<span class="d-block fw-700 text-dark-gray mb-5px fs-18 alt-font">Research and strategy</span>
<p class="w-80 lg-w-90 sm-w-100">We spend enough time to uncover business goals and client needs.</p>
</div>
</div>
</div>
<div class="col-12 process-step-style-05 position-relative hover-box">
<div class="process-step-item d-flex">
<div class="process-step-icon-wrap position-relative">
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-60px w-60px fs-16 bg-gradient-emerald-blue-emerald-green fw-400 position-relative will-change-transform">
<span class="number position-relative z-index-1 text-white">02</span>
<div class="box-overlay bg-gradient-emerald-blue-emerald-green rounded-circle"></div>
</div>
<span class="progress-step-separator bg-extra-medium-gray"></span>
</div>
<div class="process-content ps-35px last-paragraph-no-margin mb-30px">
<span class="d-block fw-700 text-dark-gray mb-5px fs-18 alt-font">Development and scale</span>
<p class="w-80 lg-w-90 sm-w-100">We utilize our best talents to design digital products and services.</p>
</div>
</div>
</div>
<div class="col-12 process-step-style-05 position-relative hover-box">
<div class="process-step-item d-flex">
<div class="process-step-icon-wrap position-relative">
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-60px w-60px fs-16 bg-gradient-emerald-blue-emerald-green fw-400 position-relative will-change-transform">
<span class="number position-relative z-index-1 text-white">03</span>
<div class="box-overlay bg-gradient-emerald-blue-emerald-green rounded-circle"></div>
</div>
</div>
<div class="process-content ps-35px last-paragraph-no-margin">
<span class="d-block fw-700 text-dark-gray mb-5px fs-18 alt-font">Testing and evaluation</span>
<p class="w-80 lg-w-90 sm-w-100">Before the launch, our team test complete website thoroughly.</p>
</div>
</div>
</div>
</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">
<div class="col-xl-5 col-lg-6 last-paragraph-no-margin md-mb-30px" data-anime="{ &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h3 class="alt-font fw-600 ls-minus-2px text-dark-gray">We provide advanced<span class="fw-800 d-inline-block">Business solutions.</span></h3>
<p class="w-90 sm-w-100 d-inline-block">This model places a strong emphasis on ideas and creativity, leveraging advanced technologies and engaging with clients on a daily basis.</p>
</div>
<div class="col-lg-6 offset-xl-1 progress-bar-style-01 mt-30px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;translateX&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="progress mb-12 md-mb-60px bg-extra-medium-gray">
<div class="progress-bar-title d-inline-block text-dark-gray alt-font fs-16 fw-600">Value for results</div>
<div class="progress-bar bg-gradient-emerald-blue-emerald-green" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-label="Value for results">
<span class="progress-bar-percent text-center bg-dark-gray alt-font fs-11 lh-12 text-white">80%</span>
</div>
</div>
<div class="progress mb-12 md-mb-60px bg-extra-medium-gray">
<div class="progress-bar-title d-inline-block text-dark-gray alt-font fs-16 fw-600">Global experience</div>
<div class="progress-bar bg-gradient-emerald-blue-emerald-green" role="progressbar" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" aria-label="Global experience">
<span class="progress-bar-percent text-center bg-dark-gray alt-font fs-11 lh-12 text-white">87%</span>
</div>
</div>
<div class="progress bg-extra-medium-gray">
<div class="progress-bar-title d-inline-block text-dark-gray alt-font fs-16 fw-600">Expert perspective</div>
<div class="progress-bar bg-gradient-emerald-blue-emerald-green" role="progressbar" aria-valuenow="93" aria-valuemin="0" aria-valuemax="100" aria-label="Expert perspective">
<span class="progress-bar-percent text-center bg-dark-gray alt-font fs-11 lh-12 text-white">93%</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="background-position-center-top p-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">
<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.html#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup.html#"><img src="images/logo-pingdom.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup.html#"><img src="images/logo-paypal.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup.html#"><img src="images/logo-walmart.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup.html#"><img src="images/logo-logitech.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup.html#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup.html#"><img src="images/logo-pingdom.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-startup.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 position-relative overflow-hidden 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-xl-5 col-lg-6 col-md-10 md-mb-50px">
<div class="row row-cols-1 row-cols-lg-1">
<div class="col mb-35px ms-35px lg-ms-0" data-anime="{ &quot;translateX&quot;: [25, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 500, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="d-flex flex-column flex-sm-row align-items-center testimonials testimonials-style-07 border-radius-6px ps-45px pe-45px pt-35px pb-35px lg-p-30px bg-white box-shadow-quadruple-large text-center text-sm-start last-paragraph-no-margin" data-bottom-top="transform: translate3d(80px, 0px, 0px);" data-top-bottom="transform: translate3d(-80px, 0px, 0px);">
<div class="testimonials-author w-120px me-25px xs-me-0 xs-mb-20px flex-shrink-0">
<img class="rounded-circle me-15px xs-me-0" src="images/avtar-24.jpg" alt>
</div>
<div class="testimonials-content">
<p>Lorem ipsum dolor incididunt amet an labore dolore nostrud.</p>
<span class="fs-18 alt-font text-dark-gray fw-700 d-block mt-5px">Herman miller, ThemeZaa</span>
</div>
</div>
</div>
<div class="col" data-anime="{ &quot;translateX&quot;: [-25, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 500, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="d-flex flex-column flex-sm-row align-items-center testimonials testimonials-style-07 border-radius-6px ps-45px pe-45px pt-35px pb-35px lg-p-30px bg-white box-shadow-quadruple-large text-center text-sm-start last-paragraph-no-margin" data-bottom-top="transform: translate3d(-80px, 0px, 0px);" data-top-bottom="transform: translate3d(80px, 0px, 0px);">
<div class="testimonials-author w-120px me-25px xs-me-0 xs-mb-20px flex-shrink-0">
<img class="rounded-circle me-15px xs-me-0" src="images/avtar-25.jpg" alt>
</div>
<div class="testimonials-content">
<p>Lorem ipsum dolor incididunt amet an labore dolore nostrud.</p>
<span class="fs-18 alt-font text-dark-gray fw-700 d-block mt-5px">Matthew taylor, ThemeZaa</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-6 offset-xl-1 col-md-10 text-center text-lg-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h3 class="alt-font fw-600 ls-minus-2px text-dark-gray">Customer testimonial is simply an <span class="fw-800"> existing user.</span></h3>
<p class="d-inline-block">Over 12 years of experience we have been constantly providing excellent web design & development services which is best in-class experience for our clients.</p>
<a href="demo-startup-contact.html" class="btn btn-medium btn-gradient-emerald-blue-emerald-green btn-hover-animation-switch btn-round-edge btn-box-shadow mt-10px">
<span>
<span class="btn-text">Get started</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 align-items-center justify-content-center mt-7 sm-mt-12">
<div class="col-lg-12 col-md-10 text-center" data-anime="{ &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 600, &quot;staggervalue&quot;: 250, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h4 class="alt-font text-dark-gray d-block fw-600 ls-minus-1px shadow-none mb-0" data-shadow-animation="true" data-animation-delay="600">Join the <span class="text-highlight fw-800 ls-minus-3px">10000+<span class="bg-gradient-emerald-blue-emerald-green h-8px bottom-10px opacity-6 separator-animation"></span></span> reputed companies trusting us.</h4>
</div>
</div>
</div>
</section>
<section class="background-position-center-top position-relative overflow-hidden py-0 sm-background-image-none" style="background-image: url('images/vertical-line-bg.svg')">
<div class="skrollr-parallax mx-auto" data-bottom-top="width: 70%" data-center-top="width: 100%;" data-parallax-background-ratio="0.5" style="background-image: url('images/demo-startup-05.jpg')">
<div class="opacity-extra-medium bg-dark-gray"></div>
<div class="container">
<div class="row justify-content-center align-items-center one-third-screen">
<div class="col-xl-6 col-lg-8 text-center position-relative last-paragraph-no-margin parallax-scrolling-style-2">
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" aria-label="popup-video" class="position-relative d-inline-block text-center bg-gradient-emerald-blue-emerald-green rounded-circle video-icon-box video-icon-large popup-youtube mb-9 md-mb-6">
<span>
<span class="video-icon">
<i class="fa-solid fa-play text-white"></i>
<span class="video-icon-sonar">
<span class="video-icon-sonar-bfr bg-gradient-emerald-blue-emerald-green opacity-9"></span>
</span>
</span>
</span>
</a>
<span class="d-block fs-22 fw-300 text-white opacity-8 mb-10px">Work to ensure that your business prospers</span>
<h1 class="alt-font text-white fw-700 mb-20px ls-minus-2px text-shadow-extra-large">Reporting and business analysis</h1>
</div>
</div>
</div>
</div>
</section>
<section class="background-position-center-top position-relative sm-background-image-none" style="background-image: url('images/vertical-line-bg.svg')">
<div class="container">
<div class="row justify-content-center mb-1">
<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">Stay new updated</span>
<h3 class="alt-font text-dark-gray fw-600 ls-minus-1px shadow-none" data-shadow-animation="true" data-animation-delay="1000">Explore the <span class="text-highlight fw-800">news<span class="bg-gradient-emerald-blue-emerald-green h-8px bottom-10px opacity-6 separator-animation"></span></span></h3>
</div>
</div>
<div class="row">
<div class="col-12 px-0">
<ul class="blog-grid blog-wrapper grid-loading grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-double-extra-large" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1000, &quot;willchange&quot;: &quot;transform&quot;, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="grid-sizer"></li>
<li class="grid-item">
<div class="card border-0 border-radius-5px box-shadow-quadruple-large box-shadow-quadruple-large-hover">
<div class="blog-image">
<a href="demo-startup-blog-single-simple.html" class="d-block"><img src="images/demo-startup-blog-01.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-startup-blog.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-700">Agency</a>
</div>
</div>
<div class="card-body p-13 md-p-11">
<a href="demo-startup-blog-single-simple.html" class="card-title mb-15px alt-font fw-700 fs-18 lh-30 text-dark-gray text-dark-gray-hover d-inline-block">Build up healthy habits and strong peaceful life</a>
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
<div class="me-auto">
<span class="blog-date d-inline-block">30 August 2021</span>
<div class="d-inline-block author-name">By <a href="demo-startup-blog.html" class="text-dark-gray text-dark-gray-hover text-decoration-line-bottom fw-500">Den viliamson</a></div>
</div>
<div class="like-count">
<a href="demo-startup-blog-single-simple.html"><i class="fa-regular fa-heart text-base-color"></i><span class="text-dark-gray align-middle fw-500">25</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-0 border-radius-5px box-shadow-quadruple-large box-shadow-quadruple-large-hover">
<div class="blog-image">
<a href="demo-startup-blog-single-simple.html" class="d-block"><img src="images/demo-startup-blog-02.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-startup-blog.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-700">Luxurious</a>
</div>
</div>
<div class="card-body p-13 md-p-11">
<a href="demo-startup-blog-single-simple.html" class="card-title mb-15px alt-font fw-700 fs-18 lh-30 text-dark-gray text-dark-gray-hover d-inline-block">How to bring the season into your great marketing</a>
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
<div class="me-auto">
<span class="blog-date d-inline-block">28 August 2021</span>
<div class="d-inline-block author-name">By <a href="demo-startup-blog.html" class="text-dark-gray text-dark-gray-hover text-decoration-line-bottom fw-500">Hugh macleod</a></div>
</div>
<div class="like-count">
<a href="demo-startup-blog-single-simple.html"><i class="fa-regular fa-heart text-base-color"></i><span class="text-dark-gray align-middle fw-500">58</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-0 border-radius-5px box-shadow-quadruple-large box-shadow-quadruple-large-hover">
<div class="blog-image">
<a href="demo-startup-blog-single-simple.html" class="d-block"><img src="images/demo-startup-blog-03.jpg" alt /></a>
<div class="blog-categories">
<a href="demo-startup-blog.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-700">Business</a>
</div>
</div>
<div class="card-body p-13 md-p-11">
<a href="demo-startup-blog-single-simple.html" class="card-title mb-15px alt-font fw-700 fs-18 lh-30 text-dark-gray text-dark-gray-hover d-inline-block">Be the strong willed one the public relationship</a>
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
<div class="me-auto">
<span class="blog-date d-inline-block">26 August 2021</span>
<div class="d-inline-block author-name">By <a href="demo-startup-blog.html" class="text-dark-gray text-dark-gray-hover text-decoration-line-bottom fw-500">Walton smith</a></div>
</div>
<div class="like-count">
<a href="demo-startup-blog-single-simple.html"><i class="fa-regular fa-heart text-base-color"></i><span class="text-dark-gray align-middle fw-500">75</span></a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<div id="subscribe-popup" class="mfp-hide subscribe-popup">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-9 col-md-10 bg-white">
<div class="row position-relative box-shadow-quadruple-large">
<div class="col-lg-6 cover-background md-h-400px xs-h-300px" style="background-image:url('images/newsletter-popup-img-01.jpg');"></div>
<div class="col-lg-6 newsletter-popup p-8 pt-10 pb-10 lg-p-5 md-p-6 xs-p-8 position-relative">
<h4 class="d-inline-block alt-font ls-minus-1px fw-700 text-dark-gray mb-15px">Subscribe to the latest updates!</h4>
<p>Subscribe to our newsletters and get the latest business updates.</p>
<div class="d-inline-block w-100 newsletter-style-05 position-relative mb-20px">
<form action="email-templates/subscribe-newsletter.php" method="post">
<input class="input-medium w-100 border-radius-4px form-control required mb-15px" type="email" name="email" placeholder="Enter your email address" />
<input type="hidden" name="redirect" value>
<button type="submit" class="btn btn-medium btn-round-edge btn-dark-gray btn-box-shadow w-100 submit">Subscribe now!</button>
<div class="form-results border-radius-4px mt-10px lh-normal pt-10px pb-10px ps-15px pe-15px fs-16 w-100 text-center position-absolute z-index-1 d-none"></div>
</form>
</div>
<label for="newsletter-off" class="fs-15"><input class="w-auto me-10px position-relative top-1px p-0" type="checkbox" id="newsletter-off" name="newsletter-off">Don't show this popup again</label>
</div>
<button title="Close (Esc)" type="button" class="mfp-close text-dark-gray"></button>
</div>
</div>
</div>
</div>
</div>
<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" aria-label="logo"><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" aria-label="facebook"><i class="fa-brands fa-facebook-f"></i></a></li>
<li class="my-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank" aria-label="dribbble"><i class="fa-brands fa-dribbble"></i></a></li>
<li class="my-0"><a class="twitter" href="https://www.twitter.com" target="_blank" aria-label="twitter"><i class="fa-brands fa-twitter"></i></a></li>
<li class="my-0"><a class="instagram" href="https://www.instagram.com" target="_blank" aria-label="instagram"><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#452d20293505212a28242c2b6b262a28" class="text-white text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="1c7479706c5c7873717d7572327f7371">[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.html#" class="nav-link">Privacy policy</a></li>
<li><a href="demo-startup.html#" class="nav-link">Terms and conditions</a></li>
<li><a href="demo-startup.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.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>