<!-- Slider start -->
                    <div id="slider" class="relative bg-blue-900">
                      <div class="hero-slider nav-inset-button nav-light-dots carousel" data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "pageDots": true, "autoPlay": 5000 }'>
                        <div class="w-full px-0 py-12 z-0" style="min-height: 520px;background-image: url('src/img-min/human/marketing.jpg');background-size: cover;">

                          <!-- background overlay -->
                          <div class="absolute top-0 left-0 w-full h-full opacity-80 bg-black" style="z-index:-1;"></div>

                          <div class="container xl:max-w-6xl mx-auto px-4">
                            <div class="flex flex-wrap flex-row -mx-4 items-center justify-center">
                              <!-- content -->
                              <div class="max-w-full px-4 w-full md:w-10/12">
                                <div class="mt-0 py-6 lg:py-12 text-center">
                                  <h1 class="text-3xl md:text-4xl leading-normal md:leading-normal font-semibold text-white mb-12">We Design and Develop Beautiful<br>Sites for your Business</h1>
                                  <a 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" href="#about">
                                    How We Work ?
                                  </a>
                                </div>
                              </div><!-- end content -->
                            </div>
                          </div>
                        </div>

                        <div class="w-full px-0 py-12 z-0" style="min-height: 520px;background-image: url('src/img-min/human/advertising.jpg');background-size: cover;">
                          <!-- background overlay -->
                          <div class="absolute top-0 left-0 w-full h-full opacity-80 bg-black" style="z-index:-1;"></div>

                          <div class="container xl:max-w-6xl mx-auto px-4">
                            <div class="flex flex-wrap flex-row -mx-4 items-center justify-center">
                              <!-- content -->
                              <div class="max-w-full px-4 w-full md:w-10/12">
                                <div class="mt-0 py-6 lg:py-12 text-center">
                                  <h1 class="text-3xl md:text-4xl leading-normal md:leading-normal font-semibold text-white mb-12">Developing a New Concept<br>With our Experience</h2>
                                  <a 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" href="#services">
                                    Our Services
                                  </a>
                                </div>
                              </div><!-- end content -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div><!-- end slider-->
                  
                

                  
                    <!-- Slider start -->
                    <div id="project" 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 lg:px-20">
                          <h2 class="text-2xl md:text-3xl leading-normal mb-2 font-semibold text-gray-800 dark:text-gray-100">Latest Project</h2>
                          <hr class="block w-12 h-0.5 mx-auto my-5 bg-indigo-700 border-indigo-700">
                          <p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2">Take a look at some of the iOS and Android apps we developed</p>
                        </header><!-- end section header -->

                        <div class="flex flex-wrap flex-row -mx-4 items-center">
                          <div class="w-full lg:w-10/12 px-4 mx-auto">
                            <!-- screenshot slider -->
                            <div class="carousel nav-dark-button" data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "prevNextButtons": true , "pageDots": false, "imagesLoaded": true }'>
                              <div class="max-w-full w-full md:w-1/2 lg:w-1/3 px-24 md:px-12 text-center">
                                <div class="slider-item">
                                  <figure class="relative">
                                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                                      <!-- Clip path image -->
                                      <defs>
                                        <clipPath id="svgf3">
                                          <rect x="52" y="10" width="380" height="818"/>
                                        </clipPath>
                                      </defs>

                                      <!-- Phone screen -->
                                      <image clip-path="url(#svgf3)" xlink:href="src/img-min/app/app1.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>

                                      <!-- Phone cover -->
                                      <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                                    </svg>
                                  </figure>
                                </div>
                              </div>
                              <div class="max-w-full w-full md:w-1/2 lg:w-1/3 px-24 md:px-12 text-center">
                                <div class="slider-item">
                                  <figure class="relative">
                                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                                      <!-- Clip path image -->
                                      <defs>
                                        <clipPath id="svgf4">
                                          <rect x="52" y="10" width="380" height="818"/>
                                        </clipPath>
                                      </defs>

                                      <!-- Phone screen -->
                                      <image clip-path="url(#svgf4)" xlink:href="src/img-min/app/app2.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>

                                      <!-- Phone cover -->
                                      <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                                    </svg>
                                  </figure>
                                </div>
                              </div>
                              <div class="max-w-full w-full md:w-1/2 lg:w-1/3 px-24 md:px-12 text-center">
                                <div class="slider-item">
                                  <figure class="relative">
                                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                                      <!-- Clip path image -->
                                      <defs>
                                        <clipPath id="svgf5">
                                          <rect x="52" y="10" width="380" height="818"/>
                                        </clipPath>
                                      </defs>

                                      <!-- Phone screen -->
                                      <image clip-path="url(#svgf5)" xlink:href="src/img-min/app/app3.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>

                                      <!-- Phone cover -->
                                      <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                                    </svg>
                                  </figure>
                                </div>
                              </div>
                              <div class="max-w-full w-full md:w-1/2 lg:w-1/3 px-24 md:px-12 text-center">
                                <div class="slider-item">
                                  <figure class="relative">
                                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                                      <!-- Clip path image -->
                                      <defs>
                                        <clipPath id="svgf6">
                                          <rect x="52" y="10" width="380" height="818"/>
                                        </clipPath>
                                      </defs>

                                      <!-- Phone screen -->
                                      <image clip-path="url(#svgf6)" xlink:href="src/img-min/app/app4.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>

                                      <!-- Phone cover -->
                                      <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                                    </svg>
                                  </figure>
                                </div>
                              </div>
                              <div class="max-w-full w-full md:w-1/2 lg:w-1/3 px-24 md:px-12 text-center">
                                <div class="slider-item">
                                  <figure class="relative">
                                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                                      <!-- Clip path image -->
                                      <defs>
                                        <clipPath id="svgf7">
                                          <rect x="52" y="10" width="380" height="818"/>
                                        </clipPath>
                                      </defs>

                                      <!-- Phone screen -->
                                      <image clip-path="url(#svgf7)" xlink:href="src/img-min/app/app5.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>

                                      <!-- Phone cover -->
                                      <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                                    </svg>
                                  </figure>
                                </div>
                              </div>
                            </div><!-- end screenshot slider -->
                          </div>
                        </div>
                      </div>
                    </div><!-- End slider-->