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