#94 changes the colur of a bold text or Updated styles.css (#108)

**### The problem is  :**
I found that when we are using dark mode we get the text disapear after
applying dark mode. so i just changed the text colour.

**Before**
![Screenshot 2024-10-04
134348](https://github.com/user-attachments/assets/d323f35e-a94d-49d1-9d89-f6d209144d01)

vs

**After** 

![Uploading Screenshot 2024-10-04 134724.png…]()


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a new section for eco tips, enhancing user engagement with
eco-friendly content.
- Added new styles for eco tips, values, and features, improving visual
appeal and interactivity.
- **Bug Fixes**
	- Adjusted dark mode styles for consistency across new sections.
- **Style**
- Enhanced responsiveness and hover effects for eco-related sections and
feature cards.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

styles.css

@@ -406,10 +406,33 @@ nav ul li a:hover {
 }
 
 
+  #eco-tips-container {
+    /* position: relative; */
+    overflow: hidden;
+    padding: 2rem;
+    width: 100%;
+    max-width: 1200px;
+    margin: 5.2rem auto;
+    border-top: 4px solid #006D77;
+    border-top-left-radius: 24px;
+    border-top-right-radius: 24px;
+  }
+.highlight {
+    font-weight: bold;
+    color:#004d40;
+}
+.eco-tips-header {
+  background-color: #EDF6F9;
+  padding: 2rem;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+
 .values-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 50px 20px;
+
   text-align: center;
 }