From 3c7fa767e69ac8c3f0bcfecfc3e5132f2517ac57 Mon Sep 17 00:00:00 2001
From: saadgibawa <saadgibawa31@gmail.com>
Date: Sat, 9 Nov 2024 11:09:25 +0530
Subject: [PATCH] bugs fixed

---
 Achievements.html     | 241 +++++++++++++++---------------------------
 Appearances.html      | 182 +++++++------------------------
 Comics.html           | 182 +++++++------------------------
 PrivacyPolicy.html    | 183 +++++++-------------------------
 Terms&Conditions.html | 180 +++++++------------------------
 blog.html             |   2 +-
 index.html            | 183 +++++++-------------------------
 merchandise.html      |   4 +-
 movies.html           | 182 +++++++------------------------
 quiz.html             | 192 ++++++++-------------------------
 sticker.html          | 188 ++++++++------------------------
 style.css             |  12 ++-
 variants.css          |  11 ++
 variants.html         | 184 +++++++-------------------------
 videos.html           | 183 +++++++-------------------------
 villain.html          |  64 ++++-------
 16 files changed, 528 insertions(+), 1645 deletions(-)
diff --git a/Achievements.html b/Achievements.html
index 2e2f86e..d605cd9 100644
--- a/Achievements.html
+++ b/Achievements.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <title>Tony Stark's Remarkable Achievements</title>
     <link rel="website icon" href="/assets/logo/icon.png">
     <style>
@@ -84,178 +85,112 @@
             color: #d3d1d1;
             font-family: Arial, Helvetica, sans-serif;
         }
-        .go-top-btn {
-  position: fixed;
-  bottom: 35px;
-  right: 35px;
-  cursor: pointer;
-  border-radius: 50%;
-  height: 60px;
-  width: 60px;
-  background: #ff0015;
-  border: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
-}
-.go-top-btn:hover {
-  background-color: #ac0000;
-  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
-  transform: translateY(-2px);
-}
+        
     </style>
 </head>
 <body>
     
-    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
-        <div class="scroll-top-icon">
-            <i class="fa-solid fa-arrow-up"></i>
+    <button id="BacktoTop">
+        <div class="circle1">
+          <svg
+            id="back-to-top"
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            fill="currentColor"
+            class="bi bi-arrow-up-circle-fill"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+            ></path>
+          </svg>
         </div>
-        <svg class="progress-ring" width="60" height="60">
-            <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-                cy="30"></circle>
-        </svg>
-    </button>
+      </button>
     <style>
-        .scroll-top {
-            position: fixed;
-            right: 1.6%;
-            background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
-            color: white;
-            width: 60px;
-            height: 60px;
-            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 */
+        #BacktoTop {
+        display: block;
+        /* Ensure the button is part of the layout */
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        width: 55px;
+        height: 55px;
+        background-color: rgb(170, 5, 5);
+        border-radius: 50%;
+        border: none;
+        cursor: pointer;
+        text-align: center;
+        line-height: 50px;
+        font-size: 24px;
+        z-index: 1000;
+        visibility: hidden;
+        opacity: 0;
+        transition: opacity 1.5s, visibility 1.5s, box-shadow 0.3s ease;
+        box-shadow: 0 0 0 2px #fff, 0 0 0 3px #262626,
+            0 0 6px 2px rgba(255, 255, 255, 0.2);
+        /* Adjusted outer rings */
+        overflow: hidden;
         }
-    
-        .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;
+
+        .circle1 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         }
-    
-        .scroll-top:hover .scroll-top-icon {
-            transform: translateY(-3px);
+
+        #BacktoTop:hover {
+        background-color: rgb(106, 12, 11);
+        /* Darker shade on hover */
+        transform: scale(1.1);
+        /* Slight zoom effect on hover */
         }
-    
-        /* Progress Ring Styling */
-        .progress-ring {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            transform: rotate(-90deg);
-            /* To start from the top */
+
+        #BacktoTop svg {
+        fill: #b4a933;
+        transition: fill 0.3s ease-in-out;
         }
-    
-        .progress-ring__circle {
-            transition: stroke-dashoffset 0.35s;
-            transform-origin: 50% 50%;
+
+        #BacktoTop:hover svg {
+        fill: #ffd700;
         }
-    
-        /* 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);
-            }
+        #BacktoTop{
+        animation: glow 5s infinite alternate;
         }
-    
-        .scroll-top:hover {
-            animation: pulse 1.5s infinite;
+        @keyframes glow {
+        from {
+            box-shadow: 0 0 0 2px #fff, 0 0 0 3px #262626, 0 0 6px 2px rgba(255, 255, 255, 0.2), 0 0 5px -8px #6a0a0a;
         }
-    
-        .scroll-top.show {
-            animation: none;
-            /* No animation when showing the button */
+        to {
+            box-shadow: 0 0 0 2px #fff, 0 0 0 3px #262626, 0 0 6px 2px rgba(255, 255, 255, 0.2), 0 0 10px 8px #7b0a0a;
         }
-    
-        .scroll-top.show:hover {
-            animation: pulse 1.5s infinite;
-            /* Pulse on hover */
         }
     </style>
     <script>
