diff --git a/Html-files/Licensing.html b/Html-files/Licensing.html
index 97ada69a..4490c67f 100644
--- a/Html-files/Licensing.html
+++ b/Html-files/Licensing.html
@@ -112,6 +112,49 @@
           background-color: #b80d0d;
           z-index: 9999;
       }
+      
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
   </style>
 </head>
 <body>
@@ -544,5 +587,27 @@ <h4>Follow Us</h4>
             "allowedOrigins": []
         });
     </script>
+
+<div id="preloader">
+  <video autoplay muted loop id="preloader-video">
+      <source src="/preloader.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+  </video>
+</div>
+<script>
+ window.addEventListener('load', function() {
+const video = document.getElementById('preloader-video');
+video.playbackRate = 1; 
+
+setTimeout(function() {
+  const preloader = document.getElementById('preloader');
+  preloader.style.opacity = '0'; 
+  setTimeout(function() {
+      preloader.style.display = 'none'; 
+  }, 500); 
+}, 3000); 
+});
+
+</script>
 </body>
 </html>
diff --git a/Html-files/cart.html b/Html-files/cart.html
index 1f08dbd1..ce245980 100644
--- a/Html-files/cart.html
+++ b/Html-files/cart.html
@@ -167,6 +167,48 @@
     color: rgb(0, 0, 0);
 }
 
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
 .circle {
       position: absolute;
       width: 20px;
@@ -699,6 +741,29 @@ <h4>Follow Us</h4>
         <script src="../carts.js"></script>
         <script src="cart.js"></script>
         <script src="top.js"></script>
+
+
+        <div id="preloader">
+            <video autoplay muted loop id="preloader-video">
+                <source src="/preloader.mp4" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+        <script>
+           window.addEventListener('load', function() {
+        const video = document.getElementById('preloader-video');
+        video.playbackRate = 1; 
+    
+        setTimeout(function() {
+            const preloader = document.getElementById('preloader');
+            preloader.style.opacity = '0'; 
+            setTimeout(function() {
+                preloader.style.display = 'none'; 
+            }, 500); 
+        }, 3000); 
+    });
+    
+        </script>
 </body>
 
 </html>
diff --git a/Html-files/contact.html b/Html-files/contact.html
index f46244d6..0bdeb40b 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -130,6 +130,50 @@
     transform: translateY(0px);
   }
 }
+
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
     </style>
   </head>
 
@@ -566,5 +610,28 @@ <h4>Follow Us</h4>
     <script src="../contact-form.js"></script>
     <script src="top.js"></script>
     <script src="navbar.js"></script>
+
+    <div id="preloader">
+      <video autoplay muted loop id="preloader-video">
+          <source src="/preloader.mp4" type="video/mp4">
+          Your browser does not support the video tag.
+      </video>
+  </div>
+  <script>
+     window.addEventListener('load', function() {
+  const video = document.getElementById('preloader-video');
+  video.playbackRate = 1; 
+
+  setTimeout(function() {
+      const preloader = document.getElementById('preloader');
+      preloader.style.opacity = '0'; 
+      setTimeout(function() {
+          preloader.style.display = 'none'; 
+      }, 500); 
+  }, 3000); 
+});
+
+  </script>
+
   </body>
 </html>
diff --git a/Html-files/contributor.html b/Html-files/contributor.html
index d124e676..2e4ffb50 100644
--- a/Html-files/contributor.html
+++ b/Html-files/contributor.html
@@ -8,6 +8,50 @@
   <link rel="stylesheet" href="../Css-files/contributor.css">
   <link rel="shortcut icon" href="../Images/favicon/Foodie_Favicon.png" type="image/x-icon">
   <style>
+    
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
+
      .circle {
       position: absolute;
       width: 20px;
@@ -75,6 +119,36 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">${contribu
             console.error("Error fetching contributors:", error);
           }
         }
+      }
+    
+      fetchContributors();
+    });
+  </script>
+
+<div id="preloader">
+  <video autoplay muted loop id="preloader-video">
+      <source src="/preloader.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+  </video>
+</div>
+<script>
+ window.addEventListener('load', function() {
+const video = document.getElementById('preloader-video');
+video.playbackRate = 1; 
+
+setTimeout(function() {
+  const preloader = document.getElementById('preloader');
+  preloader.style.opacity = '0'; 
+  setTimeout(function() {
+      preloader.style.display = 'none'; 
+  }, 500); 
+}, 3000); 
+});
+
+</script>  
+
+</body>
+
 
       }
     
