<!DOCTYPE>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, 
initial-scale=1">
<style>
* {  box-sizing: border-box; }

body {  margin: 0; }
.counter_body-b{width: 95%; margin: auto;   }
.counter_body{  background:white ; float: left;  border-bottom:  3px solid #006A4E;  width: 100%; padding: 10px; position: relative;  margin-top: 1%;
 margin-bottom: 5%;}

.counter_b {  float: left;  width: 25%;  padding: 15px; text-align: center; border-right: 2px solid whitesmoke;}


.f{color: #006A4E; font-size:25px;}

.counter_b h4{  color: #006A4E; }

.counter_b h4{  color: #006A4E; }
/* Clear floats after the counter_b-bs  */
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width:600px) {
  .counter_body-b{width: 95%; margin: auto;    }
  .counter_body{  background:white ; float: left;  width: 100%; margin-top:1%; margin-bottom: 15%; }
  .counter_b {  width: 25%; float:left;  font-size: x-small;  }
   }

</style>
</head>
<body>


<div class="row">

<nav class="counter_body-b">
<nav class="counter_body">

  <div class="counter_b">
       <p><i class="fa fa-user-o f" ></i></p>
        <h3 data-target="5470" class="count">0</h3>
        <h4>Happy customers</h4>
  </div>
  
   <div class="counter_b">
      <p><i  class="fa fa-tint f" ></i></p>
      <h3 data-target="100" class="count">0</h3>
        <h4> Trust </h4>
  </div>


 <div class="counter_b">
  <p><i class="fa fa-check-circle-o f" ></i></p>       
        <h3 data-target="2900" class="count">0</h3>
        <h4>Customers served online</h4>
  </div>

  
  <div class="counter_b" style="border-right: 0px solid whitesmoke;">
        <p><i class="fa fa-thumbs-up f" ></i></p>
        <h3 data-target="100" class="count">0</h3>
        <h4>Care & Support</h4>
  </div>




</nav>
</nav>  


</div>

</body>

  <script>
      const counter_bs = document.querySelectorAll(".count");
const speed = 98;

counter_bs.forEach((counter_b) => {
  const updateCount = () => {
    const target = parseInt(+counter_b.getAttribute("data-target"));
    const count = parseInt(+counter_b.innerText);
    const increment = Math.trunc(target / speed);
    console.log(increment);

    if (count < target) {
      counter_b.innerText = count + increment;
      setTimeout(updateCount, 1);
    } else {
      count.innerText = target;
    }
  };
  updateCount();
});

  </script>


</html>
