diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 00000000..b58b603f
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/Retro.iml b/.idea/Retro.iml
new file mode 100644
index 00000000..24643cc3
--- /dev/null
+++ b/.idea/Retro.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 00000000..81256007
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Retro.iml" filepath="$PROJECT_DIR$/.idea/Retro.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 00000000..35eb1ddf
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/Coverpage.html b/Coverpage.html
index 8e0f0c61..1a0ca0de 100644
--- a/Coverpage.html
+++ b/Coverpage.html
@@ -6,6 +6,7 @@
     <title>Retro</title>
     <meta http-equiv="refresh" content="30">
     <link rel="shortcut icon" type="image/x-icon" href="./Favicon image/favicon-32x32.png">
+    <link rel="stylesheet" href="./style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style id="background-color">
         body {
diff --git a/Css-files/content.css b/Css-files/content.css
index 31ea9dbe..807382e2 100644
--- a/Css-files/content.css
+++ b/Css-files/content.css
@@ -344,42 +344,97 @@ div.deals:hover{
 
 /* footer */
 .foot-panel2{
-    background-color: transparent;
-    color:white;
-    height: 300px;
-    display: flex;
-    justify-content: space-evenly;
+  background-color: transparent;
+  color:white;
+  height: 300px;
+  display: flex;
+  justify-content: space-evenly;
 }
 
 .footer-colums{
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 .footer-colums p{
-    font-weight: 700;
+  font-weight: 700;
 }
 
 .footer-colums a{
-    display: block;
-    font-size: 0.85rem;
-    margin-top: 10px;
-    color: #dddddd;
+  display: block;
+  font-size: 0.85rem;
+  margin-top: 10px;
+  color: #dddddd;
+}
+
+.follow-us{
+  margin-bottom: 20px;
+}
+
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  /* color: white; */
+}
+
+.fa-facebook{
+  color: hsl(203, 30%, 26%);
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+}
+
+.fa-facebook:hover {
+  
+  transform: scale(1.5);
+  color:#3B5998;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.fa-instagram{
+  color: hsl(203, 30%, 26%);
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+}
+.fa-instagram:hover {
+  transform: scale(1.5);
+  color:#D62976;
+  transition: transform 0.2s ease, color 0.2s ease;
 }
+.fa-x-twitter{
+  color: hsl(203, 30%, 26%);
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+
+}
+
+.fa-x-twitter:hover {
+  color:black;
+  transform: scale(1.5);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
 
 .foot_panel4{
-    background-color: transparent;
-    color: white;
-    height: 160px;
-    font-size: 0.9rem;
-    text-align: center;
+  background-color: transparent;
+  /* color:hsl(203, 30%, 26%); */
+  height: 160px;
+  /* font-size: 0.9rem; */
+  text-align: center;
+  /* margin-bottom: 8px; */
 }
 
+
+
 .pages{
-    padding-top: 25px;
+  padding-top: 25px;
 }
 
 .copyright{
-   padding-top: 10px;
+  padding-top: 10px;
 }
 
 form {
@@ -418,7 +473,7 @@ textarea {
     font-size: 1.2rem;
     padding: 15px;
     text-decoration: none;
-    color: white;
+    color: hsl(203, 30%, 26%);
 }
 
 .fa-facebook:hover {
@@ -499,6 +554,10 @@ textarea {
         transform: translateY(-50%); /* Center the icon vertically */
         color: gray; /* Icon color */
     }
+.input-icon input, 
+.input-icon textarea {
+      padding-left: 30px; /* Adjust padding to create space for the icon */
+}
 
 #contactForm {
   display: flex;
@@ -518,6 +577,8 @@ textarea {
   border: none;
 }
 
+
+
 #contactForm h3 {
   height: 30px;
   color: #141414;
diff --git a/Css-files/style.css b/Css-files/style.css
index 6f5bd32b..a8b20481 100644
--- a/Css-files/style.css
+++ b/Css-files/style.css
@@ -455,7 +455,7 @@ ul a{
 
 .foot_panel4{
     background-color: rgb(66, 16, 16);
-    color: white;
+    color: hsl(203, 30%, 26%);
     height: 160px;
     font-size: 0.9rem;
     text-align: center;
@@ -518,13 +518,11 @@ textarea {
     font-size: 1.2rem;
     padding: 15px;
     text-decoration: none;
-    color: white;
-}
-.fb{
-    color: #1877F2;
-    cursor: pointer;
+    color: hsl(203, 30%, 26%) ;
 }
 
+
+
 .instagram{
     color: #dd4c8d;
     cursor: pointer;
@@ -781,3 +779,8 @@ input, textarea {
     }
 }
 
+
+fa-facebook:hover {
+    font-size: 2rem !important; /* Increase the size of the icon */
+    color: #4267B2;   /* Change the color to #4267B2 */
+}
\ No newline at end of file
diff --git a/Html-files/Electronic.html b/Html-files/Electronic.html
index e6ea624f..3d1f4b47 100644
--- a/Html-files/Electronic.html
+++ b/Html-files/Electronic.html
@@ -243,14 +243,57 @@
               margin-top: 10px;
               color: #dddddd;
           }
+          .fa-facebook{
+                color: white;
+                font-size: 1.2rem;
+                padding: 8px;
+                margin: 15px;
+            }
+
+            .fa-facebook:hover {
+  
+                transform: scale(1.5);
+                color:#3B5998;
+                transition: transform 0.2s ease, color 0.2s ease;
+            }
+
+            .fa-instagram{
+                color: white;
+                font-size: 1.2rem;
+                padding: 8px;
+                margin: 15px;
+            }
+            .fa-instagram:hover {
+                transform: scale(1.5);
+                color:#D62976;
+                transition: transform 0.2s ease, color 0.2s ease;
+            }
+
+            .fa-x-twitter{
+                color: hsl(203, 30%, 26%);
+                font-size: 1.2rem;
+                padding: 8px;
+                margin: 15px;
+
+            }
+
+            .fa-x-twitter:hover {
+                color:black;
+                transform: scale(1.5);
+                transition: transform 0.2s ease, color 0.2s ease;
+            }
+
+            
   
           .foot_panel4 {
               background-color: transparent;
-              color: white;
+              /* color: white; */
               height: 160px;
               font-size: 0.9rem;
               text-align: center;
-          }
+            }
+
+            
   
           form {
               padding-top: 20px;
@@ -279,16 +322,33 @@
             background-color: rgb(196, 89, 89);
           }
   
-          .social-icons a {
-              font-size: 1.2rem;
-              padding: 15px;
-              text-decoration: none;
-              color: white;
-          }
-  
-          .fa-facebook:hover { color: #3B5998; }
-          .fa-instagram:hover { color: #D62976; }
-          .fa-twitter:hover { color: #00B6F1; }
+         
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: rgb(248, 243, 243);
+}
+
+.social-icons a:hover {
+  color: brown;
+  background-color: hsl(203%, 29%, 91%);
+  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;
+}
   
           #sr {
               display: none;
@@ -616,14 +676,15 @@ <h3 style="font-family: var(--ff-philosopher);color: black;">Contact Us!</h3>
 
         <div class="foot_panel4"  style="font-family: Garamond;">
             <div class="pages">
-                <h4 style="font-family: var(--ff-philosopher);color: black;">Follow Us</h4>
+                <h2 style="font-family: var(--ff-philosopher);color: black;">Follow Us</h2>
 
+               
                 <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>
-                    </div>
+                    <a class="fa-brands fa-facebook" href="https://facebook.com" style="color: hsl(203, 29%, 91%);"></a>
+                    <a class="fa-brands fa-instagram" href="https://instagram.com" style="color: hsl(203, 29%, 91%);"></a>
+                    <a class="fa-brands fa-x-twitter" href="https://twitter.com" style="color: hsl(203, 29%, 91%);"></a>
+                </div>
+
                 </div>
                 <p style="margin-bottom:0;font-family: var(--ff-philosopher);color: white;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
                 </p>
diff --git a/Html-files/cart.html b/Html-files/cart.html
index 51bf5046..2e9e2286 100644
--- a/Html-files/cart.html
+++ b/Html-files/cart.html
@@ -242,7 +242,7 @@
       border: 3px solid whitesmoke;
     }
   </style>
-</head>
+  </head>
 
 <body>
   <div id="preloader">
@@ -405,15 +405,19 @@ <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow
 
         <div class="foot_panel4">
             <div class="pages">
-                <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow Us</h4>
+                <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher); margin: 10px;">Follow Us</h4>
                 <div class="social-icons">
-                    <i class="fa-brands fa-facebook"></i>&nbsp;&nbsp;&nbsp;&nbsp;
-                    <i class="fa-brands fa-instagram"></i>&nbsp;&nbsp;&nbsp;&nbsp;
-                    <i class="fa-brands fa-x-twitter"></i>&nbsp;&nbsp;&nbsp;
-                </div>
-                <p style="margin-bottom:0;font-family: var(--ff-philosopher);">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
+
+
+                  <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 style="margin-bottom:0;font-family: var(--ff-philosopher); margin-top: 5px;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
                 </p>
-                <div class="copyright" style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">
+                <div class="copyright" style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher); margin: 3px;">
                     © 2024 Retro . All Rights Reserved. | <span id="author">
                         <a href="https://www.linkedin.com" target="_blank" style="text-decoration: none;">Retro Team</a>
                     </span><p></p>
diff --git a/Html-files/contact.html b/Html-files/contact.html
index fcaef4a9..2b134b36 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -178,6 +178,32 @@
     100% {
         transform: rotate(360deg);
     }
+}
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: rgb(18, 16, 16);
+}
+
+.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>
@@ -320,23 +346,23 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">Feel Free
                                         <div class="row">
                                             <div class="col-md-6">
                                                 <div class="form-group">
-                                                    <label for="form_name" style="font-family: Georgia;">Email *</label>
+                                                    <label for="form_email" style="font-family: Georgia;">Email *</label>
                                                     <div class="input-icon">
                                                         <i class="fas fa-envelope"></i>
-                                                        <input id="form_name" type="text" name="name" class="form-control"
-                                                            placeholder="     Please enter your Email*" required="required"
-                                                            data-error="  Valid Email is required.">
+                                                        <input id="form_email" type="email" name="email" class="form-control"
+                                                            placeholder="Please enter your email*" required="required"
+                                                            data-error="Valid Email is required.">
                                                     </div>
                                                 </div>
                                             </div>
                                             <div class="col-md-6">
                                                 <div class="form-group">
-                                                    <label for="form_lastname" style="font-family: Georgia;">Phone number *</label>
+                                                    <label for="form_phone" style="font-family: Georgia;">Phone number *</label>
                                                     <div class="input-icon">
                                                         <i class="fas fa-phone"></i>
-                                                        <input id="form_lastname" type="text" name="surname" class="form-control"
-                                                            placeholder="     Please enter your Phone number*" required="required"
-                                                            data-error="  Phone number is required.">
+                                                        <input id="form_phone" type="tel" name="phone" class="form-control"
+                                                            placeholder="Please enter your phone number*" required="required"
+                                                            pattern="[0-9]{10}" data-error="Phone number is required.">
                                                     </div>
                                                 </div>
                                             </div>
@@ -347,8 +373,8 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">Feel Free
                                                     <label for="form_email" style="font-family: Georgia;">Name *</label>
                                                     <div class="input-icon">
                                                         <i class="fas fa-user"></i>
-                                                        <input id="form_email" type="email" name="email" class="form-control"
-                                                            placeholder="     Please enter your Name*" required="required"
+                                                        <input id="form_name" type="text" name="name" class="form-control"
+                                                            placeholder="Please enter your name*" required="required"
                                                             data-error="Name is required.">
                                                     </div>
                                                 </div>
@@ -460,12 +486,12 @@ <h3 style="text-align: center; margin-bottom: 15px;">Contact Us!</h3>
 
         <div class="foot_panel4" style="color: black;background-color: transparent;">
             <div class="pages" style="background-color: transparent;">
-                <h4>Follow Us</h4>
+                <h3>Follow Us</h3>
 
                 <div class="social-icons">
-                    <i class="fa-brands fa-facebook"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                    <i class="fa-brands fa-instagram"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                    <i class="fa-brands fa-x-twitter"></i>
+                    <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 style="margin-bottom:0;">Stay connected with us on social media for the latest updates, recipes, and foodie adventures.
                 </p>
diff --git a/Html-files/menu.html b/Html-files/menu.html
index 59189197..1a94abb0 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -202,6 +202,33 @@
         transform: rotate(360deg);
     }
 }
