css update

style.css

@@ -1,3 +1,4 @@
+
 /* Base styles */
 :root {
     --primary-color: #F4ACB7;
@@ -62,7 +63,7 @@ h1, h2, h3 {
     position: relative;
     width: 600px;
     height: 50px;
-    background-color: #4F5D2F; /* Slightly darker background */
+    background-color: #4F5D2F;
     border-radius: 12px;
     font-size: 0;
 }
@@ -77,7 +78,7 @@ h1, h2, h3 {
     text-decoration: none;
     text-transform: uppercase;
     text-align: center;
-    color: #f5f5f5; /* Softer white for text */
+    color: #f5f5f5;
     cursor: pointer;
     transition: color 0.3s ease;
 }
@@ -112,35 +113,35 @@ a:nth-child(5) {
 .topnav a:nth-child(1):hover~.animation {
     width: 120px;
     left: 0;
-    background-color: #4F5D2F; /* Calming teal to match earthy tones */
+    background-color: #4F5D2F;
 }
 
 .topnav .start-about,
 .topnav a:nth-child(2):hover~.animation {
     width: 120px;
     left: 120px;
-    background-color: #5c6842; /* Light green, subtle and soft */
+    background-color: #5c6842;
 }
 
 .topnav .start-news,
 .topnav a:nth-child(3):hover~.animation {
     width: 120px;
     left: 240px;
-    background-color: #7d9264c2; /* Very light green, keeping it soft */
+    background-color: #7d9264c2;
 }
 
 .topnav .start-products,
 .topnav a:nth-child(4):hover~.animation {
     width: 120px;
     left: 360px;
-    background-color: #5c6842; /* Muted purple to go with crochet theme */
+    background-color: #5c6842;
 }
 
 .topnav .start-contact,
 .topnav a:nth-child(5):hover~.animation {
     width: 120px;
     left: 480px;
-    background-color: #4F5D2F; /* Muted peach for a warm touch */
+    background-color: #4F5D2F;
 }
 
 /* Hero Section */
@@ -232,6 +233,74 @@ a:nth-child(5) {
     background-color: rgba(0, 0, 0, 0.8);
 }
 
+/* Updated for mobile responsiveness */
+@media (max-width: 768px) {
+    .topnav {
+        width: 100%;
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .topnav a {
+        width: 100%;
+        text-align: center;
+        padding: 10px 0;
+    }
+
+    .hero {
+        height: 40vh;
+    }
+
+    .carousel-caption h1 {
+        font-size: 2em;
+    }
+
+    .carousel-caption p {
+        font-size: 1em;
+    }
+
+    .prev,
+    .next {
+        font-size: 1.5em;
+    }
+
+    .about p,
+    .products p,
+    .news p {
+        font-size: 1em;
+        max-width: 90%;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero {
+        height: auto;
+        min-height: 200px;
+    }
+
+    .carousel-caption h1 {
+        font-size: 1.5em;
+    }
+
+    .carousel-caption p {
+        font-size: 0.8em;
+    }
+
+    .prev,
+    .next {
+        font-size: 1.2em;
+    }
+
+    .about p,
+    .products p,
+    .news p {
+        font-size: 0.9em;
+        max-width: 90%;
+    }
+}
+
 /* Sections */
 
 .news-header {