title

Counter Sections

Counter Sections style 1
title
1500+
Customers
250+
Company
520+
Running Project
450+
Complete Project 
                  
                    <!-- start counters -->
                    <div id="counters" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-black-600 jarallax">
                      <!-- background parallax -->
                      <img class="jarallax-img" src="src/img-min/bg/bg3.jpg" alt="title">
                      <div class="absolute top-0 start-0 w-full h-full opacity-90 bg-primary-700" style="z-index:-1;"></div>

                      <div class="container xl:max-w-6xl mx-auto pyaieolaksj">
                        <div class="flex flex-wrap lsdfdfsdafd -mx-4 text-center uppercase">
                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="mjkldisyjal bg-white dark:bg-gray-800 rounded shadow relative mb-6">
                              <div class="text-4xl mb-1 text-primary-700 dark:text-gray-200">
                                <span class="counter">1500<span>+</span></span>
                              </div>
                              <small class="block uppercase text-primary-700 dark:text-gray-200">Customers</small>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="mjkldisyjal bg-white dark:bg-gray-800 rounded shadow relative mb-6">
                              <div class="text-4xl mb-1 text-primary-700 dark:text-gray-200">
                                <span class="counter">250<span>+</span></span>
                              </div>
                              <small class="block uppercase text-primary-700 dark:text-gray-200">Company</small>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="mjkldisyjal bg-white dark:bg-gray-800 rounded shadow relative mb-6">
                              <div class="text-4xl mb-1 text-primary-700 dark:text-gray-200">
                                <span class="counter">520<span>+</span></span>
                              </div>
                              <small class="block uppercase text-primary-700 dark:text-gray-200">Running Project</small>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="mjkldisyjal bg-white dark:bg-gray-800 rounded shadow relative mb-6">
                              <div class="text-4xl mb-1 text-primary-700 dark:text-gray-200">
                                <span class="counter">450<span>+</span></span>
                              </div>
                              <small class="block uppercase text-primary-700 dark:text-gray-200">Complete Project</small>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div><!-- end counters -->
Counter Sections style 2
1200
Customers
700
Company
20
Awards
450
Project 
                  
                    <!-- Counter start -->
                    <div id="counter" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-20">
                      <div class="container xl:max-w-6xl mx-auto pyaieolaksj">
                        <div class="flex flex-wrap lsdfdfsdafd -mx-4 text-center uppercase">
                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="flex pdskdmsdnjw jkuthslatgh mjkldisyjal bg-white dark:bg-gray-800 shadow rounded relative mb-6">
                              <!-- icon -->
                              <div class="text-center">
                                <!-- svg icons -->
                                <svg class="bi bi-person text-primary-700 mb-1 me-4 inline-block" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd"></path>
                                </svg>
                              </div>
                              <!-- text -->
                              <div class="text-start">
                                <div class="text-3xl leading-normal font-semibold mb-1 text-primary-700 dark:text-gray-200">
                                  <span class="counter">1200</span>
                                </div>
                                <small class="block uppercase text-primary-700 dark:text-gray-200">Customers</small>
                              </div>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="flex pdskdmsdnjw jkuthslatgh mjkldisyjal bg-white dark:bg-gray-800 shadow rounded relative mb-6">
                              <!-- icons -->
                              <div class="text-center">
                                <!-- svg icons -->
                                <svg class="bi bi-briefcase text-primary-700 mb-1 me-4 inline-block" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" d="M0 12.5A1.5 1.5 0 001.5 14h13a1.5 1.5 0 001.5-1.5v-6h-1v6a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5v-6H0v6z" clip-rule="evenodd"></path>
                                  <path fill-rule="evenodd" d="M0 4.5A1.5 1.5 0 011.5 3h13A1.5 1.5 0 0116 4.5v2.384l-7.614 2.03a1.5 1.5 0 01-.772 0L0 6.884V4.5zM1.5 4a.5.5 0 00-.5.5v1.616l6.871 1.832a.5.5 0 00.258 0L15 6.116V4.5a.5.5 0 00-.5-.5h-13zM5 2.5A1.5 1.5 0 016.5 1h3A1.5 1.5 0 0111 2.5V3h-1v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V3H5v-.5z" clip-rule="evenodd"></path>
                                </svg>
                              </div>
                              <!-- text -->
                              <div class="text-start">
                                <div class="text-3xl leading-normal font-semibold mb-1 text-primary-700 dark:text-gray-200">
                                  <span class="counter">700</span>
                                </div>
                                <small class="block uppercase text-primary-700 dark:text-gray-200">Company</small>
                              </div>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="flex pdskdmsdnjw jkuthslatgh mjkldisyjal bg-white dark:bg-gray-800 shadow rounded relative mb-6">
                              <!-- icon -->
                              <div class="text-center">
                                <!-- svg icons -->
                                <svg class="bi bi-award text-primary-700 mb-1 me-4 inline-block" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l-1.51-.229L8 1.126l-1.355.702-1.51.229-.684 1.365-1.086 1.072L3.614 6l-.25 1.506 1.087 1.072.684 1.365 1.51.229L8 10.874l1.356-.702 1.509-.229.684-1.365 1.086-1.072L12.387 6l.248-1.506-1.086-1.072-.684-1.365z" clip-rule="evenodd"></path>
                                  <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"></path>
                                </svg>
                              </div>
                              <!-- text -->
                              <div class="text-start">
                                <div class="text-3xl leading-normal font-semibold mb-1 text-primary-700 dark:text-gray-200">
                                  <span class="counter">20</span>
                                </div>
                                <small class="block uppercase text-primary-700 dark:text-gray-200">Awards</small>
                              </div>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="flex pdskdmsdnjw jkuthslatgh mjkldisyjal bg-white dark:bg-gray-800 shadow rounded relative mb-6">
                              <!-- icon -->
                              <div class="text-center">
                                <!-- svg icons -->
                                <svg class="bi bi-file-earmark-check text-primary-700 mb-1 me-4 inline-block" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M9 1H4a2 2 0 00-2 2v10a2 2 0 002 2h5v-1H4a1 1 0 01-1-1V3a1 1 0 011-1h5v2.5A1.5 1.5 0 0010.5 6H13v2h1V6L9 1z"></path>
                                  <path fill-rule="evenodd" d="M15.854 10.146a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-1.5-1.5a.5.5 0 01.708-.708l1.146 1.147 2.646-2.647a.5.5 0 01.708 0z" clip-rule="evenodd"></path>
                                </svg>
                              </div>
                              <!-- text -->
                              <div class="text-start">
                                <div class="text-3xl leading-normal font-semibold mb-1 text-primary-700 dark:text-gray-200">
                                  <span class="counter">450</span>
                                </div>
                                <small class="block uppercase text-primary-700 dark:text-gray-200">Project</small>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div><!-- end counter -->