+
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: rgb(18, 16, 16);
+}
+
+.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>
 
@@ -568,9 +595,12 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);font-fami
                 <h4 style="font-family: var(--ff-philosopher);color: hsl(304, 14%, 46%);">Follow Us</h4>
 
                 <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-twitter" href="https://twitter.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 style="font-family: var(--ff-philosopher);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
                 </p>
diff --git a/Html-files/services.html b/Html-files/services.html
index 5039f699..58da5ae9 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -170,6 +170,32 @@
     100% {
         transform: rotate(360deg);
     }
+}
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: rgb(18, 16, 16);
+}
+
+.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>
@@ -397,9 +423,12 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
 
                 <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);color: hsl(203, 30%, 26%);">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
diff --git a/Images/biryani.jpg b/Images/biryani.jpg
new file mode 100644
index 00000000..b1992e21
Binary files /dev/null and b/Images/biryani.jpg differ
diff --git a/Images/candy.jpg b/Images/candy.jpg
new file mode 100644
index 00000000..e2831ffc
Binary files /dev/null and b/Images/candy.jpg differ
diff --git a/Images/plate_mismatch.jpg b/Images/plate_mismatch.jpg
new file mode 100644
index 00000000..5acfc46d
Binary files /dev/null and b/Images/plate_mismatch.jpg differ
diff --git a/index.html b/index.html
index 9da0dd68..ead4a3b1 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="./style.css">
+        <link rel="stylesheet" href="./style.css">
 
     <style>
        
