[Feature] OUR mission Section can be designed #331 (#350)

<!-- Thank you for sending a pull request ❤️ -->

our mission section need to be design i can make that section responsive
, provide animation hover effect and place item in proper format and
need relatible icons

Closes: #331

## Description

### Summary
Provide a brief description of what this pull request does and why it is
needed.

### Details
Include any detailed information about the changes in this pull request.

## Types of Changes

_Please check the boxes that apply_

- [x] Bugfix (non-breaking change that fixes an issue)
- [x] New feature (non-breaking change that adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Documentation update (Documentation content changed)
- [ ] Other (please describe):

## Checklist

_Please check the boxes that apply_

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] My changes do not break the current system and pass all existing
test cases
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules

## Screenshots

![image](https://github.com/user-attachments/assets/4b562119-e4cd-4e36-9719-ebb78aaa4b19)

![image](https://github.com/user-attachments/assets/4e6bf215-314b-4462-a65c-f83366cff003)


If applicable, please attach screenshots of the changes made to the user
interface.

## Additional Information

Please provide any other information that is relevant to this pull
request.

<!-- We're looking forward to merging your contribution!! -->

index.html

@@ -242,18 +242,22 @@ <h2>About Us</h2>
                             <h3>Our Mission</h3>
                             <div class="mission-box">
                                 <div class="mission-item">
+                                    <img src="./assets/recycling-bin_532768.png" alt="Reduce Waste">
                                     <h4>Reduce Waste</h4>
                                     <p>Minimize waste generation through innovative technologies and education.</p>
                                 </div>
                                 <div class="mission-item">
+                                    <img src="./assets/aluminum_4381614.png" alt="Promote Recycling">
                                     <h4>Promote Recycling</h4>
                                     <p>Encourage responsible disposal and recycling practices in every community.</p>
                                 </div>
                                 <div class="mission-item">
+                                    <img src="./assets/solidarity_16825525.png" alt="Empower Communities">
                                     <h4>Empower Communities</h4>
                                     <p>Equip individuals with knowledge and tools for sustainable living.</p>
                                 </div>
                                 <div class="mission-item">
+                                    <img src="./assets/exterior-cleaning_17073146.png" alt="Build a Cleaner Future">
                                     <h4>Build a Cleaner Future</h4>
                                     <p>Protect the environment for future generations.</p>
                                 </div>

styles.css

@@ -921,3 +921,71 @@ body.dark-mode {
       width: 100%;
   }
 }
+
+/* Global styling */
+body {
+  margin: 0;
+  font-family: 'Arial', sans-serif;
+  background-color: #f9f9f9; /* Light background to make the mission section stand out */
+}
+
+.mission-container {
+  padding: 50px;
+  background-color: #f4f4f4;
+  text-align: center;
+}
+
+.mission-container h3 {
+  font-size: 2.5rem;
+  margin-bottom: 40px;
+  color: #333;
+}
+
+.mission-box {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
+  gap: 20px;
+}
+
+.mission-item {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 15px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.mission-item:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
+}
+
+.mission-item img {
+  max-width: 80px;
+  margin-bottom: 20px;
+  transition: transform 0.3s;
+}
+
+.mission-item:hover img {
+  transform: scale(1.1);
+}
+
+.mission-item h4 {
+  font-size: 1.5rem;
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.mission-item p {
+  font-size: 1rem;
+  color: #666;
+  line-height: 1.5;
+}
+
+/* Responsive grid layout for smaller screens */
+@media (max-width: 768px) {
+  .mission-box {
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+}