fix: modal responsiveness

## Description

The current `Modal` component in `modal.tsx` has visibility and layout issues across different screen sizes. The congratulatory message becomes invisible on large screens (lg:invisible) and is positioned using hard-coded spacing (mt-[120%]), it also overflows at times and is misaligned.

Additionally, the modal uses fixed fractional sizing (h-2/3 w-2/3), extreme z-index values.

This issue proposes a full UI refactor for the modal to ensure it is visible, readable, and responsive across all devices, while maintaining clean structure.

## Steps to reproduce

- Visit the /findmycgpa` or `/findmysgpa` pages on the [deployed site](https://mygpa.vercel.app) or a local instace.
- Open your browser dev tools
- Open device / responsive mode and play around with different screen resolutions (particularly mobile, and smaller sizes) to see the inconsistencies.

## Expected Behaviour

- The modal should adapt seamlessly across mobile, tablet, and desktop: Mobile (≤640px) through Desktop (≥1025px)
- Modal should never overflow viewport.
- The congratulatory message must be visible across all screen sizes
- All content, including congratulatory message, must fit within the bounds of the modal and must not overflow the container visually, changes can be made to the message in order to shorten it and text sizing and placement can be changed as well.

## Images / Videos