diff --git a/Html-files/feedback.html b/Html-files/feedback.html
index f3d69aca..58627195 100644
--- a/Html-files/feedback.html
+++ b/Html-files/feedback.html
@@ -36,6 +36,10 @@
         background-color: #b80d0d;
         z-index: 9999;
 
+      }
+      /* Modal styles */
+      .modal {
+
     }
 
     .circle {
@@ -154,6 +158,98 @@
        };
    </script>
 
+      #backToHomeButton svg {
+        width: 29px;
+        height: 29px;
+      }
+      
+      #preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
+</style>
+  </head>
+  <body>
+    <!-- Back to Home Button -->
+    <a href="/index.html" id="backToHomeButton" title="Back to Home">
+      <svg
+        fill="red"
+        version="1.1"
+        id="Capa_1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 547.596 547.596"
+        xml:space="preserve"
+        stroke="red"
+      >
+        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+        <g
+          id="SVGRepo_tracerCarrier"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></g>
+        <g id="SVGRepo_iconCarrier">
+          <g>
+            <path
+              d="M540.76,254.788L294.506,38.216c-11.475-10.098-30.064-10.098-41.386,0L6.943,254.788 c-11.475,10.098-8.415,18.284,6.885,18.284h75.964v221.773c0,12.087,9.945,22.108,22.108,22.108h92.947V371.067 c0-12.087,9.945-22.108,22.109-22.108h93.865c12.239,0,22.108,9.792,22.108,22.108v145.886h92.947 c12.24,0,22.108-9.945,22.108-22.108v-221.85h75.965C549.021,272.995,552.081,264.886,540.76,254.788z"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </a>
+
+    <!-- Progress bar -->
+    <div id="progressBar"></div>
+    <script>
+      window.onscroll = function () {
+        var winScroll =
+          document.body.scrollTop || document.documentElement.scrollTop;
+        var height =
+          document.documentElement.scrollHeight -
+          document.documentElement.clientHeight;
+        var scrolled = (winScroll / height) * 100;
+        document.getElementById("progressBar").style.width = scrolled + "%";
+      };
+    </script>
+
 
     <div class="main-outer">
       <header>
@@ -360,6 +456,27 @@ <h1 id="title" class="text-center">
         <button onclick="closeModal()">Close</button>
       </div>
     </div>
+    <div id="preloader">
+        <video autoplay muted loop id="preloader-video">
+            <source src="/preloader.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
+    <script>
+       window.addEventListener('load', function() {
+    const video = document.getElementById('preloader-video');
+    video.playbackRate = 1; 
+
+    setTimeout(function() {
+        const preloader = document.getElementById('preloader');
+        preloader.style.opacity = '0'; 
+        setTimeout(function() {
+            preloader.style.display = 'none'; 
+        }, 500); 
+    }, 3000); 
+});
+
+
 
     <script>
       function handleSubmit(event) {
diff --git a/Html-files/menu.html b/Html-files/menu.html
index bde5c42a..cb1205b8 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -97,6 +97,46 @@
 
 }
 
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
 .circle {
       position: absolute;
       width: 20px;
@@ -559,5 +599,27 @@ <h4>Follow Us</h4>
         });
     </script>
 
+<div id="preloader">
+    <video autoplay muted loop id="preloader-video">
+        <source src="../preloader.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+</div>
+<script>
+   window.addEventListener('load', function() {
+const video = document.getElementById('preloader-video');
+video.playbackRate = 1; 
+
+setTimeout(function() {
+    const preloader = document.getElementById('preloader');
+    preloader.style.opacity = '0'; 
+    setTimeout(function() {
+        preloader.style.display = 'none'; 
+    }, 500); 
+}, 3000); 
+});
+
+</script>
+
   </body>
 </html>
diff --git a/Html-files/offers.html b/Html-files/offers.html
index 39fac315..911bf152 100644
--- a/Html-files/offers.html
+++ b/Html-files/offers.html
@@ -184,7 +184,74 @@
 
 
 
