diff --git a/app/Views/services.php b/app/Views/services.php
index 884aee2..3014c7c 100644
--- a/app/Views/services.php
+++ b/app/Views/services.php
@@ -243,6 +243,8 @@
     <main class="contant relative transition-all z-2" id="lqd-site-content" style="background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,248,245,1) 100%);">
         <div class="lqd-contents-wrap">
 
+            <!-- Hero Intro Section-->
+            <section class="lqd-section our-vision pt-50 pb-390 py-50" id="solutions">
             <div class="about-card about-intro-card">
                 <p>
                     At Tokslaw, we help businesses turn complex technology challenges into clear, scalable, and secure digital solutions
@@ -258,8 +260,12 @@
                     <button class="about-btn">View Portfolio</button>
                 </div>
             </div>
+            </section>
+            <!-- END Hero Intro Section-->
 
-            <!-- Start Design -->
+
+
+            <!-- Start What We DO -->
             <section class="lqd-section design pt-100 pb-40" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element, figure, .lqd-split-lines .lqd-lines .split-inner", "duration" : 1100 , "startDelay" : 200 , "delay" : 100 , "ease": "expo.out", "initValues": {"y": "80px", "opacity" : 0} , "animations": {"y": "0px", "opacity" : 1}}'>
                 <div class="absolute top-0">
                     <div class="ld-particles-container relative w-full">
@@ -603,6 +609,9 @@
                             </div>
                         </div>
 
+
+<!--                            PROCESS STARTS-->
+
                         <div class="max-w-full animation-element about-card-wrapper">
                             <div class="about-card2">
                                 <div class=" iconbox flex flex-grow-1 relative flex-col iconbox-default iconbox-contents-show-onhover" data-slideelement-onhover="true" data-slideelement-options='{ "visibleElement":  ".iconbox-icon-wrap, p, h3" ,  "hiddenElement":  ".btn" ,  "alignMid":  true, "triggerElement":  ".lqd-iconbox-scale" }'>
@@ -676,30 +685,13 @@
 <!--                            });-->
 <!--                        </script>-->
 
-<!--                        <div class="col col-12 text-center mt-35">-->
-<!--                            <div class="w-full flex flex-wrap items-center justify-center transition-all">-->
-<!--                                <div class="module-text-border border-1  rounded-20 border-black-10 transition-all ld-fancy-heading relative hover:inner-text-black animation-element">-->
-<!--                                    <p class="ld-fh-element relative inner-text-black py-10 px-20 m-0 text-slate-300">-->
-<!--                                        Still have a question?-->
-<!--                                        <a href="#" class="text-slate-300 inner-text-black" target="_blank">-->
-<!--                                            <u>Browse documentation</u>-->
-<!--                                        </a>-->
-<!--                                        or-->
-<!--                                        <a href="#contact-modal" class="text-slate-300 inner-text-black" data-lity="#contact-modal">-->
-<!--                                            <u>Contact.</u>-->
-<!--                                        </a>-->
-<!--                                    </p>-->
-<!--                                </div>-->
-<!--                            </div>-->
-<!--                        </div>-->
 
                     </div>
                 </div>
             </section>
-            <!-- End Design -->
+            <!-- What We DO -->
 
             <!-- Start Services -->
-
             <section class="lqd-section our-vision pt-50 pb-390" id="solutions">
                     <div class="about-card about-intro-card">
                         <h2>Our Process</h2>
@@ -735,209 +727,349 @@
                                 </p>
                             </div>
                         </div>
-
-
                     </div>
             </section>
