Added styling to navbar

[SuhainaFathimaM]

Added styling to navbar

Issue number

closes: #209

1. Navbar Styling:

• Added background gradient to the navbar for a more visually appealing look.
• Set z-index to 100 to ensure the navbar stays on top of other elements.
• Added transition for smooth animation on hover and active states.

2. Brand Logo Styling:

• Adjusted logo image height for better visual balance.

3. Mobile Menu Styling:

• Hidden the sidebar icon (sidebar-icon) by default for larger screens.
• Added styles for the sidebar-menu container, including positioning, background color, and transition for smooth appearance.
• Positioned the navigation links within the sidebar menu using absolute positioning and transforms for optimal alignment.
• Styled the individual navigation list items for improved readability and visual hierarchy.
• Added styles for the contact button within the sidebar menu.

4. Desktop Navbar Styling:

• Added styles for the navigation links (nav-link) on larger screens, including color, text decoration, and hover effects.
• Used rem units for font sizes to improve consistency across different devices.
• Added media queries to adjust the navbar layout and element sizes for mobile devices.

5. General Styling:

• Added custom CSS classes to enhance styling flexibility and maintainability.
• Refined font weights and sizes for improved readability.

Checklist:

• [X] I have mentioned the issue number in my Pull Request.
• [X] I have commented my code, particularly in hard-to-understand areas
• [X] I have gone through the contributing.md file before contributing

Additional context:

@PranavBarthwal I am contributing under GSSoC 2024.. Please label this PR