diff --git a/resources/views/templates/services/web-development.blade.php b/resources/views/templates/services/web-development.blade.php
index 0bd30c5..17ed735 100644
--- a/resources/views/templates/services/web-development.blade.php
+++ b/resources/views/templates/services/web-development.blade.php
@@ -172,13 +172,9 @@
         transform: rotate(10deg) scale(1.1);
     }
 
-    /* Floating Doodle Animations */
-    @keyframes float-gentle {
-        0%, 100% { transform: translateY(0) rotate(0deg); }
-        50% { transform: translateY(-10px) rotate(3deg); }
-    }
+    /* Floating Doodle Animations (Removed loop animations on doodles as requested) */
     .floating-doodle {
-        animation: float-gentle 6s ease-in-out infinite;
+        /* static doodle position */
     }
 
     /* Grid layout adjustments */
@@ -907,7 +903,7 @@
             <span><a href="#neler-yapiyoruz" class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:!bg-[#c4191f] hover:!border-[#c4191f] hover:!text-white active:!bg-[#a61217] !rounded-[50rem] mx-2 font-semibold shadow-[0_10px_20px_-10px_rgba(227,30,36,0.5)] transition-all duration-300">{!! t('Çözümlerimiz') !!}</a></span>
             <span><a href="{{ $contactUrl }}" class="btn btn-lg btn-outline-primary !text-[#e31e24] !bg-white border-[#e31e24] hover:!text-white hover:!bg-[#e31e24] hover:!border-[#e31e24] active:!bg-[#e31e24] active:!text-white !rounded-[50rem] !border-[#e31e24] mx-2 font-semibold shadow-[0_10px_20px_-10px_rgba(30,34,40,0.15)] transition-all duration-300">{!! t('Bize Ulaşın') !!}</a></span>
         </div>
-        <div class="flex flex-wrap mx-[-15px] !mt-[3.5rem]" data-cue="fadeIn" data-delay="1600">
+        <div class="flex flex-wrap mx-[-15px] !mt-[3.5rem]" data-cue="fadeIn" data-delay="1600" data-duration="400">
             <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                 <figure class="m-0 p-0">
                     <x-front.page-hero-image
@@ -933,7 +929,7 @@
 <section class="wrapper !bg-[#ffffff] web-dev-section">
     <div class="container pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
         <div class="flex flex-wrap mx-[-15px] !text-center">
-            <div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="tech-header">
+            <div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="tech-header" data-duration="400">
                 <img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block floating-doodle" style="top: -45%; left: 23%" alt="" loading="lazy">
                 <img src="{{ asset('assets/img/svg/doodle4.svg') }}" class="h-8 absolute hidden xl:block lg:block floating-doodle" style="top: 6%; right: 2%" alt="" loading="lazy">
                 <h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{!! t('Teknoloji Ekosistemimiz') !!}</h2>
@@ -945,7 +941,7 @@
 
         <div class="flex flex-wrap mx-[-15px] !mb-28">
             <div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-                <ul class="nav nav-tabs tech-tabs-grid" role="tablist" data-cues="slideInUp" data-group="tech-tabs" data-interval="-200">
+                <ul class="nav nav-tabs tech-tabs-grid" role="tablist" data-cues="slideInUp" data-group="tech-tabs" data-interval="-200" data-duration="400">
                     @foreach($techCategories as $key => $category)
                     <li class="nav-item !mb-[20px]" role="presentation">
                         <a class="nav-link !flex flex-row items-center {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab" href="#tab-tech-{{ $key }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}" role="tab" {!! !$loop->first ? 'tabindex="-1"' : '' !!}>
@@ -964,7 +960,7 @@
                 <div class="tab-content mt-8">
                     @foreach($techCategories as $key => $category)
                     <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="tab-tech-{{ $key }}">
-                        <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] justify-center" data-cues="slideInUp" data-group="tech-cards-{{ $key }}" data-interval="-200">
+                        <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] justify-center" data-cues="slideInUp" data-group="tech-cards-{{ $key }}" data-interval="-200" data-duration="400">
                             @foreach($technologies as $tech)
                                 @if(in_array($tech['name'], $category['items']))
                                 <div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