-
-            <section class="lqd-section our-vision pt-50 pb-390" id="solutions">
-
-
-            <div class="container">
-                <div class="row">
-                    <div class="col col-12 lqd-unit-animation-done" style="">
-                        <div class="w-full relative flex flex-col flex-grow-1 pt-40 pb-10 mb-50 border-bottom border-black module-line">
-                            <div class="container-fluid p-0">
-                                <div class="row items-center">
-                                    <div class="col col-2 animation-element lqd-unit-animation-done" style="">
-                                        <div class="w-30percent relative flex border-top border-black-50">
-                                        </div>
-                                    </div>
-                                    <div class="col col-8 animation-element lqd-unit-animation-done" style="">
-                                        <h6 class="ld-fh-element mb-0/5em text-12 uppercase tracking-0/01em font-normal text-black">Our services</h6>
-                                    </div>
-                                    <div class="col col-2 text-end sm:text-start animation-element lqd-unit-animation-done" style="">
-                                        <h6 class="ld-fh-element mb-0/5em text-12 font-normal">01</h6>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col col-12 col-md-6 lqd-unit-animation-done" style="">
-                        <div class="lqd-imggrp-container relative mb-2em transition-all ca-initvalues-applied lqd-animations-done" data-custom-animations="true" data-ca-options="{&quot;triggerHandler&quot;:&quot;inview&quot;,&quot;animationTarget&quot;:&quot;.lqd-imggrp-single&quot;,&quot;duration&quot;:&quot;1800&quot;,&quot;delay&quot;:&quot;160&quot;,&quot;ease&quot;:&quot;power4.out&quot;,&quot;direction&quot;:&quot;forward&quot;,&quot;initValues&quot;:{&quot;y&quot;:65,&quot;scaleY&quot;:1.1,&quot;opacity&quot;:0},&quot;animations&quot;:{&quot;y&quot;:0,&quot;scaleY&quot;:1,&quot;opacity&quot;:1}}">
-                            <div class="lqd-imggrp-inner flex flex-wrap justify-center">
-                                <div class="lqd-imggrp-single block absolute top-10percent left-0 lqd-unit-animation-done" data-shadow-style="4" style="">
-                                    <div class="lqd-imggrp-img-container">
-                                        <figure><img width="205" height="218" src="./assets/images/demo/asymmetric-agency/our-approach/what-we-do-1.jpg" alt="what we do"></figure>
-                                    </div>
-                                </div>
-                                <div class="lqd-imggrp-single block absolute top-5percent right-0 lqd-unit-animation-done" data-shadow-style="4" style="">
-                                    <div class="lqd-imggrp-img-container">
-                                        <figure><img width="230" height="269" src="./assets/images/demo/asymmetric-agency/our-approach/what-we-do-3.jpg" alt="what we do"></figure></div></div><div class="lqd-imggrp-single block relative mt-140 module-img lqd-unit-animation-done" data-shadow-style="4" style="">
-                                    <div class="lqd-imggrp-img-container">
-                                        <figure>
-                                            <img width="240" height="311" src="./assets/images/demo/asymmetric-agency/our-approach/what-we-do-2.jpg" alt="what we do"></figure>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="col col-12 col-md-6 lqd-unit-animation-done" style="">
-                        <div class="module-content relative flex flex-col items-start pr-5percent pl-15percent lg:pr-0">
-                            <p class="ld-fh-element mb-0/5em text-12 uppercase tracking-0/05em text-black">What we do</p>
-                            <h2 class="ld-fh-element mb-0/4em text-65 leading-0/8em text-black text-init">Product Strategy</h2>
-                            <p class="ld-fh-element mb-2em text-16 leading-1/6em text-black">Through a deep understanding of our audience’s makeup and motivations, we design digital experiences that connect with people.</p>
-                            <div class="w-full relative">
-                                <div class="flex flex-wrap -mx-15 mb-50 md:mb-0">
-                                    <div class="w-50percent px-15 sm:w-full">
-                                        <div class="one-bullet-list mb-1em">
-                                            <ul class="reset-ul module-list">
-                                                <li class="flex items-center mb-0/5em text-black">Website Development</li>
-                                                <li class="flex items-center mb-0/5em text-black">Mobile App Development</li>
-                                                <li class="flex items-center mb-0/5em text-black">Domain & Hosting</li>
-                                                <li class="flex items-center mb-0/5em text-black">UI/UX Design</li>
-                                                <li class="flex items-center mb-0/5em text-black">UI/UX Design</li>
-                                                <li class="flex items-center mb-0/5em text-black">Cloud & DevOps</li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                    <div class="w-50percent px-15 sm:w-full">
-                                        <div class="one-bullet-list mb-1em">
-                                            <ul class="reset-ul module-list">
-                                                <li class="flex items-center mb-0/5em text-black">SEO Performance</li>
-                                                <li class="flex items-center mb-0/5em text-black">Email Marketing</li>
-                                                <li class="flex items-center mb-0/5em text-black">WordPress</li>
-                                                <li class="flex items-center mb-0/5em text-black">SEO Optimization</li>
-                                                <li class="flex items-center mb-0/5em text-black">Cloud & DevOps</li>
-                                                <li class="flex items-center mb-0/5em text-black">Ongoing Support & Maintenance</li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            </section>
-
         </div>
 
