diff --git a/css/style.css b/css/style.css
index 0f0db85..db35aae 100644
--- a/css/style.css
+++ b/css/style.css
@@ -322,4 +322,69 @@ a {
 
 .regular_list{
   font-size: 14px;
-}
\ No newline at end of file
+}
+/* Add your styling for the banner and slider here */
+.banner {
+  position: relative;
+  width: 80%; /* Adjust the width as needed */
+  margin: 0 auto;
+  overflow: hidden;
+  max-height: 400px; /* Set the maximum height of your banner */
+}
+
+.swiper-container {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.swiper-slide {
+  width: 100%; 
+  height: 300px; 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: transform 0.3s ease;
+  margin-right: 10px; 
+  cursor: pointer;
+  overflow:hidden;
+}
+.swiper-slide img {
+  width: 100%;
+  height: 100%; 
+  object-fit: cover;
+}
+.swiper-slide:hover {
+  transform: scale(1.1); 
+}
+.swiper-slide::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  transition: background 0.3s ease; 
+  z-index: 1;
+  opacity: 0; 
+}
+.swiper-slide:hover::before {
+  opacity: 1;
+}
+.swiper-button-next,
+.swiper-button-prev {
+  top: 50%;
+  transform: translateY(-50%);
+  z-index:10;
+}
+.swiper-button-next {
+ margin-right: 10%;
+}
+.swiper-button-prev {
+  margin-left: 10%;  
+}
+.swiper-pagination-bullet {
+  background-color: #fff; 
+}
+
diff --git a/index.html b/index.html
index 0575004..91d4123 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="icon" href="img/favicon.ico" type="image/gif" sizes="16x16" />
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
@@ -88,12 +90,28 @@
         </div>
       </div>
     </nav>
-    <img
-      src="img/banner1.jpg"
-      class="img-fluid banner__image__center"
-      alt="Responsive image"
-    />
-
+    <div id="banner" class="banner">
+      <div id="slider" class="swiper-container">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <img src="img/banner.png">
+          </div>
+          <div class="swiper-slide" >
+            <img src="img/banner1.jpg" >              
+            </div>
+          </div>
+          </div>
+        </div>
+    
+        <!-- Add Pagination -->
+        <div class="swiper-pagination"></div>
+        <!-- Add Navigation -->
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev"></div>
+      </div>
+    </div>
+    
+    
     <div class="section__header__main" id="features">
       <p>
         A perfect tool,
@@ -276,5 +294,27 @@
     </div>
     <script src="/js/navbar-responsive.js"></script>
     <script src="/js/footer.js"></script>
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+  
+        var mySwiper = new Swiper(".swiper-container", {
+          // Optional parameters
+          direction: "horizontal",
+          loop: true,
+  
+          // If we need pagination
+          pagination: {
+            el: ".swiper-pagination",
+          },
+  
+          // Navigation arrows
+          navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+          },
+        });
+      });
+    </script>
   </body>
 </html>