code added

dist/Js/navbar.js

 $(document).ready(function() {
     let navbarHtml = `<div class="biz-nav-wrapper">
-    <nav class="navbar navbar-expand-lg bg-body-tertiary">
-    <div class="container">
-    <a class="navbar-brand" href="./index.html"><img src="./dist/assets/imgs/anwi-logo-1.png" class="img-fluid" alt="Anwi-Logo"></a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-          <li class="nav-item">
-            <a class="nav-link active" href="./laptopmulti.html">Laptops</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./allinone.html">All in One</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Servers</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">CPU's</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Accessories</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Support</a>
-          </li>
-          <li class="nav-item">
-            <a class="btn btn-dark button_dark" href="#">Get in touch</a>
-          </li>
-      </div>
-    </div>
-  </nav>
-  </div>`;
+    <nav class="navbar pb-4 navbar-expand-lg bg-body-tertiary">
+        <div class="container">
+        <a class="navbar-brand" href="./index.html"><img src="./dist/assets/imgs/anwi-logo-1.png"
+        class="img-fluid" alt="Anwi-Logo"></a>
+    <button class="navbar-toggler collapsed border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="icon-bar top-bar"></span>
+      <span class="icon-bar middle-bar"></span>
+      <span class="icon-bar bottom-bar"></span>
+    </button>
+
+        <div class="collapse navbar-collapse mega-nav " id="navbarSupportedContent">
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-none">
+                <li class="nav-item">
+                    <ul class="navbar-nav ">
+                        <li class="nav-item dropdown has-mega-menu">
+                            <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
+                                aria-expanded="false">Laptops</a>
+                            <div class="dropdown-menu rounded-0">
+                                <div class="container">
+                                    <div class="row dropdown-items-row">
+                                        <ul class="d-flex justify-content-center list-inline">
+                                            <li class="mx-3"> <a class="dropdown-item " href="#">
+                                                    <div class="dropdown-item-img text-center mb-2">
+                                                        <img src="./dist/assets/imgs/Navbar/Creator-laptop.png"
+                                                            alt="Laptop-img" class="img-fluid">
+                                                    </div>
+                                                    <div class="dropdown-item-content">
+                                                        <h6
+                                                            class="dropdown-item-title text-center satoshi_font">
+                                                            Creator Laptop</h6>
+                                                    </div>
+                                                </a></li>
+                                            <li class="mx-3"> <a class="dropdown-item " href="#">
+                                                    <div class="dropdown-item-img text-center mb-2">
+                                                        <img src="./dist/assets/imgs/Navbar/Business-laptop.png"
+                                                            alt="Laptop-img" class="img-fluid">
+                                                    </div>
+                                                    <div class="dropdown-item-content">
+                                                        <h6
+                                                            class="dropdown-item-title text-center satoshi_font">
+                                                            Business Laptop</h6>
+                                                    </div>
+                                                </a></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
+                <li class="nav-item">
+                    <ul class="navbar-nav ">
+                        <li class="nav-item dropdown has-mega-menu">
+                            <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
+                                aria-expanded="false">ALl in One</a>
+                            <div class="dropdown-menu rounded-0">
+                                <div class="container">
+                                    <div class="row dropdown-items-row">
+                                        <ul class="d-flex justify-content-center list-inline">
+                                            <li class="mx-3"> <a class="dropdown-item " href="#">
+                                                    <div class="dropdown-item-img text-center mb-2">
+                                                        <img src="./dist/assets/imgs/Navbar/Compact-cpu.png"
+                                                            alt="Laptop-img" class="img-fluid">
+                                                    </div>
+                                                    <div class="dropdown-item-content">
+                                                        <h6
+                                                            class="dropdown-item-title text-center satoshi_font">
+                                                            Compact CPU</h6>
+                                                    </div>
+                                                </a></li>
+                                            <li class="mx-3"> <a class="dropdown-item " href="#">
+                                                    <div class="dropdown-item-img text-center mb-2">
+                                                        <img src="./dist/assets/imgs/Navbar/Compact-cpu-2.png"
+                                                            alt="Laptop-img" class="img-fluid">
+                                                    </div>
+                                                    <div class="dropdown-item-content">
+                                                        <h6
+                                                            class="dropdown-item-title text-center satoshi_font">
+                                                            Compact CPU</h6>
+                                                    </div>
+                                                </a></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
+                <li class="nav-item">
+                    <ul class="navbar-nav ">
+                        <li class="nav-item dropdown has-mega-menu">
+                            <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
+                                aria-expanded="false">Servers</a>
+                            <div class="dropdown-menu rounded-0">
+                                <div class="container">
+                                    <div class="row dropdown-items-row">
+                                        <ul class="d-flex justify-content-center list-inline">
+                                            <div class="owl-carousel owl-theme
+            server-img-sec">
+                                                <div class="item">
+                                                    <img src="./dist/assets/imgs/Navbar/Server-1.png"
+                                                        class="img-fluid" alt="anwi-star-product">
+                                                    <h6 class="text-center satoshi_font">Server 01</h6>
+                                                </div>
+                                                <div class="item">
+                                                    <img src="./dist/assets/imgs/Navbar/Server-2.png"
+                                                        class="img-fluid" alt="anwi-star-product">
+                                                    <h6 class="text-center satoshi_font">Server 02 CPU
+                                                    </h6>
+                                                </div>
+                                                <div class="item">
+                                                    <img src="./dist/assets/imgs/Navbar/Server-3.png"
+                                                        class="img-fluid" alt="anwi-star-product">
+                                                    <h6 class="text-center satoshi_font">Server 03</h6>
+                                                </div>
+                                                <div class="item">
+                                                    <img src="./dist/assets/imgs/Navbar/Server-4.png"
+                                                        class="img-fluid" alt="anwi-star-product">
+                                                    <h6 class="text-center satoshi_font">Compact CPU
+                                                    </h6>
+                                                </div>
+                                                <div class="item">
+                                                    <img src="./dist/assets/imgs/Navbar/Server-5.png"
+                                                        class="img-fluid" alt="anwi-star-product">
+                                                    <h6 class="text-center satoshi_font">Compact CPU
+                                                    </h6>
+                                                </div>
+                                            </div>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
+                <li class="nav-item">
+                    <ul class="navbar-nav ">
+                        <li class="nav-item dropdown has-mega-menu">
+                            <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
+                                aria-expanded="false">CPU's</a>
+                            <div class="dropdown-menu rounded-0">
+                                <div class="container">
+                                    <div class="row dropdown-items-row">
+                                        <ul class="d-flex justify-content-center list-inline">
+                                            <li class="mx-3"> <a class="dropdown-item " href="#">
+                                                    <div class="dropdown-item-img text-center mb-2">
+                                                        <img src="./dist/assets/imgs/Navbar/Cpu-1.png"
+                                                            alt="Laptop-img" class="img-fluid">
+                                                    </div>
+                                                    <div class="dropdown-item-content">
+                                                        <h6
+                                                            class="dropdown-item-title text-center satoshi_font">
+                                                            Compact CPU</h6>
+                                                    </div>
+                                                </a></li>
+                                            <li class="mx-3"> <a class="dropdown-item " href="#">
+                                                    <div class="dropdown-item-img text-center mb-2">
+                                                        <img src="./dist/assets/imgs/Navbar/Cpu-2.png"
+                                                            alt="Laptop-img" class="img-fluid">
+                                                    </div>
+                                                    <div class="dropdown-item-content">
+                                                        <h6
+                                                            class="dropdown-item-title text-center satoshi_font">
+                                                            Compact CPU</h6>
+                                                    </div>
+                                                </a></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
+                <li class="nav-item">
+                    <ul class="navbar-nav ">
+                        <li class="nav-item dropdown has-mega-menu">
+                            <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
+                                aria-expanded="false">Accessories</a>
+                            <div class="dropdown-menu rounded-0">
+                                <div class="container">
+                                    <div class="row dropdown-items-row">
+                                        <ul class="d-flex justify-content-center list-inline">
+                                            <div class="owl-carousel owl-theme
+            accessories-img-sec">
+                                                <div class="item">
+                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-1.png"
+                                                        class="img-fluid" alt="anwi-star-product">
+                                                    <h6 class="text-center satoshi_font">Ora3 PCI
+                                                        Express
+                                                    </h6>
+                                                </div>
+                                                <div class="item">
+                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-2.png"
+                                                        class="img-fluid" alt="anwi-star-product">
+                                                    <h6 class="text-center satoshi_font">Ora4 PCI
+                                                        Express
+                                                    </h6>
+                                                </div>
+                                                <div class="item">
+                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-3.png"
+                                                        class="img-fluid" alt="anwi-star-product">
+                                                    <h6 class="text-center satoshi_font">DDR5 Desktop
+                                                        Memory
+                                                    </h6>
+                                                </div>
+                                                <div class="item">
+                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-4.png"
+                                                        class="img-fluid" alt="anwi-star-product">
+                                                    <h6 class="text-center satoshi_font">DDR4 Desktop
+                                                        Memory
+                                                    </h6>
+                                                </div>
+                                                <div class="item">
+                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-5.png"
+                                                        class="img-fluid" alt="anwi-star-product">
+                                                    <h6 class="text-center satoshi_font">DDR4 Desktop
+                                                        Memory
+                                                    </h6>
+                                                </div>
+                                            </div>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link pl-2 mbil-name" href="#" aria-haspopup="true"
+                        aria-expanded="false">Support</a>
+                </li>
+                <li class="nav-item">
+                    <a class="btn btn-dark button_dark" href="#">Get in touch</a>
+                </li>
+            </ul>
+        </div>
+
+        <div class="collapse navbar-collapse mobile-menu " id="navbarSupportedContent">
+            <ul class="navbar-nav d-none">
+                <li class="nav-item">
+                    <div class="accordion" id="accordionExample">
+                        <div class="accordion-item border-0">
+                            <h2 class="accordion-header" id="headingOne">
+                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                                    data-bs-target="#collapseOne" aria-expanded="true"
+                                    aria-controls="collapseOne">
+                                    Laptops
+                                </button>
+                            </h2>
+                            <div id="collapseOne" class="accordion-collapse collapse show"
+                                aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+                                <div class="accordion-body pt-0">
+                                    <ul class="list-inline ps-3">
+                                        <li>Creator Laptop</li>
+                                        <li>Business Laptop</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion-item border-0">
+                            <h2 class="accordion-header" id="headingTwo">
+                                <button class="accordion-button collapsed" type="button"
+                                    data-bs-toggle="collapse" data-bs-target="#collapseTwo"
+                                    aria-expanded="false" aria-controls="collapseTwo">
+                                    ALl in One
+                                </button>
+                            </h2>
+                            <div id="collapseTwo" class="accordion-collapse collapse"
+                                aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+                                <div class="accordion-body">
+                                    <ul class="list-inline ps-3">
+                                        <li>Compact CPU</li>
+                                        <li>Compact CPU</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion-item border-0">
+                            <h2 class="accordion-header" id="headingThree">
+                                <button class="accordion-button collapsed" type="button"
+                                    data-bs-toggle="collapse" data-bs-target="#collapseThree"
+                                    aria-expanded="false" aria-controls="collapseThree">
+                                    Servers
+                                </button>
+                            </h2>
+                            <div id="collapseThree" class="accordion-collapse collapse"
+                                aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                                <div class="accordion-body">
+                                    <ul class="list-inline ps-3">
+                                        <li>Server 01</li>
+                                        <li>Server 02 CPU</li>
+                                        <li>Server 03</li>
+                                        <li>Compact CPU</li>
+                                        <li>Compact CPU</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion-item border-0">
+                            <h2 class="accordion-header" id="headingfour">
+                                <button class="accordion-button collapsed" type="button"
+                                    data-bs-toggle="collapse" data-bs-target="#collapsefour"
+                                    aria-expanded="false" aria-controls="collapsefour">
+                                    CPU's
+                                </button>
+                            </h2>
+                            <div id="collapsefour" class="accordion-collapse collapse"
+                                aria-labelledby="headingfour" data-bs-parent="#accordionExample">
+                                <div class="accordion-body">
+                                    <ul class="list-inline ps-3">
+                                        <li>Compact CPU</li>
+                                        <li>Compact CPU</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion-item border-0">
+                            <h2 class="accordion-header" id="headingfive">
+                                <button class="accordion-button collapsed" type="button"
+                                    data-bs-toggle="collapse" data-bs-target="#collapsefive"
+                                    aria-expanded="false" aria-controls="collapsefour">
+                                    Accessories
+                                </button>
+                            </h2>
+                            <div id="collapsefive" class="accordion-collapse collapse"
+                                aria-labelledby="headingfive" data-bs-parent="#accordionExample">
+                                <div class="accordion-body">
+                                    <ul class="list-inline ps-3">
+                                        <li>Ora3 PCI Express</li>
+                                        <li>Ora4 PCI Express</li>
+                                        <li>DDR5 Desktop Memory</li>
+                                        <li>DDR4 Desktop Memory</li>
+                                        <li>DDR4 Desktop Memory</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+   
+        </div>
+    </nav>
+</div>`;
 
     $("#navbar-head").html(navbarHtml);
+    $(".navbar-toggler").click(function(){
+        $("#navbar-head").toggleClass("bg-white");
+    })
+    
     $('.pricing').find('.biz-nav-wrapper .navbar').addClass('bg-white');
 
     //  active-menu
 
     if (width <= 991.98) {
         $(".dropdown .nav-link").attr("data-toggle", "dropdown");
+        $('.navbar-collapse.mega-nav ul').addClass('d-none')
+        $('.navbar-collapse.mobile-menu ul').removeClass('d-none')
+
     } else {
         $(".dropdown .nav-link").attr("data-toggle", "");
+        $('.navbar-collapse.mega-nav ul').removeClass('d-none')
+        $('.navbar-collapse.mobile-menu ul').addClass('d-none')
+        $('.navbar-expand-lg .navbar-collapse.mobile-menu').remove()
     }
-
     // Toggle Icon Change
     $(".biz-nav-wrapper .navbar-toggler").click(function() {
         $(this).find(".navbar-toggler-icon,.navbar-close-icon").toggle("slow");
 
     //     c = currentScrollTop;
     // });
-
+    $(".nav-item.dropdown.has-mega-menu").off().hover(
+      function(e){ $("#navbar-head").find(".navbar").css("background-color", "#fff");}, // over
+      function(e){$("#navbar-head").find(".navbar").css("background-color", ""); }  // out
+  );
+    $(document).scroll(function() { 
+      if($(window).scrollTop() === 0) {
+        $(".nav-item.dropdown.has-mega-menu").off().hover(
+          function(e){ $("#navbar-head").find(".navbar").css("background-color", "#fff");}, // over
+          function(e){$("#navbar-head").find(".navbar").css("background-color", ""); }  // out
+      );
+      }
+      else{
+        $(".nav-item.dropdown.has-mega-menu").off().hover(
+          function(e){ $("#navbar-head").find(".navbar").css("background-color", "#fff");}, // over
+          function(e){$("#navbar-head").find(".navbar").css("background-color", "#fff"); }  // out
+      );
+      }
+   });
+    
     var scroll_start = 0;
     var startchange = $(".main-body");
     var offset = startchange.offset();
                     .find(".navbar")
                     .css("background-color", "transparent")
                     .css("box-shadow", "none");
+                    $(".nav-item.dropdown.has-mega-menu").hover(
+                      function(e){ $("#navbar-head").find(".navbar").css("background-color", "#fff");}, // over
+                      function(e){$("#navbar-head").find(".navbar").css("background-color", ""); }  // out
+                  );
             }
         });
     } else {
             .css("background-color", "#fff")
             .css("box-shadow", "0px 12px 20px -25px");
     }
+$('.owl-carousel.server-img-sec').owlCarousel({
+  // loop: true,
+  margin: 10,
+  rtl: false,
+  nav: false,
+  autoHeight:true,
+  responsive: {
+      0: {
+          items: 1
+      },
+      600: {
+          items: 3
+      },
+      1000: {
+          items: 4
+      }
+  }
+});
+$('.owl-carousel.accessories-img-sec').owlCarousel({
+  // loop: true,
+  margin: 10,
+  rtl: false,
+  nav: false,
+  autoHeight:true,
+  responsive: {
+      0: {
+          items: 1
+      },
+      600: {
+          items: 3
+      },
+      1000: {
+          items: 4
+      }
+  }
+});
+
+$('.navbar-nav').mouseover(function (e) { 
+    $('.mbil-name').addClass('padding_bottom_ONE_FIVE');
+    $('.navbar-brand  img').addClass('padding_bottom_ONE_FIVE');
+});
+
+$('.navbar-nav').mouseout(function (e) { 
+    $('.mbil-name').removeClass('padding_bottom_ONE_FIVE');
+    $('.navbar-brand  img').removeClass('padding_bottom_ONE_FIVE');
+});
+
 });

index.html

     <!-- main-body -->
     <main class="main-body home-main-container">
         <section class="hero-banner">
-        
-               
-           
             <!-- banner-start -->
             <div class="container">
                 <section class="banner-wrapper ">
                     <div class="banner-main-container d-flex align-items-center">
                         <div class="col-md-6">
-                            <h5 class="mb-4">AIO24 - 1700N</h5>
+                            <h5 class="satoshi_font">AIO24 - 1700N</h5>
                             <h1 class="banner_heading_4 mb-4">All-in-One</h1>
-                            <h6 class="subtitle_1 mb-4">Extraordinary Performance and Unparalleled Flexibility</h6>
+                            <h6 class="subtitle_1 mb-4 satoshi_font">Extraordinary Performance <br> and Unparalleled Flexibility</h6>
                             <a class="btn btn-dark button_dark" href="#">Know
                                 More</a>
                         </div>

shopping-cart.html

                     </div>
                 </div>
                 <div class="bg-white rounded  d-block d-sm-none ">
-                    <div class="card mb-3" style="max-width: 540px;">
+                    <div class="card mb-3 mt-5" style="max-width: 540px;">
                         <div class="mx-auto mobile-cart-img">
                             <img src="./dist/assets/imgs/Home/Shopping-cart-item-img.png" alt="shopping-cart-item-img" class="img-fluid">
                         </div>

styles/style.scss

 	.dropdown-menu {
 		width: 100%;
 		left: 0;
-		margin-top: 1.5rem;
+		// margin-top: 1.5rem;
 	}
 	.dropdown {
 		&:hover {
     to {
         transform: rotate(360deg);
     }
-  }
+  }
+
+.mbil-name, .navbar-brand img{
+    transition: all .2s ease;
+}
+