<?php include 'include/header.php'?>
<div class=" inner-banner ">
    <div class="container-fluid w-75 h-100 ">
        <div class="row  align-items-center h-100  justify-content-center">
            <div class="col-xxl-8 col-xl-8 text-center pt-5 pt-xxl-0 banner-text position-relative"
                data-aos="fade-right" data-aos-duration="1000">
                <h1 class="clr-1">

                    Our Recent<span class="gradient-text"> Portfolio</span>
                </h1>
                <p class="f-20 py-4">
                    Over the last 11 years, <?php echo $BrandName?> has signed up with large international businesses for a wide
                    range of digital marketing services. Have a glance at our recent project.
                </p>
                <a href="contact" class="btn">  Get Started</a>
            </div>
            <!-- <div class="col-xxl-5 col-xl-5 col-10 pt-lg-5 mt-5 banner-image position-relative" data-aos="fade-left"
                data-aos-duration="1000">

                <div class="banner-img-b position-relative">
                    <img src="assets/img/banner-img.jpg" alt="Cinque Terre" class="mask1">
                </div>

            </div> -->
        </div>
    </div>
</div>
<section class="my-5">
    <div class="container-fluid w-75">
        <div class="row justify-content-between">
            <div class="col-xxl-5 col-xl-6 col-12" data-aos="fade-right" data-aos-duration="1000">
                <h2 class="clr-1">
                    Our <br> Recent <span class="gradient-text">Work</span>
                </h2>
            </div>
            <div class="col-xxl-5 col-xl-6 f-20 col-12 align-self-center" data-aos="fade-left" data-aos-duration="1000">
                <p>
                    Helping Businesses Of All Kinds Whether Big, Small, Established Or Startup Woo Their Audiences
                    With Exemplary Web Solutions.
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-10  col-12 my-lg-5 my-2">
                <ul class="nav nav-tabs " id="myTab" role="tablist">
                    <li class="nav-item  me-2 mb-2 mb-lg-0 " role="presentation" data-aos="fade-down"
                        data-aos-duration="1000">
                        <a class="nav-link active  btn" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
                            type="button" role="tab" aria-controls="home" aria-selected="true">
                            Logos
                        </a>
                    </li>
                    <li class="nav-item mb-2 me-2 mb-lg-0 " role="presentation" data-aos="fade-down"
                        data-aos-duration="1000">
                        <a class="nav-link  btn" id="cms-tab" data-bs-toggle="tab" data-bs-target="#cms" type="button"
                            role="tab" aria-controls="cms" aria-selected="true">


                            Mobile Apps

                        </a>
                    </li>
                    <li class="nav-item mb-2 mb-lg-0 " role="presentation" data-aos="fade-down"
                        data-aos-duration="1000">
                        <a class="nav-link   btn" id="responsive-tab" data-bs-toggle="tab" data-bs-target="#responsive"
                            type="button" role="tab" aria-controls="responsive" aria-selected="true">


                            Websites

                        </a>
                    </li>



                </ul>
            </div>
        </div>
        <div class="col-xxl-12 col-xl-12">
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                    <div class="row ">
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000">
                            <a href="assets/img/portfolio/logo/1.webp" data-fancybox="images"
                                class="overlay-before-port">

                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/1.webp">

                            </a>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000">
                            <a href="assets/img/portfolio/logo/2.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/2.webp">
                            </a>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/logo/3.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/3.webp">
                            </a>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/logo/4.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/4.webp">
                            </a>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000">
                            <a href="assets/img/portfolio/logo/5.webp" data-fancybox="images"
                                class="overlay-before-port">

                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/5.webp">

                            </a>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000">
                            <a href="assets/img/portfolio/logo/6.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/6.webp">
                            </a>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/logo/7.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/7.webp">
                            </a>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/logo/8.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/8.webp">
                            </a>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/logo/9.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/9.webp">
                            </a>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/logo/10.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/10.webp">
                            </a>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/logo/11.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/11.webp">
                            </a>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6 mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/logo/12.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/logo/12.webp">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="cms" role="tabpanel" aria-labelledby="cms-tab">
                    <div class="row ">
                        <div class="col-lg-4 col-l mb-3" data-aos="fade-up" data-aos-duration="1000">
                            <a href="assets/img/portfolio/app/1-full.webp" data-fancybox="images"
                                class="overlay-before-port">

                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/app/1.webp">

                            </a>
                        </div>
                        <div class="col-lg-4 col-l mb-3" data-aos="fade-up" data-aos-duration="1000">
                            <a href="assets/img/portfolio/app/2-full.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/app/2.webp">
                            </a>
                        </div>
                        <div class="col-lg-4 col-l mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/app/3-full.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/app/3.webp">
                            </a>
                        </div>
                        <div class="col-lg-4 col-l mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/app/4-full.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/app/4.webp">
                            </a>
                        </div>
                        <div class="col-lg-4 col-l mb-3" data-aos="fade-up" data-aos-duration="1000">
                            <a href="assets/img/portfolio/app/5-full.webp" data-fancybox="images"
                                class="overlay-before-port">

                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/app/5.webp">

                            </a>
                        </div>
                        <div class="col-lg-4 col-l mb-3" data-aos="fade-up" data-aos-duration="1000">
                            <a href="assets/img/portfolio/app/6-full.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/app/6.webp">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="responsive" role="tabpanel" aria-labelledby="responsive-tab">
                    <div class="row ">
                        <div class="col-lg-6 col-l mb-3" data-aos="fade-up" data-aos-duration="1000">
                            <a href="assets/img/portfolio/web/1-full.webp" data-fancybox="images"
                                class="overlay-before-port">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/web/1.webp">
                            </a>
                        </div>
                        <div class="col-lg-6 col-l mb-3" data-aos="fade-up" data-aos-duration="1000">
                            <a href="assets/img/portfolio/web/2-full.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/web/2.webp">
                            </a>
                        </div>
                        <div class="col-lg-6 col-l mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/web/3-full.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/web/3.webp">
                            </a>
                        </div>
                        <div class="col-lg-6 col-l mb-3" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="400">
                            <a href="assets/img/portfolio/web/4-full.webp" data-fancybox="images">
                                <img alt="<?php echo $BrandName?>" class="w-100 lozad" data-src="assets/img/portfolio/web/4.webp">
                            </a>
                        </div>

                    </div>
                </div>

            </div>
        </div>


    </div>

</section>
<?php include 'include/footer.php'?>