@@ -989,7 +985,7 @@
 
         {{-- Capabilities Section --}}
         <div id="neler-yapiyoruz" class="flex flex-wrap mx-[-15px] !text-center !mt-12">
-            <div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="cap-header">
+            <div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="cap-header" data-duration="400">
                 <h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{!! t('Neler Yapıyoruz?') !!}</h2>
                 <h3 class="xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] !mb-12 lg:!px-5 xl:!px-0 xxl:!px-6">
                     {!! t('İhtiyaçlarınıza özel, yüksek performanslı') !!} <span class="text-gradient gradient-7">{!! t('dijital çözümler') !!}</span>
@@ -997,7 +993,7 @@
             </div>
         </div>
 
-        <div class="flex flex-wrap mx-[-15px] !mb-28" data-cues="slideInUp" data-group="cap-cards" data-interval="-150">
+        <div class="flex flex-wrap mx-[-15px] !mb-28" data-cues="slideInUp" data-group="cap-cards" data-interval="-150" data-duration="400">
             @foreach($capabilities as $index => $cap)
             <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-6 max-w-full">
                 <div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.06)] border-0 flex flex-col justify-between !rounded-[1.2rem] overflow-hidden">
@@ -1015,7 +1011,7 @@
 
         {{-- How It Works --}}
         <div class="flex flex-wrap mx-[-15px] !text-center">
-            <div class="md:w-10/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="process-header">
+            <div class="md:w-10/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="process-header" data-duration="400">
                 <img src="{{ asset('assets/img/svg/doodle5.svg') }}" class="!w-[5rem] absolute hidden xl:block lg:block floating-doodle" style="bottom: -60%; right: 10%" alt="" loading="lazy">
                 <img src="{{ asset('assets/img/svg/doodle6.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block floating-doodle" style="top: -40%; left: -5%" alt="" loading="lazy">
                 <h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3 !leading-[1.35]">{!! t('Geliştirme Sürecimiz') !!}</h2>
@@ -1028,7 +1024,7 @@
         <div class="flex flex-wrap mx-[-15px] lg:!mb-20 xl:!mb-[10rem]">
             <div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                 <div class="flex flex-wrap mx-[-15px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !text-center items-center">
-                    <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-[-2.5rem] lg:!mb-0 xl:!mb-0 !mt-[50px] xl:!mt-0 lg:!mt-0" data-cue="fadeIn" data-delay="300">
+                    <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-[-2.5rem] lg:!mb-0 xl:!mb-0 !mt-[50px] xl:!mt-0 lg:!mt-0" data-cue="fadeIn" data-delay="300" data-duration="400">
                         <figure class="mx-auto">
                             <picture>
                                 <source srcset="{{ asset('assets/img/illustrations/i9.png') }}" type="image/webp">
@@ -1037,7 +1033,7 @@
                         </figure>
                     </div>
                     <div class="w-full xl:!hidden lg:!hidden !px-[15px] !mt-[50px]"></div>
-                    <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full lg:!-order-1 xl:!-order-1 !mt-[50px] xl:!mt-0 lg:!mt-0" data-cues="slideInUp" data-group="process-steps-left" data-interval="-200">
+                    <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full lg:!-order-1 xl:!-order-1 !mt-[50px] xl:!mt-0 lg:!mt-0" data-cues="slideInUp" data-group="process-steps-left" data-interval="-200" data-duration="400">
                         @foreach(array_slice($processSteps, 0, 2) as $index => $step)
                         <div class="{{ $index === 0 ? '!mb-8' : '' }}">
                             <span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-7">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
@@ -1046,7 +1042,7 @@
                         </div>
                         @endforeach
                     </div>
-                    <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px] xl:!mt-0 lg:!mt-0" data-cues="slideInUp" data-group="process-steps-right" data-interval="-200" data-delay="300">
+                    <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px] xl:!mt-0 lg:!mt-0" data-cues="slideInUp" data-group="process-steps-right" data-interval="-200" data-delay="300" data-duration="400">
                         @foreach(array_slice($processSteps, 2, 2) as $index => $step)
                         <div class="{{ $index === 0 ? '!mb-8' : '' }}">
                             <span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-7">{{ str_pad($index + 3, 2, '0', STR_PAD_LEFT) }}</span>
