diff --git a/variants.css b/variants.css
index 176012f..1e65bbb 100644
--- a/variants.css
+++ b/variants.css
@@ -251,14 +251,14 @@ body {
   box-shadow: 0px 8 px;
 }
 .variantsmem {
-  #mem1 {
+  #mem {
     margin-top: 20px;
     display: flex;
     justify-content: center;
     flex-direction: row;
     flex-wrap: wrap;
   }
-  .vitems1 {
+  .vitems {
     position: relative;
     background-color: black;
     border: 0px 0px 8px rgb(0, 0, 0);
@@ -270,352 +270,31 @@ body {
     border: 13px solid black;
     transition: 0.5s;
   }
-  .vitems1:hover {
+  .vitems:hover {
     transform: scale(1.15);
   }
-  .vitems1 img {
+  .vitems img {
     width: 100%;
     height: 75%;
     object-fit: cover;
     transition: 0.5s ease;
     border-radius: 12px 12px;
   }
-  #title1 {
+  #title {
     color: rgb(252, 252, 252);
     text-align: center;
     font-family: "Alkatra", cursive;
   }
 }
-.vitems1 button {
+.vitems button {
   color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
   border-radius: 5px 5px;
   cursor: pointer;
 }
-.vitems1 p {
+.vitems p {
   color: white;
 }
 
-#mem2 {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.vitems2 {
-  position: relative;
-  background-color: black;
-  border: 0px 0px 8px rgb(0, 0, 0);
-  border-radius: 12px 12px;
-  width: 600px;
-  box-shadow: 2px;
-  height: 350px;
-  margin: 10px;
-  border: 13px solid black;
-  transition: 0.5s;
-}
-.vitems2:hover {
-  transform: scale(1.15);
-}
-.vitems2 img {
-  width: 100%;
-  height: 75%;
-  object-fit: cover;
-  transition: 0.5s ease;
-  border-radius: 12px 12px;
-}
-#title2 {
-  color: rgb(252, 252, 252);
-  text-align: center;
-  font-family: "Alkatra", cursive;
-}
-.vitems2 button {
-  color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
-  border-radius: 5px 5px;
-  cursor: pointer;
-}
-
-#mem3 {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.vitems3 {
-  position: relative;
-  background-color: black;
-  border: 0px 0px 8px rgb(0, 0, 0);
-  border-radius: 12px 12px;
-  width: 600px;
-  box-shadow: 2px;
-  height: 350px;
-  margin: 10px;
-  border: 13px solid black;
-  transition: 0.5s;
-}
-.vitems3:hover {
-  transform: scale(1.15);
-}
-.vitems3 img {
-  width: 100%;
-  height: 75%;
-  object-fit: cover;
-  transition: 0.5s ease;
-  border-radius: 12px 12px;
-}
-#title3 {
-  color: rgb(252, 252, 252);
-  text-align: center;
-  font-family: "Alkatra", cursive;
-}
-.vitems3 button {
-  color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
-  border-radius: 5px 5px;
-  cursor: pointer;
-}
-
-#mem4 {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.vitems4 {
-  position: relative;
-  background-color: black;
-  border: 0px 0px 8px rgb(0, 0, 0);
-  border-radius: 12px 12px;
-  width: 600px;
-  box-shadow: 2px;
-  height: 350px;
-  margin: 10px;
-  border: 13px solid black;
-  transition: 0.5s;
-}
-.vitems4:hover {
-  transform: scale(1.15);
-}
-.vitems4 img {
-  width: 100%;
-  height: 75%;
-  object-fit: cover;
-  transition: 0.5s ease;
-  border-radius: 12px 12px;
-}
-#title4 {
-  color: rgb(252, 252, 252);
-  text-align: center;
-  font-family: "Alkatra", cursive;
-}
-.vitems4 button {
-  color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
-  border-radius: 5px 5px;
-  cursor: pointer;
-}
-
-#mem5 {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.vitems5 {
-  position: relative;
-  background-color: black;
-  border: 0px 0px 8px rgb(0, 0, 0);
-  border-radius: 12px 12px;
-  width: 600px;
-  box-shadow: 2px;
-  height: 350px;
-  margin: 10px;
-  border: 13px solid black;
-  transition: 0.5s;
-}
-.vitems5:hover {
-  transform: scale(1.15);
-}
-.vitems5 img {
-  width: 100%;
-  height: 75%;
-  object-fit: cover;
-  transition: 0.5s ease;
-  border-radius: 12px 12px;
-}
-#title5 {
-  color: rgb(252, 252, 252);
-  text-align: center;
-  font-family: "Alkatra", cursive;
-}
-.vitems5 button {
-  color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
-  border-radius: 5px 5px;
-  cursor: pointer;
-}
-
-#mem6 {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.vitems6 {
-  position: relative;
-  background-color: black;
-  border: 0px 0px 8px rgb(0, 0, 0);
-  border-radius: 12px 12px;
-  width: 600px;
-  box-shadow: 2px;
-  height: 350px;
-  margin: 10px;
-  border: 13px solid black;
-  transition: 0.5s;
-}
-.vitems6:hover {
-  transform: scale(1.15);
-}
-.vitems6 img {
-  width: 100%;
-  height: 75%;
-  object-fit: cover;
-  transition: 0.5s ease;
-  border-radius: 12px 12px;
-}
-#title6 {
-  color: rgb(252, 252, 252);
-  text-align: center;
-  font-family: "Alkatra", cursive;
-}
-
-.vitems6 button {
-  color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
-  border-radius: 5px 5px;
-  cursor: pointer;
-}
-
-#mem7 {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.vitems7 {
-  position: relative;
-  background-color: black;
-  border: 0px 0px 8px rgb(0, 0, 0);
-  border-radius: 12px 12px;
-  width: 600px;
-  box-shadow: 2px;
-  height: 350px;
-  margin: 10px;
-  border: 13px solid black;
-  transition: 0.5s;
-}
-.vitems7:hover {
-  transform: scale(1.15);
-}
-.vitems7 img {
-  width: 100%;
-  height: 75%;
-  object-fit: cover;
-  transition: 0.5s ease;
-  border-radius: 12px 12px;
-}
-#title7 {
-  color: rgb(252, 252, 252);
-  text-align: center;
-  font-family: "Alkatra", cursive;
-}
-.vitems7 button {
-  color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
-  border-radius: 5px 5px;
-  cursor: pointer;
-}
-
-#mem8 {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.vitems8 {
-  position: relative;
-  background-color: black;
-  border: 0px 0px 8px rgb(0, 0, 0);
-  border-radius: 12px 12px;
-  width: 600px;
-  box-shadow: 2px;
-  height: 350px;
-  margin: 10px;
-  border: 13px solid black;
-  transition: 0.5s;
-}
-.vitems8:hover {
-  transform: scale(1.15);
-}
-.vitems8 img {
-  width: 100%;
-  height: 75%;
-  object-fit: cover;
-  transition: 0.5s ease;
-  border-radius: 12px 12px;
-}
-#title8 {
-  color: rgb(252, 252, 252);
-  text-align: center;
-  font-family: "Alkatra", cursive;
-}
-.vitems8 button {
-  color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
-  border-radius: 5px 5px;
-  cursor: pointer;
-}
-
-#mem9 {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.vitems9 {
-  position: relative;
-  background-color: black;
-  border: 0px 0px 8px rgb(0, 0, 0);
-  border-radius: 12px 12px;
-  width: 600px;
-  box-shadow: 2px;
-  height: 350px;
-  margin: 10px;
-  border: 13px solid black;
-  transition: 0.5s;
-}
-.vitems9:hover {
-  transform: scale(1.15);
-}
-.vitems9 img {
-  width: 100%;
-  height: 75%;
-  object-fit: cover;
-  transition: 0.5s ease;
-  border-radius: 12px 12px;
-}
-#title9 {
-  color: rgb(252, 252, 252);
-  text-align: center;
-  font-family: "Alkatra", cursive;
-}
-
-.vitems9 button {
-  color: rgb(255, 252, 252) rgb(255, 255, 255) rgb(250, 250, 250);
-  border-radius: 5px 5px;
-  cursor: pointer;
-}
 #BacktoTop {
   display: block;
   /* Ensure the button is part of the layout */