+
+}
+
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
 }
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
+    </style>
+    
+  </head>
+
+  <body
+    data-bs-spy="scroll"
+    data-bs-target=".navbar"
+    data-bs-offset="100"
+    onload="blinker();"
+  >
+
+      <!-- Progress bar -->
+      <div id="progressBar"></div>
+      <script>
+          window.onscroll = function () {
+              var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+              var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+              var scrolled = (winScroll / height) * 100;
+              document.getElementById("progressBar").style.width = scrolled + "%";
+          };
+      </script>
+      <!-- end -->
 
 .circle {
       position: absolute;
@@ -694,6 +761,28 @@ <h4>Follow Us</h4>
     <script src="top.js"></script>
     <script src="navbar.js"></script>
 
+    <div id="preloader">
+      <video autoplay muted loop id="preloader-video">
+          <source src="/preloader.mp4" type="video/mp4">
+          Your browser does not support the video tag.
+      </video>
+  </div>
+  <script>
+     window.addEventListener('load', function() {
+  const video = document.getElementById('preloader-video');
+  video.playbackRate = 1; 
+
+  setTimeout(function() {
+      const preloader = document.getElementById('preloader');
+      preloader.style.opacity = '0'; 
+      setTimeout(function() {
+          preloader.style.display = 'none'; 
+      }, 500); 
+  }, 3000); 
+});
+
+  </script>
+
     <div class="circle-container">
       <div class="circle"></div>
       <div class="circle"></div>
diff --git a/Html-files/privacy.html b/Html-files/privacy.html
index 190a3479..0397c646 100644
--- a/Html-files/privacy.html
+++ b/Html-files/privacy.html
@@ -79,6 +79,49 @@
       background-color: #b80d0d;
       z-index: 9999;
   }
+  
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
 
   .circle {
       position: absolute;
@@ -476,6 +519,27 @@ <h4>Follow Us</h4>
         });
     </script>
 
+<div id="preloader">
+  <video autoplay muted loop id="preloader-video">
+      <source src="/preloader.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+  </video>
+</div>
+<script>
+ window.addEventListener('load', function() {
+const video = document.getElementById('preloader-video');
+video.playbackRate = 1; 
+
+setTimeout(function() {
+  const preloader = document.getElementById('preloader');
+  preloader.style.opacity = '0'; 
+  setTimeout(function() {
+      preloader.style.display = 'none'; 
+  }, 500); 
+}, 3000); 
+});
+
+</script>   
 <div class="circle-container">
   <div class="circle"></div>
   <div class="circle"></div>
diff --git a/Html-files/services.html b/Html-files/services.html
index 9f5ebd40..b329f3b8 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -64,6 +64,51 @@
 
 }
 
+
+
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
 .circle {
       position: absolute;
       width: 20px;
@@ -94,6 +139,7 @@
         display: none;
       }
     }
+
     </style>
 </head>
 
@@ -548,6 +594,29 @@ <h4>Follow Us</h4>
     });
 </script>
 
+
+<div id="preloader">
+    <video autoplay muted loop id="preloader-video">
+        <source src="../preloader.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+</div>
+<script>
+   window.addEventListener('load', function() {
+const video = document.getElementById('preloader-video');
+video.playbackRate = 1; 
+
+setTimeout(function() {
+    const preloader = document.getElementById('preloader');
+    preloader.style.opacity = '0'; 
+    setTimeout(function() {
+        preloader.style.display = 'none'; 
+    }, 500); 
+}, 3000); 
+});
+
+</script>
+
 <div class="circle-container">
     <div class="circle"></div>
     <div class="circle"></div>
@@ -620,6 +689,7 @@ <h4>Follow Us</h4>
   </script>
 
 
+
   </body>
 </html>
 
diff --git a/Html-files/subscription.html b/Html-files/subscription.html
index 979f4f2c..3a8a6d5b 100644
--- a/Html-files/subscription.html
+++ b/Html-files/subscription.html
@@ -17,6 +17,49 @@
             background-color: #e21f1f;
             z-index: 9999;
         }