-
-        <section class="lqd-section approach pt-40 pb-90 ca-initvalues-applied lqd-animations-done" id="approach" data-custom-animations="true" data-ca-options="{&quot;triggerHandler&quot;:&quot;inview&quot;,&quot;animationTarget&quot;:&quot;.col&quot;,&quot;duration&quot;:&quot;1800&quot;,&quot;delay&quot;:&quot;160&quot;,&quot;ease&quot;:&quot;power4.out&quot;,&quot;direction&quot;:&quot;forward&quot;,&quot;initValues&quot;:{&quot;x&quot;:30,&quot;transformOriginX&quot;:50,&quot;transformOriginY&quot;:50,&quot;transformOriginZ&quot;:&quot;0px&quot;,&quot;opacity&quot;:0},&quot;animations&quot;:{&quot;x&quot;:0,&quot;transformOriginX&quot;:50,&quot;transformOriginY&quot;:50,&quot;transformOriginZ&quot;:&quot;0px&quot;,&quot;opacity&quot;:1}}" data-section-luminosity="light"><div class="container">
-                <div class="col col-12 lqd-unit-animation-done" style="">
-                    <div class="w-full relative flex flex-col flex-grow-1 pt-40 pb-10 mb-50 border-bottom border-black module-line">
-                        <div class="container-fluid p-0">
-                            <div class="row items-center">
-                                <div class="col col-2 animation-element lqd-unit-animation-done" style="">
-                                    <div class="w-30percent relative flex border-top border-black-50">
-                                    </div>
-                                </div>
-                                <div class="col col-8 animation-element lqd-unit-animation-done" style="">
-                                    <h6 class="ld-fh-element mb-0/5em text-12 uppercase tracking-0/01em font-normal text-black">Software Development Process</h6>
-                                </div>
-                                <div class="col col-2 text-end sm:text-start animation-element lqd-unit-animation-done" style="">
-                                    <h6 class="ld-fh-element mb-0/5em text-12 font-normal">02</h6>
-                                </div>
-                            </div>
-                        </div>
+        <!-- Start Who We Work WITH -->
+        <section class="lqd-section our-vision pt-50 pb-390 py-50" id="solutions">
+            <div class="about-card about-intro-card">
+                <h2>Who We Help</h2>
+                <h2>Tokslaw works with:</h2>
+                <div class="about-card3-wrapper">
+                    <div class="about-card3">
+                        <p>
+                            Startups building MVPs
+                        </p>
                     </div>
-                </div>
-
-                <div class="row">
-                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
-                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">
-                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">
-                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">
-                                    <span class="ld-fh-txt-outline">1</span> 1</p>
-                            </div>
-                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 1</p>
-                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Discovery.</h2>
-                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Understanding your goals,target audience, and project requirements through in depth discussions and collaborative planning sessions.</p>
-                        </div>
+                    <div class="about-card3">
+                        <p>
+                            Small businesses needing custom software
+                        </p>
                     </div>
-                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
-                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">
-                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">
-                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">
-                                    <span class="ld-fh-txt-outline">2</span> 2</p>
-                            </div>
-                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 2</p>
-                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Planning.</h2>
-                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Tailor made digital products and creative solutions for small businesses and freelancers.</p>
-                        </div>
+                    <div class="about-card3">
+                        <p>
+                            Enterprises modernizing legacy systems
+                        </p>
                     </div>
-                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
-                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">
-                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">
-                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">
-                                    <span class="ld-fh-txt-outline">3</span> 3</p>
-                            </div>
-                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 3</p>
-                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Wireframe Design.</h2>
-                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Tailor made digital products and creative solutions for small businesses and freelancers.</p>
-                        </div>
+                    <div class="about-card3">
+                        <p>
+                            Healthcare and wellness platforms.
+                        </p>
                     </div>
