Section 4 : us left side image design pattern

index.html

@@ -358,18 +358,27 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
       <p class="text-lg text-gray-700">VLC's product portfolio supports configurable security controls tailored to individual business requirements. Sensitive customer information is protected using strong encryption standards that align with enterprise and regulatory expectations.</p>
     </div>
   </section>
-
   <!-- Section 4: Monitoring & Data Protection -->
   <section class="py-16 px-4 sm:px-6 lg:px-8 bg-[var(--vlc-tint)]">
-    <div class="max-w-4xl mx-auto" data-aos="fade-up">
-      <h2 class="text-3xl font-bold text-[var(--vlc-navy)] mb-6">Monitoring and Data Protection</h2>
-      <p class="text-lg text-gray-700 mb-6">Comprehensive monitoring is embedded throughout our application stack and infrastructure layers. Centralized oversight enables real-time alerts, rapid detection of anomalies, and immediate response to potential risks.</p>
-      <p class="text-lg text-gray-700 mb-8">Our data protection strategy follows a layered and resilient backup architecture. Critical customer data is captured through daily snapshots stored across multiple secure repositories. Backup logs are reviewed routinely, with scheduled monthly archives maintained for long-term retention. Recovery processes are tested on a recurring basis to ensure data restoration remains dependable.</p>
-      <img src="http://static.photos/technology/1024x576/43" alt="Data Monitoring Dashboard" class="rounded-lg shadow-lg w-full">
+    <div class="max-w-6xl mx-auto" data-aos="fade-up">
+      <div class="flex flex-col md:flex-row gap-12 items-center">
+        <div class="md:w-1/2 relative">
+          <div class="absolute -inset-4 bg-[var(--vlc-leaf)] opacity-10 rounded-xl"></div>
+          <div class="absolute -inset-2 border-2 border-[var(--vlc-leaf)] border-dashed rounded-lg opacity-30"></div>
+          <img src="http://static.photos/technology/1024x576/43" alt="Data Monitoring Dashboard" class="relative rounded-lg shadow-lg w-full z-10">
+        </div>
+        <div class="md:w-1/2">
+          <h2 class="text-3xl font-bold text-[var(--vlc-navy)] mb-6">Monitoring and Data Protection</h2>
+          <p class="text-lg text-gray-700 mb-6">Comprehensive monitoring is embedded throughout our application stack and infrastructure layers. Centralized oversight enables real-time alerts, rapid detection of anomalies, and immediate response to potential risks.</p>
+          <p class="text-lg text-gray-700 mb-8">Our data protection strategy follows a layered and resilient backup architecture. Critical customer data is captured through daily snapshots stored across multiple secure repositories. Backup logs are reviewed routinely, with scheduled monthly archives maintained for long-term retention. Recovery processes are tested on a recurring basis to ensure data restoration remains dependable.</p>
+          <a href="./contact-us.html" class="btn-primary px-6 py-3 rounded-md text-lg font-semibold inline-flex items-center gap-2">
+            Learn About Our Monitoring <i data-feather="eye" class="w-5 h-5"></i>
+          </a>
+        </div>
+      </div>
     </div>
   </section>
-
-  <!-- Section 5: Disaster Recovery -->
+<!-- Section 5: Disaster Recovery -->
   <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
     <div class="max-w-4xl mx-auto" data-aos="fade-up">
       <h2 class="text-3xl font-bold text-[var(--vlc-navy)] mb-6">Disaster Recovery</h2>

style.css

@@ -4,6 +4,18 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 
+/* Pattern overlay for images */
+.img-pattern-overlay {
+  position: relative;
+}
+.img-pattern-overlay::before {
+  content: "";
+  position: absolute;
+  inset: -8px;
+  background: linear-gradient(135deg, rgba(141,198,63,0.1) 0%, rgba(0,160,233,0.1) 100%);
+  border-radius: 12px;
+  z-index: 1;
+}
 @media (max-width: 767px) {
   .flex-col.md\:flex-row > div {
     width: 100% !important;