<!-- Start Services -->
<section class="lqd-section services bg-white rounded-10 mb-90">
    <div class="container">
        <div class="row">
            <div class="col col-12 text-start" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element", "ease": "back.out", "direction": "backward", "initValues": {"x": "-100px", "opacity" : 0} , "animations": {"x": "0px", "opacity" : 1}}'>
                <div class="w-full flex flex-wrap justify-between items-center pt-35">
                    <div class="ld-fancy-heading relative lg:w-50percent sm:w-full module-title animation-element">
                        <h2 class="ld-fh-element text-28 m-0  inline-block relative">Services</h2>
                    </div>
                    <div class="flex items-center justify-end lg:w-50percent sm:w-full sm:justify-start module-btn">
                        <div class="ld-fancy-heading relative mr-10 py-5 px-15 mb-0 border-2 border-black rounded-100 animation-element">
                            <h5 class="ld-fh-element inline-block relative text-14 uppercase tracking-1 m-0">Our services</h5>
                        </div>
                        <a href="#" class="text-14 font-bold uppercase text-black rounded-100 btn btn-solid btn-custom-size btn-icon-block btn-icon-top w-30 h-30 bg-accent border-none p-0" target="_blank" rel="nofollow">
													<span class="btn-icon w-1em">
														<svg xmlns="http://www.w3.org/2000/svg" width="10.625" height="10.625" viewBox="0 0 10.625 10.625">
															<path d="M-1.76-11.322H5.313V-4.25H3.885V-8.932L-4.316-.7l-1-1,8.2-8.234H-1.76Z" transform="translate(5.313 11.322)"></path>
														</svg>
													</span>
                        </a>
                    </div>
                    <div class="divider w-full max-w-full mt-10 py-15">
                        <span class="w-full border-bottom border-black-50"></span>
                    </div>
                </div>
            </div>
            <div class="col col-12 pt-55 pb-70 px-10 module-col" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element", "ease": "back.out", "direction": "backward", "initValues": {"y": "100px", "opacity" : 0} , "animations": {"y": "0px", "opacity" : 1}}'>
                <div class="accordion accordion-title-underlined accordion-sm animation-element" id="accordion-services" role="tablist" aria-multiselectable="true">
                    <div class="accordion-item panel active">
                        <div class="accordion-heading" role="tab" id="heading-item-one">
                            <h4 class="accordion-title font-normal">
                                <a class="collapsed" role="button" data-bs-toggle="collapse" href="#collapse-item-one" aria-expanded="true" aria-controls="collapse-item-one">
                                    <span class="accordion-title-txt">Make your <b>eCommerce business stand out.</b></span>
                                    <span class="accordion-expander text-24 w-60 h-60 flex items-center justify-center p-0 border-2 rounded-full  border-lightgray flex-shrink-0">
																<i class="lqd-icn-ess icon-ion-ios-add"></i>
																<i class="lqd-icn-ess icon-ion-ios-remove"></i>
															</span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapse-item-one" class="accordion-collapse collapse show" data-bs-parent="#accordion-services" role="tabpanel" aria-labelledby="heading-item-one">
                            <div class="accordion-content py-1em">
                                <div class="flex flex-wrap items-end">
                                    <div class="w-40percent flex flex-wrap align-content-end items-end gap-0 pr-150 sm:w-full module-content">
                                        <div class="lqd-counter relative lqd-counter-default -mb-20 text-black w-auto">
                                            <div class="lqd-counter-element relative font-medium mb-0" data-enable-counter="true" data-counter-options='{"targetNumber": "6"}'>
                                                <span class="block">6</span>
                                            </div>
                                        </div>
                                        <div class="ld-fancy-heading relative">
                                            <span class="ld-fh-element inline-block relative text-16 leading-20 mb-2em italic text-gray-500 xl:m-0">Years of<br>experience</span>
                                        </div>
                                        <div class="ld-fancy-heading relative mt-10">
                                            <p class="ld-fh-element mb-0/5em inline-block relative">We craft premium digital work for web, mobile and experiential with creative agencies and global brands alike – putting passion, pride and plenty of elbow grease into everything we do.</p>
                                        </div>
                                    </div>
                                    <div class="w-60percent sm:w-full sm:order-first">
                                        <div class="lqd-imggrp-single block relative">
                                            <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
                                                <figure class="w-full relative">
                                                    <img width="1038" height="614" src="./assets/images/demo/asymmetric-9/services/acc-img-1.jpg" alt="services">
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item panel">
                        <div class="accordion-heading" role="tab" id="heading-item-two">
                            <h4 class="accordion-title font-normal">
                                <a class="collapsed" role="button" data-bs-toggle="collapse" href="#collapse-item-two" aria-expanded="false" aria-controls="collapse-item-two">
                                    <span class="accordion-title-txt">Increase your <b>conversion rate best-in-class experience strategy.</b></span>
                                    <span class="accordion-expander text-24 w-60 h-60 flex items-center justify-center p-0 border-2 rounded-full  border-lightgray flex-shrink-0">
																<i class="lqd-icn-ess icon-ion-ios-add"></i>
																<i class="lqd-icn-ess icon-ion-ios-remove"></i>
															</span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapse-item-two" class="accordion-collapse collapse" data-bs-parent="#accordion-services" role="tabpanel" aria-labelledby="heading-item-two">
                            <div class="accordion-content py-1em">
                                <div class="flex flex-wrap items-end">
                                    <div class="w-40percent flex flex-wrap align-content-end items-end gap-0 pr-150 sm:w-full module-content">
                                        <div class="lqd-counter relative lqd-counter-default -mb-20 text-black w-auto">
                                            <div class="lqd-counter-element relative font-medium mb-0" data-enable-counter="true" data-counter-options='{"targetNumber": "6"}'>
                                                <span class="block">6</span>
                                            </div>
                                        </div>
                                        <div class="ld-fancy-heading relative">
                                            <span class="ld-fh-element inline-block relative text-16 leading-20 mb-2em italic text-gray-500 xl:m-0">Years of<br>experience</span>
                                        </div>
                                        <div class="ld-fancy-heading relative mt-10">
                                            <p class="ld-fh-element mb-0/5em inline-block relative">We craft premium digital work for web, mobile and experiential with creative agencies and global brands alike – putting passion, pride and plenty of elbow grease into everything we do.</p>
                                        </div>
                                    </div>
                                    <div class="w-60percent sm:w-full sm:order-first">
                                        <div class="lqd-imggrp-single block relative">
                                            <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
                                                <figure class="w-full relative">
                                                    <img width="1038" height="614" src="./assets/images/demo/asymmetric-9/services/acc-img-1.jpg" alt="services">
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item panel">
                        <div class="accordion-heading" role="tab" id="heading-item-three">
                            <h4 class="accordion-title font-normal">
                                <a class="collapsed" role="button" data-bs-toggle="collapse" href="#collapse-item-three" aria-expanded="false" aria-controls="collapse-item-three">
                                    <span class="accordion-title-txt">Learn how to <b>laser focus and target your audience.</b></span>
                                    <span class="accordion-expander text-24 w-60 h-60 flex items-center justify-center p-0 border-2 rounded-full  border-lightgray flex-shrink-0">
																<i class="lqd-icn-ess icon-ion-ios-add"></i>
																<i class="lqd-icn-ess icon-ion-ios-remove"></i>
															</span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapse-item-three" class="accordion-collapse collapse" data-bs-parent="#accordion-services" role="tabpanel" aria-labelledby="heading-item-three">
                            <div class="accordion-content py-1em">
                                <div class="flex flex-wrap items-end">
                                    <div class="w-40percent flex flex-wrap align-content-end items-end gap-0 pr-150 sm:w-full module-content">
                                        <div class="lqd-counter relative lqd-counter-default -mb-20 text-black w-auto">
                                            <div class="lqd-counter-element relative font-medium mb-0" data-enable-counter="true" data-counter-options='{"targetNumber": "6"}'>
                                                <span class="block">6</span>
                                            </div>
                                        </div>
                                        <div class="ld-fancy-heading relative">
                                            <span class="ld-fh-element inline-block relative text-16 leading-20 mb-2em italic text-gray-500 xl:m-0">Years of<br>experience</span>
                                        </div>
                                        <div class="ld-fancy-heading relative mt-10">
                                            <p class="ld-fh-element mb-0/5em inline-block relative">We craft premium digital work for web, mobile and experiential with creative agencies and global brands alike – putting passion, pride and plenty of elbow grease into everything we do.</p>
                                        </div>
                                    </div>
                                    <div class="w-60percent sm:w-full sm:order-first">
                                        <div class="lqd-imggrp-single block relative">
                                            <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
                                                <figure class="w-full relative">
                                                    <img width="1038" height="614" src="./assets/images/demo/asymmetric-9/services/acc-img-1.jpg" alt="services">
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Services -->