@@ -1066,7 +1062,7 @@
     <div class="container py-[4.5rem] md:pt-24 lg:pt-0 xl:pt-0 xl:pb-[7rem] lg:pb-[7rem] md:pb-[7rem] !relative" style="z-index: 2;">
         <div class="flex flex-wrap mx-[-15px]">
             <div class="xl:w-11/12 xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-                <div class="!relative !mb-12" data-cues="slideInUp" data-group="faq-header">
+                <div class="!relative !mb-12" data-cues="slideInUp" data-group="faq-header" data-duration="400">
                     <img src="{{ asset('assets/img/svg/doodle7.svg') }}" class="h-7 absolute hidden xl:block lg:block floating-doodle" style="top: -90%; right: -3%" alt="" loading="lazy">
                     <img src="{{ asset('assets/img/svg/doodle8.svg') }}" class="!h-[4.5rem] absolute hidden xl:block lg:block floating-doodle" style="top: -20%; left: -12%" alt="" loading="lazy">
                     <h2 class="!text-[0.8rem] uppercase !text-[#74788d] !mb-3 !text-center !leading-[1.35]">{!! t('Sık Sorulan Sorular') !!}</h2>
@@ -1075,7 +1071,7 @@
                     </h3>
                 </div>
                 <div class="flex flex-wrap mx-[-15px]">
-                    <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-0" data-cues="slideInUp" data-group="faq-list-1" data-interval="-150">
+                    <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-0" data-cues="slideInUp" data-group="faq-list-1" data-interval="-150" data-duration="400">
                         <div id="accordion-web-dev-1" class="accordion-wrapper">
                             @foreach(array_slice($faqs, 0, 3) as $index => $faq)
                             <div class="card accordion-item !mb-5 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
@@ -1093,7 +1089,7 @@
                             @endforeach
                         </div>
                     </div>
-                    <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full" data-cues="slideInUp" data-group="faq-list-2" data-interval="-150" data-delay="300">
+                    <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full" data-cues="slideInUp" data-group="faq-list-2" data-interval="-150" data-delay="300" data-duration="400">
                         <div id="accordion-web-dev-2" class="accordion-wrapper">
                             @foreach(array_slice($faqs, 3, 3) as $index => $faq)
                             <div class="card accordion-item !mb-5 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
@@ -1121,7 +1117,7 @@
 <section class="wrapper !bg-[#ffffff] web-dev-section">
     <div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
         <div class="flex flex-wrap mx-[-15px] !text-center">
-            <div class="md:w-11/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="why-header">
+            <div class="md:w-11/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="why-header" data-duration="400">
                 <img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block floating-doodle" style="top: -20%; right: -12%" alt="" loading="lazy">
                 <img src="{{ asset('assets/img/svg/doodle9.svg') }}" class="!h-[7rem] absolute hidden xl:block lg:block floating-doodle" style="bottom: 5%; left: -17%" alt="" loading="lazy">
                 <h2 class="!text-[0.8rem] uppercase !text-[#74788d] !mb-3 !text-center !leading-[1.35]">{!! t('Neden Trunçgil Teknoloji?') !!}</h2>
@@ -1132,7 +1128,7 @@
         </div>
 
         <div class="flex-wrap mx-[-15px] flex items-start !mb-32">
-            <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!sticky lg:!sticky" style="top: 8rem;" data-cue="slideInLeft">
+            <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!sticky lg:!sticky" style="top: 8rem;" data-cue="slideInLeft" data-duration="400">
                 <figure class="m-0 p-0">
                     <picture>
                         <source srcset="{{ asset('assets/img/illustrations/i17.png') }}" type="image/webp">
@@ -1140,7 +1136,7 @@
                     </picture>
                 </figure>
             </div>
