enhanced footer in cart and about pages (#351)

<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description
enhanced footer icons on hover in cart page
additionally I've found that about page footer also not working so,
worked on both pages


## Related Issues

<!--Cite any related issue(s) this pull request addresses. If none,
simply state “None”-->
- Closes #292

## Type of PR
<!-- Mention PR Type according to the issue in brackets below and check
the below box -->
- [ ] ()

## Screenshots / videos (if applicable)
<!--Attach any relevant screenshots or videos demonstrating the
changes-->
![Screenshot
(250)](https://github.com/user-attachments/assets/4616eb74-0805-421e-add2-1d21521c9004)
![Screenshot
(251)](https://github.com/user-attachments/assets/369c3081-bc8e-414a-a469-e61a904939dd)


## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [X ] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [ X] I have updated my branch and synced it with project `main` branch
before making this PR
- [ X] I have performed a self-review of my code
- [ X] I have tested the changes thoroughly before submitting this pull
request.
- [ X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [ X] I have commented my code, particularly in hard-to-understand
areas.


## Additional context:
<!--Include any additional information or context that might be helpful
for reviewers.-->

Html-files/about.html

@@ -525,7 +525,22 @@
   }
 }
 
-/* Social Icons Hover Color */
+
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: brown !important;
+}
+
+.social-icons a:hover {
+  color: brown;
+  background-color: hsl(22, 76%, 85%);
+  border-radius: 10px;
+  transform: scale(1.5); /* Increase size */
+  transition: transform 0.3s ease; /* Smooth transition effect */
+}
 .fa-brands.fa-facebook:hover {
   color: #3B5998 !important;
 }
@@ -701,11 +716,11 @@ <h3 class="f-title f_600 t_color f_size_18">Exclusive Offers</h3>
             <div class="col-lg-3 col-md-6">
               <div class="f_widget social-widget">
                 <h3 class="f-title f_600 t_color f_size_18">Follow Us</h3>
-                <div class="f_social_icon">
-                  <a href="https://facebook.com" class="fab fa-facebook"></a>
-                  <a href="https://instagram.com" class="fab fa-instagram"></a>
-                  <a href="https://twitter.com" class="fab fa-twitter"></a>
-                </div>
+                <div class="social-icons">
+                  <a class="fa-brands fa-facebook" href="https://facebook.com" style="color: hsl(203, 30%, 26%);"></a>
+                  <a class="fa-brands fa-instagram" href="https://instagram.com" style="color: hsl(203, 30%, 26%);"></a>
+                  <a class="fa-brands fa-x-twitter" href="https://twitter.com" style="color: hsl(203, 30%, 26%);"></a>
+              </div>
                 <p>Stay connected with us on social media for the latest updates and vintage adventures.</p>
               </div>
             </div>

Html-files/cart.html

@@ -255,6 +255,33 @@
       color: white;
       border: 3px solid whitesmoke;
     }
+
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: brown !important;
+}
+
+.social-icons a:hover {
+  color: brown;
+  background-color: hsl(22, 76%, 85%);
+  border-radius: 10px;
+  transform: scale(1.5); /* Increase size */
+  transition: transform 0.3s ease; /* Smooth transition effect */
+}
+.fa-brands.fa-facebook:hover {
+  color: #3B5998 !important;
+}
+
+.fa-brands.fa-instagram:hover {
+  color: #D62976 !important;
+}
+
+.fa-brands.fa-x-twitter:hover {
+  color: #181e20 !important;
+}
   </style>
 </head>
 
@@ -426,13 +453,9 @@ <h3 style="font-family: var(--ff-philosopher);">Contact Us!</h3>
         <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow Us</h4>
         <div class="social-icons">
           <div class="social-icons">
-            <a class="fa-brands fa-facebook"
-                href="https://facebook.com" target="_blank"></a>
-            <a class="fa-brands fa-instagram"
-                href="https://instagram.com"
-                target="_blank"></a>
-            <a class="fa-brands fa-x-twitter"
-                href="https://twitter.com" target="_blank"></a>
+            <a class="fa-brands fa-facebook" href="https://facebook.com" style="color: hsl(203, 30%, 26%);"></a>
+            <a class="fa-brands fa-instagram" href="https://instagram.com" style="color: hsl(203, 30%, 26%);"></a>
+            <a class="fa-brands fa-x-twitter" href="https://twitter.com" style="color: hsl(203, 30%, 26%);"></a>
         </div>
         </div>
         <p style="margin-bottom:0;font-family: var(--ff-philosopher);">Stay connected with us on social media for the