@@ -356,21 +356,21 @@ <h1 class="h-primary center" style="font-family: var(--ff-philosopher);font-size
         <!-- changes -->
         <div id="about">
             <div class="box">
-                <img src="https://tse3.mm.bing.net/th/id/OIG4.SIHan_hRN4UJPwUqG4XX?pid=ImgGn" style="height: 300px;border-radius: 10px;" alt="">
+                <img src="Images/biryani.jpg" style="height: 300px;border-radius: 10px;" alt="">
                 <h2 class="h-secondary center" style="font-family:var(--ff-philosopher);">60s-style florals</h2>
                 <p class="center" style="font-family: var(--ff-poppins);">From aromatic curries to flavorful biryanis, our menu showcases the diversity and
                     deliciousness of Indian cuisine.
                 </p>
             </div>
             <div class="box">
-                <img src="https://tse3.mm.bing.net/th/id/OIG4.z_1sqeDkCWDNKbz25AoQ?w=270&h=270&c=6&r=0&o=5&dpr=1.4&pid=ImgGn" alt="" style="border-radius: 10px;height: 350px;width: 350px;">
+                <img src="Images/plate_mismatch.jpg" alt="" style="border-radius: 10px;height: 350px;width: 350px;">
                 <h2 class="h-secondary center" style="font-family: var(--ff-philosopher)">60's Dinning Items</h2>
                 <p class="center" style="font-family: var(--ff-poppins);">
                     Elegant porcelain plates with delicate floral patterns. Each plate tells a story of family gatherings and special occasions.
                 </p>
             </div>
             <div class="box">
