?
áEÓê¤ÎïLwebshll2019
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- Author -->
<meta name="author" content="Themes Industry">
<!-- Description -->
<meta name="description" content="MegaOne is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose studio and portfolio HTML5 template with ready home page demos.">
<!-- Page Title -->
<title>Counters | MegaOne HTML5 Template</title>
<!-- Favicon -->
<link href="vendor/img/favicon.ico" rel="icon">
<!-- Bundle -->
<link rel="stylesheet" href="vendor/css/bundle.min.css">
<link href="vendor/css/LineIcons.min.css" rel="stylesheet">
<link href="vendor/css/line-awesome.min.css" rel="stylesheet">
<link href="vendor/css/megamenu.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="vendor/css/elements.css" rel="stylesheet">
</head>
<!-- Js Files -->
<script src="vendor/js/bundle.min.js"></script>
<script src="vendor/js/jquery.appear.js"></script>
<body>
<!-- Start Element Heading -->
<section id="elements" class="ui-element bg-light-gray">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-title wow fadeIn" data-wow-delay="300ms">
<div class="main-title-opacity-text"> <h1 class="d-flex justify-content-center">Elements </h1> </div>
<h1 class="color-purple heading-tooltip-number position-relative d-inline-block">Elements</h1>
<h2 class="color-black"> Counter UI Blocks </h2>
<p class="color-black font-weight-500 text-uppercase">Power up your pages with these elements. Each element comes with a variety of options for your choice.</p>
</div>
</div>
</div>
</div>
</section>
<!-- End Element Heading -->
<!-- Start Header -->
<header class="megamenu mega-elements pt-5">
<nav class="navbar navbar-top-default navbar-expand-lg static-nav transparent-bg fixed-menu">
<div class="container container-width">
<div id="menu" class="collapse navbar-collapse d-none d-lg-block mod-menu">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item"> <a href="elements-info.html" target="_blank" class="nav-link link">Info Blocks</a></li>
<li class="nav-item"> <a href="elements-team.html" target="_blank" class="nav-link link">Team Blocks</a></li>
<li class="nav-item"> <a href="index-elements-portfolio.html" target="_blank" class="nav-link link">Portfolio Blocks</a></li>
<li class="nav-item"> <a href="elements-pricing.html" target="_blank" class="nav-link link">Pricing Blocks</a></li>
<li class="nav-item mega-menu active"> <a href="javascript:void(0)" class="nav-link dropdown-arrow">Others <i class="fas fa-angle-down"></i></a>
<ul class="hide-cursor bg-white text-left">
<li class="p-0">
<ul>
<li> <a class="dropdown-items active" target="_blank" href="elements-counter.html">Counter Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-quote.html">Quote Blocks</a> </li>
</ul>
</li>
<li class="p-0">
<ul>
<li> <a class="dropdown-items" target="_blank" href="elements-footer.html">Footer Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-button.html">Button Blocks</a> </li>
</ul>
</li>
<li class="p-0">
<ul>
<li> <a class="dropdown-items" target="_blank" href="elements-testimonials.html">Testimonial Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-typography.html">Typography Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-blog.html">Blog Blocks</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- side menu open button -->
<a class="menu_bars d-inline-block d-lg-none menu-bars-setting" id="sidemenu_toggle">
<div class="menu-lines">
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</nav>
<!-- Side Menu -->
<div class="side-menu d-none">
<div class="inner-wrapper nav-icon">
<span class="btn-close link" id="btn_sideNavClose"></span>
<nav class="side-nav w-100">
<div class="position-relative">
<!-- Main Menu -->
<div class="navbar-nav side-main-menu">
<a class="nav-link" href="elements-info.html">Info Blocks</a>
<a class="nav-link" href="elements-team.html">Team Blocks</a>
<a class="nav-link" href="elements-quote.html">Portfolio Blocks</a>
<a class="nav-link" href="elements-quote.html">Pricing Blocks</a>
<a class="nav-link active sidenav-arrow multi-item1" href="javascript:void(0)">Others <i class="fas fa-angle-right"></i></a>
</div>
<!-- Home Section Sub Menu -->
<div class="navbar-nav sub-multi-item1">
<a class="nav-link sidenav-arrow item1" href="javascript:void(0)">Demos 1 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link sidenav-arrow item2" href="javascript:void(0)">Demos 2 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link sidenav-arrow item3" href="javascript:void(0)">Demos 3 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
</div>
<!-- Home Section Inner Menu -->
<div class="navbar-nav inner-multi-item1 item1">
<a class="nav-link" target="_blank" href="elements-blog.html">Testimonial Blocks</a>
<a class="nav-link" target="_blank" href="elements-counter.html">Typography Blocks</a>
<a class="nav-link" target="_blank" href="elements-button.html">Blog Blocks</a>
<a class="nav-link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
<div class="navbar-nav inner-multi-item1 item2">
<a class="nav-link" target="_blank" href="elements-testimonials.html">Footer Blocks</a>
<a class="nav-link" target="_blank" href="elements-footer.html">Button Blocks</a>
<a class="nav-link link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
<div class="navbar-nav inner-multi-item1 item3">
<a class="nav-link" target="_blank" href="index-elements-portfolio.html">Counter Blocks</a>
<a class="nav-link" target="_blank" href="elements-typography.html">Quote Blocks</a>
<a class="nav-link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
</div>
</nav>
<div class="side-footer text-white w-100">
<ul class="social-icons-simple">
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-facebook color-white"></i> </a> </li>
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-instagram color-white"></i> </a> </li>
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-twitter color-white"></i> </a> </li>
</ul>
<p class="text-white">© 2021 MegaOne. Made With Love by Themesindustry</p>
</div>
</div>
</div>
<a id="close_side_menu" href="javascript:void(0);"></a>
<!-- Side Menu -->
</header>
<!-- End Header -->
<!-- Start ui-block-01 -->
<section class="stats-sec ui-block-01">
<div class="container">
<div class="row">
<div class="col-12 stats-heading-area text-center">
<span class="sub-heading">Lorem ipsum is simply dummy text </span>
<h4 class="heading">AGENCY STATS & FACTS</h4>
<p class="text">
Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy. Lorem Ipsum has been the industry’s standard dummy. Lorem ipsum is simply dummy text of the printing and typesetting.
</p>
</div>
</div>
<div class="row circular-wrap text-center">
<div class="col-12 col-lg-4 wow bounceIn">
<div id="circle" class="circle" data-value="0.77">
<h6 class="counter-num">257%</h6>
</div>
<h4 class="darkcolor">Increase in Sales year on year</h4>
</div>
<div class="col-12 col-lg-4 wow bounceIn">
<div id="circletwo" class="circle" data-value="0.96">
<h6 class="counter-num">96%</h6>
</div>
<h4 class="darkcolor">Recommendation rate over the year</h4>
</div>
<div class="col-12 col-lg-4 wow bounceIn">
<div id="circlethree" class="circle" data-value="0.75">
<h6 class="counter-num">317%</h6>
</div>
<h4 class="darkcolor">New ventures we became part of</h4>
</div>
</div>
</div>
</section>
<!-- JavaScript -->
<script src="vendor/js/circle-progress.min.js"></script>
<script>
$(".stats-sec.ui-block-01 .circular-wrap").appear(function () {
$(".stats-sec.ui-block-01.ui-block-01 .circle").circleProgress({
size: 210,
lineCap: "round",
fill: {
gradient: ["#f71c52", "#554c86"]
},
});
});
$(".stats-sec.ui-block-01.ui-block-01 .circular-wrap.dark").appear(function () {
$('.stats-sec.ui-block-01 .myskill').circleProgress({
lineCap: "round",
size: 200,
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-01 -->
<hr>
<!-- Start ui-block-02 -->
<section class="bg-counters counter ui-block-02">
<div class="container">
<div class="row align-items-center text-center">
<div class="col-lg-4 col-md-4">
<div class="counters">
<h2 class="count">2010</h2>
<h4>Since We Started</h4>
</div>
</div>
<div class="col-lg-4 col-md-4 py-5 py-md-0">
<p class="center-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris arcu, lobortis id interdum vitae, interdum eget elit. </p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 bottom10">
<div class="counters">
<h2 class="count">395</h2>
<h4>Kitchens Designed</h4>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-02.counter .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-02 -->
<hr>
<!-- Start ui-block-03 -->
<section class="skill-sec ui-block-03">
<div class="container">
<div class="row">
<div class="col-12 col-lg-7 offset-lg-5 text-center text-lg-right">
<div class="skill-details">
<h6 class="sub-title main-color">Lorem ipsum is simply dummy text</h6>
<h2 class="title">Agency Stats & Facts </h2>
<p class="paragraph">Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy. Lorem Ipsum has been the industry’s standard dummy. Lorem ipsum is simply dummy text of the printing and typesetting.</p>
</div>
</div>
<div class="col-12">
<div class="skill-bars">
<ul class="text-left list-unstyled">
<!--Progress Bar-->
<li class="progress-item wow fadeInLeft">
<h6>Designing</h6>
<div class="progress bar" data-width="79%">
<div class="progress-bar rounded-left bg-warning bar-inner" role="progressbar"> <span>79%<i class="fas fa-caret-down"></i></span></div>
</div>
</li>
<!--Progress Bar-->
<li class="progress-item wow fadeInRight" data-wow-delay=".5s">
<h6>Elevation</h6>
<div class="progress bar" data-width="95%">
<div class="progress-bar rounded-left bg-warning bar-inner" role="progressbar"><span>95%<i class="fas fa-caret-down"></i></span></div>
</div>
</li>
<!--Progress Bar-->
<li class="progress-item wow fadeInLeft" data-wow-delay=".6s">
<h6>Sketching</h6>
<div class="progress bar" data-width="87%">
<div class="progress-bar rounded-left bg-warning bar-inner" role="progressbar"><span>87%<i class="fas fa-caret-down"></i></span></div>
</div>
</li>
<!--Progress Bar-->
<li class="progress-item wow fadeInRight" data-wow-delay=".7s">
<h6>Strategy</h6>
<div class="progress bar" data-width="57%">
<div class="progress-bar rounded-left bg-warning bar-inner" role="progressbar"><span>57%<i class="fas fa-caret-down"></i></span></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-03.skill-sec .bar").each(function(){
$(this).find(".bar-inner").animate({
width: $(this).attr("data-width")},2000)
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-03 -->
<hr>
<!-- Start ui-block-04 -->
<section class="stats-sec ui-block-04">
<div class="container">
<div class="row circular-wrap text-center">
<!-- First Circle -->
<div class="col-12 col-lg-4 wow bounceIn">
<div id="ui-block-04-circle" class="circle" data-value="0.77">
<h6 class="counter-num">257%</h6>
</div>
<h4 class="stats-heading">Web Design</h4>
<p class="stats-para">Lorem ipsum dolor sit amet.</p>
</div>
<!-- Second Circle -->
<div class="col-12 col-lg-4 wow bounceIn wrap-2">
<div id="ui-block-04-circle-two" class="circle" data-value="0.96">
<h6 class="counter-num">96%</h6>
</div>
<h4 class="stats-heading">Marketing</h4>
<p class="stats-para">Lorem ipsum dolor sit amet.</p>
</div>
<!-- Third Circle -->
<div class="col-12 col-lg-4 wow bounceIn">
<div id="ui-block-04-circle-circlethree" class="circle" data-value="0.75">
<h6 class="counter-num">317%</h6>
</div>
<h4 class="stats-heading">Clients Worldwide</h4>
<p class="stats-para">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</section>
<script src="vendor/js/circle-progress.min.js"></script>
<script>
$(".ui-block-04.stats-sec .circular-wrap").appear(function () {
$(".ui-block-04.stats-sec .circle").circleProgress({
size: 210,
lineCap: "round",
fill: {
gradient: ["#ffffff", "#ffffff"],
},
});
$("#ui-block-04-circle-two").circleProgress({
size: 210,
lineCap: "round",
fill: {
gradient: ["#d43030", "#d43030"],
},
});
});
$(".ui-block-04.stats-sec .circular-wrap.dark").appear(function () {
$('.ui-block-04.stats-sec .myskill').circleProgress({
lineCap: "round",
size: 200,
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-04 -->
<hr>
<!-- Start ui-block-05 -->
<section class="company-stats-section stats ui-block-05">
<div class="container">
<div class="row">
<div class="col-12 col-md-12">
<div class="row">
<!-- First Counter -->
<div class="col-12 col-md-3">
<div class="stats-block-inner text-center">
<i class="lni lni-bar-chart text-blue"></i>
<div class="stats-number-inner">
<span>700</span>+
</div>
<p class="paragraph">Projects Completed</p>
</div>
</div>
<!-- Second Counter -->
<div class="col-12 col-md-3">
<div class="stats-block-inner text-center">
<i class="lni lni-heart text-purple"></i>
<div class="stats-number-inner">
<span>4500</span>+
</div>
<p class="paragraph">Satisfied customers</p>
</div>
</div>
<!-- Third Counter -->
<div class="col-12 col-md-3">
<div class="stats-block-inner text-center">
<i class="lni lni-protection text-pink"></i>
<div class="stats-number-inner">
<span>9500</span>+
</div>
<p class="paragraph">Completed consultations</p>
</div>
</div>
<!-- Fourth Counter -->
<div class="col-12 col-md-3">
<div class="stats-block-inner text-center">
<i class="lni lni-blackboard text-blue"></i>
<div class="stats-number-inner">
<span>6000</span>+
</div>
<p class="paragraph">Carried out training</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-05.stats.company-stats-section").appear(function () {
$('.ui-block-05.stats .stats-number-inner span').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-05 -->
<hr>
<!-- Start ui-block-06 -->
<section class="counter bg-purple ui-block-06">
<div class="container position-relative">
<div class="row align-items-center">
<div class="col-12 col-md-6 wow slideInLeft" data-wow-duration="1s" data-wow-delay=".1s">
<div class="counter-content">
<h3 class="my-3">Our many years of experience <span> in numbers</span></h3>
<span class="underline"></span>
<p class="alt-font">We show you our professional achievements in numbers, which show the acquired skills and trust of many clients.</p>
</div>
</div>
<div class="col-12 col-md-6 text-center wow slideInRight" data-wow-duration="1s" data-wow-delay=".1s">
<div class="row mt-5 mt-md-0">
<!-- Counter -->
<div class="col-12 col-md-4">
<div class="parallax-box">
<i class="lni lni-handshake"></i>
<h2 class="count">4500</h2>
<h5>Satisfied customers</h5>
</div>
</div>
<!-- Counter -->
<div class="col-12 col-md-4">
<div class="parallax-box">
<i class="lni lni-world"></i>
<h2 class="count">9500</h2>
<h5>Tasks Completed</h5>
</div>
</div>
<!-- Counter -->
<div class="col-12 col-md-4">
<div class="parallax-box">
<i class="lni lni-tab"></i>
<h2 class="count">6000</h2>
<h5>Carried out training</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-06 .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-06 -->
<hr>
<!-- Start ui-block-07 -->
<section id="stats" class="stats bg-light-gray ui-block-07">
<div class="container">
<div class="row m-0">
<div class="col-12 col-md-10 offset-md-1 col-lg-7 offset-lg-0 text-left p-0 text-center text-lg-left">
<div class="stats-text wow slideInLeft">
<div class="home-text text-black">
<span class="sub-heading">Let us show you some stats</span>
<h4 class="heading mt-3 mb-4">We have done great stuff over the past few years.</h4>
<p class="text mb-3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected .</p>
</div>
</div>
</div>
<div class="col-12 col-lg-5 d-flex justify-content-end">
<div class="plant-img">
<img src="vendor/img/elements-img/counter-img/ui-block-07-counter.png" class="wow slideInRight" alt="img" data-wow-delay=".5s">
</div>
</div>
</div>
<div class="row padding-top-half">
<div class="col-12">
<div class="row">
<div class="col-12 col-md-4 wow fadeInUp">
<div class="stats-box d-flex">
<div class="stats-icon">
<i class="fas fa-users color-green"></i>
</div>
<div class="stats-box-text ml-4">
<h1 class="numbering">500</h1>
<p class="stat-sub-heading">Happy Clients</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mt-4 mt-md-0 wow fadeInUp" data-wow-delay=".2">
<div class="stats-box d-flex">
<div class="stats-icon">
<i class="fas fa-list color-blue"></i>
</div>
<div class="stats-box-text ml-4">
<h1 class="numbering">10740</h1>
<p class="stat-sub-heading">Lines of Code</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mt-4 mt-md-0 wow fadeInUp" data-wow-delay=".4">
<div class="stats-box d-flex">
<div class="stats-icon">
<i class="fas fa-check color-yellow"></i>
</div>
<div class="stats-box-text ml-4">
<h1 class="numbering">200</h1>
<p class="stat-sub-heading">Project Completed</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-07.stats .numbering').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-07 -->
<hr>
<!-- Start ui-block-08 -->
<section class="half-section p-0 bg-change bg-blue stats-sec ui-block-08">
<h2 class="d-none">heading</h2>
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-12 p-0 order-lg-2">
<div class="hover-effect">
<img alt="stats" src="vendor/img/elements-img/counter-img/ui-block-08-counter.jpg" class="about-img">
</div>
</div>
<div class="col-lg-6 col-md-12 p-lg-0">
<div class="split-container-setting stats style-three">
<div class="main-title mb-5 text-lg-left wow fadeIn" data-wow-delay="300ms">
<h5 class="font-18"> Check Our Skills </h5>
<h2> We can <b>make</b> better <b>things</b> for you </h2>
</div>
<ul class="text-left">
<li class="custom-progress">
<h6 class="font-18 mb-0 text-capitalize">business consulting <span class="float-right"><b class="font-secondary font-weight-500 numscroller">85</b>%</span></h6>
<div class="progress">
<div class="progress-bar bg-white" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</li>
<li class="custom-progress">
<h6 class="font-18 mb-0 text-capitalize">financial advicing<span class="float-right"><b class="font-secondary font-weight-500 numscroller">65</b>%</span></h6>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-white" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</li>
<li class="custom-progress">
<h6 class="font-18 mb-0 text-capitalize">brand consulting<span class="float-right"><b class="font-secondary font-weight-500 numscroller">70</b>%</span></h6>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-white" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</li>
<li class="custom-progress mb-0">
<h6 class="font-18 mb-0 text-capitalize">strategic consulting <span class="float-right"><b class="font-secondary font-weight-500 numscroller">95</b>%</span></h6>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-white" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-08.stats-sec .progress-bar").each(function () {
$(this).appear(function () {
$(this).animate({width: $(this).attr("aria-valuenow") + "%"}, 2000)
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-08 -->
<hr>
<!-- Start ui-block-09 -->
<section class="counter-section ui-block-09">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-3 counter num_counter wow fadeInUp" data-wow-delay="400ms">
<i class="far fa-chart-bar"></i>
<h5 class="timer count-title heading count-number" data-to="125" data-speed="1000">125</h5>
<p class="count-text ">Projects completed</p>
</div>
<div class="col-lg-3 counter num_counter wow fadeInDown" data-wow-delay="400ms">
<i class="far fa-star"></i>
<h2 class="timer count-title heading count-number" data-to="865" data-speed="1000">865</h2>
<p class="count-text ">Satisfied customers</p>
</div>
<div class="col-lg-3 counter num_counter wow fadeInUp" data-wow-delay="400ms">
<i class="far fa-thumbs-up"></i>
<h2 class="timer count-title heading count-number" data-to="510" data-speed="1000">510 </h2>
<p class="count-text ">Completed consultations</p>
</div>
<div class="col-lg-3 counter num_counter wow fadeInDown" data-wow-delay="400ms">
<i class="fas fa-chalkboard-teacher"></i>
<h2 class="timer count-title heading count-number" data-to="510" data-speed="1000">510 </h2>
<p class="count-text ">Carried out training</p>
</div>
</div>
<!-- Row-2 -->
<div class="row no-gutters counter-image">
<div class="col-lg-12 col-md-12 col-sm-12 counter-img wow fadeInUp" data-wow-delay="400ms">
<img src="vendor/img/elements-img/counter-img/ui-block-09-counter.png" alt="img">
</div>
</div>
<!-- Container-End -->
</div>
</section>
<script>
jQuery(window).scroll(startCounter);
function startCounter() {
var hT = jQuery('.ui-block-09.counter-section .num_counter').offset().top,
hH = jQuery('.ui-block-09.counter-section .num_counter').outerHeight(),
wH = jQuery(window).height();
if (jQuery(window).scrollTop() > hT + hH - wH) {
jQuery(window).off("scroll", startCounter);
jQuery('.ui-block-09.counter-section .count-number').each(function () {
var $this = jQuery(this);
jQuery({
Counter: 0
}).animate({
Counter: $this.text()
}, {
duration: 2000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter) + '+');
}
});
});
}
}
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-09 -->
<hr>
<!-- Start ui-block-10 -->
<section class="doctor-stats ui-block-10">
<div class="container">
<div class="row features">
<div class="col-12 col-lg-3 text-center wow fadeInUp upper-case" data-wow-delay=".3s">
<div class="counter-box">
<h3 class="count color-red font-weight-bold">865</h3>
<span>Total Cases</span>
</div>
</div>
<div class="col-12 col-lg-3 text-center wow fadeInUp upper-case" data-wow-delay=".4s">
<div class="counter-box">
<h3 class="count color-red font-weight-bold">510</h3>
<span>Skin Surgeries</span>
</div>
</div>
<div class="col-12 col-lg-3 text-center wow fadeInUp upper-case" data-wow-delay=".5s">
<div class="counter-box">
<h3 class="count color-red font-weight-bold">1350</h3>
<span>Hours of Work</span>
</div>
</div>
<div class="col-12 col-lg-3 text-center wow fadeInUp upper-case" data-wow-delay=".6s">
<div class="counter-box">
<h3 class="count color-red font-weight-bold">35</h3>
<span>Years experience</span>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-10 -->
<hr>
<!-- Start ui-block-11 -->
<section id="skill-sec" class="skill-sec ui-block-11">
<div class="row text-center text-lg-left no-gutters">
<div class="col-12 col-lg-6 skill-banner">
<div class="hover-effect">
<img src="vendor/img/elements-img/counter-img/ui-block-11-counter.png" alt="images">
</div>
</div>
<div class="col-12 col-lg-6 skill-detail center-block wow fadeInLeft d-flex align-items-center" data-wow-duration="2s">
<div class="inner-skill-wraper">
<div class="row no-gutters">
<div class="col-12 col-md-10 offset-md-1">
<p class="sub-heading"><span></span>Most flexible one page</p>
<h4 class="heading">A Digital University with perfect set of skills for everyone.</h4>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut posuere nisi est, sed ullamcorper nibh volutpat at. In rutrum, metus ut posuere gravida, tellus lacus faucibus lectus, sed cursus eros ligula non odio. Suspendisse volutpat sagittis sapien. Curabitur quis malesuada ipsum.
</p>
<div class="skill-bars">
<ul class="text-left list-unstyled">
<!--Progress Bar-->
<li class="progress-item">
<h6>Coding</h6>
<div class="progress bar rounded-pill" data-width="79%">
<div class="progress-bar rounded-pill bg-warning bar-inner" role="progressbar"> <span>79%</span></div>
</div>
</li>
<!--Progress Bar-->
<li class="progress-item">
<h6>Accuracy</h6>
<div class="progress bar rounded-pill" data-width="95%">
<div class="progress-bar rounded-pill bg-warning bar-inner" role="progressbar"><span>95%</span></div>
</div>
</li>
<!--Progress Bar-->
<li class="progress-item">
<h6>Planning</h6>
<div class="progress bar rounded-pill" data-width="87%">
<div class="progress-bar rounded-pill bg-warning bar-inner" role="progressbar"><span>87%</span></div>
</div>
</li>
</ul>
</div>
<a class="btn green-btn rounded-pill" href="javascript:void(0);">LEARN MORE
<span></span><span></span><span></span><span></span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-11 .bar").each(function(){
$(this).find(".bar-inner").animate({
width: $(this).attr("data-width")
},2000)
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-11 -->
<hr>
<!-- Start ui-block-12 -->
<section class="parallax bg-img1 stats ui-block-12">
<div class="bg-overlay bg-main opacity-7"></div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-check" aria-hidden="true"></i>
<h2 class="count">1800</h2>
<h5>Project Completed</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-flag" aria-hidden="true"></i>
<h2 class="count">125</h2>
<h5>Total Countries</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-globe" aria-hidden="true"></i>
<h2 class="count">5500</h2>
<h5>Users Worldwide</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-gift" aria-hidden="true"></i>
<h2 class="count">17</h2>
<h5>Award Winners</h5>
</div>
</div>
</div>
</div>
</section>
<script src="vendor/js/parallaxie.min.js"></script>
<script>
$('.ui-block-12.stats .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
$(".ui-block-12.stats .progress-bar").each(function () {
$(this).appear(function () {
$(this).animate({width: $(this).attr("aria-valuenow") + "%"}, 3000)
});
});
if ($(window).width() > 992) {
$(".ui-block-12.stats.parallax").parallaxie({
speed: 0.55,
offset: 0,
});
}
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-12 -->
<hr>
<!-- Start ui-block-13 -->
<section class="ui-block-13 stats">
<div class="container">
<div class="row">
<div class="container">
<div class="main-title style-two d-flex justify-content-md-around align-items-center flex-column flex-md-row text-center text-md-left wow fadeIn" data-wow-delay="300ms">
<div class="col-md-5 mb-4 mb-md-0">
<h5 class="mb-3"> Good And Healthy Life</h5>
<h2 class="pb-0"> We Served The Best <span class="family">Food</span> In Town</h2>
</div>
<div class="col-md-7 ml-md-4 pl-md-2">
<p class="mb-4">Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Quisque vitae sodales lectus. Nam porttitor justo sed mi finibus, vel tristique risus faucibus.</p>
<p>Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Quisque vitae sodales lectus..</p>
</div>
</div>
</div>
</div>
<div class="row padding-top">
<div class="col-12 my-auto">
<div class="row">
<div class="col-lg-6">
<div class="skills alt-font">
<div class="prog-item">
<p>Fresh & Organic</p>
<div class="skills-progress"><span class="bar-light" data-value="88%"></span></div>
</div>
<div class="prog-item">
<p>Easy Reservation</p>
<div class="skills-progress"><span class="bar-dark" data-value="78%"></span></div>
</div>
<div class="prog-item mb-lg-0">
<p>Quality Cuisine</p>
<div class="skills-progress"><span class="bar-light" data-value="94%"></span></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="skills alt-font">
<div class="prog-item">
<p>Professional Staff</p>
<div class="skills-progress"><span class="bar-dark" data-value="85%"></span></div>
</div>
<div class="prog-item">
<p>24/7 food Delivery</p>
<div class="skills-progress"><span class="bar-light" data-value="90%"></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-13.stats .skills-progress').appear(function () {
$(".ui-block-13.stats .skills-progress span").each(function () {
let myVal = $(this).attr('data-value');
$(this).css({
width: myVal
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-13 -->
<hr>
<!-- Start ui-block-14 -->
<section class="stats ui-block-14">
<div class="container">
<div class="row">
<div class="col-12 col-lg-6 text-center text-lg-left wow fadeInLeft" data-wow-delay=".8s">
<div class="heading-area">
<span class="sub-heading">Established since 1930.</span>
<h4 class="heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
</div>
</div>
<div class="col-12 col-lg-6 d-flex align-items-center text-center text-lg-left wow fadeInRight" data-wow-delay=".2s">
<div class="detail-area">
<p class="text">
Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Quisque vitae sodales lectus. Nam porttitor justo sed mi finibus.
</p>
</div>
</div>
</div>
<div class="row features">
<div class="col-12 col-md-6 col-lg-3 text-center wow fadeInUp" data-wow-delay=".3s">
<div class="counter-box">
<h3 class="count">653</h3>
<span>Players</span>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 text-center wow fadeInUp" data-wow-delay=".4s">
<div class="counter-box">
<h3 class="count">40</h3>
<span>Tournaments</span>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 text-center wow fadeInUp" data-wow-delay=".5s">
<div class="counter-box">
<h3 class="count">42</h3>
<span>Grounds</span>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 text-center wow fadeInUp" data-wow-delay=".6s">
<div class="counter-box">
<h3 class="count">420</h3>
<span>Awards</span>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-14.stats .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-14 -->
<hr>
<!-- Start ui-block-15 -->
<section class="half-section p-0 stats-bg stats ui-block-15">
<h2 class="d-none">heading</h2>
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-12 p-0 order-1 order-md-2">
<div class="hover-effect">
<img alt="blog" src="vendor/img/elements-img/counter-img/ui-block-15-1-counter.jpg" class="team-img">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="skill-box">
<div class="main-title mb-5 text-center text-lg-left main-title wow fadeIn" data-wow-delay="300ms">
<p class="font-weight-200 text-pink font-20">Check Our Skills</p>
<h2 class="margin-top main-font font-40 font-weight-normal text-white">We have best Creative <span class="d-block mt-1">skilled team.</span></h2>
</div>
<ul class="text-left">
<!-- First Bar -->
<li class="custom-progress text-white">
<h6 class="font-16 mb-0 text-capitalize">Business Consulting <span class="float-right"><b class="numscroller">85</b>%</span></h6>
<div class="progress">
<div class="progress-bar bg-pink" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</li>
<!-- Second Bar -->
<li class="custom-progress text-white">
<h6 class="font-16 mb-0 text-capitalize">Financial Advising<span class="float-right"><b class="numscroller">68</b>%</span></h6>
<div class="progress">
<div class="progress-bar bg-pink" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</li>
<!-- Third Bar -->
<li class="custom-progress text-white">
<h6 class="font-16 mb-0 text-capitalize">Brand Consulting <span class="float-right"><b class="numscroller">85</b>%</span></h6>
<div class="progress">
<div class="progress-bar bg-pink" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</li>
<!-- Fourth Bar -->
<li class="custom-progress mb-0 text-white">
<h6 class="font-16 mb-0">Strategic Consulting<span class="float-right"><b class="numscroller">95</b>%</span></h6>
<div class="progress">
<div class="progress-bar bg-pink" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-15.stats .progress-bar").each(function () {
$(this).appear(function () {
$(this).animate({width: $(this).attr("aria-valuenow") + "%"}, 2000)
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-15 -->
<hr>
<!-- Start ui-block-16 -->
<section class="stats-sec ui-block-16">
<div class="container">
<div class="row">
<div class="col-12 stats-heading-area text-center">
<span class="sub-heading">Lorem ipsum is simply dummy text </span>
<h4 class="heading">STUDIO STATS & FACTS</h4>
<p class="text">
Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy. Lorem Ipsum has been the industry’s standard dummy. Lorem ipsum is simply dummy text of the printing and typesetting.
</p>
</div>
</div>
<div class="row circular-wrap text-center">
<div class="col-12 col-lg-4 wow bounceIn">
<div class="circle" data-value="0.77">
<h6 class="counter-num">257%</h6>
</div>
<h4 class="darkcolor">Increase in Sales year on year</h4>
</div>
<div class="col-12 col-lg-4 wow bounceIn">
<div class="circle" data-value="0.96">
<h6 class="counter-num">96%</h6>
</div>
<h4 class="darkcolor">Recommendation rate over the year</h4>
</div>
<div class="col-12 col-lg-4 wow bounceIn">
<div class="circle" data-value="0.75">
<h6 class="counter-num">317%</h6>
</div>
<h4 class="darkcolor">New ventures we became part of</h4>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-16.stats-sec .circular-wrap").appear(function () {
$(".ui-block-16.stats-sec .circle").circleProgress({
size: 210,
lineCap: "round",
fill: {
gradient: ["#202020", "#202020"]
},
});
});
$(".ui-block-16.stats-sec .circular-wrap.dark").appear(function () {
$('.ui-block-16.stats-sec .myskill').circleProgress({
lineCap: "round",
size: 200,
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-16 -->
<hr>
<!-- Start ui-block-17 -->
<section class="skill-sec py-0 ui-block-17">
<div class="row text-center text-lg-left">
<div class="col-12 col-lg-6 skill-detail center-block wow fadeInLeft" data-wow-duration="2s">
<div class="row no-gutters">
<div class="col-12 col-md-10 offset-md-1">
<p class="sub-heading"><span></span>Most flexible one page</p>
<h4 class="heading">A Web Studio with perfect set of skills for everyone.</h4>
<p class="skill-detail-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut posuere nisi est, sed ullamcorper nibh volutpat at. In rutrum, metus ut posuere gravida, tellus lacus faucibus lectus, sed cursus eros ligula non odio. Suspendisse volutpat sagittis sapien. Curabitur quis malesuada ipsum.</p>
<div class="skill-bars">
<ul class="text-left list-unstyled">
<!--Progress Bar-->
<li class="progress-item">
<h6>Coding</h6>
<div class="progress bar rounded-pill" data-width="79%">
<div class="progress-bar rounded-pill bg-warning bar-inner" role="progressbar"> <span>79%</span></div>
</div>
</li>
<!--Progress Bar-->
<li class="progress-item">
<h6>Accuracy</h6>
<div class="progress bar rounded-pill" data-width="95%">
<div class="progress-bar rounded-pill bg-warning bar-inner" role="progressbar"><span>95%</span></div>
</div>
</li>
<!--Progress Bar-->
<li class="progress-item">
<h6>Planning</h6>
<div class="progress bar rounded-pill" data-width="87%">
<div class="progress-bar rounded-pill bg-warning bar-inner" role="progressbar"><span>87%</span></div>
</div>
</li>
</ul>
</div>
<a class="btn our-btn rounded-pill" href="javascript:void(0);">LEARN MORE</a>
</div>
</div>
</div>
<div class="col-12 col-lg-6 skill-banner">
<div class="hover-effect">
<img src="vendor/img/elements-img/counter-img/ui-block-17-counter.jpg" alt="images">
</div>
</div>
</div>
</section>
<script>
$(".ui-block-17.skill-sec .bar").each(function(){
$(this).find(".bar-inner").animate({
width: $(this).attr("data-width")
},2000)
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-17 -->
<hr>
<!-- Start ui-block-18 -->
<div class="stats-sec ui-block-18" style="background: url('vendor/img/elements-img/counter-img/ui-block-18-counter.png');">
<div class="container">
<div class="row">
<div class="col-12 text-center timeline-heading">
<span class="sub-heading">Join The Ceremony</span>
<h4 class="large-heading">Be Our Guest</h4>
<span class="fly-line"></span>
</div>
</div>
<ul class="text-center stats-content">
<li>
<div class="stats-li">
<i class="las la-users"></i>
<h6 class="num"><span class="counter" data-count="245">245</span></h6>
<h4 class="heading">Guests</h4>
</div>
</li>
<li>
<div class="stats-li">
<i class="las la-glass-cheers"></i>
<h6 class="num"><span class="counter" data-count="230">230</span></h6>
<h4 class="heading">Attend</h4>
</div>
</li>
<li>
<div class="stats-li">
<i class="las la-female"></i>
<h6 class="num"><span class="counter" data-count="87">87</span></h6>
<h4 class="heading">Bridesmaids</h4>
</div>
</li>
<li>
<div class="stats-li">
<i class="las la-user-tie"></i>
<h6 class="num"><span class="counter" data-count="70">70</span></h6>
<h4 class="heading">Groomsmen</h4>
</div>
</li>
</ul>
</div>
</div>
<!-- End ui-block-18 -->
<hr>
<!-- Start ui-block-19 -->
<section class="parallax bg-img1 stats ui-block-19">
<div class="bg-overlay bg-black opacity-5"></div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-check" aria-hidden="true"></i>
<h2 class="count">1800</h2>
<h5>Total Matches</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-flag" aria-hidden="true"></i>
<h2 class="count">125</h2>
<h5>Total Goals</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fas fa-donate" aria-hidden="true"></i>
<h2 class="count">5500</h2>
<h5>Team Donation</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fas fa-trophy" aria-hidden="true"></i>
<h2 class="count">17</h2>
<h5>Winners</h5>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-19.stats .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
if ($(window).width() > 992) {
$(".ui-block-19.stats.parallax").parallaxie({
speed: 0.55,
offset: 0,
});
}
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-19 -->
<hr>
<!-- Start ui-block-20 -->
<section class="ui-block-20 stats-sec">
<div class="container">
<div class="row my-4 my-md-0">
<!-- Counter -->
<div class="col-12 col-md-3">
<div class="parallax-box">
<h2 class="count">125</h2>
<h5>Happy Customers</h5>
</div>
</div>
<!-- Counter -->
<div class="col-12 col-md-3">
<div class="parallax-box">
<h2 class="count text-orange">865</h2>
<h5>Lines of Codes</h5>
</div>
</div>
<!-- Counter -->
<div class="col-12 col-md-3">
<div class="parallax-box">
<h2 class="count text-red">510</h2>
<h5>Project Completed</h5>
</div>
</div>
<!-- Counter -->
<div class="col-12 col-md-3">
<div class="parallax-box">
<h2 class="count">699</h2>
<h5>Satisfied Reviews</h5>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-20.stats-sec .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-20 -->
<hr>
<!-- Start ui-block-21 -->
<section class="ui-block-21 stats-sec">
<div class="container">
<div class="row align-items-lg-center">
<!-- Features Box-->
<div class="col-lg-5 pr-lg-5">
<div class="heading-area">
<h6 class="sub-title main-color">45+ Year Of Experience</h6>
<h2 class="title">Our Services & Skills</h2>
</div>
<!-- Progress Bar -->
<ul class="services-skill text-left">
<!--Progress Item-->
<li class="progress-item">
<h6>Development<span class="float-right"><b class="count">80</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h6>Development<span class="float-right"><b class="count">80</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h6>Web Design<span class="float-right"><b class="count">75</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h6>UI / UX Design<span class="float-right"><b class="count">75</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
</ul>
<!--Counters Area-->
<div class="counter-area">
<!-- Counter Item-->
<div class="counters">
<i class="lni-apartment c-icon"></i>
<!-- Content -->
<div class="content">
<h4 class="m-0"><span class="count">35</span>M</h4>
<p>Customer</p>
</div>
</div>
<!-- Counter Item-->
<div class="counters">
<i class="lni-calculator c-icon"></i>
<!-- Content -->
<div class="content">
<h4 class="m-0"><span class="count">70</span>K</h4>
<p>Projects</p>
</div>
</div>
</div>
</div>
<!-- Heading Area-->
<div class="col-lg-7">
<div class="services-about">
<img class="service-image" src="vendor/img/elements-img/counter-img/ui-block-21-counter.jpg" alt="image">
<div class="content">
<p>Any desktop publishing packages and web page is a editors now use Lorem Ipsum as their default model text, and a search for their infancy.
<br><br>
any desktop publishing packages and web page editors now use.</p>
<h5 class="mb-1">Harry Watson</h5>
<span>CEO, Abacus Studio</span>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-21.stats-sec .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
$(".ui-block-21.stats-sec .progress-bar").each(function () {
$(this).appear(function () {
$(this).animate({width: $(this).attr("aria-valuenow") + "%"}, 3000)
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-21 -->
<hr>
<!-- Start ui-block-22 -->
<section class="ui-block-22 counter">
<h2 class="d-none">as</h2>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="serial-box">
<span class="count">1538</span>
<div class="count-line "></div>
<p>Patients</p>
</div>
</div>
<div class="col-md-3">
<div class="serial-box">
<span class="count">1006</span>
<div class="count-line "></div>
<p>Cases</p>
</div>
</div>
<div class="col-md-3">
<div class="serial-box">
<span class="count">2115</span>
<div class="count-line "></div>
<p>Appointments</p>
</div>
</div>
<div class="col-md-3">
<div class="serial-box mb-0">
<span class="count">179</span>
<div class="count-line "></div>
<p>Doctor</p>
</div>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-22.counter").appear(function () {
$('.ui-block-22.counter .count').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 5000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-22 -->
<hr>
<!-- Start ui-block-23 -->
<section class="stats-sec ui-block-23">
<div class="container">
<div class="row">
<div class="col-12 stats-heading-area text-center">
<span class="sub-heading">Lorem ipsum is simply dummy text </span>
<h4 class="heading">DIGITAL MARKETING <span> & <span class="color">SEO EXPERTS</span></span></h4>
<p class="text">Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy. Lorem Ipsum has been the industry’s standard dummy.</p>
</div>
</div>
<div class="row circular-wrap text-center">
<div class="col-12 col-lg-4 wow bounceIn">
<div class="circle" data-value="0.77">
<h6 class="counter-num">257%</h6>
</div>
<h4 class="darkcolor">Increase in Sales year on year</h4>
</div>
<div class="col-12 col-lg-4 wow bounceIn">
<div class="circle" data-value="0.96">
<h6 class="counter-num">96%</h6>
</div>
<h4 class="darkcolor">Recommendation rate over the year</h4>
</div>
<div class="col-12 col-lg-4 wow bounceIn">
<div class="circle" data-value="0.75">
<h6 class="counter-num">317%</h6>
</div>
<h4 class="darkcolor">New ventures we became part of</h4>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-23.stats-sec .circular-wrap").appear(function () {
$(".ui-block-23.stats-sec .circle").circleProgress({
size: 210,
lineCap: "round",
fill: {
gradient: ["#fa2851", "#350d82"]
},
});
});
$(".ui-block-23.stats-sec .circular-wrap.dark").appear(function () {
$('.ui-block-23.stats-sec .myskill').circleProgress({
lineCap: "round",
size: 200,
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-23 -->
<hr>
<!-- Start ui-block-24 -->
<section class="parallax bg-img1 ui-block-24 stats-sec">
<div class="bg-overlay bg-light-black opacity-7"></div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="far fa-smile-beam" aria-hidden="true"></i>
<h2 class="count">1300</h2>
<h5>Happy Client</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fas fa-store-alt" aria-hidden="true"></i>
<h2 class="count">115</h2>
<h5>Total Branches</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-globe" aria-hidden="true"></i>
<h2 class="count">250</h2>
<h5>Treatments</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-gift" aria-hidden="true"></i>
<h2 class="count">102</h2>
<h5>Award Winners</h5>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-24.stats-sec .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
if ($(window).width() > 992) {
$(".ui-block-24.stats-sec.parallax").parallaxie({
speed: 0.55,
offset: 0,
});
}
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-24 -->
<hr>
<!-- Start ui-block-25 -->
<section class="counters ui-block-25">
<div class="container">
<div class="row">
<!--counter item-->
<div class="col-lg-3 col-sm-6 mb-3 mb-lg-0">
<div class="counter-item bg-blue">
<i class="fas fa-users"></i>
<h2 class="text-white"><span class="count">820</span>+</h2>
<p class="text-white">Happy Client</p>
</div>
</div>
<!--counter item-->
<div class="col-lg-3 col-sm-6 mb-3 mb-sm-0">
<div class="counter-item bg-blue">
<i class="fas fa-layer-group"></i>
<h2 class="text-white"><span class="count">6200</span>+</h2>
<p class="text-white">Carried out Training</p>
</div>
</div>
<!--counter item-->
<div class="col-lg-3 col-sm-6 mb-3 mb-sm-0">
<div class="counter-item bg-blue">
<i class="fas fa-list-ul"></i>
<h2 class="text-white"><span class="count">500</span>+</h2>
<p class="text-white">Completed Projects</p>
</div>
</div>
<!--counter item-->
<div class="col-lg-3 col-sm-6">
<div class="counter-item bg-blue">
<i class="fas fa-trophy"></i>
<h2 class="text-white"><span class="count">25</span>+</h2>
<p class="text-white">Digital Awards</p>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-25 .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-25 -->
<hr>
<!-- Start ui-block-26 -->
<section class="position-relative stats parallax ui-block-26">
<h2 class="d-none">heading</h2>
<div class="bg-overlay gradient-bg opacity-6"></div>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12 col-md-12 col-sm-12 text-center">
<div class="col-md-3 col-sm-6 w-xs-50 float-left wow bounceIn" data-wow-delay="500ms">
<div class="counter-item">
<i class="lni-crown" aria-hidden="true"></i>
<strong class="color-white numscroller"> 69 </strong>
<p class="color-white">Awards Won</p>
</div>
</div>
<div class="col-md-3 col-sm-6 w-xs-50 float-left wow bounceIn" data-wow-delay="500ms">
<div class="counter-item">
<i class="lni-user" aria-hidden="true"></i>
<strong class="color-white numscroller"> 780 </strong>
<p class="color-white">Employess</p>
</div>
</div>
<div class="col-md-3 col-sm-6 w-xs-50 float-left wow bounceIn" data-wow-delay="500ms">
<div class="counter-item">
<i class="lni-emoji-smile" aria-hidden="true"></i>
<strong class="color-white numscroller"> 456 </strong>
<p class="color-white">Happy Clients</p>
</div>
</div>
<div class="col-md-3 col-sm-6 w-xs-50 float-left wow bounceIn" data-wow-delay="500ms">
<div class="counter-item">
<i class="lni-alarm-clock" aria-hidden="true"></i>
<strong class="color-white numscroller"> 599 </strong>
<p class="color-white">Finished Projects</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-26.stats").appear(function () {
$('.ui-block-26.stats .numscroller').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 5000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
if ($(window).width() > 992) {
$(".ui-block-26.stats.parallax").parallaxie({
speed: 0.55,
offset: 0,
});
}
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-26 -->
<hr>
<!-- Start ui-block-27 -->
<section class="bg-light ui-block-27 stats">
<h2 class="d-none">heading</h2>
<div class="container">
<div class="row">
<div class="col-md-3 padding-50">
<div class="serial-box">
<span class="count">125</span>
<p >Trusted Clients</p>
</div>
</div>
<div class="col-md-3 padding-50">
<div class="serial-box">
<span class="count">865</span>
<p >Successful Cases</p>
</div>
</div>
<div class="col-md-3 padding-50">
<div class="serial-box">
<span class="count">510</span>
<p >Qualified Lawyers</p>
</div>
</div>
<div class="col-md-3">
<div class="serial-box">
<span class="count">1350</span>
<p >Honors & Awards</p>
</div>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-27.stats").appear(function () {
$('.ui-block-27.stats .count').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 5000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-27 -->
<hr>
<!-- Start ui-block-28 -->
<section class="parallax bg-img1 ui-block-28 stats">
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-check" aria-hidden="true"></i>
<h2 class="count">1800</h2>
<h5>Project Completed</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-flag" aria-hidden="true"></i>
<h2 class="count">125</h2>
<h5>Total Countries</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-globe" aria-hidden="true"></i>
<h2 class="count">5500</h2>
<h5>Users Worldwide</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="parallax-box text-white">
<i class="fa fa-gift" aria-hidden="true"></i>
<h2 class="count">17</h2>
<h5>Award Winners</h5>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-28.stats .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
if ($(window).width() > 992) {
$(".ui-block-28.stats.parallax").parallaxie({
speed: 0.55,
offset: 0,
});
}
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-28 -->
<hr>
<!-- Start ui-block-29 -->
<section class="text-center text-lg-left pr-lg-5 pl-lg-5 pr-3 pl-3 ui-block-29 stats">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 p-0">
<h2>FACTS & FIGURES</h2>
<span class="hr-line mt-4 mb-4 ml-lg-0"></span>
</div>
</div>
<div class="row wow fadeIn">
<!-- Counter-1 -->
<div class="col-lg-4 count-space">
<div class="ist-counter mb-3 mb-lg-0">
<span class="main-font number ml-0 count">1953</span>
<div class="count-text">
<span class="alt-font main-text">Apps & web</span>
<span class="main-font count-subtext">Project Development</span>
</div>
</div>
<div class="counters-line"></div>
</div>
<!-- Counter-2 -->
<div class="col-lg-4 count-space">
<div class="counters mb-3 mb-lg-0">
<span class="main-font number count">766</span>
<div class="count-text">
<span class="alt-font main-text">Happy Clients</span>
<span class="main-font count-subtext">Design Prototype</span>
</div>
</div>
<div class="counters-line"></div>
</div>
<!-- Counter-3 -->
<div class="col-lg-4 count-space">
<div class="counters">
<span class="main-font number count">36</span>
<div class="count-text">
<span class="alt-font main-text">Creative Awards</span>
<span class="main-font count-subtext">Project Development</span>
</div>
</div>
<div class="counters-line"></div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-29.stats .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 5000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-29 -->
<hr>
<!-- Start ui-block-30 -->
<section class="counter-section ui-block-30">
<div class="container">
<div class="row no-gutters counter-text">
<div class="col-lg-5 col-md-12 col-sm-12 wow fadeInLeft" data-wow-delay="300ms">
<h5 class="heading">We focus on</h5>
<h2 class="heading">Quality Eyewear</h2>
<p class="text">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. </p>
</div>
<div class="col-lg-1 col-md-0 col-sm-0"></div>
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="row text-center num_counter">
<div class="col-lg-4 col-md-12 col-sm-12 wow fadeInLeft" data-wow-delay="300ms">
<div class="counter">
<i class="fas fa-mobile-alt"></i>
<h5 class="timer count-number text count">1052</h5>
<p class="text">Online Orders</p>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 wow fadeInDown" data-wow-delay="300ms">
<div class="counter">
<i class="far fa-thumbs-up"></i>
<h5 class="timer count-number text count">9800</h5>
<p class="text">Satisfied Customers</p>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 wow fadeInRight" data-wow-delay="300ms">
<div class="counter">
<i class="far fa-star"></i>
<h5 class="timer count-number text count">3785</h5>
<p class="text ">Positive Feedbacks</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-30.counter-section .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-30 -->
<hr>
<!-- Start ui-block-31 -->
<section class="stats bg-light-gray ui-block-31">
<h2 class="d-none">heading</h2>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 text-center wow fadeIn" data-wow-delay="300ms">
<div class="main-title mb-md-5 wow fadeIn" data-wow-delay="300ms">
<h5> Look at our achievements </h5>
<h2> More Valued Facts </h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 stats-box mb-xs-2rem">
<div class="serial-box center-block wow zoomIn" data-wow-delay="400ms">
<i class="fa fa-smile" aria-hidden="true"></i>
<p class="pt-3 pb-3 numscroller">1391</p>
<h6 class="mb-0">Customers</h6>
</div>
</div>
<div class="col-md-4 col-sm-12 stats-box mb-xs-2rem">
<div class="serial-box center-block wow zoomIn" data-wow-delay="500ms">
<i class="fa fa-sticky-note" aria-hidden="true"></i>
<p class="pt-3 pb-3 numscroller">445</p>
<h6 class="mb-0">Total Web Pages</h6>
</div>
</div>
<div class="col-md-4 col-sm-12 stats-box mb-xs-2rem">
<div class="serial-box center-block wow zoomIn" data-wow-delay="600ms">
<i class="fa fa-trophy" aria-hidden="true"></i>
<p class="pt-3 pb-3 numscroller">133</p>
<h6 class="mb-0">Accolades Collect</h6>
</div>
</div>
<div class="col-md-4 col-sm-12 stats-box sm-mt-2rem mb-xs-2rem">
<div class="serial-box center-block wow zoomIn" data-wow-delay="700ms">
<i class="fa fa-code" aria-hidden="true"></i>
<p class="pt-3 pb-3 numscroller">775</p>
<h6 class="mb-0">Line of Code</h6>
</div>
</div>
<div class="col-md-4 col-sm-12 stats-box mt-md-2rem">
<div class="serial-box center-block wow zoomIn" data-wow-delay="800ms">
<i class="fa fa-podcast" aria-hidden="true"></i>
<p class="pt-3 pb-3 numscroller">555</p>
<h6 class="mb-0">Cups Of Coffee</h6>
</div>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-31.stats").each(function () {
$('.ui-block-31.stats .numscroller').appear(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 5000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-31 -->
<hr>
<!-- Start ui-block-32 -->
<section class="skill-sec ui-block-32 py-0">
<div class="row text-center text-lg-left">
<div class="col-12 col-lg-6 skill-detail center-block wow fadeInLeft" data-wow-duration="2s">
<div class="row no-gutters">
<div class="col-12 col-md-10 offset-md-1">
<p class="sub-heading"><span></span>Most Popular One Page</p>
<h4 class="heading">A Popular Agency & Perfect Business For Everyone.</h4>
<p class="skill-detail-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut posuere nisi est, sed ullamcorper nibh volutpat at. In rutrum, metus ut posuere gravida, tellus lacus faucibus lectus, sed cursus eros ligula non odio. Suspendisse volutpat sagittis sapien. Curabitur quis malesuada ipsum.
</p>
<div class="skill-bars">
<ul class="text-left list-unstyled">
<!--Progress Bar-->
<li class="progress-item">
<h6>Consulting</h6>
<div class="progress bar rounded-pill" data-width="90%">
<div class="progress-bar rounded-pill bg-warning bar-inner" role="progressbar"> <span>79%</span></div>
</div>
</li>
<!--Progress Bar-->
<li class="progress-item">
<h6>Accuracy</h6>
<div class="progress bar rounded-pill" data-width="95%">
<div class="progress-bar rounded-pill bg-warning bar-inner" role="progressbar"><span>95%</span></div>
</div>
</li>
<!--Progress Bar-->
<li class="progress-item">
<h6>Investment</h6>
<div class="progress bar rounded-pill" data-width="87%">
<div class="progress-bar rounded-pill bg-warning bar-inner" role="progressbar"><span>87%</span></div>
</div>
</li>
</ul>
</div>
<a class="btn our-btn rounded-pill" href="javascript:void(0)">LEARN MORE</a>
</div>
</div>
</div>
<div class="col-12 col-lg-6 skill-banner">
<div class="hover-effect">
<img src="vendor/img/elements-img/counter-img/ui-block-33-counter.jpg" alt="images">
</div>
</div>
</div>
</section>
<script>
$(".ui-block-32.skill-sec .bar").each(function(){
$(this).find(".bar-inner").animate({
width: $(this).attr("data-width")
},2000)
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-32 -->
<hr>
<!-- Start ui-block-33 -->
<section class="counter ui-block-33">
<div class="container">
<div class="row">
<div class="col-md-5 wow fadeInLeft text-center text-md-left">
<h3 class="text-capitalize num-conuter">Our many years of experience in numbers</h3>
<span class="hr-line gradient-bg1"></span>
<p class="pt-3 pb-0">We show you our professional achievements in numbers, which show the acquired skills and trust of many clients.</p>
</div>
<div class="col-md-7 text-center wow fadeInRight">
<div class="row">
<div class="col-md-4 icon-block pt-3 pt-md-0">
<div class="icon">
<i class="fa fa-home bluee"></i>
</div>
<div class="counters mt-3">
<h3 class="text-capitalize"><span class="count_nums num-scrolling num-conuter" data-to="2500" data-speed="2500">2500 </span><i class="Open-Sans">+</i></h3>
</div>
<p class="num-counts mb-5 mt-10 mb-md-0">Upgreat To Bigger Home</p>
</div>
<div class="col-md-4 icon-block">
<div class="icon">
<i class="fa fa-handshake bluee"></i>
</div>
<div class="counters mt-3">
<h3 class="text-capitalize"><span class="count_nums num-scrolling num-conuter" data-to="9500" data-speed="2500">9500</span><i class="Open-Sans">+</i></h3>
</div>
<p class="num-counts mb-5 mt-10 mb-md-0">Perfect & Good Dealing</p>
</div>
<div class="col-md-4 icon-block">
<div class="icon">
<i class="fa fa-user bluee"></i>
</div>
<div class="counters num-conuter mt-3">
<h3 class="text-capitalize"><span class="count_nums num-scrolling num-conuter" data-to="6000" data-speed="2500">6000</span><i class="Open-Sans">+</i></h3>
</div>
<p class="num-counts mt-10 mb-md-0">Satisfied Coutomers</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-33 -->
<hr>
<!-- Start ui-block-34 -->
<section class="counter-section ui-block-34">
<div class="container">
<h2 class="wow fadeInDown" data-wow-delay="300ms">Statistical Numbers</h2>
<p class="wow fadeInDown" data-wow-delay="300ms">Vivamus ut scelerisque tellus. Morbi egestas neque et lorem sodales faucibus. Etiam<br>efficitur vehicula commodo. Curabitur ac libero ullamcorper,</p>
<div class="row no-gutters">
<!-- Counter-1 -->
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 wow fadeInLeft" data-wow-delay="400ms">
<div class="counter">
<div class="media">
<i class="fas fa-chart-bar"></i>
<div class="media-body">
<span class="timer count-title count-number count">548</span>
<p>Projects Completed</p>
</div>
</div>
</div>
</div>
<!-- Counter-2 -->
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 wow fadeInLeft" data-wow-delay="400ms">
<div class="counter">
<div class="media">
<i class="far fa-clock"></i>
<div class="media-body">
<span class="timer count-title count-number count">1465</span>
<p>Working Hours</p>
</div>
</div>
</div>
</div>
<!-- Counter-3 -->
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 wow fadeInRight" data-wow-delay="400ms">
<div class="counter">
<div class="media">
<i class="far fa-star"></i>
<div class="media-body">
<span class="timer count-title count-number count">612</span>
<p>Positive Feedbacks</p>
</div>
</div>
</div>
</div>
<!-- Counter-4 -->
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 wow fadeInRight" data-wow-delay="400ms">
<div class="counter">
<div class="media">
<i class="far fa-heart"></i>
<div class="media-body">
<span class="timer count-title count-number count">735</span>
<p>Happy Clients</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-34.counter-section .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
})
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-34 -->
<hr>
<!-- Start ui-block-35 -->
<section class="bg-counter ui-block-35">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="serial-box">
<span class="count">2010</span>
<div class="count-line "></div>
<p >Since We Started</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="box mb-0">
<span class="count">395</span>
<div class="count-line "></div>
<p>Pets & Animal</p>
</div>
</div>
</div>
</div>
</section>
<script>
$(".ui-block-35.bg-counter").appear(function () {
$('.ui-block-35 .count').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 5000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-35 -->
<script src="vendor/js/megamenu.js"></script>
<script>
$ = jQuery.noConflict();
jQuery(window).on("load", function () {
"use strict";
$('.side-menu').removeClass('d-none');
});
jQuery(function ($) {
"use strict";
var $window = $(window);
var windowsize = $(window).width();
$(".scroll").on("click", function(event){
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - 40}, 1100);
});
if ($("#sidemenu_toggle").length) {
$("#sidemenu_toggle").on("click", function () {
$(".pushwrap").toggleClass("active");
$(".side-menu").addClass("side-menu-active"), $("#close_side_menu").fadeIn(700)
}), $("#close_side_menu").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $(this).fadeOut(200), $(".pushwrap").removeClass("active")
}), $(".side-nav .navbar-nav .nav-link").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $("#close_side_menu").fadeOut(200), $(".pushwrap").removeClass("active")
}), $("#btn_sideNavClose").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $("#close_side_menu").fadeOut(200), $(".pushwrap").removeClass("active")
})
}
});
</script>
</body>
</html>