<div class="container">
<h1 class="count">Counter</h1>
  <div class="row">
    
    <div class="col-md-3 counter-container">
      <div class="counter" data-target="50">0</div>
      <p class="count">Buildings Completed</p>
    </div>
    <div class="col-md-3 counter-container">
      <div class="counter" data-target="20">0</div>
      <p class="count">Projects Ongoing</p>
    </div>
    <div class="col-md-3 counter-container">
      <div class="counter" data-target="100">0</div>
      <p class="count">Happy Clients</p>
    </div>
    <div class="col-md-3 counter-container">
      <div class="counter" data-target="30">0</div>
      <p class="count">Team Members</p>
    </div>
  </div>
</div>








<script>
  // Function to animate the counter
  function animateCounter(counterElement) {
    const target = +counterElement.getAttribute('data-target');
    let count = 0;
    const animationDuration = 2000; // Duration in milliseconds
    const increment = Math.ceil(target / (animationDuration / 100)); // Calculate increment based on duration

    const updateCounter = () => {
      count += increment;
      if (count >= target) {
        count = target;
        clearInterval(counterInterval);
      }
      counterElement.textContent = count;
    };

    const counterInterval = setInterval(updateCounter, 10); // Update counter every 10 milliseconds
  }

  // Function to check if an element is in viewport
  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  // Function to handle scroll event
  function handleScroll() {
    const counters = document.querySelectorAll('.counter');
    counters.forEach(counter => {
      if (isInViewport(counter) && !counter.getAttribute('data-counted')) {
        animateCounter(counter);
        counter.setAttribute('data-counted', 'true');
      }
    });
  }

  // Add event listener for scroll
  window.addEventListener('scroll', handleScroll);

  // Initial check on page load
  handleScroll();
 </script>