navbar and footer changes

dist/Js/footer.js

@@ -133,43 +133,66 @@ $(document).ready(function() {
     <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#accordionExample">
       <div class="accordion-body">
       <ul class="list-inline">
-                                <li>
-                                    <ul class="d-flex
-                                            list-inline">
-                                        <li><img src="" alt="logo"></li>
-                                        <li>Twitter</li>
-                                    </ul>
-                                </li>
-                                <li>
-                                    <ul class="d-flex list-inline">
-                                        <li><img src="" alt="logo"></li>
-                                        <li>Instagram</li>
-                                    </ul>
-                                </li>
-                                <li>
-                                    <ul class="d-flex list-inline">
-                                        <li><img src="" alt="logo"></li>
-                                        <li>Youtube</li>
-                                    </ul>
-                                </li>
-                                <li>
-                                    <ul class="d-flex list-inline">
-                                        <li><img src="" alt="logo"></li>
-                                        <li>Linkedin</li>
-                                    </ul>
-                                </li>
-                                <li>
-                                    <ul class="d-flex list-inline">
-                                        <li><img src="" alt="logo"></li>
-                                        <li>Facebook</li>
-                                    </ul>
-                                </li>
-                            </ul>
+      <li>
+          <ul class="d-flex
+                  list-inline">
+              <li class="footer-socailImg"><img src="dist/assets/imgs/footer/twitter.png" alt="logo" class="px-1 img-fluid"></li>
+              <li>Twitter</li>
+          </ul>
+      </li>
+      <li>
+          <ul class="d-flex list-inline">
+              <li class="footer-socailImg"><img src="dist/assets/imgs/footer/instra.png" alt="logo" class="px-1 img-fluid"></li>
+              <li>Instagram</li>
+          </ul>
+      </li>
+      <li>
+          <ul class="d-flex list-inline">
+              <li class="footer-socailImg"><img src="dist/assets/imgs/footer/youtube.png" alt="logo" class="px-1 img-fluid"></li>
+              <li>Youtube</li>
+          </ul>
+      </li>
+      <li>
+          <ul class="d-flex list-inline">
+              <li class="footer-socailImg"><img src="dist/assets/imgs/footer/linkedin.png" alt="logo" class="px-1 img-fluid"></li>
+              <li>Linkedin</li>
+          </ul>
+      </li>
+      <li>
+          <ul class="d-flex list-inline">
+              <li class="footer-socailImg"><img src="dist/assets/imgs/footer/facebook.png" alt="logo" class="px-1 img-fluid"></li>
+              <li>Facebook</li>
+          </ul>
+      </li>
+  </ul>
 
       </div>
     </div>
   </div>
+  
+  </div>
+  <div class="footer-sub-content ">
+  <div class="container">
+  <div class="d-flex g-0 align-items-center justify-content-around">
+          <div class="col-md-2 text-white
+                  text-center">
+              <p class="mb-0">Privacy Policy</p>
+          </div>
+          <div class="col-md-2 text-white
+                  text-center">
+              <p class="mb-0"> Terms of Use Sales
+              </p>
+          </div>
+          <div class="col-md-2 text-white">
+              <p class="mb-0">Policy</p>
+          </div>
+      </div>
+  <div class="text-white">
+  <p class="mb-0 text-center">Copyright ©2023 Anwisystems pvt ltd.</p>
+  <p class="mb-0 text-center">All rights reserved.</p>
+</div>
   </div>
+</div>
   </div>
     <div class="footer-main-container d-none d-sm-block ">
         <div class="footer-logo py-3

dist/Js/navbar.js

@@ -1,40 +1,218 @@
 $(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" id="navbarSupportedContent">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                <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 w-200p">
+                    <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  w-200p">
+                    <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  w-200p">
+                    <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  w-200p">
+                    <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  w-200p">
+                    <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="btn btn-dark button_dark" href="#">Get in touch</a>
+            </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
@@ -88,7 +266,25 @@ $(document).ready(function() {
 
     //     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();
@@ -105,6 +301,10 @@ $(document).ready(function() {
                     .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 {
@@ -113,4 +313,40 @@ $(document).ready(function() {
             .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: 2,
+      },
+      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: 2,
+      },
+      600: {
+          items: 3
+      },
+      1000: {
+          items: 4
+      }
+  }
+});
+});

index.html

@@ -21,17 +21,14 @@
     <!-- 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>

styles/base/_utilities.scss

@@ -195,6 +195,10 @@
   width: 20px;
 }
 
+.w-200{
+  width:200px;
+}
+
 // font weight
 
 

styles/pages/_home.scss

@@ -1,84 +1,95 @@
 /* home page */
-
+$color_1: #000;
+$color_2: white;
+$font-family_1: "Satoshi", sans-serif;
+$background-color_1: #000;
+$background-color_2: #0fa5c5;
+$background-color_3: #f2f9fb;
+/* BUtton */
 .button_dark.btn-dark {
-    background-color: #000000 !important;
-    font-family: "Satoshi", sans-serif;
+	background-color: $background-color_1 !important;
+	font-family: $font-family_1;
+	&:hover {
+		background-color: $background-color_1 !important;
+		font-family: $font-family_1;
+		opacity: 1 !important;
+	}
 }
-
-.button_dark.btn-dark:hover {
-    background-color: #000000 !important;
-    font-family: "Satoshi", sans-serif;
-    opacity: 1 !important;
+/* main-container */
+.home-main-container {
+	#navbar-head { /* navbar */
+		.navbar-nav {
+			.nav-item {
+				.nav-link {
+					color: $color_1;
+					font-family: $font-family_1;
+				}
+			}
+		}
+	}
+	.offer-main-sec {/* main-offersec */
+		.offer-sec {
+			margin-top: -35px;
+		}
+	}
+	.aw-feature-name {
+		h5 {
+			transform: rotate(180deg);
+			transform-origin: center center 0;
+			writing-mode: vertical-rl;
+		}
+	}
+	.out-of-world { /* out-of-worldzz */
+		.card {
+			background-color: $background-color_2;
+		}
+	}
+	.aw-support-sec {
+		.aw-support-sec-main-container {
+			background-color: $background-color_3;
+		}
+		.news-letter-sec {
+			.news-letter-email {
+				&:focus {
+					border-bottom: 1px solid white;
+					outline: none;
+				}
+				&::placeholder {
+					color: $color_2;
+				}
+			}
+		}
+	}
+	.owl-carousel.star-products-img-sec { /* owl-carousal */
+		.owl-dots {
+			text-align: left;
+			.owl-dot {
+				span {
+					height: 3px;
+					width: 25px;
+				}
+			}
+			.owl-dot.active {
+				color: $color_1;
+			}
+		}
+		.owl-nav {
+			text-align: right;
+			margin-right: 5rem;
+		}
+	}
 }
-
-.home-main-container #navbar-head {
-    .navbar-nav .nav-item .nav-link {
-        color: #000000;
-        font-family: "Satoshi", sans-serif;
-    }
-}
-
+/* banner */
 .hero-banner {
-    // background-image: url(../../dist/assets/imgs/Home/banner.png);
-    background-image: url(../../dist/assets/imgs/Home/banner.png);
-    // background-color: #cccccc;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-position-y: -100px;
-    // home-banner
-    .banner-main-container {
-        height: 620px;
-    }
-}
-
-.home-main-container .offer-main-sec {
-    .offer-sec {
-        margin-top: -35px;
-    }
-}
-
-.home-main-container .aw-feature-name {
-    h5 {
-        transform: rotate(180deg);
-        transform-origin: center center 0;
-        writing-mode: vertical-rl;
-    }
+	background-image: url(../../dist/assets/imgs/Home/banner.png);
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-position-y: -100px;
+	.banner-main-container {
+		height: 620px;
+	}
 }
-
-.home-main-container .out-of-world .card {
-    background-color: #0FA5C5;
-}
-
-.home-main-container .aw-support-sec {
-    .aw-support-sec-main-container {
-        background-color: #F2F9FB;
-    }
-    .news-letter-sec .news-letter-email:focus {
-        border-bottom: 1px solid white;
-        outline: none;
-    }
-    .news-letter-sec .news-letter-email::placeholder {
-        color: white;
-    }
-}
-
-.home-main-container .owl-carousel.star-products-img-sec .owl-dots {
-    text-align: left;
-    .owl-dot span {
-        height: 3px;
-        width: 25px;
-    }
-    .owl-dot.active {
-        color: #000000;
-    }
-}
-
-.home-main-container .owl-carousel.star-products-img-sec .owl-nav {
-    text-align: right;
-    margin-right: 5rem;
-}
-
 @media (min-width:1900px) {
     .hero-banner {
         background-size: 100% 100%;
@@ -120,70 +131,71 @@
 
 @media (min-width:278px) and (max-width:767px) {
     .home-main-container {
-        h5,
+        h5 {
+            font-size: 1rem;
+        }
         h6 {
             font-size: 1rem;
         }
-        .sec-space-1,
+        .sec-space-1 {
+            margin-top: 40px;
+        }
         .sec-space-2 {
             margin-top: 40px;
         }
         .banner-main-container {
             height: 550px;
             display: block !important;
-        text-align: center;
-        .col-md-6 {
-            padding-top: 7rem;
-
-            .button_dark{
-                display: none;
+            text-align: center;
+            .col-md-6 {
+                padding-top: 7rem;
+                .button_dark {
+                    display: none;
+                }
+            }
+            .mobile-home-img {
+                width: 85%;
+            }
+            h1 {
+                font-size: 2rem;
             }
         }
-        .mobile-home-img{
-            width: 85%;
-        }
-        h1 {
-            font-size: 2rem;
-        }
-    }
         .hero-banner {
-            // background: url(../../dist/assets/imgs/Home/All-in-one.png);
-            // background-size: cover;
             background-position: 0;
         }
-        .aw-main-features{
+        .aw-main-features {
             display: none;
         }
         .mobile-text-center {
             text-align: center;
         }
-        // .aw-partners img {
-        //     width: 150px;
-        //     height: 50px;
-        // }
-        // .aw-partners .windows-icon-mb img {
-        //     width: 60px;
-        //     height: 50px;
-        // }
-        .aw-feature-name h5 {
-            transform: rotate(0deg);
-            writing-mode: horizontal-tb;
+        .aw-feature-name {
+            h5 {
+                transform: rotate(0deg);
+                writing-mode: horizontal-tb;
+            }
         }
         .products-main-container {
-            .enterprise-prd,.consumer-prd {
+            .enterprise-prd {
+                margin-top: 10px;
+            }
+            .consumer-prd {
                 margin-top: 10px;
             }
-           
         }
-       
         .news-letter-sec {
             a.button_dark {
                 padding: 10px 5px;
             }
         }
-        .owl-carousel.star-products-img-sec .owl-nav {
-            text-align: center;
-            margin-right: 0px;
+        .owl-carousel.star-products-img-sec {
+            .d-flex{
+justify-content: center !important;
+            }
+            .owl-nav {
+                text-align: center;
+                margin-right: 0px;
+            }
         }
         .star-products {
             .owl-dots {
@@ -202,34 +214,45 @@
                 padding: 0 !important;
             }
         }
-        .offer-main-sec{
+        .offer-main-sec {
             margin-bottom: 0 !important;
             padding: 0 !important;
         }
-        .offer-sec{
-            p{
+        .offer-sec {
+            p {
                 font-size: 0.85rem;
             }
         }
     }
     .footer-wrapper {
-        .accordion-button,
+        .accordion-button {
+            font-family: $font-family_1;
+            color: $color_2;
+            background-color: $background-color_1;
+            &:not(.collapsed) {
+                &::after {
+                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+                }
+            }
+        }
         .accordion-body {
-            font-family: "Satoshi", sans-serif;
-            color: white;
-            background-color: #000000;
+            font-family: $font-family_1;
+            color: $color_2;
+            background-color: $background-color_1;
         }
-        .accordion-button:not(.collapsed)::after,
-        .accordion-button.collapsed::after {
-            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+        .accordion-button.collapsed {
+            &::after {
+                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+            }
         }
+         .footer-sub-content p{
+            font-size: 0.85rem;
+         }
     }
+    
 }
-
 // index styles
-
 .feature-bg-image.animated-feature-img {
-   
     animation: slide 1s ease .2s forwards;
     opacity: 0;
     // transform-origin: left top;

styles/style.scss

@@ -138,77 +138,192 @@ body {
 //     body {
 //       padding: 0; } 
 //   }
-.bg-green {
-    background-color: #3bb78f;
-    background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
-}
+$color_1: #000;
+$font-family_1: "Satoshi", sans-serif;
+$background-color_1: #3bb78f;
+$background-color_2: #fff;
 
 
+.bg-green {
+    background-color: $background-color_1;
+	background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
+}
 /* button */
-
 .button_dark {
-    clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
-    padding-right: 1.7rem;
-    padding-bottom: 0.6rem;
-    padding-top: 0.6rem;
-    border-radius: 10px;
-}
-
-// navbar
-#navbar-head{
-    position: fixed;
-    width: 100%;
-    z-index: 9999;
-    top: 0;
-}
-.biz-nav-wrapper {
-    .navbar-brand img {
-        width: 150px;
-    }
+	clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
+	padding-right: 1.7rem;
+	padding-bottom: 0.6rem;
+	padding-top: 0.6rem;
+	border-radius: 10px;
 }
-
-.navbar-nav .nav-item .nav-link {
-    color: #000000;
-    font-family: "Satoshi", sans-serif;
+/* navbar */
+#navbar-head {
+	position: fixed;
+	width: 100%;
+	z-index: 9999;
+	top: 0;
+	.biz-nav-wrapper {
+		.navbar-brand {
+			img {
+				width: 150px;
+			}
+		}
+		.dropdown.has-mega-menu {
+			position: static !important;
+		}
+		.dropdown-menu {
+			.dropdown-items-row {
+				width: 100%;
+				margin: 0px;
+			}
+		}
+	}
+	.navbar-nav {
+		gap: 2rem;
+		.nav-item {
+			.nav-link {
+				color: $color_1;
+				font-family: $font-family_1;
+				margin-top: 0.25rem;
+			}
+		}
+		.dropdown.has-mega-menu {
+			&:hover {
+				>.navbar {
+					background-color: $background-color_2;
+				}
+			}
+		}
+	}
+	.button_dark.btn-dark {
+		font-weight: bold;
+	}
+	.dropdown-menu {
+		width: 100%;
+		left: 0;
+		margin-top: 1.5rem;
+	}
+	.dropdown {
+		&:hover {
+			>.dropdown-menu {
+				display: block;
+			}
+		}
+	}
+	.dropdown-item-img {
+		img {
+			width: 200px;
+		}
+	}
 }
-
-
 /* footer */
-
 .footer-wrapper {
-    // background-color: rgb(0, 0, 0);
-    background-image: url(../dist/assets/imgs/Home/Footer-bg-1.png);
-    background-size: cover;
-
-    .footer-content-main-container {
-        background-image: url(../dist/assets/imgs/Home/Footer-pattern.png);
-        background-size: contain;
-        background-position: right 30px;
-        background-repeat: no-repeat;
-    }
-
-    .last-col-footer {
-        width: 23%;
-    }
+	background-image: url(../dist/assets/imgs/Home/Footer-bg-1.png);
+	background-size: cover;
+	.footer-content-main-container {
+		background-image: url(../dist/assets/imgs/Home/Footer-pattern.png);
+		background-size: contain;
+		background-position: right 30px;
+		background-repeat: no-repeat;
+	}
+	.last-col-footer {
+		width: 23%;
+	}
+	.footer-logo {
+		img {
+			width: 120px;
+		}
+	}
+	li {
+		line-height: 2rem;
+		font-family: $font-family_1;
+	}
+	.footer-sub-content {
+		p {
+			line-height: 2rem;
+			font-family: $font-family_1;
+		}
+	}
+}
+.footer-socailImg {
+	width: 30px;
+}
+@media (min-width: 1990px) {
+	.footer-wrapper {
+		.footer-rkt {
+			right: 45px !important;
+		}
+	}
+}
 
-    @media (min-width:1990px) {
-        .footer-rkt {
-            right: 45px !important;
+@media (max-width:1024px) {
+    $color_1: rgb(255 32 32 / 0%);
+    $background-color_1: #4f4f4f;
+    #navbar-head {
+        .navbar-nav {
+            gap: 0;
+            .dropdown-menu{
+                margin-top: 0;
+        }
+        }
+        .owl-carousel {
+        .owl-dots{
+            display: none;
+             }
+        .owl-item {
+    //    h6 {
+    //         text-align: left !important;
+    //        }
+          
+        }
         }
     }
-
-    .footer-logo img {
-        width: 120px;
+    .navbar-toggler {
+        color: $color_1;
+        span {
+            display: block;
+            background-color: $background-color_1;
+            height: 3px;
+            width: 25px;
+            margin-top: 5px;
+            margin-bottom: 5px;
+            position: relative;
+            left: 0;
+            opacity: 1;
+            transition: all 0.35s ease-out;
+            transform-origin: center left;
+            &:nth-child(1) {
+                transform: translate(0%, 0%) rotate(0deg);
+                margin-top: 0.3em;
+            }
+            &:nth-child(2) {
+                opacity: 1;
+            }
+            &:nth-child(3) {
+                transform: translate(0%, 0%) rotate(0deg);
+            }
+        }
+        &:not(.collapsed) {
+            span {
+                &:nth-child(1) {
+                    transform: translate(15%, -33%) rotate(45deg);
+                }
+                &:nth-child(2) {
+                    opacity: 0;
+                }
+                &:nth-child(3) {
+                    transform: translate(15%, 33%) rotate(-45deg);
+                }
+            }
+        }
     }
-
-    li,
-    .footer-sub-content p {
-        line-height: 2rem;
-        font-family: "Satoshi", sans-serif;
+}
+#footer-head{
+    .accordion-item{
+        border: 1px solid;
+        box-shadow: none;
+        .accordion-button:not(.collapsed){
+        box-shadow: none !important;}
     }
+   
 }
-
-// footer 
-.footer-socailImg{
-    width: 30px;
-}