webpage not responive for tablet and mobile screen

[Shahharshii]

The webpage is not displaying correctly on different screen sizes, affecting the responsiveness and layout. The content is not scaling or aligning properly, and there are issues with how the text is displayed overall.

Observed Issues:

Layout issues: Elements are misaligned, overlapping, or not positioned correctly on smaller screen sizes (e.g., mobile and tablet).
Text display: The font size or line height looks inconsistent across devices, and some text elements are getting cut off or misaligned.
Scaling problems: Images or components are either stretched or not resizing as expected on smaller screens.
Breakpoints: The page does not transition smoothly between different breakpoints, leading to distorted or broken layouts.
Spacing issues: Padding, margins, or gaps between elements are either too large or too small on specific screens.
Expected Behavior:

The webpage should adapt seamlessly to various screen sizes (desktop, tablet, and mobile).
Text elements should remain properly aligned, readable, and consistent across all screen widths.
Images and other components should resize proportionally without getting distorted.
Proper spacing between elements should be maintained at all breakpoints.
Steps to Reproduce:

Open the webpage on different devices (desktop, tablet, and mobile).
Resize the browser window to observe layout shifts.
Check text alignment and image scaling across all breakpoints.

[github-actions]

To reduce notifications, issues are locked. Your issue will be unlock when we will add label as status: ready for dev. Check out the contributing guide for more information.