🪲[Bug]: Misaligned Hover Underline on Footer Social Media Icons

**Describe the bug**
In the footer section under "Follow us on", when hovering over the social media icons (e.g., Facebook), an orange underline appears. However, the underline is misaligned and does not sit properly beneath the icons, creating a visual inconsistency.

**To Reproduce**
Steps to reproduce the behavior:

1. Go to https://akshitagupta15june.github.io/PetMe/
2. Scroll down to the footer section
3. Hover over the social media icons under "Follow us on"
4. Observe the orange underline — it appears shifted and not centered with the icons

**Expected behavior**
The orange underline should be perfectly centered and align

**Desktop (please complete the following information):**
- OS: windows 11
- Browser : chrome
- Version : 124.0.6367.208

**Additional context**
This issue may be due to the use of ::after or border-bottom styling that doesn't align well with the icon's width. I'd be happy to work on a fix for this if the issue is valid and unassigned.