-        // Get the button
-        const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-        const progressCircle = document.querySelector(".progress-ring__circle");
-        const radius = progressCircle.r.baseVal.value;
-        const circumference = 2 * Math.PI * radius;
-    
-        // Set the circle progress properties
-        progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-        progressCircle.style.strokeDashoffset = circumference;
-    
-        // Function to show or hide the button based on scroll position
-        function toggleScrollButton() {
-            if (window.scrollY > 100) {
-                scrollToTopBtn.classList.add("show");
-            } else {
-                scrollToTopBtn.classList.remove("show");
-            }
-        }
-    
-        // Function to set the scroll progress on the button ring
-        function setProgress(percent) {
-            const offset = circumference - (percent / 100) * circumference;
-            progressCircle.style.strokeDashoffset = offset;
+        /* Back to Top Button */
+        const scrollToTopBtn = document.getElementById("BacktoTop");
+        window.onscroll = function () {
+          scrollFunction();
+        };
+  
+        function scrollFunction() {
+          if (
+            document.body.scrollTop > 50 ||
+            document.documentElement.scrollTop > 50
+          ) {
+            scrollToTopBtn.style.visibility = "visible";
+            scrollToTopBtn.style.opacity = "1";
+          } else {
+            scrollToTopBtn.style.visibility = "hidden";
+            scrollToTopBtn.style.opacity = "0";
+          }
         }
-    
-        // Listen for scroll events to update button visibility and progress
-        window.addEventListener("scroll", () => {
-            toggleScrollButton();
-            const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-            setProgress(scrollPercent);
+  
+        scrollToTopBtn.addEventListener("click", function () {
+          // Smooth scroll back to top
+          window.scrollTo({ top: 0, behavior: "smooth" });
         });
-    
-        // Smooth scroll to top when the button is clicked
-        scrollToTopBtn.addEventListener("click", () => {
-            window.scrollTo({
-                top: 0,
-                behavior: "smooth"
-            });
-        });
-    
-    </script>
+      </script>
     
     <h1>Tony Stark's Remarkable Achievements</h1>
 
diff --git a/Appearances.html b/Appearances.html
index ba5bc45..8537453 100644
--- a/Appearances.html
+++ b/Appearances.html
@@ -87,153 +87,49 @@
     </style>
   </head>
 
-  <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
-    <div class="scroll-top-icon">
-        <i class="fa-solid fa-arrow-up"></i>
+  <button id="BacktoTop">
+    <div class="circle1">
+      <svg
+        id="back-to-top"
+        xmlns="http://www.w3.org/2000/svg"
+        width="30"
+        height="30"
+        fill="currentColor"
+        class="bi bi-arrow-up-circle-fill"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+        ></path>
+      </svg>
     </div>
-    <svg class="progress-ring" width="60" height="60">
-        <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-            cy="30"></circle>
-    </svg>
-</button>
-<style>
-    .scroll-top {
-        position: fixed;
-        right: 1.6%;
-        background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
-        color: white;
-        width: 60px;
-        height: 60px;
-        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);
-        }
-    }
-
-    .scroll-top:hover {
-        animation: pulse 1.5s infinite;
-    }
-
-    .scroll-top.show {
-        animation: none;
-        /* No animation when showing the button */
-    }
-
-    .scroll-top.show:hover {
-        animation: pulse 1.5s infinite;
-        /* Pulse on hover */
-    }
-</style>
-<script>
-    // Get the button
-    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-    const progressCircle = document.querySelector(".progress-ring__circle");
-    const radius = progressCircle.r.baseVal.value;
-    const circumference = 2 * Math.PI * radius;
-
-    // Set the circle progress properties
-    progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-    progressCircle.style.strokeDashoffset = circumference;
-
-    // Function to show or hide the button based on scroll position
-    function toggleScrollButton() {
-        if (window.scrollY > 100) {
-            scrollToTopBtn.classList.add("show");
-        } else {
-            scrollToTopBtn.classList.remove("show");
-        }
-    }
-
-    // Function to set the scroll progress on the button ring
-    function setProgress(percent) {
-        const offset = circumference - (percent / 100) * circumference;
-        progressCircle.style.strokeDashoffset = offset;
+  </button>
+
+  <script>
+    /* Back to Top Button */
+    const scrollToTopBtn = document.getElementById("BacktoTop");
+    window.onscroll = function () {
+      scrollFunction();
+    };
+
+    function scrollFunction() {
+      if (
+        document.body.scrollTop > 50 ||
+        document.documentElement.scrollTop > 50
+      ) {
+        scrollToTopBtn.style.visibility = "visible";
+        scrollToTopBtn.style.opacity = "1";
+      } else {
+        scrollToTopBtn.style.visibility = "hidden";
+        scrollToTopBtn.style.opacity = "0";
+      }
     }
 
-    // Listen for scroll events to update button visibility and progress
-    window.addEventListener("scroll", () => {
-        toggleScrollButton();
-        const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-        setProgress(scrollPercent);
+    scrollToTopBtn.addEventListener("click", function () {
+      // Smooth scroll back to top
+      window.scrollTo({ top: 0, behavior: "smooth" });
     });
-
-    // Smooth scroll to top when the button is clicked
-    scrollToTopBtn.addEventListener("click", () => {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-    });
-
-</script>
+  </script>
 
   <body class="custom-page">
     
diff --git a/Comics.html b/Comics.html
index c731fc9..b952ac6 100644
--- a/Comics.html
+++ b/Comics.html
@@ -238,153 +238,49 @@ <h4 class="h46">Contact Us</h4>
 
     </div>
    </footer>
-   <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
-    <div class="scroll-top-icon">
-        <i class="fa-solid fa-arrow-up"></i>
+   <button id="BacktoTop">
+    <div class="circle1">
+      <svg
+        id="back-to-top"
+        xmlns="http://www.w3.org/2000/svg"
+        width="30"
+        height="30"
+        fill="currentColor"
+        class="bi bi-arrow-up-circle-fill"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+        ></path>
+      </svg>
     </div>
-    <svg class="progress-ring" width="60" height="60">
-        <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-            cy="30"></circle>
-    </svg>
-</button>
-<style>
-    .scroll-top {
-        position: fixed;
-        right: 1.6%;
-        background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
-        color: white;
-        width: 60px;
-        height: 60px;
-        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 */
+  </button>
+
+  <script>
+    /* Back to Top Button */
+    const scrollToTopBtn = document.getElementById("BacktoTop");
+    window.onscroll = function () {
+      scrollFunction();
+    };
+
+    function scrollFunction() {
+      if (
+        document.body.scrollTop > 50 ||
+        document.documentElement.scrollTop > 50
+      ) {
+        scrollToTopBtn.style.visibility = "visible";
+        scrollToTopBtn.style.opacity = "1";
+      } else {
+        scrollToTopBtn.style.visibility = "hidden";
+        scrollToTopBtn.style.opacity = "0";
+      }
     }
 
-    .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);
-        }
-    }
-
-    .scroll-top:hover {
-        animation: pulse 1.5s infinite;
-    }
-
-    .scroll-top.show {
-        animation: none;
-        /* No animation when showing the button */
-    }
-
-    .scroll-top.show:hover {
-        animation: pulse 1.5s infinite;
-        /* Pulse on hover */
-    }
-</style>
-<script>
-    // Get the button
-    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-    const progressCircle = document.querySelector(".progress-ring__circle");
-    const radius = progressCircle.r.baseVal.value;
-    const circumference = 2 * Math.PI * radius;
-
-    // Set the circle progress properties
-    progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-    progressCircle.style.strokeDashoffset = circumference;
-
-    // Function to show or hide the button based on scroll position
-    function toggleScrollButton() {
-        if (window.scrollY > 100) {
-            scrollToTopBtn.classList.add("show");
-        } else {
-            scrollToTopBtn.classList.remove("show");
-        }
-    }
-
-    // Function to set the scroll progress on the button ring
-    function setProgress(percent) {
-        const offset = circumference - (percent / 100) * circumference;
-        progressCircle.style.strokeDashoffset = offset;
-    }
-
-    // Listen for scroll events to update button visibility and progress
-    window.addEventListener("scroll", () => {
-        toggleScrollButton();
-        const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-        setProgress(scrollPercent);
+    scrollToTopBtn.addEventListener("click", function () {
+      // Smooth scroll back to top
+      window.scrollTo({ top: 0, behavior: "smooth" });
     });
-
-    // Smooth scroll to top when the button is clicked
-    scrollToTopBtn.addEventListener("click", () => {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-    });
-
-</script>
+  </script>
 <script>
     // Coordinates for the cursor
     const coords = { x: 0, y: 0 };
diff --git a/PrivacyPolicy.html b/PrivacyPolicy.html
index a679e62..6a79eed 100644
--- a/PrivacyPolicy.html
+++ b/PrivacyPolicy.html
@@ -6,10 +6,7 @@
     <title>Stark Tech Portfolio - Tony Stark Movies</title>
     <link rel="website icon" href="/assets/logo/icon.png" />
     <link rel="stylesheet" href="css/terms.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link
       rel="icon"
       href="https://images.wallpapersden.com/image/download/marvel-iron-man-art_68122_2160x3840.jpg"
@@ -218,153 +215,49 @@ <h4 class="h46">Contact Us</h4>
       </div>
      </footer>
       </div>
-      <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
-        <div class="scroll-top-icon">
-            <i class="fa-solid fa-arrow-up"></i>
+      <button id="BacktoTop">
+        <div class="circle1">
+          <svg
+            id="back-to-top"
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            fill="currentColor"
+            class="bi bi-arrow-up-circle-fill"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+            ></path>
+          </svg>
         </div>
-        <svg class="progress-ring" width="60" height="60">
-            <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-                cy="30"></circle>
-        </svg>
-    </button>
-    <style>
-        .scroll-top {
-            position: fixed;
-            right: 1.6%;
-            background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
-            color: white;
-            width: 60px;
-            height: 60px;
-            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%;
-        }
+      </button>
     
-        /* Pulse Animation */
-        @keyframes pulse {
-            0% {
-                box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-            }
+      <script>
+        /* Back to Top Button */
+        const scrollToTopBtn = document.getElementById("BacktoTop");
+        window.onscroll = function () {
+          scrollFunction();
+        };
     
-            50% {
-                box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
-            }
-    
-            100% {
-                box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-            }
-        }
-    
-        .scroll-top:hover {
-            animation: pulse 1.5s infinite;
-        }
-    
-        .scroll-top.show {
-            animation: none;
-            /* No animation when showing the button */
-        }
-    
-        .scroll-top.show:hover {
-            animation: pulse 1.5s infinite;
-            /* Pulse on hover */
-        }
-    </style>
-    <script>
-        // Get the button
-        const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-        const progressCircle = document.querySelector(".progress-ring__circle");
-        const radius = progressCircle.r.baseVal.value;
-        const circumference = 2 * Math.PI * radius;
-    
-        // Set the circle progress properties
-        progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-        progressCircle.style.strokeDashoffset = circumference;
-    
-        // Function to show or hide the button based on scroll position
-        function toggleScrollButton() {
-            if (window.scrollY > 100) {
-                scrollToTopBtn.classList.add("show");
-            } else {
-                scrollToTopBtn.classList.remove("show");
-            }
-        }
-    
-        // Function to set the scroll progress on the button ring
-        function setProgress(percent) {
-            const offset = circumference - (percent / 100) * circumference;
-            progressCircle.style.strokeDashoffset = offset;
+        function scrollFunction() {
+          if (
+            document.body.scrollTop > 50 ||
+            document.documentElement.scrollTop > 50
+          ) {
+            scrollToTopBtn.style.visibility = "visible";
+            scrollToTopBtn.style.opacity = "1";
+          } else {
+            scrollToTopBtn.style.visibility = "hidden";
+            scrollToTopBtn.style.opacity = "0";
+          }
         }
     
-        // Listen for scroll events to update button visibility and progress
-        window.addEventListener("scroll", () => {
-            toggleScrollButton();
-            const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-            setProgress(scrollPercent);
+        scrollToTopBtn.addEventListener("click", function () {
+          // Smooth scroll back to top
+          window.scrollTo({ top: 0, behavior: "smooth" });
         });
-    
-        // Smooth scroll to top when the button is clicked
-        scrollToTopBtn.addEventListener("click", () => {
-            window.scrollTo({
-                top: 0,
-                behavior: "smooth"
-            });
-        });
-    
-    </script>
+      </script>
     
     </footer>
 
diff --git a/Terms&Conditions.html b/Terms&Conditions.html
index 472c499..60fe109 100644
--- a/Terms&Conditions.html
+++ b/Terms&Conditions.html
@@ -7,7 +7,7 @@
     <title>Stark Tech Portfolio - Tony Stark Movies</title>
     <link rel="website icon" href="/assets/logo/icon.png">
     <link rel="stylesheet" href="css/terms.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="icon" href="https://images.wallpapersden.com/image/download/marvel-iron-man-art_68122_2160x3840.jpg" type="image/png">
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
     <style>
@@ -201,153 +201,49 @@ <h4 class="h46">Contact Us</h4>
 
     </div>
    </footer>
-   <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
-    <div class="scroll-top-icon">
-        <i class="fa-solid fa-arrow-up"></i>
+   <button id="BacktoTop">
+    <div class="circle1">
+      <svg
+        id="back-to-top"
+        xmlns="http://www.w3.org/2000/svg"
+        width="30"
+        height="30"
+        fill="currentColor"
+        class="bi bi-arrow-up-circle-fill"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+        ></path>
+      </svg>
     </div>
-    <svg class="progress-ring" width="60" height="60">
-        <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-            cy="30"></circle>
-    </svg>
-</button>
-<style>
-    .scroll-top {
-        position: fixed;
-        right: 1.6%;
-        background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
-        color: white;
-        width: 60px;
-        height: 60px;
-        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);
-        }
+  </button>
 
-        100% {
-            box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-        }
-    }
-
-    .scroll-top:hover {
-        animation: pulse 1.5s infinite;
-    }
-
-    .scroll-top.show {
-        animation: none;
-        /* No animation when showing the button */
-    }
-
-    .scroll-top.show:hover {
-        animation: pulse 1.5s infinite;
-        /* Pulse on hover */
-    }
-</style>
-<script>
-    // Get the button
-    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-    const progressCircle = document.querySelector(".progress-ring__circle");
-    const radius = progressCircle.r.baseVal.value;
-    const circumference = 2 * Math.PI * radius;
-
-    // Set the circle progress properties
-    progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-    progressCircle.style.strokeDashoffset = circumference;
-
-    // Function to show or hide the button based on scroll position
-    function toggleScrollButton() {
-        if (window.scrollY > 100) {
-            scrollToTopBtn.classList.add("show");
-        } else {
-            scrollToTopBtn.classList.remove("show");
-        }
-    }
+  <script>
+    /* Back to Top Button */
+    const scrollToTopBtn = document.getElementById("BacktoTop");
+    window.onscroll = function () {
+      scrollFunction();
+    };
 
-    // Function to set the scroll progress on the button ring
-    function setProgress(percent) {
-        const offset = circumference - (percent / 100) * circumference;
-        progressCircle.style.strokeDashoffset = offset;
+    function scrollFunction() {
+      if (
+        document.body.scrollTop > 50 ||
+        document.documentElement.scrollTop > 50
+      ) {
+        scrollToTopBtn.style.visibility = "visible";
+        scrollToTopBtn.style.opacity = "1";
+      } else {
+        scrollToTopBtn.style.visibility = "hidden";
+        scrollToTopBtn.style.opacity = "0";
+      }
     }
 
-    // Listen for scroll events to update button visibility and progress
-    window.addEventListener("scroll", () => {
-        toggleScrollButton();
-        const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-        setProgress(scrollPercent);
+    scrollToTopBtn.addEventListener("click", function () {
+      // Smooth scroll back to top
+      window.scrollTo({ top: 0, behavior: "smooth" });
     });
-
-    // Smooth scroll to top when the button is clicked
-    scrollToTopBtn.addEventListener("click", () => {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-    });
-
-</script>
+  </script>
 
 </footer>
 
diff --git a/blog.html b/blog.html
index 85c9728..47e02ab 100644
--- a/blog.html
+++ b/blog.html
@@ -182,7 +182,7 @@ <h2 class="movie-title">What If...? Ideas<br><span class="imdd-rating"><br>Maybe
     <footer>
         <div class="footer background">
             <div class="footer-col">
-                <img src="/assets/logo/icon.png" alt="">
+                <img src="/assets/logo/icon.png" id="ironlogo" alt="">
                 <p class="footer-p">
 
                     Iron Man is a fictional superhero in the Marvel Comics universe, created by writer Stan Lee. His
diff --git a/index.html b/index.html
index 3858e02..0927b9a 100644
--- a/index.html
+++ b/index.html
@@ -594,154 +594,49 @@ <h4 class="h46">Contact Us</h4>
 
     </div>
    </footer>
-   <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
-    <div class="scroll-top-icon">
-        <i class="fa-solid fa-arrow-up"></i>
+   <button id="BacktoTop">
+    <div class="circle1">
+      <svg
+        id="back-to-top"
+        xmlns="http://www.w3.org/2000/svg"
+        width="30"
+        height="30"
+        fill="currentColor"
+        class="bi bi-arrow-up-circle-fill"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+        ></path>
+      </svg>
     </div>
-    <svg class="progress-ring" width="60" height="60">
-        <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-            cy="30"></circle>
-    </svg>
-</button>
-<style>
-    .scroll-top {
-        position: fixed;
-        right: 1.6%;
-        background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
-        color: white;
-        width: 60px;
-        height: 60px;
-        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);
+  </button>
+
+  <script>
+    /* Back to Top Button */
+    const scrollToTopBtn = document.getElementById("BacktoTop");
+    window.onscroll = function () {
+      scrollFunction();
+    };
+
+    function scrollFunction() {
+      if (
+        document.body.scrollTop > 50 ||
+        document.documentElement.scrollTop > 50
+      ) {
+        scrollToTopBtn.style.visibility = "visible";
+        scrollToTopBtn.style.opacity = "1";
+      } else {
+        scrollToTopBtn.style.visibility = "hidden";
+        scrollToTopBtn.style.opacity = "0";
+      }
     }
 
-    /* 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);
-        }
-    }
-
-    .scroll-top:hover {
-        animation: pulse 1.5s infinite;
-    }
-
-    .scroll-top.show {
-        animation: none;
-        /* No animation when showing the button */
-    }
-
-    .scroll-top.show:hover {
-        animation: pulse 1.5s infinite;
-        /* Pulse on hover */
-    }
-</style>
-<script>
-    // Get the button
-    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-    const progressCircle = document.querySelector(".progress-ring__circle");
-    const radius = progressCircle.r.baseVal.value;
-    const circumference = 2 * Math.PI * radius;
-
-    // Set the circle progress properties
-    progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-    progressCircle.style.strokeDashoffset = circumference;
-
-    // Function to show or hide the button based on scroll position
-    function toggleScrollButton() {
-        if (window.scrollY > 100) {
-            scrollToTopBtn.classList.add("show");
-        } else {
-            scrollToTopBtn.classList.remove("show");
-        }
-    }
-
-    // Function to set the scroll progress on the button ring
-    function setProgress(percent) {
-        const offset = circumference - (percent / 100) * circumference;
-        progressCircle.style.strokeDashoffset = offset;
-    }
-
-    // Listen for scroll events to update button visibility and progress
-    window.addEventListener("scroll", () => {
-        toggleScrollButton();
-        const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-        setProgress(scrollPercent);
-    });
-
-    // Smooth scroll to top when the button is clicked
-    scrollToTopBtn.addEventListener("click", () => {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
+    scrollToTopBtn.addEventListener("click", function () {
+      // Smooth scroll back to top
+      window.scrollTo({ top: 0, behavior: "smooth" });
     });
-
-</script>
-
+  </script>
     
     <script>
             window.addEventListener('scroll', function() {
diff --git a/merchandise.html b/merchandise.html
index aa9722f..7c6b95a 100644
--- a/merchandise.html
+++ b/merchandise.html
@@ -43,7 +43,7 @@
     <ul class="nav-list visibility">
         <div class="logo" id="ironmask"><a href="/index.html"><img src="assets\logo\icon.png" alt="logo" srcset=""></a></div>
         <li> <a href="index.html">Home</a></li>
-        <li> <a href="index.html#about" onclick="scrollToSection(event, 'home')">About</a></li>
+        <li> <a href="index.html#about">About</a></li>
         <li> <a href="Appearances.html">Appearances</a></li>
         <li> <a href="Comics.html">Comics</a></li>
         <li> <a href="index.html#contact">Contact</a></li>
@@ -695,7 +695,7 @@ <h2>Shopping Cart</h2>
 <footer>
     <div class="footer background">
         <div class="footer-col">
-            <img src="assets/logo/icon.png" alt="">
+            <img src="assets/logo/icon.png" id="ironlogo" alt="">
             <p class="footer-p">
 
                 Iron Man is a fictional superhero in the Marvel Comics universe, created by writer Stan Lee. His real name is Tony Stark, a billionaire industrialist and genius inventor who builds a high-tech suit of powered armor to fight crime after a life-threatening injury.
diff --git a/movies.html b/movies.html
index bb6a639..a571d47 100644
--- a/movies.html
+++ b/movies.html
@@ -238,153 +238,49 @@ <h4 class="h46">Contact Us</h4>
     </div>
 </footer>
 </div>
-<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
-    <div class="scroll-top-icon">
-        <i class="fa-solid fa-arrow-up"></i>
+<button id="BacktoTop">
+    <div class="circle1">
+      <svg
+        id="back-to-top"
+        xmlns="http://www.w3.org/2000/svg"
+        width="30"
+        height="30"
+        fill="currentColor"
+        class="bi bi-arrow-up-circle-fill"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+        ></path>
+      </svg>
     </div>
-    <svg class="progress-ring" width="60" height="60">
-        <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-            cy="30"></circle>
-    </svg>
-</button>
-<style>
-    .scroll-top {
-        position: fixed;
-        right: 1.6%;
-        background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
-        color: white;
-        width: 60px;
-        height: 60px;
-        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 */
+  </button>
+
+  <script>
+    /* Back to Top Button */
+    const scrollToTopBtn = document.getElementById("BacktoTop");
+    window.onscroll = function () {
+      scrollFunction();
+    };
+
+    function scrollFunction() {
+      if (
+        document.body.scrollTop > 50 ||
+        document.documentElement.scrollTop > 50
+      ) {
+        scrollToTopBtn.style.visibility = "visible";
+        scrollToTopBtn.style.opacity = "1";
+      } else {
+        scrollToTopBtn.style.visibility = "hidden";
+        scrollToTopBtn.style.opacity = "0";
+      }
     }
 
-    .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);
-        }
-    }
-
-    .scroll-top:hover {
-        animation: pulse 1.5s infinite;
-    }
-
-    .scroll-top.show {
-        animation: none;
-        /* No animation when showing the button */
-    }
-
-    .scroll-top.show:hover {
-        animation: pulse 1.5s infinite;
-        /* Pulse on hover */
-    }
-</style>
-<script>
-    // Get the button
-    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-    const progressCircle = document.querySelector(".progress-ring__circle");
-    const radius = progressCircle.r.baseVal.value;
-    const circumference = 2 * Math.PI * radius;
-
-    // Set the circle progress properties
-    progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-    progressCircle.style.strokeDashoffset = circumference;
-
-    // Function to show or hide the button based on scroll position
-    function toggleScrollButton() {
-        if (window.scrollY > 100) {
-            scrollToTopBtn.classList.add("show");
-        } else {
-            scrollToTopBtn.classList.remove("show");
-        }
-    }
-
-    // Function to set the scroll progress on the button ring
-    function setProgress(percent) {
-        const offset = circumference - (percent / 100) * circumference;
-        progressCircle.style.strokeDashoffset = offset;
-    }
-
-    // Listen for scroll events to update button visibility and progress
-    window.addEventListener("scroll", () => {
-        toggleScrollButton();
-        const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-        setProgress(scrollPercent);
+    scrollToTopBtn.addEventListener("click", function () {
+      // Smooth scroll back to top
+      window.scrollTo({ top: 0, behavior: "smooth" });
     });
-
-    // Smooth scroll to top when the button is clicked
-    scrollToTopBtn.addEventListener("click", () => {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-    });
-
-</script>
+  </script>
 
 </footer>
 <script>
diff --git a/quiz.html b/quiz.html
index c91fd81..098c6a4 100644
--- a/quiz.html
+++ b/quiz.html
@@ -32,12 +32,12 @@
             <a href="/index.html"><img src="assets/logo/icon.png" alt="logo"></a>
         </div>
         <ul class="nav-list visibility">
-            <li id="nav-home"><a href="#home" class="active-header" onclick="scrollToSection(event, 'home')">Home</a>
+            <li id="nav-home"><a href="index.html" class="active-header">Home</a>
             </li>
-            <li id="nav-about"><a href="#home" onclick="scrollToSection(event, 'about')">About</a></li>
+            <li id="nav-about"><a href="index.html#about">About</a></li>
             <li id="nav-appearances"><a href="Appearances.html">Appearances</a></li>
             <li id="nav-comics"><a href="Comics.html">Comics</a></li>
-            <li id="nav-contact"><a href="#contact">Contact</a></li>
+            <li id="nav-contact"><a href="index.html#contact">Contact</a></li>
         </ul>
 
         <div class="rightNav visibility">
@@ -431,153 +431,49 @@ <h1>Iron Man Quiz</h1>
             <div id="result"></div>
         </div>
     </div>
-    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
-        <div class="scroll-top-icon">
-            <i class="fa-solid fa-arrow-up"></i>
+    <button id="BacktoTop">
+        <div class="circle1">
+          <svg
+            id="back-to-top"
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            fill="currentColor"
+            class="bi bi-arrow-up-circle-fill"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+            ></path>
+          </svg>
         </div>
-        <svg class="progress-ring" width="60" height="60">
-            <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-                cy="30"></circle>
-        </svg>
-    </button>
-    <style>
-        .scroll-top {
-            position: fixed;
-            right: 1.6%;
-            background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
-            color: white;
-            width: 60px;
-            height: 60px;
-            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);
-            }
-        }
-
-        .scroll-top:hover {
-            animation: pulse 1.5s infinite;
-        }
-
-        .scroll-top.show {
-            animation: none;
-            /* No animation when showing the button */
-        }
-
-        .scroll-top.show:hover {
-            animation: pulse 1.5s infinite;
-            /* Pulse on hover */
-        }
-    </style>
-    <script>
-        // Get the button
-        const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-        const progressCircle = document.querySelector(".progress-ring__circle");
-        const radius = progressCircle.r.baseVal.value;
-        const circumference = 2 * Math.PI * radius;
-
-        // Set the circle progress properties
-        progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-        progressCircle.style.strokeDashoffset = circumference;
-
-        // Function to show or hide the button based on scroll position
-        function toggleScrollButton() {
-            if (window.scrollY > 100) {
-                scrollToTopBtn.classList.add("show");
-            } else {
-                scrollToTopBtn.classList.remove("show");
-            }
-        }
-
-        // Function to set the scroll progress on the button ring
-        function setProgress(percent) {
-            const offset = circumference - (percent / 100) * circumference;
-            progressCircle.style.strokeDashoffset = offset;
-        }
-
-        // Listen for scroll events to update button visibility and progress
-        window.addEventListener("scroll", () => {
-            toggleScrollButton();
-            const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-            setProgress(scrollPercent);
-        });
-
-        // Smooth scroll to top when the button is clicked
-        scrollToTopBtn.addEventListener("click", () => {
-            window.scrollTo({
-                top: 0,
-                behavior: "smooth"
-            });
+      </button>
+  
+      <script>
+        /* Back to Top Button */
+        const scrollToTopBtn = document.getElementById("BacktoTop");
+        window.onscroll = function () {
+          scrollFunction();
+        };
+  
+        function scrollFunction() {
+          if (
+            document.body.scrollTop > 50 ||
+            document.documentElement.scrollTop > 50
+          ) {
+            scrollToTopBtn.style.visibility = "visible";
+            scrollToTopBtn.style.opacity = "1";
+          } else {
+            scrollToTopBtn.style.visibility = "hidden";
+            scrollToTopBtn.style.opacity = "0";
+          }
+        }
+  
+        scrollToTopBtn.addEventListener("click", function () {
+          // Smooth scroll back to top
+          window.scrollTo({ top: 0, behavior: "smooth" });
         });
-
-    </script>
+      </script>
     <footer>
         <div class="footer background" style="font-family: Arial, sans-serif;">
 
diff --git a/sticker.html b/sticker.html
index 2ba4406..9da69a2 100644
--- a/sticker.html
+++ b/sticker.html
@@ -115,7 +115,7 @@
     <ul class="nav-list visibility">
         <div class="logo" id="ironmask"><a href="/index.html"><img src="assets\logo\icon.png" alt="logo" srcset=""></a></div>
         <li> <a href="index.html">Home</a></li>
-        <li> <a href="index.html#about" onclick="scrollToSection(event, 'home')">About</a></li>
+        <li> <a href="index.html#about">About</a></li>
         <li> <a href="Appearances.html">Appearances</a></li>
         <li> <a href="Comics.html">Comics</a></li>
         <li> <a href="index.html#contact">Contact</a></li>
@@ -256,7 +256,7 @@ <h1 class="movies-heading">
     <footer>
         <div class="footer background">
             <div class="footer-col">
-                <img src="assets/logo/icon.png" alt="">
+                <img src="assets/logo/icon.png" id="ironlogo" alt="">
                 <p class="footer-p">
     
                     Iron Man is a fictional superhero in the Marvel Comics universe, created by writer Stan Lee. His real name is Tony Stark, a billionaire industrialist and genius inventor who builds a high-tech suit of powered armor to fight crime after a life-threatening injury.
@@ -300,153 +300,49 @@ <h4 class="h46">Contact Us</h4>
     
         </div>
        </footer>
-       <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
-        <div class="scroll-top-icon">
-            <i class="fa-solid fa-arrow-up"></i>
+       <button id="BacktoTop">
+        <div class="circle1">
+          <svg
+            id="back-to-top"
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            fill="currentColor"
+            class="bi bi-arrow-up-circle-fill"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+            ></path>
+          </svg>
         </div>
-        <svg class="progress-ring" width="60" height="60">
-            <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-                cy="30"></circle>
-        </svg>
-    </button>
-    <style>
-        .scroll-top {
-            position: fixed;
-            right: 1.6%;
-            background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
-            color: white;
-            width: 60px;
-            height: 60px;
-            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);
-            }
-        }
-    
-        .scroll-top:hover {
-            animation: pulse 1.5s infinite;
-        }
-    
-        .scroll-top.show {
-            animation: none;
-            /* No animation when showing the button */
+      </button>
+  
+      <script>
+        /* Back to Top Button */
+        const scrollToTopBtn = document.getElementById("BacktoTop");
+        window.onscroll = function () {
+          scrollFunction();
+        };
+  
+        function scrollFunction() {
+          if (
+            document.body.scrollTop > 50 ||
+            document.documentElement.scrollTop > 50
+          ) {
+            scrollToTopBtn.style.visibility = "visible";
+            scrollToTopBtn.style.opacity = "1";
+          } else {
+            scrollToTopBtn.style.visibility = "hidden";
+            scrollToTopBtn.style.opacity = "0";
+          }
         }
-    
-        .scroll-top.show:hover {
-            animation: pulse 1.5s infinite;
-            /* Pulse on hover */
-        }
-    </style>
-    <script>
-        // Get the button
-        const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-        const progressCircle = document.querySelector(".progress-ring__circle");
-        const radius = progressCircle.r.baseVal.value;
-        const circumference = 2 * Math.PI * radius;
-    
-        // Set the circle progress properties
-        progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-        progressCircle.style.strokeDashoffset = circumference;
-    
-        // Function to show or hide the button based on scroll position
-        function toggleScrollButton() {
-            if (window.scrollY > 100) {
-                scrollToTopBtn.classList.add("show");
-            } else {
-                scrollToTopBtn.classList.remove("show");
-            }
-        }
-    
-        // Function to set the scroll progress on the button ring
-        function setProgress(percent) {
-            const offset = circumference - (percent / 100) * circumference;
-            progressCircle.style.strokeDashoffset = offset;
-        }
-    
-        // Listen for scroll events to update button visibility and progress
-        window.addEventListener("scroll", () => {
-            toggleScrollButton();
-            const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-            setProgress(scrollPercent);
+  
+        scrollToTopBtn.addEventListener("click", function () {
+          // Smooth scroll back to top
+          window.scrollTo({ top: 0, behavior: "smooth" });
         });
-    
-        // Smooth scroll to top when the button is clicked
-        scrollToTopBtn.addEventListener("click", () => {
-            window.scrollTo({
-                top: 0,
-                behavior: "smooth"
-            });
-        });
-    
-    </script>
+      </script>
     
         <script>
                 window.addEventListener('scroll', function() {
diff --git a/style.css b/style.css
index 525541b..b4f579d 100644
--- a/style.css
+++ b/style.css
@@ -1299,7 +1299,17 @@ h2 {
 #BacktoTop:hover svg {
   fill: #ffd700;
 }
-
+#BacktoTop{
+  animation: glow 5s infinite alternate;
+}
+@keyframes glow {
+  from {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #262626, 0 0 6px 2px rgba(255, 255, 255, 0.2), 0 0 5px -8px #6a0a0a;
+  }
+  to {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #262626, 0 0 6px 2px rgba(255, 255, 255, 0.2), 0 0 10px 8px #7b0a0a;
+  }
+}
 input[type='number']::-webkit-inner-spin-button,
 input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
diff --git a/variants.css b/variants.css
index 8cf72e1..176012f 100644
--- a/variants.css
+++ b/variants.css
@@ -662,6 +662,17 @@ body {
 #BacktoTop:hover svg {
   fill: #ffd700;
 }
+#BacktoTop{
+  animation: glow 5s infinite alternate;
+}
+@keyframes glow {
+  from {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #262626, 0 0 6px 2px rgba(255, 255, 255, 0.2), 0 0 5px -8px #6a0a0a;
+  }
+  to {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #262626, 0 0 6px 2px rgba(255, 255, 255, 0.2), 0 0 10px 8px #7b0a0a;
+  }
+}
 
 .progress-bar{
   position: fixed;
diff --git a/variants.html b/variants.html
index 821d3dd..72c9262 100644
--- a/variants.html
+++ b/variants.html
@@ -117,153 +117,49 @@ <h2 id="title8">INFINTY WRAPS</h2>
             </ul>
         </div>
     </nav>
-    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
-        <div class="scroll-top-icon">
-            <i class="fa-solid fa-arrow-up"></i>
+    <button id="BacktoTop">
+        <div class="circle1">
+          <svg
+            id="back-to-top"
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            fill="currentColor"
+            class="bi bi-arrow-up-circle-fill"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+            ></path>
+          </svg>
         </div>
-        <svg class="progress-ring" width="60" height="60">
-            <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-                cy="30"></circle>
-        </svg>
-    </button>
-    <style>
-        .scroll-top {
-            position: fixed;
-            right: 1.6%;
-            background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
-            color: white;
-            width: 60px;
-            height: 60px;
-            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);
-            }
-        }
-    
-        .scroll-top:hover {
-            animation: pulse 1.5s infinite;
-        }
-    
-        .scroll-top.show {
-            animation: none;
-            /* No animation when showing the button */
-        }
-    
-        .scroll-top.show:hover {
-            animation: pulse 1.5s infinite;
-            /* Pulse on hover */
-        }
-    </style>
-    <script>
-        // Get the button
-        const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-        const progressCircle = document.querySelector(".progress-ring__circle");
-        const radius = progressCircle.r.baseVal.value;
-        const circumference = 2 * Math.PI * radius;
-    
-        // Set the circle progress properties
-        progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-        progressCircle.style.strokeDashoffset = circumference;
-    
-        // Function to show or hide the button based on scroll position
-        function toggleScrollButton() {
-            if (window.scrollY > 100) {
-                scrollToTopBtn.classList.add("show");
-            } else {
-                scrollToTopBtn.classList.remove("show");
-            }
-        }
-    
-        // Function to set the scroll progress on the button ring
-        function setProgress(percent) {
-            const offset = circumference - (percent / 100) * circumference;
-            progressCircle.style.strokeDashoffset = offset;
+      </button>
+  
+      <script>
+        /* Back to Top Button */
+        const scrollToTopBtn = document.getElementById("BacktoTop");
+        window.onscroll = function () {
+          scrollFunction();
+        };
+  
+        function scrollFunction() {
+          if (
+            document.body.scrollTop > 50 ||
+            document.documentElement.scrollTop > 50
+          ) {
+            scrollToTopBtn.style.visibility = "visible";
+            scrollToTopBtn.style.opacity = "1";
+          } else {
+            scrollToTopBtn.style.visibility = "hidden";
+            scrollToTopBtn.style.opacity = "0";
+          }
         }
-    
-        // Listen for scroll events to update button visibility and progress
-        window.addEventListener("scroll", () => {
-            toggleScrollButton();
-            const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-            setProgress(scrollPercent);
-        });
-    
-        // Smooth scroll to top when the button is clicked
-        scrollToTopBtn.addEventListener("click", () => {
-            window.scrollTo({
-                top: 0,
-                behavior: "smooth"
-            });
+  
+        scrollToTopBtn.addEventListener("click", function () {
+          // Smooth scroll back to top
+          window.scrollTo({ top: 0, behavior: "smooth" });
         });
-    
-    </script>
+      </script>
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 
     <script>
diff --git a/videos.html b/videos.html
index 454c4e6..fe5d877 100644
--- a/videos.html
+++ b/videos.html
@@ -7,7 +7,6 @@
     <title>Stark Tech Portfolio</title>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="website icon" href="/assets/logo/icon.png">
     <link rel="icon" href="https://images.wallpapersden.com/image/download/marvel-iron-man-art_68122_2160x3840.jpg" type="image/png">
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
@@ -211,153 +210,49 @@ <h4 class="h46">Contact Us</h4>
 
     </div>
    </footer>
-   <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
-    <div class="scroll-top-icon">
-        <i class="fa-solid fa-arrow-up"></i>
+   <button id="BacktoTop">
+    <div class="circle1">
+      <svg
+        id="back-to-top"
+        xmlns="http://www.w3.org/2000/svg"
+        width="30"
+        height="30"
+        fill="currentColor"
+        class="bi bi-arrow-up-circle-fill"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+        ></path>
+      </svg>
     </div>
-    <svg class="progress-ring" width="60" height="60">
-        <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-            cy="30"></circle>
-    </svg>
-</button>
-<style>
-    .scroll-top {
-        position: fixed;
-        right: 1.6%;
-        background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
-        color: white;
-        width: 60px;
-        height: 60px;
-        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);
-        }
-    }
-
-    .scroll-top:hover {
-        animation: pulse 1.5s infinite;
+  </button>
+
+  <script>
+    /* Back to Top Button */
+    const scrollToTopBtn = document.getElementById("BacktoTop");
+    window.onscroll = function () {
+      scrollFunction();
+    };
+
+    function scrollFunction() {
+      if (
+        document.body.scrollTop > 50 ||
+        document.documentElement.scrollTop > 50
+      ) {
+        scrollToTopBtn.style.visibility = "visible";
+        scrollToTopBtn.style.opacity = "1";
+      } else {
+        scrollToTopBtn.style.visibility = "hidden";
+        scrollToTopBtn.style.opacity = "0";
+      }
     }
 
-    .scroll-top.show {
-        animation: none;
-        /* No animation when showing the button */
-    }
-
-    .scroll-top.show:hover {
-        animation: pulse 1.5s infinite;
-        /* Pulse on hover */
-    }
-</style>
-<script>
-    // Get the button
-    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-    const progressCircle = document.querySelector(".progress-ring__circle");
-    const radius = progressCircle.r.baseVal.value;
-    const circumference = 2 * Math.PI * radius;
-
-    // Set the circle progress properties
-    progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-    progressCircle.style.strokeDashoffset = circumference;
-
-    // Function to show or hide the button based on scroll position
-    function toggleScrollButton() {
-        if (window.scrollY > 100) {
-            scrollToTopBtn.classList.add("show");
-        } else {
-            scrollToTopBtn.classList.remove("show");
-        }
-    }
-
-    // Function to set the scroll progress on the button ring
-    function setProgress(percent) {
-        const offset = circumference - (percent / 100) * circumference;
-        progressCircle.style.strokeDashoffset = offset;
-    }
-
-    // Listen for scroll events to update button visibility and progress
-    window.addEventListener("scroll", () => {
-        toggleScrollButton();
-        const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-        setProgress(scrollPercent);
+    scrollToTopBtn.addEventListener("click", function () {
+      // Smooth scroll back to top
+      window.scrollTo({ top: 0, behavior: "smooth" });
     });
-
-    // Smooth scroll to top when the button is clicked
-    scrollToTopBtn.addEventListener("click", () => {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-    });
-
-</script>
+  </script>
 
     
 </footer>
diff --git a/villain.html b/villain.html
index 86908ab..14a444a 100644
--- a/villain.html
+++ b/villain.html
@@ -31,35 +31,9 @@
             z-index: 99999999;
             /* Stays on top of all elements */
         }
-
-        .go-top-btn {
-            position: fixed;
-            bottom: 35px;
-            right: 35px;
-            cursor: pointer;
-            border-radius: 50%;
-            height: 60px;
-            width: 60px;
-            background: #ff0015;
-            border: none;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 1000;
-            transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
-        }
-
-        .go-top-btn:hover {
-            background-color: #ac0000;
-            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
-            transform: translateY(-2px);
-        }
     </style>
 </head>
 
-<button class="go-top-btn">
-    <img width="35px" src="cropped_image.png" alt="go top">
-</button>
 
 <body class="custom-page">
     <!-- Circles -->
@@ -96,7 +70,7 @@
                 </div>
                 <li><a href="index.html#home" class="active">Home</a></li>
                 <li><a href="index.html#about">About</a></li>
-                <li><a href="#" id="appearance_active">Appearances</a></li>
+                <li><a href="Appearances.html" id="appearance_active">Appearances</a></li>
                 <li><a href="Comics.html">Comics</a></li>
                 <li><a href="index.html#contact">Contact</a></li>
                 <!-- Added Blog page in navbar -->
@@ -500,7 +474,23 @@ <h4 class="h46">Contact Us</h4>
             </p>
         </div>
     </footer>
-
+    <button id="BacktoTop">
+        <div class="circle1">
+          <svg
+            id="back-to-top"
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            fill="currentColor"
+            class="bi bi-arrow-up-circle-fill"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
+            ></path>
+          </svg>
+        </div>
+      </button>
 
     <script>
         /* Back to Top Button */
@@ -622,24 +612,6 @@ <h4 class="h46">Contact Us</h4>
 
         // Start the animation
         animateCircles();
-
-
-        //js for go top button
-        const goTopBtn = document.querySelector('.go-top-btn');
-        window.addEventListener('scroll', checkHeight)
-        function checkHeight() {
-            if (window.scrollY > 200) {
-                goTopBtn.style.display = "flex"
-            } else {
-                goTopBtn.style.display = "none"
-            }
-        }
-        goTopBtn.addEventListener('click', () => {
-            window.scrollTo({
-                top: 0,
-                behavior: "smooth"
-            })
-        })
     </script>
 </body>
 