<!-- Start Section Flow -->
<section class="lqd-section section-flow bg-white rounded-10 mb-90">
    <div class="container-fluid">
        <div class="row">
            <div class="col col-12">
                <div class="lqd-section-flow items-start flex-wrap" data-lqd-section-flow="true">
                    <div class="lqd-section-flow-panel lqd-section-flow-panel-start col-lg-6 h-vh-100 px-0 sticky top-0 left-0 overflow-hidden">
                        <div class="lqd-section-flow-panel-start-inner">
                            <div class="lqd-section-flow-item lqd-overlay flex overflow-hidden">
                                <div class="lqd-section-flow-item-inner h-vh-100">
                                    <img class="h-full objfit-cover objpos-center" src="./assets/images/demo/asymmetric-9/section-flow/acc-img-1.jpg" title="section-flow-1" alt="section-flow-1">
                                </div>
                            </div>
                            <div class="lqd-section-flow-item lqd-overlay flex overflow-hidden">
                                <div class="lqd-section-flow-item-inner h-vh-100">
                                    <img class="h-full objfit-cover objpos-center" src="./assets/images/demo/asymmetric-9/section-flow/Img.jpg" title="Img" alt="Img">
                                </div>
                            </div>
                            <div class="lqd-section-flow-item lqd-overlay flex overflow-hidden">
                                <div class="lqd-section-flow-item-inner h-vh-100">
                                    <img class="h-full objfit-cover objpos-center" src="./assets/images/demo/asymmetric-9/section-flow/Img-1.jpg" title="Img-1" alt="Img-1">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lqd-section-flow-panel lqd-section-flow-panel-end col-lg-6">
                        <div class="lqd-section-flow-item flex items-center">
                            <div class="lqd-section-flow-item-inner">
                                <div class="lqd-section-flow-content-mobile mb-30">
                                    <img src="./assets/images/demo/asymmetric-9/section-flow/acc-img-1.jpg" title="section-flow-1" alt="section-flow-1">
                                </div>
                                <div class="flex flex-wrap py-20percent">
                                    <div class="ld-fancy-heading relative py-5 px-15 leading-1 bg-gray rounded-4 mb-15">
                                        <h6 class="ld-fh-element inline-block relative text-10 font-bold uppercase tracking-1 m-0">7. Creative</h6>
                                    </div>
                                    <div class="ld-fancy-heading relative">
                                        <h2 class="ld-fh-element inline-block relative text-42 leading-0/9em mb-0/75em">We create world-class digital products materials that communicate clearly.</h2>
                                    </div>
                                    <a href="./page-asymmetric-agency-case-studies.html" class="btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered capitalize tracking-0 font-bold leading-1em text-14 text-black hover:inner-text-white hover:inner-bg-black">
                                        <span class="btn-txt" data-text="Explore Details">Explore Details</span>
                                        <span class="btn-icon w-55 h-55 border-1 border-black-10 text-black-40 mr-15 inner-bg-black inner-text-white text-1/5em">
																	<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-add"></i>
																</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="lqd-section-flow-item flex items-center">
                            <div class="lqd-section-flow-item-inner">
                                <div class="lqd-section-flow-content-mobile mb-30">
                                    <img src="./assets/images/demo/asymmetric-9/section-flow/Img.jpg" title="Img" alt="Img">
                                </div>
                                <div class="flex flex-wrap py-20percent">
                                    <div class="ld-fancy-heading relative py-5 px-15 leading-1 bg-gray rounded-4 mb-15">
                                        <h6 class="ld-fh-element inline-block relative text-10 font-bold uppercase tracking-1 m-0">3. Agencies</h6>
                                    </div>
                                    <div class="ld-fancy-heading relative">
                                        <h2 class="ld-fh-element inline-block relative text-42 leading-0/9em mb-0/75em">We craft premium designs for agencies and global brands around the globe.</h2>
                                    </div>
                                    <a href="./page-asymmetric-agency-case-studies.html" class="btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered capitalize tracking-0 font-bold leading-1em text-14 text-black hover:inner-text-white hover:inner-bg-black">
                                        <span class="btn-txt" data-text="Explore Details">Explore Details</span>
                                        <span class="btn-icon w-55 h-55 border-1 border-black-10 text-black-40 mr-15 inner-bg-black inner-text-white text-1/5em">
																	<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-add"></i>
																</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="lqd-section-flow-item flex items-center">
                            <div class="lqd-section-flow-item-inner">
                                <div class="lqd-section-flow-content-mobile mb-30">
                                    <img src="./assets/images/demo/asymmetric-9/section-flow/Img-1.jpg" title="Img-1" alt="Img-1">
                                </div>
                                <div class="flex flex-wrap py-20percent">
                                    <div class="ld-fancy-heading relative py-5 px-15 leading-1 bg-gray rounded-4 mb-15">
                                        <h6 class="ld-fh-element inline-block relative text-10 font-bold uppercase tracking-1 m-0">2. Brands</h6>
                                    </div>
                                    <div class="ld-fancy-heading relative">
                                        <h2 class="ld-fh-element inline-block relative text-42 leading-0/9em mb-0/75em">We create world-class digital products materials that communicate clearly.</h2>
                                    </div>
                                    <a href="./page-asymmetric-agency-case-studies.html" class="btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered capitalize tracking-0 font-bold leading-1em text-14 text-black hover:inner-text-white hover:inner-bg-black">
                                        <span class="btn-txt" data-text="Explore Details">Explore Details</span>
                                        <span class="btn-icon w-55 h-55 border-1 border-black-10 text-black-40 mr-15 inner-bg-black inner-text-white text-1/5em">
																	<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-add"></i>
																</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Section Flow -->