-                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
-                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">
-                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">
-                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">
-                                    <span class="ld-fh-txt-outline">4</span> 4</p>
-                            </div>
-                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 4</p>
-                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Front-end Development.</h2>
-                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Tailor made digital products and creative solutions for small businesses and freelancers.</p>
-                        </div>
+                    <div class="about-card3">
+                        <p>
+                            Logistics and mobility companies.
+                        </p>
                     </div>
-                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
-                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">
-                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">
-                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">
-                                    <span class="ld-fh-txt-outline">5</span> 5</p>
-                            </div>
-                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 5</p>
-                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Back-end Development.</h2>
-                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Tailor made digital products and creative solutions for small businesses and freelancers.</p>
-                        </div>
+                    <div class="about-card3">
+                        <p>
+                            Cybersecurity-focused teams.
+                        </p>
                     </div>
-                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
-                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">
-                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">
-                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">
-                                    <span class="ld-fh-txt-outline">6</span> 6</p>
-                            </div>
-                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 6</p>
-                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Integration.</h2>
-                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Tailor made digital products and creative solutions for small businesses and freelancers.</p>
-                        </div>
+                    <div class="about-card3">
+                        <p>
+                            Founders launching web or mobile apps.
+                        </p>
                     </div>
-                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
-                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">
-                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">
-                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">
-                                    <span class="ld-fh-txt-outline">7</span> 7</p>
-                            </div>
-                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 7</p>
-                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Testing</h2>
-                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Our web development starts and ends with a best-in-class experience strategy.</p>
-                        </div>
+                    <div class="about-card3">
+                        <p>
+                            Professionals building personal brands.
+                        </p>
                     </div>
-                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
-                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">
-                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">
-                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">
-                                    <span class="ld-fh-txt-outline">8</span> 8</p>
-                            </div><p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 8</p>
-                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Deployment.</h2>
-                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">We look to engage with our clients beyond the conventional design and agency relationship,</p>
-                        </div>
+                    <div class="about-card3">
+                        <p>
+                            Organizations needing architecture clarity.
+                        </p>
                     </div>
                 </div>
             </div>
         </section>
 
