in mobile it's not looking proper,correct it

index.html

@@ -309,23 +309,22 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
       </div>
     </div>
   </header>
-
   <!-- Banner Section -->
   <section class="relative">
     <img src="https://huggingface.co/spaces/vlcsolutions/e-commerce-evolution-engine/resolve/main/images/E-Commerce-main-banners-all-2025.png" alt="E-Commerce Solutions" class="w-full h-auto">
-    <div class="absolute inset-0 flex items-center justify-end text-left pr-16">
-      <div class="max-w-7xl px-4 sm:px-6 lg:px-8 w-1/2">
-<h1 class="text-4xl md:text-3xl font-bold mb-4 text-white" data-aos="fade-up">Connect, Grow, and Thrive: The Future of E-Commerce</h1>
-        <p class="text-xl md:text-1xl mb-8 text-white" data-aos="fade-up" data-aos-delay="100">Unlock Limitless Potential with Our Integrated E-Commerce Solutions</p>
-        <a href="./contactus.html" class="btn-accent px-8 py-3 rounded-md text-lg font-bold inline-block" data-aos="fade-up" data-aos-delay="200">Let's Scale Your Store</a>
+    <div class="absolute inset-0 flex items-center justify-center md:justify-end text-center md:text-left px-4 md:pr-16">
+      <div class="max-w-7xl w-full md:w-1/2">
+        <h1 class="text-2xl md:text-4xl font-bold mb-4 text-white" data-aos="fade-up">Connect, Grow, and Thrive: The Future of E-Commerce</h1>
+        <p class="text-lg md:text-xl mb-6 md:mb-8 text-white" data-aos="fade-up" data-aos-delay="100">Unlock Limitless Potential with Our Integrated E-Commerce Solutions</p>
+        <a href="./contactus.html" class="btn-accent px-6 py-2 md:px-8 md:py-3 rounded-md text-base md:text-lg font-bold inline-block" data-aos="fade-up" data-aos-delay="200">Let's Scale Your Store</a>
       </div>
     </div>
   </section>
 <!-- Section 1 -->
-  <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">
+  <section class="py-8 md:py-16 bg-[var(--vlc-tint)]">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md: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>
           <p class="text-lg text-gray-700 mb-8">The modern shopper demands a fast, intuitive, and consistent experience. VLC Solutions provides end-to-end e-commerce development, enabling you to move beyond a simple website to a fully integrated ecosystem. We build custom, scalable platforms that seamlessly connect with your CMS, CRM, and ERP systems, optimizing everything from user experience to backend logistics. Partner with our certified experts to ensure agility, drive higher conversions, and confidently manage global online sales.</p>
           <div class="flex flex-wrap gap-4">
@@ -339,10 +338,10 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
     </div>
   </section>
 <!-- Section 2 - Portfolio -->
-  <section class="py-16 pattern-tint">
+  <section class="py-8 md:py-16 pattern-tint">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <h2 class="text-3xl font-bold text-[var(--vlc-navy)] mb-12 text-center" data-aos="fade-up">Our E-Commerce Portfolio</h2>
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
+      <h2 class="text-2xl md:text-3xl font-bold text-[var(--vlc-navy)] mb-6 md:mb-12 text-center" data-aos="fade-up">Our E-Commerce Portfolio</h2>
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 mb-8 md:mb-12">
 <a href="./ecommerce-web-design-development.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="100">
           <i data-feather="layout" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
           <h3 class="font-bold text-lg mb-2">Web Design & Development</h3>
@@ -371,17 +370,16 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
     </div>
   </section>
 <!-- Section 3 - Ecosystem -->
-  <section class="py-16 bg-white">
+  <section class="py-8 md:py-16 bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold text-[var(--vlc-navy)] mb-6">Fully Connected E-Commerce Ecosystem</h2>
-      <p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto">Integrate your systems for a fully connected e-commerce ecosystem. Scale quickly and effortlessly with seamless connections that power smarter, faster decisions.</p>
+      <h2 class="text-2xl md:text-4xl font-bold text-[var(--vlc-navy)] mb-4 md:mb-6">Fully Connected E-Commerce Ecosystem</h2>
+      <p class="text-base md:text-lg text-gray-700 mb-6 md:mb-8 max-w-3xl mx-auto">Integrate your systems for a fully connected e-commerce ecosystem. Scale quickly and effortlessly with seamless connections that power smarter, faster decisions.</p>
       <div class="flex justify-center">
-        <a href="./contactus.html" class="btn-primary px-8 py-3 rounded-md text-lg font-medium">Connect and Scale Now</a>
+        <a href="./contactus.html" class="btn-primary px-6 py-2 md:px-8 md:py-3 rounded-md text-base md:text-lg font-medium">Connect and Scale Now</a>
       </div>
     </div>
-</div>
   </section>
- <!-- FOOTER -->
+<!-- FOOTER -->
   <footer class="bg-[var(--vlc-navy)] text-white pt-14 pb-8">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid md:grid-cols-3 gap-10 mb-10">

style.css

@@ -17,11 +17,16 @@
   transform: translateX(4px);
 }
 body {
-    padding: 2rem;
+    padding: 0;
+    margin: 0;
     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);
+}
+@media (min-width: 768px) {
+    body {
+        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;