the colors used are ugly

index.html

@@ -25,12 +25,12 @@
             overflow-x: hidden;
         }
         .gradient-bg {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #1e3a8a 0%, #0f766e 100%);
         }
         .hero-gradient {
-            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
+            background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(15, 118, 110, 0.9) 100%);
         }
-        .card-hover {
+.card-hover {
             transition: all 0.3s ease;
         }
         .card-hover:hover {
@@ -48,15 +48,15 @@
     <nav id="navbar" class="fixed w-full z-50 transition-all duration-300">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
-                <div class="text-2xl font-bold text-blue-800">Ahwatukee Insurance</div>
+                <div class="text-2xl font-bold text-blue-900">Ahwatukee Insurance</div>
                 <div class="hidden md:flex space-x-8">
-                    <a href="#home" class="text-gray-700 hover:text-blue-600 transition-colors">Home</a>
-                    <a href="#services" class="text-gray-700 hover:text-blue-600 transition-colors">Services</a>
-                    <a href="#about" class="text-gray-700 hover:text-blue-600 transition-colors">About</a>
-                    <a href="#contact" class="text-gray-700 hover:text-blue-600 transition-colors">Contact</a>
-                    <a href="#quote" class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition-colors">Get Quote</a>
+            <a href="#home" class="text-gray-700 hover:text-blue-700 transition-colors">Home</a>
+            <a href="#services" class="text-gray-700 hover:text-blue-700 transition-colors">Services</a>
+            <a href="#about" class="text-gray-700 hover:text-blue-700 transition-colors">About</a>
+            <a href="#contact" class="text-gray-700 hover:text-blue-700 transition-colors">Contact</a>
+            <a href="#quote" class="bg-blue-700 text-white px-6 py-2 rounded-full hover:bg-blue-800 transition-colors">Get Quote</a>
                 </div>
-                <div class="md:hidden">
+<div class="md:hidden">
                     <button id="menuBtn" class="text-gray-700">
                         <i data-feather="menu"></i>
                     </button>
@@ -76,14 +76,14 @@
                 Comprehensive insurance solutions for families and businesses in Ahwatukee and beyond
             </p>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <button class="bg-white text-blue-600 px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition-colors">
+                <button class="bg-white text-blue-800 px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition-colors">
                     Get Free Quote
                 </button>
-                <button class="border-2 border-white text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-white hover:text-blue-600 transition-colors">
+                <button class="border-2 border-white text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-white hover:text-blue-800 transition-colors">
                     Learn More
                 </button>
             </div>
-        </div>
+</div>
         <div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent"></div>
     </section>
 
@@ -99,42 +99,42 @@
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <!-- Service Card 1 -->
                 <div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
-                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
-                        <i data-feather="home" class="text-blue-600 w-8 h-8"></i>
+                    <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="home" class="text-blue-700 w-8 h-8"></i>
                     </div>
                     <h3 class="text-2xl font-semibold text-gray-800 mb-4">Home Insurance</h3>
                     <p class="text-gray-600 mb-6">
                         Protect your home and belongings with comprehensive coverage against Arizona's unique risks.
                     </p>
-                    <a href="#" class="text-blue-600 font-semibold hover:text-blue-700 transition-colors">
+                    <a href="#" class="text-blue-700 font-semibold hover:text-blue-800 transition-colors">
                         Learn More →
                     </a>
                 </div>
 
                 <!-- Service Card 2 -->
                 <div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
-                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
-                        <i data-feather="car" class="text-green-600 w-8 h-8"></i>
+                    <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="car" class="text-blue-700 w-8 h-8"></i>
                     </div>
                     <h3 class="text-2xl font-semibold text-gray-800 mb-4">Auto Insurance</h3>
                     <p class="text-gray-600 mb-6">
                         Affordable auto coverage that meets Arizona's requirements and protects your vehicle.
                     </p>
-                    <a href="#" class="text-blue-600 font-semibold hover:text-blue-700 transition-colors">
+                    <a href="#" class="text-blue-700 font-semibold hover:text-blue-800 transition-colors">
                         Learn More →
                     </a>
                 </div>
 
                 <!-- Service Card 3 -->
                 <div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
-                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
-                        <i data-feather="briefcase" class="text-blue-600 w-8 h-8"></i>
+                    <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="briefcase" class="text-blue-700 w-8 h-8"></i>
                     </div>
                     <h3 class="text-2xl font-semibold text-gray-800 mb-4">Business Insurance</h3>
                     <p class="text-gray-600 mb-6">
                         Complete business protection including liability, property, and workers' compensation.
                     </p>
-                    <a href="#" class="text-blue-600 font-semibold hover:text-blue-700 transition-colors">
+                    <a href="#" class="text-blue-700 font-semibold hover:text-blue-800 transition-colors">
                         Learn More →
                     </a>
                 </div>
@@ -216,10 +216,10 @@
                         <div>
                             <textarea placeholder="Your Message" rows="4" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50"></textarea>
                         </div>
-                        <button type="submit" class="w-full bg-white text-blue-600 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
+                        <button type="submit" class="w-full bg-white text-blue-800 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                             Send Message
                         </button>
-                    </form>
+</form>
                 </div>
             </div>
         </div>