+        <!-- END Who We Work WITH -->
+
+
+        <!-- Start Why Work With Toks -->
+        <section class="lqd-section our-vision pt-50 pb-390 py-50" id="solutions">
+            <div class="about-card about-intro-card">
+                <h2>Why Work With Tokslaw?</h2>
+                <h5>
+                    Tokslaw brings a rare combination of strategic architecture and hands-on engineering. We do not just create diagrams, and we do not just write code. We connect the two.
+                </h5>
+                <h2>You get a partner who understands:</h2>
+                <div class="about-card3-wrapper">
+                    <div class="about-card3">
+                        <p>
+                            Business strategy
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Software architecture
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Full-stack development.
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Cloud and DevOps.
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Cybersecurity
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            APIs and integrations.
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            User experience.
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Scalable delivery.
+                        </p>
+                    </div>
+                </div>
+                <div class="belief-box">
+                    <p>
+                        The result is technology that is built well and built with purpose.
+                    </p>
+                </div>
+            </div>
+        </section>
+        <!-- END Why Work With Toks -->
+
+        <!-- Start Why Work With Toks -->
+        <section class="lqd-section our-vision pt-50 pb-390 py-50" id="solutions">
+            <div class="about-card about-intro-card">
+                <h2>Featured Areas of Expertise</h2>
+                <div class="about-card3-wrapper">
+                    <div class="about-card3">
+                        <p>
+                            Enterprise Architecture
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Solution Architecture
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Full-stack Development.
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            React / Next.js / TypeScript / Angular.
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Node.js / Express.
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            PHP / Laravel / CodeIgniter.
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            REST APIs
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Microservices
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            AWS Cloud
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Docker
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            GitHub / GitLab / Jenkins CI/CD
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            DevSecOps
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Cybersecurity
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            WordPress
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            Technical SEO
+                        </p>
+                    </div>
+                    <div class="about-card3">
+                        <p>
+                            AI Product Strategy
+                        </p>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+        <!-- END Why Work With Toks -->
+
+        <!-- Connect -->
+        <div class="about-card about-intro-card connect-card">
+            <h2>Ready to Build Something Better?</h2>
+            <p>
+                Whether you need a website, a secure application, an architecture roadmap, a cloud-ready deployment, or a digital transformation partner,
+                Tokslaw can help you move from idea to execution.
+            </p>
+
+            <strong>
+                Let’s design, build, and secure your next digital solution.
+            </strong>
+
+            <div class="button-wrapper">
+                <button class="about-btn">Get Started</button>
+            </div>
+        </div>
+
+
+
+<!--        <section class="lqd-section approach pt-40 pb-90 ca-initvalues-applied lqd-animations-done" id="approach" data-custom-animations="true" data-ca-options="{&quot;triggerHandler&quot;:&quot;inview&quot;,&quot;animationTarget&quot;:&quot;.col&quot;,&quot;duration&quot;:&quot;1800&quot;,&quot;delay&quot;:&quot;160&quot;,&quot;ease&quot;:&quot;power4.out&quot;,&quot;direction&quot;:&quot;forward&quot;,&quot;initValues&quot;:{&quot;x&quot;:30,&quot;transformOriginX&quot;:50,&quot;transformOriginY&quot;:50,&quot;transformOriginZ&quot;:&quot;0px&quot;,&quot;opacity&quot;:0},&quot;animations&quot;:{&quot;x&quot;:0,&quot;transformOriginX&quot;:50,&quot;transformOriginY&quot;:50,&quot;transformOriginZ&quot;:&quot;0px&quot;,&quot;opacity&quot;:1}}" data-section-luminosity="light"><div class="container">-->
+<!--                <div class="col col-12 lqd-unit-animation-done" style="">-->
+<!--                    <div class="w-full relative flex flex-col flex-grow-1 pt-40 pb-10 mb-50 border-bottom border-black module-line">-->
+<!--                        <div class="container-fluid p-0">-->
+<!--                            <div class="row items-center">-->
+<!--                                <div class="col col-2 animation-element lqd-unit-animation-done" style="">-->
+<!--                                    <div class="w-30percent relative flex border-top border-black-50">-->
+<!--                                    </div>-->
+<!--                                </div>-->
+<!--                                <div class="col col-8 animation-element lqd-unit-animation-done" style="">-->
+<!--                                    <h6 class="ld-fh-element mb-0/5em text-12 uppercase tracking-0/01em font-normal text-black">Software Development Process</h6>-->
+<!--                                </div>-->
+<!--                                <div class="col col-2 text-end sm:text-start animation-element lqd-unit-animation-done" style="">-->
+<!--                                    <h6 class="ld-fh-element mb-0/5em text-12 font-normal">02</h6>-->
+<!--                                </div>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!---->
+<!--                <div class="row">-->
+<!--                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">-->
+<!--                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">-->
+<!--                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">-->
+<!--                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">-->
+<!--                                    <span class="ld-fh-txt-outline">1</span> 1</p>-->
+<!--                            </div>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 1</p>-->
+<!--                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Discovery.</h2>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Understanding your goals,target audience, and project requirements through in depth discussions and collaborative planning sessions.</p>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">-->
+<!--                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">-->
+<!--                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">-->
+<!--                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">-->
+<!--                                    <span class="ld-fh-txt-outline">2</span> 2</p>-->
+<!--                            </div>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 2</p>-->
+<!--                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Planning.</h2>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Tailor made digital products and creative solutions for small businesses and freelancers.</p>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">-->
+<!--                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">-->
+<!--                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">-->
+<!--                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">-->
+<!--                                    <span class="ld-fh-txt-outline">3</span> 3</p>-->
+<!--                            </div>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 3</p>-->
+<!--                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Wireframe Design.</h2>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Tailor made digital products and creative solutions for small businesses and freelancers.</p>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">-->
+<!--                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">-->
+<!--                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">-->
+<!--                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">-->
+<!--                                    <span class="ld-fh-txt-outline">4</span> 4</p>-->
+<!--                            </div>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 4</p>-->
+<!--                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Front-end Development.</h2>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Tailor made digital products and creative solutions for small businesses and freelancers.</p>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">-->
+<!--                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">-->
+<!--                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">-->
+<!--                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">-->
+<!--                                    <span class="ld-fh-txt-outline">5</span> 5</p>-->
+<!--                            </div>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 5</p>-->
+<!--                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Back-end Development.</h2>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Tailor made digital products and creative solutions for small businesses and freelancers.</p>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">-->
+<!--                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">-->
+<!--                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">-->
+<!--                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">-->
+<!--                                    <span class="ld-fh-txt-outline">6</span> 6</p>-->
+<!--                            </div>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 6</p>-->
+<!--                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Integration.</h2>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Tailor made digital products and creative solutions for small businesses and freelancers.</p>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">-->
+<!--                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">-->
+<!--                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">-->
+<!--                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">-->
+<!--                                    <span class="ld-fh-txt-outline">7</span> 7</p>-->
+<!--                            </div>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 7</p>-->
+<!--                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Testing</h2>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Our web development starts and ends with a best-in-class experience strategy.</p>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                    <div class="col col-12 col-md-4 lqd-unit-animation-done" style="">-->
+<!--                        <div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">-->
+<!--                            <div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">-->
+<!--                                <p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">-->
+<!--                                    <span class="ld-fh-txt-outline">8</span> 8</p>-->
+<!--                            </div><p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 8</p>-->
+<!--                            <h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Deployment.</h2>-->
+<!--                            <p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">We look to engage with our clients beyond the conventional design and agency relationship,</p>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--            </div>-->
+<!--        </section>-->
+
 
 
             <!-- End Services -->
