Enhance Form Styling for Improved Usability and Aesthetics (#420)

Issue Closed: #417
### Description

This PR addresses the unstyled forms on the Sign-Up and Contact pages as
described in #417. Significant improvements have been made to ensure the
forms are visually appealing, easy to use, and responsive across
different screen sizes. Updates include styling of input fields, focus
and hover effects, and modern button designs for enhanced user
interaction.

### Changes Made

- Styled input fields, dropdowns, and text areas to improve the visual
appeal and readability of form content.
- Added focus and hover effects to form elements, providing users with
clear feedback on interactions.
- Created a modern, clean button design for form submission to match the
overall theme.
- Aligned all form elements and ensured responsive behavior on mobile,
tablet, and desktop.

### Implementation Details

- Updated styles.css with new styles for form fields, including padding,
font size, and border color.
- Applied subtle focus effects (e.g., border color change) and hover
effects to form elements for interactivity.
- Styled submit buttons with a modern, visually distinct look, including
hover and active states.
- Used Flexbox to align form elements properly and added media queries
to ensure responsiveness.

### Screenshots
![Screenshot 2024-11-10 at 01-44-35 Waste
Management](https://github.com/user-attachments/assets/717a154b-09a2-4fc8-a905-3810511c6503)


### Testing

- Verified styling and alignment of form fields on mobile, tablet, and
desktop.
- Tested focus and hover effects on input fields, dropdowns, and buttons
for interactivity.
- Ensured buttons and form elements maintain their design across
different browsers.