carousel is not aligned properly in responsive mode on category page

[shivam8112005]

**Describe the bug
The carousel on the category page appears misaligned when viewed in responsive mode. The content either overflows, shifts, or does not center correctly, making it visually inconsistent on smaller screens.

To Reproduce
Steps to reproduce the behavior:

1. Navigate to the category page containing the carousel.
2. Resize the browser window to simulate a smaller screen (e.g., below 768px).
3. Observe that the carousel content appears misaligned or improperly scaled.

Expected behavior
Align centrally within its container.
Scale properly without overflow or clipping.
Adjust the height and width of images or items to fit the viewport in responsive mode

Screenshots

Additional context
The category page uses a carousel element, likely relying on Bootstrap or custom CSS. The issue might stem from:

Missing or misapplied responsive classes (col-*, d-flex, align-items-center, etc.).
Incorrect width or margin settings in CSS.
Image dimensions not being responsive (max-width, height, etc.).

[github-actions]

Thanks @shivam8112005 for raising this issue! We'll look into it.We hope you have made sure that a similar issue doesnt exist , if it does, kindly ask to be assigned on that issue