From 9c062a29015547c2d3dc6490e59a42f205917403 Mon Sep 17 00:00:00 2001
From: Anushka Chouhan <anushkachouhan064@gmail.com>
Date: Tue, 15 Oct 2024 16:09:36 +0530
Subject: [PATCH] Update Scrollup button

---
 index.html |  6 +++++-
 style.css  | 25 +++++++++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 51ef4d40..fbea959b 100644
--- a/index.html
+++ b/index.html
@@ -1167,7 +1167,11 @@ <h2>Subscribe to Our Newsletter</h2>
 
 
     </main>
-    <button id="backToTop">⬆️</button>
+    <!-- <button id="backToTop">⬆️</button> -->
+    <div id="backToTop" title="Back to Top">
+        <i class="fas fa-arrow-up"></i>
+    </div>
+    
     <!--mainn-->
     <!-- footer -->
     <footer id="footer">
diff --git a/style.css b/style.css
index bafe4745..ce172973 100644
--- a/style.css
+++ b/style.css
@@ -475,18 +475,35 @@ body.dark-mode footer .phone{
 [data-theme="dark"] .close-icon{
 background: var(--light);
 }
-
 #backToTop {
   position: fixed;
   bottom: 30px;
   right: 10px;
-  font-size: 50px;
+  width: 60px;
+  height: 60px;
+  font-size: 30px; /* Adjust icon size */
   cursor: pointer;
   text-align: center;
-  background-color: transparent;
+  background-color: var(--primary-color); /* Dark Pink */
+  color: var(--light); /* Light text color */
+  border-radius: 50%; /* Make it round */
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Shadow for depth */
+  transition: all 0.3s ease-in-out; /* Smooth transition */
   z-index: 1000;
-  
 }
+
+#backToTop:hover {
+  background-color: var(--dark); /* Dark background on hover */
+  color: var(--primary-color); /* Pink text color on hover */
+  transform: scale(1.1); /* Slight zoom effect */
+  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2); /* More shadow on hover */
+}
+
+#backToTop i {
+  line-height: 60px; /* Center icon vertically */
+  font-size: 24px; /* Adjust icon size */
+}
+
 .heart-container {
   display: flex;
   justify-content: center;