@@ -686,3 +365,18 @@ height: 100%;
 background-image: linear-gradient(to right,red,orange);
 z-index: 100;
 }
+@media(max-width:480px)
+{  
+   
+  
+#heading {
+  font-size: 50px;
+}
+  .variantsmem {
+    .vitems {
+      width: 350px;
+      height: 300px;
+    }
+  }
+  
+}
\ No newline at end of file
diff --git a/variants.html b/variants.html
index 72c9262..15e930a 100644
--- a/variants.html
+++ b/variants.html
@@ -5,110 +5,137 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Stark Tech Portfolio</title>
-  
+    <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="variants.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">
-    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
-
-    
-    
+    <style>
+        /* Circle styles */
+        .circle {
+            height: 24px;
+            width: 24px;
+            border-radius: 24px;
+            background-color: black;
+            position: fixed;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            z-index: 99999999;
+            /* Stays on top of all elements */
+        }
+    </style>
 </head>
-<body>
-
-    <div class="progress-bar">
-        <div class="filled"></div>
-     </div>
-    <div id="progress-container">
-        <div id="progress-bar"></div>
-  </div>
-
-    <nav class="navbar h-nav background">
-        <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">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>
+<!-- Circles -->
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<div class="circle"></div>
+<nav class="navbar h-nav background">
+    <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">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>
          <!-- <li> <a href="#subscribe">Newsletter</a></li> -->
