<!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;   margin-top: 1%; }
.counter_body{  background:white ; float: left;  border-bottom:  3px solid #e69420;  width: 100%; padding: 10px; position: relative; margin-top: -10%;}

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


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

.counter_b h4{  color:#e69420 ; }

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

@media screen and (max-width:600px) {
  .counter_body-b{width: 96%; margin: auto;   margin-top: -10%; }
  .counter_body{  background:white ; float: left;  width: 100%; }
  .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-check-circle-o f" ></i></p>
        <h3 data-target="5675" class="count">0</h3>
        <h4> Happy Clients </h4>
  </div>

   <div class="counter_b">
         <p><i  class="fa fa-handshake-o f" ></i></p>
        <h3 data-target="99" class="count">0</h3>
        <h4> Support </h4>
  </div>
  
   <div class="counter_b">
        <p><i class="fa fa-lightbulb-o f" ></i></p>
        <h3 data-target="1360" class="count">0</h3>
        <h4> Tours Visit </h4>
  </div>

  
  <div class="counter_b" style="border-right: 0px solid whitesmoke;">
        <p><i class="fa fa-thumbs-o-up f" ></i></p>
        <h3 data-target="99" class="count">0</h3>
        <h4> Trust</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>
