Update styles.css

styles.css

@@ -160,6 +160,11 @@ body {
 
 }
 
+  .footer-panel-2 ul {
+    margin: 10px 0;
+  }
+
+
 .shop-section {
   display:flex;
   flex-wrap:wrap;
@@ -256,4 +261,125 @@ ul a{
 
 .copyright{
   padding-top: 5px;
-}
+}
+
+@media only screen and (max-width: 600px) {
+
+  .nav-logo, .navsearch, .nav-sign, .nav-returns, .nav-cart {
+     width: 100%; 
+     text-align: center; 
+  }
+
+  .nav-cart {
+    margin-top: 10px; 
+  }
+
+  .panel {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .shop-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .box {
+    width: 100%; 
+    margin-bottom: 20px; 
+  }
+}
+
+
+@media only screen and (max-width: 768px) {
+  .navbar {
+    height: auto;
+    flex-direction: column;
+
+  }
+
+  .nav-second {
+    font-size: 0.7rem;
+  }
+
+}
+
+@media screen and (max-width: 768px) {
+  .footer-panel-2 {
+    flex-direction: column;
+    height: auto; 
+    align-items: center;
+    text-align: center;
+  }
+}
+
+
+/* General styles for the social menu */
+.social-menu {
+  background-color: #222f3d;
+  padding: 20px 0;
+  text-align: center;
+}
+
+.social-menu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Styles for each social media icon list item */
+.social-menu ul li {
+  display: inline-block;
+  margin: 0 15px;
+}
+
+/* Styles for the social media icon */
+.social-menu ul li a {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: #fff;
+  text-align: center;
+  transition: transform 0.6s, background-color 0.6s;
+  box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);
+  text-decoration: none;
+}
+
+/* Styling for the icons */
+.social-menu ul li .fab {
+  font-size: 25px;
+  line-height: 40px;
+  color: #000;
+  transition: color 0.3s;
+}
+
+/* Hover effect for the icon */
+.social-menu ul li a:hover .fab {
+  color: #fff;
+}
+
+/* Different background colors for different social media icons on hover */
+.social-menu ul li:nth-child(1) a:hover {
+  background-color: #4267b2; /* Facebook color */
+}
+
+.social-menu ul li:nth-child(2) a:hover {
+  background-color: #e4405f; /* Instagram color */
+}
+
+.social-menu ul li:nth-child(3) a:hover {
+  background-color: #00acee; /* Twitter color */
+}
+.social-menu ul li:nth-child(4) a:hover {
+  background-color:  #0077B5 /* Twitter color */
+}
+
+/* Hover effect for the link */
+.social-menu ul li a:hover {
+  transform: translate(0, -10%);
+}