@@ -947,28 +1079,28 @@
                 <div class="absolute w-full max-w-full bottom-0 ltr-left-0">
                     <div class="lqd-throwable-scene relative pointer-events-none overflow-hidden" data-lqd-throwable-scene>
                         <p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-1" data-lqd-throwable-el>
-                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-orange-200 sm:text-16">Elementor Support</span>
+                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-orange-200 sm:text-16">UI/UX Design</span>
                         </p>
                         <p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-2" data-lqd-throwable-el>
-                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-blue-100 sm:text-16">Mobile Builder</span>
+                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-blue-100 sm:text-16">Mobile Application</span>
                         </p>
                         <p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-3" data-lqd-throwable-el>
-                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-green-200 sm:text-16">Top-Notch Performance</span>
+                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-green-200 sm:text-16">Performance & Optimization</span>
                         </p>
                         <p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-4" data-lqd-throwable-el>
-                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-blue-300 sm:text-16">Next-gen Technologies</span>
+                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-blue-300 sm:text-16">AI Technologies</span>
                         </p>
                         <p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-5" data-lqd-throwable-el>
-                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-blue-200 sm:text-16">WooCommerce Builder</span>
+                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-blue-200 sm:text-16">WordPress</span>
                         </p>
                         <p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-6" data-lqd-throwable-el>
-                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-green-500 sm:text-16">Adaptive Colors</span>
+                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-green-500 sm:text-16">Brand Strategy</span>
                         </p>
                         <p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-7" data-lqd-throwable-el>
-                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-orange-300 sm:text-16">Section Flow</span>
+                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-orange-300 sm:text-16">Data Engineering</span>
                         </p>
                         <p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-8" data-lqd-throwable-el>
-                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-green-500 sm:text-16">Text Reveal</span>
+                            <span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-green-500 sm:text-16">Bespoke Software Development</span>
                         </p>
                     </div>
                 </div>
@@ -992,35 +1124,42 @@
                                     <div class="col col-6 col-xl-3 px-30 carousel-item flex flex-col justify-center">
                                         <div class="carousel-item-inner relative w-full">
                                             <div class="carousel-item-content relative w-full">
-                                                <img width="96" height="29" src="./assets/images/demo/start-hub-4/services/client-amazon.svg" alt="amazon">
+                                                <img width="96" height="29" src="./assets/images/demo/start-hub-8/tokslaw-logo-.svg" alt="tokslaw">
                                             </div>
                                         </div>
                                     </div>
                                     <div class="col col-6 col-xl-3 px-30 carousel-item flex flex-col justify-center">
                                         <div class="carousel-item-inner relative w-full">
                                             <div class="carousel-item-content relative w-full">
