{par-header}


        <!-- start section -->
        <section class="pb-4 sm-pt-30px sm-pb-40px overflow-hidden position-relative">
            <div class="container">
                <div class="row" data-anime='{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 500, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
                    <div class="col-sm-5 text-center text-sm-start">
                        <div class="outside-box-left-25 xl-outside-box-left-10 sm-outside-box-left-0">
                            <div class="fs-350 xl-fs-250 lg-fs-200 md-fs-170 sm-fs-100 text-cf-dark-gray-transparent fw-600 ls-minus-20px word-break-normal">work</div>
                        </div>
                    </div>
                    <div class="col-sm-7 text-center text-sm-end">
                        <div class="outside-box-right-5 sm-outside-box-right-0">
                            <div class="fs-350 xl-fs-250 lg-fs-200 md-fs-170 sm-fs-100 text-cf-dark-gray-transparent fw-600 ls-minus-20px position-relative d-inline-block word-break-normal">together
                                <div class="position-absolute left-minus-140px top-minus-140px z-index-9 xl-left-minus-110px top-minus-140px xl-top-minus-100px md-top-minus-90px z-index-9 xl-w-230px md-w-200px d-none d-md-block" data-anime='{ "translateY": [-15, 0], "scale": [0.5, 1], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
                                    <img src="../assets/images/demo-web-agency-03-v3.png" class="animation-rotation" alt="">
                                    <div class="absolute-middle-center w-100 z-index-minus-1"><img src="../assets/images/demo-web-agency-04-v1_1.png" alt=""></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end section -->
        <!-- start footer -->
		<footer class="p-0">
            <div class="container">
                <div class="row align-items-center mb-4 sm-mb-6">
                    <div class="col-md-10 col-sm-8 text-center text-sm-start xs-mb-25px">
                        <h5 class="mb-0 text-cf-sky fw-400 ls-minus-1px">Let's make something great!</h5>
                    </div>
                    <div class="col-md-2 col-sm-4 text-center text-sm-end">
                        <a href="demo-web-agency.html" class="footer-logo d-inline-block"><img src="assets/images/logos/cf-logo-no-tag-horz.svg" data-at2x="assets/images/logos/cf-logo-no-tag-horz.svg" alt=""></a>
                    </div>
                </div>
                <div class="row align-items-end mb-6 sm-mb-40px">
                    <!-- start footer column -->
                    <div class="col-lg-3 col-sm-4 text-center text-sm-start xs-mb-25px last-paragraph-no-margin">
                        <span class="d-block text-cf-sky ls-minus-05px mb-5px fw-600">Clearfix - Kansas City</span>
                        <p class="w-80 lg-w-100 text-light-medium-gray fs-15 lh-28">
                            14300 Kenneth Rd Suite 200, Leawood, KS 66224</p>
                    </div>
                    <!-- end footer column -->

                    <!-- start footer column -->
                    <div class="col-md-3 col-sm-4 last-paragraph-no-margin ms-auto text-center text-sm-end">
                        <a href="tel:1235678901" class="text-light-medium-gray d-block lh-18 text-dark-gray-hover">
                            888 683 1337</a>
                        <a href="mailto:info@clearfixlabs.com" class="text-light-medium-gray text-medium-gray-hover fw-600 text-decoration-line-bottom">info@cleafixlabs.com</a>
                    </div>
                    <!-- end footer column -->
                </div>
            </div>
            <div class="footer-bottom pt-25px pb-25px" style="background-color: color(display-p3 0.11 0.114 0.121)">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-7 text-center text-lg-start md-mb-10px">
                            <ul class="footer-navbar text-light fw-600 fs-16">
                                <li class="nav-item active"><a href="demo-web-agency.html" class="nav-link text-light">Home</a></li>
                                <li class="nav-item"><a href="demo-web-agency-about.html" class="nav-link text-light">Agency</a></li>
                                <li class="nav-item"><a href="demo-web-agency-expertise.html" class="nav-link text-light">Expertise</a></li>
                                <li class="nav-item"><a href="demo-web-agency-projects.html" class="nav-link text-light">Projects</a></li>
                                <li class="nav-item"><a href="demo-web-agency-people.html" class="nav-link text-light">People</a></li>
                                <li class="nav-item"><a href="demo-web-agency-blog.html" class="nav-link text-light">Blog</a></li>
                                <li class="nav-item"><a href="demo-web-agency-contact.html" class="nav-link text-light">Contact</a></li>
                            </ul>
                        </div>
                        <div class="col-lg-5 text-center text-lg-end">
                            <span class="text-light-medium-gray fs-15">© 2024 clearfix is Proudly Powered by <a href="https://www.activelogic.com/" class="text-decoration-line-bottom text-light-medium-gray text-light-medium-gray-hover fw-500" target="_blank">Active Logic</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end footer -->

        <!-- start sticky elements -->
        <div class="sticky-wrap z-index-1 d-none d-xl-inline-block" data-animation-delay="100" data-shadow-animation="true">
            <div class="elements-social social-icon-style-10">
                <ul class="small-icon dark fw-600">
                    <li class="fs-18">Follow us <span class="separator-line-1px w-30px bg-dark-gray d-inline-block align-middle ms-15px"></span></li>
                    <li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a> </li>
                    <li><a class="dribbble" href="http://www.dribbble.com" target="_blank">Dr.</a></li>
                    <li><a class="twitter" href="http://www.twitter.com" target="_blank">Tw.</a></li>
                    <li><a class="behance" href="http://www.behance.com/" target="_blank">Be.</a> </li>
                </ul>
            </div>
        </div>
        <!-- end sticky elements -->
        <!-- start scroll progress -->
        <div class="scroll-progress d-none d-xxl-block">
            <a href="#" class="scroll-top" aria-label="scroll">
                <span class="scroll-text">Scroll to top</span><span class="scroll-line"><span class="scroll-point"></span></span>
            </a>
        </div>
        <!-- end scroll progress -->
        <!-- javascript libraries -->
        <script type="text/javascript" src="../assets/js/jquery.js"></script>
        <script type="text/javascript" src="../assets/js/vendors.min.js"></script>
        <script type="text/javascript" src="../assets/js/main.js"></script>
    </body>
</html>