Video Sections

                  
                    <!-- Video start -->
                    <div id="video" class="relative py-20 md:py-24 bg-white dark:bg-gray-800">
                      <div class="container xl:max-w-6xl mx-auto px-4">
                        <div class="flex flex-wrap flex-row -mx-4">
                          <!-- content -->
                          <div class="flex-shrink max-w-full px-4 w-full lg:w-1/2 lg:order-2 self-center">
                            <div class="mb-12 lg:mb-0 lg:ml-12 lg:pr-6 wow fadeInRight" data-wow-duration="1s" data-wow-delay=".1s">
                              <h2 class="text-3xl leading-normal font-semibold text-gray-800 dark:text-gray-100 mb-3">Story Behind Our Digital Marketing Agency</h2>
                              <p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2 mb-12">Upgency is the leading digital marketing agency in New York. We are striving to provide integrated digital marketing solutions.</p>
                              <!-- button -->
                              <a href="#" class="py-3 px-5 -ml-1 rounded-md leading-5 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 mr-3">
                                <!-- <i class="fas fa-paper-plane me-1"></i> -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" class="inline-block ltr:mr-2 rtl:ml-2 transform ltr:rotate-0 rtl:-rotate-90" fill="currentColor" viewBox="0 0 512 512"><path d="M53.12,199.94l400-151.39a8,8,0,0,1,10.33,10.33l-151.39,400a8,8,0,0,1-15-.34L229.66,292.45a16,16,0,0,0-10.11-10.11L53.46,215A8,8,0,0,1,53.12,199.94Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="460" y1="52" x2="227" y2="285" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                                Read Story
                              </a>
                            </div>
                          </div><!-- end content -->

                          <!-- play -->
                          <div class="flex-shrink max-w-full px-4 w-full lg:w-1/2 lg:order-1">
                            <div class="relative rounded-md overflow-hidden hover:shadow-xl">
                              <img src="src/img-min/human/purple-laptop.jpg" class="max-w-full w-full h-auto" alt="background images">
                              <div class="absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 lightgallery-thumbnail">
                                <a id="preview-video2" aria-label="Introcluding Upgency" href="https://www.youtube.com/watch?v=nOsKM0cb0qE" class="p-5 rounded-full leading-5 text-gray-800 bg-gray-100 border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0 relative">
                                  <svg class="bi bi-play-fill inline-block" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"></path>
                                  </svg>
                                </a>
                              </div>
                            </div>
                          </div><!-- end team -->
                        </div>
                      </div>
                    </div><!-- end video -->
                  
                

                  
                    <!-- Video start -->
                    <div id="videos" class="relative bg-white dark:bg-gray-800">
                      <div class="container mx-auto px-4">
                        <div class="flex flex-wrap flex-row -mx-4">
                          <!-- img block -->
                          <div class="flex-shrink max-w-full px-4 w-full lg:w-1/3 lg:order-2 text-white" style="background-image: url('src/img-min/section/overview1.jpg');min-height: 20rem;background-size: cover;">
                            <div class="relative h-full w-full">
                              <div class="absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 lightgallery-thumbnail">
                                <a id="preview-video2" aria-label="Introcluding Upgency" href="https://www.youtube.com/watch?v=nOsKM0cb0qE" class="p-5 rounded-full leading-5 text-gray-800 bg-gray-100 border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0 relative">
                                  <svg class="bi bi-play-fill inline-block" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"></path>
                                  </svg>
                                </a>
                              </div>
                            </div>
                          </div>

                          <!-- content block -->
                          <div class="flex-shrink max-w-full px-4 w-full lg:w-2/3 lg:order-1 my-auto">
                            <div class="p-6 lg:p-16 mt-12 md:mt-0">
                              <!-- Row -->
                              <div class="flex flex-wrap flex-row -mx-4 items-center justify-around md:mr-6">
                                <div class="flex-shrink max-w-full px-4 w-11/12 sm:w-2/3 md:w-5/12 lg:w-1/2 mb-12">
                                  <div class="text-blue-700 mb-4">
                                    <!-- <i class="far fa-life-ring"></i> -->
                                    <svg class="bi bi-shield-lock" width="3rem" height="3rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                      <path fill-rule="evenodd" d="M5.443 1.991a60.17 60.17 0 00-2.725.802.454.454 0 00-.315.366C1.87 7.056 3.1 9.9 4.567 11.773c.736.94 1.533 1.636 2.197 2.093.333.228.626.394.857.5.116.053.21.089.282.11A.73.73 0 008 14.5c.007-.001.038-.005.097-.023.072-.022.166-.058.282-.111.23-.106.525-.272.857-.5a10.197 10.197 0 002.197-2.093C12.9 9.9 14.13 7.056 13.597 3.159a.454.454 0 00-.315-.366c-.626-.2-1.682-.526-2.725-.802C9.491 1.71 8.51 1.5 8 1.5c-.51 0-1.49.21-2.557.491zm-.256-.966C6.23.749 7.337.5 8 .5c.662 0 1.77.249 2.813.525a61.09 61.09 0 012.772.815c.528.168.926.623 1.003 1.184.573 4.197-.756 7.307-2.367 9.365a11.191 11.191 0 01-2.418 2.3 6.942 6.942 0 01-1.007.586c-.27.124-.558.225-.796.225s-.526-.101-.796-.225a6.908 6.908 0 01-1.007-.586 11.192 11.192 0 01-2.417-2.3C2.167 10.331.839 7.221 1.412 3.024A1.454 1.454 0 012.415 1.84a61.11 61.11 0 012.772-.815z" clip-rule="evenodd"></path>
                                      <path d="M9.5 6.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path>
                                      <path d="M7.411 8.034a.5.5 0 01.493-.417h.156a.5.5 0 01.492.414l.347 2a.5.5 0 01-.493.585h-.835a.5.5 0 01-.493-.582l.333-2z"></path>
                                    </svg>
                                  </div>
                                  <h3 class="text-xl leading-normal mb-2 font-semibold">Save and Secure</h3>
                                  <p class="text-gray-500 mb-0">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
                                </div>

                                <div class="flex-shrink max-w-full px-4 w-11/12 sm:w-2/3 md:w-5/12 lg:w-1/2 mb-12">
                                  <div class="text-blue-700 mb-4">
                                    <!-- <i class="fas fa-bug"></i> -->
                                    <svg class="bi bi-folder" width="3rem" height="3rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M9.828 4a3 3 0 01-2.12-.879l-.83-.828A1 1 0 006.173 2H2.5a1 1 0 00-1 .981L1.546 4h-1L.5 3a2 2 0 012-2h3.672a2 2 0 011.414.586l.828.828A2 2 0 009.828 3v1z"></path>
                                      <path fill-rule="evenodd" d="M13.81 4H2.19a1 1 0 00-.996 1.09l.637 7a1 1 0 00.995.91h10.348a1 1 0 00.995-.91l.637-7A1 1 0 0013.81 4zM2.19 3A2 2 0 00.198 5.181l.637 7A2 2 0 002.826 14h10.348a2 2 0 001.991-1.819l.637-7A2 2 0 0013.81 3H2.19z" clip-rule="evenodd"></path>
                                    </svg>
                                  </div>
                                  <h3 class="text-xl leading-normal mb-2 font-semibold">Unlimited Material</h3>
                                  <p class="text-gray-500 mb-0">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
                                </div>
                              </div>
                              <!-- End Row -->

                              <!-- Row -->
                              <div class="flex flex-wrap flex-row -mx-4 items-center justify-around md:mr-6">
                                <div class="flex-shrink max-w-full px-4 w-11/12 sm:w-2/3 md:w-5/12 lg:w-1/2 mb-12">
                                  <div class="text-blue-700 mb-4">
                                    <!-- <i class="fas fa-fire"></i> -->
                                    <svg class="bi bi-clipboard-data" width="3rem" height="3rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                      <path fill-rule="evenodd" d="M4 1.5H3a2 2 0 00-2 2V14a2 2 0 002 2h10a2 2 0 002-2V3.5a2 2 0 00-2-2h-1v1h1a1 1 0 011 1V14a1 1 0 01-1 1H3a1 1 0 01-1-1V3.5a1 1 0 011-1h1v-1z" clip-rule="evenodd"></path>
                                      <path fill-rule="evenodd" d="M9.5 1h-3a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5zm-3-1A1.5 1.5 0 005 1.5v1A1.5 1.5 0 006.5 4h3A1.5 1.5 0 0011 2.5v-1A1.5 1.5 0 009.5 0h-3z" clip-rule="evenodd"></path>
                                      <path d="M4 11a1 1 0 112 0v1a1 1 0 11-2 0v-1zm6-4a1 1 0 112 0v5a1 1 0 11-2 0V7zM7 9a1 1 0 012 0v3a1 1 0 11-2 0V9z"></path>
                                    </svg>
                                  </div>
                                  <h3 class="text-xl leading-normal mb-2 font-semibold">Report and Statistic</h3>
                                  <p class="text-gray-500 mb-0">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
                                </div>

                                <div class="flex-shrink max-w-full px-4 w-11/12 sm:w-2/3 md:w-5/12 lg:w-1/2 mb-12">
                                  <div class="text-blue-700 mb-4">
                                    <!-- <i class="far fa-gem"></i> -->
                                    <svg class="bi bi-briefcase" width="3rem" height="3rem" 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>
                                  <h3 class="text-xl leading-normal mb-2 font-semibold">Business Plan Guide</h3>
                                  <p class="text-gray-500 mb-0">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
                                </div>
                              </div>
                              <!-- End Row -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div><!-- end video -->