[BUG] [UI Improvement] Update Outdated Navbar Buttons #376 (#382)

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

## 

Closes: #376

## Description

The button in the navbar needs improvement to enhance the overall user
experience and match the design aesthetics of the site. The current
button design does not align with the modern design style used in other
sections of the page.

### Navbar Button Update
- The navbar button has been redesigned to improve user experience and
responsiveness.
- The button now has modern hover and active states for better
interaction.
- The color scheme is updated to maintain consistency with the overall
design.
- Responsiveness is enhanced for better display across different screen
sizes.
- Accessibility improvements include better contrast and focus states
for the button.


_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/cc7833da-35c8-43b8-a1ca-7c079d53552b)

![image](https://github.com/user-attachments/assets/6abfa23c-6af6-4c9b-b8fd-c43bd7bd9c3e)

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!! -->

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

## Summary by CodeRabbit

- **New Features**
	- Updated project name to "Waste Management" in the README for clarity.
	- Enhanced the "Contributing" section for better guidance.
- **Style**
- Introduced a new button style with modern aesthetics and hover
effects.
- Improved layout for the hero section and upload components for better
visual presentation.
	- Adjusted media queries for improved responsiveness on mobile devices.

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

README.md

@@ -148,7 +148,7 @@ Here’s a more detailed version of the "Steps for Contributing" section:
         </tr>
         <tr>
             <td>
-                This project is part of GirlScript Summer of Code. We enthusiastically invite community contributions to contribute to Community-Site.
+                This project is part of GirlScript Summer of Code. We enthusiastically invite community contributions to contribute to Waste Managment.
             </td>
         </tr>
     </table>

styles.css

@@ -1287,26 +1287,37 @@ nav ul li a:hover {
   display: none;
 }
 
-/* From Uiverse.io by uiverse-astronaut */ 
-button {
-  background: #94fb1f;
-  font-family: inherit;
-  padding: 0.6em 1.3em;
-  font-weight: 900;
-  font-size: 18px;
-  border: 3px solid black;
-  border-radius: 0.4em;
-  box-shadow: 0.1em 0.1em;
+/* CSS for transparent navbar buttons */
+.btn-nav {
+  display: flex;
+  gap: 10px;
+}
+
+.button {
+  background-color: transparent;
+  padding: 10px 20px;
+  border: none; /* No border */
+  font-family: 'Poppins', sans-serif; /* Modern font */
+  font-size: 16px;
+  font-weight: bold; /* Bold font */
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.3s ease; /* Smooth transition */
+}
+
+.button a {
+  text-decoration: none;
+  color: #fff; /* White text color by default */
+  font-weight: bold;
+  transition: color 0.3s ease; /* Smooth transition for color */
 }
 
-button:hover {
-  transform: translate(-0.05em, -0.05em);
-  box-shadow: 0.15em 0.15em;
+.button:hover {
+  transform: scale(1.1); /* Scale the button slightly on hover */
 }
 
-button:active {
-  transform: translate(0.05em, 0.05em);
-  box-shadow: 0.05em 0.05em;
+.button a:hover {
+  color: #adff2f; /* Light yellow-green text color on hover */
 }
 
 /* General styling */