-            <li> <a href="/blog.html">Blogs</a></li>
-        </ul>
-
-        <div class="rightNav visibility">
-            <form class="search-bar">
-            <input type="text" name="search"  placeholder="Search the website">
-            <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
-            </form>
-        </div>
-        <div class="burger">
-            <div class="line"></div>
-            <div class="line"></div>
-            <div class="line"></div>
-        </div>
-    </nav>
+        <li> <a href="/blog.html">Blogs</a></li>
+        
+    </ul>
+
+    <div class="rightNav visibility">
+        <form class="search-bar">
+        <input type="text" name="search"  placeholder="Search the website">
+        <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
+        </form>
+    </div>
+    <div class="burger">
+        <div class="line"></div>
+        <div class="line"></div>
+        <div class="line"></div>
+    </div>
+</nav>
+
+
     <nav class="container">
         <div>
             <h1 id="heading">VARIANTS</h1>
             <ul class="variantsmem" >
-                <li id="mem1" class="vitems1" data-aos="zoom-in-right">
-                    <h2 id="title1">EXILES</h2>
+                <li id="mem" class="vitems" data-aos="zoom-in-right">
+                    <h2 id="title">EXILES</h2>
                     <img src="assets\variants\ironmaninexiles.jpg" alt="ironmaninexiles " srcset="" >
                     
                 </li>
-                <li id="mem2" class="vitems2" data-aos="zoom-in-left">
-                    <h2 id="title2">INFAMOUS IRONMAN</h2>
+                <li id="mem" class="vitems" data-aos="zoom-in-left">
+                    <h2 id="title">INFAMOUS IRONMAN</h2>
                       <img src="assets\variants\doctordoomironman.jpg" alt="infamous ironman" srcset="">
                       
                     
                 </li>
             </li>
-            <li id="mem3" class="vitems3" data-aos="zoom-in-right" >
-                <h2 id="title3">IRON MANAIC</h2>
+            <li id="mem" class="vitems" data-aos="zoom-in-right" >
+                <h2 id="title">IRON MANAIC</h2>
                   <img src="assets\variants\ironmanaic.jpg" alt="ironmanaic" srcset="">
                   
             </li>
 
         </li>
-        <li id="mem4" class="vitems4" data-aos="zoom-in-left">
-            <h2 id="title4">ULTIMATE IRONMAN</h2>
+        <li id="mem" class="vitems" data-aos="zoom-in-left">
+            <h2 id="title">ULTIMATE IRONMAN</h2>
               <img src="assets\variants\ultimateironman.jpg" alt="Ultimate ironman" srcset="">
               
                 
         </li>
 
     </li>
-    <li id="mem5" class="vitems5" data-aos="zoom-in-right">
-        <h2 id="title5">SORCEROR SUPREME</h2>
+    <li id="mem" class="vitems" data-aos="zoom-in-right">
+        <h2 id="title">SORCEROR SUPREME</h2>
           <img src="assets\variants\sorcerorsupreme.jpg" alt=" sorceror supreme " srcset="">
           
     </li>
 
 </li>
-<li id="mem6" class="vitems6" data-aos="zoom-in-left">
-    <h2 id="title6">THE CROSSING</h2>
+<li id="mem" class="vitems" data-aos="zoom-in-left">
+    <h2 id="title">THE CROSSING</h2>
       <img src="assets\variants\Thecrossing.jpg" alt=" the crossing " srcset="">
       
 </li>
 
-<li id="mem7" class="vitems7" data-aos="zoom-in-right">
-    <h2 id="title7">IRONMAN 2099</h2>
+<li id="mem" class="vitems" data-aos="zoom-in-right">
+    <h2 id="title">IRONMAN 2099</h2>
       <img src="assets\variants\ironman2099.jpg" alt=" Ironman 2099" srcset="">
 
 </li>
 
-<li id="mem8" class="vitems8" data-aos="zoom-in-left">
-    <h2 id="title8">IRONKNIGHT</h2>
+<li id="mem" class="vitems" data-aos="zoom-in-left">
+    <h2 id="title">IRONKNIGHT</h2>
       <img src="assets\variants\IronKnight.jpg" alt=" IronKnight" srcset="">
 
         
 </li>
 
 
-<li id="mem9" class="vitems9" data-aos="zoom-in-right">
-    <h2 id="title8">INFINTY WRAPS</h2>
+<li id="mem" class="vitems" data-aos="zoom-in-right">
+    <h2 id="title">INFINTY WRAPS</h2>
       <img src="assets\variants\infintywraps.jpg" alt=" Infinty wraps" srcset="">
 
         
@@ -133,26 +160,133 @@ <h2 id="title8">INFINTY WRAPS</h2>
             ></path>
           </svg>
         </div>
-      </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";
-          }
+        <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;
         }
   
         scrollToTopBtn.addEventListener("click", function () {