-                <img src="https://tse2.mm.bing.net/th/id/OIG2.CyOiP72VYq.3vQSimbbp?w=270&h=270&c=6&r=0&o=5&dpr=1.4&pid=ImgGn" alt="" style="border-radius: 10px;height: 200px;">
+                <img src="Images/candy.jpg" alt="Images/bon-bon candy.jpg" style="border-radius: 10px;height: 200px;">
                 <h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whimsical Nostalgia: The Stardust Bonbon</h2>
                 <p class="center" style="font-family: var(--ff-poppins);">The Stardust Bonbon, a sweet relic from an era when the universe was our playground.</p>
             </div>
@@ -638,12 +638,12 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);font-fami
                 <div class="pages">
                     <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow Us</h4>
 
-                    <div class="social-icons" style="background-color: hsl(20, 43%, 93%);">
+                    <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>
+                        <a class="fa-brands fa-facebook" href="https://facebook.com" ></a>
+                        <a class="fa-brands fa-instagram" href="https://instagram.com" ></a>
+                        <a class="fa-brands fa-x-twitter" href="https://twitter.com" ></a>
 
                     </div>
                     <p style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);color: hsl(203, 30%, 26%);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
diff --git a/style.css b/style.css
index 9d984726..78a252fa 100644
--- a/style.css
+++ b/style.css
@@ -15,25 +15,29 @@ body {
 }
 
 .navbar {
-  padding: 8px 0px;
-  height: 60px;
-  transition: background-color 0.3s, backdrop-filter 0.3s, color 0.3s; /* Added transitions for smooth color change */
-  backdrop-filter: blur(0); /* Initially no blur */
+  padding: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1030;
+  padding: 15px 0;
+  background-color: rgba(245, 190, 190, 0.7);
+  backdrop-filter: blur(8px);
+  transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
 }
 
 .navbar a {
   text-decoration: none;
-  color: white;
+  color: #333;
   font-size: 1.3rem;
+  transition: color 0.3s ease,border-bottom 0.3s ease;
 }
 /* Navbar link hover effect */
