Section 3 Change the image and change the pattern

index.html

@@ -228,8 +228,8 @@
     </div>
   </section>
   <!-- Section 1 -->
-  <section class="py-16 bg-white">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <section class="py-16 bg-[var(--vlc-tint)]">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid md:grid-cols-2 gap-12 items-center">
         <div data-aos="fade-right">
           <h2 class="text-3xl md:text-4xl font-bold text-[var(--vlc-navy)] mb-6">Create Seamless, Scalable E-Commerce Experiences</h2>
@@ -289,8 +289,8 @@
           </div>
         </div>
         <div data-aos="fade-left">
-          <img src="http://static.photos/technology/1024x576/2" alt="Connected E-Commerce Ecosystem" class="rounded-lg shadow-xl">
-        </div>
+          <img src="http://static.photos/office/1024x576/5" alt="E-Commerce Dashboard" class="rounded-lg shadow-xl">
+</div>
       </div>
     </div>
   </section>

style.css

@@ -16,12 +16,13 @@
 .service-card .group:hover a {
   transform: translateX(4px);
 }
-
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    padding: 2rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    background:
+        radial-gradient(36px 36px at 90% 10%, rgba(0,32,96,.03) 0 6px, transparent 7px),
+        radial-gradient(36px 36px at 10% 90%, rgba(0,160,233,.03) 0 6px, transparent 7px);
 }
-
 h1 {
 	font-size: 16px;
 	margin-top: 0;