Portfolio Sections

                  
                    <!-- portfolio start -->
                    <div id="portfolio" class="relative py-20 md:py-24 bg-white dark:bg-gray-800">
                      <div x-data="{ tab: 'all' }" class="container xl:max-w-6xl mx-auto uajskeiolksb">
                        <!-- 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">Our</span> Portfolio</h2>
                          <hr class="block w-12 h-0.5 mx-auto my-5 bg-primary-700 border-primary-700">
                        </header><!-- end section header -->

                        <!-- navigation -->
                        <div class="space-x-5 text-center">
                          <button @click.prevent="tab = 'all'" :class="{ 'text-primary-700' : tab === 'all' }" class="inline-block  bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden text-primary-700">
                            All
                          </button>

                          <button @click.prevent="tab = 'web'" :class="{ 'text-primary-700' : tab === 'web' }" class="inline-block  bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
                            Web
                          </button>

                          <button @click.prevent="tab = 'graphic'" :class="{ 'text-primary-700' : tab === 'graphic' }" class="inline-block  bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
                            Graphic
                          </button>

                          <button @click.prevent="tab = 'photo'" :class="{ 'text-primary-700' : tab === 'photo' }" class="inline-block  bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
                            Photograpy
                          </button>
                        </div><!-- end navigation -->

                        <!-- Portfolio Content -->
                        <div class="flex flex-wrap klsuaonrmcha -mx-4 lightgallery-thumbnail">
                          <figure x-show="tab === 'graphic' || tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_1.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer mb-6">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_1.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Logo Design</h3>
                                <small class="d-block">Branding</small>
                              </figcaption>
                            </div>
                          </figure>

                          <figure x-show="tab === 'web' || tab === 'all'" data-src="src/img-min/project/project_2.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer mb-6">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_2.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Web Development</h3>
                                <small class="d-block">Web</small>
                              </figcaption>
                            </div>
                          </figure>

                          <figure x-show="tab === 'graphic' || tab === 'all'" data-src="src/img-min/project/project_3.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer mb-6">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_3.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Graphic Design</h3>
                                <small class="d-block">Graphic</small>
                              </figcaption>
                            </div>
                          </figure>

                          <figure x-show="tab === 'graphic' || tab === 'all'" data-src="src/img-min/project/project_4.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer mb-6">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_4.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Video Marketing</h3>
                                <small class="d-block">Video</small>
                              </figcaption>
                            </div>
                          </figure>

                          <figure x-show="tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_5.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer mb-6">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_5.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Photography</h3>
                                <small class="d-block">Photo</small>
                              </figcaption>
                            </div>
                          </figure>

                          <figure x-show="tab === 'web' || tab === 'all'" data-src="src/img-min/project/project_6.jpg" class="shrink max-w-full uajskeiolksb w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer mb-6">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_6.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Apps Development</h3>
                                <small class="d-block">Apps</small>
                              </figcaption>
                            </div>
                          </figure>
                        </div>
                      </div>
                      
                      <div class="container xl:max-w-6xl mx-auto uajskeiolksb">
                        <div class="flex flex-wrap klsuaonrmcha -mx-4">
                          <div class="w-full uajskeiolksb text-center mt-6">
                            <a href="#" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-hidden focus:ring-0">View all latest project</a>
                          </div>
                        </div>
                      </div>
                    </div><!-- End portfolio -->
                  
                

                  
                    <!-- portfolio start -->
                    <div id="portfolio" class="relative py-20 md:py-24 bg-gray-50 dark:bg-gray-900/20">
                      <div x-data="{ tab: 'all' }" class="container xl:max-w-6xl mx-auto uajskeiolksb">
                        <!-- 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">Our</span> Portfolio</h2>
                          <hr class="block w-12 h-0.5 mx-auto my-5 bg-primary-700 border-primary-700">
                        </header><!-- end section header -->

                        <!-- navigation -->
                        <div class="space-x-5 text-center">
                          <button @click.prevent="tab = 'all'" :class="{ 'text-primary-700' : tab === 'all' }" class="inline-block  bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden text-primary-700">
                            All
                          </button>

                          <button @click.prevent="tab = 'web'" :class="{ 'text-primary-700' : tab === 'web' }" class="inline-block  bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
                            Web
                          </button>

                          <button @click.prevent="tab = 'graphic'" :class="{ 'text-primary-700' : tab === 'graphic' }" class="inline-block  bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
                            Graphic
                          </button>

                          <button @click.prevent="tab = 'photo'" :class="{ 'text-primary-700' : tab === 'photo' }" class="inline-block  bg-transparent border-0 outline-hidden mb-6 md:mb-12 focus:text-primary-700 focus:ring-0 focus:outline-hidden">
                            Photograpy
                          </button>
                        </div><!-- end navigation -->

                        <!-- Portfolio Content -->
                        <div class="flex flex-wrap klsuaonrmcha lightgallery-thumbnail">
                          <figure x-show="tab === 'graphic' || tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_1.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_1.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Logo Design</h3>
                                <small class="d-block">Branding</small>
                              </figcaption>
                            </div>
                          </figure>

                          <figure x-show="tab === 'web' || tab === 'all'" data-src="src/img-min/project/project_2.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_2.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Web Development</h3>
                                <small class="d-block">Web</small>
                              </figcaption>
                            </div>
                          </figure>

                          <figure x-show="tab === 'graphic' || tab === 'all'" data-src="src/img-min/project/project_3.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_3.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Graphic Design</h3>
                                <small class="d-block">Graphic</small>
                              </figcaption>
                            </div>
                          </figure>

                          <figure x-show="tab === 'graphic' || tab === 'all'" data-src="src/img-min/project/project_4.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_4.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Video Marketing</h3>
                                <small class="d-block">Video</small>
                              </figcaption>
                            </div>
                          </figure>

                          <figure x-show="tab === 'photo' || tab === 'all'" data-src="src/img-min/project/project_5.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_5.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Photography</h3>
                                <small class="d-block">Photo</small>
                              </figcaption>
                            </div>
                          </figure>

                          <figure x-show="tab === 'web' || tab === 'all'" data-src="src/img-min/project/project_6.jpg" class="shrink max-w-full w-full sm:w-1/2 lg:w-1/3 group" data-sub-html="title images">
                            <div class="relative mklausjenrhtm cursor-pointer">
                              <img class="block w-full h-auto transform duration-500 hover:scale-125" src="src/img-min/project/project_6.jpg" alt="Image Description">
                              <figcaption class="absolute ajsklekajsnm bottom-0 h-20 transition-opacity duration-500 ease-in opacity-0 group-hover:opacity-100 mklausjenrhtm uajskeiolksb py-2 text-gray-100 bg-primary-700 text-center">
                                <h3 class="text-base leading-normal font-semibold my-1 text-gray-100">Apps Development</h3>
                                <small class="d-block">Apps</small>
                              </figcaption>
                            </div>
                          </figure>
                        </div>
                      </div>
                      
                      <div class="container xl:max-w-6xl mx-auto uajskeiolksb">
                        <div class="flex flex-wrap klsuaonrmcha -mx-4">
                          <div class="w-full uajskeiolksb text-center mt-12">
                            <a href="#" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-hidden focus:ring-0">View all latest project</a>
                          </div>
                        </div>
                      </div>
                    </div><!-- End portfolio -->
                  
                

                  
                    <!-- =========={ PORTFOLIO }==========  -->
                    <div id="portfolio" class="relative py-20 md:py-24 bg-gray-100 dark:bg-gray-800">
                      <div class="container xl:max-w-6xl mx-auto uajskeiolksb">
                        <!-- 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">Our</span> Portfolio</h2>
                          <hr class="block w-12 h-0.5 mx-auto my-5 bg-primary-700 border-primary-700">
                        </header><!-- end section header -->
                        
                        <!-- slider -->
                        <div class="lightgallery-slider mb-20 lg:mb-4 carousel nav-dark-button nav-outset-button" data-flickity='{ "cellAlign": "left", "wrapAround": true, "pageDots": false, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>
                          <!-- item -->
                          <div class="slider-item max-w-full w-full md:w-1/2 lg:w-1/3 uajskeiolksb cursor-pointer" data-src="src/img/web/project1.jpg" data-sub-html="Screenshot 2">
                            <div class="relative">
                              <div class="h-72 relative"> 
                                <div class="absolute inset-0 bg-top hover:bg-bottom" style="background-image: url('src/img/web/project1.jpg');background-repeat: no-repeat;transition: 2s;background-size: 100%;">
                                  <img class="hidden" src="src/img/web/project1.jpg">
                                </div> 
                              </div> 
                              <div class="relative bg-white dark:bg-gray-900">
                                <div class="p-4">
                                  <p class="text-sm text-gray-500 mb-1.5">App</p> 
                                  <h3 class="text-xl font-bold mb-1.5">Project Name</h3> 
                                  <p class="text-lg">Website of the Business Center</p>
                                </div>

                                <div class="relative p-4"> 
                                  <button class="inline-block py-2 dkslaoeyhnmj bg-white text-black font-semibold uppercase border-2 border-black hover:bg-black hover:text-white mb-3">Look</button>
                                </div>
                              </div>
                            </div>
                          </div>

                          <!-- item -->
                          <div class="slider-item max-w-full w-full md:w-1/2 lg:w-1/3 uajskeiolksb cursor-pointer" data-src="src/img/web/project2.jpg" data-sub-html="Screenshot 3">
                            <div class="relative">
                              <div class="h-72 relative"> 
                                <div class="absolute inset-0 bg-top hover:bg-bottom" style="background-image: url('src/img/web/project2.jpg');background-repeat: no-repeat;transition: 2s;background-size: 100%;">
                                  <img class="hidden" src="src/img/web/project2.jpg">
                                </div> 
                              </div> 
                              <div class="relative bg-white dark:bg-gray-900">
                                <div class="p-4">
                                  <p class="text-sm text-gray-500 mb-1.5">Web</p> 
                                  <h3 class="text-xl font-bold mb-1.5">Project Name</h3> 
                                  <p class="text-lg">Website of the Business Center</p>
                                </div>

                                <div class="relative p-4"> 
                                  <button class="inline-block py-2 dkslaoeyhnmj bg-white text-black font-semibold uppercase border-2 border-black hover:bg-black hover:text-white mb-3">Look</button>
                                </div>
                              </div>
                            </div>
                          </div>

                          <!-- item -->
                          <div class="slider-item max-w-full w-full md:w-1/2 lg:w-1/3 uajskeiolksb cursor-pointer" data-src="src/img/web/project3.jpg" data-sub-html="Screenshot 3">
                            <div class="relative">
                              <div class="h-72 relative"> 
                                <div class="absolute inset-0 bg-top hover:bg-bottom" style="background-image: url('src/img/web/project3.jpg');background-repeat: no-repeat;transition: 2s;background-size: 100%;">
                                  <img class="hidden" src="src/img/web/project3.jpg">
                                </div> 
                              </div> 
                              <div class="relative bg-white dark:bg-gray-900">
                                <div class="p-4">
                                  <p class="text-sm text-gray-500 mb-1.5">Web</p> 
                                  <h3 class="text-xl font-bold mb-1.5">Project Name</h3> 
                                  <p class="text-lg">Website of the Business Center</p>
                                </div>

                                <div class="relative p-4"> 
                                  <button class="inline-block py-2 dkslaoeyhnmj bg-white text-black font-semibold uppercase border-2 border-black hover:bg-black hover:text-white mb-3">Look</button>
                                </div>
                              </div>
                            </div>
                          </div>

                          <!-- item -->
                          <div class="slider-item max-w-full w-full md:w-1/2 lg:w-1/3 uajskeiolksb cursor-pointer" data-src="src/img/web/project4.jpg" data-sub-html="Screenshot 1">
                            <div class="relative">
                              <div class="h-72 relative"> 
                                <div class="absolute inset-0 bg-top hover:bg-bottom" style="background-image: url('src/img/web/project4.jpg');background-repeat: no-repeat;transition: 2s;background-size: 100%;">
                                  <img class="hidden" src="src/img/web/project4.jpg">
                                </div> 
                              </div> 
                              <div class="relative bg-white dark:bg-gray-900">
                                <div class="p-4">
                                  <p class="text-sm text-gray-500 mb-1.5">Web</p> 
                                  <h3 class="text-xl font-bold mb-1.5">Project Name</h3> 
                                  <p class="text-lg">Website of the Business Center</p>
                                </div>

                                <div class="relative p-4"> 
                                  <button class="inline-block py-2 dkslaoeyhnmj bg-white text-black font-semibold uppercase border-2 border-black hover:bg-black hover:text-white mb-3">Look</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div><!-- end slider -->

                      </div>
                    </div><!-- End portfolio -->