<style>
  .counter-area {
    position: relative;
    padding: 100px 0;
    text-align: center;
    background: #fff;
    overflow: hidden;
  }
  .counter-area h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 60px;
  }
  .circle-container {
    position: relative;
    max-width: 1200px;
    height: 550px;
    margin: 0 auto;
  }
  .counter-block {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #000;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    font-size: 28px;
  }
  .counter-label {
    font-size: 14px;
    font-weight: normal;
    margin-top: 10px;
    max-width: 160px;
  }
  .bg-blue {
    background-color: #dde9ff;
    top: 60px;
    left: 80px;
  }
  .bg-green {
    background-color: #d5ffe6;
    top: 20px;
    right: 150px;
  }
  .bg-cyan {
    background-color: #d7f2f7;
    bottom: 20px;
    left: 200px;
  }
  .bg-orange {
    background-color: #ffe8d5;
    bottom: 0;
    right: 100px;
  }
  /* Sunburst SVG decorations */
  .sunburst {
    position: absolute;
    width: 240px;
    height: 240px;
    opacity: 0.2;
    z-index: 0;
  }
  .sunburst.blue {
    background: url('https://divihn.com/wp-content/themes/divihn/images/icon-bg1.svg') no-repeat center/contain;
    bottom: -20px;
    left: 0;
  }
  .sunburst.orange {
    background: url('https://divihn.com/wp-content/themes/divihn/images/icon-bg2.svg') no-repeat center/contain;
    top: 30px;
    right: 0;
  }
  /* Counter animation setup */
  .counter {
    display: flex;
    height: 50px;
    overflow: hidden;
    font-size: 36px;
    font-weight: bold;
    z-index: 1;
  }
  .counter-digit {
    position: relative;
    width: 24px;
    height: 50px;
    overflow: hidden;
  }
  .counter-digit ul {
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform 1s ease;
    transform: translateY(0);
  }
  .counter-digit ul li {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .counter-digit:nth-child(1) ul { transition-delay: 0s; }
  .counter-digit:nth-child(2) ul { transition-delay: 0.2s; }
  .counter-digit:nth-child(3) ul { transition-delay: 0.4s; }
  .counter-digit:nth-child(4) ul { transition-delay: 0.6s; }
  .counter-digit:nth-child(5) ul { transition-delay: 0.8s; }
  .counter-digit:nth-child(6) ul { transition-delay: 1s; }
  .counter-digit:nth-child(7) ul { transition-delay: 1.2s; }
  /* Responsive fix */
  @media (max-width: 768px) {
    .circle-container {
      height: auto;
    }
    .counter-block {
      position: relative;
      margin: 20px auto;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
    }
    .sunburst {
      display: none;
    }
  }
</style><div class="counter-area"><h2>Our presence</h2><!-- Decorative Background Shapes --><div class="sunburst blue">&nbsp;</div><div class="sunburst orange">&nbsp;</div><div class="circle-container"><!-- 400,000+ --><div class="counter-block bg-blue" data-number="400000"><div class="counter">&nbsp;</div><div class="counter-label">candidate profiles in our database</div></div><!-- 95%+ --><div class="counter-block bg-green" data-number="95"><div class="counter">&nbsp;</div><div class="counter-label">client retention</div></div><!-- 22+ --><div class="counter-block bg-cyan" data-number="22"><div class="counter">&nbsp;</div><div class="counter-label">years in service</div></div><!-- 4.77/5 --><div class="counter-block bg-orange" data-number="4.77"><div class="counter">&nbsp;</div><div class="counter-label">Client Satisfaction score in 2023</div></div></div></div><script>
  function buildCounterDigits(number, container) {
    const numStr = number.toString();
    container.innerHTML = '';
    numStr.split('').forEach((char, index) => {
      const digitContainer = document.createElement('div');
      digitContainer.className = 'counter-digit';
      const ul = document.createElement('ul');
      if (char === '.' || char === '+') {
        const li = document.createElement('li');
        li.textContent = char;
        ul.appendChild(li);
      } else {
        for (let i = 0; i <= 9; i++) {
          const li = document.createElement('li');
          li.textContent = i;
          ul.appendChild(li);
        }
      }
      digitContainer.appendChild(ul);
      container.appendChild(digitContainer);
    });
  }
  function animateCounters() {
    document.querySelectorAll('.counter-block').forEach(block => {
      const target = block.getAttribute('data-number');
      const counter = block.querySelector('.counter');
      buildCounterDigits(target, counter);
      target.split('').forEach((char, index) => {
        const digit = counter.children[index];
        if (!digit) return;
        const ul = digit.querySelector('ul');
        if (char === '.' || char === '+') return;
        const value = parseInt(char);
        const offset = value * 50;
        setTimeout(() => {
          ul.style.transform = `translateY(-${offset}px)`;
        }, 100);
      });
    });
  }
  document.addEventListener("DOMContentLoaded", animateCounters);
</script>