-                                                <img width="87" height="20" src="./assets/images/demo/start-hub-4/services/client-amd-logo.svg" alt="amd">
+                                                <img width="87" height="20" src="./assets/images/demo/start-hub-8/WrenchBoard.webp" alt="WrenchBoard">
                                             </div>
                                         </div>
                                     </div>
                                     <div class="col col-6 col-xl-3 px-30 carousel-item flex flex-col justify-center">
                                         <div class="carousel-item-inner relative w-full">
                                             <div class="carousel-item-content relative w-full">
-                                                <img width="127" height="24" src="./assets/images/demo/start-hub-4/services/client-dropcam.svg" alt="dropcam">
+                                                <img width="50" height="20" src="./assets/images/demo/start-hub-8/automedsys.ai logo.png" alt="automedsys">
                                             </div>
                                         </div>
                                     </div>
                                     <div class="col col-6 col-xl-3 px-30 carousel-item flex flex-col justify-center">
                                         <div class="carousel-item-inner relative w-full">
                                             <div class="carousel-item-content relative w-full">
-                                                <img width="84" height="36" src="./assets/images/demo/start-hub-4/services/client-marvel.svg" alt="marvel">
+                                                <img width="84" height="36" src="./assets/images/demo/start-hub-8/mermsai.png" alt="mermsemr">
                                             </div>
                                         </div>
                                     </div>
                                     <div class="col col-6 col-xl-3 px-30 carousel-item flex flex-col justify-center">
                                         <div class="carousel-item-inner relative w-full">
                                             <div class="carousel-item-content relative w-full">
-                                                <img width="76" height="27" src="./assets/images/demo/start-hub-4/services/client-nike.svg" alt="nike">
+                                                <img width="76" height="27" src="./assets/images/demo/start-hub-8/myfit-logo-2.png" alt="MyFit">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col col-6 col-xl-3 px-30 carousel-item flex flex-col justify-center">
+                                        <div class="carousel-item-inner relative w-full">
+                                            <div class="carousel-item-content relative w-full">
+                                                <img width="76" height="27" src="./assets/images/demo/start-hub-8/chiefsoft-lg.png" alt="ChiefSoft">
                                             </div>
                                         </div>
                                     </div>
@@ -1142,12 +1281,12 @@
                     <div class="mr-20 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="106" height="32" src="./assets/images/demo/start-hub-8/tokslaw-logo-.svg" alt="Tokslaw">
+                                <img width="40" height="40" style="object-fit: contain;" src="./assets/images/demo/start-hub-8/tokslaw_logo_main.png" alt="Tokslaw">
                             </figure>
                         </div>
                     </div>
                     <div class="ld-fancy-heading relative">
-                        <p class="ld-fh-element relative m-0 text-14 text-white-60">© 2025 Tokslaw.</p>
+                        <p class="ld-fh-element relative m-0 text-14 text-white-60">© 2026 Tokslaw. Developed by Tokslaw.</p>
                     </div>
                 </div>
                 <div class="w-50percent mt-55 text-end sm:text-start sm:w-full module-social">
diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css
index 55a1e1a..828e274 100644
--- a/public/assets/css/styles.css
+++ b/public/assets/css/styles.css
@@ -472,7 +472,7 @@ body {
 /* Parent container for the cards */
 .about-card3-wrapper {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     column-gap: 28px;
     row-gap: 36px;
     align-items: stretch;
diff --git a/public/assets/images/demo/dark-portfolio/mermsai.png b/public/assets/images/demo/start-hub-8/mermsai.png
similarity index 100%
rename from public/assets/images/demo/dark-portfolio/mermsai.png
rename to public/assets/images/demo/start-hub-8/mermsai.png
diff --git a/public/assets/images/demo/start-hub-8/myfit-logo-2.png b/public/assets/images/demo/start-hub-8/myfit-logo-2.png
new file mode 100755
index 0000000..4cf4f49
Binary files /dev/null and b/public/assets/images/demo/start-hub-8/myfit-logo-2.png differ