diff --git a/css/carousel.css b/css/carousel.css
index 8fa0bc6..d73c78b 100644
--- a/css/carousel.css
+++ b/css/carousel.css
@@ -136,4 +136,8 @@ body {
   .featurette-heading {
     margin-top: 120px;
   }
+}
+.carousel-control:focus {
+  outline: none; /* Removes the outline on focus */
+  background-color: transparent; /* Ensures no background remains */
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index bf2c684..65a3af2 100644
--- a/index.html
+++ b/index.html
@@ -398,5 +398,13 @@ <h3>Libraries to help you build rich client applications</h3>
     <script src="js/bootstrap.min.js"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="js/ie10-viewport-bug-workaround.js"></script>
+    <script>
+      document.querySelectorAll('.carousel-control').forEach(control => {
+  control.addEventListener('click', function () {
+    control.blur(); // Removes focus from the clicked element
+  });
+});
+
+    </script>
   </body>
 </html>