+        
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
 
         .circle {
       position: absolute;
@@ -195,6 +238,31 @@ <h3>Essential Features</h3>
             </div>
         </div>
     </div>
+
+
+    <div id="preloader">
+        <video autoplay muted loop id="preloader-video">
+            <source src="../preloader.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
+    <script>
+       window.addEventListener('load', function() {
+    const video = document.getElementById('preloader-video');
+    video.playbackRate = 1; 
+    
+    setTimeout(function() {
+        const preloader = document.getElementById('preloader');
+        preloader.style.opacity = '0'; 
+        setTimeout(function() {
+            preloader.style.display = 'none'; 
+        }, 500); 
+    }, 3000); 
+    });
+    
+    </script>
+    
+    
 </body>
 
 </html>
\ No newline at end of file
diff --git a/Html-files/terms.html b/Html-files/terms.html
index 46159a54..1a205d8f 100644
--- a/Html-files/terms.html
+++ b/Html-files/terms.html
@@ -81,6 +81,49 @@
     z-index: 9999;
 }
 
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
 .circle {
       position: absolute;
       width: 20px;
@@ -126,11 +169,6 @@
          };
      </script>
     <div class="head_container">
-        <div id="loader-wrapper">
-          <div id="loader"></div>
-          <div class="loader-section section-left" ></div>
-          <div class="loader-section section-right"></div>
-        </div>
         <nav class="navbar navbar-expand-lg fixed-top">
           <div class="container-fluid">
             <a href="../index.html" class="navbar-brand opacity-75 flex-fill">
@@ -504,6 +542,27 @@ <h4>Follow Us</h4>
         });
     </script>
 
+<div id="preloader">
+    <video autoplay muted loop id="preloader-video">
+        <source src="../preloader.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+</div>
+<script>
+   window.addEventListener('load', function() {
+const video = document.getElementById('preloader-video');
+video.playbackRate = 1; 
+
+setTimeout(function() {
+    const preloader = document.getElementById('preloader');
+    preloader.style.opacity = '0'; 
+    setTimeout(function() {
+        preloader.style.display = 'none'; 
+    }, 500); 
+}, 3000); 
+});
+
+</script>
 
 <div class="circle-container">
     <div class="circle"></div>
diff --git a/index.html b/index.html
index 27a50258..78206335 100644
--- a/index.html
+++ b/index.html
@@ -55,8 +55,8 @@
         }
         .home-ali {
     text-align: center;
-    background-color: #f0f0f0; /* Change this to your desired background color */
-    padding: 20px; /* Optional: Add some padding for better spacing */
+    background-color: #f0f0f0;
+    padding: 20px; 
     align-items: center;
 
     @media (max-width: 768px) {
@@ -67,6 +67,46 @@
     }
 }
 
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+   
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
 .circle {
       position: absolute;
       width: 20px;
@@ -188,12 +228,37 @@
         };
     </script>
     <!-- end -->
-    <div id="loader-wrapper">
+    <!-- <div id="loader-wrapper">
         <div id="loader"></div>
         <div class="loader-section section-left"></div>
         <div class="loader-section section-right"></div>
+    </div> -->
+
+    <div id="preloader">
+        <video autoplay muted loop id="preloader-video">
+            <source src="/preloader.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
     </div>
-    <!-- <div id="caduceus-container">
+    <script>
+       window.addEventListener('load', function() {
+    const video = document.getElementById('preloader-video');
+    video.playbackRate = 1; 
+
+    setTimeout(function() {
+        const preloader = document.getElementById('preloader');
+        preloader.style.opacity = '0'; 
+        setTimeout(function() {
+            preloader.style.display = 'none'; 
+        }, 500); 
+    }, 3000); 
+});
+
+    </script>
+
+
+    <div id="caduceus-container">
+
         <div class="rope"></div>
         <img id="caduceus" src="Images/image.png" alt="Caduceus">
       </div> --> 
diff --git a/preloader.mp4 b/preloader.mp4
new file mode 100644
index 00000000..3b7d0345
Binary files /dev/null and b/preloader.mp4 differ
diff --git a/style.css b/style.css
index 960cc470..1ab73ccd 100644
--- a/style.css
+++ b/style.css
@@ -615,8 +615,8 @@ body {
     padding: 10px;
 }
 
-
-/* FOR CONTENT LOADER AT THE BEGINNING  */
+/* 
+FOR CONTENT LOADER AT THE BEGINNING 
 
 #loader-wrapper {
     position: fixed;
@@ -743,6 +743,7 @@ body {
   }
 
 }
+ */
 
 
 /* FAQS CONTAINER */
