$(document).ready(function () {
  let navbarHtml = `
  <!-- offcanvas-overlay start -->
  <div class="offcanvas-overlay"></div>
  <!-- offcanvas-overlay end -->
  <!-- offcanvas-mobile-menu start -->
  <div id="offcanvas-mobile-menu" class="offcanvas theme1 offcanvas-mobile-menu ">
    <div class="inner">
      <div class="d-flex justify-content-between">
        <div class="inner-img d-flex ">
          <img src="./assets/img/logo/logo-black.png" class="img-fluid " alt="anwi-logo">
        </div>
        <div class=" pt-3 text-end">
          <button class="offcanvas-close">×</button>
        </div>
      </div>
      <nav class="offcanvas-menu">
        <ul>
          <li class="home-text">
            <a class="home-text1" href="index.html"><span class="menu-text ">Home</span></a>
          </li>
          <li class="shop-text">
              <a  class="shop-text1" href="products.html"><span class="menu-text">Products</span></a>
              <ul class="offcanvas-submenu">
              <li class="shop-text">
            <a  class="shop-text1" href="servers.html"><span class="menu-text">Servers</span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="surpass3u.html"><span class="menu-text">ANWI SURPASS 3U</span></a>
              </li>
              <li>
                <a href="surpass2u.html"><span class="menu-text">ANWI SURPASS 2U</span></a>
              </li>
              <li>
                <a href="surpass1u.html"><span class="menu-text">ANWI SURPASS 1U</span></a>
              </li>
            </ul>
          </li>
          <li class="shop-text">
          <a  class="shop-text1" href="24-bay-storage.html"><span class="menu-text">Storage</span></a>
          <ul class="offcanvas-submenu">
            <li>
              <a href="24-bay-storage.html"><span class="menu-text">24 Bay Storage</span></a>
            </li>
          </ul>
        </li>
          <li>
            <a class="shop-text1" href="network-switches.html"><span class="menu-text">Network Switches</span></a>
            <ul class="offcanvas-submenu">
              <li><a href="400g-data.html">400G</a></li>
              <li>
                <a href="100g-port3.html"><span class="menu-text">100G</span></a>
              </li>
              <li><a href="40g-data.html">40G</a></li>
              <li><a href="25g-data.html">25G</a></li>
              <li><a href="10g-data.html">10G</a></li>
            </ul>
          </li>
          <li class="shop-text">
            <a  class="shop-text1" href="network-cards.html"><span class="menu-text">Network Cards/Cables </span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="network-card-700series.html"><span class="menu-text">700 Series</span></a>
              </li>
              <li>
                <a href="network-card-800series.html"><span class="menu-text">800 Series</span></a>
              </li>
            </ul>
          </li>
          <li class="shop-text d-none">
            <a  class="shop-text1" href="routers.html"><span class="menu-text">Routers </span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="routers.html"><span class="menu-text">COR580</span></a>
              </li>
            </ul>
          </li>
          <li class="shop-text d-none">
            <a  class="shop-text1" ><span class="menu-text">Firewalls </span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="firewalls.html"><span class="menu-text">Netgate 7100 1U</span></a>
              </li>
            </ul>
          </li>
          <li class="shop-text d-none">
            <a  class="shop-text1" ><span class="menu-text">Smart Racks </span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="racks.html"><span class="menu-text">Computer Racks</span></a>
              </li>
            </ul>
          </li>
          <li class="shop-text d-none">
            <a  class="shop-text1" ><span class="menu-text">Management Units </span></a>
            <ul class="offcanvas-submenu">
              <li>
                <a href="management-units.html"><span class="menu-text">IMOU Unit</span></a>
              </li>
            </ul>
          </li>
              </ul>
            </li>
          <li class="shop-text">
            <a  class="shop-text1" href="about.html"><span class="menu-text">About US</span></a>
          </li>
          <li class="shop-text">
            <a  class="shop-text1" href="contact-us.html"><span class="menu-text">Contact</span></a>
          </li>
        </ul>
      </nav>
      <div class="offcanvas-social py-30">
        <ul>
          <li>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-twitter"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-instagram"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-google"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-whatsapp"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- offcanvas-mobile-menu end -->
  <!-- OffCanvas Wishlist Start -->
  <div id="offcanvas-wishlist" class="offcanvas offcanvas-wishlist theme1">
    <div class="inner">
      <div class="head d-flex flex-wrap justify-content-between">
        <span class="title">Wishlist</span>
        <button class="offcanvas-close">×</button>
      </div>
      <ul class="minicart-product-list">
        <li>
          <a href="single-product.html" class="image"
            ><img src="./assets/img/mini-cart/4.png" alt="Cart product Image"
          /></a>
          <div class="content">
            <a href="single-product.html" class="title"
              >orginal Age Defying Cosmetics Makeup</a
            >
            <span class="quantity-price"
              >1 x <span class="amount">$100.00</span></span
            >
            <a href="#" class="remove">×</a>
          </div>
        </li>
        <li>
          <a href="single-product.html" class="image"
            ><img src="./assets/img/mini-cart/5.png" alt="Cart product Image"
          /></a>
          <div class="content">
            <a href="single-product.html" class="title"
              >On Trend Makeup and Beauty Cosmetics</a
            >
            <span class="quantity-price"
              >1 x <span class="amount">$35.00</span></span
            >
            <a href="#" class="remove">×</a>
          </div>
        </li>
        <li>
          <a href="single-product.html" class="image"
            ><img src="./assets/img/mini-cart/6.png" alt="Cart product Image"
          /></a>
          <div class="content">
            <a href="single-product.html" class="title"
              >orginal Age Defying Cosmetics Makeup</a
            >
            <span class="quantity-price"
              >1 x <span class="amount">$9.00</span></span
            >
            <a href="#" class="remove">×</a>
          </div>
        </li>
      </ul>
      <a
        href="wishlist.html"
        class="btn btn-primary btn--lg d-block d-sm-inline-block mt-30"
        >view wishlist</a
      >
    </div>
  </div>
  <!-- OffCanvas Wishlist End -->
  
  <!-- OffCanvas Cart Start -->
  <div id="offcanvas-cart" class="offcanvas offcanvas-cart theme1">
    <div class="inner">
      <div class="head d-flex flex-wrap justify-content-between">
          <span class="title">Cart</span>
          <button class="offcanvas-close">×</button>
      </div>
      <div  id="side-cart">
      </div>
      </div>
      <div class="px-5">
      <a href="cart.html" class="btn btn-secondary btn--lg d-block d-sm-inline-block me-sm-2 side-cart-btn" >view cart</a>
              <a href="checkout.html" class="btn btn-dark btn--lg d-block d-sm-inline-block mt-4 mt-sm-0 side-cart-btn" >checkout</a>
              <p class="minicart-message">Free Shipping on All Orders Over $100!</p>
      </div>
    </div>
  <!-- OffCanvas Cart End -->
  
  <!-- header start -->
  <header>
    <!-- header-middle satrt -->
    <div id="sticky" class="header-middle theme1 py-lg-0 main-index product-info-page">
      <div class="container position-relative headers">
        <div class="row align-items-center">
          <div class="col-6 col-lg-2 col-xl-2 mt-0">
            <div class="logo">
              <a href="index.html"
                ><img class="main-logo img-fluid " src="./assets/img/logo/logo-white.png" alt="anwi-logo"
              /></a>
            </div>
          </div>
          <div class="col-4 col-xl-10 col-lg-10 d-lg-flex justify-content-between">
            <ul class="main-menu  d-lg-flex d-none">
              <li class="ml-0 highlight">
                <a href="index.html" class="ps-0 main-nav-list nav-home"><span class="active cool-link">Home</span></a>
              </li>
              <li class="position-static highlight">
                <a href="products.html" class="nav-products main-nav-list"><span class="active cool-link">Products</span> <i class="fa fa-chevron-down"></i></a>
                <div class="mega-menu row">
                  <div class="container nav-mega-menu">
                    <ul id="tabs-nav" class=" nav-menu-category">
                     <li data-role="thumb-1" class="nav-menu-category1 active py-3">
                     <a href="servers.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Servers</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                         <section data-role="content-1" class="menu-sections">
                           <!-- <button class="close-btn">×</button> -->
                           <div class="container mt-5">
                           <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class= "d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <a href="servers.html"><h4>Servers</h4></a></div> <div><a href="servers.html" class= "view-all">view all</a> </div> </div>
                           <div class=" mx-5 border-bottom row">
                           <a href="surpass3u.html" class="col-md-4 d-flex py-5 sub-nav-list">
                          <div> <img src="./assets/img/slider/slider-img1.svg" class="mega-nav-img"></div>
                           <div >ANWI SURPASS 3U</div>
                             </a>
                           <a href="surpass2u.html" class="col-md-4 d-flex py-5 sub-nav-list">
                              <div><img src="./assets/img/400!280/server2U.png" class="mega-nav-img"></div>
                             <div >ANWI SURPASS 2U</div>
                           </a>
                           <a href="surpass1u.html" class="col-md-4 d-flex py-5 sub-nav-list ">
                              <div><img src="./assets/img/400!280/server1U.png" class="mega-nav-img"></div>
                             <div >ANWI SURPASS 1U</div>
                           </a>
                       </div>
                         </section>
                     </li>
                 </ul>
                  <!-- servers-end -->
                  <ul class=" nav-menu-category">
                  <li data-role="thumb-2" class="nav-menu-category1 py-3">
                  <a href="24-bay-storage.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Storage</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                      <section data-role="content-2" class="menu-sections">
                       <div class="container mt-5">
                       <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <a href="24-bay-storage.html"> <h4>Storage</h4> </a> </div> <div class="d-none"><a href="products.html" class="view-all active">view all</a> </div> </div>
                       <div class="row mx-5 border-bottom">
                       <a href="24-bay-storage.html" class="col-md-4 d-flex py-5 sub-nav-list">
                       <div><img src="./assets/img/storage/24-bay-storage.png" class="mega-nav-img switches router"></div>
                       <div >24 Bay Storage </div>
                       </a>
                    </div>
                        </section>
                     </ul>
                     <!-- storage-end -->
                  <ul class=" nav-menu-category">
                   <li data-role="thumb-2" class=" nav-menu-category1 py-3">
                   <a href="network-switches.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Network Switches</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                       <section data-role="content-2" class="menu-sections">
                        <div class="container mt-5">
                        <div class=" pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <a href="network-switches.html"> <h4>Network Switches</h4> </a> </div> <div><a href="network-switches.html" class="view-all active">view all</a> </div> </div>
                          <div class="row mx-5 border-bottom">
                          <a href="10g-data.html" class="col-md-3 d-flex py-5 sub-nav-list">
                          <div><img src="./assets/img/650!450/10g.png" class="mega-nav-img switches"></div>
                          <div >10G-Switch</div>
                          </a>

                          <a href="25g-data.html" class="col-md-3 d-flex py-5 sub-nav-list">
                          <div><img src="./assets/img/650!450/25g.png" class="mega-nav-img switches"></div>
                            <div >25G-Switch</div>
                            </a>
                           

                            <a href="40g-data.html" class="col-md-3 d-flex py-5 sub-nav-list">
                            <div><img src="./assets/img/650!450/40g.png" class="mega-nav-img switches"></div>
                              <div >40G-Switch</div>
                              </a>
                            
                              <a href="100g-port3.html" class="col-md-3 d-flex py-5 sub-nav-list">
                           <div><img src="./assets/img/650!450/100g3.png" class="mega-nav-img switches"></div>
                             <div >100G-Switch</div>
                             </a>   
                          </div>
 
                         <div class="row mx-5 border-bottom">
                         <a href="100g-port2.html" class="col-md-3 d-flex py-5 sub-nav-list d-none">
                         <div><img src="./assets/img/650!450/100g2.png" class="mega-nav-img switches"></div>
                           <div href="100g-port2.html" >100G-2 Switch</div>
                           </a>
                         
   
                           <a href="100g-port1.html" class="col-md-3 d-flex py-5 sub-nav-list d-none">
                          <div><img src="./assets/img/650!450/100g1.png" class="mega-nav-img switches"></div>
                            <div >100G-1 Switch</div>     
                         </a>
   
                               <a href="400g-data.html" class="col-md-3 d-flex py-4 sub-nav-list">
                               <div><img src="./assets/img/650!450/400g.png" class="mega-nav-img switches"></div>
                                 <div >400G Switch</div>
                                 </a>
                          </div>
                        </div>
                         </section>
                      </ul>
                      <!-- switches-end -->
                      <!-- network-cards / cables start -->
                      <ul class=" nav-menu-category">
                       <li data-role="thumb-2" class="nav-menu-category1 py-3">
                       <a href="network-cards.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Network Cards/Cables</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                           <section data-role="content-2" class="menu-sections">
                            <div class="container mt-5">
                            <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <a href="network-cards.html"> <h4>Network Cards</h4> </a> </div> <div><a href="network-cards.html" class="view-all active">view all</a> </div> </div>
                              <div class="row ms-5 border-bottom">
                              <a href="network-card-700series.html" class="col-md-5 py-5 d-flex sub-nav-list">
                              <div><img src="./assets/img/650!450/700-series.png" class="mega-nav-img switches"></div>
                              <div >Anwi Ethernet Network Adapter XXV710</div>
                              </a>
                              <a href="network-card-800series.html" class="col-md-5 py-5 d-flex sub-nav-list">
                              <div><img src="./assets/img/650!450/800-series.png" class="mega-nav-img switches"></div>
                                <div >Anwi Ethernet 800 Series Network Adapters</div>
                                </a>
                            </div>
                             </section>
                          </ul>
                          <!-- network-cards / cables end -->

                          <!---Routers start -->
                          <ul class=" nav-menu-category d-none">
                       <li data-role="thumb-2" class="nav-menu-category1 py-3">
                       <a href="routers.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Routers</b><span><i class="arrow-nav-img2 fa fa-chevron-right"></i></span></a>
                           <section data-role="content-2" class="menu-sections" >
                            <div class="container mt-5">
                            <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Routers</h4></div> <div class="d-none"><a href="products.html" class="view-all active">view all</a> </div> </div>
                              <div class="row mx-5 border-bottom">
                              <a href="routers.html" class="col-md-4 d-flex py-5 sub-nav-list">
                              <div><img src="./assets/img/650!450/700-series.png" class="mega-nav-img switches"></div>
                              <div >Routers</div>
                              </a>
                            </div>
                             </div></section>
                          </li></ul>
                          <!---Routers end -->

                          <!---Firewalls start -->
                          <ul class=" nav-menu-category d-none">
                       <li data-role="thumb-2" class="nav-menu-category1 py-3">
                       <a href="firewall.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Firewalls</b><span><i class="arrow-nav-img2 fa fa-chevron-right"></i></span></a>
                           <section data-role="content-2" class="menu-sections" >
                            <div class="container mt-5">
                            <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Firewalls</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
                              <div class="row mx-5 border-bottom">
                              <a href="firewall.html" class="col-md-4 d-flex py-5 sub-nav-list">
                              <div><img src="./assets/img/firewall/firewall3.png" class="mega-nav-img switches"></div>
                              <div >Netgate 7100 1U</div>
                              </a>
                            </div>
                             </div></section>
                          </li></ul>
                          <!---Firewalls end -->

                          <!---Smart Racks start -->
                          <ul class=" nav-menu-category d-none">
                       <li data-role="thumb-2" class="nav-menu-category1 py-3">
                       <a href="racks.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Smart Racks</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                           <section data-role="content-2" class="menu-sections" >
                            <div class="container mt-5">
                            <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Smart Racks</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
                              <div class="row mx-5 border-bottom">
                              <a href="racks.html" class="col-md-4 d-flex py-5 sub-nav-list">
                              <div><img src="./assets/img/no-image.png" class="mega-nav-img switches"></div>
                              <div>Computer Racks</div>
                              </a>
                            </div>
                             </div></section>
                          </li></ul>
                          <!---Smart Racks end -->

                          <!---Management Units start -->
                          <ul class=" nav-menu-category d-none">
                       <li data-role="thumb-2" class="nav-menu-category1 py-3">
                       <a href="management-units.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Management Units</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
                           <section data-role="content-2" class="menu-sections" >
                            <div class="container mt-5">
                            <div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Management Units</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
                              <div class="row mx-5 border-bottom">
                              <a href="management-units.html" class="col-md-4 d-flex py-5 sub-nav-list">
                              <div><img src="./assets/img/no-image.png" class="mega-nav-img switches"></div>
                              <div >IMOU Unit</div>
                              </a>
                            </div>
                             </div></section>
                          </li></ul>
                          <!---Management units end -->
                </div>
              </div>
          
              <li class="highlight">
                <a href="about.html"  class="main-nav-list"><span class="active cool-link">About US</span></a>
              </li>
              </ul>
              <ul class="d-flex main-menu justify-content-end">
              <li class="highlight currency">
              <select class="browser-default white-arrow" id="custom-selects">
                <option value="inr" id="inr" selected >₹ INR</span></option>
                <option value="usd" id="usd">$ USD</option>
                <option value="gbp" id="gbp">£ GBP</option>
                <option value="eur" id="eur">€ EUR</option>
            </select>
              </li>
              <li class="highlight d-none d-lg-block">
                <a href="contact-us.html"  class=" get-in main-nav-list"><span class="get-in-touch active cool-link px-3 py-2">Get in Touch<i class="fa fa-arrow-right pl-20"></i> </span></a>
              </li>
              
            </ul>
          </div>
          <div class="col-2 col-lg-2 mt-0">
            <!-- search-form end -->
            <div class="d-flex align-items-center justify-content-end">
              <!-- static-media end -->
              <div class="mobile-menu-toggle theme1 d-lg-none">
                <a href="#offcanvas-mobile-menu" class="offcanvas-toggle">
                <svg viewBox="0 0 700 550">
                <path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top" style="stroke: #fff;"></path>
                <path d="M300,320 L540,320" id="middle" style="stroke: #fff;"></path>
                <path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318)" style="stroke: #fff;"></path>
              </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- header-middle end -->
  </header>
  <!-- header end -->
 `;
  $("#navbar-head").html(navbarHtml);

  $(".nav-products").click(function () {
    $(".mega-menu").toggle();
  });

  // all category hover
  $(".nav-menu-category1").mouseover(function () {
    $(".nav-menu-category1").find("a").removeClass("active");
    $(this).find("a").addClass("active");
    $(".menu-sections").attr("Style", "");
  });

  // products hover
  $("a.main-nav-list").click(function () {
    $("a.main-nav-list").removeClass("active");
    $(this).addClass("active");
    $(".nav-menu-category1.bgg .menu-sections").css("top", "1.7%");
  });

  $(".nav-menu-category1.active").removeClass("active");
  $(this).parents(".menu-sections").removeClass("d-none");
  $(this).parents(".menu-sections").parent().addClass("active");

  //  active-menu for navbar
  if (location.pathname != "/") {
    // Main Nav
    $("a.main-nav-list").each(function () {
      if (this.href === location.href) {
        $(this).addClass("active");
        if ($(this).parents().hasClass("highlight")) {
          $(this)
            .parents("highlight")
            .find("a.main-nav-list")
            .addClass("active");
        }
        return false;
      }
      //  else if ($('body[data-page="product"]')) {
      //   $(this).addClass("active");
      // }
    });
  } else {
    $("a.nav-home").addClass("active");
  }
  //  active-menu for sub category
  if (location.pathname != "/") {
    // Main Nav
    $("a.sub-nav-list").each(function () {
      if (this.href === location.href) {
        $(this).addClass("active");
        if ($(this).parents().hasClass("highlight")) {
          $(this)
            .parents("highlight")
            .find("a.sub-nav-list")
            .addClass("active");
          $(this)
            .parents(".nav-menu-category1")
            .css("background", "white")
            .addClass("bgg");
          $(this).parents(".menu-sections").css("top", "1.7%");
          // $(this).parents('.menu-sections').parent().addClass('active');
        }
        return false;
      }
    });

    // console.log(location.pathname);
  }

  // border for products
  if (location.pathname != "/") {
    $(".sub-nav-list").each(function () {
      if (this.href === location.href) {
        $(this).addClass("border");
      }
    });
  }

  // active-menu for category
  // if (location.pathname != "/") {
  //   // Main Nav
  //   $(".sub-category").each(function () {
  //     if (this.href === location.href) {
  //       $(this).addClass("active");
  //       if ($(this).parents().hasClass("nav-menu-category1")) {
  //         $(this).parents("nav-menu-category1").find(".sub-category").addClass("active");
  //       }
  //       return false;
  //     }
  //   });
  // }

  /*---------------------------
          Commons Variables
       ------------------------------ */
  const $window = $(window),
    $body = $("body");

  /*--------------------------
      Sticky Menu
    ---------------------------- */
  var initialSrc = "./assets/img/logo/logo-white.png";
  var scrollSrc = "./assets/img/logo/logo-black.png";

  $($window).on("scroll", function () {
    var scroll = $($window).scrollTop();
    if (scroll < 150) {
      $("#sticky").removeClass("is-isticky");
      $("#sticky").addClass("main-index");

      $("#custom-selects").addClass("white-arrow");
      $("#custom-selects").removeClass("blue-arrow");
    } else {
      $("#sticky").addClass("is-isticky");
      $("#sticky").removeClass("main-index");

      $("#custom-selects").addClass("blue-arrow");
      $("#custom-selects").removeClass("white-arrow");
    }

    var value = $(this).scrollTop();
    if ($("body").attr("data-page") != "product") {
      if (value > 100) {
        $(".main-logo").attr("src", scrollSrc);
        $(".mobile-menu-toggle.theme1 svg path").css("stroke", "#000");
        // $("#custom-selects").addClass("blue-arrow");
        // $("#custom-selects").removeClass("white-arrow");
      } else {
        $(".main-logo").attr("src", initialSrc);
        $(".mobile-menu-toggle.theme1 svg path").css("stroke", "#fff");
        // $("#custom-selects").addClass("blue-arrow");
        // $("#custom-selects").removeClass("white-arrow");
      }
    }
    if ($("body").attr("data-page") == "product") {
      if (value > 100) {
        $("#custom-selects").addClass("blue-arrow");
        $("#custom-selects").removeClass("white-arrow");
      } else {
        $("#custom-selects").addClass("blue-arrow");
        $("#custom-selects").removeClass("white-arrow");
      }
    }
  });

  if ($("body").attr("data-page") == "product") {
    // console.log("working");
    $(".waves").removeClass("waves");
    $(".main-logo").attr("src", scrollSrc);
    $(".nav-products").addClass("active");
    $("#custom-selects").removeClass("white-arrow");
    $("#custom-selects").addClass("blue-arrow");
  }

  /*---------------------------------
            Off Canvas toggler Function
        -----------------------------------*/
  const $offCanvasToggle = $(".offcanvas-toggle"),
    $offCanvas = $(".offcanvas"),
    $offCanvasOverlay = $(".offcanvas-overlay"),
    $mobileMenuToggle = $(".mobile-menu-toggle");
  $offCanvasToggle.on("click", function (e) {
    e.preventDefault();
    const $this = $(this),
      $target = $this.attr("href");
    $body.addClass("offcanvas-open");
    $($target).addClass("offcanvas-open");
    $offCanvasOverlay.fadeIn();
    if ($this.parent().hasClass("mobile-menu-toggle")) {
      $this.addClass("close");
    }
  });

  $(".offcanvas-close, .offcanvas-overlay").on("click", function (e) {
    e.preventDefault();
    $body.removeClass("offcanvas-open");
    $offCanvas.removeClass("offcanvas-open");
    $offCanvasOverlay.fadeOut();
    $mobileMenuToggle.find("a").removeClass("close");
  });

  /*----------------------------------
           Off Canvas Menu
       -----------------------------------*/
  function mobileOffCanvasMenu() {
    var $offCanvasNav = $(".offcanvas-menu, .overlay-menu"),
      $offCanvasNavSubMenu = $offCanvasNav.find(".offcanvas-submenu");

    /*Add Toggle Button With Off Canvas Sub Menu*/
    $offCanvasNavSubMenu.parent().prepend('<span class="menu-expand"></span>');

    /*Category Sub Menu Toggle*/
    $offCanvasNav.on("click", "li a, .menu-expand", function (e) {
      var $this = $(this);
      if ($this.attr("href") === "#" || $this.hasClass("menu-expand")) {
        e.preventDefault();
        if ($this.siblings("ul:visible").length) {
          $this.parent("li").removeClass("active");
          $this.siblings("ul").slideUp();
          $this.parent("li").find("li").removeClass("active");
          $this.parent("li").find("ul:visible").slideUp();
        } else {
          $this.parent("li").addClass("active");
          $this
            .closest("li")
            .siblings("li")
            .removeClass("active")
            .find("li")
            .removeClass("active");
          $this.closest("li").siblings("li").find("ul:visible").slideUp();
          $this.siblings("ul").slideDown();
        }
      }
    });
  }

  mobileOffCanvasMenu();

  $(".close").on("click", function () {
    $("body").removeClass("open");
  });

  $("#custom-selects").on("change", function (e) {
    let userCurrency = localStorage.getItem("defaultCurrency");
    let selectedCurrency = localStorage.getItem("currentCurrency");

    localStorage.setItem("currentCurrency", e.target.value.toUpperCase());
    // updatePrices(previousCurrency, e.target.value.toUpperCase());
    updatePrices(selectedCurrency, e.target.value.toUpperCase());

    updatePrices(rates[usercurency]);
  });

  // api calling for currrent location finding

  let localCurrency;

  async function myCurrency() {
    let country;
    const key = "b3de4pl6nvcq5gvr";

    let url = `https://api.ipregistry.co/?key=${key}&fields=currency,location.country.name,location.continent.name`;

    const response = await fetch(url);

    var data = await response.json();
    console.log(data);
    country = data.currency.code;
    let country_codes = ["INR", "USD", "EUR", "GBP"];
    if (!country_codes.includes(country)) {
      country = "USD";
    }
    return country;
  }
  if (localStorage.getItem("defaultCurrency") == "undefined") {
    currency();
  }

  let selectedCurrency = localStorage.getItem("currentCurrency");
  let regionalCurrency = localStorage.getItem("defaultCurrency");

  let userCurrency = $("#custom-selects").val();
  let originalCurrency = "INR";

  async function currency() {
    localCurrency = await myCurrency();
    // if (!country_codes.includes(localCurrency)) {
    //   localCurrency = "USD";
    // }
    let currency = localStorage.getItem("defaultCurrency");
    console.log(localCurrency);
    if ((currency = "undefined")) {
      localStorage.setItem("defaultCurrency", localCurrency);
      localStorage.setItem("currentCurrency", localCurrency);
      $("#custom-selects").val(localCurrency.toLowerCase());
    } else {
      let uc = localStorage.getItem("currency");
      localStorage.setItem("currency", uc);
    }
    if (regionalCurrency != selectedCurrency) {
      updatePrices(originalCurrency, selectedCurrency);
    } else if (localCurrency != originalCurrency) {
      updatePrices(originalCurrency, localCurrency);
    }
  }

  function updateAllPrices() {
    function selectChange() {
      $("#custom-selects").val(selectedCurrency.toLowerCase());
      if (userCurrency == "undefined") {
        $("#custom-selects").val(regionalCurrency.toLowerCase());
      }
    }
    selectChange();
    if (originalCurrency != selectedCurrency) {
      changeCurrency = $("#custom-selects").val();
      updatePrices(originalCurrency, changeCurrency.toUpperCase());
    }
  }
  updateAllPrices();
});
// $(".fade").addClass