Progress Sections

                  
                    <!-- Progress start -->
                    <div id="progress" class="relative py-20 md:py-24 bg-white dark:bg-gray-800">
                      <div class="container xl:max-w-6xl mx-auto px-4">
                        <!-- section header -->
                        <header class="text-center mx-auto mb-12">
                          <h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">Top</span> Platforms</h2>
                          <hr class="block w-12 h-0.5 mx-auto my-5 bg-blue-700 border-blue-700">
                          <p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2">We use top digital advertising platforms</p>
                        </header><!-- end section header -->

                        <div class="flex flex-wrap flex-row -mx-4">
                          <div class="flex-shrink w-full max-w-full px-4 md:w-1/2 mb-6 md:mb-0">
                            <div class="flex flex-wrap flex-row -mx-4">
                              <!-- Vertical Progress Bar -->
                              <div class="flex-shrink w-1/4 px-4 max-w-full text-center">
                                <div class="flex flex-col flex-nowrap justify-end bg-gray-200 dark:bg-gray-700 h-48 rounded mb-4 overflow-hidden">
                                  <div class="relative bg-blue-700 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s" style="height:93%"><span class="w-full text-white pt-2 absolute left=0 right-0 py-1 font-semibold">93%</span></div>
                                </div>
                                <p class="text-lg leading-normal mb-2 font-normal text-gray-800">Google Ads</p>
                              </div>

                              <!-- Vertical Progress Bar -->
                              <div class="flex-shrink w-1/4 px-4 max-w-full text-center">
                                <div class="flex flex-col flex-nowrap justify-end bg-gray-200 dark:bg-gray-700 h-48 rounded mb-4 overflow-hidden">
                                  <div class="relative bg-blue-700 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s" style="height:83%"><span class="w-full text-white pt-2 absolute left=0 right-0 py-1 font-semibold">83%</span></div>
                                </div>
                                <p class="text-lg leading-normal mb-2 font-normal text-gray-800">Facebook Ads</p>
                              </div>

                              <!-- Vertical Progress Bar -->
                              <div class="flex-shrink w-1/4 px-4 max-w-full text-center">
                                <div class="flex flex-col flex-nowrap justify-end bg-gray-200 dark:bg-gray-700 h-48 rounded mb-4 overflow-hidden">
                                  <div class="relative bg-blue-700 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s" style="height:72%"><span class="w-full text-white pt-2 absolute left=0 right-0 py-1 font-semibold">72%</span></div>
                                </div>
                                <p class="text-lg leading-normal mb-2 font-normal text-gray-800">Microsoft Ads</p>
                              </div>

                              <!-- Vertical Progress Bar -->
                              <div class="flex-shrink w-1/4 px-4 max-w-full text-center">
                                <div class="flex flex-col flex-nowrap justify-end bg-gray-200 dark:bg-gray-700 h-48 rounded mb-4 overflow-hidden">
                                  <div class="relative bg-blue-700 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s" style="height:63%"><span class="w-full text-white pt-2 absolute left=0 right-0 py-1 font-semibold">63%</span></div>
                                </div>
                                <p class="text-lg leading-normal mb-2 font-normal text-gray-800">Tiktok Ads</p>
                              </div>
                            </div>
                          </div>

                          <div class="flex-shrink w-full max-w-full px-4 md:w-5/12 md:ltr:ml-auto md:rtl:mr-auto">
                            <p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2 mb-12">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                            <a href="#" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">
                              More Statistic
                              <svg class="bi bi-graph-up inline-block ltr:ml-2 rtl:mr-2" width="1rem" height="1rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 0h1v16H0V0zm1 15h15v1H1v-1z"></path>
                                <path fill-rule="evenodd" d="M14.39 4.312L10.041 9.75 7 6.707l-3.646 3.647-.708-.708L7 5.293 9.959 8.25l3.65-4.563.781.624z" clip-rule="evenodd"></path>
                                <path fill-rule="evenodd" d="M10 3.5a.5.5 0 01.5-.5h4a.5.5 0 01.5.5v4a.5.5 0 01-1 0V4h-3.5a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
                              </svg>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div><!-- End progress-->
                  
                

                  
                    <!-- Start progress -->
                    <div id="progress" 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 px-4">
                        <div class="flex flex-wrap flex-row -mx-4">
                          <div class="flex-shrink max-w-full px-4 w-full lg:w-1/2">
                            <div class="ltr:mr-2 rtl:ml-2">
                              <h2 class="text-3xl leading-normal font-bold mb-4"><span class="font-light">Hi! I'am</span> Mark Hernandez</h2>
                              <p>I'am a freelance, front designer & web programmer. I serve a variety of website design services to meet your needs. With more than 7 years of experience in the field of website design will make your website become professional and SEO friendly.</p>
                              <ul class="mt-6">
                                <li class="py-2">
                                  <p>
                                    <!-- <i class="fas fa-calendar ltr:mr-2 rtl:ml-2"></i> -->
                                    <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="ltr:mr-1 rtl:ml-1 inline-block" fill="currentColor" viewBox="0 0 512 512"><rect x="48" y="80" width="416" height="384" rx="48" ry="48" style="fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:32px"/><path d="M397.82,80H114.18C77.69,80,48,110.15,48,147.2V208H64c0-16,16-32,32-32H416c16,0,32,16,32,32h16V147.2C464,110.15,434.31,80,397.82,80Z"/><circle cx="296" cy="232" r="24"/><circle cx="376" cy="232" r="24"/><circle cx="296" cy="312" r="24"/><circle cx="376" cy="312" r="24"/><circle cx="136" cy="312" r="24"/><circle cx="216" cy="312" r="24"/><circle cx="136" cy="392" r="24"/><circle cx="216" cy="392" r="24"/><circle cx="296" cy="392" r="24"/><line x1="128" y1="48" x2="128" y2="80" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="384" y1="48" x2="384" y2="80" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                                    <span class="font-bold">Date of birth:</span> 1 may 1990
                                  </p>
                                </li>
                                <li class="py-2">
                                  <p>
                                    <!-- <i class="fas fa-envelope ltr:mr-2 rtl:ml-2"></i> -->
                                    <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="ltr:mr-1 rtl:ml-1 inline-block" fill="currentColor" viewBox="0 0 512 512"><rect x="48" y="96" width="416" height="320" rx="40" ry="40" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="112 160 256 272 400 160" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                                    <span class="font-bold">Email:</span> support@domain.com
                                  </p>
                                </li>
                                <li class="py-2">
                                  <p>
                                    <!-- <i class="fas fa-phone fas-rotate-90 ltr:mr-2 rtl:ml-2"></i> -->
                                    <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="ltr:mr-1 rtl:ml-1 inline-block" fill="currentColor" viewBox="0 0 512 512"><path d="M451,374c-15.88-16-54.34-39.35-73-48.76C353.7,313,351.7,312,332.6,326.19c-12.74,9.47-21.21,17.93-36.12,14.75s-47.31-21.11-75.68-49.39-47.34-61.62-50.53-76.48,5.41-23.23,14.79-36c13.22-18,12.22-21,.92-45.3-8.81-18.9-32.84-57-48.9-72.8C119.9,44,119.9,47,108.83,51.6A160.15,160.15,0,0,0,83,65.37C67,76,58.12,84.83,51.91,98.1s-9,44.38,23.07,102.64,54.57,88.05,101.14,134.49S258.5,406.64,310.85,436c64.76,36.27,89.6,29.2,102.91,23s22.18-15,32.83-31a159.09,159.09,0,0,0,13.8-25.8C465,391.17,468,391.17,451,374Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"/></svg>
                                    <span class="font-bold">Phone:</span> +1-234-456-7890
                                  </p>
                                </li>
                                <li class="py-2">
                                  <p>
                                    <!-- <i class="fas fa-map-marker-alt ltr:mr-2 rtl:ml-2"></i> -->
                                    <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="ltr:mr-1 rtl:ml-1 inline-block" fill="currentColor" viewBox="0 0 512 512"><path d="M256,48c-79.5,0-144,61.39-144,137,0,87,96,224.87,131.25,272.49a15.77,15.77,0,0,0,25.5,0C304,409.89,400,272.07,400,185,400,109.39,335.5,48,256,48Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="256" cy="192" r="48" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                                    <span class="font-bold">Location:</span> Amphitheatre, Mountain View 3465, USA
                                  </p>
                                </li>
                              </ul>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full px-4 w-full lg:w-1/2 xl:w-5/12 col-xl-5">
                            <!-- progresss bar -->
                            <div class="progress-line-trigger">
                              <div class="my-6">
                                <h6 class="text-base leading-normal mb-2 text-gray-800">HTML</h6>
                                <!-- progress -->
                                <div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-700 rounded-md mb-4">
                                  <div class="flex flex-col justify-center overflow-hidden text-white text-center whitespace-nowrap bg-blue-700 wow fadeInLeft" data-wow-duration="1s" role="progressbar" style="width: 87%;" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100">87%</div>
                                </div>
                              </div>

                              <div class="my-6">
                                <h6 class="text-base leading-normal mb-2 text-gray-800">CSS</h6>
                                <!-- progress -->
                                <div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-700 rounded-md mb-4">
                                  <div class="flex flex-col justify-center overflow-hidden text-white text-center whitespace-nowrap bg-blue-700 wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".1s" role="progressbar" style="width: 92%;" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100">92%</div>
                                </div>
                              </div>

                              <div class="my-6">
                                <h6 class="text-base leading-normal mb-2 text-gray-800">JS</h6>
                                <!-- progress -->
                                <div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-700 rounded-md mb-4">
                                  <div class="flex flex-col justify-center overflow-hidden text-white text-center whitespace-nowrap bg-blue-700 wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".3s" role="progressbar" style="width: 76%;" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100">76%</div>
                                </div>
                              </div>

                              <div class="my-6">
                                <h6 class="text-base leading-normal mb-2 text-gray-800">PHP</h6>
                                <!-- progress -->
                                <div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-700 rounded-md mb-4">
                                  <div class="flex flex-col justify-center overflow-hidden text-white text-center whitespace-nowrap bg-blue-700 wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" style="width: 79%;" aria-valuenow="79" aria-valuemin="0" aria-valuemax="100">79%</div>
                                </div>
                              </div>
                            </div><!-- end progress bar -->
                          </div>
                        </div>
                      </div>
                    </div><!-- End progress -->