make it full width slider - Follow Up Deployment

index.html

@@ -151,40 +151,37 @@
     <div class="-mt-1">
         <svg viewBox="0 0 1440 100" class="w-full" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#18192b" d="M0,100 C480,0 960,100 1440,0 L1440,100 L0,100 Z"></path></svg>
     </div>
-    <section id="values" class="py-24 px-4 sm:px-6 lg:px-8 relative z-10 bg-[#18192b] overflow-hidden">
-      <!-- Animated/floating background shapes -->
-      <div class="absolute -top-20 -left-20 w-80 h-80 bg-gradient-to-br from-purple-500/20 to-blue-500/10 rounded-full blur-3xl animate-pulse"></div>
-      <div class="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-tr from-pink-400/20 to-blue-400/10 rounded-full blur-3xl animate-pulse"></div>
+    <section id="values" class="py-24 px-4 sm:px-6 lg:px-8 relative z-10 bg-[#18192b]">
       <div class="container mx-auto max-w-7xl relative z-10">
         <h2 class="text-4xl sm:text-5xl font-extrabold mb-16 text-center text-purple-400 glow">Our Values</h2>
-        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-10">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
           <!-- Value Card 1 -->
-          <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-2xl flex flex-col items-center text-center border-t-4 border-blue-400 hover:-translate-y-2 hover:shadow-blue-400/30 transition-all duration-300">
-            <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-blue-500 to-blue-300 shadow-lg group-hover:scale-110 transition-transform duration-300">
+          <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl flex flex-col items-center text-center hover:scale-105 transition-transform duration-300">
+            <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-blue-500 to-blue-300 shadow-lg">
               <i class="fas fa-star text-4xl text-white"></i>
             </div>
             <h3 class="text-2xl font-bold text-blue-200 mb-2">Quality First</h3>
             <p class="text-gray-200">We prioritize the highest standards in quality, hygiene, and service. From sourcing products to customer interactions, we ensure every detail meets our commitment to excellence.</p>
           </div>
           <!-- Value Card 2 -->
-          <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-2xl flex flex-col items-center text-center border-t-4 border-purple-400 hover:-translate-y-2 hover:shadow-purple-400/30 transition-all duration-300">
-            <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-purple-500 to-purple-300 shadow-lg group-hover:scale-110 transition-transform duration-300">
+          <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl flex flex-col items-center text-center hover:scale-105 transition-transform duration-300">
+            <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-purple-500 to-purple-300 shadow-lg">
               <i class="fas fa-users text-4xl text-white"></i>
             </div>
             <h3 class="text-2xl font-bold text-purple-200 mb-2">Customer-Centric</h3>
             <p class="text-gray-200">We believe in building lasting relationships by understanding customer needs, listening to feedback, and consistently exceeding expectations.</p>
           </div>
           <!-- Value Card 3 -->
-          <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-2xl flex flex-col items-center text-center border-t-4 border-teal-400 hover:-translate-y-2 hover:shadow-teal-400/30 transition-all duration-300">
-            <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-teal-500 to-teal-300 shadow-lg group-hover:scale-110 transition-transform duration-300">
+          <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl flex flex-col items-center text-center hover:scale-105 transition-transform duration-300">
+            <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-teal-500 to-teal-300 shadow-lg">
               <i class="fas fa-balance-scale text-4xl text-white"></i>
             </div>
             <h3 class="text-2xl font-bold text-teal-200 mb-2">Integrity</h3>
             <p class="text-gray-200">Honesty and openness are at our core — in our products, pricing, and business practices. We operate with fairness and responsibility at all levels.</p>
           </div>
           <!-- Value Card 4 -->
-          <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-2xl flex flex-col items-center text-center border-t-4 border-pink-400 hover:-translate-y-2 hover:shadow-pink-400/30 transition-all duration-300">
-            <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-pink-500 to-pink-300 shadow-lg group-hover:scale-110 transition-transform duration-300">
+          <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl flex flex-col items-center text-center hover:scale-105 transition-transform duration-300">
+            <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-pink-500 to-pink-300 shadow-lg">
               <i class="fas fa-lightbulb text-4xl text-white"></i>
             </div>
             <h3 class="text-2xl font-bold text-pink-200 mb-2">Innovation</h3>