-            <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto" data-cues="slideInUp" data-group="why-list" data-interval="-200" data-delay="300">
+            <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto" data-cues="slideInUp" data-group="why-list" data-interval="-200" data-delay="300" data-duration="400">
                 @foreach($whyChoose as $item)
                 <div class="flex flex-row !mb-8">
                     <div>
@@ -1159,7 +1155,7 @@
 
         {{-- Testimonials --}}
         <div class="flex flex-wrap mx-[-15px]">
-            <div class="md:w-11/12 lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center !relative" data-cues="slideInUp" data-group="test-header">
+            <div class="md:w-11/12 lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center !relative" data-cues="slideInUp" data-group="test-header" data-duration="400">
                 <img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block floating-doodle" style="top: 2%; left: 9%" alt="" loading="lazy">
                 <img src="{{ asset('assets/img/svg/doodle10.svg') }}" class="h-7 absolute hidden xl:block lg:block floating-doodle" style="top: -45%; left: -17%" alt="" loading="lazy">
                 <img src="{{ asset('assets/img/svg/doodle11.svg') }}" class="!h-[4rem] absolute hidden xl:block lg:block floating-doodle" style="top: -40%; right: -15%" alt="" loading="lazy">
@@ -1170,7 +1166,7 @@
             </div>
         </div>
 
-        <div class="itemgrid !mb-10" data-cues="slideInUp" data-group="test-cards" data-interval="-200">
+        <div class="itemgrid !mb-10" data-cues="slideInUp" data-group="test-cards" data-interval="-200" data-duration="400">
             <div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]">
                 @foreach($testimonials as $testimonial)
                 <div class="item md:w-6/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
@@ -1207,7 +1203,7 @@
     </div>
     <div class="container pt-10 xl:pt-10 lg:pt-10 md:pt-16 pb-8 xl:pb-12 lg:pb-12 md:pb-12 text-center xl:text-left lg:text-left">
         <div class="flex flex-wrap mx-0 !mt-[-50px] items-center">
-            <div class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-6/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]" data-cues="slideInUp" data-group="cta-text" data-delay="300">
+            <div class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-6/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]" data-cues="slideInUp" data-group="cta-text" data-delay="300" data-duration="400">
                 <img src="{{ asset('assets/img/svg/doodle2.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block floating-doodle" style="bottom: 36%; right: -25%" alt="" loading="lazy">
                 <img src="{{ asset('assets/img/svg/doodle6.svg') }}" class="!h-[4.5rem] !absolute hidden xl:block lg:block floating-doodle" style="top: -20%; left: -25%" alt="" loading="lazy">
                 <h2 class="!text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] xl:!text-[2rem] !mb-4">
@@ -1220,6 +1216,19 @@
                     <a href="{{ $contactUrl }}" class="btn btn-gradient gradient-7 !rounded-[0.8rem] !px-6 !text-white">{!! t('Projenizi Konuşalım') !!}</a>
                 </div>
             </div>
+            <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mt-lg-n15 xl:!mt-[-10rem] lg:!mt-[-5rem] !mt-[50px]" data-cue="slideInRight" data-delay="300" data-duration="400">
+                <figure class="m-0 p-0">
+                    <picture>
+                        <source srcset="{{ asset('assets/img/illustrations/i12.png') }}" type="image/webp">
+                        <img class="web-dev-illustration web-dev-illustration--cta w-full max-w-full !h-auto" src="{{ asset('assets/img/illustrations/i12.png') }}" alt="{!! t('Trunçgil Teknoloji web geliştirme') !!}" width="1024" height="1024" loading="lazy" decoding="async">
+                    </picture>
+                </figure>
+            </div>
+        </div>
+    </div>
+</section>class="btn btn-gradient gradient-7 !rounded-[0.8rem] !px-6 !text-white">{!! t('Projenizi Konuşalım') !!}</a>
+                </div>
+            </div>
             <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mt-lg-n15 xl:!mt-[-10rem] lg:!mt-[-5rem] !mt-[50px]" data-cue="slideInRight" data-delay="300">
                 <figure class="m-0 p-0">
                     <picture>