
<div class="numeros">
	<div class="container">
	  <div class="row text-center g-4">

		  <!--<div class="col-lg-2">
		  <div class="card p-4">
		   <h4>Nossos <br> números falam <br> por nós:</h4>
		  </div>
		</div>-->

		<div class="col-lg-3">
		  <div class="card p-4">
			<div class="counter" data-target="8">0</div><span class="counter-symbol">+</span>
			<div class="label">Anos de mercado</div>
		  </div>
		</div>

		<div class="col-lg-3">
		  <div class="card p-4">
			<div class="counter" data-target="320">0</div><span class="counter-symbol">+</span>
			<div class="label">Clientes satisfeitos</div>
		  </div>
		</div>

		<div class="col-lg-3">
		  <div class="card p-4">
			<div class="counter" data-target="20">0</div><span class="counter-symbol">+</span>
			<div class="label">Profissionais capacitados</div>
		  </div>
		</div>

		<div class="col-lg-3">
		  <div class="card p-4">
			<div class="counter" data-target="300">0</div><span class="counter-symbol">+</span> <!-- Exemplo de número -->
			<div class="label">Serviços realizados</div>
		  </div>
		</div>

	  </div>


	</div>
</div>


<script>
  const counters = document.querySelectorAll('.counter');
  counters.forEach(counter => {
    counter.innerText = '0';

    const updateCounter = () => {
      const target = +counter.getAttribute('data-target');
      const count = +counter.innerText;

      const speed = 200; // menor = mais rápido
      const increment = target / speed;

      if(count < target) {
        counter.innerText = Math.ceil(count + increment);
        setTimeout(updateCounter, 10);
      } else {
        counter.innerText = target;
      }
    };

    updateCounter();
  });
</script>