Counter Sections style 3

7+

Years of Experience

7890+

Websites developed

1200+

Clients served

17

Team Members

                  
                    <div class="py-20 bg-gray-100 border-b border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700"></div>
                    <!-- counters start -->
                    <div class="relative -mt-32 lg:-mt-24 overflow-hidden">
                      <div class="container xl:max-w-6xl mx-auto pyaieolaksj">
                        <div class="mb-12 bg-primary-700 rounded-xl shadow">
                          <div class="flex flex-wrap lsdfdfsdafd -mx-4 pt-12">
                            <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                              <div class="pb-12">
                                <div class="text-center">
                                  <p class="text-3xl leading-normal font-semibold text-gray-100 mb-1"><span class="counter">7</span>+</p>
                                  <p class="text-lg leading-normal font-normal text-gray-200 mb-0">Years of Experience</p>
                                </div>
                              </div>
                            </div>
                            <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                              <div class="pb-12">
                                <div class="text-center">
                                  <p class="text-3xl leading-normal font-semibold text-gray-100 mb-1"><span class="counter">7890</span>+</p>
                                  <p class="text-lg leading-normal font-normal text-gray-200 mb-0">Websites developed</p>
                                </div>
                              </div>
                            </div>
                            <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                              <div class="pb-12">
                                <div class="text-center">
                                  <p class="text-3xl leading-normal font-semibold text-gray-100 mb-1"><span class="counter">1200</span>+</p>
                                  <p class="text-lg leading-normal font-normal text-gray-200 mb-0">Clients served</p>
                                </div>
                              </div>
                            </div>
                            <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                              <div class="pb-12">
                                <div class="text-center">
                                  <p class="text-3xl leading-normal font-semibold text-gray-100 mb-1"><span class="counter">17</span></p>
                                  <p class="text-lg leading-normal font-normal text-gray-200 mb-0">Team Members</p>
                                </div>
                              </div>
                            </div>
                          </div><!-- .row -->
                        </div>
                      </div>
                    </div>
                    <!-- end counters -->