-.navbar a:hover,
-.navbar.scrolled a:hover {
-  color :#fff;
-  border-bottom: 1px solid #fff; /* Add bottom border on hover */
-  border-top: 1px solid #fff; /* Add top border on hover */
+.navbar a:hover{
+  color: #fff;
+  border-bottom: 1px solid #fff;
 }
-s
+
+
 .navbar.fixed-top {
   position: fixed; 
   top: 0;
@@ -42,7 +46,7 @@ s
 }
 .navbar.scrolled {
   background-color: rgb(176, 63, 63); 
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(15px);
   color: #fff;
 }
 .intro_container {
@@ -508,6 +512,7 @@ ul a {
     justify-content: center;
 } */
 
+
 .foot_panel4 {
   background-color: rgb(66, 16, 16);
   color: white;
@@ -564,24 +569,63 @@ textarea {
   padding: 8px;
   margin: 15px;
   text-decoration: none;
-  color: white;
+  color: rgb(18, 16, 16);
 }
 
 .social-icons a:hover {
   color: brown;
-  background-color: hsl(20, 43%, 93%);
+  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;
+  /* color: white; */
+}
+
+.social-icons a:hover {
+  /* color: brown; */
+  /* background-color: hsl(20, 43%, 93%); */
   border-radius: 50px;
 }
+
+.fa-facebook{
+  color: hsl(203, 30%, 26%);
+}
+
 .fa-facebook:hover {
+  
+  transform: scale(1.5);
   color:#3B5998;
+  transition: transform 0.2s ease, color 0.2s ease;
 }
 
+.fa-instagram{
+  color: hsl(203, 30%, 26%);
+}
 .fa-instagram:hover {
+  transform: scale(1.5);
   color:#D62976;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+.fa-x-twitter{
+  color: hsl(203, 30%, 26%);
+
 }
 
-.fa-twitter:hover {
-  color:#00B6F1;
+.fa-x-twitter:hover {
+  color:black;
+  transform: scale(1.5);
+  transition: transform 0.2s ease, color 0.2s ease;
 }
 
 #author {