updated css

styles/globals.css

@@ -745,12 +745,14 @@ height: calc(100vh - 115px);
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);
   border-radius: 0;
   border-top: 1px solid #d1d3d7;
+  pointer-events: none;
 }
 
 .navbar-expand-lg .navbar-nav .nav-link:hover .dropdown-menu {
   visibility: visible;
   display: block;
   opacity: 1;
+  pointer-events: auto;
 }
 .custom-navbar .dropdown-menu-inner {
   padding: 2rem 0;
@@ -774,18 +776,24 @@ height: calc(100vh - 115px);
 .dropdown-custom {
   /* position: relative; */
 }
-.navbar-expand-lg .navbar-nav .dropdown-menu{
-transition: all 0.2s;
-  transform: translateY(40px);
+.navbar-expand-lg .navbar-nav .dropdown-menu {
+  transform: translateY(20px);
+  will-change: transform, opacity;
+  transition:
+    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+    visibility 0s linear 0.7s;
 }
 .dropdown-custom:hover .dropdown-menu {
   display: block;
   visibility: visible;
-  opacity: 9;
-
-visibility: visible;
-transform: translateY(0);
-opacity: 1;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+  transition:
+    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+    visibility 0s linear 0s;
 }
 .navList01 {
   list-style: none;

styles/style.css

@@ -291,11 +291,18 @@ footer h6 {
 .social-icons a {
   color: #000 !important;
   font-size: 20px;
-  transition: color 0.3s;
+  display: inline-block;
+  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  will-change: transform;
 }
 
 .social-icons a:hover {
-  color: var(--secondary-color);
+  color: var(--secondary-color) !important;
+  transform: translateY(-4px) scale(1.2) rotate(-6deg);
+}
+
+.social-icons a:active {
+  transform: translateY(-2px) scale(1.1);
 }
 @media (max-width: 768px) {
   .footer-cotent {