MAKING THE WEBSITE FULL RESPONSIVE (HEADER FOOTER AND SOME SECTIONS OF THE BODY)

[dnyanesh99borse]

### Is your feature request related to a problem? Please describe.
The website currently lacks full responsiveness across different devices. Users experience issues when navigating on smaller screens such as smartphones or tablets, where the layout breaks, text overlaps, and certain elements (like the header and footer) are not properly aligned or scaled. This can frustrate users, leading to poor user experience and higher bounce rates, especially for mobile users.

Describe the solution you'd like

I would like the website to be fully responsive, ensuring that the header, footer, and body sections adjust seamlessly across all screen sizes. Specifically:

Header: The logo, navigation menu, and any icons should resize proportionally, with a collapsible menu (hamburger icon) for smaller screens.
Footer: The footer layout should stack appropriately on smaller screens, with icons and text resizing to remain readable.
Body Sections: Content, images, and interactive elements should adapt to different devices without losing readability or functionality. Media queries, flexible grids, and fluid typography should be used to ensure the website remains user-friendly on desktops, tablets, and mobile devices.
### Additional context
The design should prioritize mobile-first development, using tools like CSS Grid, Flexbox, and media queries for smooth scaling. Attached are some screenshots highlighting areas where responsiveness is currently an issue, such as overlapping elements in the header on mobile screens, and footer content that doesn’t align well. Responsive testing should be performed across various devices and browsers to ensure a consistent experience.