style.css

@@ -1,4 +1,3 @@
-
 /* Base styles */
 :root {
     --primary-color: #F4ACB7;
@@ -63,7 +62,7 @@ h1, h2, h3 {
     position: relative;
     width: 600px;
     height: 50px;
-    background-color: #4F5D2F;
+    background-color: #4F5D2F; /* Slightly darker background */
     border-radius: 12px;
     font-size: 0;
 }
@@ -78,7 +77,7 @@ h1, h2, h3 {
     text-decoration: none;
     text-transform: uppercase;
     text-align: center;
-    color: #f5f5f5;
+    color: #f5f5f5; /* Softer white for text */
     cursor: pointer;
     transition: color 0.3s ease;
 }
@@ -113,35 +112,35 @@ a:nth-child(5) {
 .topnav a:nth-child(1):hover~.animation {
     width: 120px;
     left: 0;
-    background-color: #4F5D2F;
+    background-color: #4F5D2F; /* Calming teal to match earthy tones */
 }
 
 .topnav .start-about,
 .topnav a:nth-child(2):hover~.animation {
     width: 120px;
     left: 120px;
-    background-color: #5c6842;
+    background-color: #5c6842; /* Light green, subtle and soft */
 }
 
 .topnav .start-news,
 .topnav a:nth-child(3):hover~.animation {
     width: 120px;
     left: 240px;
-    background-color: #7d9264c2;
+    background-color: #7d9264c2; /* Very light green, keeping it soft */
 }
 
 .topnav .start-products,
 .topnav a:nth-child(4):hover~.animation {
     width: 120px;
     left: 360px;
-    background-color: #5c6842;
+    background-color: #5c6842; /* Muted purple to go with crochet theme */
 }
 
 .topnav .start-contact,
 .topnav a:nth-child(5):hover~.animation {
     width: 120px;
     left: 480px;
-    background-color: #4F5D2F;
+    background-color: #4F5D2F; /* Muted peach for a warm touch */
 }
 
 /* Hero Section */
@@ -233,74 +232,6 @@ 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 {