Tạo header cho website bán hàng sử dụng tailwind css
<div class="main-wrapper">
<!-- Begin lamjp's Header Main Area -->
<header class="header-main_area bg--sapphire">
<div class="header-top_area hidden lg:block">
<div class="container-fluid">
<div class="flex flex-wrap -mx-4">
<div class="xl:w-8/12 lg:w-7/12 px-4">
</div>
<div class="xl:w-4/12 lg:w-5/12 px-4">
<div class="ht-right_area">
<div class="ht-menu">
<ul>
<li>
<a href="javascript:void(0)">
<span class="flex items-center justify-between">
<span>Currency</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
</svg>
</span>
</a>
<ul class="ht-dropdown ht-currency">
<li><a href="javascript:void(0)">€ EUR</a></li>
<li class="active"><a href="javascript:void(0)">£ Pound Sterling</a></li>
<li><a href="javascript:void(0)">$ Us Dollar</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">
<span class="flex items-center justify-between">
<span>Language</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
</svg>
</span>
</a>
<ul class="ht-dropdown">
<li class="active">
<a href="javascript:void(0)"><img src="assets/images/menu/icon/1.jpg" alt="JB's Language Icon" />English</a>
</li>
<li>
<a href="javascript:void(0)"><img src="assets/images/menu/icon/2.jpg" alt="JB's Language Icon" />Français</a>
</li>
</ul>
</li>
<li>
<a href="my-account.html">
<span class="flex items-center justify-between">
<span>Account</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
</svg>
</span>
</a>
<ul class="ht-dropdown ht-my_account">
<li><a href="javascript:void(0)">Register</a></li>
<li class="active"><a href="javascript:void(0)">Login</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header-top_area header-sticky bg--sapphire">
<div class="container-fluid mx-auto px-4">
<div class="flex flex-wrap -mx-4">
<div class="w-full xl:w-8/12 lg:w-7/12 px-4 hidden lg:block">
<div class="main-menu_area position-relative">
<nav class="main-nav">
<ul>
<li class="dropdown-holder active">
<a href="index.html">Home</a>
<ul class="hm-dropdown">
<li><a href="index.html">Home One</a></li>
<li><a href="index-2.html">Home Two</a></li>
<li><a href="index-3.html">Home Three</a></li>
</ul>
</li>
<li class="megamenu-holder">
<a href="shop-left-sidebar.html">Shop <i class="ion-ios-arrow-down"></i></a>
<ul class="hm-megamenu">
<li>
<span class="megamenu-title">Shop Page Layout</span>
<ul>
<li><a href="shop-grid-fullwidth.html">Grid Fullwidth</a></li>
<li><a href="shop-left-sidebar.html">Left Sidebar</a></li>
<li><a href="shop-right-sidebar.html">Right Sidebar</a></li>
<li><a href="shop-list-fullwidth.html">List Fullwidth</a></li>
<li><a href="shop-list-left-sidebar.html">List Left Sidebar</a></li>
<li><a href="shop-list-right-sidebar.html">List Right Sidebar</a></li>
</ul>
</li>
<li>
<span class="megamenu-title">Single Product Style</span>
<ul>
<li><a href="single-product-gallery-left.html">Gallery Left</a></li>
<li><a href="single-product-gallery-right.html">Gallery Right</a></li>
<li><a href="single-product-tab-style-left.html">Tab Style Left</a></li>
<li><a href="single-product-tab-style-right.html">Tab Style Right</a></li>
<li><a href="single-product-sticky-left.html">Sticky Left</a></li>
<li><a href="single-product-sticky-right.html">Sticky Right</a></li>
</ul>
</li>
<li>
<span class="megamenu-title">Single Product Type</span>
<ul>
<li><a href="single-product.html">Single Product</a></li>
<li><a href="single-product-sale.html">Single Product Sale</a></li>
<li><a href="single-product-group.html">Single Product Group</a></li>
<li><a href="single-product-variable.html">Single Product Variable</a></li>
<li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
<li><a href="single-product-slider.html">Single Product Slider</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">Specials</a></li>
<li class="">
<a href="javascript:void(0)">Pages <i class="ion-ios-arrow-down"></i></a>
<ul class="hm-dropdown">
<li><a href="my-account.html">My Account</a></li>
<li><a href="login-register.html">Login | Register</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
<li><a href="cart.html">Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="compare.html">Compare</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="404.html">404 Error</a></li>
</ul>
</li>
<li class=""><a href="about-us.html">About Us</a></li>
<li class=""><a href="contact.html">Contact</a></li>
<li class="">
<a href="blog-left-sidebar.html">Blog <i class="ion-ios-arrow-down"></i></a>
<ul class="hm-dropdown">
<li>
<a href="blog-left-sidebar.html">Grid View</a>
<ul class="hm-dropdown hm-sub_dropdown">
<li><a href="blog-2-column.html">Column Two</a></li>
<li><a href="blog-3-column.html">Column Three</a></li>
<li><a href="blog-left-sidebar.html">Left Sidebar</a></li>
<li><a href="blog-right-sidebar.html">Right Sidebar</a></li>
</ul>
</li>
<li>
<a href="blog-list-left-sidebar.html">List View</a>
<ul class="hm-dropdown hm-sub_dropdown">
<li><a href="blog-list-fullwidth.html">List Fullwidth</a></li>
<li><a href="blog-list-left-sidebar.html">List Left Sidebar</a></li>
<li><a href="blog-list-right-sidebar.html">List Right Sidebar</a></li>
</ul>
</li>
<li>
<a href="blog-details-left-sidebar.html">Blog Details</a>
<ul class="hm-dropdown hm-sub_dropdown">
<li><a href="blog-details-left-sidebar.html">Left Sidebar</a></li>
<li><a href="blog-details-right-sidebar.html">Right Sidebar</a></li>
</ul>
</li>
<li>
<a href="blog-gallery-format.html">Blog Format</a>
<ul class="hm-dropdown hm-sub_dropdown">
<li><a href="blog-gallery-format.html">Gallery Format</a></li>
<li><a href="blog-audio-format.html">Audio Format</a></li>
<li><a href="blog-video-format.html">Video Format</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="sm:w-8/12 block lg:hidden">
<div class="header-logo_area header-sticky_logo">
<a href="index.html">
lamjp's Logo
</a>
</div>
</div>
<div class="xl:w-4/12 lg:w-5/12 sm:w-9/12">
<div class="header-right_area">
<ul>
<li class="mobile-menu_wrap d-flex lg:hidden">
<a href="#mobileMenu" class="mobile-menu_btn toolbar-btn color--white">
<i class="ion-navicon"></i>
</a>
</li>
<li class="minicart-wrap">
<a href="#miniCart" class="minicart-btn toolbar-btn">
<span class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" class="cursor-pointer hover:fill-[#007bff] inline" viewBox="0 0 512 512">
<path d="M164.96 300.004h.024c.02 0 .04-.004.059-.004H437a15.003 15.003 0 0 0 14.422-10.879l60-210a15.003 15.003 0 0 0-2.445-13.152A15.006 15.006 0 0 0 497 60H130.367l-10.722-48.254A15.003 15.003 0 0 0 105 0H15C6.715 0 0 6.715 0 15s6.715 15 15 15h77.969c1.898 8.55 51.312 230.918 54.156 243.71C131.184 280.64 120 296.536 120 315c0 24.812 20.188 45 45 45h272c8.285 0 15-6.715 15-15s-6.715-15-15-15H165c-8.27 0-15-6.73-15-15 0-8.258 6.707-14.977 14.96-14.996zM477.114 90l-51.43 180H177.032l-40-180zM150 405c0 24.813 20.188 45 45 45s45-20.188 45-45-20.188-45-45-45-45 20.188-45 45zm45-15c8.27 0 15 6.73 15 15s-6.73 15-15 15-15-6.73-15-15 6.73-15 15-15zm167 15c0 24.813 20.188 45 45 45s45-20.188 45-45-20.188-45-45-45-45 20.188-45 45zm45-15c8.27 0 15 6.73 15 15s-6.73 15-15 15-15-6.73-15-15 6.73-15 15-15zm0 0" data-original="#000000"></path>
</svg>
<span class="absolute left-auto -ml-1 top-0 rounded-full bg-red-500 px-1 py-0 text-xs text-white">0</span>
</span>
</a>
</li>
<li class="contact-us_wrap">
<a href="tel://+123123321345"><i class="ion-android-call"></i>+123 321 345</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="header-middle_area">
<div class="container-fluid">
<div class="grid grid-cols-12 items-center justify-between gap-4 mb-4">
<div class="custom-logo_col col-span-8 lg:col-span-3 flex items-center">
<div class="header-logo_area text-4xl">
<a href="index.html">lamjp's Logo</a>
</div>
</div>
<div class="custom-search_col lg:col-span-5 hidden lg:block">
<div class="hm-form_area">
<form action="#" class="hm-searchbox">
<input type="text" placeholder="Enter your search key ..." />
<button class="header-search_btn" type="submit">
<i class="ion-ios-search-strong"><span>Search</span></i>
</button>
</form>
</div>
</div>
<div class="custom-cart_col col-span-4 lg:col-span-4 flex justify-end">
<div class="header-right_area w-full">
<ul class="flex items-center justify-end space-x-4">
<li class="minicart-wrap">
<a href="#miniCart" class="minicart-btn toolbar-btn">
<span class="px-3 inline-flex items-center space-x-4 justify-between">
<span class="hidden lg:inline-flex">Your Cart</span>
<span class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" class="cursor-pointer fill-[#333] inline"
viewBox="0 0 512 512">
<path
d="M164.96 300.004h.024c.02 0 .04-.004.059-.004H437a15.003 15.003 0 0 0 14.422-10.879l60-210a15.003 15.003 0 0 0-2.445-13.152A15.006 15.006 0 0 0 497 60H130.367l-10.722-48.254A15.003 15.003 0 0 0 105 0H15C6.715 0 0 6.715 0 15s6.715 15 15 15h77.969c1.898 8.55 51.312 230.918 54.156 243.71C131.184 280.64 120 296.536 120 315c0 24.812 20.188 45 45 45h272c8.285 0 15-6.715 15-15s-6.715-15-15-15H165c-8.27 0-15-6.73-15-15 0-8.258 6.707-14.977 14.96-14.996zM477.114 90l-51.43 180H177.032l-40-180zM150 405c0 24.813 20.188 45 45 45s45-20.188 45-45-20.188-45-45-45-45 20.188-45 45zm45-15c8.27 0 15 6.73 15 15s-6.73 15-15 15-15-6.73-15-15 6.73-15 15-15zm167 15c0 24.813 20.188 45 45 45s45-20.188 45-45-20.188-45-45-45-45 20.188-45 45zm45-15c8.27 0 15 6.73 15 15s-6.73 15-15 15-15-6.73-15-15 6.73-15 15-15zm0 0"
data-original="#000000"></path>
</svg>
<span class="absolute left-auto -ml-1 top-2 rounded-full bg-red-500 px-1 py-0 text-xs text-white">0</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
</svg>
</span>
</a>
</li>
<li class="contact-us_wrap px-3">
<a href="tel://+123123321345"><i class="ion-android-call"></i>+123 321 345</a>
</li>
</ul>
</div>
</div>
</div>
<div class="grid grid-cols-12 items-center justify-between gap-4">
<div class="custom-category_col col-span-8 md:col-span-3 xl:col-span-2 h-full">
<div class="category-menu category-menu-hidden h-full">
<div id="category-heading" class="category-heading h-full min-h-14 flex items-center justify-start lg:bg-[#050406] lg:justify-between ">
<div class="w-full inline-flex items-center justify-start space-x-3 px-2 text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
</svg>
<h2 class="categories-toggle uppercase mb-0 text-white text-xs lg:not-italic">
All Categories
</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="text-white size-5 font-bold">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
</svg>
</div>
</div>
<div id="cate-toggle" class="category-menu-list min-w-[300px] md:min-w-auto">
<ul>
<li class="right-menu">
<a href="shop-left-sidebar.html" class="flex items-center justify-between pr-6">
Car Parts
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 absolute top-1/2 right-0 transform -translate-y-1/2 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
<ul class="cat-mega-menu">
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">Active body control</a>
<ul>
<li><a href="shop-left-sidebar.html">Aluminum Nonstick</a></li>
<li><a href="shop-left-sidebar.html">Calphalon</a></li>
<li><a href="shop-left-sidebar.html">Contemporary</a></li>
<li><a href="shop-left-sidebar.html">Hard-Anodized</a></li>
</ul>
</li>
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">Battery Indicator</a>
<ul>
<li><a href="shop-left-sidebar.html">Sanai laptops</a></li>
<li><a href="shop-left-sidebar.html">Byteflight</a></li>
<li><a href="shop-left-sidebar.html">EXcaliberPC</a></li>
<li><a href="shop-left-sidebar.html">Gaming Laptops</a></li>
</ul>
</li>
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">Remote Starter</a>
<ul>
<li><a href="shop-left-sidebar.html">Dual Core</a></li>
<li><a href="shop-left-sidebar.html">Gaming Monitors</a></li>
<li><a href="shop-left-sidebar.html">GPS Monitors</a></li>
<li><a href="shop-left-sidebar.html">Heat Shield</a></li>
</ul>
</li>
</ul>
</li>
<li class="right-menu">
<a href="shop-left-sidebar.html" class="flex items-center justify-between pr-6">
Tools & Accessories
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 absolute top-1/2 right-0 transform -translate-y-1/2 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
<ul class="cat-mega-menu cat-mega-menu-2">
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">Drills</a>
<ul>
<li><a href="shop-left-sidebar.html">Angle Drills</a></li>
<li><a href="shop-left-sidebar.html">Combi Drills</a></li>
<li><a href="shop-left-sidebar.html">Drill Drivers</a></li>
<li><a href="shop-left-sidebar.html">PercussionDrills</a></li>
</ul>
</li>
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">Nail Guns</a>
<ul>
<li><a href="shop-left-sidebar.html">Air Nail Guns</a></li>
<li><a href="shop-left-sidebar.html">Cordless Nail Guns</a></li>
<li><a href="shop-left-sidebar.html">Electric Nail Guns</a></li>
<li><a href="shop-left-sidebar.html">Gas Nail Guns</a></li>
</ul>
</li>
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">Sanders</a>
<ul>
<li><a href="shop-left-sidebar.html">1/2 Sheet Sanders</a></li>
<li><a href="shop-left-sidebar.html">1/4 Sheet Sanders</a></li>
<li><a href="shop-left-sidebar.html">Belt Sanders</a></li>
<li><a href="shop-left-sidebar.html">Drywall Sanders</a></li>
</ul>
</li>
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">Saws</a>
<ul>
<li><a href="shop-left-sidebar.html">Circular Saws</a></li>
<li><a href="shop-left-sidebar.html">Jigsaws</a></li>
<li><a href="shop-left-sidebar.html">Mitre Saws</a></li>
<li><a href="shop-left-sidebar.html">Reciprocating Saws</a></li>
</ul>
</li>
</ul>
</li>
<li class="right-menu">
<a href="shop-left-sidebar.html" class="flex items-center justify-between pr-6">
Suspension Systems
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 absolute top-1/2 right-0 transform -translate-y-1/2 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
<ul class="cat-mega-menu cat-mega-menu-3">
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">Clothing</a>
<ul>
<li><a href="shop-left-sidebar.html">Cuisinart</a></li>
<li><a href="shop-left-sidebar.html">Homeinart</a></li>
<li><a href="shop-left-sidebar.html">Kettle Stainless</a></li>
<li><a href="shop-left-sidebar.html">Steel Stovetop</a></li>
</ul>
</li>
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">Jewelry</a>
<ul>
<li><a href="shop-left-sidebar.html">Hard Anodized</a></li>
<li><a href="shop-left-sidebar.html">Scratch Resistant</a></li>
<li><a href="shop-left-sidebar.html">Thermo-Spot</a></li>
<li><a href="shop-left-sidebar.html">Ultimate</a></li>
</ul>
</li>
</ul>
</li>
<li class="right-menu">
<a href="shop-left-sidebar.html" class="flex items-center justify-between pr-6">
Turbo System
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 absolute top-1/2 right-0 transform -translate-y-1/2 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
<ul class="cat-mega-menu">
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">BMW</a>
<ul>
<li><a href="shop-left-sidebar.html">Dining Chairs</a></li>
<li><a href="shop-left-sidebar.html">Dining Tables</a></li>
<li><a href="shop-left-sidebar.html">Gramophone</a></li>
<li><a href="shop-left-sidebar.html">Sideboards</a></li>
</ul>
</li>
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">FORD</a>
<ul>
<li><a href="shop-left-sidebar.html">Chairs & Sofas</a></li>
<li><a href="shop-left-sidebar.html">Chest</a></li>
<li><a href="shop-left-sidebar.html">Loungers</a></li>
<li><a href="shop-left-sidebar.html">Sets</a></li>
</ul>
</li>
<li class="right-menu cat-mega-title">
<a href="shop-left-sidebar.html">POSCHER</a>
<ul>
<li><a href="shop-left-sidebar.html">Bed</a></li>
<li><a href="shop-left-sidebar.html">Daybed</a></li>
<li><a href="shop-left-sidebar.html">Futon</a></li>
<li><a href="shop-left-sidebar.html">Hammock</a></li>
</ul>
</li>
</ul>
</li>
<li class="right-menu">
<a href="shop-left-sidebar.html" class="flex items-center justify-between pr-6">
Oils & Fluids
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 absolute top-1/2 right-0 transform -translate-y-1/2 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
<ul class="cat-dropdown">
<li>
<a href="shop-left-sidebar.html">Daylesford</a>
<a href="shop-left-sidebar.html">Delaware</a>
<a href="shop-left-sidebar.html">Fayence</a>
<a href="shop-left-sidebar.html">Franzea</a>
<a href="shop-left-sidebar.html">Mable</a>
<a href="shop-left-sidebar.html">Mobo</a>
<a href="shop-left-sidebar.html">Pippins</a>
</li>
</ul>
</li>
<li class="right-menu">
<a href="shop-left-sidebar.html" class="flex items-center justify-between pr-6">
Exterior
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 absolute top-1/2 right-0 transform -translate-y-1/2 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a>
<ul class="cat-dropdown cat-dropdown-2">
<li>
<a href="shop-left-sidebar.html">Coffee & side tables</a>
<a href="shop-left-sidebar.html">Living room lighting</a>
<a href="shop-left-sidebar.html">Living room storage</a>
<a href="shop-left-sidebar.html">Living room textiles & rugs</a>
</li>
</ul>
</li>
<li><a href="shop-left-sidebar.html" class="flex items-center justify-between pr-6">
Body Parts
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 absolute top-1/2 right-0 transform -translate-y-1/2 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a></li>
<li><a href="shop-left-sidebar.html" class="flex items-center justify-between pr-6">
Interior
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 absolute top-1/2 right-0 transform -translate-y-1/2 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a></li>
<li><a href="shop-left-sidebar.html" class="flex items-center justify-between pr-6">
Audio
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 absolute top-1/2 right-0 transform -translate-y-1/2 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a></li>
<li><a href="shop-left-sidebar.html" class="flex items-center justify-between pr-6">
End Tables
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 absolute top-1/2 right-0 transform -translate-y-1/2 hidden lg:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</a></li>
<li class="rx-child"><a href="shop-left-sidebar.html">Uncategorized</a></li>
<li class="rx-child"><a href="shop-left-sidebar.html">Appliances</a></li>
<li class="rx-parent">
<a class="rx-default">More Categories</a>
<a class="rx-show">Collapse</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-span-4 md:col-span-9 xl:col-span-10">
<div class="mobile-menu_wrap flex lg:hidden items-center justify-end">
<a href="#mobileMenu" class="inline-flex items-center toolbar-btn color--white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25" />
</svg>
<span>MENU</span>
</a>
</div>
<div class="main-menu-block hidden lg:flex items-center justify-start">
<div class="main-menu_area position-relative w-full">
<nav class="main-nav w-full">
<ul>
<li class="dropdown-holder active">
<a href="index.html" class="hover:text-gray-100">
<span class="inline-flex items-center">
<span>Home</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
</svg>
</span>
</a>
<ul class="hm-dropdown">
<li><a href="index.html">Home One</a></li>
<li><a href="index-2.html">Home Two</a></li>
<li><a href="index-3.html">Home Three</a></li>
</ul>
</li>
<li class="megamenu-holder">
<a href="shop-left-sidebar.html">
<span class="inline-flex items-center">
<span>Shop</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
</svg>
</span>
</a>
<ul class="hm-megamenu">
<li>
<span class="megamenu-title">Shop Page Layout</span>
<ul>
<li><a href="shop-grid-fullwidth.html">Grid Fullwidth</a></li>
<li><a href="shop-left-sidebar.html">Left Sidebar</a></li>
<li><a href="shop-right-sidebar.html">Right Sidebar</a></li>
<li><a href="shop-list-fullwidth.html">List Fullwidth</a></li>
<li><a href="shop-list-left-sidebar.html">List Left Sidebar</a></li>
<li><a href="shop-list-right-sidebar.html">List Right Sidebar</a></li>
</ul>
</li>
<li>
<span class="megamenu-title">Single Product Style</span>
<ul>
<li><a href="single-product-gallery-left.html">Gallery Left</a></li>
<li><a href="single-product-gallery-right.html">Gallery Right</a></li>
<li><a href="single-product-tab-style-left.html">Tab Style Left</a></li>
<li><a href="single-product-tab-style-right.html">Tab Style Right</a></li>
<li><a href="single-product-sticky-left.html">Sticky Left</a></li>
<li><a href="single-product-sticky-right.html">Sticky Right</a></li>
</ul>
</li>
<li>
<span class="megamenu-title">Single Product Type</span>
<ul>
<li><a href="single-product.html">Single Product</a></li>
<li><a href="single-product-sale.html">Single Product Sale</a></li>
<li><a href="single-product-group.html">Single Product Group</a></li>
<li><a href="single-product-variable.html">Single Product Variable</a></li>
<li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
<li><a href="single-product-slider.html">Single Product Slider</a></li>
</ul>
</li>
</ul>
</li>
<li class="">
<a href="javascript:void(0)">
<span class="inline-flex items-center">
<span>Page</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
</svg>
</span>
</a>
<ul class="hm-dropdown">
<li><a href="my-account.html">My Account</a></li>
<li><a href="login-register.html">Login | Register</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
<li><a href="cart.html">Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="compare.html">Compare</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="404.html">404 Error</a></li>
</ul>
</li>
<li class="">
<a href="blog-left-sidebar.html">
<span class="inline-flex items-center">
<span>Blog</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
</svg>
</span>
</a>
<ul class="hm-dropdown">
<li>
<a href="blog-left-sidebar.html">Grid View</a>
<ul class="hm-dropdown hm-sub_dropdown">
<li><a href="blog-2-column.html">Column Two</a></li>
<li><a href="blog-3-column.html">Column Three</a></li>
<li><a href="blog-left-sidebar.html">Left Sidebar</a></li>
<li><a href="blog-right-sidebar.html">Right Sidebar</a></li>
</ul>
</li>
<li>
<a href="blog-list-left-sidebar.html">List View</a>
<ul class="hm-dropdown hm-sub_dropdown">
<li><a href="blog-list-fullwidth.html">List Fullwidth</a></li>
<li><a href="blog-list-left-sidebar.html">List Left Sidebar</a></li>
<li><a href="blog-list-right-sidebar.html">List Right Sidebar</a></li>
</ul>
</li>
<li>
<a href="blog-details-left-sidebar.html">Blog Details</a>
<ul class="hm-dropdown hm-sub_dropdown">
<li><a href="blog-details-left-sidebar.html">Left Sidebar</a></li>
<li><a href="blog-details-right-sidebar.html">Right Sidebar</a></li>
</ul>
</li>
<li>
<a href="blog-gallery-format.html">Blog Format</a>
<ul class="hm-dropdown hm-sub_dropdown">
<li><a href="blog-gallery-format.html">Gallery Format</a></li>
<li><a href="blog-audio-format.html">Audio Format</a></li>
<li><a href="blog-video-format.html">Video Format</a></li>
</ul>
</li>
</ul>
</li>
<li class=""><a href="about-us.html">About Us</a></li>
<li class=""><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas-minicart_wrapper" id="miniCart">
<div class="offcanvas-menu-inner">
<a href="#" class="btn-close flex items-center justify-center bg-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</a>
<div class="minicart-content">
<div class="minicart-heading">
<h4>Shopping Cart</h4>
</div>
<ul class="minicart-list">
<li class="minicart-product">
<a class="product-item_remove" href="javascript:void(0)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
<path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</a>
<div class="product-item_img">
<img src="assets/images/product/small-size/1.jpg" alt="lamjp's Product Image" />
</div>
<div class="product-item_content">
<a class="product-item_title" href="shop-left-sidebar.html">Autem ipsa ad</a>
<span class="product-item_quantity">1 x $145.80</span>
</div>
</li>
<li class="minicart-product">
<a class="product-item_remove" href="javascript:void(0)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
<path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</a>
<div class="product-item_img">
<img src="assets/images/product/small-size/2.jpg" alt="lamjp's Product Image" />
</div>
<div class="product-item_content">
<a class="product-item_title" href="shop-left-sidebar.html">Tenetur illum amet</a>
<span class="product-item_quantity">1 x $150.80</span>
</div>
</li>
<li class="minicart-product">
<a class="product-item_remove" href="javascript:void(0)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
<path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</a>
<div class="product-item_img">
<img src="assets/images/product/small-size/3.jpg" alt="lamjp's Product Image" />
</div>
<div class="product-item_content">
<a class="product-item_title" href="shop-left-sidebar.html">Non doloremque placeat</a>
<span class="product-item_quantity">1 x $165.80</span>
</div>
</li>
</ul>
</div>
<div class="minicart-item_total">
<span>Subtotal</span>
<span class="ammount">$462.40</span>
</div>
<div class="minicart-btn_area">
<a href="cart.html" class="block py-2 rounded-lg bg-gray-500 text-white text-uppercase text-center font-bold hover:bg-primary-700">Minicart</a>
</div>
<div class="minicart-btn_area">
<a href="checkout.html" class="block py-2 rounded-lg bg-gray-500 text-white text-uppercase text-center font-bold hover:bg-primary-700">Checkout</a>
</div>
</div>
</div>
<div class="mobile-menu_wrapper" id="mobileMenu">
<div class="offcanvas-menu-inner">
<div class="container">
<a href="#" class="btn-close flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</a>
<div class="offcanvas-inner_search">
<form action="#" class="inner-searchbox">
<input type="text" placeholder="Search for item..." />
<button class="search_btn" type="submit"><i class="ion-ios-search-strong"></i></button>
</form>
</div>
<nav class="offcanvas-navigation">
<ul class="mobile-menu">
<li class="menu-item-has-children active">
<a href="index.html"><span class="mm-text">Home</span></a>
<ul class="sub-menu">
<li>
<a href="index.html">
<span class="mm-text">Home One</span>
</a>
</li>
<li>
<a href="index-2.html">
<span class="mm-text">Home Two</span>
</a>
</li>
<li>
<a href="index-3.html">
<span class="mm-text">Home Three</span>
</a>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="shop-left-sidebar.html">
<span class="mm-text">Shop</span>
</a>
<ul class="sub-menu">
<li class="menu-item-has-children">
<a href="shop-left-sidebar.html">
<span class="mm-text">Grid View</span>
</a>
<ul class="sub-menu">
<li>
<a href="shop-grid-fullwidth.html">
<span class="mm-text">Column Three</span>
</a>
</li>
<li>
<a href="shop-4-column.html">
<span class="mm-text">Column Four</span>
</a>
</li>
<li>
<a href="shop-left-sidebar.html">
<span class="mm-text">Left Sidebar</span>
</a>
</li>
<li>
<a href="shop-right-sidebar.html">
<span class="mm-text">Right Sidebar</span>
</a>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="shop-list-left-sidebar.html">
<span class="mm-text">Shop List</span>
</a>
<ul class="sub-menu">
<li>
<a href="shop-list-fullwidth.html">
<span class="mm-text">Full Width</span>
</a>
</li>
<li>
<a href="shop-list-left-sidebar.html">
<span class="mm-text">Left Sidebar</span>
</a>
</li>
<li>
<a href="shop-list-right-sidebar.html">
<span class="mm-text">Right Sidebar</span>
</a>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="single-product-gallery-left.html">
<span class="mm-text">Single Product Style</span>
</a>
<ul class="sub-menu">
<li>
<a href="single-product-gallery-left.html">
<span class="mm-text">Gallery Left</span>
</a>
</li>
<li>
<a href="single-product-gallery-right.html">
<span class="mm-text">Gallery Right</span>
</a>
</li>
<li>
<a href="single-product-tab-style-left.html">
<span class="mm-text">Tab Style Left</span>
</a>
</li>
<li>
<a href="single-product-tab-style-right.html">
<span class="mm-text">Tab Style Right</span>
</a>
</li>
<li>
<a href="single-product-sticky-left.html">
<span class="mm-text">Sticky Left</span>
</a>
</li>
<li>
<a href="single-product-sticky-right.html">
<span class="mm-text">Sticky Right</span>
</a>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="single-product.html">
<span class="mm-text">Single Product Type</span>
</a>
<ul class="sub-menu">
<li>
<a href="single-product.html">
<span class="mm-text">Single Product</span>
</a>
</li>
<li>
<a href="single-product-sale.html">
<span class="mm-text">Single Product Sale</span>
</a>
</li>
<li>
<a href="single-product-group.html">
<span class="mm-text">Single Product Group</span>
</a>
</li>
<li>
<a href="single-product-variable.html">
<span class="mm-text">Single Product Variable</span>
</a>
</li>
<li>
<a href="single-product-affiliate.html">
<span class="mm-text">Single Product Affiliate</span>
</a>
</li>
<li>
<a href="single-product-slider.html">
<span class="mm-text">Single Product Slider</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="blog-left-sidebar.html">
<span class="mm-text">Blog</span>
</a>
<ul class="sub-menu">
<li class="menu-item-has-children has-children">
<a href="blog-left-sidebar.html">
<span class="mm-text">Grid View</span>
</a>
<ul class="sub-menu">
<li>
<a href="blog-2-column.html">
<span class="mm-text">Column Two</span>
</a>
</li>
<li>
<a href="blog-3-column.html">
<span class="mm-text">Column Three</span>
</a>
</li>
<li>
<a href="blog-left-sidebar.html">
<span class="mm-text">Left Sidebar</span>
</a>
</li>
<li>
<a href="blog-right-sidebar.html">
<span class="mm-text">Right Sidebar</span>
</a>
</li>
</ul>
</li>
<li class="menu-item-has-children has-children">
<a href="blog-list-left-sidebar.html">
<span class="mm-text">List View</span>
</a>
<ul class="sub-menu">
<li>
<a href="blog-list-fullwidth.html">
<span class="mm-text">List Fullwidth</span>
</a>
</li>
<li>
<a href="blog-list-left-sidebar.html">
<span class="mm-text">List Left Sidebar</span>
</a>
</li>
<li>
<a href="blog-list-right-sidebar.html">
<span class="mm-text">List Right Sidebar</span>
</a>
</li>
</ul>
</li>
<li class="menu-item-has-children has-children">
<a href="blog-details-left-sidebar.html">
<span class="mm-text">Blog Details</span>
</a>
<ul class="sub-menu">
<li>
<a href="blog-details-left-sidebar.html">
<span class="mm-text">Left Sidebar</span>
</a>
</li>
<li>
<a href="blog-details-right-sidebar.html">
<span class="mm-text">Right Sidebar</span>
</a>
</li>
</ul>
</li>
<li class="menu-item-has-children has-children">
<a href="blog-gallery-format.html">
<span class="mm-text">Blog Format</span>
</a>
<ul class="sub-menu">
<li>
<a href="blog-gallery-format.html">
<span class="mm-text">Gallery Format</span>
</a>
</li>
<li>
<a href="blog-audio-format.html">
<span class="mm-text">Audio Format</span>
</a>
</li>
<li>
<a href="blog-video-format.html">
<span class="mm-text">Video Format</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="index.html">
<span class="mm-text">Pages</span>
</a>
<ul class="sub-menu">
<li>
<a href="my-account.html">
<span class="mm-text">My Account</span>
</a>
</li>
<li>
<a href="login-register.html">
<span class="mm-text">Login | Register</span>
</a>
</li>
<li>
<a href="wishlist.html">
<span class="mm-text">Wishlist</span>
</a>
</li>
<li>
<a href="cart.html">
<span class="mm-text">Cart</span>
</a>
</li>
<li>
<a href="checkout.html">
<span class="mm-text">Checkout</span>
</a>
</li>
<li>
<a href="compare.html">
<span class="mm-text">Compare</span>
</a>
</li>
<li>
<a href="faq.html">
<span class="mm-text">FAQ</span>
</a>
</li>
<li>
<a href="404.html">
<span class="mm-text">Error 404</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<nav class="offcanvas-navigation user-setting_area">
<ul class="mobile-menu">
<li class="menu-item-has-children active">
<a href="javascript:void(0)"><span class="mm-text">User Setting</span></a>
<ul class="sub-menu">
<li>
<a href="my-account.html">
<span class="mm-text">My Account</span>
</a>
</li>
<li>
<a href="login-register.html">
<span class="mm-text">Login | Register</span>
</a>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="javascript:void(0)"><span class="mm-text">Currency</span></a>
<ul class="sub-menu">
<li>
<a href="javascript:void(0)">
<span class="mm-text">EUR €</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="mm-text">USD $</span>
</a>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="javascript:void(0)"><span class="mm-text">Language</span></a>
<ul class="sub-menu">
<li>
<a href="javascript:void(0)">
<span class="mm-text">English</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="mm-text">Français</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="mm-text">Romanian</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="mm-text">Japanese</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- lamjp's Header Main Area End Here -->
</div>/******************************
25 - Section - Header
******************************/
/*
Primary Color: #29201B;
Primary Color Light: #342923;
Body Text Color: #999999;
Heading Color: #333333;
Border Color: #e5e5e5;
Body Font Family: 'Work Sans', sans-serif;
*/
:root {
--primary-color: #29201B;
--primary-color-bold: #050406;;
--body-text-color: #999999;
--heading-color: #333333;
--border-color: #e5e5e5;
--body-font-family: sans-serif;
}
@import url("https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700,800,900&display=swap");
/*----------------------------------------*/
/* 00 - Base - Typography
/*----------------------------------------*/
body {
font-family: "Helvetica Neue",Helvetica;
color: var(--body-text-color);
font-size: 14px;
line-height: 24px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Work Sans", sans-serif;
color: #333333;
line-height: 1;
font-weight: 700;
}
p {
font-family: "Work Sans", sans-serif;
color: #999999;
font-size: 14px;
line-height: 24px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
input {
color: #888888;
}
input::-webkit-input-placeholder {
color: #888888;
}
input::-moz-placeholder {
color: #888888;
}
input:-ms-input-placeholder {
color: #888888;
}
input::-ms-input-placeholder {
color: #888888;
}
input::placeholder {
color: #888888;
}
._keyfocus :focus,
input:not([disabled]):focus,
textarea:not([disabled]):focus,
select:not([disabled]):focus {
outline: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
max-width: 100%;
}
.img-full {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
}
a {
color: #999999;
}
a:hover {
text-decoration: none;
}
a:not([href]):not([tabindex]):hover {
color: var(--primary-color);
}
a,
a:hover,
a:focus,
a:active,
button,
button:focus,
input,
select,
textarea,
.slick-slide {
outline: none;
}
button {
cursor: pointer;
border: none;
padding: 0;
outline: none;
background: transparent;
}
/* ---lamjp's Blog Section Default Youtube & Soundcloud Height--- */
.grid-view_area .embed-responsive:before {
padding-top: 64.50%;
}
.column-three_area .embed-responsive:before {
padding-top: 64.50%;
}
/*----------------------------------------*/
/* 03 - Utilities - Helper
/*----------------------------------------*/
/* ---lamjp's Custom Container--- */
.container-fluid {
padding: 0 75px;
}
@media (max-width: 1599px) {
.container-fluid {
padding: 0 15px;
}
}
/* ---Base Transition--- */
button, .global-overlay, .quantity .cart-plus-minus > .qtybutton, .price-filter .ui-slider-handle, .img-hover_effect, .img-hover-effect_area .single-product, .img-hover-effect_area-2, .popup_wrapper, .popup_wrapper .test .popup_off, .popup_wrapper .subscribe_area .subscribe-form-group form.subscribe-form button, .lamjp-btn,
.lamjp-btn-2,
.lamjp-banner_btn,
.lamjp-btn-bondi_blue,
.lamjp-btn_fullwidth,
.lamjp-compare_btn,
.lamjp-filter_btn,
.lamjp-btn_dark,
.lamjp-btn_limerick, .main-slider .slick-dots li, .mobile-menu_wrapper .offcanvas-menu-inner,
.offcanvas-minicart_wrapper .offcanvas-menu-inner,
.offcanvas-search_wrapper .offcanvas-menu-inner, .mobile-menu_wrapper.open .offcanvas-menu-inner,
.offcanvas-minicart_wrapper.open .offcanvas-menu-inner,
.offcanvas-search_wrapper.open .offcanvas-menu-inner, .btn-close, .btn-close > i, .offcanvas-navigation .mobile-menu li > .menu-expand, .offcanvas-menu_wrapper .offcanvas-menu-inner, .offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-list > li.minicart-product .product-item_img, .category-menu .category-menu-list > ul > li.right-menu > a:after, .cat-mega-menu, .cat-dropdown, .product-slide_item .inner-slide .single-product, .product-slide_item .inner-slide .single-product .product-img > a .secondary-img, .product-slide_item .inner-slide .single-product .product-img .add-actions, .product-slide_item .inner-slide .single-product .product-img .add-actions > ul li > a, .product-slide_item .inner-slide .single-product .product-content, .special-product_slider .slide-item .inner-slide .single-product .product-img > a .secondary-img,
.special-product_slider-2 .slide-item .inner-slide .single-product .product-img > a .secondary-img, .newsletter-form_wrap .subscribe-form .newsletter-btn, .modal-wrapper.modal, .modal-wrapper .modal-dialog .modal-content .modal-body .close, .modal-wrapper .modal-dialog .modal-content .modal-body .modal-inner-area .sp-img_slider-nav .slick-slide img, .modal-wrapper .modal-dialog .modal-content .modal-body .modal-inner-area .sp-content .lamjp-social_btn > ul > li, .modal-wrapper .modal-dialog .modal-content .modal-body .modal-inner-area .sp-content .lamjp-social_btn > ul > li .dropdown, .modal-wrapper .modal-dialog .modal-content .modal-body .modal-inner-area .sp-content .lamjp-social_btn > ul > li .dropdown > li, .slider-navigation_style-4 .slick-arrow, .main-menu-block .main-menu_area > nav > ul > li .hm-dropdown, .main-menu-block .main-menu_area > nav > ul > li > ul > li > a > i, .main-menu-block .main-menu_area > nav > ul > li.megamenu-holder .hm-megamenu, .header-top_area .ht-menu > ul > li .ht-dropdown, .header-right_area > ul > li.minicart-wrap, .shop-product-wrap.listview > [class*="col-"] .list-slide_item .single-product .product-img > a .secondary-img, .shop-product-wrap > [class*="col-"], .sp-area .sp-nav .sp-img_slider-nav .slick-slide img, .sp-area .sp-nav .sp-content .qty-btn_area > ul li > a, .sp-slider_area .sp-nav .sp-slider .product-slide_item .inner-slide .single-product .product-img > a .secondary-img, .sp-gallery_area .sp-nav .sp-gallery .lg-image, .lamjp-blog-details .lamjp-tag-line a, .myaccount-tab-content, .login-form .check-box input[type="checkbox"] + label:before, .login-form .check-box input[type="checkbox"] + label:after, .lamjp-login_btn,
.lamjp-register_btn, .table-content table td.lamjp-cart_btn a, .coupon-all .coupon input.button,
.coupon-all .coupon2 input.button, .cart-page-total a, .coupon-accordion span, .coupon-accordion .coupon-content .coupon-info p.form-row input[type="submit"], .order-button-payment input, .compare-table .table tbody tr, .contact-main-page .contact-form-content .contact-form .form-group .lamjp-contact-form_btn, .about-us-area .overview-content > h2:before, .error404-area .search-error-wrapper .lamjp-error_btn {
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
/*----------------------------------------*/
/* 13 - Components - Navigation
/*----------------------------------------*/
/* ---Mobile Menu Wrapper--- */
.mobile-menu_wrapper .offcanvas-menu-inner,
.offcanvas-minicart_wrapper .offcanvas-menu-inner,
.offcanvas-search_wrapper .offcanvas-menu-inner {
position: fixed;
top: 0;
right: -285px;
width: 285px;
height: 100%;
background: white;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 9999;
visibility: hidden;
opacity: 0;
}
@media (max-width: 575px) {
.mobile-menu_wrapper .offcanvas-menu-inner,
.offcanvas-minicart_wrapper .offcanvas-menu-inner,
.offcanvas-search_wrapper .offcanvas-menu-inner {
width: 270px;
}
}
.mobile-menu_wrapper .offcanvas-menu-inner .offcanvas-inner_search,
.offcanvas-minicart_wrapper .offcanvas-menu-inner .offcanvas-inner_search,
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-inner_search {
position: absolute;
z-index: 9;
top: 0;
left: 0;
width: calc(100% - 0px);
padding: 10px;
background-color: #e5e5e5;
}
.mobile-menu_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox,
.offcanvas-minicart_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox,
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox {
position: relative;
}
.mobile-menu_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox > input,
.offcanvas-minicart_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox > input,
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox > input {
background-color: #e5e5e5;
border: 0;
height: 40px;
line-height: 40px;
width: 100%;
padding: 0 52px 0 15px;
}
.mobile-menu_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox > .search_btn,
.offcanvas-minicart_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox > .search_btn,
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox > .search_btn {
background: transparent;
color: #999999;
position: absolute;
top: 10px;
right: 20px;
border: 0;
font-size: 24px;
}
@media (max-width: 991px) {
.mobile-menu_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox > .search_btn:hover,
.offcanvas-minicart_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox > .search_btn:hover,
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-inner_search .inner-searchbox > .search_btn:hover {
color: var(--primary-color);
}
}
.mobile-menu_wrapper.open .offcanvas-menu-inner,
.offcanvas-minicart_wrapper.open .offcanvas-menu-inner,
.offcanvas-search_wrapper.open .offcanvas-menu-inner {
left: auto;
right: 0;
visibility: visible;
padding: 105px 0 0;
opacity: 1;
}
/* ---Offcanvas Close Button--- */
.btn-close {
position: absolute;
top: 0;
left: -60px;
background: #333333;
width: 60px;
height: 60px;
line-height: 63px;
text-align: center;
color: #ffffff;
z-index: 10;
font-size: 24px;
}
@media (max-width: 479px) {
.btn-close {
left: -50px;
width: 50px;
}
}
.btn-close:hover > i {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.btn-close > i {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
display: block;
}
/* ---Offcanvas Navigation Area--- */
.offcanvas-navigation .mobile-menu {
}
.offcanvas-navigation .mobile-menu > li {
height: 100%;
}
.offcanvas-navigation .mobile-menu > li > a span {
position: relative;
font-weight: 600;
}
.offcanvas-navigation .mobile-menu li {
position: relative;
}
.offcanvas-navigation .mobile-menu li > .menu-expand {
position: absolute;
right: 0;
top: 2px;
width: 50px;
height: 100%;
line-height: 40px;
cursor: pointer;
text-align: center;
margin-right: 4px;
}
.offcanvas-navigation .mobile-menu li a {
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
display: block;
padding: 10px 20px;
}
.offcanvas-navigation .mobile-menu li .sub-menu {
padding-left: 10px;
}
.offcanvas-navigation .mobile-menu li .sub-menu li a {
text-transform: capitalize;
font-size: 13px;
}
.offcanvas-navigation .mobile-menu li.menu-open > .menu-expand i:before {
content: '\f123';
color: var(--primary-color);
}
/* ---Header User Setting Area--- */
.user-setting_area {
padding-top: 25px;
}
.user-setting_area > ul > li > a > span {
text-transform: capitalize;
}
/* ---Offcanvas Menu Wrapper--- */
.offcanvas-menu_wrapper {
text-align: center;
}
.offcanvas-menu_wrapper .offcanvas-menu-inner {
padding: 25px 30px 30px;
position: fixed;
top: 0;
left: auto;
right: 0;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 0 0 0;
-ms-transform-origin: 0 0 0;
transform-origin: 0 0 0;
width: 375px;
height: 100%;
background: #ffffff;
z-index: 9999;
visibility: hidden;
min-height: 600px;
overflow-y: auto;
/* ---Offcanvas Component--- */
/* ---Offcanvas Inner Social Link--- */
}
.offcanvas-menu_wrapper .offcanvas-menu-inner .btn-close {
top: auto;
left: auto;
width: auto;
height: auto;
line-height: 1;
background: transparent;
color: #999999;
z-index: 10;
font-size: 24px;
position: relative;
display: inline-block;
text-align: center;
margin: 0 auto;
}
.offcanvas-menu_wrapper .offcanvas-menu-inner .offcanvas-component {
text-align: left;
padding-top: 20px;
}
.offcanvas-menu_wrapper .offcanvas-menu-inner .offcanvas-component.first-child {
padding-top: 25px;
}
.offcanvas-menu_wrapper .offcanvas-menu-inner .offcanvas-component .offcanvas-component_title {
font-size: 16px;
font-weight: 900;
display: block;
padding-bottom: 15px;
text-transform: uppercase;
}
.offcanvas-menu_wrapper .offcanvas-menu-inner .offcanvas-component .offcanvas-component_menu > li {
display: inline-block;
position: relative;
padding-right: 40px;
}
.offcanvas-menu_wrapper .offcanvas-menu-inner .offcanvas-component .offcanvas-component_menu > li:last-child {
padding-right: 0;
}
.offcanvas-menu_wrapper .offcanvas-menu-inner .offcanvas-component .offcanvas-component_menu > li:after {
content: "";
width: 18px;
height: 1px;
background: #e5e5e5;
display: block;
top: 50%;
right: 10px;
position: absolute;
}
.offcanvas-menu_wrapper .offcanvas-menu-inner .offcanvas-component .offcanvas-component_menu > li:last-child:after {
background: transparent;
}
.offcanvas-menu_wrapper .offcanvas-menu-inner .offcanvas-inner-social_link {
position: absolute;
bottom: 30px;
}
.offcanvas-menu_wrapper.open .offcanvas-menu-inner {
top: 0;
visibility: visible;
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.offcanvas-menu_wrapper .offcanvas-inner_logo {
padding: 25px 0;
}
.offcanvas-menu_wrapper .short-desc {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 25px;
}
.offcanvas-menu_wrapper .short-desc > p {
margin-bottom: 0;
}
/* ---Offcanvas Minicart Area--- */
.offcanvas-minicart_wrapper .offcanvas-menu-inner {
padding: 60px !important;
width: 450px;
-webkit-box-shadow: 0px 0 15px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 479px) {
.offcanvas-minicart_wrapper .offcanvas-menu-inner {
width: 100%;
padding: 60px 15px !important;
}
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .btn-close {
top: 0;
right: 0;
left: auto;
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-heading > h4 {
margin-bottom: 0;
padding-bottom: 25px;
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-list {
max-height: 310px;
position: relative;
overflow: auto;
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-list > li {
padding-bottom: 30px;
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-list > li:last-child {
padding-bottom: 0;
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-list > li.minicart-product {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-list > li.minicart-product > a.product-item_remove {
position: absolute;
right: 15px;
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-list > li.minicart-product .product-item_img {
border: 1px solid #e5e5e5;
-ms-flex-preferred-size: 70px;
-webkit-flex-basis: 70px;
flex-basis: 70px;
max-width: 70px;
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-list > li.minicart-product .product-item_img:hover {
border-color: var(--primary-color);
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-list > li.minicart-product .product-item_content {
-webkit-flex-basis: calc(100% - 70px);
-ms-flex-preferred-size: calc(100% - 70px);
flex-basis: calc(100% - 70px);
max-width: calc(100% - 70px);
padding-left: 20px;
padding-right: 10px;
}
@media (max-width: 479px) {
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-list > li.minicart-product .product-item_content a.product-item_title {
font-size: 14px;
}
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-content .minicart-list > li.minicart-product .product-item_content .product-item_quantity {
display: block;
padding-top: 10px;
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-item_total {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
padding: 25px 0;
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-btn_area {
padding-bottom: 15px;
}
.offcanvas-minicart_wrapper .offcanvas-menu-inner .minicart-btn_area .hiraola-btn {
height: 60px;
line-height: 60px;
color: #ffffff !important;
}
/* ---Offcanvas Search Area--- */
.offcanvas-search_wrapper .offcanvas-menu-inner {
background-color: #222222;
opacity: 0.97;
width: 100%;
right: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
visibility: visible;
}
.offcanvas-search_wrapper .offcanvas-menu-inner .btn-close {
background: transparent;
color: #999999;
top: 15px;
right: 15px;
left: auto;
font-size: 45px;
color: #ffffff;
}
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-search {
background-color: #e5e5e5;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
width: calc(100% - 25%);
}
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-search .hm-searchbox {
position: relative;
}
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-search .hm-searchbox > input {
background-color: #333333;
border: 0;
height: 100px;
line-height: 100px;
width: 100%;
padding: 0 100px 0 25px;
color: #ffffff;
}
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-search .hm-searchbox > input::-webkit-input-placeholder {
color: #ffffff;
}
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-search .hm-searchbox > input::-moz-placeholder {
color: #ffffff;
}
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-search .hm-searchbox > input:-ms-input-placeholder {
color: #ffffff;
}
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-search .hm-searchbox > input::-ms-input-placeholder {
color: #ffffff;
}
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-search .hm-searchbox > input::placeholder {
color: #ffffff;
}
.offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-search .hm-searchbox > .search_btn {
position: absolute;
font-size: 48px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 30px;
border: 0;
background: transparent;
color: #ffffff;
}
.offcanvas-search_wrapper.open .offcanvas-menu-inner {
left: auto;
right: 0;
padding: 0;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
visibility: visible;
}
/* ---Category Menu--- */
.category-menu {
position: relative;
}
.category-menu .category-heading {
cursor: pointer;
}
.category-menu .category-heading:hover {
background-color: var(--primary-color-bold);
}
.category-menu .category-heading > h2 {
color: #fff;
margin: 0;
padding: 0;
font-size: 16px;
height: 55px;
line-height: 55px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.category-menu .category-heading > h2:before {
content: "\f394";
font-family: 'Ionicons';
position: absolute;
top: 0;
left: 20px;
font-size: 40px;
}
.category-menu .category-heading > h2:after {
content: "\f3d0";
font-family: 'Ionicons';
position: absolute;
right: 20px;
font-size: 25px;
}
.category-menu .category-heading > h2 > span {
text-transform: uppercase;
line-height: 14px;
line-height: 18px;
}
.category-menu .category-heading > h2 > span:first-child {
font-size: 14px;
}
.category-menu .category-menu-list {
background: #ffffff;
border: 2px solid #29201B;
border-radius: 5px;
padding: 0 20px;
position: absolute;
left: 0;
top: calc(100% - 1px);
display: block;
width: 100%;
z-index: 99;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.category-menu .category-menu-list {
padding: 0 15px;
}
}
.category-menu .category-menu-list > ul > li {
position: relative;
border-bottom: 1px solid #e5e5e5;
}
.category-menu .category-menu-list > ul > li > a {
display: block;
text-transform: capitalize;
overflow: hidden;
font-size: 14px;
font-weight: 600;
padding: 10px 0;
}
.category-menu .category-menu-list > ul > li:hover .cat-mega-menu,
.category-menu .category-menu-list > ul > li:hover .cat-dropdown {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
visibility: visible;
}
/* .category-menu .category-menu-list > ul > li.right-menu > a:after {
content: '\f054';
font-family: 'Font Awesome 5 Free';
font-weight: 600;
font-size: 12px;
position: absolute;
top: 15px;
right: 0;
} */
.category-menu .category-menu-list > ul > li.rx-child {
display: none;
}
.category-menu .category-menu-list > ul > li.rx-parent {
cursor: pointer;
}
.category-menu .category-menu-list > ul > li.rx-parent a.rx-show {
display: none;
}
.category-menu .category-menu-list > ul > li.rx-parent.rx-change a.rx-default {
display: none;
}
.category-menu .category-menu-list > ul > li.rx-parent.rx-change a.rx-show {
display: block;
}
.cat-mega-menu {
background: #ffffff;
position: absolute;
top: 0;
left: 109%;
z-index: 999;
width: 220px;
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
visibility: hidden;
/* width: 640px; */
width: 700px;
padding: 30px;
overflow: hidden;
}
@media (max-width: 991px) {
.cat-mega-menu {
position: static;
z-index: 9;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
visibility: visible;
background-color: transparent;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
width: 100%;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.cat-mega-menu {
left: 108%;
}
}
.cat-mega-menu > li.right-menu {
width: 33.333%;
float: left;
}
.cat-mega-menu > li.cat-mega-title > a {
font-weight: 600;
text-transform: uppercase;
font-size: 16px;
margin-bottom: 15px;
display: block;
line-height: 20px;
position: relative;
}
.cat-mega-menu > li > ul > li > a {
font-size: 14px;
display: block;
line-height: 30px;
font-weight: 400;
color: #666666;
text-transform: capitalize;
}
.cat-mega-menu.cat-mega-menu-2 {
width: 840px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.cat-mega-menu.cat-mega-menu-2 {
/* width: 675px; */
width: 700px;
}
}
@media (max-width: 991px) {
.cat-mega-menu.cat-mega-menu-2 {
width: auto;
}
}
.cat-mega-menu.cat-mega-menu-2 > li.right-menu {
width: 25%;
}
@media (max-width: 991px) {
.cat-mega-menu.cat-mega-menu-2 > li.right-menu {
width: 100%;
}
}
.cat-mega-menu.cat-mega-menu-3 {
/* width: 440px; */
width: 700px;
}
@media (max-width: 991px) {
.cat-mega-menu.cat-mega-menu-3 {
width: auto;
}
}
.cat-mega-menu.cat-mega-menu-3 > li.right-menu {
width: 50%;
}
@media (max-width: 991px) {
.cat-mega-menu.cat-mega-menu-3 > li.right-menu {
width: 100%;
}
}
/* ---Category Dropdown Menu--- */
.cat-dropdown {
border: 1px solid #e5e5e5;
position: absolute;
top: 0;
left: 110%;
background: #ffffff;
z-index: 999;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
visibility: hidden;
width: 205px;
padding: 0 30px;
overflow: hidden;
}
@media (max-width: 991px) {
.cat-dropdown {
position: static;
z-index: 9;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
visibility: visible;
background-color: transparent;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
width: 100%;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
}
.cat-dropdown > li > a {
border-bottom: 1px solid #e5e5e5;
padding: 10px 0;
display: block;
}
.cat-dropdown.cat-dropdown-2 {
width: 320px;
}
@media (max-width: 991px) {
.cat-dropdown.cat-dropdown-2 {
position: static;
z-index: 9;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
visibility: visible;
background-color: transparent;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
width: 100%;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
}
/* ---Category Menu In Mobile Device--- */
@media (max-width: 991px) {
.category-menu-list > ul > li.right-menu .cat-mega-menu > li {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
width: 100%;
padding: 0;
position: relative;
}
.category-menu-list > ul > li.right-menu .cat-mega-menu > li.cat-mega-title > a {
padding: 10px 25px 10px 35px;
font-size: 13px;
font-weight: normal;
position: relative;
margin: 0;
display: block;
border-bottom: 1px dotted #ccc;
text-transform: inherit;
}
.category-menu-list > ul > li.right-menu .cat-mega-menu > li.cat-mega-title > a:after {
display: none;
}
.category-menu-list > ul > li.right-menu .cat-mega-menu > li.cat-mega-title:last-child > a {
border-bottom: 0;
}
.category-menu-list > ul > li.right-menu .cat-mega-menu > li > ul > li > a {
padding: 10px 25px 10px 35px;
font-size: 13px;
font-weight: normal;
position: relative;
margin: 0;
display: block;
text-transform: inherit;
color: inherit;
border-bottom: 1px dotted #ccc;
}
.category-menu-list > ul > li.right-menu .cat-mega-menu > li > ul > li:last-child > a {
border-bottom: 0;
}
.category-menu-list > ul > li.right-menu .cat-dropdown > li > a {
padding: 10px 25px 10px 35px;
font-size: 13px;
font-weight: normal;
position: relative;
margin: 0;
display: block;
text-transform: inherit;
border-bottom: 1px dotted #ccc;
}
.category-menu-list > ul > li > a:hover {
text-decoration: underline;
}
.category-menu-list > ul > li.right-menu .cat-dropdown > li:last-child > a {
border-bottom: 1px dotted;
}
.category-menu-list > ul > li.right-menu > a:after {
display: none;
}
.category-menu-list > ul > li i.menu-expand {
position: absolute;
right: 0;
top: 0;
cursor: pointer;
height: 44px;
width: 45px;
line-height: 45px;
z-index: 9;
display: block;
font-style: normal;
}
.category-menu-list > ul > li i.menu-expand:hover {
background-color: var(--border-color);
}
.category-menu-list > ul > li i.menu-expand:before {
content: "\2795";
font-size: 11px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.category-menu-list > ul > li i.menu-expand.active:before {
content: "\2796";
}
}
/*----------------------------------------*/
/* 25 - Section - Header
/*----------------------------------------*/
/* ---Header Top Area--- */
.header-top_area .container-fluid {
background-color: var(--primary-color);
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-top_area .container-fluid .col-xl-7.col-lg-8,
.header-top_area .container-fluid .col-xl-8.col-lg-7 {
position: static;
}
}
.main-menu-block .main-menu_area {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.main-menu-block .main-menu_area {
position: static !important;
}
}
.main-menu-block .main-menu_area > nav > ul > li {
display: inline-block;
padding-right: 30px;
}
.main-menu-block .main-menu_area > nav > ul > li:last-child {
padding-right: 0;
}
.main-menu-block .main-menu_area > nav > ul > li .hm-dropdown {
position: absolute;
background: #ffffff;
width: 230px;
padding: 20px 0 24px;
-webkit-transform-origin: 0 0 0;
-ms-transform-origin: 0 0 0;
transform-origin: 0 0 0;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.2);
z-index: 9;
}
.main-menu-block .main-menu_area > nav > ul > li .hm-dropdown > li > a {
padding: 10px 20px;
display: block;
}
.main-menu-block .main-menu_area > nav > ul > li:hover .hm-dropdown {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.main-menu-block .main-menu_area > nav > ul > li > ul > li {
position: relative;
}
.main-menu-block .main-menu_area > nav > ul > li > ul > li > ul.hm-sub_dropdown {
top: 30px;
left: 100%;
opacity: 0;
visibility: hidden;
}
.main-menu-block .main-menu_area > nav > ul > li > ul > li > a {
display: block;
}
.main-menu-block .main-menu_area > nav > ul > li > ul > li > a > i {
position: absolute;
top: 14px;
right: 25px;
display: block;
font-size: 12px;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.main-menu-block .main-menu_area > nav > ul > li > ul > li:hover > .hm-sub_dropdown {
top: 0;
opacity: 1;
visibility: visible;
}
.main-menu-block .main-menu_area > nav > ul > li > ul > li:hover > a > i {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.main-menu-block .main-menu_area > nav > ul > li.megamenu-holder .hm-megamenu {
background: #ffffff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
padding: 30px;
-webkit-transform-origin: 0 0 0;
-ms-transform-origin: 0 0 0;
transform-origin: 0 0 0;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
position: absolute;
width: 100%;
left: 0;
top: auto;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
z-index: 99;
}
.main-menu-block .main-menu_area > nav > ul > li.megamenu-holder:hover .hm-megamenu {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.main-menu-block .main-menu_area > nav > ul > li.megamenu-holder > ul > li {
width: 33.33%;
}
.main-menu-block .main-menu_area > nav > ul > li.megamenu-holder > ul > li > span.megamenu-title {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
display: block;
padding-bottom: 15px;
}
.main-menu-block .main-menu_area > nav > ul > li.megamenu-holder > ul > li > ul > li > a {
display: block;
line-height: 35px;
font-size: 16px;
}
.main-menu-block .main-menu_area > nav > ul > li > a {
font-weight: 700;
/* color: #ffffff; */
display: block;
padding: 23px 0;
text-transform: uppercase;
position: relative;
}
.main-menu-block .main-menu_area > nav > ul > li > a > i {
padding-left: 5px;
font-size: 18px;
vertical-align: middle;
}
.header-top_area .ht-menu > ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.header-top_area .ht-menu > ul > li {
display: inline-block;
position: relative;
}
.header-top_area .ht-menu > ul > li:hover .ht-dropdown {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.header-top_area .ht-menu > ul > li .ht-dropdown {
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 0 0 0;
position: absolute;
top: 100%;
left: auto;
background: #ffffff;
border: 1px solid #e5e5e5;
width: 150px;
padding: 10px;
right: 0;
z-index: 99;
}
.header-top_area .ht-menu > ul > li .ht-dropdown > li.active a {
color: var(--primary-color);
}
.header-top_area .ht-menu > ul > li .ht-dropdown > li:hover a {
color: var(--primary-color);
}
.header-top_area .ht-menu > ul > li .ht-dropdown > li a {
border-bottom: 1px solid #e5e5e5;
display: block;
padding: 10px 5px;
line-height: 25px;
font-size: 12px;
}
.header-top_area .ht-menu > ul > li .ht-dropdown > li a img {
margin-right: 5px;
}
.header-top_area .ht-menu > ul > li .ht-dropdown > li:first-child > a {
padding-top: 0;
}
.header-top_area .ht-menu > ul > li .ht-dropdown > li:last-child > a {
border-bottom: 0;
padding-bottom: 0;
}
.header-top_area .ht-menu > ul > li > a {
color: #ffffff;
padding: 23px 15px;
display: block;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-top_area .ht-menu > ul > li > a {
padding: 23px 6px;
}
}
.header-top_area .ht-menu > ul > li > a > i {
padding-left: 5px;
font-size: 11px;
}
.header-top_area .ht-menu > ul > li:last-child > a {
padding-right: 0;
}
.header-top_area.header-sticky {
display: none;
}
/* ---Header Middle Area--- */
.header-middle_area {
background-color: var(--primary-color);
}
@media (max-width: 479px) {
.header-middle_area .header-logo_area {
text-align: center;
}
}
.header-middle_area .hm-form_area {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.hm-searchbox {
background: #ffffff;
border: 1px solid #e5e5e5;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
border-radius: 5px;
height: 55px;
line-height: 55px;
width: 100%;
}
.hm-searchbox .nice-select.select-search-category {
width: 150px;
line-height: 55px;
height: 52px;
margin: 0;
border: 0;
padding: 0 28px 0 25px;
font-size: 13px;
border-radius: 15px 0 0 15px;
position: relative;
}
.hm-searchbox .nice-select.select-search-category > span.current {
display: block;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
}
.select-search-category ul.list {
height: 440px;
overflow-y: auto;
overscroll-behavior-x: none;
}
.hm-searchbox .current:after {
background: #e5e5e5;
position: absolute;
display: block;
content: "";
height: 22px;
width: 1px;
top: 50%;
right: -10px;
font-size: 13px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.hm-searchbox .nice-select.select-search-category:before {
right: 30px;
top: 25px;
}
.hm-searchbox input {
font-size: 13px;
height: 55px;
background: transparent;
border: none;
width: 100%;
padding: 0 33px 0;
}
.hm-searchbox .header-search_btn {
color: white;
border-radius: 0 5px 5px 0;
border-color: var(--primary-color-bold);
text-transform: uppercase;
background: var(--primary-color-bold);
width: 250px;
margin: -1px;
}
.hm-searchbox .header-search_btn > i {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 28px;
font-weight: 700;
}
@media (max-width: 1500px) {
.hm-searchbox .header-search_btn > i {
font-size: 16px;
}
}
.hm-searchbox .header-search_btn > i > span {
font-size: 16px;
padding-left: 10px;
font-style: normal;
}
@media (max-width: 1500px) {
.hm-searchbox .header-search_btn > i > span {
font-size: 13px;
padding-left: 5px;
text-transform: capitalize;
}
}
.hm-searchbox:hover .header-search_btn:hover {
background-color: #000000;
color: #ffffff;
}
.header-right_area > ul > li {
border-radius: 5px;
}
@media (max-width: 991px) {
.header-right_area > ul > li.mobile-menu_wrap {
margin-right: 30px;
}
.header-right_area > ul > li.mobile-menu_wrap > a {
color: #ffffff;
}
}
.header-right_area > ul > li.minicart-wrap {
background: var(--primary-color-bold);
text-align: center;
height: 55px;
line-height: 55px;
}
@media (max-width: 767px) {
.header-right_area > ul > li.minicart-wrap {
margin-right: 0;
}
}
.header-right_area > ul > li.minicart-wrap:hover {
background-color: var(--primary-color-bold);
}
.header-right_area > ul > li.minicart-wrap > a.minicart-btn {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.header-right_area > ul > li.minicart-wrap > a.minicart-btn .minicart-count_area {
position: relative;
}
.header-right_area > ul > li.minicart-wrap > a.minicart-btn .minicart-count_area .item-count {
background-color: #e52e06;
color: #ffffff;
position: absolute;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 100%;
top: 10px;
left: 25px;
font-size: 12px;
}
@media only screen and (min-width: 1200px) and (max-width: 1500px) {
.header-right_area > ul > li.minicart-wrap > a.minicart-btn .minicart-count_area .item-count {
top: 2px;
left: 17px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-right_area > ul > li.minicart-wrap > a.minicart-btn .minicart-count_area .item-count {
top: 2px;
left: 17px;
}
}
.header-right_area > ul > li.minicart-wrap > a.minicart-btn .minicart-count_area > i {
padding-right: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1500px) {
.header-right_area > ul > li.minicart-wrap > a.minicart-btn .minicart-count_area > i {
padding-right: 15px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-right_area > ul > li.minicart-wrap > a.minicart-btn .minicart-count_area > i {
padding-right: 15px;
}
}
.header-right_area > ul > li.minicart-wrap > a.minicart-btn .minicart-front_text span {
line-height: 22px;
display: block;
font-size: 18px;
text-align: left;
}
@media only screen and (min-width: 1200px) and (max-width: 1500px) {
.header-right_area > ul > li.minicart-wrap > a.minicart-btn .minicart-front_text span {
line-height: 18px;
font-size: 15px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-right_area > ul > li.minicart-wrap > a.minicart-btn .minicart-front_text span {
line-height: 18px;
font-size: 15px;
}
}
.header-right_area > ul > li.minicart-wrap > a.minicart-btn .minicart-front_text span.total-price {
font-weight: 700;
color: #ffffff;
}
@media only screen and (min-width: 1200px) and (max-width: 1500px) {
.header-right_area > ul > li.minicart-wrap > a.minicart-btn:before {
font-size: 18px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-right_area > ul > li.minicart-wrap > a.minicart-btn:before {
right: 12px;
font-size: 18px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-right_area > ul > li.minicart-wrap > a.minicart-btn:before {
right: 15px;
font-size: 18px;
}
}
.header-right_area > ul > li.contact-us_wrap {
background-color: var(--primary-color-bold);
height: 55px;
line-height: 55px;
text-align: center;
font-weight: 700;
position: relative;
}
@media (max-width: 767px) {
.header-right_area > ul > li.contact-us_wrap {
display: none;
}
}
.header-right_area > ul > li.contact-us_wrap > a {
padding: 0;
}
@media (max-width: 1500px) {
.header-right_area > ul > li.contact-us_wrap > a {
font-size: 18px;
}
}
/* .header-right_area > ul > li.contact-us_wrap > a:before {
content: "";
border: 9px solid transparent;
border-top-color: var(--primary-color-bold);
border-left-color: var(--primary-color-bold);
position: absolute;
top: 99%;
left: 10%;
} */
.header-right_area > ul > li.contact-us_wrap > a > i {
font-size: 24px;
margin-right: 10px;
}
@media (max-width: 1500px) {
.header-right_area > ul > li.contact-us_wrap > a > i {
font-size: 18px;
margin-right: 5px;
}
}
.header-right_area > ul > li.contact-us_wrap > a {
color: #ffffff;
}
.header-right_area > ul > li > a {
color: #fff;
display: block;
font-size: 24px;
}
.header-right_area > ul > li > a > span {
font-size: 16px;
}
.header-right_area > ul > li:last-child > a {
padding-right: 0;
}
/* ---Header Main Area--- */
/* ---Header Sticky--- */
.header-main_area .header-sticky.sticky {
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
left: 0;
position: fixed;
right: 0;
top: 0;
-webkit-transition: all 300ms ease-in 0s;
-o-transition: all 300ms ease-in 0s;
transition: all 300ms ease-in 0s;
z-index: 1049;
}
@media (max-width: 575px) {
.header-main_area .header-sticky.sticky {
position: static;
}
}
.header-main_area .header-sticky.sticky.header-top_area {
display: none;
}
.header-main_area .header-sticky.sticky.sticky {
-webkit-animation: 800ms ease-in-out 0s normal none 1 running slideInDown;
animation: 800ms ease-in-out 0s normal none 1 running slideInDown;
display: block;
}
.header-main_area .header-sticky.sticky.header-sticky .header-right_area {
padding: 9px 0;
}
.header-main_area .header-sticky.sticky.header-sticky .header-sticky_logo {
padding-top: 25px;
}
document.addEventListener("DOMContentLoaded", () => {
"use strict";
/*-----------------------------
Window When Loading
-----------------------------*/
window.addEventListener("load", () => {
document.querySelector(".loading")?.style.setProperty("opacity", "0");
setTimeout(() => {
document.querySelector(".loading")?.style.setProperty("display", "none");
}, 500);
});
/*-----------------------------
Newsletter Popup
-----------------------------*/
setTimeout(() => {
const popup = document.querySelector(".popup_wrapper");
popup?.style.setProperty("opacity", "1");
popup?.style.setProperty("visibility", "visible");
document.querySelector(".popup_off")?.addEventListener("click", () => {
popup.style.setProperty("display", "none");
});
}, 5000);
/*-----------------------------
Sticky Menu Activation
-----------------------------*/
window.addEventListener("scroll", () => {
const headerSticky = document.querySelector(".header-sticky");
if (window.scrollY > 300) {
headerSticky?.classList.add("sticky");
} else {
headerSticky?.classList.remove("sticky");
}
});
/*-----------------------------
Toolbar Button
-----------------------------*/
document.querySelectorAll(".toolbar-btn").forEach((btn) => {
btn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const targetSelector = btn.getAttribute("href");
const target = document.querySelector(targetSelector);
const siblings = btn.closest("div")?.querySelectorAll(".toolbar-btn");
siblings?.forEach((sibling) => {
if (sibling !== btn) {
const siblingTarget = document.querySelector(
sibling.getAttribute("href")
);
siblingTarget?.classList.remove("open");
}
});
target?.classList.toggle("open");
});
});
/*-----------------------------
Close Button Actions
-----------------------------*/
document.querySelectorAll(".btn-close").forEach((btn) => {
btn.addEventListener("click", (e) => {
e.preventDefault();
const parent = btn.closest(".open");
parent?.classList.remove("open");
});
});
/*----------------------------------------*/
/* Offcanvas
/*----------------------------------------*/
/*----------------------------------------*/
/* Offcanvas
/*----------------------------------------*/
/*Variables*/
const offcanvasNav = document.querySelectorAll(
".offcanvas-menu, .offcanvas-minicart_menu, .offcanvas-search_menu, .mobile-menu"
);
const offcanvasNavWrap = document.querySelectorAll(
".offcanvas-menu_wrapper, .offcanvas-minicart_wrapper, .offcanvas-search_wrapper, .mobile-menu_wrapper"
);
const offcanvasNavSubMenu = document.querySelectorAll(".sub-menu");
const menuToggle = document.querySelector(".menu-btn");
const menuClose = document.querySelector(".btn-close");
/*Add Toggle Button With Off Canvas Sub Menu*/
offcanvasNavSubMenu.forEach((submenu) => {
const expandButton = document.createElement("span");
expandButton.className = "menu-expand";
expandButton.innerHTML =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 mt-2"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" /></svg>';
submenu.parentElement.insertBefore(expandButton, submenu);
});
/*Close Off Canvas Sub Menu*/
offcanvasNavSubMenu.forEach((submenu) => {
submenu.style.display = "none";
});
/*Category Sub Menu Toggle*/
const slideUp = (element, duration = 300) => {
element.style.height = element.offsetHeight + "px";
element.style.transitionProperty = "height, margin, padding";
element.style.transitionDuration = duration + "ms";
element.offsetHeight; // Force repaint
element.style.overflow = "hidden";
element.style.height = 0;
element.style.paddingTop = 0;
element.style.paddingBottom = 0;
element.style.marginTop = 0;
element.style.marginBottom = 0;
setTimeout(() => {
element.style.display = "none";
element.style.removeProperty("height");
element.style.removeProperty("padding-top");
element.style.removeProperty("padding-bottom");
element.style.removeProperty("margin-top");
element.style.removeProperty("margin-bottom");
element.style.removeProperty("overflow");
element.style.removeProperty("transition-duration");
element.style.removeProperty("transition-property");
}, duration);
};
const slideDown = (element, duration = 300) => {
element.style.removeProperty("display");
let display = window.getComputedStyle(element).display;
if (display === "none") display = "block";
element.style.display = display;
const height = element.offsetHeight;
element.style.overflow = "hidden";
element.style.height = 0;
element.style.paddingTop = 0;
element.style.paddingBottom = 0;
element.style.marginTop = 0;
element.style.marginBottom = 0;
element.offsetHeight; // Force repaint
element.style.transitionProperty = "height, margin, padding";
element.style.transitionDuration = duration + "ms";
element.style.height = height + "px";
element.style.removeProperty("padding-top");
element.style.removeProperty("padding-bottom");
element.style.removeProperty("margin-top");
element.style.removeProperty("margin-bottom");
setTimeout(() => {
element.style.removeProperty("height");
element.style.removeProperty("overflow");
element.style.removeProperty("transition-duration");
element.style.removeProperty("transition-property");
}, duration);
};
offcanvasNav.forEach((nav) => {
nav.addEventListener("click", function (e) {
const target = e.target.closest("li a, li .menu-expand");
if (!target) return;
const hasChildren = target.parentElement.className.match(
/\b(menu-item-has-children|has-children|has-sub-menu)\b/
);
if (
hasChildren &&
(target.getAttribute("href") === "#" ||
target.classList.contains("menu-expand"))
) {
e.preventDefault();
const submenu = target.nextElementSibling;
if (submenu && submenu.style.display !== "none") {
slideUp(submenu, 300);
} else if (submenu) {
const visibleSubmenus = target
.closest("li")
.parentElement.querySelectorAll('ul[style="display: block"]');
visibleSubmenus.forEach((menu) => slideUp(menu, 300));
slideDown(submenu, 300);
}
}
if (
target.tagName === "A" ||
target.tagName === "SPAN" ||
target.className.match(/\b(menu-expand)\b/)
) {
target.parentElement.classList.toggle("menu-open");
} else if (
target.tagName === "LI" &&
target.className.match(/\b(menu-item-has-children)\b/)
) {
target.classList.toggle("menu-open");
}
});
});
/*----------------------------------------*/
/* Category Menu
/*----------------------------------------*/
// Click handler for rx-parent
document.querySelector(".rx-parent").addEventListener("click", function () {
const rxChild = document.querySelector(".rx-child");
// Implementing slideToggle-like functionality
if (rxChild.style.display === "none" || !rxChild.style.display) {
rxChild.style.display = "block";
} else {
rxChild.style.display = "none";
}
this.classList.toggle("rx-change");
});
// Category heading click handler
document
.querySelector(".category-heading")
.addEventListener("click", function () {
const menuList = document.querySelector(".category-menu-list");
if (menuList.style.display === "none" || !menuList.style.display) {
menuList.style.display = "block";
} else {
menuList.style.display = "none";
}
});
// Category Menu Toggles
function categorySubMenuToggle() {
const screenSize = window.innerWidth;
if (screenSize <= 991) {
const rightMenuLinks = document.querySelectorAll(
"#cate-toggle .right-menu > a"
);
rightMenuLinks.forEach((link) => {
if (!link.querySelector('i')) {
const icon = document.createElement("i");
icon.className = "expand menu-expand";
link.prepend(icon);
}
});
const rightMenuUls = document.querySelectorAll(
".category-menu .right-menu ul"
);
rightMenuUls.forEach((ul) => (ul.style.display = "none"));
} else {
const icons = document.querySelectorAll(
".category-menu .right-menu > a i"
);
icons.forEach((icon) => icon.remove());
const rightMenuUls = document.querySelectorAll(
".category-menu .right-menu ul"
);
rightMenuUls.forEach((ul) => (ul.style.display = "block"));
}
}
categorySubMenuToggle();
window.addEventListener("resize", categorySubMenuToggle);
// Category Menu Hide
function categoryMenuHide() {
const screenSize = window.innerWidth;
const menuList = document.querySelector(".category-menu-list");
menuList.style.display = screenSize <= 991 ? "none" : "block";
}
categoryMenuHide();
// Hide category menu list in hidden menu
const hiddenMenuList = document.querySelector(
".category-menu-hidden .category-menu-list"
);
if (hiddenMenuList) {
hiddenMenuList.style.display = "none";
}
// Category menu list click handler
document
.querySelector(".category-menu-list")
.addEventListener("click", function (e) {
const target = e.target;
if (target.matches("li a") || target.matches("li a .menu-expand")) {
const element = target.classList.contains("menu-expand")
? target.parentElement
: target;
target.classList.toggle("active");
if (element.parentElement.classList.contains("right-menu")) {
if (
element.getAttribute("href") === "#" ||
target.classList.contains("menu-expand")
) {
const siblingUl = element.nextElementSibling;
if (siblingUl && siblingUl.tagName === "UL") {
if (siblingUl.style.display !== "none") {
siblingUl.style.display = "none";
} else {
const visibleUls = element
.closest("li")
.parentElement.querySelectorAll('ul[style="display: block"]');
visibleUls.forEach((ul) => (ul.style.display = "none"));
siblingUl.style.display = "block";
}
}
}
}
if (
target.classList.contains("menu-expand") ||
element.getAttribute("href") === "#"
) {
e.preventDefault();
return false;
}
}
});
/*-----------------------------
Scroll To Top
-----------------------------*/
const scrollUpButton = document.createElement("button");
scrollUpButton.innerHTML = '<i class="fa fa-angle-double-up"></i>';
scrollUpButton.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
display: none;
z-index: 999;
`;
document.body.appendChild(scrollUpButton);
window.addEventListener("scroll", () => {
if (window.scrollY > 200) {
scrollUpButton.style.display = "block";
} else {
scrollUpButton.style.display = "none";
}
});
scrollUpButton.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
/*-----------------------------
Bootstrap Tooltip
-----------------------------*/
document.querySelectorAll('[data-toggle="tooltip"]').forEach((tooltip) => {
tooltip.addEventListener("mouseenter", () => {
// Implement tooltip logic or use a library for tooltips
tooltip.setAttribute("title", tooltip.dataset.originalTitle || "");
});
});
});