diff --git a/travelsafety.html b/travelsafety.html
index 38287d8a..92ec5370 100644
--- a/travelsafety.html
+++ b/travelsafety.html
@@ -6,21 +6,20 @@
     <title>Travel Safety Measures</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="travelsafety.css" rel="stylesheet">
-<style>
-          /* circle styles */
-          .circle {
+    <style>
+        /* Circle styles */
+        .circle {
             height: 24px;
             width: 24px;
-            border-radius: 24px;
-            background-color: rgb(255, 0, 0);
+            border-radius: 50%;
             position: fixed;
             top: 0;
             left: 0;
             pointer-events: none;
-            z-index: 99999999;
-          }
-        </style>  
-    </head>
+            z-index: 9999;
+        }
+    </style>
+</head>
 <body>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid">
@@ -193,75 +192,50 @@ <h5 class="text-uppercase">Follow Us</h5>
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
-
-<!-- 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>
-
-<script>
-    // coordinates for the cursor :
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    const colors = [
-      "#fc5720", "#fc6532", "#fc6532","#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#fefefe", "#cdf2c5", "#b2eca5", "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02", 
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-
-    // update the coordinates when the mouse moves:
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
-
-    // animation function to move the circles:
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
-
-      circles.forEach(function (circle, index) {
-       
-
-        circle.style.left = x - 12 + "px";
-        circle.style.top = y - 12 + "px";
-        circle.style.scale = (circles.length - index) / circles.length;
-
-        circle.x = x;
-        circle.y = y;
-
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
-
-      requestAnimationFrame(animateCircles);
-    }
-    
-    animateCircles();
-  </script>
-
+    <script>
+        // Circle animation setup
+        const numberOfCircles = 20;
+        const colors = [
+            "#fc5720", "#fc6532", "#fc6532", "#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#cdf2c5", "#b2eca5",
+            "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02"
+        ];
+
+        for (let i = 0; i < numberOfCircles; i++) {
+            const circle = document.createElement("div");
+            circle.classList.add("circle");
+            circle.style.backgroundColor = colors[i % colors.length];
+            document.body.appendChild(circle);
+        }
+
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+
+        window.addEventListener("mousemove", function (e) {
+            coords.x = e.clientX;
+            coords.y = e.clientY;
+        });
+
+        function animateCircles() {
+            let x = coords.x;
+            let y = coords.y;
+
+            circles.forEach(function (circle, index) {
+                circle.style.left = x - 12 + "px";
+                circle.style.top = y - 12 + "px";
+                circle.style.scale = (circles.length - index) / circles.length;
+
+                circle.x = x;
+                circle.y = y;
+
+                const nextCircle = circles[index + 1] || circles[0];
+                x += (nextCircle.x - x) * 0.3;
+                y += (nextCircle.y - y) * 0.3;
+            });
+
+            requestAnimationFrame(animateCircles);
+        }
+
+        animateCircles();
+    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
