Adding styles for social icons

Author: Jagadeeshftw

app/globals.css

@@ -243,66 +243,93 @@ button:focus {
   text-align: left;
 }
 
+/* --------- */
+/* Social Card */
+/* --------- */
+
 .home-about-social {
   text-align: center !important;
   padding-top: 25px;
   color: white !important;
 }
 
-.home-about-social-links {
-  justify-content: center !important;
-  padding-top: 15px !important;
-  display: inline-block !important;
-  position: relative !important;
-  padding-inline-start: 0 !important;
-}
-
-.home-social-icons {
-  position: relative !important;
-  display: inline-block !important;
-  width: 40px !important;
-  height: 40px !important;
-  text-align: center !important;
-  font-size: 1.2em !important;
-  line-height: 2em !important;
-  background: var(--imp-text-rgba-color) !important;
-  border-radius: 50% !important;
-  transition: 0.5s !important;
+.card {
+  display: flex;
+  height: 70px;
+  width: 350px;
 }
 
-.home-social-icons::before {
-  content: "";
+.card svg {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  display: flex;
+  width: 60%;
   height: 100%;
-  border-radius: 50%;
-  background: var(--imp-text-rgba-color);
-  transition: 0.5s;
-  transform: scale(0.9);
-  z-index: -1;
+  font-size: 24px;
+  font-weight: 700;
+  opacity: 1;
+  transition: opacity 0.25s;
+  z-index: 2;
+  padding: 0.25rem;
+  cursor: pointer;
 }
 
-.home-social-icons:hover::before {
-  transform: scale(1.1);
-  box-shadow: 0 0 15px var(--imp-text-color);
+.card .social-link1,
+.card .social-link2,
+.card .social-link3,
+.card .social-link4,
+.card .social-link5 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25%;
+  color: whitesmoke;
+  font-size: 24px;
+  text-decoration: none;
+  transition: 0.25s;
+  border-radius: 50px;
 }
 
-.home-social-icons:hover {
-  color: var(--imp-text-color);
-  box-shadow: 0 0 5px var(--imp-text-color);
-  text-shadow: 0 0 2px var(--imp-text-color);
+.card svg {
+  transform: scale(1);
 }
 
-.social-icons {
-  display: inline-block !important;
-  padding-right: 15px;
-  padding-left: 15px;
+.card .social-link2:hover {
+  background-color: #242c34;
+  animation: bounce_613 0.4s linear;
 }
 
-.icon-colour {
-  color: var(--imp-text-color) !important;
+.card .social-link3:hover {
+  background-color: #5865f2;
+  animation: bounce_613 0.4s linear;
+}
+
+.card .social-link4:hover {
+  background-color: #0a66c2;
+  animation: bounce_613 0.4s linear;
+}
+
+.card .social-link5:hover {
+  background-color: #00ccff;
+  animation: bounce_613 0.4s linear;
+}
+
+@keyframes bounce_613 {
+  40% {
+    transform: scale(1.4);
+  }
+
+  60% {
+    transform: scale(0.8);
+  }
+
+  80% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(1);
+  }
 }
 
 /* --------- */
@@ -317,7 +344,7 @@ button:focus {
 }
 
 .footerHome {
-  background-color: rgb(10, 4, 22, 0.3);
+  background-color: rgba(10, 4, 22, 0.3);
   bottom: 0 !important;
   padding-top: 10px !important;
   padding-bottom: 8px !important ;