Update styles.css

styles.css

@@ -13,6 +13,7 @@ header {
     text-align: center;
     padding: 50px 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    position: relative;
 }
 
 .header-content h1 {
@@ -26,10 +27,44 @@ header {
     margin-top: 10px;
 }
 
+.header-img {
+    width: 100%;
+    max-height: 300px;
+    object-fit: cover;
+    margin-top: 20px;
+    border-radius: 8px;
+}
+
 section {
     padding: 40px 20px;
     max-width: 1200px;
     margin: 0 auto;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+#intro {
+    background: rgba(173, 216, 230, 0.2); /* Light Blue */
+}
+
+#challenges {
+    background: rgba(240, 230, 140, 0.2); /* Light Yellow */
+}
+
+#solutions {
+    background: rgba(144, 238, 144, 0.2); /* Light Green */
+}
+
+#implementation {
+    background: rgba(221, 160, 221, 0.2); /* Light Plum */
+}
+
+#benefits {
+    background: rgba(255, 182, 193, 0.2); /* Light Pink */
+}
+
+#why-us {
+    background: rgba(135, 206, 235, 0.2); /* Light Sky Blue */
 }
 
 h2 {
@@ -77,6 +112,15 @@ h2 {
     margin-top: 0;
 }
 
+.section-img {
+    width: 100%;
+    max-height: 250px;
+    object-fit: cover;
+    margin-top: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
 ul {
     list-style-type: disc;
     margin-left: 20px;