From 6549fd24f7eb7c990cdb5898d3fd36620b60c775 Mon Sep 17 00:00:00 2001
From: tarunkumar2005 <tarunkumar6258278@gmail.com>
Date: Fri, 4 Oct 2024 23:06:27 +0530
Subject: [PATCH] Added the scroll to top with enhanced ui and fixed someone
 has putted the css directly on button which is bad habbit fixed that

---
 index.html |   2 +-
 script.js  |   5 +-
 style.css  | 880 +++++++++++++++++++++++++++--------------------------
 3 files changed, 450 insertions(+), 437 deletions(-)

diff --git a/index.html b/index.html
index 5cd22aca..91217074 100644
--- a/index.html
+++ b/index.html
@@ -107,7 +107,7 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
                     <span>Overall Rating:</span>
                     <p class="star">4.2★</p>
                 </div>
-                <button type="button">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
+                <button class="buyNow" type="button">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
             </div>
             <div class="col-2">
                 <img src="images/controller3.png" class="controller" alt="Controller">
diff --git a/script.js b/script.js
index d02939cc..a062439a 100644
--- a/script.js
+++ b/script.js
@@ -44,7 +44,10 @@ document.addEventListener('DOMContentLoaded', function() {
             scrollToTopBtn.classList.remove('show');
         }
 
-        setProgress(scrolled * 100);
+        // Ensure smooth progress updates
+        requestAnimationFrame(() => {
+            setProgress(scrolled * 100);
+        });
     }
 
     function scrollToTop() {
diff --git a/style.css b/style.css
index 15698a13..6f062db9 100644
--- a/style.css
+++ b/style.css
@@ -1,612 +1,625 @@
 * {
-    margin: 0;
-    padding: 0;
-    font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
 }
 html {
-    overflow-y: scroll;
+  overflow-y: scroll;
 }
 
 html::-webkit-scrollbar {
-    width: 9px;
-    transition: width 0.3s ease;
-    margin: 10px;
+  width: 9px;
+  transition: width 0.3s ease;
+  margin: 10px;
 }
 
 html::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: linear-gradient(90deg, #ff459f, #ff9532, #ff459f);
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  background: linear-gradient(90deg, #ff459f, #ff9532, #ff459f);
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
 }
 
 html::-webkit-scrollbar-thumb:window-inactive {
-    background: rgb(156, 156, 156);
+  background: rgb(156, 156, 156);
 }
 .container {
-    width: 100%;
-    min-height: 100vh;
-    padding-left: 5%;
-    padding-right: 5%;
-    box-sizing: border-box;
-    overflow: hidden;
+  width: 100%;
+  min-height: 100vh;
+  padding-left: 5%;
+  padding-right: 5%;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 .navbar {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    position: fixed;
-    top: 0;
-    overflow: hidden;
-    background-color: #fff;
-    z-index: 1000;
- 
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  overflow: hidden;
+  background-color: #fff;
+  z-index: 1000;
 }
 
 .logo {
-    width: 50px;
-    cursor: pointer;
-    margin: 18px 0;
+  width: 50px;
+  cursor: pointer;
+  margin: 18px 0;
 }
 
 @keyframes rainbow {
-    0% {
-        background-position: 0% 50%;
-    }
+  0% {
+    background-position: 0% 50%;
+  }
 
-    50% {
-        background-position: 100% 50%;
-    }
+  50% {
+    background-position: 100% 50%;
+  }
 
-    100% {
-        background-position: 0% 50%;
-    }
+  100% {
+    background-position: 0% 50%;
+  }
 }
 
 .website-name {
-    margin-left: 16px;
-    font-size: 20px;
-    font-weight: bold;
-    color: transparent;
-    background: linear-gradient(90deg, #ff459f, #ff9532, #ffd700, #32cd32, #1e90ff, #8a2be2, #ff459f);
-    background-size: 400% 400%;
-    -webkit-background-clip: text;
-    background-clip: text;
-    display: inline-block;
-    animation: rainbow 5s linear infinite;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-    font-weight: bolder;
-    cursor: pointer;
+  margin-left: 16px;
+  font-size: 20px;
+  font-weight: bold;
+  color: transparent;
+  background: linear-gradient(
+    90deg,
+    #ff459f,
+    #ff9532,
+    #ffd700,
+    #32cd32,
+    #1e90ff,
+    #8a2be2,
+    #ff459f
+  );
+  background-size: 400% 400%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  display: inline-block;
+  animation: rainbow 5s linear infinite;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
+  font-weight: bolder;
+  cursor: pointer;
 }
 
 .menu-icon {
-    width: 25px;
-    cursor: pointer;
-    display: none;
+  width: 25px;
+  cursor: pointer;
+  display: none;
 }
 
 nav {
-    flex: 1;
-    text-align: right;
-    margin-right: 100px;
+  flex: 1;
+  text-align: right;
+  margin-right: 100px;
 }
 
 nav ul li {
-    list-style: none;
-    display: inline-block;
-    margin-right: 30px;
+  list-style: none;
+  display: inline-block;
+  margin-right: 30px;
 }
 
 nav ul li a {
-    text-decoration: none;
-    color: #000;
-    font-size: 14px;
-    font-weight: bold;
-    display: inline-block;
-    transition: color 0.5s, transform 0.5s;
+  text-decoration: none;
+  color: #000;
+  font-size: 14px;
+  font-weight: bold;
+  display: inline-block;
+  transition: color 0.5s, transform 0.5s;
 }
 
 nav ul li a:hover {
-    color: #e00999;
-    transform: scale(1.18);
+  color: #e00999;
+  transform: scale(1.18);
 }
 
 nav ul li.login {
-    background: linear-gradient(to right, #fb5283, #ff3527);
-    height: 24px;
-    border-radius: 20px;
-    padding: 4px 18px;
-    cursor: pointer;
+  background: linear-gradient(to right, #fb5283, #ff3527);
+  height: 24px;
+  border-radius: 20px;
+  padding: 4px 18px;
+  cursor: pointer;
 }
 
 nav ul li.login a {
-    color: #fff;
+  color: #fff;
 }
 
 nav ul li.login:hover {
-    color: #fff;
+  color: #fff;
 }
 
 .row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 120px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 120px 0;
 }
 
 .col-1 {
-    flex-basis: 40%;
-    position: relative;
-    margin-left: 50px;
+  flex-basis: 40%;
+  position: relative;
+  margin-left: 50px;
 }
 
 .col-1 h2 {
-    font-size: 54px;
-    color: #000;
-    cursor: pointer;
-    letter-spacing: 1px;
+  font-size: 54px;
+  color: #000;
+  cursor: pointer;
+  letter-spacing: 1px;
 }
 
 .col-1 h3 {
-    font-size: 30px;
-    color: #707070;
-    font-weight: 100;
-    margin: 20px 0 10px;
-    cursor: pointer;
+  font-size: 30px;
+  color: #707070;
+  font-weight: 100;
+  margin: 20px 0 10px;
+  cursor: pointer;
 }
 
 .col-1 p {
-    font-size: 16px;
-    color: #a1a1a1;
-    font-weight: 500;
-    cursor: pointer;
+  font-size: 16px;
+  color: #a1a1a1;
+  font-weight: 500;
+  cursor: pointer;
 }
 
-button {
-    width: 140px;
-    border: 0;
-    padding: 14px 12px;
-    outline: none;
-    color: #fff;
-    font-size: 16px;
-    font-weight: bolder;
-    background: linear-gradient(to right, #fb5283, #ff3527);
-    border-radius: 6px;
-    cursor: pointer;
-    transition: width 0.5s;
-    background: linear-gradient(to right, #ff3527, #fb5283, #ffd700);
-    transition: background 0.3s ease-in-out;
+.buyNow {
+  width: 140px;
+  border: 0;
+  padding: 14px 12px;
+  outline: none;
+  color: #fff;
+  font-size: 16px;
+  font-weight: bolder;
+  background: linear-gradient(to right, #fb5283, #ff3527);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: width 0.5s;
+  background: linear-gradient(to right, #ff3527, #fb5283, #ffd700);
+  transition: background 0.3s ease-in-out;
 }
 
-button img {
-    width: 30px;
-    display: none;
+.buyNow img {
+  width: 30px;
+  display: none;
 }
 
-button:hover img {
-    display: block;
+.buyNow:hover img {
+  display: block;
 }
 
-button:hover {
-    width: 160px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+.buyNow:hover {
+  width: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .col-1::after {
-    content: '';
-    width: 10px;
-    height: 63%;
-    background: linear-gradient(#ff459f, #ff6062);
-    position: absolute;
-    left: -40px;
-    top: 8px;
+  content: "";
+  width: 10px;
+  height: 63%;
+  background: linear-gradient(#ff459f, #ff6062);
+  position: absolute;
+  left: -40px;
+  top: 8px;
 }
 
 .col-2 {
-    position: relative;
-    flex-basis: 60%;
-    display: flex;
-    align-items: center;
+  position: relative;
+  flex-basis: 60%;
+  display: flex;
+  align-items: center;
 }
 
 .col-2 .controller {
-    width: 90%;
+  width: 90%;
 }
 
 .color-box {
-    position: absolute;
-    right: 0;
-    top: 0;
-    background: linear-gradient(#ff459f, #ff9532);
-    border-radius: 20px 0 0 20px;
-    height: 100%;
-    width: 80%;
-    z-index: -1;
-    transform: translateX(150px);
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: linear-gradient(#ff459f, #ff9532);
+  border-radius: 20px 0 0 20px;
+  height: 100%;
+  width: 80%;
+  z-index: -1;
+  transform: translateX(150px);
 }
 
 .price {
-    margin: 20px 0;
-    display: flex;
+  margin: 20px 0;
+  display: flex;
 }
 
 .original-price {
-    font-size: 20px;
-    color: #a1a1a1;
-    text-decoration: line-through;
-    margin-right: 15px;
+  font-size: 20px;
+  color: #a1a1a1;
+  text-decoration: line-through;
+  margin-right: 15px;
 }
 
 .discounted-price {
-    font-size: 24px;
-    color: #000;
-    font-weight: bold;
+  font-size: 24px;
+  color: #000;
+  font-weight: bold;
 }
 
 .discount {
-    background-color: #ff3c6d;
-    color: #fff;
-    padding: 5px 10px;
-    border-radius: 5px;
-    font-size: 14px;
-    font-weight: bold;
-    margin-left: 15px;
+  background-color: #ff3c6d;
+  color: #fff;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: 15px;
 }
 
 .add-btn img {
-    width: 40px;
-    margin-bottom: 5px;
+  width: 40px;
+  margin-bottom: 5px;
 }
 
 .add-btn {
-    text-align: center;
-    font-size: 14px;
-    font-weight: bold;
-    color: #fff;
-    cursor: pointer;
-    border: 1.5px solid #fff;
-    padding: 10px;
-    border-radius: 5px;
-    display: inline-block;
-    transition: transform 0.5s;
+  text-align: center;
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+  cursor: pointer;
+  border: 1.5px solid #fff;
+  padding: 10px;
+  border-radius: 5px;
+  display: inline-block;
+  transition: transform 0.5s;
 }
 
 .add-btn p {
-    font-size: 16px;
+  font-size: 16px;
 }
 
 .add-btn:hover {
-    transform: scale(1.1);
+  transform: scale(1.1);
 }
 
 .rating {
-    display: flex;
-    align-items: center;
-    margin: 10px 0;
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
 }
 
 .rating span {
-    font-size: 26px;
-    margin-right: 10px;
-    background: linear-gradient(to right, #ff459f, #ff9532, #ffd700, #32cd32, #1e90ff);
-    /* Example gradient colors */
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
+  font-size: 26px;
+  margin-right: 10px;
+  background: linear-gradient(
+    to right,
+    #ff459f,
+    #ff9532,
+    #ffd700,
+    #32cd32,
+    #1e90ff
+  );
+  /* Example gradient colors */
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .rating p {
-    font-size: 14px;
-    color: #707070;
-    margin: 0;
+  font-size: 14px;
+  color: #707070;
+  margin: 0;
 }
 
 .overall-rating {
-    margin: 14px 0;
-    font-size: 16px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
+  margin: 14px 0;
+  font-size: 16px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
 }
 
 .overall-rating .star {
-    margin-left: 5px;
-    color: #ff3c6d;
-    font-weight: 600;
+  margin-left: 5px;
+  color: #ff3c6d;
+  font-weight: 600;
 }
 
 .footer-container {
-    background-color: #444444;
-    color: #fff;
-    padding: 40px 20px;
-    text-align: center;
-    position: relative;
+  background-color: #444444;
+  color: #fff;
+  padding: 40px 20px;
+  text-align: center;
+  position: relative;
 }
 
 .footer-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin-bottom: 20px;
 }
 
 .footer-section {
-    flex: 1 1 200px;
-    margin: 10px 20px;
-    max-width: 300px;
-    text-align: left;
+  flex: 1 1 200px;
+  margin: 10px 20px;
+  max-width: 300px;
+  text-align: left;
 }
 
 .footer-section .logo-name {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
 }
 
 .footer-section .logo-name img {
-    height: 50px;
-    margin-right: 10px;
+  height: 50px;
+  margin-right: 10px;
 }
 
 .footer-section .logo-name h4 {
-    font-size: 18px;
-    margin: 20px 0;
+  font-size: 18px;
+  margin: 20px 0;
 }
 
 .footer-section .contact {
-    font-size: 14px;
-    line-height: 28px;
-    color: #d3d3d3;
-    font-weight: 600;
-    cursor: pointer;
+  font-size: 14px;
+  line-height: 28px;
+  color: #d3d3d3;
+  font-weight: 600;
+  cursor: pointer;
 }
 
 .footer-section .follow {
-    margin-left: 20px;
+  margin-left: 20px;
 }
 
 .footer-section .contact:hover {
-    color: #ffee05;
+  color: #ffee05;
 }
 
 .footer-section h4 {
-    margin-bottom: 20px;
-    margin-top: 16px;
+  margin-bottom: 20px;
+  margin-top: 16px;
 }
 
 .footer-section p {
-    line-height: 22px;
-    font-size: 14px;
-    font-weight: 400;
-    text-align: justify;
+  line-height: 22px;
+  font-size: 14px;
+  font-weight: 400;
+  text-align: justify;
 }
 
 .footer-bottom {
-    border-top: 0.7px dashed #e4e4e4;
-    padding-top: 20px;
-    max-width: 30%;
-    margin: 0 auto;
-    text-align: center;
+  border-top: 0.7px dashed #e4e4e4;
+  padding-top: 20px;
+  max-width: 30%;
+  margin: 0 auto;
+  text-align: center;
 }
 
 .footer-bottom p {
-    margin: 5px 0;
-    font-size: 12px;
+  margin: 5px 0;
+  font-size: 12px;
 }
 
 .social-links a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .social-links a:first-child {
-    color: #3b5998;
+  color: #3b5998;
 }
 
 .social-links a:nth-child(2) {
-    color: #1DA1F2;
+  color: #1da1f2;
 }
 
 .social-links a:last-child {
-    color: #0077b5;
+  color: #0077b5;
 }
 
 .instagram-link {
-    display: inline-block;
+  display: inline-block;
 }
 
 .instagram-icon {
-    font-size: 64px;
-    background: radial-gradient(circle at 30% 30%, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
-    mask-image: url('https://unpkg.com/ionicons@5.5.2/dist/svg/logo-instagram.svg');
-    mask-size: cover;
-    color: transparent;
+  font-size: 64px;
+  background: radial-gradient(
+    circle at 30% 30%,
+    #f09433,
+    #e6683c,
+    #dc2743,
+    #cc2366,
+    #bc1888
+  );
+  mask-image: url("https://unpkg.com/ionicons@5.5.2/dist/svg/logo-instagram.svg");
+  mask-size: cover;
+  color: transparent;
 }
 
 .social-links ion-icon {
-    font-size: 30px;
-    margin: 14px;
-    cursor: pointer;
-    transition: transform 0.3s;
+  font-size: 30px;
+  margin: 14px;
+  cursor: pointer;
+  transition: transform 0.3s;
 }
 
 .social-links ion-icon:hover {
-    transform: scale(1.2);
+  transform: scale(1.2);
 }
 
-
-
-
-
 /* -----------------------------------------------Responsiveness----------------------------------------------------- */
 
-
 /* ----------------------------for mobiles--------------------------------------- */
 
 @media only screen and (max-width: 700px) {
+  .menu-icon {
+    margin-right: 40px;
+  }
 
-    .menu-icon {
-        margin-right: 40px;
-    }
-
-    nav ul {
-        width: 100%;
-        background: linear-gradient(to right, #fb5283, #ff3527);
-        position: absolute;
-        top: 73px;
-        right: 0;
-        z-index: 2;
-        margin-right: 20px;
-    }
-
-    nav ul li {
-        display: block;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        text-align: center;
-        margin-left: 50px;
-    }
+  nav ul {
+    width: 100%;
+    background: linear-gradient(to right, #fb5283, #ff3527);
+    position: absolute;
+    top: 73px;
+    right: 0;
+    z-index: 2;
+    margin-right: 20px;
+  }
 
-    nav ul li a {
-        color: #fff;
-    }
+  nav ul li {
+    display: block;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+    margin-left: 50px;
+  }
 
-    nav ul li a:hover {
-        color: #ffee00;
-        transform: scale(1.18);
-    }
+  nav ul li a {
+    color: #fff;
+  }
 
-    .login a {
-        background-color: (#ff459f, #ff9532);
-        color: white;
-        padding: 4px 20px;
-        text-decoration: none;
-        border-radius: 5px;
-        display: inline-block;
-    }
+  nav ul li a:hover {
+    color: #ffee00;
+    transform: scale(1.18);
+  }
 
-    .login a:hover {
-        background-color: #e05599;
-    }
+  .login a {
+    background-color: (#ff459f, #ff9532);
+    color: white;
+    padding: 4px 20px;
+    text-decoration: none;
+    border-radius: 5px;
+    display: inline-block;
+  }
 
-    .menu-icon {
-        display: block;
-    }
+  .login a:hover {
+    background-color: #e05599;
+  }
 
-    #menuList {
-        overflow: hidden;
-        transition: 0.5s;
-    }
+  .menu-icon {
+    display: block;
+  }
 
-    .row {
-        flex-direction: column-reverse;
-        margin: 100px 0;
-    }
+  #menuList {
+    overflow: hidden;
+    transition: 0.5s;
+  }
 
-    .col-2 {
-        flex-basis: 100%;
-        margin-bottom: 50px;
-    }
+  .row {
+    flex-direction: column-reverse;
+    margin: 100px 0;
+  }
 
-    .col-2 .controller {
-        width: 77%;
-    }
+  .col-2 {
+    flex-basis: 100%;
+    margin-bottom: 50px;
+  }
 
-    .color-box {
-        transform: translateX(75px);
-    }
+  .col-2 .controller {
+    width: 77%;
+  }
 
-    .col-1 {
-        flex-basis: 100%;
-    }
+  .color-box {
+    transform: translateX(75px);
+  }
 
-    .col-1 h2 {
-        font-size: 35px;
-    }
+  .col-1 {
+    flex-basis: 100%;
+  }
 
-    .col-1 h3 {
-        font-size: 20px;
-    }
+  .col-1 h2 {
+    font-size: 35px;
+  }
 
-    .footer-content {
-        flex-direction: column;
-        align-items: center;
-    }
+  .col-1 h3 {
+    font-size: 20px;
+  }
 
-    .footer-section {
-        max-width: 100%;
-        text-align: center;
-    }
+  .footer-content {
+    flex-direction: column;
+    align-items: center;
+  }
 
-    .footer-section .logo-name {
-        justify-content: center;
-    }
+  .footer-section {
+    max-width: 100%;
+    text-align: center;
+  }
 
-    .footer-bottom {
-        max-width: fit-content;
-    }
+  .footer-section .logo-name {
+    justify-content: center;
+  }
 
+  .footer-bottom {
+    max-width: fit-content;
+  }
 }
 
-
 /* --------------------------for tabs------------------------------------ */
 
-
 @media only screen and (max-width: 1180px) {
+  .menu-icon {
+    margin-right: 60px;
+  }
 
-    .menu-icon {
-        margin-right: 60px;
-    }
-
-    nav ul {
-        width: 100%;
-        background: linear-gradient(to right, #fb5283, #ff3527);
-        position: absolute;
-        top: 73px;
-        right: 0;
-        z-index: 2;
-        margin-right: 21px;
-    }
+  nav ul {
+    width: 100%;
+    background: linear-gradient(to right, #fb5283, #ff3527);
+    position: absolute;
+    top: 73px;
+    right: 0;
+    z-index: 2;
+    margin-right: 21px;
+  }
 
-    nav ul li {
-        display: block;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        text-align: center;
-        margin-left: 50px;
-    }
+  nav ul li {
+    display: block;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+    margin-left: 50px;
+  }
 
-    nav ul li a {
-        color: #fff;
-    }
+  nav ul li a {
+    color: #fff;
+  }
 
-    nav ul li a:hover {
-        color: #ffee00;
-        transform: scale(1.18);
-    }
+  nav ul li a:hover {
+    color: #ffee00;
+    transform: scale(1.18);
+  }
 
-    .login a {
-        background-color: #752280;
-        color: white;
-        padding: 4px 20px;
-        text-decoration: none;
-        border-radius: 5px;
-        display: inline-block;
-    }
+  .login a {
+    background-color: #752280;
+    color: white;
+    padding: 4px 20px;
+    text-decoration: none;
+    border-radius: 5px;
+    display: inline-block;
+  }
 
-    .login a:hover {
-        background-color: (#f267ff, #ff9532);
-    }
+  .login a:hover {
+    background-color: (#f267ff, #ff9532);
+  }
 
-    .menu-icon {
-        display: block;
-    }
+  .menu-icon {
+    display: block;
+  }
 
-    #menuList {
-        overflow: hidden;
-        transition: 0.5s;
-    }
+  #menuList {
+    overflow: hidden;
+    transition: 0.5s;
+  }
 }
 
 .scroll-top {
@@ -626,75 +639,72 @@ button:hover {
     font-size: 24px;
     opacity: 0;
     visibility: hidden;
-    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    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: hidden;
-}
-
-.scroll-top.show {
+    overflow: visible;
+    z-index: 10; /* Ensure button is on top */
+  }
+  
+  .scroll-top.show {
     opacity: 1;
     visibility: visible;
-}
-
-.scroll-top:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
-}
-
-.scroll-top:active {
-    transform: translateY(-2px);
-}
-
-.scroll-top-icon {
+  }
+  
+  .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 {
+  }
+  
+  .scroll-top:hover .scroll-top-icon {
     transform: translateY(-3px);
-}
-
-.progress-ring {
+  }
+  
+  /* Progress Ring Styling */
+  .progress-ring {
     position: absolute;
     top: 0;
     left: 0;
-    transform: rotate(-90deg);
-}
-
-.progress-ring__circle {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg); /* To start from the top */
+  }
+  
+  .progress-ring__circle {
     transition: stroke-dashoffset 0.35s;
     transform-origin: 50% 50%;
-}
-
-@keyframes pulse {
+  }
+  
+  /* Pulse Animation */
+  @keyframes pulse {
     0% {
-        box-shadow: 0 0 0 0 rgba(255, 69, 159, 0.7);
+      box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
     }
-    70% {
-        box-shadow: 0 0 0 20px rgba(255, 69, 159, 0);
+    50% {
+      box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
     }
     100% {
-        box-shadow: 0 0 0 0 rgba(255, 69, 159, 0);
+      box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
     }
-}
-
-.scroll-top:hover {
+  }
+  
+  .scroll-top:hover {
     animation: pulse 1.5s infinite;
-}
-
-@keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {
-        transform: translateY(0);
-    }
-    40% {
-        transform: translateY(-10px);
-    }
-    60% {
-        transform: translateY(-5px);
-    }
-}
-
-.scroll-top.show:not(:hover) {
-    animation: bounce 2s infinite;
-}
\ No newline at end of file
+  }
+  
+  .scroll-top.show {
+    animation: none; /* No animation when showing the button */
+  }
+  
+  .scroll-top.show:hover {
+    animation: pulse 1.5s infinite; /* Pulse on hover */
+  }  
\ No newline at end of file