Counter Sections style 4
1200
Customers
700
Company
20
Awards
450
Project 
                  
                    <!-- counters start -->
                    <div id="counter" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-white dark:bg-gray-800">
                      <div class="container xl:max-w-6xl mx-auto pyaieolaksj">
                        <div class="flex flex-wrap lsdfdfsdafd -mx-4 text-center uppercase">
                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="flex pdskdmsdnjw jkuthslatgh mjkldisyjal relative mb-6">
                              <!-- text -->
                              <div class="text-center">
                                <div class="text-3xl leading-normal font-semibold mb-1 text-primary-700 dark:text-gray-200">
                                  <span class="counter">1200</span>
                                </div>
                                <small class="block uppercase text-primary-700 dark:text-gray-200">Customers</small>
                              </div>
                              <!-- icon -->
                              <div class="text-center">
                                <!-- svg icons -->
                                <svg class="bi bi-person text-primary-700 mb-1 ms-4 inline-block" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd"></path>
                                </svg>
                              </div>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="flex pdskdmsdnjw jkuthslatgh mjkldisyjal relative mb-6">
                              <!-- text -->
                              <div class="text-center">
                                <div class="text-3xl leading-normal font-semibold mb-1 text-primary-700 dark:text-gray-200">
                                  <span class="counter">700</span>
                                </div>
                                <small class="block uppercase text-primary-700 dark:text-gray-200">Company</small>
                              </div>
                              <!-- icons -->
                              <div class="text-center">
                                <!-- svg icons -->
                                <svg class="bi bi-briefcase text-primary-700 mb-1 ms-4 inline-block" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" d="M0 12.5A1.5 1.5 0 001.5 14h13a1.5 1.5 0 001.5-1.5v-6h-1v6a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5v-6H0v6z" clip-rule="evenodd"></path>
                                  <path fill-rule="evenodd" d="M0 4.5A1.5 1.5 0 011.5 3h13A1.5 1.5 0 0116 4.5v2.384l-7.614 2.03a1.5 1.5 0 01-.772 0L0 6.884V4.5zM1.5 4a.5.5 0 00-.5.5v1.616l6.871 1.832a.5.5 0 00.258 0L15 6.116V4.5a.5.5 0 00-.5-.5h-13zM5 2.5A1.5 1.5 0 016.5 1h3A1.5 1.5 0 0111 2.5V3h-1v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V3H5v-.5z" clip-rule="evenodd"></path>
                                </svg>
                              </div>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="flex pdskdmsdnjw jkuthslatgh mjkldisyjal relative mb-6">
                              <!-- text -->
                              <div class="text-center">
                                <div class="text-3xl leading-normal font-semibold mb-1 text-primary-700 dark:text-gray-200">
                                  <span class="counter">20</span>
                                </div>
                                <small class="block uppercase text-primary-700 dark:text-gray-200">Awards</small>
                              </div>
                              <!-- icon -->
                              <div class="text-center">
                                <!-- svg icons -->
                                <svg class="bi bi-award text-primary-700 mb-1 ms-4 inline-block" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l-1.51-.229L8 1.126l-1.355.702-1.51.229-.684 1.365-1.086 1.072L3.614 6l-.25 1.506 1.087 1.072.684 1.365 1.51.229L8 10.874l1.356-.702 1.509-.229.684-1.365 1.086-1.072L12.387 6l.248-1.506-1.086-1.072-.684-1.365z" clip-rule="evenodd"></path>
                                  <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"></path>
                                </svg>
                              </div>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="flex pdskdmsdnjw jkuthslatgh mjkldisyjal relative mb-6">
                              <!-- text -->
                              <div class="text-center">
                                <div class="text-3xl leading-normal font-semibold mb-1 text-primary-700 dark:text-gray-200">
                                  <span class="counter">450</span>
                                </div>
                                <small class="block uppercase text-primary-700 dark:text-gray-200">Project</small>
                              </div>
                              <!-- icon -->
                              <div class="text-center">
                                <!-- svg icons -->
                                <svg class="bi bi-file-earmark-check text-primary-700 mb-1 ms-4 inline-block" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M9 1H4a2 2 0 00-2 2v10a2 2 0 002 2h5v-1H4a1 1 0 01-1-1V3a1 1 0 011-1h5v2.5A1.5 1.5 0 0010.5 6H13v2h1V6L9 1z"></path>
                                  <path fill-rule="evenodd" d="M15.854 10.146a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-1.5-1.5a.5.5 0 01.708-.708l1.146 1.147 2.646-2.647a.5.5 0 01.708 0z" clip-rule="evenodd"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div><!-- end counters -->
Counter Sections style 5
5,596,756 $
AD Spend
456,959,000
Impression
3,469,000
Click
350,078
Conversion 
                  
                    <!-- counters start -->
                    <div id="counter" class="relative pt-10 pb-6 md:pt-14 md:pb-10 bg-primary-700">
                      <div class="container xl:max-w-6xl mx-auto pyaieolaksj">
                        <div class="flex flex-wrap lsdfdfsdafd -mx-4 text-center uppercase">
                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="mjkldisyjal relative mb-6">
                              <div class="text-2xl leading-normal font-semibold text-gray-100 mb-1">
                                <span class="counter">5,596,756</span> <span>$</span>
                              </div>
                              <span class="block uppercase text-gray-100">AD Spend</span>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="mjkldisyjal relative mb-6">
                              <div class="text-2xl leading-normal font-semibold text-gray-100 mb-1">
                                <span class="counter">456,959,000</span>
                              </div>
                              <span class="block uppercase text-gray-100">Impression</span>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="mjkldisyjal relative mb-6">
                              <div class="text-2xl leading-normal font-semibold text-gray-100 mb-1">
                                <span class="counter">3,469,000</span>
                              </div>
                              <span class="block uppercase text-gray-100">Click</span>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/2 lg:w-1/4">
                            <div class="mjkldisyjal relative mb-6">
                              <div class="text-2xl leading-normal font-semibold text-gray-100 mb-1">
                                <span class="counter">350,078</span>
                              </div>
                              <span class="block uppercase text-gray-100">Conversion</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div><!-- end counter -->