UI modifications in Login and index.html

dist/Js/main.js

@@ -14,30 +14,26 @@
     $("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#fff");
    }
    setTimeout(naChanges, 1000);
-    win.on('scroll', function() {
-        var scroll = win.scrollTop();
-        if (scroll < 200) {
-            header.removeClass('stick');
-            if(ele_page == true){
-            $(".header-bottom.sticky-bar.stick").removeClass("sticky-bar stick");
-            let img_src = `./dist/assets/imgs/anwi-logo-2.png`;
-            $(".logo-menu-wrap").find("a img").attr("src",img_src);
-            $(".main-menu").find("nav ul li a").addClass("text-white");
-            $("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#fff");
-            }
-        } else {
-            header.addClass('stick');
-         
-            if(ele_page == true){
-                $(".header-bottom").addClass("sticky-bar stick");
-                let src = `./dist/assets/imgs/anwi-logo-1.png`;
-                $(".logo-menu-wrap").find("a img").attr("src",src);
-                $(".main-menu").find("nav ul li a").removeClass("text-white");
-                $("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","currentcolor");
-            }
-          
-        }
-    });
+   win.on('scroll', function() {
+    var scroll = win.scrollTop();
+    if (scroll < 200) {
+        header.removeClass('stick');
+        $(".header-bottom.sticky-bar.stick").removeClass("sticky-bar stick");
+        let img_src = `./dist/assets/imgs/anwi-logo-2.png`;
+        $(".logo-menu-wrap").find("a img").attr("src",img_src);
+        $(".main-menu").find("nav ul li a").addClass("text-white");
+        $("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#fff");
+    } else {
+        header.addClass('stick');
+     
+            $(".header-bottom").addClass("sticky-bar stick");
+            let src = `./dist/assets/imgs/anwi-logo-1.png`;
+            $(".logo-menu-wrap").find("a img").attr("src",src);
+            $(".main-menu").find("nav ul li a").removeClass("text-white");
+            $("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","currentcolor");
+      
+    }
+});
     
     /*--------------------------------
         Slider active 1

dist/Js/navbar.js

@@ -1,13 +1,13 @@
 let nav_html = `
-<header class="header-area section-padding-1 transparent-bar bg-white">
+<header class="header-area section-padding-1 transparent-bar">
             <div class="header-large-device">
                 <div class="header-bottom sticky-bar">
                     <div class="container">
                         <div class="header-bottom-flex">
                             <div class="logo-menu-wrap d-flex">
                                 <div class="logo">
-                                    <a href="./index.html">
-                                        <img src="./dist/assets/imgs/anwi-logo-1.png" alt="logo" class="w-50">
+                                    <a href="../index.html">
+                                        <img src="../dist/assets/imgs/anwi-logo-2.png" alt="logo" class="w-50">
                                     </a>
                                 </div>
                                 <div class="main-menu menu-lh-1 main-menu-padding-1">
@@ -26,10 +26,10 @@ let nav_html = `
                             </div>
                             <div class="header-action-wrap header-action-flex header-action-width header-action-mrg-1">
                                 <div class="same-style">
-                                <a href="./myaccount.html" class="my_avatar"><i class="fa-solid fa-user"></i> PROFILE</a>
+                                <a href="./myaccount.html" class="my_avatar"><i class="fa-solid fa-user"></i></a>
                                 </div>
                                 <div class="same-style header-cart">
-                                    <a class="cart-active1" href="#"><i class="fa-solid fa-cart-shopping"></i> CART</a>
+                                    <a class="cart-active1" href="#"><i class="fa-solid fa-cart-shopping"></i></a>
                                 </div>
                             </div>
                         </div>
@@ -49,8 +49,8 @@ let nav_html = `
                                     </button>
                                 </div>
                                 <div class="mobile-logo mobile-logo-width ps-3">
-                                    <a href="./index.html">
-                                        <img alt="" src="./dist/assets/imgs/anwi-logo-1.png" class="w-50">
+                                    <a href="../index.html">
+                                        <img alt="" src="../dist/assets/imgs/anwi-logo-1.png" class="w-50">
                                     </a>
                                 </div>
                             </div>
@@ -75,8 +75,8 @@ let nav_html = `
             <div class="row pb-2 border-bottom">
                 <div class="col-6">
                     <div class="mobile-logo mobile-logo-width">
-                        <a href="./index.html">
-                            <img alt="" src="./dist/assets/imgs/anwi-logo-1.png" class="w-75">
+                        <a href="../index.html">
+                            <img alt="" src="../dist/assets/imgs/anwi-logo-1.png" class="w-75">
                         </a>
                     </div>
                 </div>
@@ -197,11 +197,7 @@ if (window.location.pathname.includes(loc_path) === false) {
     localStorage.removeItem("top_data")
 }
 
-let loc_paths = '/becomeamember.html';
- if (window.location.pathname.includes(loc_paths) === true) {
-  $(".header-area").removeClass("bg-white");
-  $(".header-bottom.sticky-bar").addClass("shadow-none")
- }
+
 //services pages links and sources
 
 let $body_pg = $("body").hasClass("services_page");

dist/Js/navbar1.js

@@ -1,761 +1,238 @@
-$(document).ready(function () {
-
-    let navbarHtml = `<div class="biz-nav-wrapper d-lg-none d-block">
-    <nav class="navbar pb-lg-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">
-                                                            ZENO 14 inch Business 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">
-                                                            ZENO 15.6 inch 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">
-                                                            24 inch AIO i5</h6>
-                                                    </div>
-                                                </a></li>
-                                            <li class="mx-3"> <a class="dropdown-item " href="./allinone34inch.html">
-                                                    <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">
-                                                            34 inch AIO i7 4K</h6>
-                                                    </div>
-                                                </a></li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                </li>
-                <li class="nav-item d-none">
-                    <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>
+let nav_html = `
+<header class="header-area section-padding-1 transparent-bar " style="background:#0A1039">
+            <div class="header-large-device">
+                <div class="header-bottom sticky-bar">
+                    <div class="container">
+                        <div class="header-bottom-flex">
+                            <div class="logo-menu-wrap d-flex">
+                                <div class="logo">
+                                    <a href="../index.html">
+                                        <img src="../dist/assets/imgs/anwi-logo-2.png" alt="logo" class="w-50">
+                                    </a>
+                                </div>
+                                <div class="main-menu menu-lh-1 main-menu-padding-1">
+                                    <nav>
+                                        <ul class="mb-0 p-0">
+                                            <li><a href="./storageproducts.html" class="satoshi_font">STORAGE</a></li>
+                                            <li><a href="./ramproducts.html" class="satoshi_font">RAM</a></li>
+                                            <li><a href="./support.html" class="satoshi_font">SUPPORT</a></li>
+                                            <li><a href="./press.html" class="satoshi_font">PRESS</a></li>
+                                            <li><a href="./index1.html" class="satoshi_font">COMING SOON</a></li>
+                                            <li><a href="./contact.html" class="satoshi_font">CONTACT</a></li>
+                                            <li class="d-none"><a href="#" class="satoshi_font product_data" item_id="106633220000002">ACCESSORIES</a></li>
                                         </ul>
-                                    </div>
+                                    </nav>
                                 </div>
                             </div>
-                        </li>
-                    </ul>
-                </li>
-                <li class="nav-item d-none">
-                    <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 class="header-action-wrap header-action-flex header-action-width header-action-mrg-1">
+                                <div class="same-style">
+                                <a href="./myaccount.html" class="my_avatar"><i class="fa-solid fa-user"></i></a>
                                 </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">
-                                                <a href="./products/ora3.html" class="text-decoration-none text-dark">
-                                                    <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>
-                                                    </a>
-                                                </div>
-                                                <div class="item">
-                                                <a href="./products/ora4.html" class="text-decoration-none text-dark">
-                                                    <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>
-                                                    </a>
-                                                </div>
-                                                <div class="item">
-                                                <a href="./products/ddr5.html" class="text-decoration-none text-dark">
-                                                    <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>
-                                                    </a>
-                                                </div>
-                                                <div class="item">
-                                                <a href="./products/ddr4.html" class="text-decoration-none text-dark">
-                                                    <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>
-                                                    </a>
-                                                </div>
-                                                <div class="item">
-                                                <a href="./products/ddrlm4.html" class="text-decoration-none text-dark">
-                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-5.png"
-                                                        class="img-fluid" alt="anwi-star-product">
-                                                    <h6 class="text-center satoshi_font">DDR4 Laptop
-                                                        Memory
-                                                    </h6>
-                                                    </a>
-                                                </div>
-                                                <div class="item">
-                                                <a href="./products/ddrlm5.html" class="text-decoration-none text-dark">
-                                                    <img src="./dist/assets/imgs/Navbar/Accessiories-6.png"
-                                                        class="img-fluid" alt="anwi-star-product">
-                                                    <h6 class="text-center satoshi_font">DDR5 Laptop
-                                                        Memory
-                                                    </h6>
-                                                    </a>
-                                                </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><a class="dropdown-item " href="#">ZENO 14 inch Business Laptop</a></li>
-                                        <li><a class="dropdown-item " href="#">ZENO 15.6 inch Business Laptop</a></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><a href="#" class="text-dark text-decoration-none cursor-pointer">24 inch AIO i5</a></li>
-                                        <li><a href="./allinone34inch.html" class="text-dark text-decoration-none cursor-pointer">34 inch AIO i7 4K</a></li>
-                                    </ul>
+                                <div class="same-style header-cart">
+                                    <a class="cart-active1" href="#"><i class="fa-solid fa-cart-shopping"></i></a>
                                 </div>
                             </div>
                         </div>
-                        <div class="accordion-item border-0 d-none">
-                            <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="header-small-device header-small-ptb sticky-bar py-md-2 py-2 bg-white">
+                <div class="container-fluid">
+                    <div class="row align-items-center">
+                        <div class="col-6 header-action-wrap">
+                            <div class="d-flex">
+                                <div class="same-style header-info">
+                                    <button class="mobile-menu-button-active">
+                                        <span class="info-width-1"></span>
+                                        <span class="info-width-2"></span>
+                                        <span class="info-width-3"></span>
+                                    </button>
+                                </div>
+                                <div class="mobile-logo mobile-logo-width ps-3">
+                                    <a href="../index.html">
+                                        <img alt="" src="../dist/assets/imgs/anwi-logo-1.png" class="w-50">
+                                    </a>
                                 </div>
                             </div>
                         </div>
-                        <div class="accordion-item border-0 d-none">
-                            <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<a href="#" class="text-dark text-decoration-none cursor-pointer">24 inch AIO i5</a></li>
-                                        <li><a href="./allinone34inch.html" class="text-dark text-decoration-none cursor-pointer">34 inch AIO i7 4K</a></li>
-                                    </ul>
+                        <div class="col-6">
+                            <div class="header-action-wrap header-action-flex header-action-mrg-1">
+                                <div class="same-style">
+                                <a href="./myaccount.html" class="my_avatar"><i class="fa-solid fa-user"></i></a>
                                 </div>
-                            </div>
-                        </div>
-                        <div class="accordion-item border-0">
-                            <h2 class="accordion-header" id="headingfive">
-                                <button class="accordion-button collapsed nav_item" item_id="106633220000002" 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>
-                                            <a href="./ramproducts.html" class="text-decoration-none text-dark">RAMs</a>
-                                        </li>
-                                        <li>
-                                            <a href="./storageproducts.html" class="text-decoration-none text-dark">Storage</a>
-                                        </li>
-                                        <li class="d-none">                                            
-                                        <a href="./products/ddr5.html" class="text-decoration-none text-dark">DDR5 Desktop Memory</a>
-                                        </li>
-                                        <li class="d-none">
-                                            <a href="./products/ddr4.html" class="text-decoration-none text-dark">DDR4 Desktop Memory</a>
-                                        </li>
-                                        <li class="d-none">
-                                            <a href="./products/ddrlm4.html" class="text-decoration-none text-dark">DDR4 Laptop Memory</a>
-                                        </li>
-                                        <li class="d-none">
-                                        <a href="./products/ddrlm5.html" class="text-decoration-none text-dark">DDR4 Laptop Memory</a>
-                                    </li>
-                                    </ul>
+                                <div class="same-style header-cart">
+                                    <a class="cart-active1" href="#"><i class="fa-solid fa-cart-shopping"></i></a>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </li>
-            </ul>
-        </div>
-   
-        </div>
-    </nav>
-        </div>`;
-    $("#navbar-head").html(navbarHtml);
-    let navhtml = `
-<div class="ruby-menu-demo-header bg-white d-none d-lg-block">
-    <!-- ########################### -->
-    <!-- START: RUBY HORIZONTAL MENU -->
-    <div class="ruby-wrapper container py-1">
-      <button class="c-hamburger c-hamburger--htx visible-xs">
-        <span>toggle menu</span>
-      </button>
-      <div class="row align-items-center py-lg-2">
-      <div class="col-1">
-      <a class="navbar-brand" href="./index.html">
-        <img src="./dist/assets/imgs/anwi-logo-1.png" class="img-fluid " alt="Anwi-Logo">
-      </a>
-      </div>
-      <div class="col-8">
-      <ul class="ruby-menu d-flex align-items-center">
-        <li class="ruby-menu-mega"><a href="#">Laptop</a>
-        <div class="ruby-grid ruby-grid-lined border-top shadow" data_txt="laptop">
-                <div class="ruby-row">
-                    <ul class="d-flex justify-content-center list-inline mb-lg-2">
-                        <li class="mx-3">
-                            <a class="dropdown-item" href="#">
-                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                                    <img src="../dist/assets/imgs/Navbar/Creator-laptop.png" alt="Laptop-img" class="img-fluid mx-auto">
-                                </div>
-                                <div class="dropdown-item-content">
-                                    <h6 class="dropdown-item-title text-center satoshi_font px-2">ZENO 14 inch Business Laptop</h6>
-                                </div>
-                            </a>
-                        </li>
-                        <li class="mx-3">
-                            <a class="dropdown-item " href="#">
-                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                                    <img src="../dist/assets/imgs/Navbar/Business-laptop.png" alt="Laptop-img" class="img-fluid mx-auto">
-                                </div>
-                                <div class="dropdown-item-content">
-                                    <h6 class="dropdown-item-title text-center satoshi_font px-2">ZENO 15.6 inch Business Laptop</h6>
-                                </div>
-                            </a>
-                        </li>
-                    </ul>
                 </div>
             </div>
-        <span class="ruby-dropdown-toggle"></span>
-        </li>
-        <li class="ruby-menu-mega"><a href="#">All in One</a>
-            <div class="ruby-grid ruby-grid-lined border-top shadow" data_txt="all-in-one">
-                <div class="ruby-row">
-                    <ul class="d-flex justify-content-center list-inline mb-lg-2">
-                        <li class="mx-3">
-                            <a class="dropdown-item" href="#">
-                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                                    <img src="../dist/assets/imgs/Navbar/Compact-cpu.png" alt="Laptop-img" class="img-fluid mx-auto">
-                                </div>
-                                <div class="dropdown-item-content">
-                                    <h6 class="dropdown-item-title text-center satoshi_font">24 inch AIO i5</h6>
-                                </div>
-                            </a>
-                        </li>
-                        <li class="mx-3">
-                            <a class="dropdown-item " href="./allinone34inch.html">
-                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                                    <img src="../dist/assets/imgs/Navbar/Compact-cpu.png" alt="Laptop-img" class="img-fluid mx-auto">
-                                </div>
-                                <div class="dropdown-item-content">
-                                    <h6 class="dropdown-item-title text-center satoshi_font">34 inch AIO i7 4K</h6>
-                                </div>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <span class="ruby-dropdown-toggle"></span>
-        </li>
-        <li class="ruby-menu-mega d-none"><a href="#">Servers</a>
-            <div class="ruby-grid ruby-grid-lined border-top shadow" data_txt="server">
-                <div class="ruby-row">
-                    <ul class="d-flex justify-content-center list-inline mb-lg-2">
-                    <li class="mx-3">
-                            <a class="dropdown-item" href="laptopmulti.html">
-                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                                    <img src="../dist/assets/imgs/Navbar/Server-1.png" alt="Laptop-img" class="img-fluid mx-auto">
-                                </div>
-                                <div class="dropdown-item-content">
-                                    <h6 class="dropdown-item-title text-center satoshi_font">Server 01</h6>
-                                </div>
-                            </a>
-                        </li>
-                        <li class="mx-3">
-                            <a class="dropdown-item" href="laptopmulti.html">
-                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                                    <img src="../dist/assets/imgs/Navbar/Server-2.png" alt="Laptop-img" class="img-fluid mx-auto">
-                                </div>
-                                <div class="dropdown-item-content">
-                                    <h6 class="dropdown-item-title text-center satoshi_font">Server 02 CPU</h6>
-                                </div>
-                            </a>
-                        </li>
-                        <li class="mx-3">
-                            <a class="dropdown-item " href="#">
-                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                                    <img src="../dist/assets/imgs/Navbar/Server-3.png" alt="Laptop-img" class="img-fluid mx-auto">
-                                </div>
-                                <div class="dropdown-item-content">
-                                    <h6 class="dropdown-item-title text-center satoshi_font">Server 03</h6>
-                                </div>
-                            </a>
-                        </li>
-                        <li class="mx-3">
-                        <a class="dropdown-item " href="#">
-                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                                <img src="../dist/assets/imgs/Navbar/Server-4.png" alt="Laptop-img" class="img-fluid mx-auto">
-                            </div>
-                            <div class="dropdown-item-content">
-                                <h6 class="dropdown-item-title text-center satoshi_font">Compact CPU</h6>
-                            </div>
+        </header>
+        <!-- Mobile menu start -->
+        <div class="mobile-menu-active clickalbe-sidebar-wrapper-style-1">
+            <div class="clickalbe-sidebar-wrap">
+            <div class="row pb-2 border-bottom">
+                <div class="col-6">
+                    <div class="mobile-logo mobile-logo-width">
+                        <a href="../index.html">
+                            <img alt="" src="../dist/assets/imgs/anwi-logo-1.png" class="w-75">
                         </a>
-                    </li>
-                    <li class="mx-3">
-                    <a class="dropdown-item " href="#">
-                        <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                            <img src="../dist/assets/imgs/Navbar/Server-5.png" alt="Laptop-img" class="img-fluid mx-auto">
-                        </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>
-            <span class="ruby-dropdown-toggle"></span>
-        </li>
-        <li class="ruby-menu-mega d-none"><a href="#">CPU's</a>
-            <div class="ruby-grid ruby-grid-lined border-top shadow" data_txt="cpu">
-                <div class="ruby-row">
-                    <ul class="d-flex justify-content-center list-inline mb-lg-2">
-                        <li class="mx-3">
-                            <a class="dropdown-item" href="laptopmulti.html">
-                                <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                                    <img src="../dist/assets/imgs/Navbar/Cpu-1.png" alt="Laptop-img" class="img-fluid mx-auto">
-                                </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 hover-zoom">
-                                    <img src="../dist/assets/imgs/Navbar/Cpu-2.png" alt="Laptop-img" class="img-fluid mx-auto">
-                                </div>
-                                <div class="dropdown-item-content">
-                                    <h6 class="dropdown-item-title text-center satoshi_font">Compact CPU</h6>
-                                </div>
-                            </a>
-                        </li>
-                    </ul>
+                <div class="col-6 text-end pe-4">
+                    <a class="sidebar-close"><i class="fa-solid fa-xmark"></i></a>
                 </div>
             </div>
-            <span class="ruby-dropdown-toggle"></span>
-        </li>
-        <li class="ruby-menu-mega-shop"><a href="#" class="nav_item" item_id="106633220000002">Accessories</a>
-        <div style="height: 175px;" class="border-top shadow py-2" data_txt="Accessories">
-            <div class="ruby-row">
-                <ul class="d-flex justify-content-center list-inline mb-lg-2">
-                    <li class="mx-3">
-                        <a class="dropdown-item ram_data cursor-pointer" href="../ramproducts.html" accessories_id="106633220000007">
-                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                                <img src="../dist/assets/imgs/Navbar/ram_img.png" alt="Laptop-img" class="h-120p img-fluid mx-auto">
-                            </div>
-                            <div class="dropdown-item-content">
-                                <h6 class="dropdown-item-title text-center satoshi_font px-2">RAM</h6>
-                            </div>
-                        </a>
-                    </li>
-                    <li class="mx-3">
-                        <a class="dropdown-item" href="../storageproducts.html">
-                            <div class="dropdown-item-img text-center mb-2 hover-zoom">
-                                <img src="../dist/assets/imgs/Navbar/ora3_ram.png" alt="Laptop-img" class="h-120p img-fluid mx-auto">
-                            </div>
-                            <div class="dropdown-item-content">
-                                <h6 class="dropdown-item-title text-center satoshi_font px-2">Storage</h6>
+               
+                <div class="mobile-menu-content-area sidebar-content-100-percent pt-3">
+                    <div class="mobile-search d-none">
+                        <form class="search-form" action="#">
+                            <input type="text" placeholder="Search here…" class="satoshi_font">
+                            <button class="button-search"><i class="fa-solid fa-magnifying-glass"></i></button>
+                        </form>
+                    </div>
+                    <div class="clickable-mainmenu-wrap clickable-mainmenu-style1">
+                        <nav>
+                            <ul class="pl-0">
+                                <li class=""><a href="./ramproducts.html" class="satoshi_font">RAM</a></li>
+                                <li class=""><a href="./storageproducts.html" class="satoshi_font">STORAGE</a></li>
+                                <li class=""><a href="./support.html" class="satoshi_font" >SUPPORT</a></li>
+                                <li class=""><a href="./press.html" class="satoshi_font">PRESS</a></li>
+                                <li class=""><a href="./index1.html" class="satoshi_font">COMING SOON</a></li>
+                                <li class=""><a href="./contact.html" class="satoshi_font">CONTACT</a></li>
+                            </ul>
+                        </nav>
+                    </div>
+                    <div class="mobile-curr-lang-wrap d-none">
+                        <div class="single-mobile-curr-lang">
+                            <a class="mobile-language-active" href="#">Language <i class="icofont-simple-down"></i></a>
+                            <div class="lang-curr-dropdown lang-dropdown-active">
+                                <ul>
+                                    <li><a href="#">English</a></li>
+                                    <li><a href="#">Spanish</a></li>
+                                    <li><a href="#">Hindi </a></li>
+                                </ul>
                             </div>
-                        </a>
-                    </li>
-                </ul>
+                        </div>
+                    </div>
+                    <div class="aside-contact-info d-none">
+                        <ul>
+                            <li><i class="icofont-clock-time"></i>Monday - Friday: 9:00 - 19:00</li>
+                            <li><i class="icofont-envelope"></i>Info@example.com</li>
+                            <li><i class="icofont-stock-mobile"></i>(+55) 254. 254. 254</li>
+                            <li><i class="icofont-home"></i>Helios Tower 75 Tam Trinh Hoang - Ha Noi - Viet Nam</li>
+                        </ul>
+                    </div>
+                </div>
             </div>
-        </div>
-        <span class="ruby-dropdown-toggle"></span>
-        </li>
-        <li class="ruby-menu-right">
-        <a class="" href="#">Support</a>
-        </li>
-      </ul>
-      </div>
-      <div class="col-3 justify-content-end">
-        <ul class="d-flex align-items-center ruby-menu justify-content-end">
-            <li class="ruby-menu-right mx-2">
-                <img src="../dist/assets/imgs/Navbar/support-01-03.svg" class="col_sign" style="width:25px">
-                <ul class="border-top shadow">
-                    <li><a href="#">Sign In</a></li>
-                    <li><a href="#">Sign Up</a></li>
-                </ul>
-                <span class="ruby-dropdown-toggle"></span>
-            </li>
-            <li class="ruby-menu-right mx-2">
-            <a href="shopping-cart.html" class="p-0">
-                <img src="../dist/assets/imgs/Navbar/support-01-04.svg" class="col_sign" style="width:100%;max-width:24px;">
-            </a>
-            </li>
-           <!-- <li class="ruby-menu-right  mx-2">
-                <a class="btn btn-dark text-white py-2 pr-3 button_dark" href="#">Get in touch</a>
-            </li>-->
-        </ul>
-      </div>
-    </div>
         </div>`;
-    $(".biz-nav-wrapper").after(navhtml);
-    //$("#navbar-head").html(navbarHtml);
-    $(".navbar-toggler").click(function () {
-        $("#navbar-head").toggleClass("bg-white");
-    })
+$("#navbar-head").html(nav_html);
+let width = $(window).width();
+$(".menu-negative-mrg2,.menu-negative-mrg3,.menu-negative-mrg4").css("width",width);
+ let ele_page = $("body").hasClass("product_pg");
+ if(ele_page == true){
+   $(".header-area").removeClass("bg-white");
+   $(".main-menu").find("nav ul li a").addClass("text-white");
+   $(".header-bottom.sticky-bar").removeClass("sticky-bar");
+   let src =`../dist/assets/imgs/anwi-logo-2.png`;
+    $(".logo-menu-wrap").find("a img").attr("src",src);
+    $(".main-body").find("iframe").attr("width",width);
+    if (width <= 575 && width >= 390) {
+       $(".main-body").find("iframe").attr({
+          width: width,
+          height: 236,
+        })
+      } else if(width <= 390 && width >= 270){
+       $(".main-body").find("iframe").attr({
+          width: width,
+          height: 210,
+        });
+      } else if (width <= 998 && width > 575) {
+       $(".main-body").find("iframe").attr({
+          width: width,
+          height: 530,
+        });
+      } else if(width <= 2720 && width > 1920){
+        $(".main-body").find("iframe").attr({
+            width: width,
+            height: 1440,
+          });
+      }else {
+       $(".main-body").find("iframe").attr({
+          width: width,
+          height: 860,
+        });
+      }
+ }
 
-    $('.pricing').find('.biz-nav-wrapper .navbar').addClass('bg-white');
 
-    //  active-menu
-    if (location.pathname != "/") {
-        // Main Nav
-        $(".navbar-nav li a").each(function () {
-            if (this.href === location.href) {
-                $(this).addClass("active");
-                if ($(this).parents().hasClass("nav-item")) {
-                    $(this).parents(".nav-item").find(".nav-link").addClass("active");
-                }
-                return false;
-            }
-        });
+$("a.ram_data").click(function () {
+    let item_id = $(this).attr("accessories_id");
+    let loc_path = '/products.html'
+    if (window.location.pathname.includes(loc_path)) {
+        window.location.href = `?itemid=${item_id}`
     }
+    else {
+        window.location.href = `/products.html#itemid=${item_id}`;
+    }
+})
 
-    // Add Dropdown chevron icon
-    let width = $(window).width();
-
-    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');
-        $(".biz-nav-wrapper").removeClass("d-none");
-        $(".ruby-menu-demo-header").addClass("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()
+$(".main-menu nav ul").find("li").each(function(){
+    var current = window.location.pathname;
+    var $this = $(this).find("a");
+    if(current != "/"){
+        if($this.attr('href').indexOf(current) !== -1){
+            $(this).addClass('active_nav');
+        }
     }
-    // Toggle Icon Change
-    $(".biz-nav-wrapper .navbar-toggler").click(function () {
-        $(this).find(".navbar-toggler-icon,.navbar-close-icon").toggle("slow");
-        $(".index-new").find(".navbar").toggleClass("bg-white");
-    });
+    
+})
 
-    $(".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
-            );
-        }
-    });
+// destroy localstorage data
+let loc_path = '/productdetails.html';
+if (window.location.pathname.includes(loc_path) === false) {
+    localStorage.removeItem("product_data");
+    localStorage.removeItem("top_data")
+}
 
-    var scroll_start = 0;
-    var startchange = $(".main-body");
-    var offset = startchange.offset();
-    $("#navbar-head")
-        .find(".navbar").addClass("bg-white");
-    if (startchange.length) {
-        $(document).scroll(function () {
-            scroll_start = $(this).scrollTop();
-            if (scroll_start > offset.top) {
-                $("#navbar-head")
-                    .find(".navbar")
-                    .css("background-color", "#fff")
-                    .css("box-shadow", "0px 12px 20px -25px");
-            } else {
-                $("#navbar-head")
-                    .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 {
-        $("#navbar-head")
-            .find(".navbar")
-            .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
-            }
-        }
-    });
+//services pages links and sources
 
-    $(".ruby-menu").find(".nav_item").each(function () {
-        $(this).click(function () {
-            let item_id = $(this).attr("item_id");
-            let loc_path = '/products.html'
-            if (window.location.pathname.includes(loc_path)) {
-                window.location.href = `?products`
-            }
-            else {
-                window.location.href = `/products.html?products`;
+let $body_pg = $("body").hasClass("services_page");
+let $hm_pg = "../index.html";
+let $nav_img ="../dist/assets/imgs/anwi-logo-1.png";
+let $footer_img = "../dist/assets/imgs/anwi-logo-2.png";
+let $scrool_top_img = "../dist/assets/imgs/Home/rocket-footer.png";
+
+if($body_pg == true){
+$(".header-large-device").find(".logo-menu-wrap .logo").find("a").attr("href",$hm_pg);
+$(".header-large-device").find(".logo-menu-wrap .logo").find("a img").attr("src",$nav_img);
+$(".mobile-logo").find("a").attr("href",$hm_pg);
+$(".mobile-logo").find("a img").attr("src",$nav_img);
+    $(".main-menu").find("nav ul").find("li a").each(function(){
+        let $arc = $(this).attr("href");
+        let $spcial_char = $arc.includes("./");
+        if($spcial_char === true){
+            let $refarence = `.${$arc}`
+            $(this).attr("href",$refarence);
+        }
+        $(".same-style").find("a").each(function(){
+            let $arc1 = $(this).attr("href");
+            let $spcial_char1 = $arc1.includes("./");
+            if($spcial_char1 === true){
+                let $refarence1 = `.${$arc1}`
+                $(this).attr("href",$refarence1);
             }
         })
     });
-
-    $("a.ram_data").click(function () {
-        let item_id = $(this).attr("accessories_id");
-        let loc_path = '/products.html'
-        if (window.location.pathname.includes(loc_path)) {
-            window.location.href = `?itemid=${item_id}`
-        }
-        else {
-            window.location.href = `/products.html?itemid=${item_id}`;
+    $(".clickable-mainmenu-wrap").find("nav ul").find("li a").each(function(){
+        let $arc_mbil = $(this).attr("href");
+        let $spcial_char_mbil = $arc_mbil.includes("./");
+        if($spcial_char_mbil === true){
+            let $refarence_mbil = `.${$arc_mbil}`
+            $(this).attr("href",$refarence_mbil);
         }
-    })
-
-    // destroy localstorage data
-    let loc_path = '/productdetails.html';
-    if (window.location.pathname.includes(loc_path) === false) {
-        localStorage.removeItem("product_data")
-    }
-});
+    });
+}

dist/css/main.css

@@ -1091,7 +1091,7 @@ html,body{
 
 /* ORDER DETAILS */
 .bg-return{
-    background-color: #d0f5ff  !important;
+    background-color: #f7f0e1 !important;
 }
 .close_exchange{
     bottom:10px;
@@ -1106,7 +1106,7 @@ html,body{
     font-size: 1rem !important;
 }
 .order-summary{
-    background-color:#c8ebff !important;
+    background-color:#f3e2be !important;
 }
 .fs-7{
     font-size: 0.7rem;
@@ -1513,8 +1513,12 @@ display: none;
     background: linear-gradient(112.1deg, rgb(63, 76, 119) -14.8% , rgb(32, 38, 57) 100.4%);
   }
   .bg-gradient-violet{
-    background: linear-gradient(90deg, rgba(230,242,244,1) 6%, rgba(236,228,220,1) 100%);
-  }
+    /* background: linear-gradient(90deg, rgba(230,242,244,1) 6%, rgba(236,228,220,1) 100%);
+     */
+    background:url(../assets/imgs/login_bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+}
   @media only screen and (min-width: 769px) and (max-width: 1199px) {
   span.transform_text2 {
     position: absolute;
@@ -1596,19 +1600,315 @@ display: none;
     background: rgb(22,62,96);
 background: linear-gradient(75deg, rgb(56 89 118) 51%, rgb(107 18 111) 89%)
 }
-.same-style a{
-    font-size:12px !important;
-    font-weight:600 !important;
-}
-.fs-60 {
-    font-size: 60px !important;
-    padding: 40px 0px !important;
-}
-.Order_details_section{
-    position: sticky;
-    top: 120px;
-}
-.primary_btn{
-    background: #0A1039 !important;
-    color: #fff !important;
-}
+/*Text neon */
+.neon {
+    text-shadow:
+      0 0 0px #fff,
+      0 0 0px #fff,
+      0 0 0px #ff9300,
+      0 0 1px #ff9300,
+      0 0 10px #ff9300,
+      0 0 10px #ff9300,
+      0 0 0px #ff9300;
+  }
+  /* .neon-orange {
+    text-shadow:
+      0 0 0px #fff,
+      0 0 0px #fff,
+      0 0 0px #b2674e,
+      0 0 1px #b2674e,
+      0 0 10px #b2674e,
+      0 0 10px #b2674e,
+      0 0 0px #b2674e;
+  }
+  .neon-blue {
+    text-shadow:
+      0 0 0px #fff,
+      0 0 0px #fff,
+      0 0 0px #3b6ec9,
+      0 0 1px #3b6ec9,
+      0 0 10px #3b6ec9,
+      0 0 10px #3b6ec9,
+      0 0 0px #3b6ec9;
+  }
+  .neon-purple {
+    text-shadow:
+      0 0 0px #fff,
+      0 0 0px #fff,
+      0 0 0px #885bce,
+      0 0 1px #885bce,
+      0 0 10px #885bce,
+      0 0 10px #885bce,
+      0 0 0px #885bce;
+  } */
+  section.graphene_img_section {
+    height: 100vh;
+    background-attachment: fixed !important;
+    background-repeat: no-repeat !important;
+    background-size: cover !important;
+  }
+  section#graphene_section {
+    padding-top: 50px;
+  }
+  .main-text{
+    background: linear-gradient(270deg, #f6940c 50%, #ff9300 50%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 40px; 
+  }
+  .item-title {
+    font-size: 16px;
+    font-weight: 500;
+    padding: 20px 0px;
+  }
+  
+  /*button*/
+  .buy-now {
+    border-radius: 4px;
+    /* background-color: #f4511e; */
+    border: none;
+    color: #FFFFFF;
+    text-align: center;
+    padding: 5px 15px;
+    width: 120px;
+    transition: all 0.5s;
+    cursor: pointer;
+    margin: auto;
+  }
+  
+  .butbuy-nowton span {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    transition: 0.5s;
+  }
+  
+  .buy-now span:after {
+    content: '\00bb';
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: 20px;
+    transition: 0.5s;
+  }
+  
+  .buy-now:hover span {
+   border-bottom: solid 1px white;
+  }
+  
+  .buy-now:hover span:after {
+    opacity: 1;
+    right: 0;
+  }
+  .buy-now{
+    background:#5782ce !important;
+    color:white;
+  }
+  @media (min-width:320px) and (max-width:1198px){
+    section.graphene_img_section {
+      height: 200px;
+      background-attachment: initial !important;
+      background-repeat: no-repeat !important;
+      background-size: 100% !important;
+    }
+    .main-text {
+      background: linear-gradient(270deg, #f4a73c 50%, #ff9300 50%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-size: 24px;
+  }
+  }
+  .footer-wrapper{
+    background-image: linear-gradient(145deg,rgb(33,37,41,0.9),rgb(33,37,41,0.9)),url(../assets/imgs/home/h1.jpg);
+  }
+  
+  .orangeWrapper {
+    padding:0;
+  }
+  .card-item-header {
+    width: 80%;
+    margin: auto;
+    margin-top: -90px;
+  }
+  .row.product_card_section {
+    padding-top: 100px;
+  }
+  
+  .card-header-sub-1, .card-header-sub-2, .card-header-sub-3 {
+    border-radius: 20px;
+    height: 180px;
+  }
+  .card-item-header .card-header-sub-1 {
+    background-image: url(../assets/imgs/Home_new/Explore_Fyro_bg.png);
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+  .product_card_1 .card-item-body:hover h3 a{
+  color:#ff9300;
+  }
+  .product_card_2 .card-item-body:hover h3 a{
+    color:#5d87d0;
+  }
+  .product_card_3 .card-item-body:hover h3 a{
+    color:#9973d4;
+  }
+  .product_card_1 .card-item-body:hover .card_product_footer a{
+    color:#ff9300;
+    }
+    .product_card_2 .card-item-body:hover .card_product_footer a{
+      color:#5d87d0;
+    }
+    .product_card_3 .card-item-body:hover .card_product_footer a{
+      color:#9973d4;
+    }
+  .card-item-body p {
+    color: #212529;
+    margin-bottom: 1px;
+    font-size: 15px;
+  }
+  .card-item-body {
+    padding: 50px;
+    height: 320px; 
+  }
+  .shadow:hover{
+    box-shadow: rgba(0, 0, 0, 0.15) 10px 1rem 1rem !important;
+  }
+  .card_product_footer{
+    position: absolute;
+    bottom:5px;
+  }
+  .card_product_footer a{
+    font-weight: 500;
+  }
+  .product_card_1 {
+    border: 1px solid rgb(204, 204, 204,0.1);
+    border-radius: 10px;
+    background: #8e9eab;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #f8f8f8, #f8f8f8);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #f8f8f8, #f8f8f8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    position: relative;
+  }
+  .product_card_1:hover img{
+    transform: scale(1.3);
+  }
+  .product_card_2 {
+    border: 1px solid rgb(204, 204, 204,0.1);
+    border-radius: 10px;
+    background: #8e9eab;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #f8f8f8, #f8f8f8);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #f8f8f8, #f8f8f8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    position: relative;
+  }
+  .product_card_2:hover img{
+    transform: scale(1.2);
+  }
+  .product_card_2:hover .card-item-footer{
+    display: block;
+     animation: fadeIn 0.8s; 
+  }
+  .card-item-header .card-header-sub-2 {
+    background-image: url(../assets/imgs/allin_imgs/laptop_bg.png);
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+  .product_card_3 {
+    border: 1px solid rgb(204, 204, 204,0.1);
+    border-radius: 10px;
+    background: #8e9eab;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #f8f8f8, #f8f8f8);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #f8f8f8, #f8f8f8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    position: relative;
+  }
+  .product_card_3:hover img{
+    transform: scale(1.2);
+  }
+  .product_card_3:hover .card-item-footer{
+    display: block;
+     animation: fadeIn 0.8s; 
+  }
+  .card-item-header .card-header-sub-3 {
+    background-image: url(../assets/imgs/allin_imgs/desktop_bg.png);
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+  .product_card_section h6 {
+    font-size: 14px;
+  }
+  #pills-tabContent .col-sm-4{
+    margin-top:100px;
+  }
+  #pills-tabContent .product_card_section{
+    padding-top:0px;
+  }
+  .theme-btn {
+      position: relative;
+      z-index: 2;
+      overflow: hidden;
+      vertical-align: middle;
+      display: inline-block;
+      border: none;
+      text-transform: capitalize;
+      text-align: center;
+      background-color: #202639 !important;
+      color: white !important;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 1;
+      padding: 20.5px 29px;
+      box-shadow: 0px 6px 16px rgba(13, 94, 244, 0.24);
+      border-radius: 5px;
+  }
+  .theme-btn:before {
+      content: "";
+      position: absolute;
+      height: 0%;
+      left: 50%;
+      top: 50%;
+      width: 600%;
+      background-color: #142c8e !important;
+      -webkit-transform: translateX(-50%) translateY(-50%) rotate(60deg);
+      -ms-transform: translateX(-50%) translateY(-50%) rotate(60deg);
+      transform: translateX(-50%) translateY(-50%) rotate(60deg);
+      z-index: -1;
+      -webkit-transition: 0.7s ease;
+      transition: 0.7s ease;
+  }
+  .theme-btn:hover, .theme-btn.active {
+      color: var(--white-color);
+  }
+  .or_line{
+          width: 100%; 
+          text-align: center; 
+          border-bottom: 1px solid #ccc; 
+          line-height: 0.1em;
+          line-height: 0 !important;
+      font-size: 16px !important;
+      
+  }    
+  .or_line span { 
+           background:#fff; 
+           padding:0 10px; 
+  }
+  .bg-gradient-anwi-outline{
+      border:solid 2px #142c70 !important;
+      color:#142c70 !important;
+      background: linear-gradient(145deg,rgb(255,255,255,0.9),rgb(255,255,255));
+  }
+  .bg-gradient-anwi-outline:hover{
+      background: linear-gradient(145deg,rgb(27,45,83,0.9),rgb(10,19,34)) !important;
+      border:solid 2px rgb(10,19,34)!important;
+      color:white !important;
+  }
+  .main-menu.menu-lh-1 > ul > li >a{
+    line-height: 50px;
+  }
+  
+    .banner-main-container .carousel_img {
+      height: 100%;
+      min-height: 100%;
+      max-height: 100% !important;
+    } 
+

dist/css/style.css

@@ -3794,7 +3794,7 @@ margin-bottom: 0.5rem !important;
 
 .header-action-wrap .same-style a {
   font-size: 20px;
-  color: #0A1039;
+  color: #fff;
 }
 
 .header-action-wrap .same-style a:hover {
@@ -4069,8 +4069,8 @@ margin-bottom: 0.5rem !important;
     position: absolute;
     bottom: -1px;
     left: -10px;
-    background: rgb(63, 76, 119);
-    height: 4px;
+    background: rgb(63, 76, 119,0.5);
+    height: 1px;
     width: 100%;
     z-index: 200;
     transition: all 200ms cubic-bezier(0.5, 0.15, 0, 1);
@@ -4082,8 +4082,8 @@ margin-bottom: 0.5rem !important;
   position: absolute;
   bottom: -1px;
   left: -10px;
-  background: rgb(63, 76, 119);
-  height: 3px;
+  background: rgb(63, 76, 119,0.5);
+  height: 2px;
   width: 100%;
   z-index: 200;
   transition: all 200ms cubic-bezier(0.5, 0.15, 0, 1);
@@ -4092,12 +4092,26 @@ margin-bottom: 0.5rem !important;
 }
 .main-menu > nav > ul > li > a {
   font-size: 12px;
-  color: #060A27;
+  color: #fff;
   display: inline-block;
   font-weight: 600;;
 }
-
-
+.header-bottom.sticky-bar.stick .main-menu > nav > ul > li > a {
+  font-size: 12px;
+  color: #0A1039;
+  display: inline-block;
+  font-weight: 600;;
+}
+.header-bottom.sticky-bar.stick .header-action-wrap .same-style a {
+  font-size: 20px;
+  color: rgb(10, 16, 57);
+}
+/* .sticky-bar.stick .main-menu > nav > ul > li > a {
+  font-size: 12px;
+  color: #fff;
+  display: inline-block;
+  font-weight: 600;;
+} */
 .main-menu > nav > ul > li:hover > a {
   color: #0A1039;
 }
@@ -4508,7 +4522,7 @@ margin-bottom: 0.5rem !important;
 
 @media only screen and (min-width: 1366px) and (max-width: 1600px) {
   .main-menu.main-menu-padding-1 > nav > ul > li {
-    padding: 0 20px 0 0;
+    margin: 0 20px 0 0;
   }
 }
 
@@ -31615,10 +31629,10 @@ h4.checkout-title::before {
   }
 } */
 
-.sticky-bar{
-  /* border-bottom: 1px solid #f9f9f9 !important; */
-  /* box-shadow: 0 3px 6px 0 rgba(0,0,0,.2) !important; */
-}
+/* .sticky-bar{
+  border-bottom: 1px solid #f9f9f9 !important;
+  box-shadow: 0 3px 6px 0 rgba(0,0,0,.2) !important;
+} */
 
 .order_details_btn {
   width: 180px;

index.html

@@ -74,19 +74,19 @@
             <!-- banner-start -->
             <section class="banner-wrapper" id="home_banner">
                 <div class="banner-main-container">
-                    <div id="carouselExampleAutoplaying" class="carousel slide pt-1" data-bs-ride="carousel">
+                    <div id="carouselExampleAutoplaying" class="carousel slide " data-bs-ride="carousel">
                         <div class="carousel-indicators mb-md-5">
                             <button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="0"
                                 class="active carousel_btn" aria-current="true" aria-label="Slide 1"></button>
                             <button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="1"
                                 aria-label="Slide 2" class="carousel_btn"></button>
                         </div>
-                        <div class="carousel-inner pt-md-5 pt-5">
-                            <div class="carousel-item active pt-1" id="carousel_item1">
+                        <div class="carousel-inner">
+                            <div class="carousel-item active" id="carousel_item1">
                                 <img src="./dist/assets/imgs/allin_imgs/oradesktop.png"
                                     class="d-block mx-auto w-100 carousel_img" alt="...">
                             </div>
-                            <div class="carousel-item  pt-1" id="carousel_item4">
+                            <div class="carousel-item " id="carousel_item4">
                                 <img src="./dist/assets/imgs/allin_imgs/oranvme.png" class="d-block w-100 mx-auto carousel_img"
                                     alt="...">
                             </div>

index1.html

@@ -39,25 +39,25 @@
     <!-- end-navbar -->
     <!-- main-body -->
     <main class="main-body home-main-container">
-        <section class="hero-banner mt-md-2">
+        <section class="hero-banner">
             <!-- banner-start -->
             <section class="banner-wrapper" id="home_banner">
                 <div class="banner-main-container ">
-                    <div id="carouselExampleAutoplaying" class="carousel slide  pt-1" data-bs-ride="carousel">
+                    <div id="carouselExampleAutoplaying" class="carousel slide " data-bs-ride="carousel">
                         <div class="carousel-indicators">
                             <button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="0" class="active carousel_btn" aria-current="true" aria-label="Slide 1"></button>
                             <button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="1" aria-label="Slide 2" class="carousel_btn"></button>
                             <!-- <button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="2" aria-label="Slide 3" class="carousel_btn"></button>
                             <button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="3" aria-label="Slide 4" class="carousel_btn"></button> -->
                         </div>
-                        <div class="carousel-inner pt-md-5 pt-5">
-                            <div class="carousel-item active pt-1" id="carousel_item1">
+                        <div class="carousel-inner">
+                            <div class="carousel-item active" id="carousel_item1">
                                 <img src="./dist/assets/imgs/allin_imgs/allinonebanner.jpg" class="d-block w-100 carousel_img" alt="...">
                             </div>
                             <!-- <div class="carousel-item  pt-1" id="carousel_item2">
                                 <img src="./dist/assets/imgs/allin_imgs/oradesktop.png" class="d-block w-100 carousel_img" alt="...">
                             </div> -->
-                            <div class="carousel-item  pt-1" id="carousel_item3">
+                            <div class="carousel-item " id="carousel_item3">
                                 <img src="./dist/assets/imgs/allin_imgs/sleekbookbanner.jpg" class="d-block w-100 carousel_img" alt="...">
                             </div>
                             <!-- <div class="carousel-item  pt-1" id="carousel_item4">

login.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.theme.default.min.css" />
     <link rel="stylesheet" href="./dist/css/login.css" />
     <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css" />
+    <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css" />
     <link rel="stylesheet" href="./dist/css/vendor/vandella.css" />
     <link rel="stylesheet" href="./dist/css/vendor/jellybelly.css" />
     <link rel="stylesheet" href="./dist/css/vendor/fontello.css" />
@@ -28,7 +29,7 @@
     <!-- <link rel="stylesheet" href="./dist/css/fontawesome.min.css" /> -->
     <!-- <link rel="stylesheet" href="./libs/toaster/toastr.js" /> -->
     <link rel="stylesheet" href="./dist/toaster/toastr.css" />
-    <title>Login | Anwi</title>
+    <title>Anwi</title>
 
     <style>
         html {
@@ -47,405 +48,171 @@
     <!-- end-navbar -->
     <!-- main-body -->
     <section class="mainLogin h-100 mt-0 myaccount-content p-0">
-        <div
-            class="loginContainer mainLogin bg-gradient-violet mt-0 pt-md-5 h-100 satoshi_font d-flex align-items-center">
-            <div class="container">
-                <div class="spinner d-flex justify-content-center align-items-center">
-                    <div class="spinner-border d-none" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
+        <div class="container">
+            <div class="spinner d-flex justify-content-center align-items-center">
+                <div class="spinner-border d-none" role="status">
+                    <span class="visually-hidden">Loading...</span>
                 </div>
-                <div class="row justify-content-center">
-                    <div>
-                        <div class="bg-white rounded-3 authBox mx-auto p-5">
-                            <div class="text-warning fs-9 fw-500 error-div" style="display: none;">
-                                <svg class="svg-inline--fa fa-arrow-circle-o-left font-30 pb-1" aria-hidden="true"
-                                    focusable="false" data-prefix="fas" data-icon="arrow-circle-o-left" role="img"
-                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
-                                    <g class="missing">
-                                        <path fill="currentColor"
-                                            d="M156.5,447.7l-12.6,29.5c-18.7-9.5-35.9-21.2-51.5-34.9l22.7-22.7C127.6,430.5,141.5,440,156.5,447.7z M40.6,272H8.5 c1.4,21.2,5.4,41.7,11.7,61.1L50,321.2C45.1,305.5,41.8,289,40.6,272z M40.6,240c1.4-18.8,5.2-37,11.1-54.1l-29.5-12.6 C14.7,194.3,10,216.7,8.5,240H40.6z M64.3,156.5c7.8-14.9,17.2-28.8,28.1-41.5L69.7,92.3c-13.7,15.6-25.5,32.8-34.9,51.5 L64.3,156.5z M397,419.6c-13.9,12-29.4,22.3-46.1,30.4l11.9,29.8c20.7-9.9,39.8-22.6,56.9-37.6L397,419.6z M115,92.4 c13.9-12,29.4-22.3,46.1-30.4l-11.9-29.8c-20.7,9.9-39.8,22.6-56.8,37.6L115,92.4z M447.7,355.5c-7.8,14.9-17.2,28.8-28.1,41.5 l22.7,22.7c13.7-15.6,25.5-32.9,34.9-51.5L447.7,355.5z M471.4,272c-1.4,18.8-5.2,37-11.1,54.1l29.5,12.6 c7.5-21.1,12.2-43.5,13.6-66.8H471.4z M321.2,462c-15.7,5-32.2,8.2-49.2,9.4v32.1c21.2-1.4,41.7-5.4,61.1-11.7L321.2,462z M240,471.4c-18.8-1.4-37-5.2-54.1-11.1l-12.6,29.5c21.1,7.5,43.5,12.2,66.8,13.6V471.4z M462,190.8c5,15.7,8.2,32.2,9.4,49.2h32.1 c-1.4-21.2-5.4-41.7-11.7-61.1L462,190.8z M92.4,397c-12-13.9-22.3-29.4-30.4-46.1l-29.8,11.9c9.9,20.7,22.6,39.8,37.6,56.9 L92.4,397z M272,40.6c18.8,1.4,36.9,5.2,54.1,11.1l12.6-29.5C317.7,14.7,295.3,10,272,8.5V40.6z M190.8,50 c15.7-5,32.2-8.2,49.2-9.4V8.5c-21.2,1.4-41.7,5.4-61.1,11.7L190.8,50z M442.3,92.3L419.6,115c12,13.9,22.3,29.4,30.5,46.1 l29.8-11.9C470,128.5,457.3,109.4,442.3,92.3z M397,92.4l22.7-22.7c-15.6-13.7-32.8-25.5-51.5-34.9l-12.6,29.5 C370.4,72.1,384.4,81.5,397,92.4z">
-                                        </path>
-                                        <circle fill="currentColor" cx="256" cy="364" r="28">
-                                            <animate attributeType="XML" repeatCount="indefinite" dur="2s"
-                                                attributeName="r" values="28;14;28;28;14;28;"></animate>
-                                            <animate attributeType="XML" repeatCount="indefinite" dur="2s"
-                                                attributeName="opacity" values="1;0;1;1;0;1;"></animate>
-                                        </circle>
-                                        <path fill="currentColor" opacity="1"
-                                            d="M263.7,312h-16c-6.6,0-12-5.4-12-12c0-71,77.4-63.9,77.4-107.8c0-20-17.8-40.2-57.4-40.2c-29.1,0-44.3,9.6-59.2,28.7 c-3.9,5-11.1,6-16.2,2.4l-13.1-9.2c-5.6-3.9-6.9-11.8-2.6-17.2c21.2-27.2,46.4-44.7,91.2-44.7c52.3,0,97.4,29.8,97.4,80.2 c0,67.6-77.4,63.5-77.4,107.8C275.7,306.6,270.3,312,263.7,312z">
-                                            <animate attributeType="XML" repeatCount="indefinite" dur="2s"
-                                                attributeName="opacity" values="1;0;0;0;0;1;"></animate>
-                                        </path>
-                                        <path fill="currentColor" opacity="0"
-                                            d="M232.5,134.5l7,168c0.3,6.4,5.6,11.5,12,11.5h9c6.4,0,11.7-5.1,12-11.5l7-168c0.3-6.8-5.2-12.5-12-12.5h-23 C237.7,122,232.2,127.7,232.5,134.5z">
-                                            <animate attributeType="XML" repeatCount="indefinite" dur="2s"
-                                                attributeName="opacity" values="0;0;1;1;0;0;"></animate>
-                                        </path>
-                                    </g>
-                                </svg>
-                            </div>
-                            <ul class="nav nav-pills mb-3 justify-content-center border rounded-3" id="pills-tab"
-                                role="tablist">
-                                <li class="nav-item w-50" role="presentation">
-                                    <button class="nav-link active w-100" id="pills-login-tab" data-bs-toggle="pill"
-                                        data-bs-target="#pills-login" type="button" role="tab"
-                                        aria-controls="pills-login" aria-selected="true">Login</button>
-                                </li>
-                                <li class="nav-item w-50" role="presentation">
-                                    <button class="nav-link w-100" id="pills-registration-tab" data-bs-toggle="pill"
-                                        data-bs-target="#pills-registration" type="button" role="tab"
-                                        aria-controls="pills-registration" aria-selected="false">Signup</button>
-                                </li>
-                            </ul>
-                            <div class="tab-content" id="pills-tabContent">
-                                <div class="tab-pane fade show active" id="pills-login" role="tabpanel"
-                                    aria-labelledby="pills-login-tab" tabindex="0">
-                                    <form id="login_form">
-                                        <div class="login-email-password-div">
-                                            <div class="input-group has-validation email-login-inputgroup">
-                                                <div class="form-floating py-0">
-                                                    <input type="email" class="form-control shadow-none h-50p"
-                                                        id="User_Email" placeholder="Enter Your Email"
-                                                        autocomplete="off">
-                                                    <label for="User_Email">Email address</label>
-                                                </div>
-                                                <div class="invalid-feedback">
-                                                    Please enter your email.
-                                                </div>
-                                            </div>
-                                            <div class="input-group has-validation mt-3 password-login-inputgroup">
-                                                <div class="form-floating py-0" id="password-input-div">
-                                                    <input type="password" class="form-control shadow-none h-50p"
-                                                        id="User_password" placeholder="Password"
-                                                        autocomplete="no password">
-                                                    <label for="User_password">Password</label>
-                                                </div>
-                                                <div class="invalid-feedback">
-                                                    Please enter your password.
-                                                </div>
-                                            </div>
-                                            <div class="mt-1">
-                                                <a href="#" class="text-theme-color fs-9 fw-500"
-                                                    id="forgotPassword">Forgot password?</a>
-                                            </div>
-                                            <div class="fs-7 mt-2 satoshi_font">
-                                                By continuing, I agree to the
-                                                <a href="#"
-                                                    class="text-theme-color text-decoration-underline fs-7 fw-600">Terms
-                                                    of
-                                                    Use</a>
-                                                &amp;
-                                                <a href="#"
-                                                    class="text-theme-color text-decoration-underline fs-7 fw-600">Privacy
-                                                    Policy</a>
-                                            </div>
-                                            <div class="mt-3 ">
-                                                <div>
-                                                    <div class="btn bg-gradient-anwi w-100 loader-btn"
-                                                        style="display: none;">
-                                                        <span class="loader"></span>
-                                                    </div>
-                                                    <a href="#" class="btn bg-gradient-anwi w-100 fw-500" id="Login_btn"
-                                                        type="submit">Login</a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="login-forgot-password-div" style="display:none">
-                                            <div
-                                                class="font-16 d-flex justify-content-end font-w600 text-darkgrey w-100 backtologin">
-                                                <!-- <span>Forgot Password?</span> -->
-                                                <a href="./login.html" class="" id="forgot_Password_Back"><span
-                                                        class=" cursor-pointer text-center d-flex align-items-center"><i
-                                                            class="fa-solid fa-arrow-left"></i></span></a>
-                                            </div>
-                                            <div class="email-validation">
-                                                <div class="font-14 w-100">Please enter your email address.
-                                                </div>
-                                                <div class="input-group has-validation forgot-password-inputgroup">
-                                                    <div class="form-floating py-0">
-                                                        <input type="email" class="form-control shadow-none h-50p"
-                                                            id="forgot_User_Email" placeholder="Enter Your Email"
-                                                            autocomplete="off">
-                                                        <label for="forgot_User_Email">Email address</label>
-                                                    </div>
-                                                    <div class="invalid-feedback">
-                                                        Please enter your email.
-                                                    </div>
-                                                </div>
-                                                <div class="mt-3">
-                                                    <div>
-                                                        <div class="btn bg-gradient-anwi w-100 loader-btn"
-                                                            style="display: none;">
-                                                            <span class="loader"></span>
-                                                        </div>
-                                                        <a href="#" class="btn bg-gradient-anwi w-100 text-white fw-500"
-                                                            id="forgot_password_submit" type="submit">Submit</a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="otp-validation">
-                                                <div class="otp-input-group mt-3" style="display: none;">
-                                                    <div>
-                                                        <h4 class="text-center">Enter OTP</h4>
-                                                        <div class="text-center">we have sent an OTP to this Email
-                                                        </div>
-                                                        <p class="user_email text-center"></p>
-                                                        <div class="otp-sent-email fw-600 text-center"></div>
-                                                    </div>
-                                                    <div class="d-flex my-4">
-                                                        <div class="col">
-                                                            <div class="form-group">
-                                                                <input type="text" class="press form-control"
-                                                                    name="code" maxlength="1" tabindex="1"
-                                                                    autocomplete="off">
-                                                            </div>
-                                                        </div>
-
-                                                        <div class="col">
-                                                            <div class="form-group">
-                                                                <input type="text" class="press form-control"
-                                                                    name="code" maxlength="1" tabindex="2"
-                                                                    autocomplete="off">
-                                                            </div>
-                                                        </div>
-
-                                                        <div class="col">
-                                                            <div class="form-group">
-                                                                <input type="text" class="press form-control"
-                                                                    name="code" maxlength="1" tabindex="3"
-                                                                    autocomplete="off">
-                                                            </div>
-                                                        </div>
-
-                                                        <div class="col">
-                                                            <div class="form-group">
-                                                                <input type="text" class="press form-control"
-                                                                    name="code" maxlength="1" tabindex="4"
-                                                                    autocomplete="off">
-                                                            </div>
-                                                        </div>
-
-                                                        <div class="col">
-                                                            <div class="form-group">
-                                                                <input type="text" class="press form-control"
-                                                                    name="code" maxlength="1" tabindex="5"
-                                                                    autocomplete="off">
-                                                            </div>
-                                                        </div>
+            </div>
+        </div>
+        
+        <div class="loginContainer mainLogin bg-gradient-violet mt-0 pt-md-5 h-100 satoshi_font d-flex align-items-center">
+           
+            <div class="container">
+                <div class="row  justify-content-center">
+                    <div class="col-sm-4 ">
+                        <div class="card p-4 shadow rounded-3">
+                           <a href="index.html" class="text-center mx-auto   mb-5 mt-2"><img src="../dist/assets/imgs/anwi-logo-1.png" alt="logo" class="w-50"></a> 
+                            <div class="alert alert-danger error_msg " role="alert" style="font-size:12px;display:none"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.2646 3.41366C11.7212 3.15681 12.2788 3.15681 12.7354 3.41366L19.2354 7.06991C19.7077 7.33558 20 7.83536 20 8.37727V15.6227C20 16.1646 19.7077 16.6644 19.2354 16.9301L12.7354 20.5863C12.2788 20.8432 11.7212 20.8432 11.2646 20.5863L4.76461 16.9301C4.29229 16.6644 4 16.1646 4 15.6227V8.37727C4 7.83536 4.29229 7.33559 4.76461 7.06991L11.2646 3.41366Z" fill="#FF3A2E"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M11 7.4C11 7.17909 11.1791 7 11.4 7H12.6C12.8209 7 13 7.17909 13 7.4V12.6C13 12.8209 12.8209 13 12.6 13H11.4C11.1791 13 11 12.8209 11 12.6V7.4Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16Z" fill="white"></path></svg>
+                              <span class="error_msg_res" ></span> 
+                              </div>
 
-                                                        <div class="col">
-                                                            <div class="form-group">
-                                                                <input type="text" class="press form-control"
-                                                                    name="code" maxlength="1" tabindex="6"
-                                                                    autocomplete="off">
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                    <div>
-                                                        <div class="btn bg-gradient-anwi w-100 loader-btn"
-                                                            style="display: none;">
-                                                            <span class="loader"></span>
-                                                        </div>
-                                                        <a href="#" class="bg-gradient-anwi btn fw-500 text-white w-100"
-                                                            id="Forgot_pass_proceed" type="submit">CONFIRM</a>
-                                                    </div>
-                                                </div>
-                                            </div>
+                            <div class="login_section">
+                            <form id="login_form">
+                                <div class="login-email-password-div">
+                                    <div class="input-group has-validation email-login-inputgroup">
+                                        <div class="form-floating py-0">
+                                            <input type="email" class="form-control shadow-none h-50p"
+                                                id="User_Email" placeholder="Enter Your Email"
+                                                autocomplete="off">
+                                            <label for="User_Email">Email address</label>
                                         </div>
-
-                                        <div class="login-forgot-password-details-div" style="display:none">
-                                            <!-- <div
-                                                class="font-16 d-flex justify-content-between font-w600 text-darkgrey w-100 backtologin">
-                                            <span>Forgot Password?</span>
-                                                <a href="#" class=""
-                                                    id="forgot_Password_Details_Back"><span
-                                                        class=" cursor-pointer text-center d-flex align-items-center"><i
-                                                            class="fa-solid fa-arrow-left"></i></span></a>
-                                            </div> -->
-                                            <div class="font-14 w-100 password_display">Please Enter your New Password.
-                                            </div>
-                                            <div class="input-group has-validation forgot-password-details-inputgroup">
-                                                <div class=" align-items-center d-flex form-floating position-relative py-0">
-                                                    <input type="password"
-                                                        class="form-control shadow-none h-50p user_pass"
-                                                        id="forgot-password-input-one" placeholder="Enter New Password "
-                                                        autocomplete="off">
-                                                        <span class="end-0 pswd_eye me-2 position-absolute"><svg
-                                                            class="svg-inline--fa fa-eye" aria-hidden="true"
-                                                            focusable="false" data-prefix="fas" data-icon="eye"
-                                                            role="img" xmlns="http://www.w3.org/2000/svg"
-                                                            viewBox="0 0 576 512" data-fa-i2svg="">
-                                                            <path fill="currentColor"
-                                                                d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
-                                                            </path>
-                                                        </svg><!-- <i class="fa-solid fa-eye"></i> Font Awesome fontawesome.com --></span>
-                                                    <label for="forgot-password-input-one">Enter New Password</label>
-                                                </div>
-                                                <div class="invalid-feedback">
-                                                    Please enter your Password.
-                                                </div>
-                                                <div class="pswd_info" style="display: none;z-index: 1;">
-                                                    <p>Password must contain:</p>
-                                                    <ul>
-                                                        <li id="chck_capital" class="invalid">At least <strong>one
-                                                                capital
-                                                                letter</strong></li>
-                                                        <li id="chck_special" class="invalid">At least <strong>one
-                                                                special
-                                                                letter</strong></li>
-                                                        <li id="chck_number" class="invalid">At least <strong>one
-                                                                number</strong></li>
-                                                        <li id="chck_length" class="invalid">At least <strong>8
-                                                                characters</strong></li>
-                                                    </ul>
-                                                </div>
-                                            </div>
-                                            <div
-                                                class="input-group has-validation forgot-password-details-inputgroup mt-4">
-                                                <div class="form-floating py-0">
-                                                    <input type="text" class="form-control shadow-none h-50p user_pass"
-                                                        id="forgot-password-input-two"
-                                                        placeholder="Confirm New Password" autocomplete="off">
-                                                    <label for="forgot-password-input-two">Confirm New Password</label>
-                                                </div>
-                                                <div class="invalid-feedback">
-                                                    Please enter your Password.
-                                                </div>
-                                            </div>
-                                            <div class="mt-3 ">
-                                                <div>
-                                                    <div class="btn bg-gradient-anwi w-100 loader-btn"
-                                                        style="display: none;">
-                                                        <span class="loader"></span>
-                                                    </div>
-                                                    <a href="#" class="btn bg-gradient-anwi w-100 text-white fw-500"
-                                                        id="forgot_password_details_submit" type="submit">Submit</a>
-                                                </div>
+                                        <div class="invalid-feedback">
+                                            Please enter your email.
+                                        </div>
+                                    </div>
+                                    <div class="input-group has-validation mt-3 password-login-inputgroup">
+                                        <div class="form-floating py-0" id="password-input-div">
+                                            <input type="password" class="form-control shadow-none h-50p"
+                                                id="User_password" placeholder="Password"
+                                                autocomplete="no password">
+                                            <label for="User_password">Password</label>
+                                        </div>
+                                        <div class="invalid-feedback">
+                                            Please enter your password.
+                                        </div>
+                                    </div>
+                                    <div class="my-2">
+                                        <a href="#" class="text-theme-color fs-9 fw-500" id="forgotPassword">Forgot password?</a>
+                                    </div>
+                                    <div class="fs-7 mt-2 satoshi_font">
+                                        By continuing, I agree to the
+                                        <a href="#"
+                                            class="text-theme-color text-decoration-underline fs-7 fw-600">Terms
+                                            of
+                                            Use</a>
+                                        &amp;
+                                        <a href="#"
+                                            class="text-theme-color text-decoration-underline fs-7 fw-600">Privacy
+                                            Policy</a>
+                                    </div>
+                                    <div class="mt-4 ">
+                                        <div>
+                                            <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                style="display: none;">
+                                                <span class="loader"></span>
                                             </div>
+                                            <a href="#" class="btn bg-gradient-anwi w-100 fw-500" id="Login_btn"
+                                                type="submit">Login</a>
                                         </div>
-                                    </form>
+                                    </div>
+                                    <div class="my-3 mt-4">
+                                    <p class="or_line"><span>or</span></p>
+
+                                    </div>
+                                    <div class="mt-4  mb-5">
+                                            <a href="#" class="btn bg-gradient-anwi-outline w-100 fw-500 register_sectionbtn" id="register_sectionbtn"
+                                                >Sign Up</a>
+                                    </div>
                                 </div>
-                                <div class="tab-pane fade" id="pills-registration" role="tabpanel"
-                                    aria-labelledby="pills-registration-tab" tabindex="0">
-                                    <form id="register_form">
-                                        <div class="email-password-group">
-                                            <div class="input-group has-validation email-login-inputgroup">
-                                                <div class="form-floating py-0">
-                                                    <input type="email" class="form-control shadow-none h-50p"
-                                                        id="User_Email" placeholder="Enter Your Email"
-                                                        autocomplete="off">
-                                                    <label for="User_Email">Email address</label>
-                                                </div>
-                                                <div class="invalid-feedback">
-                                                    Please enter your email.
-                                                </div>
+                                <div class="login-forgot-password-div" style="display:none">
+                                    <div
+                                        class="font-16 d-flex justify-content-end font-w600 text-darkgrey w-100 backtologin">
+                                        <!-- <span>Forgot Password?</span> -->
+                                        <a href="./login.html" class="" id="forgot_Password_Back"><span
+                                                class=" cursor-pointer text-center d-flex align-items-center"><i
+                                                    class="fa-solid fa-arrow-left"></i></span></a>
+                                    </div>
+                                    <div class="email-validation">
+                                        <div class="font-14 w-100">Please enter your email address.
+                                        </div>
+                                        <div class="input-group has-validation forgot-password-inputgroup">
+                                            <div class="form-floating py-0">
+                                                <input type="email" class="form-control shadow-none h-50p"
+                                                    id="forgot_User_Email" placeholder="Enter Your Email"
+                                                    autocomplete="off">
+                                                <label for="forgot_User_Email">Email address</label>
                                             </div>
-                                            <div class="input-group has-validation mt-3 password-login-inputgroup">
-                                                <div class="align-items-center d-flex form-floating position-relative py-0"
-                                                    id="password-input-div">
-                                                    <input type="password" class="form-control shadow-none h-50p"
-                                                        id="User_password" placeholder="Password"
-                                                        autocomplete="no password" required="">
-                                                    <span class="end-0 pswd_eye me-2 position-absolute"><svg
-                                                            class="svg-inline--fa fa-eye" aria-hidden="true"
-                                                            focusable="false" data-prefix="fas" data-icon="eye"
-                                                            role="img" xmlns="http://www.w3.org/2000/svg"
-                                                            viewBox="0 0 576 512" data-fa-i2svg="">
-                                                            <path fill="currentColor"
-                                                                d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
-                                                            </path>
-                                                        </svg><!-- <i class="fa-solid fa-eye"></i> Font Awesome fontawesome.com --></span>
-                                                    <label for="User_password">Password</label>
-                                                </div>
-                                                <div class="invalid-feedback">
-                                                    Please enter your password.
-                                                </div>
-                                                <div class="pswd_info" style="display: none;">
-                                                    <p>Password must contain:</p>
-                                                    <ul>
-                                                        <li id="chck_capital" class="invalid">At least <strong>one
-                                                                capital
-                                                                letter</strong></li>
-                                                        <li id="chck_special" class="invalid">At least <strong>one
-                                                                special
-                                                                letter</strong></li>
-                                                        <li id="chck_number" class="invalid">At least <strong>one
-                                                                number</strong></li>
-                                                        <li id="chck_length" class="invalid">At least <strong>8
-                                                                characters</strong></li>
-                                                    </ul>
-                                                </div>
+                                            <div class="invalid-feedback">
+                                                Please enter your email.
                                             </div>
-                                            <div class="fs-7 mt-2 satoshi_font">
-                                                By continuing, I agree to the
-                                                <a href="#"
-                                                    class="text-theme-color text-decoration-underline fs-7 fw-600">Terms
-                                                    of
-                                                    Use</a>
-                                                &amp;
-                                                <a href="#"
-                                                    class="text-theme-color text-decoration-underline fs-7 fw-600">Privacy
-                                                    Policy</a>
-                                            </div>
-                                            <div class="mt-3 ">
-                                                <div>
-                                                    <div class="btn bg-gradient-anwi w-100 loader-btn"
-                                                        style="display: none;">
-                                                        <span class="loader"></span>
-                                                    </div>
-                                                    <a href="#" class="btn bg-gradient-anwi text-white w-100 fw-500"
-                                                        id="register_btn" type="submit">REGISTER</a>
+                                        </div>
+                                        <div class="mt-3">
+                                            <div>
+                                                <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                    style="display: none;">
+                                                    <span class="loader"></span>
                                                 </div>
+                                                <a href="#" class="btn bg-gradient-anwi w-100 text-white fw-500"
+                                                    id="forgot_password_submit" type="submit">Submit</a>
                                             </div>
                                         </div>
-
-                                        <div class="register_otp otp-input-group mt-3" style="display: none;">
+                                    </div>
+                                    <div class="otp-validation">
+                                        <div class="otp-input-group mt-3" style="display: none;">
                                             <div>
                                                 <h4 class="text-center">Enter OTP</h4>
-                                                <div class="text-center">we have sent an OTP to this Email </div>
+                                                <div class="text-center">we have sent an OTP to this Email
+                                                </div>
+                                                <p class="user_email text-center"></p>
                                                 <div class="otp-sent-email fw-600 text-center"></div>
                                             </div>
                                             <div class="d-flex my-4">
                                                 <div class="col">
                                                     <div class="form-group">
-                                                        <input type="text" class="press form-control" name="code"
-                                                            maxlength="1" tabindex="1" autocomplete="off">
+                                                        <input type="text" class="press form-control"
+                                                            name="code" maxlength="1" tabindex="1"
+                                                            autocomplete="off">
                                                     </div>
                                                 </div>
 
                                                 <div class="col">
                                                     <div class="form-group">
-                                                        <input type="text" class="press form-control" name="code"
-                                                            maxlength="1" tabindex="2" autocomplete="off">
+                                                        <input type="text" class="press form-control"
+                                                            name="code" maxlength="1" tabindex="2"
+                                                            autocomplete="off">
                                                     </div>
                                                 </div>
 
                                                 <div class="col">
                                                     <div class="form-group">
-                                                        <input type="text" class="press form-control" name="code"
-                                                            maxlength="1" tabindex="3" autocomplete="off">
+                                                        <input type="text" class="press form-control"
+                                                            name="code" maxlength="1" tabindex="3"
+                                                            autocomplete="off">
                                                     </div>
                                                 </div>
 
                                                 <div class="col">
                                                     <div class="form-group">
-                                                        <input type="text" class="press form-control" name="code"
-                                                            maxlength="1" tabindex="4" autocomplete="off">
+                                                        <input type="text" class="press form-control"
+                                                            name="code" maxlength="1" tabindex="4"
+                                                            autocomplete="off">
                                                     </div>
                                                 </div>
 
                                                 <div class="col">
                                                     <div class="form-group">
-                                                        <input type="text" class="press form-control" name="code"
-                                                            maxlength="1" tabindex="5" autocomplete="off">
+                                                        <input type="text" class="press form-control"
+                                                            name="code" maxlength="1" tabindex="5"
+                                                            autocomplete="off">
                                                     </div>
                                                 </div>
 
                                                 <div class="col">
                                                     <div class="form-group">
-                                                        <input type="text" class="press form-control" name="code"
-                                                            maxlength="1" tabindex="6" autocomplete="off">
+                                                        <input type="text" class="press form-control"
+                                                            name="code" maxlength="1" tabindex="6"
+                                                            autocomplete="off">
                                                     </div>
                                                 </div>
                                             </div>
@@ -454,16 +221,336 @@
                                                     style="display: none;">
                                                     <span class="loader"></span>
                                                 </div>
-                                                <a href="#" class="btn btn-primary w-100 fw-500" id="proceed"
-                                                    type="submit">CONFIRM</a>
+                                                <a href="#" class="bg-gradient-anwi btn fw-500 text-white w-100"
+                                                    id="Forgot_pass_proceed" type="submit">CONFIRM</a>
                                             </div>
                                         </div>
+                                    </div>
+                                </div>
 
-                                    </form>
+                                <div class="login-forgot-password-details-div" style="display:none">
+                                    <!-- <div
+                                        class="font-16 d-flex justify-content-between font-w600 text-darkgrey w-100 backtologin">
+                                    <span>Forgot Password?</span>
+                                        <a href="#" class=""
+                                            id="forgot_Password_Details_Back"><span
+                                                class=" cursor-pointer text-center d-flex align-items-center"><i
+                                                    class="fa-solid fa-arrow-left"></i></span></a>
+                                    </div> -->
+                                    <div class="font-14 w-100 password_display">Please Enter your New Password.
+                                    </div>
+                                    <div class="input-group has-validation forgot-password-details-inputgroup">
+                                        <div class=" align-items-center d-flex form-floating position-relative py-0">
+                                            <input type="password"
+                                                class="form-control shadow-none h-50p user_pass"
+                                                id="forgot-password-input-one" placeholder="Enter New Password "
+                                                autocomplete="off">
+                                                <span class="end-0 pswd_eye me-3 position-absolute"><svg
+                                                    class="svg-inline--fa fa-eye" aria-hidden="true"
+                                                    focusable="false" data-prefix="fas" data-icon="eye"
+                                                    role="img" xmlns="http://www.w3.org/2000/svg"
+                                                    viewBox="0 0 576 512" data-fa-i2svg="">
+                                                    <path fill="currentColor"
+                                                        d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
+                                                    </path>
+                                                </svg><!-- <i class="fa-solid fa-eye"></i> Font Awesome fontawesome.com --></span>
+                                            <label for="forgot-password-input-one">Enter New Password</label>
+                                        </div>
+                                        <div class="invalid-feedback">
+                                            Please enter your Password.
+                                        </div>
+                                        <div class="pswd_info" style="display: none;z-index: 1;">
+                                            <p>Password must contain:</p>
+                                            <ul>
+                                                <li id="chck_capital" class="invalid">At least <strong>one
+                                                        capital
+                                                        letter</strong></li>
+                                                <li id="chck_special" class="invalid">At least <strong>one
+                                                        special
+                                                        letter</strong></li>
+                                                <li id="chck_number" class="invalid">At least <strong>one
+                                                        number</strong></li>
+                                                <li id="chck_length" class="invalid">At least <strong>8
+                                                        characters</strong></li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div
+                                        class="input-group has-validation forgot-password-details-inputgroup mt-4">
+                                        <div class="form-floating py-0">
+                                            <input type="text" class="form-control shadow-none h-50p user_pass"
+                                                id="forgot-password-input-two"
+                                                placeholder="Confirm New Password" autocomplete="off">
+                                            <label for="forgot-password-input-two">Confirm New Password</label>
+                                        </div>
+                                        <div class="invalid-feedback">
+                                            Please enter your Password.
+                                        </div>
+                                    </div>
+                                    <div class="mt-3 ">
+                                        <div>
+                                            <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                style="display: none;">
+                                                <span class="loader"></span>
+                                            </div>
+                                            <a href="#" class="btn bg-gradient-anwi w-100 text-white fw-500"
+                                                id="forgot_password_details_submit" type="submit">Submit</a>
+                                        </div>
+                                    </div>
                                 </div>
+                              
+                               
+                               
+                            </form>
+                            
+                            </div>
+                            <div class="email-validate-div" style="display:none">
+                                <div
+                                    class="font-16 d-flex justify-content-end font-w600 text-darkgrey w-100 backtologin">
+                                    <!-- <span>Forgot Password?</span> -->
+                                    <a href="./login.html" class="" id="email_validate_back"><span
+                                            class=" cursor-pointer text-center d-flex align-items-center"><i
+                                                class="fa-solid fa-arrow-left"></i></span></a>
+                                </div>
+                                <div class="email-validation">
+                                    <div class="font-14 w-100">Please enter your email address.
+                                    </div>
+                                    <div class="input-group has-validation forgot-password-inputgroup">
+                                        <div class="form-floating py-0">
+                                            <input type="email" class="form-control shadow-none h-50p"
+                                                id="email_validation_input" placeholder="Enter Your Email"
+                                                autocomplete="off">
+                                            <label for="email_validation_input">Email address</label>
+                                        </div>
+                                        <div class="invalid-feedback">
+                                            Please enter your email.
+                                        </div>
+                                    </div>
+                                    <div class="mt-3">
+                                        <div>
+                                            <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                style="display: none;">
+                                                <span class="loader"></span>
+                                            </div>
+                                            <a href="#" class="btn bg-gradient-anwi w-100 text-white fw-500"
+                                                id="email_validate_submit" type="submit">Submit</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="otp-validation">
+                                    <div class="otp-input-group mt-3" style="display: none;">
+                                        <div>
+                                            <h4 class="text-center">Enter OTP</h4>
+                                            <div class="text-center">we have sent an OTP to this Email
+                                            </div>
+                                            <p class="user_email text-center"></p>
+                                            <div class="otp-sent-email fw-600 text-center"></div>
+                                        </div>
+                                        <div class="d-flex my-4">
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control"
+                                                        name="code" maxlength="1" tabindex="1"
+                                                        autocomplete="off">
+                                                </div>
+                                            </div>
+
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control"
+                                                        name="code" maxlength="1" tabindex="2"
+                                                        autocomplete="off">
+                                                </div>
+                                            </div>
+
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control"
+                                                        name="code" maxlength="1" tabindex="3"
+                                                        autocomplete="off">
+                                                </div>
+                                            </div>
+
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control"
+                                                        name="code" maxlength="1" tabindex="4"
+                                                        autocomplete="off">
+                                                </div>
+                                            </div>
+
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control"
+                                                        name="code" maxlength="1" tabindex="5"
+                                                        autocomplete="off">
+                                                </div>
+                                            </div>
+
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control"
+                                                        name="code" maxlength="1" tabindex="6"
+                                                        autocomplete="off">
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                style="display: none;">
+                                                <span class="loader"></span>
+                                            </div>
+                                            <a href="#" class="bg-gradient-anwi btn fw-500 text-white w-100"
+                                                id="email_validate_proceed" type="submit">CONFIRM</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="register_section" style="display: none;">
+                                <form id="register_form">
+                                    <div class="email-password-group">
+                                        <div class="input-group has-validation email-login-inputgroup">
+                                            <div class="form-floating py-0">
+                                                <input type="email" class="form-control shadow-none h-50p"
+                                                    id="User_Email" placeholder="Enter Your Email"
+                                                    autocomplete="off">
+                                                <label for="User_Email">Email address</label>
+                                            </div>
+                                            <div class="invalid-feedback">
+                                                Please enter your email.
+                                            </div>
+                                        </div>
+                                        <div class="input-group has-validation mt-3 password-login-inputgroup">
+                                            <div class="align-items-center d-flex form-floating position-relative py-0"
+                                                id="password-input-div">
+                                                <input type="password" class="form-control shadow-none h-50p"
+                                                    id="User_password" placeholder="Password"
+                                                    autocomplete="no password" required="">
+                                                <span class="end-0 pswd_eye me-4 pe-2 position-absolute"><svg
+                                                        class="svg-inline--fa fa-eye" aria-hidden="true"
+                                                        focusable="false" data-prefix="fas" data-icon="eye"
+                                                        role="img" xmlns="http://www.w3.org/2000/svg"
+                                                        viewBox="0 0 576 512" data-fa-i2svg="">
+                                                        <path fill="currentColor"
+                                                            d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
+                                                        </path>
+                                                    </svg><!-- <i class="fa-solid fa-eye"></i> Font Awesome fontawesome.com --></span>
+                                                <label for="User_password">Password</label>
+                                            </div>
+                                            <div class="invalid-feedback">
+                                                Please enter your password.
+                                            </div>
+                                            <div class="pswd_info" style="display: none;">
+                                                <p>Password must contain:</p>
+                                                <ul>
+                                                    <li id="chck_capital" class="invalid">At least <strong>one
+                                                            capital
+                                                            letter</strong></li>
+                                                    <li id="chck_special" class="invalid">At least <strong>one
+                                                            special
+                                                            letter</strong></li>
+                                                    <li id="chck_number" class="invalid">At least <strong>one
+                                                            number</strong></li>
+                                                    <li id="chck_length" class="invalid">At least <strong>8
+                                                            characters</strong></li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                        <div class="fs-7 mt-2 satoshi_font">
+                                            By continuing, I agree to the
+                                            <a href="#"
+                                                class="text-theme-color text-decoration-underline fs-7 fw-600">Terms
+                                                of
+                                                Use</a>
+                                            &amp;
+                                            <a href="#"
+                                                class="text-theme-color text-decoration-underline fs-7 fw-600">Privacy
+                                                Policy</a>
+                                        </div>
+                                        <div class="mt-3 ">
+                                            <div>
+                                                <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                    style="display: none;">
+                                                    <span class="loader"></span>
+                                                </div>
+                                                <a href="#" class="btn bg-gradient-anwi text-white w-100 fw-500"
+                                                    id="register_btn" type="submit">REGISTER</a>
+                                            </div>
+                                        </div>
+                                        <div class="my-3 mt-4">
+                                            <p class="or_line"><span>or</span></p>
+        
+                                            </div>
+                                            <div class="mt-4  mb-5">
+                                                    <a href="#" class="btn bg-gradient-anwi-outline w-100 fw-500" id="login_sectionbtn"
+                                                        >Login</a>
+                                            </div>
+                                    </div>
+
+                                    <div class="register_otp otp-input-group mt-3" style="display: none;">
+                                        <div>
+                                            <h4 class="text-center">Enter OTP</h4>
+                                            <div class="text-center">we have sent an OTP to this Email </div>
+                                            <div class="otp-sent-email fw-600 text-center"></div>
+                                        </div>
+                                        <div class="d-flex my-4">
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control" name="code"
+                                                        maxlength="1" tabindex="1" autocomplete="off">
+                                                </div>
+                                            </div>
+
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control" name="code"
+                                                        maxlength="1" tabindex="2" autocomplete="off">
+                                                </div>
+                                            </div>
+
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control" name="code"
+                                                        maxlength="1" tabindex="3" autocomplete="off">
+                                                </div>
+                                            </div>
+
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control" name="code"
+                                                        maxlength="1" tabindex="4" autocomplete="off">
+                                                </div>
+                                            </div>
+
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control" name="code"
+                                                        maxlength="1" tabindex="5" autocomplete="off">
+                                                </div>
+                                            </div>
+
+                                            <div class="col">
+                                                <div class="form-group">
+                                                    <input type="text" class="press form-control" name="code"
+                                                        maxlength="1" tabindex="6" autocomplete="off">
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                style="display: none;">
+                                                <span class="loader"></span>
+                                            </div>
+                                            <a href="#" class="btn btn-primary w-100 fw-500" id="proceed"
+                                                type="submit">CONFIRM</a>
+                                        </div>
+                                    </div>
+
+                                </form>
                             </div>
                         </div>
                     </div>
+                    
                 </div>
             </div>
         </div>
@@ -495,11 +582,31 @@
     <script src="./dist/js/utils/CookieHelper.js"></script>
     <script src="./dist/toaster/toastr.js"></script>
     <script src="./dist/js/auth/login.js"></script>
-    <script src="./dist/js/navbar.js"></script>
+    <script src="./dist/js/navbar1.js"></script>
     <script src="./dist/js/footer.js"></script>
     <!-- Main JS -->
     <script src="./dist/js/main.js"></script>
-
+    <script>
+        $(".register_sectionbtn").click(function(){
+          $(".login_section").css("display","none");
+          $(".register_section").css("display","block");
+          $(".login_section").find("#User_Email").removeClass("is-invalid");
+          $(".login_section").find(".form-floating").removeClass("is-invalid");
+          $(".login_section").find("#User_password").removeClass("is-invalid");
+          $(".login_section").find(".form-floating").removeClass("is-invalid");
+          $('.error_msg').hide();
+        });
+        $("#login_sectionbtn").click(function(){
+          $(".login_section").css("display","block");
+          $(".register_section").css("display","none");
+          $(".register_section").find("#User_Email").removeClass("is-invalid");
+          $(".register_section").find(".form-floating").removeClass("is-invalid");
+          $(".register_section").find("#User_password").removeClass("is-invalid");
+          $(".register_section").find(".form-floating").removeClass("is-invalid");
+          $('.error_msg').hide();
+        });
+     
+     </script>
 </body>
 
 </html>

myaccount.html

@@ -35,6 +35,12 @@
     <!-- main-body -->
     <auth-loader></auth-loader>
     <main class="shopping-cart-main-container main-body pb-0">
+        <section class="services h-100 pt-3  bg-gradient-anwi">
+            <div class="container pt-5 ">
+                <div class="text-center text-white ">
+                </div>
+            </div>
+        </section>
       <section class="pt-5">
         <div class="my-account-wrapper bg-gradient-violet py-md-5">
             <div class="container pt-5">

press.html

@@ -224,17 +224,13 @@
   <div id="navbar-head"></div>
   <!-- end-navbar -->
   <!-- main-body -->
-  <main class="main-body home-main-container pt-md-5">
-    <section class="bg-gradient-anwi">
-      <div class="container pt-md-5 pt-5">
-        <div class="pt-md-5 pt-5">
-          <div class="text-center py-md-5 py-5 text-white">
-            <h2 class="fw-bold">Press</h2>
-            <h5>Get the scoop on all things</h5>
+  <main class="main-body home-main-container">
+    <section class="services h-100 pt-3  bg-gradient-anwi">
+      <div class="container pt-5 ">
+          <div class="text-center text-white ">
           </div>
-        </div>
       </div>
-    </section>
+  </section>
     <section class="pt-md-5">
       <div class="container pt-md-5">
         <div class="row quotsection">

productdetails.html

@@ -38,7 +38,14 @@
     <div id="navbar-head"></div>
     <!-- end-navbar -->
     <!-- main-body -->
-    <main class="main-body home-main-container" style="margin-top: 30px;">
+    
+    <main class="main-body home-main-container" >
+        <section class="services h-100 pt-3  bg-gradient-anwi">
+            <div class="container pt-5 ">
+                <div class="text-center text-white ">
+                </div>
+            </div>
+        </section>
         <div class="container mainContanierProduct">
             <div class="row">
                 <div class="col-xl-7 ">

ramproducts.html

@@ -51,7 +51,15 @@
     <div id="navbar-head" class="shadow"></div>
     <!-- end-navbar -->
     <!-- main-body -->
-    <main class="main-body home-main-container pt-md-0 pt-5">
+    
+    <main class="main-body home-main-container">
+        <section class="services h-100 pt-3  bg-gradient-anwi">
+            <div class="container pt-5 ">
+                <div class="text-center text-white ">
+                </div>
+            </div>
+        </section>
+
         <section class="position-relative bg-black">
             <!-- <img src="./dist/assets/imgs/allin_imgs/ssd_img.png" class="img-fluid w-100" alt="ssd_img"/> -->
             <iframe src="https://player.vimeo.com/video/816131155?h=4667fd18e1&autoplay=1&loop=1&autopause=0&badge=0&player_id=0&controls=0&muted=1" width="1536px" height="860px" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

storageproducts.html

@@ -52,7 +52,13 @@
     <div id="navbar-head" class="shadow"></div>
     <!-- end-navbar -->
     <!-- main-body -->
-    <main class="main-body home-main-container pt-md-0 pt-5">
+    <main class="main-body home-main-container">
+        <section class="services h-100 pt-3  bg-gradient-anwi">
+            <div class="container pt-5 ">
+                <div class="text-center text-white ">
+                </div>
+            </div>
+        </section>
         <section class="position-relative bg-black">
             <!-- <img src="./dist/assets/imgs/allin_imgs/ssd_img.png" class="img-fluid w-100" alt="ssd_img"/> -->
             <iframe src="https://player.vimeo.com/video/816131155?h=4667fd18e1&autoplay=1&loop=1&autopause=0&badge=0&player_id=0&controls=0&muted=1" width="1536px" height="860px" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

style.css

@@ -2097,13 +2097,7 @@ html {
   .banner-wrapper {
     position: relative;
   }
-  /* .banner-main-container {
-    max-height: 625px !important;
-  } */
-  /* .carousel_img {
-    height: 100%;
-    max-height: 600px;
-  } */
+
   .offer-main-sec {
     position: absolute;
     bottom: 15%;

style.scss

@@ -2285,13 +2285,7 @@ html {
 	.banner-wrapper {
 		position: relative;
 	}
-	// .banner-main-container {
-	// 	max-height: 625px !important;
-	// }
-	// .carousel_img {
-	// 	height: 100%;
-	// 	max-height: 750px;
-	// }
+
 	.offer-main-sec {
 		position: absolute;
 		bottom: 15%;

support.html

@@ -38,42 +38,14 @@
     <div id="navbar-head"></div>
     <!-- end-navbar -->
     <!-- main-body -->
-    <main class="main-body home-main-container pt-5">
-        <section class="bg-gradient-anwi">
-            <div id="home-banner" class="pt-md-5">
-                <div class="banner-home--wrapper pt-md-5">
-                    <div class="banner-home--banner">
-                        <img src="https://oasis.opstatics.com/content/dam/support/homepage/kv-pc.png" alt="homepage-kv-pc" class="img d-none">
-                        <img src="./dist/assets/imgs/allin_imgs/support_bg.png" alt="homepage-kv-pc" class="img d-none">
-                    </div>
-                    <div class="banner-home--wrapper_upper py-md-5 py-5 text-white">
-                        <h3 class="text-center pt-md-5">
-                            <span class="satoshi_font text-white pt-md-5 font-weight-600 pb-1">
-                                Support
-                            </span>
-                        </h3>
-                        <div class="banner-home--wrapper_upper__title2 d-none">We're here to help</div>
-                     
-                        <!-- <h3 class="satoshi_font"><a href="mailto:sales@anwisystems.com " class="satoshi_font">sales@anwisystems.com </a></h3>
-                        <h4 class="satoshi_font fs-6">Send us email for any queries.</h4> -->
-                        <div class="banner-home--search mx-auto d-none">
-                            <div class="el-pc-input el-input el-input--prefix el-input--suffix">
-                                <input type="text" autocomplete="off" placeholder="Please enter your question" class="el-input__inner">
-                                <span class="el-input__suffix">
-                                    <span class="el-input__suffix-inner">
-                                        <div class="service-el-autocomplete_suffix absolute translate-center"
-                                            style="display: none;">
-                                            <i class="van-icon van-icon-cross" style="display: none;"></i>
-                                            <i class="el-icon-close" style="font-size: 20px; display: none;"></i>
-                                        </div>
-                                    </span>
-                                </span>
-                            </div>
-                        </div>
-                    </div>
+    <main class="main-body home-main-container">
+        <section class="services h-100 pt-3  bg-gradient-anwi">
+            <div class="container pt-5 ">
+                <div class="text-center text-white ">
                 </div>
             </div>
         </section>
+        
         <section class="bg-gradient-violet">
             <div id="home-help">
                 <div class="home-help--wrapper">