diff --git a/style.css b/style.css
index 6e6c4fc9..9dcde66b 100644
--- a/style.css
+++ b/style.css
@@ -15,16 +15,13 @@
     padding: 10px;
     margin-bottom: 15px;
     text-align: center;
+    width: 90%;
     border-bottom: 1px solid #ddd;
     border-radius: 6px;
-    align-items: center;
   }
 .card-body {
     display: flex;
-    width: 90%;
-    margin: 20px auto;
-    padding: 20px;
-    justify-content: space-between; /* Form on the right and image on the left */
+    justify-content: space-between; /* Form on the left and image on the right */
     align-items: flex-start; /* Align content to the top */
 }
 
@@ -33,11 +30,10 @@
 }
 
 .image-section {
-    width: 80%; /* Width for the image section */
+    width: 50%; /* Width for the image section */
     display: flex;
     justify-content: center; /* Center the image */
     align-items: center;
-    height: 70%;
 }
 
 .image-section img {
@@ -72,10 +68,14 @@ button[type="submit"] {
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease; /* Add transition */
 }
+    
+
 
 button[type="submit"]:hover {
     background-color: #444;
+    transform: scale(1.1);
 }
 
 
@@ -135,6 +135,7 @@ html::-webkit-scrollbar-thumb:window-inactive {
 .container {
     width: 100%;
     min-height: 100vh;
+    padding-right: 5%;
     box-sizing: border-box;
     overflow-x: hidden;
 }
@@ -143,7 +144,6 @@ html::-webkit-scrollbar-thumb:window-inactive {
     width: 100%;
     display: flex;
     align-items: center;
-    justify-content: space-between;
     position: fixed;
     top: 0;
     overflow: hidden;
@@ -207,7 +207,7 @@ html::-webkit-scrollbar-thumb:window-inactive {
 .logo {
     width: 50px;
     cursor: pointer;
-    margin: 18px 10px;
+    margin: 18px 0;
 }
 
 @keyframes rainbow {
@@ -247,15 +247,14 @@ html::-webkit-scrollbar-thumb:window-inactive {
 }
 
 nav {
-    height: 78.16px;
-    display: flex;
-    align-items: center;
+    flex: 1;
+    text-align: right;
+    margin-right: 100px;
 }
 nav ul{
+    margin-left: 20px;
     display: flex;
     flex-direction: row;
-    height: 78.16px;
-    align-items: center;
 }
 nav ul li {
     list-style: none;
@@ -353,55 +352,55 @@ button {
 }
 #cart-btn
 {
-    padding: 12px 14px;
-}
-
-/* button img {
-    width: 18px;
-    display: none;
+   
+    margin-left: 20px;
 }
 
-button:hover img {
-    display: block;
-} */
-
-#buy-btn img{
+button img {
     width: 30px;
     display: none;
 }
 
-#buy-btn:hover img{
+button:hover img {
     display: block;
 }
-
-#cart-btn img{
-    width: 18px;
-    display: none;
-}
-
-#cart-btn:hover img{
-    display: block;
+#cart-btn {
+    padding: 12px 14px;
+    margin-left: 20px;
 }
-
-#cart-btn:hover
-{
-    width: 140px;
+#cart-btn,
+#buy-btn {
+    width: 150px;
+    height: 45px;
+    padding: 10px 0px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     display: flex;
+    justify-content: center;
     align-items: center;
-    justify-content: space-between;
-
+    padding: 10px;
+    white-space: nowrap;
+    flex-grow: 1;
 }
-#buy-btn:hover
-{
-    width: 140px;
+#buy-btn:hover,
+#cart-btn:hover {
+    width: 160px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px;
+    transform: scale(1.1);
+    transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out, transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
 }
 .btn-section
 {   display: inline-flex;
     gap: 15px;
+    
+   
 }
 
 .col-1::after {
@@ -568,10 +567,6 @@ button:hover img {
     margin-right: 15px;
 }
 
-.logo-outer{
-    display: flex;
-    align-items: center;
-}
 .logo-text {
     font-size: 1.5em;
     margin: 0;
@@ -744,7 +739,7 @@ button:hover img {
 
 .social-sidebar {
     position: fixed;
-    top: 55%;
+    top: 50%;
     left: 0;
     transform: translateY(-50%);
     display: flex;
@@ -822,11 +817,10 @@ button:hover img {
         width: 100%;
         background: linear-gradient(to right, #fb5283, #ff3527);
         position: absolute;
-        /* top: 73px; */
+        top: 73px;
         right: 0;
         z-index: 2;
         margin-right: 20px;
-        position:fixed;
     }
 
     nav ul li {
@@ -898,48 +892,6 @@ button:hover img {
         font-size: 20px;
     }
 
-    input, textarea {
-        width: 160%; /* Adjust width for better alignment */
-        padding: 10px;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-    }
-
-    .card-body {
-        display: flex;
-        width: 90%;
-        margin: 20px auto;
-        padding: 20px;
-        justify-content: space-between; /* Form on the right and image on the left */
-        align-items: flex-start; /* Align content to the top */
-        flex-direction: column;
-    }
-
-    .image-section {
-        width: 90%; /* Width for the image section */
-        display: flex;
-        justify-content: center; /* Center the image */
-        align-items: center;
-        margin-bottom: 8px;
-    }
-    .form-section {
-        width: 50%; /* Width for the form section */
-    }
-    
-    
-    
-    .image-section img {
-        max-width: 120%; /* Make sure image does not exceed its container width */
-        height: auto;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .form-group {
-        margin-bottom: 20px;
-    }
-    
-    
     .footer-content {
         flex-direction: column;
         align-items: center;
@@ -957,6 +909,7 @@ button:hover img {
     .footer-bottom {
         max-width: fit-content;
     }
+
 }
 
 
@@ -989,17 +942,12 @@ button:hover img {
 
     nav ul li a {
         color: #fff;
-        font-size: 1rem;
-        padding: 2rem
     }
 
     nav ul li a:hover {
         color: #ffee00;
         transform: scale(1.18);
     }
-    .switch{
-        margin: 50px;
-    }
 
     .login a {
         background-color: #752280;
@@ -1022,105 +970,28 @@ button:hover img {
         overflow: hidden;
         transition: 0.5s;
     }
-    .header .navbar{
-        align-items: center;
-        justify-content: center;
-    }
 }
 
 .scroll-top {
     position: fixed;
-    bottom: 1%;
-    right: 50%;
-    background: linear-gradient(145deg, #ff459f, #ff6062);
-    color: white;
-    width: 60px;
-    height: 60px;
+    bottom: 20px;
+    right: 20px;
+    background: #ff459f;
+    padding: 10px;
     border-radius: 50%;
-    border: none;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-    overflow: visible;
-    z-index: 10; /* Ensure button is on top */
-  }
-  
-  .scroll-top.show {
-    opacity: 1;
-    visibility: visible;
-  }
-  
-  .scroll-top:hover {
-    transform: scale(1.1); /* Subtle scaling instead of expanding */
-    box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6); /* Slightly larger shadow */
-  }
-  
-  .scroll-top:active {
-    transform: scale(1.05); /* Minor scale reduction on click */
-  }
-  
-  .scroll-top-icon {
-    position: relative;
-    z-index: 2;
-    transition: transform 0.3s ease;
-  }
-  
-  .scroll-top:hover .scroll-top-icon {
-    transform: translateY(-3px);
-  }
-  
-  /* Progress Ring Styling */
-  .progress-ring {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transform: rotate(-90deg); /* To start from the top */
-  }
-  
-  .progress-ring__circle {
-    transition: stroke-dashoffset 0.35s;
-    transform-origin: 50% 50%;
-  }
-  
-  /* Pulse Animation */
-  @keyframes pulse {
-    0% {
-      box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-    }
-    50% {
-      box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
-    }
-    100% {
-      box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-    }
+    display: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
   
   .scroll-top:hover {
-    animation: pulse 1.5s infinite;
-  }
-  
-  .scroll-top.show {
-    animation: none; /* No animation when showing the button */
+    background: #ff6062;
   }
   
-  .scroll-top.show:hover {
-    animation: pulse 1.5s infinite; /* Pulse on hover */
-  }
-
-.searchbar-outer{
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .hidden {
+    display: none;
 }
+
 .search-bar {
     text-align: center;
     margin: 15px 0;
@@ -1132,12 +1003,14 @@ button:hover img {
     padding: 8px 15px;
     border-radius: 50px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    width: 50%;
-    left: 27rem;
+    max-width: 250px; /* Adjust width to make it smaller */
+    margin: 20px auto 0 auto; /* Right alignment with some margin */
+    position: relative;
+    right: 80px; /* Push it further right */
 }
 
 #search-input {
-    width: 100%;  /* Smaller input size */
+    width: 60%;  /* Smaller input size */
     padding: 8px 10px;
     font-size: 14px;
     border: none;
@@ -1192,8 +1065,7 @@ button:hover img {
 
 .hero-content {
     position: relative;
-    z-index: 1;
-    width: 100%;
+    z-index: 2;
 }
 
 .hero-content h1 {
@@ -1262,10 +1134,7 @@ button:hover img {
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    /* display: block; */
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    display: block;
     transition: background-color 0.3s ease;
   }
   
@@ -1280,27 +1149,14 @@ button:hover img {
     background-color: #ffe0b5;
     color: #333;
     border-left: 4px solid #ff8552;
-    transition: all 0.6s ease;
+    transition: max-height 0.4s ease;
   }
   
   .faq input[type="checkbox"]:checked ~ .faq-answer {
     max-height: 150px;
     padding: 15px;
   }
-  .arrow {
-    margin-top: -3px;
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    border-right: 2px solid #fff;
-    border-bottom: 2px solid #fff;
-    transform: rotate(45deg);
-    transition: transform 0.3s ease;
-  }
-  /* Rotate arrow on FAQ open */
-  .faq input[type="checkbox"]:checked + label .arrow {
-    transform: rotate(225deg);
-  }
+  
 
 /* Body styles for consistency */
 #review-body {